From 9556cdfb0e35477fdcac79979661e98128427d49 Mon Sep 17 00:00:00 2001 From: lb Date: Wed, 23 Aug 2023 15:15:29 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E8=AE=BE=E5=A4=87=E4=BF=A1=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../equipment/components/EquipmentDrawer.vue | 221 +++++++++++------- src/views/core/base/equipment/index.vue | 53 +++-- 2 files changed, 177 insertions(+), 97 deletions(-) diff --git a/src/views/core/base/equipment/components/EquipmentDrawer.vue b/src/views/core/base/equipment/components/EquipmentDrawer.vue index bedfd833..24cb26c7 100644 --- a/src/views/core/base/equipment/components/EquipmentDrawer.vue +++ b/src/views/core/base/equipment/components/EquipmentDrawer.vue @@ -12,7 +12,8 @@ :wrapper-closable="false" class="drawer" custom-class="mes-drawer" - size="60%"> + size="60%" + @closed="$emit('destroy')"> {{ mode.includes('detail') @@ -27,12 +28,17 @@
{{ section.name }} - -
+ +
+ + +
+ +
- 返回 - + + 返回 + + 编辑 - 保存 - 添加属性 + 保存 + + + 添加属性 +
+ + + + + @@ -94,55 +126,123 @@ const SmallTitle = { export default { components: { SmallTitle, DialogForm }, - props: ['sections', 'mode', 'dataForm'], + props: ['sections', 'mode'], data() { return { visible: false, + showForm: false, total: 0, form: {}, - list: [] + list: [], + attrTitle: '', + attrForm: { + id: null, + equipmentId: null, + name: '', + value: '', + }, + attrFormVisible: false, + attrRows: [ + [ + { + input: true, + label: '属性名称', + prop: 'name', + rules: [{ required: true, message: '不能为空', trigger: 'blur' }], + }, + ], + [ + { + input: true, + label: '属性值', + prop: 'value', + }, + ], + ], }; }, + mounted() { + for (const section of this.sections) { + // 请求具体信息 + if ('url' in section) { + this.$axios({ + url: section.url, + method: section.method || 'get', + params: section.queryParams || null, + data: section.data || null, + }).then(({ data }) => { + if (section.key == 'base') { + this.form = data; + this.showForm = true; + console.log('setting form: ', this.form, data); + } else if (section.key == 'attrs') { + this.list = data.list; + this.total = data.total; + } + }); + } + } + }, methods: { - handleTableBtnClick() {}, + handleTableBtnClick() {}, - handleEmitFun(){}, + handleEmitFun() {}, - init(id) { + init() { this.visible = true; + }, - return; - - this.$nextTick(() => { - this.$refs['dataForm'].resetFields(); - - if (this.dataForm.id) { - // 获取产品详情 - getProduct(id).then((response) => { - this.dataForm = response.data; - }); - // 获取产品的属性列表 - this.getList(); - } else { - getCode().then((res) => { - this.dataForm.code = res.data; + // 保存表单 + handleSave() { + this.$refs['form'][0].validate(async (valid) => { + if (valid) { + const isEdit = this.mode == 'edit'; + await this.$axios({ + url: this.sections[0][isEdit ? 'urlUpdate' : 'urlCreate'], + method: isEdit ? 'put' : 'post', + data: this.form, }); + this.$modal.msgSuccess(`${isEdit ? '更新' : '创建'}成功`); + this.visible = false; + this.$emit('refreshDataList'); } }); }, - getList() { - // 获取产品的属性列表 - const params = { - pageSize: 10, - pageNo: 1, - productId: this.dataForm.id, + handleCancel() { + this.visible = false; + }, + + // 开启编辑 + toggleEdit() { + this.mode = 'edit'; + }, + + // 开启属性编辑/新增 + handleAddAttr() { + this.attrForm = { + id: null, + equipmentId: null, + name: '', + value: '', }; - getProductAttrPage(params).then((response) => { - this.productAttributeList = response.data.list; - this.listQuery.total = response.data.total; + this.attrTitle = '添加设备属性'; + this.attrFormVisible = true; + }, + + // 提交属性表 + submitAttrForm() { + this.$refs['form'].validate((valid) => { + if (!valid) { + return; + } }); }, + + closeAttrForm() { + this.attrFormVisible = false; + }, + handleClick(raw) { if (raw.type === 'delete') { this.$confirm( @@ -175,31 +275,7 @@ export default { this.addNew(raw.data.id); } }, - // 表单提交 - dataFormSubmit() { - this.$refs['dataForm'].validate((valid) => { - if (valid) { - // 修改的提交 - if (this.dataForm.id) { - updateProduct(this.dataForm).then((response) => { - this.$modal.msgSuccess('修改成功'); - this.visible = false; - this.$emit('refreshDataList'); - }); - return; - } - // 添加的提交 - createProduct(this.dataForm).then((response) => { - this.$modal.msgSuccess('新增成功'); - this.visible = false; - this.$emit('refreshDataList'); - }); - } - }); - }, - goEdit() { - this.isdetail = false; - }, + // 新增 / 修改 addNew(id) { this.addOrUpdateVisible = true; @@ -207,11 +283,6 @@ export default { this.$refs.addOrUpdate.init(id); }); }, - goback() { - this.$emit('refreshDataList'); - this.visible = false; - this.initData(); - }, }, }; @@ -221,10 +292,6 @@ export default { border-radius: 8px 0 0 8px; } -.drawer >>> .el-form-item__label { - padding: 0; -} - .drawer >>> .el-drawer__header { margin: 0; padding: 32px 32px 24px; @@ -232,10 +299,6 @@ export default { margin-bottom: 0px; } -.small-title { - color: #000; -} - .small-title::before { content: ''; display: inline-block; @@ -255,7 +318,7 @@ export default { .drawer-body__content { flex: 1; - background: #eee; + /* background: #eee; */ padding: 20px 30px; overflow-y: auto; } diff --git a/src/views/core/base/equipment/index.vue b/src/views/core/base/equipment/index.vue index ab2fafc9..0c9c917f 100644 --- a/src/views/core/base/equipment/index.vue +++ b/src/views/core/base/equipment/index.vue @@ -45,26 +45,35 @@ ref="drawer" :mode="editMode" :sections="[ - { name: '基本信息', key: 'base', rows: rows, dataForm: form }, + { + name: '基本信息', + key: 'base', + rows: rows, + url: '/base/equipment/get', + urlUpdate: '/base/equipment/update', + urlCreate: '/base/equipment/create', + queryParams: { id: form.id }, + }, { name: '属性列表', key: 'attrs', props: drawerListProps, - url: '', - navigator: true, // 是否显示分页器 - pageNo: null, - pageSize: null, + url: '/base/equipment-attr/page', + queryParams: { + equipmentId: form.id, + pageNo: 1, + pageSize: 10, + }, tableBtns: [ { name: 'edit', url: '', permission: '' }, { name: 'delete', url: '', permission: '' }, ], + allowAdd: true, }, ]" - @confirm="submitForm" + @refreshDataList="getList" @cancel="editVisible = false" - @destroy="editVisible = false"> -

Ceshi ceshi ceshi

- + @destroy="editVisible = false" />
@@ -363,7 +372,9 @@ export default { name: '', }, // 表单参数 - form: {}, + form: { + id: null, + }, }; }, created() { @@ -489,18 +500,24 @@ export default { }, // 重写 basicPageMixin 里的 处理表格按钮 方法 handleTableBtnClick({ data, type }) { + console.log('[handleTableBtnClick]', data, type); switch (type) { case 'edit': - this.editMode = 'edit'; this.reset(); - const id = data.id; - getEquipment(id).then((response) => { - this.form = response.data; - this.editVisible = true; - this.$nextTick(() => { - this.$refs['drawer'].init(); - }); + this.editMode = 'edit'; + this.form.id = data.id; + this.editVisible = true; + 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);