skl-admin/admin-menu/src/views/home.vue

<template>
  <div class="menushome">
    <el-card class="box-card-left">
      <div slot="header">
        <span>菜单列表</span>
      </div>
      <deepTree @nodeClick="treeClick" class="deepTree" :data="treeList"></deepTree>
    </el-card>
    <el-card class="box-card box-card-right">
      <div slot="header" class="clearfix">
        <span>菜单管理</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="addmenus" icon="el-icon-plus">添加菜单</el-button>
      </div>
      <div class="main">
        <filterList ref="filterList" :tableData="menusList" :filed="filed" @edit="filtereEdit" @delete="filterDelete" @query="filterQuery" :total="Total"></filterList>
      </div>
    </el-card>
    <dialogAndDrawer :width="'35%'" :title="title" :visibleSync="visibleSync" v-if="visibleSync" @close="visibleSync = false">
      <template v-slot:windowMain>
        <formData ref="formData" :filed="formfiled" :data="formdata" :rules="formrules" @save="formSave">
          <template v-slot:formItem="{ item, formdata }">
            <el-select v-model="formdata[item.name]" placeholder="请选择上级菜单" v-if="item.name == 'parentCode'">
              <el-option label="无" value="null"></el-option>
              <el-option v-for="item in menusall" :key="item.code" :label="item.name" :value="item.code"></el-option>
            </el-select>
            <!-- 显示开关 -->
            <el-switch v-if="item.name == 'isshow'" v-model="formdata[item.name]" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </template>
          <template v-slot:ext="{ formdata }">
            <!-- 地址 -->
            <el-form-item prop="url" v-if="formdata && formdata.type == '0'" label="地址">
              <el-input v-model="formdata['url']" placeholder="请输入地址"></el-input>
            </el-form-item>
          </template>
        </formData>
      </template>
    </dialogAndDrawer>
  </div>
</template>
<script>
import filterList from '@components/filterList/index.vue';
import dialogAndDrawer from '@components/dialogAndDrawer.vue';
import formData from '@components/formData/index.vue';
import deepTree from '@components/deepTree.vue';
import { mapState, mapActions } from 'vuex';
export default {
  components: {
    filterList,
    dialogAndDrawer,
    formData,
    deepTree
  },
  data() {
    return {
      types: null,
      title: '',
      visibleSync: false,
      filed: [
        { name: 'name', label: '名称', filter: true },
        { name: 'code', label: '编码', filter: true }
      ],
      formdata: {},
      formfiled: [
        { name: 'name', label: '名称' },
        { name: 'code', label: '编码' },
        { name: 'parentCode', label: '上级菜单', formater: 'slot' },
        { name: 'isshow', label: '是否显示', formater: 'slot' },
        { name: 'date', label: '时间', formater: 'date:datetime' },
        { name: 'type', label: '类型', formater: 'dict:imgNewsType' }
      ],
      formrules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入编码', trigger: 'blur' }
        ],
        date: [
          { required: true, message: '请输入时间', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请输入类型', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入类型', trigger: 'blur' }
        ],
        parentCode: [
          { required: true, message: '请选择类型', trigger: 'chage' }
        ]
      }
    };
  },
  computed: {
    ...mapState(['menusList', 'Total', 'typeList', 'columnList', 'pagesList', 'menusall']),
    treeList() {
      return this.$tree(this.menusall);
    }
  },
  async mounted() {
    await this.filterQuery();
    await this.codeQuery();
    await this.pagesQuery();
    await this.menusQueryAll();
  },
  methods: {
    ...mapActions(['menusQuery', 'menusCreate', 'menusUpdate', 'menusDelete', 'menusQuery', 'codeQuery', 'pagesQuery', 'menusQueryAll']),
    // 添加
    addmenus () {
      this.formdata = { isshow: true };
      this.title = '添加菜单';
      this.visibleSync = true;
      if (this.types !== null) this.$set(this.formdata, 'parentCode', this.types);
    },
    // 修改
    async filtereEdit (e) {
      this.formdata = e;
      this.title = '修改菜单';
      this.visibleSync = true;
    },
    // 删除
    async filterDelete (e) {
      const res = await this.menusDelete({ id: e?._id });
      this.$resChange(res, '删除成功');
      this.filterQuery();
    },
    // 查询
    async filterQuery ({ filter = {}, paging = { page: 0, size: 10 } } = {}) {
      if (this.types) filter.parentCode = this.types;
      await this.menusQuery({ filter, paging });
    },
    // 表单保存
    async formSave (e) {
      if (e.isRevise && e?.isRevise == false) {
        this.$message.warning('未作修改');
        return;
      }
      this.$delete(e, 'isRevise');
      let res, msg;
      // 修改
      if (e._id) {
        res = await this.menusUpdate(e);
        msg = '菜单修改成功';
      } else {
        res = await this.menusCreate(e);
        msg = '菜单添加成功';
      }
      const filter = { parentCode: this.types };
      await this.filterQuery({ filter });
      await this.menusQueryAll();
      this.$resChange(res, msg);
      this.visibleSync = false;
      this.$refs.filterList.resetPage(-1);
    },
    async treeClick({ data, node }) {
      this.types = data.code;
      const filter = { parentCode: data.code };
      await this.filterQuery({ filter });
      this.$refs.filterList.resetPage(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
.menushome {
  width: 100%;
  height: 100%;
  display: flex;
  .box-card {
    width: 80%;
    height: 100%;
    .el-card__body {
      height: 100%;
    }
  }
  .box-card-left {
    width: 20%;
    height: 100%;
    ::v-deep .el-card__body {
      height: 88%;
      .deepTree {
        width: 100%;
        height: 100%;
        overflow-y: auto;
      }
      .deepTree::-webkit-scrollbar {/*滚动条整体样式*/
        width: 0px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 0px;
      }
    }
  }
}
</style>