update 2个dialog

This commit is contained in:
lb 2023-02-03 09:58:23 +08:00
parent 9ccc8b44b3
commit f6c76a83cf
5 changed files with 45 additions and 31 deletions

View File

@ -1,9 +1,9 @@
<template> <template>
<el-dialog <el-dialog
class="dialog-just-form" class="dialog-just-form"
:visible.sync="selfVisible" :visible="dialogVisible"
@closed="resetForm" @close="handleClose"
:destroy-on-close="true" :destroy-on-close="false"
:close-on-click-modal="configs.clickModalToClose ?? true" :close-on-click-modal="configs.clickModalToClose ?? true"
> >
<!-- title --> <!-- title -->
@ -89,7 +89,7 @@
<script> <script>
import { pick as __pick } from "@/utils/filters"; import { pick as __pick } from "@/utils/filters";
import Cookies from 'js-cookie' import Cookies from "js-cookie";
function reConstructTreeData(listObj) { function reConstructTreeData(listObj) {
const entry = []; const entry = [];
@ -120,6 +120,10 @@ export default {
forms: null, forms: null,
}), }),
}, },
dialogVisible: {
type: Boolean,
default: false,
},
}, },
inject: ["urls"], inject: ["urls"],
data() { data() {
@ -170,7 +174,7 @@ export default {
loadingStatus: false, loadingStatus: false,
dataForm, dataForm,
detailMode: false, detailMode: false,
selfVisible: false,
baseDialogConfig: null, baseDialogConfig: null,
}; };
}, },
@ -180,9 +184,9 @@ export default {
computed: { computed: {
uploadHeaders() { uploadHeaders() {
return { return {
token: Cookies.get('token') || '' token: Cookies.get("token") || "",
} };
} },
}, },
methods: { methods: {
/** utitilities */ /** utitilities */
@ -207,14 +211,12 @@ export default {
this.$refs.dataForm.clearValidate(); this.$refs.dataForm.clearValidate();
this.$emit("dialog-closed"); // this.$emit("dialog-closed"); //
}, },
immediate ? 0 : 100 immediate ? 0 : 200
); );
}, },
/** init **/ /** init **/
init(id, detailMode) { init(id, detailMode) {
this.selfVisible = true;
if (this.$refs.dataForm) { if (this.$refs.dataForm) {
console.log("[dialog REUSE] clearing form validation..."); console.log("[dialog REUSE] clearing form validation...");
// dialog dataForm [0] // dialog dataForm [0]
@ -242,7 +244,6 @@ export default {
}); });
} else { } else {
// //
this.selfVisible = true;
} }
}); });
}, },
@ -318,12 +319,12 @@ export default {
}, },
handleUploadChange(file, fileList) { handleUploadChange(file, fileList) {
console.log('[Upload] handleUploadChange...', file, fileList) console.log("[Upload] handleUploadChange...", file, fileList);
}, },
handleClose() { handleClose() {
// this.resetForm(); this.resetForm();
this.selfVisible = false; this.$emit('update:dialogVisible', false);
}, },
}, },
}; };

View File

