|
|
@@ -12,7 +12,8 @@ |
|
|
|
:wrapper-closable="false" |
|
|
|
class="drawer" |
|
|
|
custom-class="mes-drawer" |
|
|
|
size="60%"> |
|
|
|
size="60%" |
|
|
|
@closed="$emit('destroy')"> |
|
|
|
<SmallTitle slot="title"> |
|
|
|
{{ |
|
|
|
mode.includes('detail') |
|
|
@@ -27,12 +28,17 @@ |
|
|
|
<div class="drawer-body__content"> |
|
|
|
<section v-for="(section, index) in sections" :key="section.key"> |
|
|
|
<SmallTitle v-if="index != 0">{{ section.name }}</SmallTitle> |
|
|
|
<DialogForm |
|
|
|
v-if="section.key == 'base'" |
|
|
|
ref="form" |
|
|
|
:dataForm="form" |
|
|
|
:rows="section.rows" /> |
|
|
|
<div v-if="section.key == 'attrs'"> |
|
|
|
|
|
|
|
<div class="form-part" v-if="section.key == 'base'"> |
|
|
|
<el-skeleton v-if="!showForm" animated /> |
|
|
|
<DialogForm |
|
|
|
v-if="showForm" |
|
|
|
ref="form" |
|
|
|
:dataForm="form" |
|
|
|
:rows="section.rows" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="section.key == 'attrs'" style="margin-top: 12px"> |
|
|
|
<base-table |
|
|
|
:table-props="section.props" |
|
|
|
:page="section.pageNo || 1" |
|
|
@@ -51,16 +57,42 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="drawer-body__footer"> |
|
|
|
<el-button style="margin-right: 10px" @click="goback()">返回</el-button> |
|
|
|
<el-button v-if="mode == 'detail'" type="primary" @click="goEdit()"> |
|
|
|
<el-button style="margin-right: 10px" @click="handleCancel"> |
|
|
|
返回 |
|
|
|
</el-button> |
|
|
|
<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit"> |
|
|
|
编辑 |
|
|
|
</el-button> |
|
|
|
<span v-else> |
|
|
|
<el-button type="primary" @click="dataFormSubmit()">保存</el-button> |
|
|
|
<el-button type="primary" @click="addNew()">添加属性</el-button> |
|
|
|
<el-button type="primary" @click="handleSave">保存</el-button> |
|
|
|
<!-- sections的第二项必须是 属性列表 --> |
|
|
|
<el-button |
|
|
|
v-if="sections[1].allowAdd" |
|
|
|
type="primary" |
|
|
|
@click="handleAddAttr"> |
|
|
|
添加属性 |
|
|
|
</el-button> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 属性对话框 --> |
|
|
|
<base-dialog |
|
|
|
v-if="sections[1].allowAdd" |
|
|
|
:dialogTitle="attrTitle" |
|
|
|
:dialogVisible="attrFormVisible" |
|
|
|
width="35%" |
|
|
|
:append-to-body="true" |
|
|
|
custom-class="baseDialog" |
|
|
|
@close="closeAttrForm" |
|
|
|
@cancel="closeAttrForm" |
|
|
|
@confirm="submitAttrForm"> |
|
|
|
<DialogForm |
|
|
|
v-if="attrFormVisible" |
|
|
|
ref="attrForm" |
|
|
|
:dataForm="attrForm" |
|
|
|
:rows="attrRows" /> |
|
|
|
</base-dialog> |
|
|
|
</el-drawer> |
|
|
|
</template> |
|
|
|
|
|
|
@@ -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(); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
@@ -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; |
|
|
|
} |
|
|
|