!30 数据字典页面开发

Merge pull request !30 from QuAoLi/auto-5159892-develop-1629702938832
2021-08-23 08:40:36 +00:00 · 2021-08-23 08:40:36 +00:00 · b38bf0ea65
parent 491d065fde a36085c2ee
commit b38bf0ea65
17 changed files with 714 additions and 37 deletions
--- a/src/api/sys/dictionary.js
+++ b/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
+  })
+}
--- a/src/api/sys/dictionaryItem.js
+++ b/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
+  })
+}
--- a/src/components/GlobalFooter/index.vue
+++ b/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>
--- a/src/components/Table/index.js
+++ b/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
--- a/src/config/router.config.js
+++ b/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' ] }
      }
+    ]
+  },
 ]
--- a/src/layouts/UserLayout.vue
+++ b/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>
--- a/src/router/generator-routers.js
+++ b/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'),
--- a/src/store/modules/user.js
+++ b/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(LOGIN_TOKEN, result.loginToken, 24 * 60 * 60 * 1000)
-          commit('SET_TOKEN', result.loginToken)
-          commit('SET_INFO', result)
+          storage.set(ACCESS_TOKEN, response.token, 24 * 60 * 60 * 1000)
+          commit('SET_TOKEN', response.token)
          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()
      })
--- a/src/store/mutation-types.js
+++ b/src/store/mutation-types.js
@ -1,6 +1,4 @@
-export const ACCESS_TOKEN = 'ACCESS-TOKEN'
-export const LOGIN_TOKEN = 'LOGIN-TOKEN'
-export const TOKEN_NAME = 'Authorization'
+export const ACCESS_TOKEN = 'Authorization'

 export const SIDEBAR_TYPE = 'sidebar_type'
 export const TOGGLE_MOBILE_TYPE = 'is_mobile'
--- a/src/utils/request.js
+++ b/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 = 'ok'
+const SUCCESS_CODE = 200
 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 loginToken = storage.get(LOGIN_TOKEN)
-  // 如果 token 存在
-  // 让每个请求携带自定义 token 请根据实际情况自行修改
+  // const token = storage.get(ACCESS_TOKEN)
+	// 由于登录接口待联调，token使用默认值
+	const token = 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImU1MmNhNTQ4LThmYmMtNGUyNC1iZjZjLWEzZjgwNDAwMDNiMCJ9._j_AHCd4I_PTWk4mt9euUzlABBoiqsNAIjVGrFJPWv8ZyoqgH9JPs2QFHtoj1Vly8cgtOri8X0ylbttglCcUQQ'
+  // 如果 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)
--- a/src/utils/screenLog.js
+++ b/src/utils/screenLog.js
@ -3,10 +3,7 @@ export const printANSI = () => {
  // console.clear()
  // ASCII - ANSI Shadow
  let text = `
-╔═╗╔╗╔╔╦╗╔═╗╔═╗╔╦╗╔═╗╦═╗
-╠═╣║║║ ║ ║╣ ╠═╣ ║ ║╣ ╠╦╝
-╩ ╩╝╚╝ ╩ ╚═╝╩ ╩ ╩ ╚═╝╩╚═
-Published ${APP_VERSION}-${GIT_HASH} @ tcc.com
+Published ${APP_VERSION}-${GIT_HASH} @ xinmei.com
 Build date: ${BUILD_DATE}`
  console.log(`%c${text}`, 'color: #fc4d50')
 }
--- a/src/views/sys/dictionary/DictionaryDetail.vue
+++ b/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>
--- a/src/views/sys/dictionary/DictionaryForm.vue
+++ b/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>
--- a/src/views/sys/dictionary/DictionaryList.vue
+++ b/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>
--- a/src/views/sys/dictionaryItem/DictionaryItemDetail.vue
+++ b/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>
--- a/src/views/sys/dictionaryItem/DictionaryItemForm.vue
+++ b/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>
--- a/src/views/sys/dictionaryItem/DictionaryItemList.vue
+++ b/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>