@ -1,9 +1,9 @@
<template> <template>
<el-dialog <el-dialog
class="dialog-with-menu" class="dialog-with-menu"
:visible="selfVisible" :visible="dialogVisible"
@closed="resetForm" :destroy-on-close="false"
:distory-on-close="true" @close="handleClose"
:close-on-click-modal="configs.clickModalToClose ?? true" :close-on-click-modal="configs.clickModalToClose ?? true"
> >
<!-- title --> <!-- title -->
@ -92,6 +92,10 @@ export default {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
dialogVisible: {
type: Boolean,
default: false,
},
}, },
inject: ["urls"], inject: ["urls"],
data() { data() {
@ -146,7 +150,7 @@ export default {
activeMenu: this.configs.menu[0].name, activeMenu: this.configs.menu[0].name,
dataForm, dataForm,
detailMode: false, detailMode: false,
selfVisible: false,
showBaseDialog: false, showBaseDialog: false,
baseDialogConfig: null, baseDialogConfig: null,
subList: [], subList: [],
@ -167,6 +171,9 @@ export default {
}, },
}, },
methods: { methods: {
k() {
console.log("[DialogWithMenu] closed");
},
/** utitilities */ /** utitilities */
showButton(operate) { showButton(operate) {
const notDetailMode = !this.detailMode; const notDetailMode = !this.detailMode;
@ -185,15 +192,14 @@ export default {
}); });
this.activeMenu = this.configs.menu[0].name; this.activeMenu = this.configs.menu[0].name;
this.$refs.dataForm[0].clearValidate(); this.$refs.dataForm[0].clearValidate();
this.$emit("dialog-closed"); //
}, },
immediate ? 0 : 100 immediate ? 0 : 200
); );
}, },
/** init **/ /** init **/
init(id, detailMode) { init(id, detailMode) {
this.selfVisible = true; // this.dialogVisible = true;
if (this.$refs.dataForm && this.$refs.dataForm.length) { if (this.$refs.dataForm && this.$refs.dataForm.length) {
// dialog dataForm [0] // dialog dataForm [0]
this.$refs.dataForm[0].clearValidate(); this.$refs.dataForm[0].clearValidate();
@ -247,7 +253,7 @@ export default {
}); });
} else { } else {
// //
this.selfVisible = true; // this.dialogVisible = true;
} }
}); });
}, },
@ -353,8 +359,8 @@ export default {
}, },
handleClose() { handleClose() {
// this.resetForm(); this.resetForm()
this.selfVisible = false; this.$emit("update:dialogVisible", false);
}, },
/** 列表handlers */ /** 列表handlers */

View File

@ -25,13 +25,19 @@
<!-- :current-page.sync="currentPage" <!-- :current-page.sync="currentPage"
:page-size.sync="pageSize" --> :page-size.sync="pageSize" -->
<DialogWithMenu ref="edit-dialog" v-if="dialogType === DIALOG_WITH_MENU && dialogVisible" :configs="dialogConfigs" @refreshDataList="getList" /> <DialogWithMenu
<DialogJustForm
ref="edit-dialog" ref="edit-dialog"
v-if="dialogType === DIALOG_JUST_FORM && dialogVisible" v-if="dialogType === DIALOG_WITH_MENU"
:dialog-visible.sync="dialogVisible"
:configs="dialogConfigs"
@refreshDataList="getList"
/>
<DialogJustForm
ref="edit-dialog"
v-if="dialogType === DIALOG_JUST_FORM"
:dialog-visible.sync="dialogVisible"
:configs="dialogConfigs" :configs="dialogConfigs"
@refreshDataList="getList" @refreshDataList="getList"
@dialog-closed="destroyDialog"
/> />
</div> </div>
</template> </template>
@ -98,7 +104,7 @@ export default {
/* 从dom移除对话框 */ /* 从dom移除对话框 */
destroyDialog() { destroyDialog() {
// console.log('[ListViewWithHead] destroyDialog') // console.log('[ListViewWithHead] destroyDialog')
this.dialogVisible = false this.dialogVisible = false;
}, },
/** /**

View File

@ -59,7 +59,7 @@ export default function () {
* 此为后者的配置: * 此为后者的配置:
*/ */
const dialogJustFormConfigs = { const dialogJustFormConfigs = {
clickModalToClose: false, clickModalToClose: true,
form: { form: {
rows: [ rows: [
[ [

View File

@ -47,6 +47,7 @@ export default function () {
const dialogConfigs = { const dialogConfigs = {
clickModalToClose: true,
menu: [{ name: '设备信息' }, { name: '设备属性信息', onlyEditMode: false }], menu: [{ name: '设备信息' }, { name: '设备属性信息', onlyEditMode: false }],
form: { form: {
rows: [ rows: [