update DialogWithMenu & SmallDialog
This commit is contained in:
parent
f6c76a83cf
commit
591b60de61
@ -12,50 +12,61 @@
|
||||
{{ detailMode ? "查看详情" : dataForm.id ? "编辑" : "新增" }}
|
||||
</h1>
|
||||
</div>
|
||||
<!-- menu -->
|
||||
<el-tabs v-model="activeMenu" type="card" @tab-click="handleTabClick">
|
||||
<!-- <el-tab-pane v-for="(tab, index) in configs.menu" :key="index" :label="tab.name" :name="tab.name"> -->
|
||||
<el-tab-pane v-for="(tab, index) in actualMenus" :key="index" :label="tab.name" :name="tab.name">
|
||||
<div v-if="index === 0">
|
||||
<!-- form -->
|
||||
<el-form ref="dataForm" :model="dataForm" v-loading="loadingStatus">
|
||||
<el-row v-for="(row, rowIndex) in configs.form.rows" :key="'row_' + rowIndex" :gutter="20">
|
||||
<el-col v-for="(col, colIndex) in row" :key="colIndex" :span="24 / row.length">
|
||||
<el-form-item :label="col.label" :prop="col.prop" :rules="col.rules || null">
|
||||
<el-input v-if="col.input" v-model="dataForm[col.prop]" clearable :disabled="detailMode" v-bind="col.elparams" />
|
||||
<el-select
|
||||
v-if="col.select"
|
||||
v-model="dataForm[col.prop]"
|
||||
clearable
|
||||
:disabled="detailMode"
|
||||
v-bind="col.elparams"
|
||||
@change="handleSelectChange(col, $event)"
|
||||
>
|
||||
<el-option v-for="(opt, optIdx) in col.options" :key="'option_' + optIdx" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
<el-switch
|
||||
v-if="col.switch"
|
||||
v-model="dataForm[col.prop]"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleSwitchChange"
|
||||
:disabled="detailMode"
|
||||
/>
|
||||
<el-input v-if="col.textarea" type="textarea" v-model="dataForm[col.prop]" :disabled="detailMode" v-bind="col.elparams" />
|
||||
<!-- add more... -->
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-if="dataForm.id && index === 1">
|
||||
<el-button v-if="!detailMode" type="primary" style="margin-bottom: 16px" @click="handleAddParam()">添加</el-button>
|
||||
<BaseListTable :table-config="null" :column-config="filteredTableProps" :table-data="subList" @operate-event="handleTableRowOperate" />
|
||||
<!-- paginator -->
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<div class="dialog-body__inner relative">
|
||||
<el-button
|
||||
v-if="dataForm.id && !detailMode && /属性/.test(activeMenu)"
|
||||
plain
|
||||
type="primary"
|
||||
size="small"
|
||||
class="at-right-top"
|
||||
style="margin-bottom: 16px"
|
||||
@click="handleAddParam()"
|
||||
>+ 添加</el-button
|
||||
>
|
||||
<!-- menu -->
|
||||
<el-tabs v-model="activeMenu" type="card" @tab-click="handleTabClick">
|
||||
<!-- <el-tab-pane v-for="(tab, index) in configs.menu" :key="index" :label="tab.name" :name="tab.name"> -->
|
||||
<el-tab-pane v-for="(tab, index) in actualMenus" :key="index" :label="tab.name" :name="tab.name">
|
||||
<div v-if="index === 0">
|
||||
<!-- form -->
|
||||
<el-form ref="dataForm" :model="dataForm" v-loading="loadingStatus">
|
||||
<el-row v-for="(row, rowIndex) in configs.form.rows" :key="'row_' + rowIndex" :gutter="20">
|
||||
<el-col v-for="(col, colIndex) in row" :key="colIndex" :span="24 / row.length">
|
||||
<el-form-item :label="col.label" :prop="col.prop" :rules="col.rules || null">
|
||||
<el-input v-if="col.input" v-model="dataForm[col.prop]" clearable :disabled="detailMode" v-bind="col.elparams" />
|
||||
<el-select
|
||||
v-if="col.select"
|
||||
v-model="dataForm[col.prop]"
|
||||
clearable
|
||||
:disabled="detailMode"
|
||||
v-bind="col.elparams"
|
||||
@change="handleSelectChange(col, $event)"
|
||||
>
|
||||
<el-option v-for="(opt, optIdx) in col.options" :key="'option_' + optIdx" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
<el-switch
|
||||
v-if="col.switch"
|
||||
v-model="dataForm[col.prop]"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleSwitchChange"
|
||||
:disabled="detailMode"
|
||||
/>
|
||||
<el-input v-if="col.textarea" type="textarea" v-model="dataForm[col.prop]" :disabled="detailMode" v-bind="col.elparams" />
|
||||
<!-- add more... -->
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-if="dataForm.id && index === 1">
|
||||
<BaseListTable :table-config="null" :column-config="filteredTableProps" :table-data="subList" @operate-event="handleTableRowOperate" />
|
||||
<!-- paginator -->
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<!-- sub dialog -->
|
||||
<small-dialog
|
||||
:append-to-body="true"
|
||||
@ -214,6 +225,9 @@ export default {
|
||||
if (this.dataForm.id) {
|
||||
// 如果是编辑
|
||||
this.loadingStatus = true;
|
||||
// 提前获取属性列表
|
||||
this.getSubList();
|
||||
// 获取详情
|
||||
this.$http.get(this.urls.base + `/${this.dataForm.id}`).then(({ data: res }) => {
|
||||
if (res && res.code === 0) {
|
||||
const dataFormKeys = Object.keys(this.dataForm);
|
||||
@ -312,11 +326,11 @@ export default {
|
||||
}
|
||||
},
|
||||
handleTabClick(payload) {
|
||||
console.log("tab click payload: ", this.activeMenu);
|
||||
if (this.activeMenu === this.configs.menu[1].name) {
|
||||
// 获取数据
|
||||
this.getSubList();
|
||||
}
|
||||
// console.log("tab click payload: ", this.activeMenu);
|
||||
// if (this.activeMenu === this.configs.menu[1].name) {
|
||||
// // 获取数据
|
||||
// this.getSubList();
|
||||
// }
|
||||
},
|
||||
|
||||
getSubList(page = 1, size = 20) {
|
||||
@ -359,7 +373,7 @@ export default {
|
||||
},
|
||||
|
||||
handleClose() {
|
||||
this.resetForm()
|
||||
this.resetForm();
|
||||
this.$emit("update:dialogVisible", false);
|
||||
},
|
||||
|
||||
@ -444,4 +458,15 @@ export default {
|
||||
padding: 10px 20px 10px;
|
||||
/* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white); */
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.at-right-top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 10000;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,6 +7,10 @@
|
||||
:distory-on-close="true"
|
||||
:close-on-click-modal="false"
|
||||
v-bind="$attrs"
|
||||
:width="'30%'"
|
||||
:modal="false"
|
||||
:fullscreen="false"
|
||||
:top="'10vh'"
|
||||
>
|
||||
<!-- :append-to-body="appendToBody"> -->
|
||||
<div>
|
||||
@ -163,9 +167,6 @@ export default {
|
||||
this.$http
|
||||
.get(this.urls.subase + `/${this.dataForm.id}`)
|
||||
.then(({ data: res }) => {
|
||||
// dev env:
|
||||
// if (LOCAL) res.data.id = res.data._id;
|
||||
// end dev env
|
||||
if (res && res.code === 0) {
|
||||
const dataFormKeys = Object.keys(this.dataForm);
|
||||
this.dataForm = __pick(res.data, dataFormKeys);
|
||||
@ -223,3 +224,10 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.a-small-dialog >>> .el-dialog {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import TableOperaionComponent from '@/components/noTemplateComponents/operationComponent'
|
||||
import TableTextComponent from '@/components/noTemplateComponents/detailComponent'
|
||||
import switchBtn from '@/components/noTemplateComponents/switchBtn'
|
||||
import { timeFilter } from '@/utils/filters'
|
||||
|
||||
|
||||
export default function () {
|
||||
|
||||
@ -48,7 +50,7 @@ export default function () {
|
||||
|
||||
const dialogConfigs = {
|
||||
clickModalToClose: true,
|
||||
menu: [{ name: '设备信息' }, { name: '设备属性信息', onlyEditMode: false }],
|
||||
menu: [{ name: '设备信息' }, { name: '设备属性信息', onlyEditMode: true }],
|
||||
form: {
|
||||
rows: [
|
||||
[
|
||||
@ -81,12 +83,13 @@ export default function () {
|
||||
},
|
||||
table: {
|
||||
// extraParams: ['stepId'],
|
||||
extraParams: 'stepId',
|
||||
extraParams: 'equipmentId',
|
||||
props: [
|
||||
{ prop: 'createTime', label: '创建时间' },
|
||||
{ prop: 'equipmentId', label: '所属设备id' },
|
||||
{ prop: 'createTime', label: '创建时间', filter: timeFilter },
|
||||
// { prop: 'equipmentId', label: '所属设备id' },
|
||||
{ prop: 'attrName', label: '属性名称', isEditField: true },
|
||||
{ prop: 'attrValue', label: '属性值', isEditField: true },
|
||||
{ prop: 'remark', label: '备注', isEditField: true },
|
||||
{
|
||||
prop: 'operations',
|
||||
name: '操作',
|
||||
@ -108,7 +111,7 @@ export default function () {
|
||||
extraParam: 'equipmentId',
|
||||
rows: [
|
||||
[
|
||||
{ input: true, label: '属性名称', prop: 'attrName', elparams: { placeholder: '请输入属性名称' } },
|
||||
{ input: true, label: '属性名称', prop: 'attrName', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入属性名称' } },
|
||||
{ input: true, label: '属性值', prop: 'attrValue', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入属性值' } },
|
||||
],
|
||||
[
|
||||
@ -116,8 +119,8 @@ export default function () {
|
||||
]
|
||||
],
|
||||
operations: [
|
||||
{ name: 'add', label: '保存', type: 'primary', permission: 'pms:equipment:save', showOnEdit: false },
|
||||
{ name: 'update', label: '更新', type: 'primary', permission: 'pms:equipment:update', showOnEdit: true },
|
||||
{ name: 'add', label: '保存', type: 'primary', permission: 'pms:equipmentType:save', showOnEdit: false },
|
||||
{ name: 'update', label: '更新', type: 'primary', permission: 'pms:equipmentType:update', showOnEdit: true },
|
||||
],
|
||||
},
|
||||
};
|
||||
@ -135,7 +138,9 @@ export default function () {
|
||||
},
|
||||
urls: {
|
||||
base: '/pms/equipment',
|
||||
page: '/pms/equipment/page'
|
||||
page: '/pms/equipment/page',
|
||||
subase: '/pms/equipmentAttr',
|
||||
subpage: '/pms/equipmentAttr/page'
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user