test #47
@ -12,7 +12,8 @@
|
|||||||
:wrapper-closable="false"
|
:wrapper-closable="false"
|
||||||
class="drawer"
|
class="drawer"
|
||||||
custom-class="mes-drawer"
|
custom-class="mes-drawer"
|
||||||
size="60%">
|
size="60%"
|
||||||
|
@closed="$emit('destroy')">
|
||||||
<SmallTitle slot="title">
|
<SmallTitle slot="title">
|
||||||
{{
|
{{
|
||||||
mode.includes('detail')
|
mode.includes('detail')
|
||||||
@ -27,12 +28,17 @@
|
|||||||
<div class="drawer-body__content">
|
<div class="drawer-body__content">
|
||||||
<section v-for="(section, index) in sections" :key="section.key">
|
<section v-for="(section, index) in sections" :key="section.key">
|
||||||
<SmallTitle v-if="index != 0">{{ section.name }}</SmallTitle>
|
<SmallTitle v-if="index != 0">{{ section.name }}</SmallTitle>
|
||||||
<DialogForm
|
|
||||||
v-if="section.key == 'base'"
|
<div class="form-part" v-if="section.key == 'base'">
|
||||||
ref="form"
|
<el-skeleton v-if="!showForm" animated />
|
||||||
:dataForm="form"
|
<DialogForm
|
||||||
:rows="section.rows" />
|
v-if="showForm"
|
||||||
<div v-if="section.key == 'attrs'">
|
ref="form"
|
||||||
|
:dataForm="form"
|
||||||
|
:rows="section.rows" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="section.key == 'attrs'" style="margin-top: 12px">
|
||||||
<base-table
|
<base-table
|
||||||
:table-props="section.props"
|
:table-props="section.props"
|
||||||
:page="section.pageNo || 1"
|
:page="section.pageNo || 1"
|
||||||
@ -51,16 +57,42 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="drawer-body__footer">
|
<div class="drawer-body__footer">
|
||||||
<el-button style="margin-right: 10px" @click="goback()">返回</el-button>
|
<el-button style="margin-right: 10px" @click="handleCancel">
|
||||||
<el-button v-if="mode == 'detail'" type="primary" @click="goEdit()">
|
返回
|
||||||
|
</el-button>
|
||||||
|
<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit">
|
||||||
编辑
|
编辑
|
||||||
</el-button>
|
</el-button>
|
||||||
<span v-else>
|
<span v-else>
|
||||||
<el-button type="primary" @click="dataFormSubmit()">保存</el-button>
|
<el-button type="primary" @click="handleSave">保存</el-button>
|
||||||
<el-button type="primary" @click="addNew()">添加属性</el-button>
|
<!-- sections的第二项必须是 属性列表 -->
|
||||||
|
<el-button
|
||||||
|
v-if="sections[1].allowAdd"
|
||||||
|
type="primary"
|
||||||
|
@click="handleAddAttr">
|
||||||
|
添加属性
|
||||||
|
</el-button>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</el-drawer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -94,55 +126,123 @@ const SmallTitle = {
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { SmallTitle, DialogForm },
|
components: { SmallTitle, DialogForm },
|
||||||
props: ['sections', 'mode', 'dataForm'],
|
props: ['sections', 'mode'],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
visible: false,
|
visible: false,
|
||||||
|
showForm: false,
|
||||||
total: 0,
|
total: 0,
|
||||||
form: {},
|
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: {
|
methods: {
|
||||||
handleTableBtnClick() {},
|
handleTableBtnClick() {},
|
||||||
|
|
||||||
handleEmitFun(){},
|
handleEmitFun() {},
|
||||||
|
|
||||||
init(id) {
|
init() {
|
||||||
this.visible = true;
|
this.visible = true;
|
||||||
|
},
|
||||||
|
|
||||||
return;
|
// 保存表单
|
||||||
|
handleSave() {
|
||||||
this.$nextTick(() => {
|
this.$refs['form'][0].validate(async (valid) => {
|
||||||
this.$refs['dataForm'].resetFields();
|
if (valid) {
|
||||||
|
const isEdit = this.mode == 'edit';
|
||||||
if (this.dataForm.id) {
|
await this.$axios({
|
||||||
// 获取产品详情
|
url: this.sections[0][isEdit ? 'urlUpdate' : 'urlCreate'],
|
||||||
getProduct(id).then((response) => {
|
method: isEdit ? 'put' : 'post',
|
||||||
this.dataForm = response.data;
|
data: this.form,
|
||||||
});
|
|
||||||
// 获取产品的属性列表
|
|
||||||
this.getList();
|
|
||||||
} else {
|
|
||||||
getCode().then((res) => {
|
|
||||||
this.dataForm.code = res.data;
|
|
||||||
});
|
});
|
||||||
|
this.$modal.msgSuccess(`${isEdit ? '更新' : '创建'}成功`);
|
||||||
|
this.visible = false;
|
||||||
|
this.$emit('refreshDataList');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
getList() {
|
handleCancel() {
|
||||||
// 获取产品的属性列表
|
this.visible = false;
|
||||||
const params = {
|
},
|
||||||
pageSize: 10,
|
|
||||||
pageNo: 1,
|
// 开启编辑
|
||||||
productId: this.dataForm.id,
|
toggleEdit() {
|
||||||
|
this.mode = 'edit';
|
||||||
|
},
|
||||||
|
|
||||||
|
// 开启属性编辑/新增
|
||||||
|
handleAddAttr() {
|
||||||
|
this.attrForm = {
|
||||||
|
id: null,
|
||||||
|
equipmentId: null,
|
||||||
|
name: '',
|
||||||
|
value: '',
|
||||||
};
|
};
|
||||||
getProductAttrPage(params).then((response) => {
|
this.attrTitle = '添加设备属性';
|
||||||
this.productAttributeList = response.data.list;
|
this.attrFormVisible = true;
|
||||||
this.listQuery.total = response.data.total;
|
},
|
||||||
|
|
||||||
|
// 提交属性表
|
||||||
|
submitAttrForm() {
|
||||||
|
this.$refs['form'].validate((valid) => {
|
||||||
|
if (!valid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
closeAttrForm() {
|
||||||
|
this.attrFormVisible = false;
|
||||||
|
},
|
||||||
|
|
||||||
handleClick(raw) {
|
handleClick(raw) {
|
||||||
if (raw.type === 'delete') {
|
if (raw.type === 'delete') {
|
||||||
this.$confirm(
|
this.$confirm(
|
||||||
@ -175,31 +275,7 @@ export default {
|
|||||||
this.addNew(raw.data.id);
|
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) {
|
addNew(id) {
|
||||||
this.addOrUpdateVisible = true;
|
this.addOrUpdateVisible = true;
|
||||||
@ -207,11 +283,6 @@ export default {
|
|||||||
this.$refs.addOrUpdate.init(id);
|
this.$refs.addOrUpdate.init(id);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
goback() {
|
|
||||||
this.$emit('refreshDataList');
|
|
||||||
this.visible = false;
|
|
||||||
this.initData();
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@ -221,10 +292,6 @@ export default {
|
|||||||
border-radius: 8px 0 0 8px;
|
border-radius: 8px 0 0 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer >>> .el-form-item__label {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drawer >>> .el-drawer__header {
|
.drawer >>> .el-drawer__header {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 32px 32px 24px;
|
padding: 32px 32px 24px;
|
||||||
@ -232,10 +299,6 @@ export default {
|
|||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-title {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-title::before {
|
.small-title::before {
|
||||||
content: '';
|
content: '';
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -255,7 +318,7 @@ export default {
|
|||||||
|
|
||||||
.drawer-body__content {
|
.drawer-body__content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
background: #eee;
|
/* background: #eee; */
|
||||||
padding: 20px 30px;
|
padding: 20px 30px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
@ -45,26 +45,35 @@
|
|||||||
ref="drawer"
|
ref="drawer"
|
||||||
:mode="editMode"
|
:mode="editMode"
|
||||||
:sections="[
|
: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: '属性列表',
|
name: '属性列表',
|
||||||
key: 'attrs',
|
key: 'attrs',
|
||||||
props: drawerListProps,
|
props: drawerListProps,
|
||||||
url: '',
|
url: '/base/equipment-attr/page',
|
||||||
navigator: true, // 是否显示分页器
|
queryParams: {
|
||||||
pageNo: null,
|
equipmentId: form.id,
|
||||||
pageSize: null,
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
tableBtns: [
|
tableBtns: [
|
||||||
{ name: 'edit', url: '', permission: '' },
|
{ name: 'edit', url: '', permission: '' },
|
||||||
{ name: 'delete', url: '', permission: '' },
|
{ name: 'delete', url: '', permission: '' },
|
||||||
],
|
],
|
||||||
|
allowAdd: true,
|
||||||
},
|
},
|
||||||
]"
|
]"
|
||||||
@confirm="submitForm"
|
@refreshDataList="getList"
|
||||||
@cancel="editVisible = false"
|
@cancel="editVisible = false"
|
||||||
@destroy="editVisible = false">
|
@destroy="editVisible = false" />
|
||||||
<h1>Ceshi ceshi ceshi</h1>
|
|
||||||
</EquipmentDrawer>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -363,7 +372,9 @@ export default {
|
|||||||
name: '',
|
name: '',
|
||||||
},
|
},
|
||||||
// 表单参数
|
// 表单参数
|
||||||
form: {},
|
form: {
|
||||||
|
id: null,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
@ -489,18 +500,24 @@ export default {
|
|||||||
},
|
},
|
||||||
// 重写 basicPageMixin 里的 处理表格按钮 方法
|
// 重写 basicPageMixin 里的 处理表格按钮 方法
|
||||||
handleTableBtnClick({ data, type }) {
|
handleTableBtnClick({ data, type }) {
|
||||||
|
console.log('[handleTableBtnClick]', data, type);
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'edit':
|
case 'edit':
|
||||||
this.editMode = 'edit';
|
|
||||||
this.reset();
|
this.reset();
|
||||||
const id = data.id;
|
this.editMode = 'edit';
|
||||||
getEquipment(id).then((response) => {
|
this.form.id = data.id;
|
||||||
this.form = response.data;
|
this.editVisible = true;
|
||||||
this.editVisible = true;
|
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);
|
||||||
|
Loading…
Reference in New Issue
Block a user