update 2个dialog
This commit is contained in:
parent
9ccc8b44b3
commit
f6c76a83cf
@ -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);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -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 */
|
||||||
|
@ -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;
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -59,7 +59,7 @@ export default function () {
|
|||||||
* 此为后者的配置:
|
* 此为后者的配置:
|
||||||
*/
|
*/
|
||||||
const dialogJustFormConfigs = {
|
const dialogJustFormConfigs = {
|
||||||
clickModalToClose: false,
|
clickModalToClose: true,
|
||||||
form: {
|
form: {
|
||||||
rows: [
|
rows: [
|
||||||
[
|
[
|
||||||
|
@ -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: [
|
||||||
|
Loading…
Reference in New Issue
Block a user