api-字典管理

src/api/system/dict.js

@@ -0,0 +1,42 @@
+import request from '@/utils/request'
+import { getToken } from '@/utils/auth'
+
+export function getDictsList(data) {
+  return request({
+    url: 'api/dictionary/initDictionaryList',
+    method: 'post',
+    headers: {
+      Authorization: getToken()
+    },
+    data
+  })
+}
+
+export function add(data) {
+  return request({
+    url: 'api/dictionary/editDictionary',
+    method: 'post',
+    data
+  })
+}
+
+export function del(ids) {
+  const data = {
+    id: ids[0]
+  }
+  return request({
+    url: 'api/dictionary/delDictionary',
+    method: 'post',
+    data
+  })
+}
+
+export function edit(data) {
+  return request({
+    url: 'api/dictionary/editDictionary',
+    method: 'post',
+    data
+  })
+}
+
+export default { add, edit, del, getDictsList }

src/views/system/dict/index.vue

@@ -2,6 +2,12 @@
   <div class="app-container row-container">
     <!--工具栏-->
     <div class="head-container">
+      <div class="head-search">
+        <!-- 搜索 -->
+        <el-input v-model="blurry" clearable size="small" placeholder="输入字典名称或字典代码搜索" prefix-icon="el-icon-search" style="width: 240px;" class="filter-item" @keyup.enter.native="getDictsList" />
+        <el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="getDictsList">搜索</el-button>
+        <el-button v-if="crud.optShow.reset" class="filter-item  filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()">重置</el-button>
+      </div>
       <crudOperation :permission="permission">
         <!-- <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>
@@ -15,11 +21,11 @@
     <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
       <div class="setting-dialog">
         <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="90px">
-          <el-form-item label="字典名称" prop="dicName">
-            <el-input v-model="form.dicName" />
+          <el-form-item label="字典名称" prop="dictionaryName">
+            <el-input v-model="form.dictionaryName" />
           </el-form-item>
-          <el-form-item label="字典代码" prop="dicCode">
-            <el-input v-model="form.dicCode" />
+          <el-form-item label="字典代码" prop="dictionaryCode">
+            <el-input v-model="form.dictionaryCode" />
           </el-form-item>
           <el-form-item label="顶级节点" prop="isTop">
             <el-radio-group v-model="form.isTop">
@@ -27,18 +33,18 @@
               <el-radio label="0">否</el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item label="排序" prop="sequence">
+          <el-form-item label="排序" prop="dictionaryOrder">
             <el-input-number
-              v-model.number="form.sequence"
+              v-model.number="form.dictionaryOrder"
               :min="0"
               :max="999"
               controls-position="right"
             />
           </el-form-item>
           <el-row>
-            <el-form-item v-if="form.isTop === '0'" label="上级节点" prop="dicPid">
+            <el-form-item v-if="form.isTop === '0'" label="上级节点" prop="dictionaryParents">
               <treeselect
-                v-model="form.dicPid"
+                v-model="form.dictionaryParents"
                 style="width: 584px;"
                 :load-options="loadDicts"
                 :options="dicts"
@@ -47,8 +53,8 @@
               />
             </el-form-item>
           </el-row>
-          <el-form-item label="内容说明" prop="dicExplain">
-            <el-input v-model="form.dicExplain" type="textarea" :rows="4" style="width: 584px;" />
+          <el-form-item label="内容说明" prop="dictionaryRemarks">
+            <el-input v-model="form.dictionaryRemarks" type="textarea" :rows="4" style="width: 584px;" />
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
@@ -75,26 +81,26 @@
       <!--表格渲染-->
       <!-- @selection-change="selectionChangeHandler"
         @row-click="clickRowHandler" -->
+      <!-- height="calc(100vh - 232px)" -->
       <el-table
         ref="table"
         v-loading="crud.loading"
         lazy
         :load="getDictsDatas"
-        :data="crud.data"
+        :data="tableData"
         :tree-props="{children: 'childMenus', hasChildren: 'hasChildren'}"
         highlight-current-row
         row-key="id"
         style="width: 100%;"
-        height="calc(100vh - 232px)"
         @select="crud.selectChange"
         @select-all="crud.selectAllChange"
         @selection-change="crud.selectionChangeHandler"
       >
         <el-table-column type="selection" width="55" />
-        <el-table-column prop="dicName" label="字典名称" />
-        <el-table-column prop="dicCode" label="字典代码" />
-        <el-table-column prop="dicExplain" label="内容说明" />
-        <el-table-column prop="dicSequence" label="排序" />
+        <el-table-column prop="dictionaryName" label="字典名称" />
+        <el-table-column prop="dictionaryCode" label="字典代码" />
+        <el-table-column prop="dictionaryRemarks" label="内容说明" />
+        <el-table-column prop="dicdictionaryOrder" label="排序" />
         <el-table-column prop="createTime" label="创建日期" width="200px">
           <template slot-scope="scope">
             <div>{{ scope.row.createTime | parseTime }}</div>
@@ -102,13 +108,22 @@
         </el-table-column>
       </el-table>
       <!--分页组件-->
