字典管理 删除对话框样式修改

src/views/archivesConfig/dict/dictDetail.vue

@@ -7,6 +7,9 @@
           <template v-slot:left>
             <el-button v-permission="permission.add" size="mini" type="primary" icon="el-icon-plus" :disabled="!activeAddBtn" @click="crud.toAdd">新增</el-button>
           </template>
+          <template v-slot:right>
+            <el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">删除</el-button>
+          </template>
         </crudOperation>
       </div>
       <!--表单组件-->
@@ -31,6 +34,16 @@
           </div>
         </div>
       </el-dialog>
+      <el-dialog title="删除字典内容" :visible.sync="deleteVisible" :before-close="handleClose">
+        <span class="dialog-right-top" />
+        <span class="dialog-left-bottom" />
+        <div class="setting-dialog">
+          <p><span style="color:#fff;">确定删除当前字典内容吗？</span></p>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click.native="handleConfirm">确定</el-button>
+          </div>
+        </div>
+      </el-dialog>
       <!--表格渲染-->
       <el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%;" @selection-change="selectionChangeHandler" @row-click="clickRowHandler">
         <el-table-column type="selection" width="55" />
@@ -62,7 +75,7 @@ export default {
         optShow: {
           add: false,
           edit: true,
-          del: true,
+          del: false,
           reset: false,
           download: false,
           group: false
@@ -100,7 +113,9 @@ export default {
         add: ['admin', 'dict:add'],
         edit: ['admin', 'dict:edit'],
         del: ['admin', 'dict:del']
-      }
+      },
+      deleteVisible: false,
+      deleteData: {}
     }
   },
   methods: {
@@ -136,6 +151,19 @@ export default {
       } else {
         this.crud.selectionChangeHandler(val)
       }
+    },
+    toDelete(data) {
+      this.deleteData = data
+      this.deleteVisible = true
+    },
+    handleConfirm() {
+      this.deleteVisible = false
+      this.crud.delAllLoading = true
+      this.crud.doDelete(this.deleteData)
+    },
+    handleClose(done) {
+      this.deleteData = {}
+      done()
     }
   }
 }

src/views/archivesConfig/dict/index.vue

@@ -22,12 +22,27 @@
         </div>
       </div>
     </el-dialog>
+    <el-dialog title="删除字典" :visible.sync="deleteVisible" :before-close="handleClose">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <p><span style="color:#fff;">确定要删除当前字典吗？</span></p>
+        <p><span style="color:red;">提示：如果删除当前字典，此字典内所属内容会一并删除</span></p>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click.native="handleConfirm">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
     <!-- 字典列表 -->
     <el-row class="container-main" :gutter="20">
       <el-col class="container-left" :xs="10" :sm="8" :md="5" :lg="6" :xl="4">
         <span class="right-top-line" />
         <span class="left-bottom-line" />
-        <crudOperation :permission="permission" />
+        <crudOperation :permission="permission">
+          <template v-slot:right>
+            <el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">删除</el-button>
+          </template>
+        </crudOperation>
         <!--字典树状结构-->
         <el-tree ref="tree" v-loading="crud.loading" :data="crud.data" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick" />
       </el-col>
@@ -60,7 +75,7 @@ export default {
         optShow: {
           add: true,
           edit: true,
-          del: true,
+          del: false,
           download: false,
           group: false
         },
@@ -72,10 +87,6 @@ export default {
   mixins: [presenter(), header(), form(defaultForm)],
   data() {
     return {
-      queryTypeOptions: [
-        { key: 'name', display_name: '字典名称' },
-        { key: 'description', display_name: '描述' }
-      ],
       rules: {
         dicName: [
           { required: true, message: '请输入字典名称', trigger: 'blur' }
@@ -93,7 +104,9 @@ export default {
         children: 'childMenus',
         label: 'dicName'
       },
-      activeAddBtn: false
+      activeAddBtn: false,
+      deleteVisible: false,
+      deleteData: {}
     }
   },
   methods: {
@@ -123,6 +136,11 @@ export default {
       // 将角色的菜单清空，避免日志入库数据过长
       form.dictDetails = null
     },
+    // 编辑前将字典明细临时清空，避免日志入库数据过长
+    [CRUD.HOOK.beforeToEdit](crud, form) {
+      // 将角色的菜单清空，避免日志入库数据过长
+      form.dictDetails = null
+    },
     updateKeyChildren(data) {
       const oldDatas = this.$refs.tree.getCurrentNode().childMenus
       if (oldDatas) {
@@ -134,6 +152,19 @@ export default {
         }
       }
       this.$refs.tree.updateKeyChildren(this.$refs.tree.getCurrentKey(), data)
+    },
+    toDelete(data) {
+      this.deleteData = data
+      this.deleteVisible = true
+    },
+    handleConfirm() {
+      this.deleteVisible = false
+      this.crud.delAllLoading = true
+      this.crud.doDelete(this.deleteData)
+    },
+    handleClose(done) {
+      this.deleteData = {}
+      done()
     }
   }
 }