test #47
@ -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>
|
||||
|
||||
<div class="form-part" v-if="section.key == 'base'">
|
||||
<el-skeleton v-if="!showForm" animated />
|
||||
<DialogForm
|
||||
v-if="section.key == 'base'"
|
||||
v-if="showForm"
|
||||
ref="form"
|
||||
:dataForm="form"
|
||||
:rows="section.rows" />
|
||||
<div v-if="section.key == 'attrs'">
|
||||
</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() {},
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@ -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">
|
||||
<h1>Ceshi ceshi ceshi</h1>
|
||||
</EquipmentDrawer>
|
||||
@destroy="editVisible = false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -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.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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user