!30 数据字典页面开发

Merge pull request !30 from QuAoLi/auto-5159892-develop-1629702938832

src/api/sys/dictionary.js

@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+const dictionaryApi = {
+  add: '/sys/dictionary/add',
+  get: '/sys/dictionary/get',
+  update: '/sys/dictionary/edit',
+  del: '/sys/dictionary/del',
+  page: '/sys/dictionary/pageList'
+}
+
+export function dictionaryAdd (params) {
+  return request({
+    url: dictionaryApi.add,
+    method: 'post',
+    data: params
+  })
+}
+export function dictionaryGet (params) {
+  return request({
+    url: dictionaryApi.get,
+    method: 'post',
+    data: params
+  })
+}
+export function dictionaryUpdate (params) {
+  return request({
+    url: dictionaryApi.update,
+    method: 'post',
+    data: params
+  })
+}
+export function dictionaryDel (params) {
+  return request({
+    url: dictionaryApi.del,
+    method: 'post',
+    data: params
+  })
+}
+export function dictionaryPage (params) {
+  return request({
+    url: dictionaryApi.page,
+    method: 'get',
+    data: params
+  })
+}

src/api/sys/dictionaryItem.js

@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+const dictionaryItemApi = {
+  add: '/sys/dictionaryItem/add',
+  get: '/sys/dictionaryItem/get',
+  update: '/sys/dictionaryItem/edit',
+  del: '/sys/dictionaryItem/del',
+  page: '/sys/dictionaryItem/pageList'
+}
+
+export function dictionaryItemAdd (params) {
+  return request({
+    url: dictionaryItemApi.add,
+    method: 'post',
+    data: params
+  })
+}
+export function dictionaryItemGet (params) {
+  return request({
+    url: dictionaryItemApi.get,
+    method: 'post',
+    data: params
+  })
+}
+export function dictionaryItemUpdate (params) {
+  return request({
+    url: dictionaryItemApi.update,
+    method: 'post',
+    data: params
+  })
+}
+export function dictionaryItemDel (params) {
+  return request({
+    url: dictionaryItemApi.del,
+    method: 'post',
+    data: params
+  })
+}
+export function dictionaryItemPage (params) {
+  return request({
+    url: dictionaryItemApi.page,
+    method: 'get',
+    data: params
+  })
+}

src/components/GlobalFooter/index.vue

@@ -2,7 +2,7 @@
   <global-footer class="footer custom-render">
     <template v-slot:links></template>
     <template v-slot:copyright>
-      <a href="https://one.biz.com" target="_blank">tcc出品</a>
+      <a href="https://one.biz.com" target="_blank">XinMei出品</a>
     </template>
   </global-footer>
 </template>

src/components/Table/index.js

