代码优化

src/views/system/dict/dictDetail.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <div v-if="dictName === ''">
+      <div class="my-code">点击字典查看详情</div>
+    </div>
+    <div v-else>
+      <!--工具栏-->
+      <div class="head-container">
+        <!-- 搜索 -->
+        <el-input v-model="query.label" clearable size="small" placeholder="输入字典标签查询" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
+        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
+      </div>
+      <!--表单组件-->
+      <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" width="500px">
+        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+          <el-form-item label="字典标签" prop="label">
+            <el-input v-model="form.label" style="width: 370px;" />
+          </el-form-item>
+          <el-form-item label="字典值">
+            <el-input v-model="form.value" style="width: 370px;" />
+          </el-form-item>
+          <el-form-item label="排序" prop="sort">
+            <el-input-number v-model.number="form.sort" :min="0" :max="999" controls-position="right" style="width: 370px;" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="cancel">取消</el-button>
+          <el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
+        </div>
+      </el-dialog>
+      <!--表格渲染-->
+      <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
+        <el-table-column label="所属字典">
+          {{ dictName }}
+        </el-table-column>
+        <el-table-column prop="label" label="字典标签" />
+        <el-table-column prop="value" label="字典值" />
+        <el-table-column prop="sort" label="排序" />
+        <el-table-column v-if="checkPermission(['admin','dict:edit','dict:del'])" label="操作" width="130px" align="center" fixed="right">
+          <template slot-scope="scope">
+            <el-button v-permission="['admin','dict:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
+            <el-popover
+              :ref="scope.row.id"
+              v-permission="['admin','dict:del']"
+              placement="top"
+              width="180"
+            >
+              <p>确定删除本条数据吗？</p>
+              <div style="text-align: right; margin: 0">
+                <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
+                <el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
+              </div>
+              <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
+            </el-popover>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!--分页组件-->
+      <el-pagination
+        :total="total"
+        :current-page="page + 1"
+        style="margin-top: 8px;"
+        layout="total, prev, pager, next, sizes"
+        @size-change="sizeChange"
+        @current-change="pageChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import crud from '@/mixins/crud'
+import crudDictDetail from '@/api/system/dictDetail'
+export default {
+  mixins: [crud],
+  data() {
+    return {
+      title: '字典详情',
+      sort: ['sort,asc', 'id,desc'],
+      crudMethod: { ...crudDictDetail },
+      dictName: '',
+      form: { id: null, label: null, value: null, dict: { id: null }, sort: 999 },
+      rules: {
+        label: [
+          { required: true, message: '请输入字典标签', trigger: 'blur' }
+        ],
+        sort: [
+          { required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
+        ]
+      }
+    }
+  },
+  methods: {
+    // 获取数据前设置好接口地址
+    beforeInit() {
+      this.url = 'api/dictDetail'
+      if (this.dictName) {
+        this.params['dictName'] = this.dictName
+      }
+      return true
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  /deep/ .el-input-number .el-input__inner {
+    text-align: left;
+  }
+</style>

src/views/system/dict/form.vue

@@ -1,101 +0,0 @@
-<template>
-  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="isAdd ? '新增字典' : '编辑字典'" width="500px">
-    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
-      <el-form-item label="字典名称" prop="name">
-        <el-input v-model="form.name" style="width: 370px;" />
-      </el-form-item>
-      <el-form-item label="描述">
-        <el-input v-model="form.remark" style="width: 370px;" />
-      </el-form-item>
-    </el-form>
-    <div slot="footer" class="dialog-footer">
-      <el-button type="text" @click="cancel">取消</el-button>
-      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-import { add, edit } from '@/api/system/dict'
-export default {
-  props: {
-    isAdd: {
-      type: Boolean,
-      required: true
-    }
-  },
-  data() {
-    return {
-      loading: false, dialog: false,
-      form: {
-        id: '',
-        name: '',
-        remark: ''
-      },
-      rules: {
-        name: [
-          { required: true, message: '请输入名称', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  methods: {
-    cancel() {
-      this.resetForm()
-    },
-    doSubmit() {
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          this.loading = true
-          if (this.isAdd) {
-            this.doAdd()
-          } else this.doEdit()
-        }
-      })
-    },
-    doAdd() {
-      add(this.form).then(res => {
-        this.resetForm()
-        this.$notify({
-          title: '添加成功',
-          type: 'success',
-          duration: 2500
-        })
-        this.loading = false
-        this.$parent.init()
-      }).catch(err => {
-        this.loading = false
-        console.log(err.response.data.message)
-      })
-    },
-    doEdit() {
-      edit(this.form).then(res => {
-        this.resetForm()
-        this.$notify({
-          title: '修改成功',
-          type: 'success',
-          duration: 2500
-        })
-        this.loading = false
-        this.$parent.init()
-      }).catch(err => {
-        this.loading = false
-        console.log(err.response.data.message)
-      })
-    },
-    resetForm() {
-      this.dialog = false
-      this.$refs['form'].resetFields()
-      this.form = {
-        id: '',
-        name: '',
-        remark: ''
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/system/dict/index.vue

@@ -1,12 +1,27 @@
 <template>
   <div class="app-container">
     <!--表单组件-->
-    <eForm ref="form" :is-add="isAdd" />
+    <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" width="500px">
+      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+        <el-form-item label="字典名称" prop="name">
+          <el-input v-model="form.name" style="width: 370px;" />
+        </el-form-item>
+        <el-form-item label="描述">
+          <el-input v-model="form.remark" style="width: 370px;" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="cancel">取消</el-button>
+        <el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
+      </div>
+    </el-dialog>
+    <!-- 字典列表 -->
     <el-row :gutter="10">
       <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" style="margin-bottom: 10px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <span>字典列表</span>
+            <!-- 新增 -->
             <el-button
               v-permission="['admin','dict:add']"
               class="filter-item"
@@ -14,25 +29,23 @@
               style="float: right;padding: 4px 10px"
               type="primary"
               icon="el-icon-plus"
-              @click="$refs.form.dialog = true;isAdd = true"
+              @click="showAddFormDialog"
             >新增</el-button>
           </div>
           <!--工具栏-->
           <div class="head-container">
             <!-- 搜索 -->
-            <el-input v-model="query.value" clearable size="small" placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
+            <el-input v-model="query.blurry" clearable size="small" placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
             <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
             <!-- 导出 -->
-            <div style="display: inline-block;">
-              <el-button
-                :loading="downloadLoading"
-                size="mini"
-                class="filter-item"
-                type="warning"
-                icon="el-icon-download"
-                @click="download"
-              >导出</el-button>
-            </div>
+            <el-button
+              :loading="downloadLoading"
+              size="mini"
+              class="filter-item"
+              type="warning"
+              icon="el-icon-download"
+              @click="downloadMethod"
+            >导出</el-button>
           </div>
           <!--表格渲染-->
           <el-table v-loading="loading" :data="data" size="small" highlight-current-row style="width: 100%;" @current-change="handleCurrentChange">
@@ -40,7 +53,7 @@
             <el-table-column :show-overflow-tooltip="true" prop="remark" label="描述" />
             <el-table-column v-if="checkPermission(['admin','dict:edit','dict:del'])" label="操作" width="130px" align="center" fixed="right">
               <template slot-scope="scope">
-                <el-button v-permission="['admin','dict:edit']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)" />
+                <el-button v-permission="['admin','dict:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
                 <el-popover
                   :ref="scope.row.id"
                   v-permission="['admin','dict:del']"
@@ -50,7 +63,7 @@
                   <p>此操作将删除字典与对应的字典详情，确定要删除吗？</p>
                   <div style="text-align: right; margin: 0">
                     <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
-                    <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
+                    <el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
                   </div>
                   <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
                 </el-popover>
@@ -68,6 +81,7 @@
           />
         </el-card>
       </el-col>
+      <!-- 字典详情列表 -->
       <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
@@ -79,7 +93,7 @@
               style="float: right;padding: 4px 10px"
               type="primary"
               icon="el-icon-plus"
-              @click="$refs.dictDetail.$refs.form.dialog = true;$refs.dictDetail.isAdd = true"
+              @click="$refs.dictDetail.showAddFormDialog"
             >新增</el-button>
           </div>
           <dictDetail ref="dictDetail" />
@@ -90,23 +104,27 @@
 </template>
 
 <script>
-import checkPermission from '@/utils/permission'
-import initData from '@/mixins/initData'
-import { del, downloadDict } from '@/api/system/dict'
-import dictDetail from '../dictDetail/index'
-import { downloadFile } from '@/utils/index'
-import eForm from './form'
+import crud from '@/mixins/crud'
+import dictDetail from './dictDetail'
+import crudDict from '@/api/system/dict'
 export default {
   name: 'Dict',
-  components: { dictDetail, eForm },
-  mixins: [initData],
+  components: { dictDetail },
+  mixins: [crud],
   data() {
     return {
-      delLoading: false,
+      title: '字典',
+      crudMethod: { ...crudDict },
       queryTypeOptions: [
         { key: 'name', display_name: '字典名称' },
         { key: 'remark', display_name: '描述' }
-      ]
+      ],
+      form: { id: null, name: null, remark: null },
+      rules: {
+        name: [
+          { required: true, message: '请输入名称', trigger: 'blur' }
+        ]
+      }
     }
   },
   created() {
@@ -115,69 +133,26 @@ export default {
     })
   },
   methods: {
-    checkPermission,
+    // 获取数据前设置好接口地址
     beforeInit() {
       this.url = 'api/dict'
-      const sort = 'id,desc'
-      this.params = { page: this.page, size: this.size, sort: sort }
-      const query = this.query
-      const value = query.value
-      if (value) { this.params['blurry'] = value }
       if (this.$refs.dictDetail) {
         this.$refs.dictDetail.data = []
         this.$refs.dictDetail.dictName = ''
       }
       return true
     },
-    subDelete(id) {
-      this.delLoading = true
-      del(id).then(res => {
-        this.delLoading = false
-        this.$refs[id].doClose()
-        this.dleChangePage()
-        this.init()
-        this.$notify({
-          title: '删除成功',
-          type: 'success',
-          duration: 2500
-        })
-      }).catch(err => {
-        this.delLoading = false
-        this.$refs[id].doClose()
-        console.log(err.response.data.message)
-      })
-    },
+    // 选中字典后，设置字典详情数据
     handleCurrentChange(val) {
       if (val) {
         this.$refs.dictDetail.dictName = val.name
-        this.$refs.dictDetail.dictId = val.id
+        this.$refs.dictDetail.form.dict.id = val.id
         this.$refs.dictDetail.init()
       }
-    },
-    edit(data) {
-      this.isAdd = false
-      const _this = this.$refs.form
-      _this.form = {
-        id: data.id,
-        name: data.name,
-        remark: data.remark
-      }
-      _this.dialog = true
-    },
-    download() {
-      this.beforeInit()
-      this.downloadLoading = true
-      downloadDict(this.params).then(result => {
-        downloadFile(result, '字典列表', 'xlsx')
-        this.downloadLoading = false
-      }).catch(() => {
-        this.downloadLoading = false
-      })
     }
   }
 }
 </script>
 
 <style scoped>
-
 </style>