toAllocate.vue

<template>
  <div>
    <el-dialog
      :title="$t('button.permiss')"
      :visible.sync="isShow"
      v-loading.body="loading"
      :close-on-click-modal="false"
      class="manage-dialog menu-dialog"
      :before-close="closeDialog"
      @close="resetData"
    >
      <div class="page-wrapper">
        <span class="menu-title">{{$t('dialog.menuList')}}</span>
        <el-scrollbar
          wrap-class="list-scrollbar"
          :native="false"
          style="height:500px;max-height: 320px;"
        >
          <el-tree
            :data="treeData"
            show-checkbox
            node-key="id"
            ref="tree"
            highlight-current
            default-expand-all
            class="menu-tree"
          ></el-tree>
        </el-scrollbar>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="submitAllocate"
          class="dialog-btn dialog-confirm-btn"
        >{{$t('dialog.confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import defaultImg from "@/assets/img/behavior/default.png";
export default {
  data() {
    return {
      isShow: false,
      loading: true,
      mallVal: "",
      mallOpt: [],
      monitoryVal: "",
      monitoryOpt: [],
      cameraVal: "",
      cameraOpt: [],
      timeVal: [],
      total: 0,
      pageSize: 50,
      currentPage: 1,
      imgList: [],
      defaultImg: defaultImg,
      staffId: "",
      roleunid: "",
      appunid: "",
      checkedNum: 0,
      hasAddImg: [],
      noImgText: "",
      curMallId: null,
      treeData: [],
      checkedNode: []
    };
  },
  created() {},
  mounted() {},
  methods: {
    getNode() {
      this.$api.management
        .menuAppList()
        .then(res => {
          var result = res.data.list_data;
          result.forEach((item, index) => {
            if (item.name == this.$Project) {
              this.appunid = item.unid;
            }
          });
          this.getMeun(this.appunid);
          this.getRloeMenu(this.appunid);
        })
        .catch(err => {});
    },
    getMeun(unid) {
      this.treeData = [];
      this.treeData.push(JSON.parse(window.localStorage.getItem("menu")));
      // this.$api.management.menuChildNode(unid)
      // .then(res => {
      //     var menuArray = [];
      //     if(res.data.menu_tree.length >= 2){
      //         menuArray.push(res.data.menu_tree[1])
      //     }else{
      //         menuArray.push(res.data.menu_tree[0])
      //     }
      //    var rootArr= [],arr = [];
      //    menuArray.forEach((menu,index) => {
      //         this.rootTemp = {};
      //         var rootTemp = {};
      //         rootTemp.unid = menu.unid
      //         rootTemp.id = menu.perm_unid
      //         this.rootTemp.unid = menu.unid
      //         this.rootTemp.id = menu.perm_unid
      //         if(this.$Project == 'mall'){
      //             rootTemp.label = '智慧商业客流分析平台'
      //         }else{
      //             rootTemp.label = '智慧连锁客流分析平台'
      //         }
      //         rootArr.push(rootTemp)
      //         menu.children.forEach((parent,index) => {
      //             // console.log('parent',parent)
      //             var children = [],temp={};
      //             temp.unid = parent.unid;
      //             temp.id = parent.perm_unid;
      //             temp.label = parent.note;
      //             temp.parentId = menu.unid
      //             temp.parentPermId = menu.perm_unid
      //             arr.push(temp)
      //             if(parent.children && parent.children.length > 0) {
      //                 parent.children.forEach((child,index) => {
      //                     var childTemp = {};
      //                     if(parent.unid == child.parent){
      //                         childTemp.unid = child.unid;
      //                         childTemp.id = child.perm_unid;
      //                         childTemp.label = child.note;
      //                         childTemp.parentId = parent.unid;
      //                         childTemp.parentPermId = parent.perm_unid
      //                     }
      //                     children.push(childTemp)
      //                 })
      //                 arr[index]['children'] = children
      //             }
      //         })
      //         rootArr[index]['children'] = arr
      //     })
      //     this.treeData = rootArr
      // })
      // .catch(err => {

      // })
    },
    getRloeMenu(appunid) {
      this.$api.management
        .menuChildNode(appunid, {
          role: this.roleunid
        })
        .then(res => {
          var result = res.data.menu_tree[0],
            hasMenu = [];
          this.dealHasMenu(result, hasMenu);
        })
        .catch(err => {});
    },
    dealHasMenu(menu, hasMenu) {
      menu.children.forEach(item => {
        if (!item.children) {
          hasMenu.push(item.perm_unid);
        } else if (item.children && item.children.length > 0) {
          this.dealHasMenu(item, hasMenu);
        }
      });
      this.$refs.tree.setCheckedKeys(hasMenu);
    },
    dialogInit(role_unid, mark) {
      this.isShow = true;
      this.roleunid = role_unid;
      this.getNode();
    },
    submitAllocate() {
      var list_data = [];
      var menuTree = this.$refs.tree.getCheckedNodes();
      var halfMenu = this.$refs.tree.getHalfCheckedNodes();
      if (halfMenu) {
        halfMenu.forEach(item => {
          this.checkedNode.push({
            unid: item.unid,
            perm_unid: item.id
          });
        });
      }
      menuTree.forEach(item => {
        this.checkedNode.push({
          unid: item.unid,
          perm_unid: item.id
        });
      });
      // menuTree.forEach((item,index) => {
      //     if(item.unid != this.rootTemp.unid){
      //         this.checkedNode.push({
      //             'unid': item.unid,
      //             'perm_unid': item.id
      //         })
      //     }
      //     if(item.parentId && !this.checkedNode.some(items => item.parentId == items.unid)) {
      //         this.checkedNode.push({
      //             'unid': item.parentId,
      //             'perm_unid': item.parentPermId
      //         })
      //     }
      // })
      this.$api.management
        .editMenu(this.roleunid, this.appunid, {
          list_size: this.checkedNode.length,
          list_data: this.checkedNode
        })
        .then(res => {
          this.checkedNode = [];
          if (res.data.ecode == 200) {
            this.$message({
              showClose: true,
              message: this.$t("message.allocate"),
              type: "success"
            });
          }
        })
        .catch(err => {
          this.checkedNode = [];
          this.$message({
            showClose: true,
            message: this.$t("message.allocateFailed"),
            type: "error"
          });
        });
      this.isShow = false;
    },
    closeDialog() {
      this.checkedNode = [];
      this.isShow = false;
    },
    resetData() {
      this.$refs.tree.setCheckedKeys([]);
    }
  }
};
</script>

<style scoped>
.menu-title {
  font-size: 16px;
}
.img-dialog-header {
  padding-bottom: 20px;
}
.page-wrapper {
  /* text-align: center; */
  padding-bottom: 10px;
}

.img-row {
}

.img-row:after,
.img-row:before {
  content: "";
  display: table;
}

.img-row:after {
  clear: both;
}

.img-col {
  float: left;
  text-align: center;
  width: 20%;
  margin-bottom: 20px;
}

.img-col:last-child {
  margin-bottom: 0;
}

.clerk-img-box {
  border: 1px solid #dcdcdc;
  margin: 0px auto;
}

.clerk-img-box,
.clerk-img {
  width: 150px;
  height: 150px;
}

.custom-checkbox__input.checked::after {
  content: none;
}

.custom-checkbox__input.checked .custom-checkbox__inner {
  background-color: #409eff;
  border-color: #409eff;
}

.custom-checkbox__input.checked .custom-checkbox__inner:after {
  transform: rotate(45deg) scaleY(1);
}
</style>