@@ -136,7 +136,7 @@ export default {
     loadData (pagination, filters, sorter) {
       this.localLoading = true
       const parameter = Object.assign({
-        pageIndex: (pagination && pagination.current) ||
+        pageNum: (pagination && pagination.current) ||
           this.showPagination && this.localPagination.current || this.pageNum,
         pageSize: (pagination && pagination.pageSize) ||
           this.showPagination && this.localPagination.pageSize || this.pageSize
@@ -157,13 +157,13 @@ export default {
         result.then(r => {
           this.localPagination = this.showPagination && Object.assign({}, this.localPagination, {
             current: r.pageNo, // 返回结果中的当前分页数
-            total: r.entityCount, // 返回结果中的总记录数
+            total: r.total, // 返回结果中的总记录数
             showSizeChanger: this.showSizeChanger,
             pageSize: (pagination && pagination.pageSize) ||
               this.localPagination.pageSize
           }) || false
           // 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
-          if (r.entities.length === 0 && this.showPagination && this.localPagination.current > 1) {
+          if (r.rows.length === 0 && this.showPagination && this.localPagination.current > 1) {
             this.localPagination.current--
             this.loadData()
             return

src/config/router.config.js

@@ -56,6 +56,12 @@ export const asyncRouterMap = [
             name: 'SecurityResource',
             component: () => import('@/views/security/resource/ResourceTree'),
             meta: { title: '菜单管理', keepAlive: true }
+          },
+          {
+            path: '/sys/dictionary',
+            name: 'DictionaryList',
+            component: () => import('@/views/sys/dictionary/DictionaryList'),
+            meta: { title: '数据词典', keepAlive: true }
           }
         ]
       },
@@ -69,7 +75,7 @@ export const asyncRouterMap = [
           {
             path: '/form/base-form',
             name: 'BaseForm',
-            component: () => import('@/views/form/basicForm/index'),
+            component: () => import('@/views/form/basicForm/Index'),
             meta: { title: '基础表单', keepAlive: true, permission: [ 'form' ] }
           },
           {
@@ -154,7 +160,7 @@ export const asyncRouterMap = [
           {
             path: '/profile/basic',
             name: 'ProfileBasic',
-            component: () => import('@/views/profile/basic/index'),
+            component: () => import('@/views/profile/basic/Index'),
             meta: { title: '基础详情页', permission: [ 'profile' ] }
           },
           {
@@ -226,7 +232,7 @@ export const asyncRouterMap = [
           {
             path: '/account/center',
             name: 'center',
-            component: () => import('@/views/account/center/index'),
+            component: () => import('@/views/account/center/Index'),
             meta: { title: '个人中心', keepAlive: true, permission: [ 'user' ] }
           },
           {
@@ -373,5 +379,19 @@ export const constantRouterMap = [
   {
     path: '/404',
     component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
+  },
+  {
+    path: '/dictionary',
+    component: BasicLayout,
+    redirect: '/sys/dictionary',
+    meta: { title: '词典分类' },
+    children: [
+      {
+        path: 'dictionaryItem/list/:id',
+        name: 'DictionaryItemList',
+        component: () => import('@/views/sys/dictionaryItem/DictionaryItemList'),
+        meta: { title: '词典项', keepAlive: true, permission: [ 'dictionaryItem' ] }
       }
+    ]
+  },
 ]

src/layouts/UserLayout.vue

@@ -17,7 +17,7 @@
           <a href="_self">条款</a>
         </div>
         <div class="copyright">
-          Copyright &copy; 2021 YinMei
+          Copyright &copy; 2021 XinMei
         </div>
       </div>
     </div>

src/router/generator-routers.js

@@ -17,7 +17,7 @@ const constantRouterComponents = {
   // 你需要动态引入的页面组件
   'Workplace': () => import('@/views/dashboard/Workplace'),
   // form
-  'BasicForm': () => import('@/views/form/basicForm/index'),
+  'BasicForm': () => import('@/views/form/basicForm/Index'),
   'StepForm': () => import('@/views/form/stepForm/StepForm'),
   'AdvanceForm': () => import('@/views/form/advancedForm/AdvancedForm'),
 
@@ -29,7 +29,7 @@ const constantRouterComponents = {
   'SearchArticles': () => import('@/views/list/search/Article'),
   'SearchProjects': () => import('@/views/list/search/Projects'),
   'SearchApplications': () => import('@/views/list/search/Applications'),
-  'ProfileBasic': () => import('@/views/profile/basic/index'),
+  'ProfileBasic': () => import('@/views/profile/basic/Index'),
   'ProfileAdvanced': () => import('@/views/profile/advanced/Advanced'),
 
   // result
@@ -42,7 +42,7 @@ const constantRouterComponents = {
   'Exception500': () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'),
 
   // account
-  'AccountCenter': () => import('@/views/account/center/index'),
+  'AccountCenter': () => import('@/views/account/center/Index'),
   'AccountSettings': () => import('@/views/account/settings/Index'),
   'BaseSettings': () => import('@/views/account/settings/BaseSetting'),
   'SecuritySettings': () => import('@/views/account/settings/Security'),

src/store/modules/user.js

@@ -1,11 +1,11 @@
 import storage from 'store'
 import { userLogin, getInfo } from '@/api/security/user'
-import { ACCESS_TOKEN, LOGIN_TOKEN } from '@/store/mutation-types'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
 import { welcome } from '@/utils/util'
 
 const user = {
   state: {
-    loginToken: '',
+    token: '',
     name: '',
     welcome: '',
     avatar: '',
@@ -15,7 +15,7 @@ const user = {
 
   mutations: {
     SET_TOKEN: (state, token) => {
-      state.loginToken = token
+      state.token = token
     },
     SET_NAME: (state, { name, welcome }) => {
       state.name = name
@@ -37,10 +37,8 @@ const user = {
     Login ({ commit }, userInfo) {
       return new Promise((resolve, reject) => {
         userLogin(userInfo).then(response => {
-          const result = response.data
+          storage.set(ACCESS_TOKEN, response.token, 24 * 60 * 60 * 1000)
-          storage.set(LOGIN_TOKEN, result.loginToken, 24 * 60 * 60 * 1000)
+          commit('SET_TOKEN', response.token)
-          commit('SET_TOKEN', result.loginToken)
-          commit('SET_INFO', result)
           resolve()
         }).catch(error => {
           reject(error)
@@ -82,7 +80,6 @@ const user = {
       return new Promise((resolve) => {
 				commit('SET_TOKEN', '')
 				commit('SET_ROLES', [])
-				storage.remove(LOGIN_TOKEN)
         storage.remove(ACCESS_TOKEN)
 				resolve()
       })

src/store/mutation-types.js

@@ -1,6 +1,4 @@
-export const ACCESS_TOKEN = 'ACCESS-TOKEN'
+export const ACCESS_TOKEN = 'Authorization'
-export const LOGIN_TOKEN = 'LOGIN-TOKEN'
-export const TOKEN_NAME = 'Authorization'
 
 export const SIDEBAR_TYPE = 'sidebar_type'
 export const TOGGLE_MOBILE_TYPE = 'is_mobile'

src/utils/request.js

@@ -3,10 +3,9 @@ import store from '@/store'
 import storage from 'store'
 import notification from 'ant-design-vue/es/notification'
 import { VueAxios } from './axios'
-import { ACCESS_TOKEN, LOGIN_TOKEN, TOKEN_NAME } from '@/store/mutation-types'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
 
-const DATA_OWNER = 1
+const SUCCESS_CODE = 200
-const SUCCESS_CODE = 'ok'
 const INVALID_TOKEN_CODE = '0000'
 
 const toast = (msg, description) => {
@@ -48,20 +47,17 @@ const errorHandler = (error) => {
 
 // request interceptor
 request.interceptors.request.use(config => {
-  const token = storage.get(ACCESS_TOKEN)
+  // const token = storage.get(ACCESS_TOKEN)
-  const loginToken = storage.get(LOGIN_TOKEN)
+	// 由于登录接口待联调，token使用默认值
-  // 如果 token 存在
+	const token = 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImU1MmNhNTQ4LThmYmMtNGUyNC1iZjZjLWEzZjgwNDAwMDNiMCJ9._j_AHCd4I_PTWk4mt9euUzlABBoiqsNAIjVGrFJPWv8ZyoqgH9JPs2QFHtoj1Vly8cgtOri8X0ylbttglCcUQQ'
-  // 让每个请求携带自定义 token 请根据实际情况自行修改
+  // 如果 token 存在,让每个请求携带自定义 token 请根据实际情况自行修改
   if (token) {
     config.headers[ACCESS_TOKEN] = token
-    config.headers[TOKEN_NAME] = 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjdhYTViMGZiLTkyOWQtNDhhZS04ODU1LWJkNzM5MjdlOTNiZCJ9.CZzowaB-w2krGpNttPZBNLfq1mw775Lh-sx1K8onfgSwNzA6bw-P7CqC4vgH29xjDv3ey4zEFDzV9pHnrAGrDA'
   }
   if (config.method === 'post') {
     if (!config.data) {
       config.data = {}
     }
-    config.data.dataOwner = DATA_OWNER
-    config.data.loginToken = loginToken
   }
   return config
 }, errorHandler)

src/utils/screenLog.js

@@ -3,10 +3,7 @@ export const printANSI = () => {
   // console.clear()
   // ASCII - ANSI Shadow
   let text = `
-╔═╗╔╗╔╔╦╗╔═╗╔═╗╔╦╗╔═╗╦═╗
+Published ${APP_VERSION}-${GIT_HASH} @ xinmei.com
-╠═╣║║║ ║ ║╣ ╠═╣ ║ ║╣ ╠╦╝
-╩ ╩╝╚╝ ╩ ╚═╝╩ ╩ ╩ ╚═╝╩╚═
-Published ${APP_VERSION}-${GIT_HASH} @ tcc.com
 Build date: ${BUILD_DATE}`
   console.log(`%c${text}`, 'color: #fc4d50')
 }

src/views/sys/dictionary/DictionaryDetail.vue

@@ -0,0 +1,40 @@
+<template>
+  <a-drawer
+    title="词典分类详情"
+    width="640"
+    placement="right"
+    :visible="visible"
+    @close="onClose">
+    <a-descriptions :column="{ sm: 2, xs: 1 }">
+      <a-descriptions-item label="词典名称">{{ model.dictionaryName }}</a-descriptions-item>
+      <a-descriptions-item label="词典标识">{{ model.dictionaryCode }}</a-descriptions-item>
+      <a-descriptions-item label="创建时间">{{ model.createTime | moment('YYYY-MM-DD HH:mm:ss') }}</a-descriptions-item>
+      <a-descriptions-item label="最近修改">{{ model.updateTime | moment('YYYY-MM-DD HH:mm:ss') }}</a-descriptions-item>
+    </a-descriptions>
+  </a-drawer>
+</template>
+
+<script>
+import { dictionaryGet } from '@/api/sys/dictionary'
+
+export default {
+  data () {
+    return {
+      model: {},
+      visible: false
+    }
+  },
+  methods: {
+    show (id) {
+      this.visible = true
+      dictionaryGet({ id: id }).then(data => {
+        this.model = data.data
+      })
+    },
+    onClose () {
+      this.model = {}
+      this.visible = false
+    }
+  }
+}
+</script>

src/views/sys/dictionary/DictionaryForm.vue

@@ -0,0 +1,103 @@
+<template>
+  <a-modal centered :visible="visible" :title="modalTitle" :width="720" @close="onCancel">
+    <a-form-model
+      ref="ruleForm"
+      :model="form"
+      :rules="rules"
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol">
+      <a-row>
+        <a-col :span="12">
+          <a-form-model-item ref="dictionaryName" label="词典名称" prop="dictionaryName">
+            <a-input v-model="form.dictionaryName"/>
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item ref="dictionaryCode" label="词典标识" prop="dictionaryCode">
+            <a-input v-model="form.dictionaryCode"/>
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+    </a-form-model>
+    <div class="draw-button-container align-center">
+      <a-button @click="onCancel">取消</a-button>
+      <a-button type="primary" @click="onSubmit">保存</a-button>
+    </div>
+    </a-drawer>
+  </a-modal></template>
+
+<script>
+import { dictionaryAdd, dictionaryUpdate, dictionaryGet } from '@/api/sys/dictionary'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: undefined
+    }
+  },
+  data () {
+    return {
+      modalTitle: '新增',
+      visible: false,
+      labelCol: { span: 8 },
+      wrapperCol: { span: 16 },
+      form: {
+        dictionaryName: '',
+        dictionaryCode: ''
+      },
+      rules: {
+        dictionaryName: [
+          { required: true, message: '请输入词典名称', trigger: 'blur' },
+          { max: 25, message: '长度不能超过25', trigger: 'blur' }
+        ],
+        dictionaryCode: [
+          { required: true, message: '请输入词典标识', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    add () {
+      this.modalTitle = '新增'
+      this.visible = true
+      this.form.id = undefined
+    },
+    edit (obj) {
+      this.modalTitle = '修改'
+      this.visible = true
+      dictionaryGet({ id: obj.id }).then(data => {
+        const form = data.data
+        this.form = form
+      })
+    },
+    onSubmit (e) {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          if (this.form.id) {
+            dictionaryUpdate(this.form).then(data => {
+              this.$emit('ok')
+              this.onCancel()
+            })
+          } else {
+            dictionaryAdd(this.form).then(data => {
+              this.$emit('ok')
+              this.onCancel()
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    onCancel () {
+      this.$refs.ruleForm.resetFields()
+      delete this.form.id
+      this.visible = false
+    },
+    onReset () {
+      this.$refs.ruleForm.resetFields()
+    }
+  }
+}
+</script>

src/views/sys/dictionary/DictionaryList.vue

@@ -0,0 +1,126 @@
+<template>
+  <page-header-wrapper :title="false">
+    <a-card :bordered="false">
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline">
+          <a-row :gutter="48">
+            <a-col :md="6" :sm="24">
+              <a-form-item label="词典名称">
+                <a-input v-model="queryParam.dictionaryName" placeholder="请输入词典名称" @pressEnter="handleRefresh"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <a-form-item label="词典编码">
+                <a-input v-model="queryParam.dictionaryCode" placeholder="请输入词典编码" @pressEnter="handleRefresh"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <a-button type="primary" @click="handleRefresh">查询</a-button>
+              <a-button @click="() => {queryParam = {}, handleRefresh()}">重置</a-button>
+            </a-col>
+            <a-col :md="6" :sm="24" align="right" >
+              <a-button type="primary" @click="handleCreate">新增</a-button>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <s-table
+        ref="table"
+        size="default"
+        rowKey="id"
+        :columns="columns"
+        :data="loadData"
+      >
+        <template slot="action" slot-scope="text, record">
+          <a href="javascript:;" @click="handleEdit(record)">修改</a>
+          <a-divider type="vertical" />
+          <a-popconfirm title="是否删除?" @confirm="() => handleDelete(record)">
+            <a href="javascript:;">删除</a>
+          </a-popconfirm>
+          <a-divider type="vertical" />
+          <a href="javascript:;" @click="handleDetail(record.id)">详情</a>
+          <a-divider type="vertical" />
+          <router-link :to="'/dictionary/dictionaryItem/list/' + record.id">词典项</router-link>
+        </template>
+      </s-table>
+      <dictionary-form ref="modal" @ok="handleOk" />
+      <dictionary-detail ref="detail" />
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+import { dictionaryPage, dictionaryDel } from '@/api/sys/dictionary'
+import { STable } from '@/components'
+import DictionaryForm from './DictionaryForm'
+import DictionaryDetail from './DictionaryDetail'
+
+export default {
+  name: 'DictionaryList',
+  components: {
+    STable,
+    DictionaryForm,
+    DictionaryDetail
+  },
+  data () {
+    return {
+      queryParam: { dictionaryName: '', dictionaryCode: '' },
+      selectedRowKeys: [], // 选中行的key 出选择框时需要配置
+      selectedRows: [], // 选中行的数据
+      columns: [
+        { title: '词典名称', width: 30, dataIndex: 'dictionaryName', key: 'dictionaryName' },
+        { title: '词典编码', width: 30, dataIndex: 'dictionaryCode', key: 'dictionaryCode' },
+        {
+          title: '操作',
+          key: 'operation',
+          width: 10,
+          align: 'right',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      loadData: parameter => {
+        return dictionaryPage(Object.assign(parameter, this.queryParam))
+          .then(res => {
+            const data = res.data
+            return data
+          })
+      }
+    }
+  },
+  computed: {
+    rowSelection () {
+      return {
+        selectedRowKeys: this.selectedRowKeys,
+        onChange: this.onSelectChange
+      }
+    }
+  },
+  methods: {
+    // 增
+    handleCreate () {
+      this.$refs.modal.add()
+    },
+    // 改
+    handleEdit (record) {
+      this.$refs.modal.edit(record)
+    },
+    // 删
+    handleDelete (record) {
+      dictionaryDel({ id: record.id }).then(() => {
+        this.$refs.table.refresh()
+      })
+    },
+    // 编辑后回调
+    handleOk () {
+      this.$refs.table.refresh()
+    },
+    // 详情
+    handleDetail (id) {
+      this.$refs.detail.show(id)
+    },
+    handleRefresh () {
+      this.$refs.table.refresh(true)
+    }
+  }
+}
+</script>

src/views/sys/dictionaryItem/DictionaryItemDetail.vue

@@ -0,0 +1,48 @@
+<template>
+  <a-drawer
+    title="词典项详情"
+    width="640"
+    placement="right"
+    :visible="visible"
+    @close="onClose">
+    <a-descriptions :column="{ sm: 2, xs: 1 }">
+      <a-descriptions-item label="词典项名称">{{ model.name }}</a-descriptions-item>
+      <a-descriptions-item label="词典项值">{{ model.value }}</a-descriptions-item>
+      <a-descriptions-item label="所属上级">{{ model.parentid }}</a-descriptions-item>
+      <a-descriptions-item label="排序">{{ model.sortid }}</a-descriptions-item>
+      <a-descriptions-item label="描述">{{ model.description }}</a-descriptions-item>
+      <a-descriptions-item label="创建时间">{{ model.createTime | moment('YYYY-MM-DD HH:mm:ss') }}</a-descriptions-item>
+      <a-descriptions-item label="最近修改">{{ model.updateTime | moment('YYYY-MM-DD HH:mm:ss') }}</a-descriptions-item>
+    </a-descriptions>
+  </a-drawer>
+</template>
+
+<script>
+import { dictionaryItemGet } from '@/api/sys/dictionaryItem'
+
+export default {
+  data () {
+    return {
+      model: {},
+      visible: false
+    }
+  },
+  filters: {
+    statusFilter (status) {
+      return statusMap[status]
+    }
+  },
+  methods: {
+    show (id) {
+      this.visible = true
+      dictionaryItemGet({ id: id }).then(data => {
+        this.model = data.data
+      })
+    },
+    onClose () {
+      this.model = {}
+      this.visible = false
+    }
+  }
+}
+</script>

src/views/sys/dictionaryItem/DictionaryItemForm.vue

@@ -0,0 +1,130 @@
+<template>
+  <a-modal :visible="visible" :title="modalTitle" :width="720" @close="onCancel">
+    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
+      <a-row>
+        <a-col :span="12">
+          <a-form-model-item ref="name" label="词典项名称" prop="name">
+            <a-input v-model="form.name"/>
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item ref="value" label="词典项值" prop="value">
+            <a-input v-model="form.value"/>
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-model-item ref="parentid" label="所属上级" prop="parentid">
+            <a-input-number v-model="form.parentid" :min="0"/>
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item ref="sortid" label="排序" prop="sortid">
+            <a-input-number v-model="form.sortid" :min="0"/>
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="24">
+          <a-form-model-item ref="description" label="描述" prop="description" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
+            <a-textarea :autoSize="{ minRows: 3, maxRows: 10 }" v-model="form.description"/>
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+    </a-form-model>
+    <div class="draw-button-container align-center">
+      <a-button @click="onCancel">取消</a-button>
+      <a-button type="primary" @click="onSubmit">保存</a-button>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import { dictionaryItemAdd, dictionaryItemUpdate, dictionaryItemGet } from '@/api/sys/dictionaryItem'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: undefined
+    }
+  },
+  data () {
+    return {
+      modalTitle: '新增',
+      visible: false,
+      labelCol: { span: 8 },
+      wrapperCol: { span: 16 },
+      form: {
+        dictionaryCode: this.$route.params.id,
+        name: '',
+        value: '',
+        parentid: 0,
+        sortid: 0,
+        description: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入词典项名称', trigger: 'blur' }
+        ],
+        value: [
+          { required: true, message: '请输入词典项值', trigger: 'blur' },
+          { max: 4, message: '长度不能超过4', trigger: 'blur' }
+        ],
+        parentid: [
+          { required: true, message: '请输入所属上级', trigger: 'blur' }
+        ],
+        sortid: [
+          { required: true, message: '请输入排序', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    add () {
+      this.modalTitle = '新增'
+      this.visible = true
+      this.form.id = undefined
+    },
+    edit (obj) {
+      this.modalTitle = '修改'
+      this.visible = true
+      dictionaryItemGet({ id: obj.id }).then(data => {
+        const form = data.data
+        this.form = form
+      })
+    },
+    onSubmit (e) {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          if (this.form.id) {
+            dictionaryItemUpdate(this.form).then(data => {
+              this.$emit('ok')
+              this.onCancel()
+            })
+          } else {
+            dictionaryItemAdd(this.form).then(data => {
+              this.$emit('ok')
+              this.onCancel()
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    onCancel () {
+      this.$refs.ruleForm.resetFields()
+      delete this.form.id
+      this.visible = false
+    },
+    onReset () {
+      this.$refs.ruleForm.resetFields()
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/sys/dictionaryItem/DictionaryItemList.vue

@@ -0,0 +1,132 @@
+<template>
+  <page-header-wrapper :title="false">
+    <a-card :bordered="false">
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline">
+          <a-row :gutter="48">
+            <a-col :md="6" :sm="24">
+              <a-form-item label="词典项名称">
+                <a-input v-model="queryParam.name" placeholder="词典项名称" @pressEnter="handleRefresh"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <a-form-item label="词典项值">
+                <a-input v-model="queryParam.value" placeholder="请输入词典项值" @pressEnter="handleRefresh"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <a-button type="primary" @click="handleRefresh">查询</a-button>
+              <a-button @click="() => {queryParam = { dictionaryCode: this.$route.params.id }, handleRefresh()}">重置</a-button>
+            </a-col>
+            <a-col :md="6" :sm="24" align="right" >
+              <a-button type="primary" @click="handleCreate">新增</a-button>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <s-table
+        ref="table"
+        size="default"
+        rowKey="id"
+        :columns="columns"
+        :data="loadData"
+      >
+        <template slot="action" slot-scope="text, record">
+          <a href="javascript:;" @click="handleEdit(record)">修改</a>
+          <a-divider type="vertical" />
+          <a-popconfirm title="是否删除?" @confirm="() => handleDelete(record)">
+            <a href="javascript:;">删除</a>
+          </a-popconfirm>
+          <a-divider type="vertical" />
+          <a href="javascript:;" @click="handleDetail(record.id)">详情</a>
+        </template>
+      </s-table>
+      <dictionaryItem-form ref="modal" @ok="handleOk" />
+      <dictionaryItem-detail ref="detail" />
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+import { dictionaryItemPage, dictionaryItemDel } from '@/api/sys/dictionaryItem'
+import { STable } from '@/components'
+import DictionaryItemForm from './DictionaryItemForm'
+import DictionaryItemDetail from './DictionaryItemDetail'
+
+export default {
+  name: 'DictionaryItemList',
+  components: {
+    STable,
+    DictionaryItemForm,
+    DictionaryItemDetail
+  },
+  data () {
+    return {
+      queryParam: { name: '', value: '', dictionaryCode: this.$route.params.id },
+      selectedRowKeys: [], // 选中行的key 出选择框时需要配置
+      selectedRows: [], // 选中行的数据
+      columns: [
+        { title: '词典项名称', width: 30, dataIndex: 'name', key: 'name' },
+        { title: '词典项值', width: 30, dataIndex: 'value', key: 'value' },
+        { title: '词典标识', width: 30, dataIndex: 'dictionaryCode', key: 'dictionaryCode' },
+        { title: '上级', width: 30, dataIndex: 'parentId', key: 'parentId' },
+        { title: '排序', width: 30, dataIndex: 'sortid', key: 'sortid' },
+        {
+          title: '操作',
+          key: 'operation',
+          width: 10,
+          align: 'right',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      loadData: parameter => {
+        return dictionaryItemPage(Object.assign(parameter, this.queryParam))
+          .then(res => {
+            const data = res.data
+            return data
+          })
+      }
+    }
+  },
+  computed: {
+    rowSelection () {
+      return {
+        selectedRowKeys: this.selectedRowKeys,
+        onChange: this.onSelectChange
+      }
+    }
+  },
+  methods: {
+    // 增
+    handleCreate () {
+      this.$refs.modal.add()
+    },
+    // 改
+    handleEdit (record) {
+      this.$refs.modal.edit(record)
+    },
+    // 删
+    handleDelete (record) {
+      dictionaryItemDel({ id: record.id }).then(() => {
+        this.$refs.table.refresh()
+      })
+    },
+    // 编辑后回调
+    handleOk () {
+      this.$refs.table.refresh()
+    },
+    // 详情
+    handleDetail (id) {
+      this.$refs.detail.show(id)
+    },
+    handleRefresh () {
+      this.$refs.table.refresh(true)
+    },
+    // 选择行
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    }
+  }
+}
+</script>