feat:字典模块

@@ -13,6 +13,13 @@ Vue.mixin(mixin);
 import { theme } from "@/directive/theme.js"
 Vue.directive("theme", theme)
 
+Vue.directive('fo', {
+    inserted (el, binding, vnode) {
+        // 聚焦元素
+        el.querySelector('input').focus()
+    }
+})
+
 import './image/icons' // icon
 import store from './store'
 import router from './router'

@@ -213,7 +213,7 @@ export const asyncRoutes = [
         path: 'dictionaries',
         id: '91',
         parentId: '9',
-        component: () => import('@/views/system/dictionaries.vue'),
+        component: () => import('@/views/system/dictionaries/dictionaries.vue'),
         name: 'dictionaries',
         meta: { title: '字典管理' }
       },

+<template>
+  <!-- 编辑 -->
+  <dialogBox submitForm="submitForm" @closeDialog="closeDialog" v-model="myValue" title="字典信息">
+    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="字典类型编码" prop="dcode">
+            <el-input v-model.trim="ruleForm.dcode" placeholder="字典类型编码"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="字典类型名称" prop="dname">
+            <el-input v-model.trim="ruleForm.dname" placeholder="字典类型名称"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <lb-table :column="column" :heightNum="520" :key="key" :expand-row-keys="keyList" row-key="dictid"
+      :tree-props="{ children: 'children' }" :pagination="false" :data="tableData">
+    </lb-table>
+  </dialogBox>
+</template>
+
+<script>
+export default {
+  props: {
+    value: { type: Boolean, default: false },
+  },
+  data () {
+    return {
+      key: 0,
+      myValue: this.value,
+      keyList: [],
+      ruleForm: {
+        dcode: '',
+        dname: ''
+      },
+      column: [
+        {
+          width: '60',
+          renderHeader: (h, scope) => {
+            return <i class="el-icon-plus" onClick={() => { this.handleAdd() }} style="cursor:pointer;color:#409EFF"></i>
+          },
+          render: (h, scope) => {
+            return (
+              <span>{scope.row.index}</span>
+            )
+          }
+        },
+        {
+          prop: 'dcode',
+          label: '字典项编码',
+          render: (h, scope) => {
+            return (
+              <div>
+                <el-input placeholder="字典项编码" v-show={scope.row.codeShow} v-fo value={scope.row[scope.column.property]}
+                  onFocus={() => { this.itemShowFalse(); scope.row.codeShow = true; }}
+                  onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
+
+
+                <el-input placeholder="字典项编码" v-show={!scope.row.codeShow} value={scope.row[scope.column.property]}
+                  onFocus={() => { this.itemShowFalse(); scope.row.codeShow = true; }}
+                  onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
+              </div>
+            )
+          }
+        },
+        {
+          prop: 'dname',
+          label: '字典项名称',
+          render: (h, scope) => {
+            return (
+              <div>
+                <el-input placeholder="字典项编码" v-show={scope.row.nameShow} v-fo value={scope.row[scope.column.property]}
+                  onFocus={() => { this.itemShowFalse(); scope.row.nameShow = true; }}
+                  onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
+
+                <el-input placeholder="字典项名称" v-show={!scope.row.nameShow} value={scope.row[scope.column.property]}
+                  onFocus={() => { this.itemShowFalse(); scope.row.nameShow = true; }}
+                  onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
+              </div>
+            )
+          }
+        },
+        {
+          width: '130px',
+          label: '移动',
+          render: (h, scope) => {
+            return (
+              <div>
+                <el-button type='text' disabled={scope.$index == 0} onClick={() => { this.moveUpward(scope.$index, scope.row) }}>上移</el-button>
+                <el-button type='text' disabled={(scope.$index + 1) == this.tableData.length} onClick={() => { this.moveDown(scope.$index, scope.row) }}>下移</el-button >
+              </div >
+            )
+          }
+        },
+        {
+          width: '150px',
+          label: '操作',
+          render: (h, scope) => {
+            return (
+              <div>
+                <el-button type="text" style="margin-right:10px" onClick={() => { this.handleAddSubordinate(scope.row) }}>增加下级</el-button>
+                <el-button type="text" style="margin-left:0" onClick={() => { this.handleMinus(scope.$index, scope.row) }}>删除</el-button>
+              </div>
+            )
+          }
+        }
+      ],
+      tableData: [],
+      rules: {
+      }
+    }
+  },
+  watch: {
+    value (val) {
+      this.myValue = val
+    }
+  },
+  methods: {
+    // 添加索引
+    addIndexes () {
+      this.tableData.forEach((item, index) => {
+        if (index == 0) {
+          item.codeShow = true
+        } else {
+          item.codeShow = false
+          item.nameShow = false
+        }
+        item.index = index + 1
+      })
+    },
+    itemShowFalse () {
+      this.tableData.forEach((item, index) => {
+        item.codeShow = false
+        item.nameShow = false
+      })
+    },
+    handleMinus (index, row) {
+    },
+    async handleSubmit () {
+    },
+    closeDialog () {
+      this.$emit('input', false)
+    },
+    // 增加下级
+    handleAddSubordinate (row) {
+      if (!row.children) {
+        row.children = []
+      }
+      row.children.push(
+        {
+          dcode: '',
+          dname: '',
+          typeid: row.typeid,
+          children: null
+        }
+      )
+      this.keyList = [];
+      this.keyList.push(row.dictid)
+    },
+    // 增加
+    handleAdd () {
+      this.$nextTick(() => {
+        let container = this.$el.querySelector('.el-table__body-wrapper');
+        container.scrollTop = container.scrollHeight;
+      })
+      this.tableData.push(
+        {
+          dcode: '',
+          dname: '',
+          children: null
+        }
+      )
+      this.addIndexes()
+    },
+    // 上移下移
+    moveUpward (index, row) {
+
+    },
+    moveDown (index, row) {
+
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+</style>
+

+import filter from '@/utils/filter.js'
+let vm = null
+
+const sendThis = (_this) => {
+  vm = _this
+}
+class data extends filter {
+  constructor() {
+    super()
+  }
+  columns () {
+    return [
+      {
+        label: '序号',
+        type: 'index',
+        width: '50',
+        render: (h, scope) => {
+          return (
+            <div>
+              {(vm.pageData.currentPage - 1) * vm.pageData.pageSize + scope.$index + 1}
+            </div>
+          )
+        }
+      },
+      {
+        prop: "zdlxbm",
+        label: "字典类型编码",
+      },
+      {
+        prop: "zdlxmc",
+        label: "字典类型名称",
+      },
+      {
+        prop: "sfyxxg",
+        label: "是否允许修改",
+        render: (h, scope) => {
+          return (
+            <div>
+              {scope.row.sfyxxg}
+            </div>
+          )
+        }
+      },
+      {
+        label: '操作',
+        width: '150',
+        align: 'center',
+        fixed: 'right',
+        render: (h, scope) => {
+          return (
+            <div>
+              <el-button type="text" icon="el-icon-edit-outline" onClick={() => { vm.editClick(scope) }}>修改</el-button>
+            </div>
+          )
+        }
+      }
+    ]
+  }
+
+}
+let datas = new data()
+export {
+  datas,
+  sendThis
+}

+<template>
+  <div class="from-clues">
+    <!-- 表单部分 -->
+    <div class="from-clues-header">
+      <el-form :model="ruleForm" ref="ruleForm">
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="字典类型编码">
+              <el-input v-model="ruleForm.zdlxbm" placeholder="字典类型编码"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="字典类型名称">
+              <el-input v-model="ruleForm.zdlxmc" placeholder="字典类型名称"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" class="btnCol">
+            <el-form-item>
+              <el-button type="primary" @click="fetchData()">查询</el-button>
+              <el-button @click="moreQueryClick()">高级查询</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <!-- 表格 -->
+    <div class="from-clues-content">
+      <lb-table :page-size="pageData.size" :current-page.sync="pageData.current" :total="tableData.total"
+        @size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns"
+        :data="tableData.data">
+      </lb-table>
+    </div>
+    <editDialog v-model="isDialog" />
+  </div>
+</template>
+<script>
+import table from "@/utils/mixin/table"
+import { datas, sendThis } from "./dictionaries"
+import editDialog from "./components/editDialog.vue"
+export default {
+  name: "djbcx",
+  components: {
+    editDialog
+  },
+  mixins: [table],
+  mounted () {
+    sendThis(this);
+  },
+  data () {
+    return {
+      isDialog: false,
+      ruleForm: {
+        zdlxbm: '',
+        zdlxmc: ''
+      },
+      tableData: {
+        total: 0,
+        columns: datas.columns(),
+        data: [
+          {
+            zdlxbm: "66666666666666",
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    // 初始化数据
+    fetchData () {
+    },
+    moreQueryClick () { },
+    editClick () {
+      this.isDialog = true
+    }
+  },
+};
+</script>
+<style scoped lang="scss">
+@import "~@/styles/public.scss";
+</style>