| | |
| | | <template> |
| | | <div class="main tabs_main" style="height:89%"> |
| | | <div class="main_header"> |
| | | <div class="header_item"> |
| | | <span class="header_label">预埋件名称:</span> |
| | | <el-input v-model="search.embedmentName" :size="size" clearable placeholder="请输入物品名称"></el-input> |
| | | </div> |
| | | <div class="header_item"> |
| | | <el-button icon="el-icon-search" v-if="showButton('search')" @click="searchButtonInfo(true)">查询</el-button> |
| | | <el-button class="search_btn" icon="el-icon-plus" v-if="showButton('insert')" @click="insertProp">新增</el-button> |
| | | </div> |
| | | </div> |
| | | <div class="main_content"> |
| | | <el-table v-loading="loading" :data="dataList" height="100%"> |
| | | <el-table-column align="center" label="序号" width="60"> |
| | | <template #default="scope"> |
| | | <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="embedmentName" label="预埋件名称" align="center"></el-table-column> |
| | | <el-table-column prop="dictName" label="类别" align="center"></el-table-column> |
| | | <el-table-column prop="embedmentModel" label="型号规格" align="center"></el-table-column> |
| | | <el-table-column prop="unit" label="计量单位" align="center"></el-table-column> |
| | | <el-table-column prop="position" label="位置" align="center"></el-table-column> |
| | | <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip></el-table-column> |
| | | <el-table-column label="操作" align="center"> |
| | | <template #default="{ row }"> |
| | | <el-button class="table_btn" size="mini" v-if="showButton('update')" @click="updateProp(row)">修改</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | <div class="main_footer"> |
| | | <el-pagination background @current-change="changePageNum" @size-change="changePageSize" :current-page="pageNum" |
| | | :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" |
| | | :total="total"> |
| | | </el-pagination> |
| | | </div> |
| | | <el-dialog class="prop_dialog" :title="asyncTitle ? '新增辅材种类' : '修改辅材种类'" :close-on-click-modal="false" |
| | | :visible.sync="asyncVisible" width="35%"> |
| | | <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="rule_form"> |
| | | <el-form-item label="预埋件名称:" prop="embedmentName"> |
| | | <el-input v-model="ruleForm.embedmentName" :size="size" clearable placeholder="请输入预埋件名称" |
| | | @input="changeInput"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="类别:" prop="embedmentType"> |
| | | <el-select v-model="ruleForm.embedmentType" placeholder="请选择类别"> |
| | | <el-option v-for="item in optionsType" :key="item.dictId" :label="item.dictName" :value="item.dictId"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="规格型号:" prop="embedmentModel"> |
| | | <el-input v-model="ruleForm.embedmentModel" :size="size" clearable placeholder="请输入规格型号"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="计量单位:" prop="unit"> |
| | | <el-input v-model="ruleForm.unit" :size="size" clearable placeholder="请输入计量单位"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="位置:" prop="position"> |
| | | <el-input v-model="ruleForm.position" :size="size" clearable placeholder="请输入位置"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="备注:" prop="remark"> |
| | | <el-input v-model="ruleForm.remark" :size="size" clearable placeholder="请输入备注" type="textarea" |
| | | :rows="2"></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer"> |
| | | <el-button @click="asyncVisible = false">取 消</el-button> |
| | | <el-button class="submit_btn" @click="asyncTitle ? submitInsert() : submitUpdate()">提 交</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import {buttonPinia} from '@/pinia/index'; |
| | | import {throttle, changeSize} from '@/plugins/public'; // 导入节流、动态切换组件尺寸方法 |
| | | export default { |
| | | data() { |
| | | return { |
| | | size: changeSize(), // 组件尺寸 |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | search: {},//查询条件 |
| | | total: 0, |
| | | loading: false, |
| | | optionsType: [],//辅材类别 |
| | | dataList: [], //辅材种类信息列表 |
| | | asyncTitle: true, // 对话框title 新增:true 修改:false |
| | | asyncVisible: false, // 添加 修改对话框 |
| | | ruleForm: {}, // 按钮表单 |
| | | rules: { |
| | | embedmentName: [{ |
| | | required: true, |
| | | message: '请输入物品名称', |
| | | trigger: 'blur' |
| | | }], |
| | | embedmentModel: [{ |
| | | required: true, |
| | | message: '请输入规格型号', |
| | | trigger: 'blur' |
| | | }], |
| | | unit: [{ |
| | | required: true, |
| | | message: '请输入单位', |
| | | trigger: 'blur' |
| | | }], |
| | | position: [{ |
| | | required: true, |
| | | message: '请输入位置', |
| | | trigger: 'blur' |
| | | }], |
| | | }, |
| | | } |
| | | }, |
| | | watch: { |
| | | asyncVisible(bol) { |
| | | if (!bol) { |
| | | this.ruleForm = {}; |
| | | this.$refs.ruleForm.resetFields(); |
| | | } |
| | | } |
| | | }, |
| | | mounted() { |
| | | const that = this; |
| | | // 根据窗口大小动态修改组件尺寸 |
| | | window.onresize = () => { |
| | | that.size = changeSize(); |
| | | } |
| | | that.searchButtonInfo(true); |
| | | }, |
| | | methods: { |
| | | //输入增加限制 |
| | | changeInput(val) { |
| | | let reg = RegExp(/-/) |
| | | if (reg.test(val)) { |
| | | this.$message.warning('禁止输入‘-’字符!!!') |
| | | this.$set(this.ruleForm, 'embedmentName', '') |
| | | } |
| | | }, |
| | | //获取辅材类别信息 |
| | | getAllTypes() { |
| | | let params = { |
| | | pageNum: 1, |
| | | pageSize: 100000000 |
| | | } |
| | | this.$api.Materials.embedded.typeModels(params).then(res => { |
| | | if (res.statusMsg === 'ok') { |
| | | this.optionsType = res.data |
| | | } else { |
| | | this.$message.warning(res.statusMsg) |
| | | } |
| | | }) |
| | | }, |
| | | // 查询按钮列表信息 |
| | | searchButtonInfo(bol) { |
| | | if (bol) { |
| | | this.pageNum = 1; |
| | | } |
| | | let params = Object.assign({}, this.search, { |
| | | pageNum: this.pageNum, |
| | | pageSize: this.pageSize |
| | | }) |
| | | this.loading = true; |
| | | this.$api.Materials.embedded.typeGetLists(params).then((res) => { |
| | | if (res.statusMsg === 'ok') { |
| | | this.total = res.data.total; |
| | | this.dataList = res.data.list; |
| | | } |
| | | this.loading = false; |
| | | }) |
| | | }, |
| | | // 新增按钮信息 |
| | | insertProp() { |
| | | this.asyncTitle = true; |
| | | this.asyncVisible = true; |
| | | }, |
| | | // 修改按钮信息 |
| | | updateProp(row) { |
| | | this.asyncTitle = false; |
| | | this.asyncVisible = true; |
| | | this.$api.Materials.embedded.typeDetail({id: row.id}).then(res => { |
| | | if (res.statusMsg === 'ok') { |
| | | this.ruleForm = res.data |
| | | } else { |
| | | this.$message.warning(res.statusMsg) |
| | | } |
| | | }) |
| | | }, |
| | | // 提交添加按钮信息 |
| | | submitInsert: throttle(function () { |
| | | this.$refs.ruleForm.validate((valid) => { |
| | | if (valid) { |
| | | const params = Object.assign({}, this.ruleForm); |
| | | this.$api.Materials.embedded.typeInsert(params).then((res) => { |
| | | if (res.statusMsg === 'ok') { |
| | | this.asyncVisible = false; |
| | | this.searchButtonInfo(true); |
| | | this.$message.success('添加成功!'); |
| | | } else { |
| | | this.$message.warning(res.statusMsg); |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | }, 3000), |
| | | // 提交修改按钮信息 |
| | | submitUpdate: throttle(function () { |
| | | this.$refs.ruleForm.validate((valid) => { |
| | | if (valid) { |
| | | const params = Object.assign({}, this.ruleForm); |
| | | this.$api.Materials.embedded.typeUpdate(params).then((res) => { |
| | | if (res.statusMsg === 'ok') { |
| | | this.asyncVisible = false; |
| | | this.searchButtonInfo(true); |
| | | this.$message.success('修改成功!'); |
| | | } else { |
| | | this.$message.warning(res.statusMsg); |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | }, 3000), |
| | | // 判断按钮权限信息 |
| | | showButton(str) { |
| | | const pinia = buttonPinia(); |
| | | return pinia.$state.buttonInfo.includes(str); |
| | | }, |
| | | // 切换页数 |
| | | changePageNum(page) { |
| | | this.pageNum = page; |
| | | this.searchButtonInfo(); |
| | | }, |
| | | // 切换每页条数 |
| | | changePageSize(size) { |
| | | this.pageSize = size; |
| | | this.searchButtonInfo(); |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | @import '@/style/layout-main.scss'; |
| | | <template>
|
| | | <div class="main tabs_main" style="height:89%">
|
| | | <div class="main_header">
|
| | | <div class="header_item">
|
| | | <span class="header_label">预埋件名称:</span>
|
| | | <el-input v-model="search.embedmentName" :size="size" clearable placeholder="请输入预埋件名称"></el-input>
|
| | | </div>
|
| | | <div class="header_item">
|
| | | <el-button icon="el-icon-search" v-if="showButton('search')" @click="searchButtonInfo(true)">查询</el-button>
|
| | | <el-button class="search_btn" icon="el-icon-plus" v-if="showButton('insert')" @click="insertProp">新增</el-button>
|
| | | </div>
|
| | | </div>
|
| | | <div class="main_content">
|
| | | <el-table v-loading="loading" :data="dataList" height="100%">
|
| | | <el-table-column align="center" label="序号" width="60">
|
| | | <template #default="scope">
|
| | | <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
|
| | | </template>
|
| | | </el-table-column>
|
| | | <el-table-column prop="embedmentName" label="预埋件名称" align="center"></el-table-column>
|
| | | <el-table-column prop="dictName" label="类别" align="center"></el-table-column>
|
| | | <el-table-column prop="embedmentModel" label="型号规格" align="center"></el-table-column>
|
| | | <el-table-column prop="unit" label="计量单位" align="center"></el-table-column>
|
| | | <el-table-column prop="position" label="位置" align="center"></el-table-column>
|
| | | <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip></el-table-column>
|
| | | <el-table-column label="操作" align="center">
|
| | | <template #default="{ row }">
|
| | | <el-button class="table_btn" size="mini" v-if="showButton('update')" @click="updateProp(row)">修改</el-button>
|
| | | </template>
|
| | | </el-table-column>
|
| | | </el-table>
|
| | | </div>
|
| | | <div class="main_footer">
|
| | | <el-pagination background @current-change="changePageNum" @size-change="changePageSize" :current-page="pageNum"
|
| | | :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
|
| | | :total="total">
|
| | | </el-pagination>
|
| | | </div>
|
| | | <el-dialog class="prop_dialog" :title="asyncTitle ? '新增预埋件种类' : '修改预埋件种类'" :close-on-click-modal="false"
|
| | | :visible.sync="asyncVisible" width="35%">
|
| | | <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="rule_form">
|
| | | <el-form-item label="预埋件名称:" prop="embedmentName">
|
| | | <el-input v-model="ruleForm.embedmentName" :size="size" clearable placeholder="请输入预埋件名称"
|
| | | @input="changeInput"></el-input>
|
| | | </el-form-item>
|
| | | <el-form-item label="类别:" prop="embedmentType">
|
| | | <el-select v-model="ruleForm.embedmentType" placeholder="请选择类别">
|
| | | <el-option v-for="item in optionsType" :key="item.dictId" :label="item.dictName" :value="item.dictId">
|
| | | </el-option>
|
| | | </el-select>
|
| | | </el-form-item>
|
| | | <el-form-item label="规格型号:" prop="embedmentModel">
|
| | | <el-input v-model="ruleForm.embedmentModel" :size="size" clearable placeholder="请输入规格型号"></el-input>
|
| | | </el-form-item>
|
| | | <el-form-item label="计量单位:" prop="unit">
|
| | | <el-input v-model="ruleForm.unit" :size="size" clearable placeholder="请输入计量单位"></el-input>
|
| | | </el-form-item>
|
| | | <el-form-item label="位置:" prop="position">
|
| | | <el-input v-model="ruleForm.position" :size="size" clearable placeholder="请输入位置"></el-input>
|
| | | </el-form-item>
|
| | | <el-form-item label="备注:" prop="remark">
|
| | | <el-input v-model="ruleForm.remark" :size="size" clearable placeholder="请输入备注" type="textarea"
|
| | | :rows="2"></el-input>
|
| | | </el-form-item>
|
| | | </el-form>
|
| | | <div slot="footer">
|
| | | <el-button @click="asyncVisible = false">取 消</el-button>
|
| | | <el-button class="submit_btn" @click="asyncTitle ? submitInsert() : submitUpdate()">提 交</el-button>
|
| | | </div>
|
| | | </el-dialog>
|
| | | </div>
|
| | | </template>
|
| | |
|
| | | <script>
|
| | | import {buttonPinia} from '@/pinia/index';
|
| | | import {throttle, changeSize} from '@/plugins/public'; // 导入节流、动态切换组件尺寸方法
|
| | | export default {
|
| | | data() {
|
| | | return {
|
| | | size: changeSize(), // 组件尺寸
|
| | | pageNum: 1,
|
| | | pageSize: 10,
|
| | | search: {},//查询条件
|
| | | total: 0,
|
| | | loading: false,
|
| | | optionsType: [],//辅材类别
|
| | | dataList: [], //辅材种类信息列表
|
| | | asyncTitle: true, // 对话框title 新增:true 修改:false
|
| | | asyncVisible: false, // 添加 修改对话框
|
| | | ruleForm: {}, // 按钮表单
|
| | | rules: {
|
| | | embedmentName: [{
|
| | | required: true,
|
| | | message: '请输入物品名称',
|
| | | trigger: 'blur'
|
| | | }],
|
| | | embedmentModel: [{
|
| | | required: true,
|
| | | message: '请输入规格型号',
|
| | | trigger: 'blur'
|
| | | }],
|
| | | unit: [{
|
| | | required: true,
|
| | | message: '请输入单位',
|
| | | trigger: 'blur'
|
| | | }],
|
| | | position: [{
|
| | | required: true,
|
| | | message: '请输入位置',
|
| | | trigger: 'blur'
|
| | | }],
|
| | | },
|
| | | }
|
| | | },
|
| | | watch: {
|
| | | asyncVisible(bol) {
|
| | | if (!bol) {
|
| | | this.ruleForm = {};
|
| | | this.$refs.ruleForm.resetFields();
|
| | | }
|
| | | }
|
| | | },
|
| | | mounted() {
|
| | | const that = this;
|
| | | // 根据窗口大小动态修改组件尺寸
|
| | | window.onresize = () => {
|
| | | that.size = changeSize();
|
| | | }
|
| | | that.searchButtonInfo(true);
|
| | | },
|
| | | methods: {
|
| | | //输入增加限制
|
| | | changeInput(val) {
|
| | | let reg = RegExp(/-/)
|
| | | if (reg.test(val)) {
|
| | | this.$message.warning('禁止输入‘-’字符!!!')
|
| | | this.$set(this.ruleForm, 'embedmentName', '')
|
| | | }
|
| | | },
|
| | | //获取辅材类别信息
|
| | | getAllTypes() {
|
| | | let params = {
|
| | | pageNum: 1,
|
| | | pageSize: 100000000
|
| | | }
|
| | | this.$api.Materials.embedded.typeModels(params).then(res => {
|
| | | if (res.statusMsg === 'ok') {
|
| | | this.optionsType = res.data
|
| | | } else {
|
| | | this.$message.warning(res.statusMsg)
|
| | | }
|
| | | })
|
| | | },
|
| | | // 查询按钮列表信息
|
| | | searchButtonInfo(bol) {
|
| | | if (bol) {
|
| | | this.pageNum = 1;
|
| | | }
|
| | | let params = Object.assign({}, this.search, {
|
| | | pageNum: this.pageNum,
|
| | | pageSize: this.pageSize
|
| | | })
|
| | | this.loading = true;
|
| | | this.$api.Materials.embedded.typeGetLists(params).then((res) => {
|
| | | if (res.statusMsg === 'ok') {
|
| | | this.total = res.data.total;
|
| | | this.dataList = res.data.list;
|
| | | }
|
| | | this.loading = false;
|
| | | })
|
| | | },
|
| | | // 新增按钮信息
|
| | | insertProp() {
|
| | | this.asyncTitle = true;
|
| | | this.asyncVisible = true;
|
| | | },
|
| | | // 修改按钮信息
|
| | | updateProp(row) {
|
| | | this.asyncTitle = false;
|
| | | this.asyncVisible = true;
|
| | | this.$api.Materials.embedded.typeDetail({id: row.id}).then(res => {
|
| | | if (res.statusMsg === 'ok') {
|
| | | this.ruleForm = res.data
|
| | | } else {
|
| | | this.$message.warning(res.statusMsg)
|
| | | }
|
| | | })
|
| | | },
|
| | | // 提交添加按钮信息
|
| | | submitInsert: throttle(function () {
|
| | | this.$refs.ruleForm.validate((valid) => {
|
| | | if (valid) {
|
| | | const params = Object.assign({}, this.ruleForm);
|
| | | this.$api.Materials.embedded.typeInsert(params).then((res) => {
|
| | | if (res.statusMsg === 'ok') {
|
| | | this.asyncVisible = false;
|
| | | this.searchButtonInfo(true);
|
| | | this.$message.success('添加成功!');
|
| | | } else {
|
| | | this.$message.warning(res.statusMsg);
|
| | | }
|
| | | })
|
| | | }
|
| | | })
|
| | | }, 3000),
|
| | | // 提交修改按钮信息
|
| | | submitUpdate: throttle(function () {
|
| | | this.$refs.ruleForm.validate((valid) => {
|
| | | if (valid) {
|
| | | const params = Object.assign({}, this.ruleForm);
|
| | | this.$api.Materials.embedded.typeUpdate(params).then((res) => {
|
| | | if (res.statusMsg === 'ok') {
|
| | | this.asyncVisible = false;
|
| | | this.searchButtonInfo(true);
|
| | | this.$message.success('修改成功!');
|
| | | } else {
|
| | | this.$message.warning(res.statusMsg);
|
| | | }
|
| | | })
|
| | | }
|
| | | })
|
| | | }, 3000),
|
| | | // 判断按钮权限信息
|
| | | showButton(str) {
|
| | | const pinia = buttonPinia();
|
| | | return pinia.$state.buttonInfo.includes(str);
|
| | | },
|
| | | // 切换页数
|
| | | changePageNum(page) {
|
| | | this.pageNum = page;
|
| | | this.searchButtonInfo();
|
| | | },
|
| | | // 切换每页条数
|
| | | changePageSize(size) {
|
| | | this.pageSize = size;
|
| | | this.searchButtonInfo();
|
| | | }
|
| | | }
|
| | | }
|
| | | </script>
|
| | |
|
| | | <style lang="scss" scoped>
|
| | | @import '@/style/layout-main.scss';
|
| | | </style> |