重构部分页面的弹窗逻辑

This commit is contained in:
sakuya 2021-07-10 21:01:25 +08:00
parent 1f246c6f9a
commit 9264130521
9 changed files with 88 additions and 49 deletions

View File

@ -32,7 +32,7 @@
</el-main> </el-main>
</el-container> </el-container>
<save-dialog ref="saveDialog" @success="handleSuccess"></save-dialog> <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
</template> </template>
@ -46,6 +46,9 @@
}, },
data(){ data(){
return { return {
dialog: {
save: false
},
apiObj: this.$API.app.list, apiObj: this.$API.app.list,
selection: [] selection: []
} }
@ -53,12 +56,17 @@
methods: { methods: {
// //
add(){ add(){
this.$refs.saveDialog.show() this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open()
})
}, },
// //
table_edit(row){ table_edit(row){
this.$refs.saveDialog.show('edit') this.dialog.save = true
this.$refs.saveDialog.setData(row) this.$nextTick(() => {
this.$refs.saveDialog.open('edit').setData(row)
})
}, },
// //
async table_del(row, index){ async table_del(row, index){

View File

@ -1,5 +1,5 @@
<template> <template>
<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close> <el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left"> <el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
<el-form-item label="应用标识" prop="appId"> <el-form-item label="应用标识" prop="appId">
<el-input v-model="form.appId" clearable></el-input> <el-input v-model="form.appId" clearable></el-input>
@ -31,7 +31,7 @@
<script> <script>
export default { export default {
emits: ['success'], emits: ['success', 'closed'],
data() { data() {
return { return {
mode: "add", mode: "add",
@ -70,10 +70,10 @@
}, },
methods: { methods: {
// //
show(mode='add'){ open(mode='add'){
this.mode = mode; this.mode = mode;
this.visible = true; this.visible = true;
this.form = this.$options.data().form return this;
}, },
// //
submit(){ submit(){

View File

@ -35,9 +35,9 @@
</el-main> </el-main>
</el-container> </el-container>
<save-dialog ref="saveDialog" @success="handleSaveSuccess"></save-dialog> <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
<permission-dialog ref="permissionDialog"></permission-dialog> <permission-dialog v-if="dialog.permission" ref="permissionDialog" @closed="dialog.permission=false"></permission-dialog>
</template> </template>
@ -53,6 +53,10 @@
}, },
data() { data() {
return { return {
dialog: {
save: false,
permission: false
},
apiObj: this.$API.role.list, apiObj: this.$API.role.list,
selection: [], selection: [],
search: { search: {
@ -63,21 +67,31 @@
methods: { methods: {
// //
add(){ add(){
this.$refs.saveDialog.show() this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open()
})
}, },
// //
table_edit(row){ table_edit(row){
this.$refs.saveDialog.show('edit') this.dialog.save = true
this.$refs.saveDialog.setData(row) this.$nextTick(() => {
this.$refs.saveDialog.open('edit').setData(row)
})
}, },
// //
table_show(row){ table_show(row){
this.$refs.saveDialog.show('show') this.dialog.save = true
this.$refs.saveDialog.setData(row) this.$nextTick(() => {
this.$refs.saveDialog.open('show').setData(row)
})
}, },
// //
permission(){ permission(){
this.$refs.permissionDialog.show() this.dialog.permission = true
this.$nextTick(() => {
this.$refs.permissionDialog.open()
})
}, },
// //
async table_del(row, index){ async table_del(row, index){

View File

@ -1,5 +1,5 @@
<template> <template>
<el-dialog title="角色权限设置" v-model="visible" :width="500" destroy-on-close> <el-dialog title="角色权限设置" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
<el-tabs tab-position="top"> <el-tabs tab-position="top">
<el-tab-pane label="菜单权限"> <el-tab-pane label="菜单权限">
<div class="treeMain"> <div class="treeMain">
@ -39,7 +39,7 @@
<script> <script>
export default { export default {
emits: ['success'], emits: ['success', 'closed'],
data() { data() {
return { return {
visible: false, visible: false,
@ -85,9 +85,8 @@
this.getType(); this.getType();
}, },
methods: { methods: {
show(){ open(){
this.visible = true; this.visible = true;
this.form = this.$options.data().form
}, },
submit(){ submit(){
this.isSaveing = true; this.isSaveing = true;

View File

@ -1,5 +1,5 @@
<template> <template>
<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close> <el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="top"> <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="top">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
@ -35,7 +35,7 @@
<script> <script>
export default { export default {
emits: ['success'], emits: ['success', 'closed'],
data() { data() {
return { return {
mode: "add", mode: "add",
@ -78,10 +78,10 @@
}, },
methods: { methods: {
// //
show(mode='add'){ open(mode='add'){
this.mode = mode; this.mode = mode;
this.visible = true; this.visible = true;
this.form = this.$options.data().form return this
}, },
// //
async getGroup(){ async getGroup(){

View File

@ -1,10 +1,10 @@
<!-- <!--
* @Descripttion: 系统计划任务配置 * @Descripttion: 系统计划任务配置
* @version: 1.1 * @version: 1.2
* @Author: sakuya * @Author: sakuya
* @Date: 2021年7月7日09:28:32 * @Date: 2021年7月7日09:28:32
* @LastEditors: sakuya * @LastEditors: sakuya
* @LastEditTime: 2021年7月8日22:15:13 * @LastEditTime: 2021年7月10日20:56:47
--> -->
<template> <template>
@ -57,9 +57,9 @@
</el-row> </el-row>
</el-main> </el-main>
<save-dialog ref="saveDialog" @success="handleSuccess"></save-dialog> <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
<el-drawer title="计划任务日志" v-model="logsVisible" :size="600" direction="rtl" destroy-on-close> <el-drawer title="计划任务日志" v-model="dialog.logsVisible" :size="600" direction="rtl" destroy-on-close>
<logs></logs> <logs></logs>
</el-drawer> </el-drawer>
</template> </template>
@ -81,7 +81,10 @@
}, },
data() { data() {
return { return {
logsVisible: false, dialog: {
save: false,
logsVisible: false
},
list: [ list: [
{ {
id: "1", id: "1",
@ -112,11 +115,16 @@
}, },
methods: { methods: {
add(){ add(){
this.$refs.saveDialog.show() this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open()
})
}, },
edit(task){ edit(task){
this.$refs.saveDialog.show('edit') this.dialog.save = true
this.$refs.saveDialog.setData(task) this.$nextTick(() => {
this.$refs.saveDialog.open('edit').setData(task)
})
}, },
del(task){ del(task){
this.$confirm(`确认删除 ${task.title} 计划任务吗?`,'提示', { this.$confirm(`确认删除 ${task.title} 计划任务吗?`,'提示', {
@ -130,7 +138,7 @@
}) })
}, },
logs(){ logs(){
this.logsVisible = true this.dialog.logsVisible = true
}, },
run(task){ run(task){
this.$message.success(`已成功执行计划任务:${task.title}`) this.$message.success(`已成功执行计划任务:${task.title}`)

View File

@ -1,14 +1,14 @@
<!-- <!--
* @Descripttion: 系统计划任务配置 * @Descripttion: 系统计划任务配置
* @version: 1.1 * @version: 1.2
* @Author: sakuya * @Author: sakuya
* @Date: 2021年7月7日09:28:32 * @Date: 2021年7月7日09:28:32
* @LastEditors: sakuya * @LastEditors: sakuya
* @LastEditTime: 2021年7月8日22:15:13 * @LastEditTime: 2021年7月10日20:56:47
--> -->
<template> <template>
<el-dialog :title="titleMap[mode]" v-model="visible" :width="400" destroy-on-close> <el-dialog :title="titleMap[mode]" v-model="visible" :width="400" destroy-on-close @closed="$emit('closed')">
<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left"> <el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
<el-form-item label="描述" prop="title"> <el-form-item label="描述" prop="title">
<el-input v-model="form.title" placeholder="计划任务标题" clearable></el-input> <el-input v-model="form.title" placeholder="计划任务标题" clearable></el-input>
@ -32,7 +32,7 @@
<script> <script>
export default { export default {
emits: ['success'], emits: ['success', 'closed'],
data() { data() {
return { return {
mode: "add", mode: "add",
@ -67,10 +67,10 @@
}, },
methods: { methods: {
// //
show(mode='add'){ open(mode='add'){
this.mode = mode; this.mode = mode;
this.visible = true; this.visible = true;
this.form = this.$options.data().form return this;
}, },
// //
submit(){ submit(){

View File

@ -55,7 +55,7 @@
</el-container> </el-container>
</el-container> </el-container>
<save-dialog ref="saveDialog" @success="handleSuccess"></save-dialog> <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
</template> </template>
@ -69,6 +69,9 @@
}, },
data() { data() {
return { return {
dialog: {
save: false
},
showGrouploading: false, showGrouploading: false,
groupFilterText: '', groupFilterText: '',
group: [], group: [],
@ -90,17 +93,24 @@
methods: { methods: {
// //
add(){ add(){
this.$refs.saveDialog.show() this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open()
})
}, },
// //
table_edit(row){ table_edit(row){
this.$refs.saveDialog.show('edit') this.dialog.save = true
this.$refs.saveDialog.setData(row) this.$nextTick(() => {
this.$refs.saveDialog.open('edit').setData(row)
})
}, },
// //
table_show(row){ table_show(row){
this.$refs.saveDialog.show('show') this.dialog.save = true
this.$refs.saveDialog.setData(row) this.$nextTick(() => {
this.$refs.saveDialog.open('show').setData(row)
})
}, },
// //
async table_del(row, index){ async table_del(row, index){

View File

@ -1,5 +1,5 @@
<template> <template>
<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close> <el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="top"> <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="top">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24"> <el-col :span="24">
@ -49,7 +49,7 @@
<script> <script>
export default { export default {
emits: ['success'], emits: ['success', 'closed'],
data() { data() {
return { return {
mode: "add", mode: "add",
@ -116,10 +116,10 @@
}, },
methods: { methods: {
// //
show(mode='add'){ open(mode='add'){
this.mode = mode; this.mode = mode;
this.visible = true; this.visible = true;
this.form = this.$options.data().form return this
}, },
// //
async getGroup(){ async getGroup(){