update drawer
This commit is contained in:
parent
4eb9b321db
commit
fc2037a10a
@ -7,80 +7,71 @@
|
||||
|
||||
<template>
|
||||
<el-drawer
|
||||
:visible.sync="visible"
|
||||
:visible="visible"
|
||||
:show-close="false"
|
||||
:wrapper-closable="false"
|
||||
class="drawer"
|
||||
custom-class="mes-drawer"
|
||||
size="60%">
|
||||
<SmallTitle slot="title">
|
||||
{{ isdetail ? '详情' : !dataForm.id ? '新增' : '编辑' }}
|
||||
{{
|
||||
mode.includes('detail')
|
||||
? '详情'
|
||||
: mode.includes('edit')
|
||||
? '编辑'
|
||||
: '新增'
|
||||
}}
|
||||
</SmallTitle>
|
||||
|
||||
<div class="content">
|
||||
<div class="visual-part">
|
||||
<SmallTitle
|
||||
style="margin: 16px 0; padding-left: 8px"
|
||||
:no-padding="true">
|
||||
产品属性列表
|
||||
</SmallTitle>
|
||||
<div class="drawer-body flex">
|
||||
<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'">
|
||||
<base-table
|
||||
:table-props="section.props"
|
||||
:page="section.pageNo || 1"
|
||||
:limit="section.pageSize || 10"
|
||||
:table-data="list"
|
||||
@emitFun="handleEmitFun">
|
||||
<method-btn
|
||||
v-if="section.tableBtn"
|
||||
slot="handleBtn"
|
||||
label="操作"
|
||||
:method-list="section.tableBtn"
|
||||
@clickBtn="handleTableBtnClick" />
|
||||
</base-table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- <div class="attr-list">
|
||||
<base-table
|
||||
:table-props="tableProps"
|
||||
:page="listQuery.pageNo"
|
||||
:limit="listQuery.pageSize"
|
||||
:table-data="productAttributeList">
|
||||
<method-btn
|
||||
v-if="!isdetail"
|
||||
slot="handleBtn"
|
||||
:width="120"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="listQuery.total > 0"
|
||||
:total="listQuery.total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
:page-sizes="[5, 10, 15]"
|
||||
@pagination="getList" />
|
||||
</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>
|
||||
<span v-else>
|
||||
<el-button type="primary" @click="dataFormSubmit()">保存</el-button>
|
||||
<el-button type="primary" @click="addNew()">添加属性</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: absolute; bottom: 24px; right: 24px">
|
||||
<el-button style="margin-right: 10px" @click="goback()">返回</el-button>
|
||||
<el-button v-if="isdetail" type="primary" @click="goEdit()">
|
||||
编辑
|
||||
</el-button>
|
||||
<span v-if="!isdetail">
|
||||
<el-button type="primary" @click="dataFormSubmit()">保存</el-button>
|
||||
<el-button
|
||||
v-if="dataForm.id && !isdetail"
|
||||
type="primary"
|
||||
@click="addNew()">
|
||||
添加属性
|
||||
</el-button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- <product-attr-add
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdate"
|
||||
:product-id="dataForm.id"
|
||||
@refreshDataList="getList" /> -->
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DialogForm from '@/components/DialogForm';
|
||||
|
||||
const SmallTitle = {
|
||||
name: 'SmallTitle',
|
||||
props: ['size'],
|
||||
data() {
|
||||
return {
|
||||
title: 'Default title',
|
||||
};
|
||||
return {};
|
||||
},
|
||||
methods: {},
|
||||
render: function (h) {
|
||||
@ -96,96 +87,32 @@ const SmallTitle = {
|
||||
fontFamily: '微软雅黑, Microsoft YaHei, Arial, Helvetica, sans-serif',
|
||||
},
|
||||
},
|
||||
this.title
|
||||
this.$slots.default
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
components: { SmallTitle },
|
||||
components: { SmallTitle, DialogForm },
|
||||
props: ['sections', 'mode', 'dataForm'],
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
addOrUpdateVisible: false,
|
||||
productAttributeList: [],
|
||||
dataForm: {
|
||||
id: null,
|
||||
name: '', // 产品名称
|
||||
code: '', // 产品编码
|
||||
area: 0, // 单位平方数(float only)
|
||||
typeDictValue: null, // 产品类型id
|
||||
processTime: null, // 单位产品用时 (s)
|
||||
specifications: '', // 规格
|
||||
unitDictValue: '', // 单位id
|
||||
},
|
||||
listQuery: {
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
total: 0,
|
||||
},
|
||||
dataRule: {
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: '产品编码不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
// {
|
||||
// type: 'number',
|
||||
// message: '产品编码为数字类型',
|
||||
// trigger: 'blur',
|
||||
// transfom: 'val => Number(val)',
|
||||
// },
|
||||
],
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '产品名称不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
typeDictValue: [
|
||||
{
|
||||
required: true,
|
||||
message: '产品类型不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
area: [
|
||||
// {
|
||||
// type: 'float',
|
||||
// message: '单位平方数为浮点类型',
|
||||
// trigger: 'blur',
|
||||
// transfom: 'val => Float(val)',
|
||||
// },
|
||||
],
|
||||
processTime: [
|
||||
{
|
||||
required: true,
|
||||
message: '完成单位产品用时不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
// {
|
||||
// type: 'number',
|
||||
// message: '完成单位产品用时为浮点类型',
|
||||
// trigger: 'blur',
|
||||
// transfom: 'val => Number(val)',
|
||||
// },
|
||||
],
|
||||
},
|
||||
isdetail: false,
|
||||
total: 0,
|
||||
form: {},
|
||||
list: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.productAttributeList.splice(0);
|
||||
},
|
||||
init(id, isdetail) {
|
||||
this.initData();
|
||||
this.isdetail = isdetail || false;
|
||||
this.dataForm.id = id || null;
|
||||
handleTableBtnClick() {},
|
||||
|
||||
handleEmitFun(){},
|
||||
|
||||
init(id) {
|
||||
this.visible = true;
|
||||
|
||||
return;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields();
|
||||
|
||||
@ -302,30 +229,40 @@ export default {
|
||||
margin: 0;
|
||||
padding: 32px 32px 24px;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.drawer >>> .content {
|
||||
padding: 0 24px 30px;
|
||||
.small-title {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.small-title::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 4px;
|
||||
height: 22px;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
background-color: #0b58ff;
|
||||
}
|
||||
|
||||
.drawer-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.drawer >>> .visual-part {
|
||||
flex: 1 auto;
|
||||
max-height: 76vh;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
padding-right: 10px; /* 调整滚动条样式 */
|
||||
.drawer-body__content {
|
||||
flex: 1;
|
||||
background: #eee;
|
||||
padding: 20px 30px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.drawer >>> .el-form,
|
||||
.drawer >>> .attr-list {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.small-title {
|
||||
color: red;
|
||||
.drawer-body__footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -42,7 +42,24 @@
|
||||
<!-- 设备 详情 - 编辑 -->
|
||||
<EquipmentDrawer
|
||||
v-if="editVisible"
|
||||
ref="drawer"
|
||||
:mode="editMode"
|
||||
:sections="[
|
||||
{ name: '基本信息', key: 'base', rows: rows, dataForm: form },
|
||||
{
|
||||
name: '属性列表',
|
||||
key: 'attrs',
|
||||
props: drawerListProps,
|
||||
url: '',
|
||||
navigator: true, // 是否显示分页器
|
||||
pageNo: null,
|
||||
pageSize: null,
|
||||
tableBtns: [
|
||||
{ name: 'edit', url: '', permission: '' },
|
||||
{ name: 'delete', url: '', permission: '' },
|
||||
],
|
||||
},
|
||||
]"
|
||||
@confirm="submitForm"
|
||||
@cancel="editVisible = false"
|
||||
@destroy="editVisible = false">
|
||||
@ -322,10 +339,22 @@ export default {
|
||||
},
|
||||
],
|
||||
],
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
editVisible: false,
|
||||
editMode: 'edit', // 'edit', 'detail'
|
||||
// drawer 里的设备属性列表配置项
|
||||
drawerListProps: [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '添加时间',
|
||||
fixed: true,
|
||||
width: 180,
|
||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{ prop: 'keyName', label: '属性名称', align: 'center' },
|
||||
{ prop: 'keyValue', label: '属性值', align: 'center' },
|
||||
],
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
@ -468,6 +497,9 @@ export default {
|
||||
getEquipment(id).then((response) => {
|
||||
this.form = response.data;
|
||||
this.editVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs['drawer'].init();
|
||||
});
|
||||
});
|
||||
break;
|
||||
case 'delete':
|
||||
|
||||
Loading…
Reference in New Issue
Block a user