@@ -1,9 +1,9 @@ | |||
<template> | |||
<el-dialog | |||
class="dialog-just-form" | |||
:visible.sync="selfVisible" | |||
@closed="resetForm" | |||
:destroy-on-close="true" | |||
:visible="dialogVisible" | |||
@close="handleClose" | |||
:destroy-on-close="false" | |||
:close-on-click-modal="configs.clickModalToClose ?? true" | |||
> | |||
<!-- title --> | |||
@@ -89,7 +89,7 @@ | |||
<script> | |||
import { pick as __pick } from "@/utils/filters"; | |||
import Cookies from 'js-cookie' | |||
import Cookies from "js-cookie"; | |||
function reConstructTreeData(listObj) { | |||
const entry = []; | |||
@@ -120,6 +120,10 @@ export default { | |||
forms: null, | |||
}), | |||
}, | |||
dialogVisible: { | |||
type: Boolean, | |||
default: false, | |||
}, | |||
}, | |||
inject: ["urls"], | |||
data() { | |||
@@ -170,7 +174,7 @@ export default { | |||
loadingStatus: false, | |||
dataForm, | |||
detailMode: false, | |||
selfVisible: false, | |||
baseDialogConfig: null, | |||
}; | |||
}, | |||
@@ -180,9 +184,9 @@ export default { | |||
computed: { | |||
uploadHeaders() { | |||
return { | |||
token: Cookies.get('token') || '' | |||
} | |||
} | |||
token: Cookies.get("token") || "", | |||
}; | |||
}, | |||
}, | |||
methods: { | |||
/** utitilities */ | |||
@@ -207,14 +211,12 @@ export default { | |||
this.$refs.dataForm.clearValidate(); | |||
this.$emit("dialog-closed"); // 触发父组件销毁自己 | |||
}, | |||
immediate ? 0 : 100 | |||
immediate ? 0 : 200 | |||
); | |||
}, | |||
/** init **/ | |||
init(id, detailMode) { | |||
this.selfVisible = true; | |||
if (this.$refs.dataForm) { | |||
console.log("[dialog REUSE] clearing form validation..."); | |||
// 当不是首次渲染dialog的时候,一开始就清空验证信息,本组件的循环里只有一个 dataForm 所以只用取 [0] 即可 | |||
@@ -242,7 +244,6 @@ export default { | |||
}); | |||
} else { | |||
// 如果不是编辑 | |||
this.selfVisible = true; | |||
} | |||
}); | |||
}, | |||
@@ -318,12 +319,12 @@ export default { | |||
}, | |||
handleUploadChange(file, fileList) { | |||
console.log('[Upload] handleUploadChange...', file, fileList) | |||
console.log("[Upload] handleUploadChange...", file, fileList); | |||
}, | |||
handleClose() { | |||
// this.resetForm(); | |||
this.selfVisible = false; | |||
this.resetForm(); | |||
this.$emit('update:dialogVisible', false); | |||
}, | |||
}, | |||
}; | |||
@@ -1,9 +1,9 @@ | |||
<template> | |||
<el-dialog | |||
class="dialog-with-menu" | |||
:visible="selfVisible" | |||
@closed="resetForm" | |||
:distory-on-close="true" | |||
:visible="dialogVisible" | |||
:destroy-on-close="false" | |||
@close="handleClose" | |||
:close-on-click-modal="configs.clickModalToClose ?? true" | |||
> | |||
<!-- title --> | |||
@@ -92,6 +92,10 @@ export default { | |||
type: Object, | |||
default: () => ({}), | |||
}, | |||
dialogVisible: { | |||
type: Boolean, | |||
default: false, | |||
}, | |||
}, | |||
inject: ["urls"], | |||
data() { | |||
@@ -146,7 +150,7 @@ export default { | |||
activeMenu: this.configs.menu[0].name, | |||
dataForm, | |||
detailMode: false, | |||
selfVisible: false, | |||
showBaseDialog: false, | |||
baseDialogConfig: null, | |||
subList: [], | |||
@@ -167,6 +171,9 @@ export default { | |||
}, | |||
}, | |||
methods: { | |||
k() { | |||
console.log("[DialogWithMenu] closed"); | |||
}, | |||
/** utitilities */ | |||
showButton(operate) { | |||
const notDetailMode = !this.detailMode; | |||
@@ -185,15 +192,14 @@ export default { | |||
}); | |||
this.activeMenu = this.configs.menu[0].name; | |||
this.$refs.dataForm[0].clearValidate(); | |||
this.$emit("dialog-closed"); // 触发父组件销毁自己 | |||
}, | |||
immediate ? 0 : 100 | |||
immediate ? 0 : 200 | |||
); | |||
}, | |||
/** init **/ | |||
init(id, detailMode) { | |||
this.selfVisible = true; | |||
// this.dialogVisible = true; | |||
if (this.$refs.dataForm && this.$refs.dataForm.length) { | |||
// 当不是首次渲染dialog的时候,一开始就清空验证信息,本组件的循环里只有一个 dataForm 所以只用取 [0] 即可 | |||
this.$refs.dataForm[0].clearValidate(); | |||
@@ -247,7 +253,7 @@ export default { | |||
}); | |||
} else { | |||
// 如果不是编辑 | |||
this.selfVisible = true; | |||
// this.dialogVisible = true; | |||
} | |||
}); | |||
}, | |||
@@ -353,8 +359,8 @@ export default { | |||
}, | |||
handleClose() { | |||
// this.resetForm(); | |||
this.selfVisible = false; | |||
this.resetForm() | |||
this.$emit("update:dialogVisible", false); | |||
}, | |||
/** 列表handlers */ | |||
@@ -25,13 +25,19 @@ | |||
<!-- :current-page.sync="currentPage" | |||
:page-size.sync="pageSize" --> | |||
<DialogWithMenu ref="edit-dialog" v-if="dialogType === DIALOG_WITH_MENU && dialogVisible" :configs="dialogConfigs" @refreshDataList="getList" /> | |||
<DialogWithMenu | |||
ref="edit-dialog" | |||
v-if="dialogType === DIALOG_WITH_MENU" | |||
:dialog-visible.sync="dialogVisible" | |||
:configs="dialogConfigs" | |||
@refreshDataList="getList" | |||
/> | |||
<DialogJustForm | |||
ref="edit-dialog" | |||
v-if="dialogType === DIALOG_JUST_FORM && dialogVisible" | |||
v-if="dialogType === DIALOG_JUST_FORM" | |||
:dialog-visible.sync="dialogVisible" | |||
:configs="dialogConfigs" | |||
@refreshDataList="getList" | |||
@dialog-closed="destroyDialog" | |||
/> | |||
</div> | |||
</template> | |||
@@ -98,7 +104,7 @@ export default { | |||
/* 从dom移除对话框 */ | |||
destroyDialog() { | |||
// console.log('[ListViewWithHead] destroyDialog') | |||
this.dialogVisible = false | |||
this.dialogVisible = false; | |||
}, | |||
/** | |||
@@ -59,7 +59,7 @@ export default function () { | |||
* 此为后者的配置: | |||
*/ | |||
const dialogJustFormConfigs = { | |||
clickModalToClose: false, | |||
clickModalToClose: true, | |||
form: { | |||
rows: [ | |||
[ | |||
@@ -47,6 +47,7 @@ export default function () { | |||
const dialogConfigs = { | |||
clickModalToClose: true, | |||
menu: [{ name: '设备信息' }, { name: '设备属性信息', onlyEditMode: false }], | |||
form: { | |||
rows: [ | |||