magazine-admin/admin-code/src/views/Home.vue

<template>
  <div class="code-home">
    <el-card class="box-card-left">
      <div slot="header">
        <span>字典类别</span>
        <el-tooltip effect="dark" content="添加类型" placement="top-start">
          <el-button style="float: right; padding: 3px 0" icon="el-icon-plus" type="text" @click="treeTypeAdd"></el-button>
        </el-tooltip>
      </div>
      <deepTree :operation="true" @edit="treeEdit" @remove="treeRemove" @nodeClick="treeClick" class="deepTree" :data="treeList"></deepTree>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>数据字典</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="filterAdd">添加字典</el-button>
      </div>
      <filterList ref="filterList" :tableData="tableData" :filed="filed" @edit="filtereEdit" @delete="filterDelete" @query="filterQuery" :total="codeTotal"></filterList>
    </el-card>
    <dialogAndDrawer :title="title" :visibleSync="visibleSync" v-if="visibleSync" @close="visibleSync = false">
      <template v-slot:windowMain>
        <formData :filed="formfiled" :data="formdata" :rules="formrules" @save="formSave"></formData>
      </template>
    </dialogAndDrawer>
  </div>
</template>

<script>
import filterList from '@components/filterList/index.vue';
import deepTree from '@components/deepTree.vue';
import dialogAndDrawer from '@components/dialogAndDrawer.vue';
import formData from '@components/formData/index.vue';
import { mapState, mapActions } from 'vuex';
export default {
  name: 'Home',
  components: {
    filterList,
    deepTree,
    dialogAndDrawer,
    formData
  },
  computed: {
    ...mapState({ tableData: 'codeList', treeList: 'typeList', codeTotal: 'codeTotal', typeTotal: 'typeTotal' })
  },
  data() {
    return {
      type: null,
      title: '',
      visibleSync: false,
      formdata: {},
      formrules: {},
      formfiled: [
        { label: '名称', name: 'name' },
        { label: '编码', name: 'code' }
      ],
      filed: [
        { label: '类型', name: 'parentCode' },
        { label: '名称', name: 'name', filter: true },
        { label: '编码', name: 'code', filter: true }
      ]
    };
  },
  mounted() {
    this.treeQuery();
  },
  methods: {
    ...mapActions(['typeQuery', 'typeCreate', 'typeUpdate', 'typeDelete', 'codeQuery', 'codeCreate', 'codeUpdate', 'codeDelete']),
    // filter
    // 添加
    filterAdd() {
      if (this.type == null) {
        this.$message.warning('请先选择类别');
        return;
      }
      this.formdata = {};
      this.title = '添加字典';
      this.visibleSync = true;
    },
    // 修改
    filtereEdit(e) {
      this.formdata = e;
      this.title = '修改字典';
      this.visibleSync = true;
    },
    // 删除
    async filterDelete(e) {
      const res = await this.codeDelete({ id: e?._id });
      this.$resChange(res, '删除成功');
      this.filterQuery();
    },
    // 查询
    async filterQuery({ filter = {}, paging = { page: 0, size: 10 } } = {}) {
      if (this.type == null) {
        this.$message.error('请先选择类别');
        return;
      }
      filter.parentCode = this.type;
      await this.codeQuery({ filter, paging });
    },
    // tree
    // 查询
    async treeQuery(e) {
      await this.typeQuery({ filter: {} });
    },
    // 添加
    treeTypeAdd() {
      this.type = null;
      this.formdata = {};
      this.title = '添加类别';
      this.visibleSync = true;
    },
    // 修改
    treeEdit(e) {
      this.type = null;
      this.formdata = e;
      this.title = '修改类别';
      this.visibleSync = true;
    },
    // 删除
    async treeRemove(e) {
      this.type = null;
      const res = await this.typeDelete({ id: e?._id });
      this.$resChange(res, '删除成功');
      this.treeQuery();
    },
    // 选择
    treeClick(e) {
      this.type = e.data.code;
      this.filterQuery();
    },
    // 表单保存
    async formSave(e) {
      if (e.isRevise && e?.isRevise == false) {
        this.$message.warning('未作修改');
        return;
      }
      this.$delete(e, 'isRevise');
      let res, msg;
      if (this.type !== null) {
        // 字典
        this.$set(e, 'parentCode', this.type);
        if (e._id) {
          // 字典修改
          res = await this.codeUpdate(e);
          msg = '字典修改成功';
        } else {
          // 字典添加
          res = await this.codeCreate(e);
          msg = '字典添加成功';
        }
      } else {
        // 字典类别
        if (e._id) {
          // 类别修改
          res = await this.typeUpdate(e);
          msg = '类别修改成功';
        } else {
          // 类别添加
          res = await this.typeCreate(e);
          msg = '类别添加成功';
        }
      }
      this.$resChange(res, msg);
      this.treeQuery();
      this.filterQuery();
      this.visibleSync = false;
    }
  }
};
</script>
<style lang="scss">
.code-home {
  width: 100%;
  height: 100%;
  display: flex;
  .box-card {
    width: 84%;
    height: 100%;
  }
  .box-card-left {
    width: 15%;
    height: 100%;
    .el-card__body {
      height: 88%;
      .deepTree {
        width: 100%;
        height: 100%;
        overflow-y: auto;
      }
    }
  }
}

</style>