更新

src/store/codeCategory.js

@@ -0,0 +1,38 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  interface: `/api/setting/codecategory`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit = 10, ...info } = {}) {
+    const res = await this.$axios.$get(api.interface, { skip, limit, ...info });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.interface}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.interface}/${payload}`);
+    return res;
+  },
+  async update({ commit }, { id, ...info } = {}) {
+    const res = await this.$axios.$post(`${api.interface}/${id}`, { ...info });
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.interface}/${payload}`);
+    return res;
+  },
+};
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/store/codeitem.js

@@ -0,0 +1,38 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  interface: `/api/setting/codeitem`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit = 10, ...info } = {}) {
+    const res = await this.$axios.$get(api.interface, { skip, limit, ...info });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.interface}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.interface}/${payload}`);
+    return res;
+  },
+  async update({ commit }, { id, ...info } = {}) {
+    const res = await this.$axios.$post(`${api.interface}/${id}`, { ...info });
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.interface}/${payload}`);
+    return res;
+  },
+};
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/store/index.js

@@ -36,6 +36,8 @@ import dockLogin from './user/dockLogin';
 import * as ustate from './user/state';
 import * as umutations from './user/mutations';
 import place from './place';
+import codeitem from './codeitem';
+import codeCategory from './codeCategory';
 
 import role from './user/role';
 
@@ -79,5 +81,7 @@ export default new Vuex.Store({
     role,
     liveTechnicalColumn, //技术交流类别
     liveTechnicalNews, //技术交流内容
+    codeitem, //字典表
+    codeCategory, //字典表类别
   },
 });

src/views/superAdminCenter/dictionary/index.vue

@@ -1,23 +1,33 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24" style="text-align:center;font-size:20px;">
-        <el-image :src="timg"></el-image>
-        <p>功能待开发</p>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="main">
+          <el-col :span="7" class="column">
+            <column @setCategory="data => (category = data)" @setList="data => (categoryList = data)"></column>
+          </el-col>
+          <el-col :span="17" class="message">
+            <item-list :category="category" :categoryList="categoryList"></item-list>
+          </el-col>
+        </el-col>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+import column from './parts/column.vue';
+import itemList from './parts/itemList.vue';
+import dataTable from '@/components/data-table.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'index',
   props: {},
-  components: {},
-  data: function() {
+  components: { column, itemList },
+  data: () => {
     return {
-      timg: require('@/assets/timg.gif'),
+      category: undefined,
+      categoryList: [],
     };
   },
   created() {},
@@ -34,4 +44,21 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  padding: 20px;
+  margin: 10px 20px;
+  border: 1px solid #ccc;
+  width: 96%;
+}
+.column {
+  width: 27%;
+  min-height: 690px;
+  border: 1px solid #ccc;
+  margin: 0 20px 0 0;
+}
+.message {
+  border: 1px solid #ccc;
+  min-height: 690px;
+}
+</style>

src/views/superAdminCenter/dictionary/parts/column.vue

