重构部分页面的弹窗逻辑

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-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>
@ -46,6 +46,9 @@
},
data(){
return {
dialog: {
save: false
},
apiObj: this.$API.app.list,
selection: []
}
@ -53,12 +56,17 @@
methods: {
//
add(){
this.$refs.saveDialog.show()
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open()
})
},
//
table_edit(row){
this.$refs.saveDialog.show('edit')
this.$refs.saveDialog.setData(row)
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open('edit').setData(row)
})
},
//
async table_del(row, index){

View File

@ -1,5 +1,5 @@
<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-item label="应用标识" prop="appId">
<el-input v-model="form.appId" clearable></el-input>
@ -31,7 +31,7 @@
<script>
export default {
emits: ['success'],
emits: ['success', 'closed'],
data() {
return {
mode: "add",
@ -70,10 +70,10 @@
},
methods: {
//
show(mode='add'){
open(mode='add'){
this.mode = mode;
this.visible = true;
this.form = this.$options.data().form
return this;
},
//
submit(){

View File

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

View File

@ -1,5 +1,5 @@
<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-tab-pane label="菜单权限">
<div class="treeMain">
@ -39,7 +39,7 @@
<script>
export default {
emits: ['success'],
emits: ['success', 'closed'],
data() {
return {
visible: false,
@ -85,9 +85,8 @@
this.getType();
},
methods: {
show(){
open(){
this.visible = true;
this.form = this.$options.data().form
},
submit(){
this.isSaveing = true;

View File

@ -1,5 +1,5 @@
<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-row :gutter="20">
<el-col :span="12">
@ -35,7 +35,7 @@
<script>
export default {
emits: ['success'],
emits: ['success', 'closed'],
data() {
return {
mode: "add",
@ -78,10 +78,10 @@
},
methods: {
//
show(mode='add'){
open(mode='add'){
this.mode = mode;
this.visible = true;
this.form = this.$options.data().form
return this
},
//
async getGroup(){

View File

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

View File

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

View File

@ -55,7 +55,7 @@
</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>
@ -69,6 +69,9 @@
},
data() {
return {
dialog: {
save: false
},
showGrouploading: false,
groupFilterText: '',
group: [],
@ -90,17 +93,24 @@
methods: {
//
add(){
this.$refs.saveDialog.show()
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open()
})
},
//
table_edit(row){
this.$refs.saveDialog.show('edit')
this.$refs.saveDialog.setData(row)
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open('edit').setData(row)
})
},
//
table_show(row){
this.$refs.saveDialog.show('show')
this.$refs.saveDialog.setData(row)
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open('show').setData(row)
})
},
//
async table_del(row, index){

View File

@ -1,5 +1,5 @@
<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-row :gutter="20">
<el-col :span="24">
@ -49,7 +49,7 @@
<script>
export default {
emits: ['success'],
emits: ['success', 'closed'],
data() {
return {
mode: "add",
@ -116,10 +116,10 @@
},
methods: {
//
show(mode='add'){
open(mode='add'){
this.mode = mode;
this.visible = true;
this.form = this.$options.data().form
return this
},
//
async getGroup(){