-      <!-- <pagination /> -->
+      <el-pagination
+        v-if="page.total"
+        :page-size.sync="page.size"
+        :total="page.total"
+        :current-page.sync="page.page"
+        style="margin-top: 8px;"
+        layout="total, prev, pager, next, sizes"
+        @size-change="sizeChangeHandler($event)"
+        @current-change="pageChangeHandler"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import crudDict from '@/api/archivesConfig/dict'
+import crudDict from '@/api/system/dict'
 // import crudDictDetail from '@/api/archivesConfig/dictDetail'
 import CRUD, { presenter, header, form } from '@crud/crud'
 import crudOperation from '@crud/CRUD.operation'
@@ -117,7 +132,7 @@ import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
 
-const defaultForm = { id: null, dicName: null, isTop: '1', dicCode: null, sequence: 999, dicExplain: null, dicType: false, dicPid: null }
+const defaultForm = { id: null, dictionaryName: null, isTop: '1', dictionaryCode: null, dictionaryOrder: 999, dictionaryRemarks: null, dictionaryParents: null }
 
 export default {
   name: 'Dicts',
@@ -125,9 +140,10 @@ export default {
   cruds() {
     return [
       CRUD({
-        title: '字典', url: 'api/dictrionary/menu',
+        title: '字典', url: '',
         crudMethod: { ...crudDict },
-        sort: ['dicSequence,asc']
+        queryOnPresenterCreated: false,
+        sort: []
       })
     ]
   },
@@ -135,7 +151,7 @@ export default {
     presenter(),
     header(),
     form(function() {
-      return Object.assign({ dicPid: this.dicPid }, defaultForm)
+      return Object.assign({ dictionaryParents: this.dictionaryParents }, defaultForm)
     })
   ],
   props: {
@@ -145,20 +161,27 @@ export default {
   },
   data() {
     return {
+      tableData: [],
+      blurry: null,
+      page: {
+        total: 0,
+        size: 10,
+        page: 1
+      },
       dicts: [],
-      dicPid: null,
+      dictionaryParents: null,
       needRefreshTree: false,
       rules: {
-        dicName: [
+        dictionaryName: [
           { required: true, message: '请输入字典名称', trigger: 'blur' }
         ],
-        dicCode: [
+        dictionaryCode: [
           { required: true, message: '请输入字典代码', trigger: 'blur' }
         ],
         isTop: [
           { required: true, message: '请选择是否为顶级节点', trigger: 'change' }
         ],
-        sequence: [
+        dictionaryOrder: [
           { required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
         ]
       },
@@ -171,7 +194,14 @@ export default {
       deleteData: {}
     }
   },
+  mounted() {
+    this.getDictsList()
+  },
   methods: {
+    resetQuery() {
+      this.blurry = null
+      this.getDictsList()
+    },
     [CRUD.HOOK.afterSubmit]() {
       this.needRefreshTree = true
     },
@@ -180,16 +210,16 @@ export default {
     },
     // 新增与编辑前做的操作
     [CRUD.HOOK.afterToCU](crud, form) {
-      if (form.dicPid !== null) {
+      if (form.dictionaryParents !== null) {
         form.isTop = '0'
       } else if (form.id !== null) {
         form.isTop = '1'
       }
-      this.getDicts()
+      this.getDictsList()
     },
     // 获取数据前设置默认参数
     [CRUD.HOOK.beforeRefresh]() {
-      this.crud.query.id = this.dicPid
+      this.crud.query.id = this.dictionaryParents
     },
     [CRUD.HOOK.afterRefresh](crud) {
       if (this.needRefreshTree) {
@@ -200,25 +230,34 @@ export default {
     getDictsDatas(tree, treeNode, resolve) {
       const params = { pid: tree.id }
       setTimeout(() => {
-        crudDict.getDicts(params).then(res => {
+        crudDict.getDictsList(params).then(res => {
           resolve(res.content)
         })
       }, 100)
     },
-    getDicts() {
-      crudDict.getDicts().then(res => {
-        this.dicts = res.map(function(obj) {
+    getDictsList() {
+      this.crud.loading = true
+      const params = {
+        blurry: this.blurry,
+        page: this.page.page - 1,
+        size: this.page.size
+      }
+      crudDict.getDictsList(params).then(res => {
+        this.tableData = res.content
+        this.total = res.totalPages
+        this.dicts = res.content.map(function(obj) {
           if (!obj.childMenus) {
             obj.childMenus = null
           }
           return obj
         })
+        this.crud.loading = false
       })
     },
     // 获取弹窗内字典数据
     loadDicts({ action, parentNode, callback }) {
       if (action === LOAD_CHILDREN_OPTIONS) {
-        crudDict.getDicts().then(res => {
+        crudDict.getDictsList().then(res => {
           parentNode.children = res.map(function(obj) {
             if (obj.children) {
               obj.childMenus = null
@@ -267,9 +306,24 @@ export default {
       }
       return {
         id: node.id,
-        label: node.dicName,
+        label: node.dictionaryName,
         children: node.childMenus
       }
+    },
+    // 每页条数改变
+    sizeChangeHandler(e) {
+      this.crud.loading = true
+      this.page.size = e
+      this.page.page = 1
+      this.getDictsList()
+      this.crud.loading = false
+    },
+    // 当前页改变
+    pageChangeHandler(e) {
+      this.crud.loading = true
+      this.page.page = e
+      this.getDictsList()
+      this.crud.loading = false
     }
   }
 }