ylrz_his_scrm_adminUI/src/views/system/config/companyMenuConfig.vue

<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick" >
      <el-form ref="form14" :model="form14" :rules="rules14" label-width="180px">

        <el-form-item label="菜单权限">
          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
          <el-checkbox v-model="menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
          <el-tree
            class="tree-border"
            :data="menuOptions"
            show-checkbox
            ref="menu"
            node-key="id"
            :check-strictly="!menuCheckStrictly"
            empty-text="加载中，请稍后"
            :props="defaultProps"
          ></el-tree>
        </el-form-item>

        <div   class="footer">
          <el-button type="primary" @click="submitForm14">提  交</el-button>
        </div>
      </el-form>
    </el-tabs>
  </div>
</template>

<script>
import Editor from '@/components/Editor/wang';
import {   getConfigByKey,updateConfigByKey, clearCache } from "@/api/system/config";
import {   listCompany } from "@/api/company/company";
import Material from '@/components/Material'
import {treeselect as menuTreeselect} from "@/api/company/companyMenu";
export default {
  name: "Config",
  components: {
    Material,
    Editor
  },
  watch: {
    photoArr: function(val) {
      this.form1.certs = val.join(',')
    },
    images: function(val) {
      this.form7.images = val.join(',')
    }
  },
  data() {
    return {
      menuCheckStrictly: true,
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 菜单列表
      menuOptions: [],
      menuExpand: false,
      menuNodeAll: false,
      companyOptions:[],
      activeName:"companymenu.config",
      configId:null,
      configKey:null,
      form14:{},
      rules14:{}
    };
  },
  created() {
    this.getConfigByKey(this.activeName);
    this.getMenuTreeselect();
  },
  methods: {
    handleClick(tab, event){
      console.log(tab.name)
      this.getConfigByKey(tab.name);
    },
    /** 查询菜单树结构 */
    getMenuTreeselect() {
      menuTreeselect().then(response => {
        this.menuOptions = response.data;
      });
    },
    // 树权限（展开/折叠）
    handleCheckedTreeExpand(value, type) {
      if (type == 'menu') {
        let treeList = this.menuOptions;
        for (let i = 0; i < treeList.length; i++) {
          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
        }
      } else if (type == 'dept') {
        let treeList = this.deptOptions;
        for (let i = 0; i < treeList.length; i++) {
          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
        }
      }
    },
    // 树权限（全选/全不选）
    handleCheckedTreeNodeAll(value, type) {
      if (type == 'menu') {
        this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []);
      } else if (type == 'dept') {
        this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
      }
    },
    // 树权限（父子联动）
    handleCheckedTreeConnect(value, type) {
      if (type == 'menu') {
        this.menuCheckStrictly = value ? true: false;
      } else if (type == 'dept') {
        this.deptCheckStrictly = value ? true: false;
      }
    },
    getCompanyOptions() {
      listCompany().then(response=>{
        this.companyOptions = response.rows
      })
    },
    handleSuccess(response, file) {
      // 上传成功后的回调函数
      this.myloading.close();
      this.form7.videoUrl = response.url;
      this.$refs.upload.clearFiles();
    },

    getConfigByKey(key){
      getConfigByKey(key).then(response => {
        if(key == "companymenu.config"){
          this.getCompanyOptions();
          console.log(response.data.configId)
          this.configId=response.data.configId;
          this.configKey=response.data.configKey;
          if(response.data.configValue != null) {
            this.form14 = JSON.parse(response.data.configValue);
            // 回显选中的菜单
            this.$nextTick(() => {
              if (this.form14.menuIds && this.form14.menuIds.length > 0) {
                this.$refs.menu.setCheckedKeys(this.form14.menuIds);
              }
            });
          } else {
            this.form14 = { menuIds: [] };
          }
        }
      });
    },

    submitForm14(){
      this.form14.menuIds = this.getMenuAllCheckedKeys();
      var param={configId:this.configId,configKey:this.configKey,configValue:JSON.stringify(this.form14)}
      updateConfigByKey(param).then(response => {
        if (response.code === 200) {
          this.msgSuccess("修改成功");
        }
      });
    },
    // 所有菜单节点数据
    getMenuAllCheckedKeys() {
      // 目前被选中的菜单节点
      let checkedKeys = this.$refs.menu.getHalfCheckedKeys();
      // 半选中的菜单节点
      let halfCheckedKeys = this.$refs.menu.getCheckedKeys();
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
      return checkedKeys;
    },
    /** 清理缓存按钮操作 */
    handleClearCache() {
      clearCache().then(response => {
        if (response.code === 200) {
          this.msgSuccess("清理成功");
        }
      });
    },
  }
};
</script>
<style scoped>
.footer{
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
</style>