|
|
@@ -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> |