@@ -0,0 +1,124 @@
+<template>
+  <div id="column">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          <el-col :span="12" class="topTitle">
+            <span>字典类别</span>
+          </el-col>
+          <el-col :span="12" class="topAdd">
+            <el-button type="primary" size="mini" @click="toAdd()"><i class="el-icon-plus"></i></el-button>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="list">
+          <data-table :fields="fields" @delete="toDelete" :data="list" :opera="opera" @edit="toEdit" @rowClick="rowClick" :usePage="false"></data-table>
+        </el-col>
+      </el-col>
+      <el-drawer title="字典类别" :visible.sync="drawer" direction="rtl" @closed="handleClose" :destroy-on-close="true">
+        <data-form :fields="fields" :data="form" :rules="{}" @save="drawerSave" :isNew="drawerIsNew"></data-form>
+      </el-drawer>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import dataForm from '@/components/form.vue';
+import dataTable from '@/components/data-table.vue';
+import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: codeCategory } = createNamespacedHelpers('codeCategory');
+export default {
+  name: 'column',
+  props: {
+    columnInfo: null,
+  },
+  components: { dataTable, dataForm },
+  data: () => ({
+    drawer: false,
+    form: {},
+    drawerIsNew: true,
+    opera: [
+      {
+        label: '编辑',
+        icon: 'el-icon-edit',
+        method: 'edit',
+      },
+      {
+        label: '删除',
+        icon: 'el-icon-delete',
+        method: 'delete',
+        confirm: true,
+      },
+    ],
+    fields: [
+      { label: '名称', prop: 'name', model: 'name' },
+      { label: '代码', prop: 'code', model: 'code' },
+    ],
+    list: [],
+    total: 0,
+  }),
+  created() {
+    this.search();
+  },
+  computed: {},
+  methods: {
+    ...codeCategory(['query', 'create', 'update', 'delete']),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      const res = await this.query({ ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
+        this.$emit('setList', res.data);
+      }
+    },
+    toAdd() {
+      this.drawer = true;
+    },
+    toEdit({ data }) {
+      this.$set(this, 'form', data);
+      this.drawer = true;
+      this.drawerIsNew = false;
+    },
+    async drawerSave({ data, isNew }) {
+      let res;
+      let msg;
+      if (isNew) {
+        res = await this.create(data);
+        msg = '字典类别创建成功';
+      } else {
+        res = await this.update(data);
+        msg = '字典类别修改成功';
+      }
+      if (this.$checkRes(res, msg, res.errmsg)) {
+        this.handleClose();
+        this.search();
+      }
+    },
+    async toDelete({ data }) {
+      const res = await this.delete(data.id);
+      if (this.$checkRes(res, '删除成功', res.errmsg || '删除失败')) this.search();
+    },
+    handleClose() {
+      this.drawer = false;
+      this.form = {};
+      this.drawerIsNew = true;
+    },
+    rowClick(row) {
+      this.$emit('setCategory', row.code);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+  padding: 15px 0;
+  border-bottom: 1px solid #cccc;
+}
+.top .topTitle {
+  padding: 0 10px;
+}
+.top .topAdd {
+  padding: 0 10px 0 0;
+  text-align: right;
+}
+</style>

src/views/superAdminCenter/dictionary/parts/itemList.vue

@@ -0,0 +1,169 @@
+<template>
+  <div id="itemList">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          <el-col :span="12" class="topTitle">
+            <span>{{ pageTitle }}</span>
+          </el-col>
+          <el-col :span="12" class="topAdd">
+            <el-button type="primary" size="mini" @click="toAdd()"><i class="el-icon-plus"></i></el-button>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="list">
+          <data-table
+            :fields="fields"
+            @delete="toDelete"
+            :data="list"
+            :total="total"
+            :limit="limit"
+            :opera="opera"
+            @query="search"
+            @edit="toEdit"
+            :usePage="true"
+          ></data-table>
+        </el-col>
+      </el-col>
+      <el-drawer title="字典项" :visible.sync="drawer" direction="rtl" @closed="handleClose" :destroy-on-close="true">
+        <data-form :fields="fields" :data="form" :rules="{}" @save="drawerSave" :isNew="drawerIsNew">
+          <template #options="{item}">
+            <template v-if="item.model === 'category'">
+              <el-option v-for="(i, index) in categoryList" :key="index" :label="i.name" :value="i.code"></el-option>
+            </template>
+          </template>
+        </data-form>
+      </el-drawer>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import dataForm from '@/components/form.vue';
+import dataTable from '@/components/data-table.vue';
+import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: codeitem } = createNamespacedHelpers('codeitem');
+const { mapActions: codeCategory } = createNamespacedHelpers('codeCategory');
+export default {
+  name: 'itemList',
+  props: {
+    category: String,
+    categoryList: Array,
+  },
+  components: { dataTable, dataForm },
+  data: () => {
+    return {
+      limit: 10,
+      pageTitle: '字典项',
+      drawer: false,
+      form: {},
+      drawerIsNew: true,
+      opera: [
+        {
+          label: '编辑',
+          icon: 'el-icon-edit',
+          method: 'edit',
+        },
+        {
+          label: '删除',
+          icon: 'el-icon-delete',
+          method: 'delete',
+          confirm: true,
+        },
+      ],
+      fields: [
+        { label: '名称', prop: 'name', model: 'name' },
+        { label: '代码', prop: 'code', model: 'code' },
+        { label: '类别代码', prop: 'category', model: 'category', type: 'select' },
+      ],
+      list: [],
+      total: 0,
+    };
+  },
+  created() {},
+  methods: {
+    ...codeitem(['query', 'create', 'update', 'delete']),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      const res = await this.query({ skip, limit, ...info, category: this.category });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+    toAdd() {
+      this.drawer = true;
+    },
+    toEdit({ data }) {
+      this.$set(this, 'form', data);
+      this.drawer = true;
+      this.drawerIsNew = false;
+    },
+    async drawerSave({ data, isNew }) {
+      let res;
+      let msg;
+      if (isNew) {
+        res = await this.create(data);
+        msg = '字典项创建成功';
+      } else {
+        res = await this.update(data);
+        msg = '字典项修改成功';
+      }
+      if (this.$checkRes(res, msg, res.errmsg)) {
+        this.handleClose();
+        this.search();
+      }
+    },
+    async toDelete({ data }) {
+      const res = await this.delete(data.id);
+      if (this.$checkRes(res, '删除成功', res.errmsg || '删除失败')) this.search();
+    },
+    handleClose() {
+      this.drawer = false;
+      this.form = {};
+      if (this.category) this.form.category = this.category;
+      this.drawerIsNew = true;
+    },
+    async getOtherList() {
+      let res = await this.getCategoryList();
+      if (this.$checkRes(res)) this.$set(this, `categoryList`, res.data);
+    },
+  },
+  watch: {
+    category: {
+      handler(val) {
+        if (val) {
+          this.search();
+          this.$set(this.form, `category`, val);
+          let res = this.categoryList.find(f => f.code == val);
+          console.log(res);
+          if (res) this.$set(this, `pageTitle`, res.name);
+        }
+      },
+      immediate: true,
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+  padding: 15px 0;
+  border-bottom: 1px solid #cccc;
+}
+.top .topTitle {
+  padding: 0 10px;
+}
+.top .topAdd {
+  padding: 0 10px 0 0;
+  text-align: right;
+}
+.page {
+  padding: 20px 0;
+  text-align: center;
+}
+</style>