mt-fe-group/pms-aomei
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update DialogWithMenu & SmallDialog

Browse Source
This commit is contained in:
lb
2023-02-03 13:52:41 +08:00
parent f6c76a83cf
commit 591b60de61
3 changed files with 98 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/components/DialogWithMenu.vue
View File

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

14
src/components/SmallDialog.vue
View File

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