update equipment drawer的逻辑

This commit is contained in:
lb 2023-08-24 11:07:55 +08:00
parent 9556cdfb0e
commit 54d22292c1
5 changed files with 162 additions and 39 deletions

View File

@ -5,8 +5,9 @@ ENV = 'development'
VUE_APP_TITLE = 芋道管理系统 VUE_APP_TITLE = 芋道管理系统
# 芋道管理系统/开发环境 # 芋道管理系统/开发环境
VUE_APP_BASE_API = 'http://192.168.1.49:48080' # 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.8:48080'
VUE_APP_BASE_API = 'http://192.168.0.33:48080'
# VUE_APP_BASE_API = 'http://192.168.1.188:48080' # VUE_APP_BASE_API = 'http://192.168.1.188:48080'
# 路由懒加载 # 路由懒加载

View File

@ -53,7 +53,7 @@
:action="col.url" :action="col.url"
:on-success="handleUploadSuccess" :on-success="handleUploadSuccess"
v-bind="col.bind"> v-bind="col.bind">
<el-button size="small" type="primary">点击上传</el-button> <el-button size="small" type="primary" :disabled="col.bind?.disabled || false">点击上传</el-button>
<div class="el-upload__tip" slot="tip" v-if="col.uploadTips"> <div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
{{ col.uploadTips || '只能上传jpg/png文件大小不超过2MB' }} {{ col.uploadTips || '只能上传jpg/png文件大小不超过2MB' }}
</div> </div>

View File

@ -87,6 +87,12 @@ export default {
}, },
handleEmitFun(val) { handleEmitFun(val) {
console.log('emit unf', val); console.log('emit unf', val);
switch (val.action) {
// 查看详情
case 'show-detail':
this.viewDetail(val.value); // 交由每个组件自己实现
break;
}
}, },
// 获取列表数据 // 获取列表数据
getList() {}, getList() {},

View File

