|
@@ -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() { |
|
|
|
|
|
this.$refs['form'].validate((valid) => { |
|
|
|
|
|
|
|
|
async submitAttrForm() { |
|
|
|
|
|
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> |
|
|