ojk_dtb_manage_ui/src/components/dataManage/CategoryMenu.vue

<template>
  <div id="CategoryMenu" v-loading="loading">
    <div style="margin: 0 auto;margin-bottom: 5px">
      <span>数据类别:</span>
      <span style="float: right;margin-right: 10px;cursor: pointer" title="添加类别" @click="handleAddShow">
        <el-icon>
          <ElIconPlus />
        </el-icon>
      </span>
    </div>
    <el-menu :default-active="firstOption" class="Category-menu" @select="currChange">
      <el-menu-item v-for="item in list" :key=item.id :index="item.id+''" >
        <el-icon>
          <IconPark-list-view/>
        </el-icon>
        <template #title>
          <el-tooltip effect="dark" :content="item.title" placement="right">
            <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.title }}</span>
          </el-tooltip>
        </template>
      </el-menu-item>
    </el-menu>
    <el-empty v-if="!list || list.length<1" :description="'无类别'" ></el-empty>
  </div>
  <el-dialog v-if="isAddShow"
             :model-value="isAddShow"
             title="添加类别"
             :width="600"
             :close-on-click-modal="false"
             :before-close="handleAddClose"
  >
    <el-form :model="formData" :rules="formDataRules" ref="formData" style="width: 80%;margin: 30px auto 0 auto;">
      <el-form-item label="类别名称：" prop="title">
        <el-input v-model="formData.title" placeholder="请输入类别名称"/>
      </el-form-item>
      <el-form-item label="类别描述：" prop="content">
        <el-input v-model="formData.content" placeholder="请输入类别描述"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="addMenu">保存</el-button>
    </template>
  </el-dialog>
</template>

<script>
import menuApi from "@/api/data/MenuData";

export default {
  data() {
    return {
      firstOption: '',
      list: [],
      loading: false,
      isAddShow: false,
      formData: {},
      formDataRules: {
        "title": [
          {required: true, message: '请输入标题', trigger: 'blur'},
          {required: true, message: '请输入标题', trigger: 'change'}
        ],
        "content": [
          {required: true, message: '请输入描述', trigger: 'blur'},
          {required: true, message: '请输入描述', trigger: 'change'}
        ]
      }
    }
  },
  props: {
    type: String,
    currVal: String,
  },
  watch: {
  },
  emits: ["update:currVal"],
  setup(props, context) {
    const methods = {
      currChange(index) {
        context.emit('update:currVal', index)
      },
    }
    return methods;
  },
  created() {
    this.getMenu();
  },
  mounted() {
  },
  methods: {
    handleAddShow() {
      this.isAddShow = true;
    },
    handleAddClose() {
      this.isAddShow = false;
    },
    addMenu() {
      let app = this;
      let params = {};
      Object.assign(params, this.formData);
      params['type'] = app.$constant.menuIds[app.type];
      params['parentId'] = app.$constant.menuIds[app.type];
      this.$refs.formData.validate(valid=>{
        if (valid) {
          menuApi.addMenuData(params).then(res=>{
            if (res.code===200) {
              app.$message({message: '添加成功', type: 'success'});
              app.getMenu();
              app.handleAddClose();
            }
          })
        }
      })
    },
    getMenu() {
      let app = this;
      app.loading = true;
      let params = {
        type: "1",
        parentId: this.$constant.menuIds[this.type],
      }
      app.list = [];
      app.firstOption = '';
      menuApi.getMenuData(params).then(res=>{
        if (res.code===200) {
          app.list = res.content;
          if (app.list.length>0) {
            app.firstOption = app.list[0].id+'';
            app.currChange(app.firstOption);
          }
        }
        app.loading = false
      }).catch(()=>{
        app.loading = false
      })
    }
  }
}
</script>

<style scoped>
#CategoryMenu {
  display: inline-block;
  width: 15%;
  height: 100%;
  margin-right: 1%;
}
#CategoryMenu .el-menu-item {
  border-radius: 15px;
  margin-right: 5%;
  font-weight: normal;
}
.Category-menu .el-menu-item {
  height: 40px;
}
.Category-menu .el-menu-item span {
  font-size: 16px !important;
}
</style>