@ -35,11 +35,12 @@
v-if="showForm" v-if="showForm"
ref="form" ref="form"
:dataForm="form" :dataForm="form"
:rows="section.rows" /> :rows="formRows" />
</div> </div>
<div v-if="section.key == 'attrs'" style="margin-top: 12px"> <div v-if="section.key == 'attrs'" style="margin-top: 12px">
<base-table <base-table
v-loading="attrListLoading"
:table-props="section.props" :table-props="section.props"
:page="section.pageNo || 1" :page="section.pageNo || 1"
:limit="section.pageSize || 10" :limit="section.pageSize || 10"
@ -49,7 +50,7 @@
v-if="section.tableBtn" v-if="section.tableBtn"
slot="handleBtn" slot="handleBtn"
label="操作" label="操作"
:method-list="section.tableBtn" :method-list="tableBtn"
@clickBtn="handleTableBtnClick" /> @clickBtn="handleTableBtnClick" />
</base-table> </base-table>
</div> </div>
@ -126,7 +127,7 @@ const SmallTitle = {
export default { export default {
components: { SmallTitle, DialogForm }, components: { SmallTitle, DialogForm },
props: ['sections', 'mode'], props: ['sections', 'mode', 'dataId'], // dataId id
data() { data() {
return { return {
visible: false, 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() { mounted() {
for (const section of this.sections) { for (const section of this.sections) {
// //
if ('url' in section) { if ('url' in section) {
this.$axios({ const query = {
url: section.url, url: section.url,
method: section.method || 'get', method: section.method || 'get',
params: section.queryParams || null, params: section.queryParams || null,
data: section.data || null, data: section.data || null,
}).then(({ data }) => { };
this.$axios(query).then(({ data }) => {
if (section.key == 'base') { if (section.key == 'base') {
this.form = data; this.form = data;
this.showForm = true; this.showForm = true;
this.infoQuery = query;
console.log('setting form: ', this.form, data); console.log('setting form: ', this.form, data);
} else if (section.key == 'attrs') { } else if (section.key == 'attrs') {
this.attrQuery = query;
this.list = data.list; this.list = data.list;
this.total = data.total; this.total = data.total;
} }
@ -184,14 +208,35 @@ export default {
} }
}, },
methods: { 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() { init() {
this.visible = true; 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() { handleSave() {
this.$refs['form'][0].validate(async (valid) => { this.$refs['form'][0].validate(async (valid) => {
@ -218,11 +263,12 @@ export default {
this.mode = 'edit'; this.mode = 'edit';
}, },
// / //
handleAddAttr() { handleAddAttr() {
if (!this.dataId) return this.$message.error('请先创建设备信息');
this.attrForm = { this.attrForm = {
id: null, id: null,
equipmentId: null, equipmentId: this.dataId,
name: '', name: '',
value: '', value: '',
}; };
@ -230,13 +276,75 @@ export default {
this.attrFormVisible = true; 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() { async submitAttrForm() {
this.$refs['form'].validate((valid) => { this.$refs['attrForm'].validate((valid) => {
if (!valid) { if (!valid) {
return; 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() { closeAttrForm() {
@ -275,14 +383,6 @@ export default {
this.addNew(raw.data.id); this.addNew(raw.data.id);
} }
}, },
// /
addNew(id) {
this.addOrUpdateVisible = true;
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id);
});
},
}, },
}; };
</script> </script>

View File

@ -44,6 +44,7 @@
v-if="editVisible" v-if="editVisible"
ref="drawer" ref="drawer"
:mode="editMode" :mode="editMode"
:data-id="form.id"
:sections="[ :sections="[
{ {
name: '基本信息', name: '基本信息',
@ -59,15 +60,29 @@
key: 'attrs', key: 'attrs',
props: drawerListProps, props: drawerListProps,
url: '/base/equipment-attr/page', 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: { queryParams: {
equipmentId: form.id, equipmentId: form.id,
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
}, },
tableBtns: [ tableBtn: [
{ name: 'edit', url: '', permission: '' }, this.$auth.hasPermi('base:equipment-attr:update')
{ name: 'delete', url: '', permission: '' }, ? {
], type: 'edit',
btnName: '修改',
}
: undefined,
this.$auth.hasPermi('base:equipment-attr:delete')
? {
type: 'delete',
btnName: '删除',
}
: undefined,
].filter((v) => v),
allowAdd: true, allowAdd: true,
}, },
]" ]"
@ -130,7 +145,6 @@ export default {
{ prop: 'name', label: '设备名称', align: 'center' }, { prop: 'name', label: '设备名称', align: 'center' },
{ prop: 'code', label: '检测编码', align: 'center' }, { prop: 'code', label: '检测编码', align: 'center' },
{ prop: 'equipmentType', label: '设备类型', align: 'center' }, { prop: 'equipmentType', label: '设备类型', align: 'center' },
{ prop: 'equipmentGroup', label: '设备分组', align: 'center' },
{ prop: 'enName', label: '英文名称', align: 'center' }, { prop: 'enName', label: '英文名称', align: 'center' },
{ prop: 'abbr', label: '缩写', align: 'center' }, { prop: 'abbr', label: '缩写', align: 'center' },
{ {
@ -205,7 +219,7 @@ export default {
prop: 'name', prop: 'name',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }], rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
// bind: { // 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, width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
}, },
{ prop: 'keyName', label: '属性名称', align: 'center' }, { prop: 'name', label: '属性名称', align: 'center' },
{ prop: 'keyValue', label: '属性值', align: 'center' }, { prop: 'value', label: '属性值', align: 'center' },
], ],
// //
open: false, open: false,
@ -498,7 +512,17 @@ export default {
}) })
.catch(() => {}); .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 }) { handleTableBtnClick({ data, type }) {
console.log('[handleTableBtnClick]', data, type); console.log('[handleTableBtnClick]', data, type);
switch (type) { switch (type) {
@ -510,14 +534,6 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['drawer'].init(); this.$refs['drawer'].init();
}); });
// getEquipment(id).then((response) => {
// this.form = response.data;
// this.editVisible = true;
// this.$nextTick(() => {
// this.$refs['drawer'].init();
// });
// });
break; break;
case 'delete': case 'delete':
this.handleDelete(data); this.handleDelete(data);