From 54d22292c173d4f0275ea3ac9834463a22ef9c30 Mon Sep 17 00:00:00 2001 From: lb Date: Thu, 24 Aug 2023 11:07:55 +0800 Subject: [PATCH] =?UTF-8?q?update=20equipment=20drawer=E7=9A=84=E9=80=BB?= =?UTF-8?q?=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.dev | 5 +- src/components/DialogForm/index.vue | 2 +- src/mixins/lb/basicPageMixin.js | 6 + .../equipment/components/EquipmentDrawer.vue | 138 +++++++++++++++--- src/views/core/base/equipment/index.vue | 50 ++++--- 5 files changed, 162 insertions(+), 39 deletions(-) diff --git a/.env.dev b/.env.dev index a9d58fdc..dc6c5365 100644 --- a/.env.dev +++ b/.env.dev @@ -5,8 +5,9 @@ ENV = 'development' VUE_APP_TITLE = 芋道管理系统 # 芋道管理系统/开发环境 -VUE_APP_BASE_API = 'http://192.168.1.49:48080' -# VUE_APP_BASE_API = 'http://192.168.0.33:48080' +# VUE_APP_BASE_API = 'http://192.168.1.49:48080' +# VUE_APP_BASE_API = 'http://192.168.1.8:48080' +VUE_APP_BASE_API = 'http://192.168.0.33:48080' # VUE_APP_BASE_API = 'http://192.168.1.188:48080' # 路由懒加载 diff --git a/src/components/DialogForm/index.vue b/src/components/DialogForm/index.vue index 8a307a38..ae3ad324 100644 --- a/src/components/DialogForm/index.vue +++ b/src/components/DialogForm/index.vue @@ -53,7 +53,7 @@ :action="col.url" :on-success="handleUploadSuccess" v-bind="col.bind"> - 点击上传 + 点击上传
{{ col.uploadTips || '只能上传jpg/png文件，大小不超过2MB' }}
diff --git a/src/mixins/lb/basicPageMixin.js b/src/mixins/lb/basicPageMixin.js index af4dbeda..73dd4a19 100644 --- a/src/mixins/lb/basicPageMixin.js +++ b/src/mixins/lb/basicPageMixin.js @@ -87,6 +87,12 @@ export default { }, handleEmitFun(val) { console.log('emit unf', val); + switch (val.action) { + // 查看详情 + case 'show-detail': + this.viewDetail(val.value); // 交由每个组件自己实现 + break; + } }, // 获取列表数据 getList() {}, diff --git a/src/views/core/base/equipment/components/EquipmentDrawer.vue b/src/views/core/base/equipment/components/EquipmentDrawer.vue index 24cb26c7..dc4a170a 100644 --- a/src/views/core/base/equipment/components/EquipmentDrawer.vue +++ b/src/views/core/base/equipment/components/EquipmentDrawer.vue @@ -35,11 +35,12 @@ v-if="showForm" ref="form" :dataForm="form" - :rows="section.rows" /> + :rows="formRows" />
@@ -126,7 +127,7 @@ const SmallTitle = { export default { components: { SmallTitle, DialogForm }, - props: ['sections', 'mode'], + props: ['sections', 'mode', 'dataId'], // dataId 作为一个通用的存放id的字段 data() { return { visible: false, @@ -159,23 +160,46 @@ export default { }, ], ], + attrQuery: null, // 属性列表的请求 + infoQuery: null, // 基本信息的请求 + attrFormSubmitting: false, + attrListLoading: false }; }, + computed: { + formRows() { + return this.sections[0].rows.map((row) => { + return row.map((col) => ({ + ...col, + bind: { + // 详情 模式下，禁用各种输入 + disabled: this.mode == 'detail', + }, + })); + }); + }, + tableBtn() { + return this.mode == 'detail' ? [] : this.sections[1].tableBtn; + }, + }, mounted() { for (const section of this.sections) { // 请求具体信息 if ('url' in section) { - this.$axios({ + const query = { url: section.url, method: section.method || 'get', params: section.queryParams || null, data: section.data || null, - }).then(({ data }) => { + }; + this.$axios(query).then(({ data }) => { if (section.key == 'base') { this.form = data; this.showForm = true; + this.infoQuery = query; console.log('setting form: ', this.form, data); } else if (section.key == 'attrs') { + this.attrQuery = query; this.list = data.list; this.total = data.total; } @@ -184,14 +208,35 @@ export default { } }, methods: { - handleTableBtnClick() {}, + handleTableBtnClick({ type, data }) { + switch (type) { + case 'edit': + this.handleEditAttr(data.id); + break; + case 'delete': + this.handleDeleteAttr(data.id); + break; + } + }, - handleEmitFun() {}, + handleEmitFun(val) { + console.log('handleEmitFun', val); + }, init() { this.visible = true; }, + async getAttrList() { + this.attrListLoading = true; + const res = await this.$axios(this.attrQuery); + if (res.code == 0) { + this.list = data.list; + this.total = data.total; + } + this.attrListLoading = false; + }, + // 保存表单 handleSave() { this.$refs['form'][0].validate(async (valid) => { @@ -218,11 +263,12 @@ export default { this.mode = 'edit'; }, - // 开启属性编辑/新增 + // 新增属性 handleAddAttr() { + if (!this.dataId) return this.$message.error('请先创建设备信息'); this.attrForm = { id: null, - equipmentId: null, + equipmentId: this.dataId, name: '', value: '', }; @@ -230,13 +276,75 @@ export default { this.attrFormVisible = true; }, + // 编辑属性 + async handleEditAttr(attrId) { + const res = await this.$axios({ + url: this.sections[1].urlDetail, + method: 'get', + params: { id: attrId }, + }); + if (res.code == 0) { + this.attrForm = res.data; + this.attrTitle = '编辑设备属性'; + this.attrFormVisible = true; + } + }, + + // 删除属性 + handleDeleteAttr(attrId) { + this.$confirm('确定删除该属性?', '提示', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning', + }) + .then(async () => { + const res = await this.$axios({ + url: this.sections[1].urlDelete, + method: 'delete', + params: { id: attrId }, + }); + if (res.code == 0) { + this.$message({ + message: '删除成功', + type: 'success', + duration: 1500, + onClose: () => { + this.getAttrList(); + }, + }); + } + }) + .catch(() => {}); + }, + // 提交属性表 - submitAttrForm() { - this.$refs['form'].validate((valid) => { + async submitAttrForm() { + this.$refs['attrForm'].validate((valid) => { if (!valid) { return; } }); + console.log('this.attrform', this.attrForm); + const isEdit = this.attrForm.id != null; + this.attrFormSubmitting = true; + const res = await this.$axios({ + url: isEdit ? this.sections[1].urlUpdate : this.sections[1].urlCreate, + method: isEdit ? 'put' : 'post', + data: this.attrForm, + }); + + if (res.code == 0) { + this.closeAttrForm(); + this.$message({ + message: `${isEdit ? '更新' : '创建'}成功`, + type: 'success', + duration: 1500, + onClose: () => { + this.getAttrList(); + }, + }); + } + this.attrFormSubmitting = false; }, closeAttrForm() { @@ -275,14 +383,6 @@ export default { this.addNew(raw.data.id); } }, - - // 新增 / 修改 - addNew(id) { - this.addOrUpdateVisible = true; - this.$nextTick(() => { - this.$refs.addOrUpdate.init(id); - }); - }, }, }; diff --git a/src/views/core/base/equipment/index.vue b/src/views/core/base/equipment/index.vue index 0c9c917f..00bca940 100644 --- a/src/views/core/base/equipment/index.vue +++ b/src/views/core/base/equipment/index.vue @@ -44,6 +44,7 @@ v-if="editVisible" ref="drawer" :mode="editMode" + :data-id="form.id" :sections="[ { name: '基本信息', @@ -59,15 +60,29 @@ key: 'attrs', props: drawerListProps, url: '/base/equipment-attr/page', + urlCreate: '/base/equipment-attr/create', + urlUpdate: '/base/equipment-attr/update', + urlDelete: '/base/equipment-attr/delete', + urlDetail: '/base/equipment-attr/get', queryParams: { equipmentId: form.id, pageNo: 1, pageSize: 10, }, - tableBtns: [ - { name: 'edit', url: '', permission: '' }, - { name: 'delete', url: '', permission: '' }, - ], + tableBtn: [ + this.$auth.hasPermi('base:equipment-attr:update') + ? { + type: 'edit', + btnName: '修改', + } + : undefined, + this.$auth.hasPermi('base:equipment-attr:delete') + ? { + type: 'delete', + btnName: '删除', + } + : undefined, + ].filter((v) => v), allowAdd: true, }, ]" @@ -130,7 +145,6 @@ export default { { prop: 'name', label: '设备名称', align: 'center' }, { prop: 'code', label: '检测编码', align: 'center' }, { prop: 'equipmentType', label: '设备类型', align: 'center' }, - { prop: 'equipmentGroup', label: '设备分组', align: 'center' }, { prop: 'enName', label: '英文名称', align: 'center' }, { prop: 'abbr', label: '缩写', align: 'center' }, { @@ -205,7 +219,7 @@ export default { prop: 'name', rules: [{ required: true, message: '不能为空', trigger: 'blur' }], // bind: { - // disabled: true, // some condition, like detail mode... + // disabled: this.editMode == 'detail', // some condition, like detail mode... // } }, { @@ -359,8 +373,8 @@ export default { width: 180, filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), }, - { prop: 'keyName', label: '属性名称', align: 'center' }, - { prop: 'keyValue', label: '属性值', align: 'center' }, + { prop: 'name', label: '属性名称', align: 'center' }, + { prop: 'value', label: '属性值', align: 'center' }, ], // 是否显示弹出层 open: false, @@ -498,7 +512,17 @@ export default { }) .catch(() => {}); }, - // 重写 basicPageMixin 里的 处理表格按钮 方法 + // 查看详情 + viewDetail(id) { + this.reset(); + this.editMode = 'detail'; + this.form.id = id; + this.editVisible = true; + this.$nextTick(() => { + this.$refs['drawer'].init(); + }); + }, + // overwrite basicPageMixin 里的 处理表格按钮 方法 handleTableBtnClick({ data, type }) { console.log('[handleTableBtnClick]', data, type); switch (type) { @@ -510,14 +534,6 @@ export default { this.$nextTick(() => { this.$refs['drawer'].init(); }); - - // getEquipment(id).then((response) => { - // this.form = response.data; - // this.editVisible = true; - // this.$nextTick(() => { - // this.$refs['drawer'].init(); - // }); - // }); break; case 'delete': this.handleDelete(data);