iboss-op-mini-web/src/components/modal/dk-function/dk-function.vue

<!-- @desc:功能权限  @auth:周兴  @time:2022/12/28 14:47 -->
<template>
  <DkModal
    :loading="loading"
    width="1000px"
    v-model="visible"
    ref="modal_function"
    :title="title"
    @modalOk="modalOk"
    @modalCancel="modalCancel"
    @on-cancel="modalCancel"
    :saveFlag="true"
  >
    <DkTabs v-model="tabValue" :options="tabList"  >
      <div style="height: 600px;overflow:auto" v-for="(item, index) of appList" :key="index" :slot="item.appCode">
        <div class="main-class">
          <el-collapse v-model="model" @change="handleChange(null)">
            <dk-el-collapse-item v-for="(it,index) in parentData.filter(f => f.appCode == item.appCode)" :key="index" :title="it[name]" :name="it.id"
                                 :ref="'collapseItem_' + it.id" :id="it.id" :checked="it.checked" v-if="tabValue==item.appCode"
                                 @on-change="handleChangeCheckbox" :disabled="disabled">
              <div v-for="(tIt,tIndex) in data.filter(item=>item.parentId == it.id)" :key="tIndex">
                <!--子级-->
                <MasterSlaveCheckbox v-if="tIt[funcFlag]" :item="tIt" :name="name" :checked="tIt.checked" :disabled="disabled"
                                     :child-data="data.filter(item=>item.parentId == tIt.id)"></MasterSlaveCheckbox>
                <!--父级-->
                <div v-else>
                  <el-collapse v-model="model" @change="handleChange(tIt.id)">
                    <dk-el-collapse-item :ref="'collapseItem_' + tIt.id" class="child-item-collapse"
                                         :title="'\u3000\u3000' + tIt[name]"
                                         :name="tIt.id" :id="tIt.id" :checked="tIt.checked"
                                         @on-change="handleChangeCheckbox" :disabled="disabled">
                      <div v-for="(cIt,cIndex) in data.filter(item=>item.parentId == tIt.id)"
                           :key="cIndex">
                        <MasterSlaveCheckbox :item="cIt" :name="name" :disabled="disabled"
                                             :child-data="data.filter(item=>item.parentId == cIt.id)"></MasterSlaveCheckbox>
                      </div>
                    </dk-el-collapse-item>
                  </el-collapse>
                </div>
              </div>
            </dk-el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </DkTabs>
    <div class="choose-all-class">
      <Button type="primary" size="small" @click="selectAll" :disabled="disabled">{{ vm.$t('allChoose') }}</Button>
      <Button type="default" size="small" @click="unSelectAll" style="margin-left: 2px" :disabled="disabled">
        {{ vm.$t('allNoChoose') }}
      </Button>
      <Button type="default" size="small" @click="expandAll" style="margin-left: 2px">
        {{ vm.$t('expand') }}
      </Button>
      <Button type="default" size="small" @click="collapseAll" style="margin-left: 2px">
        {{ vm.$t('collapse') }}
      </Button>
    </div>
  </DkModal>
</template>

<script>
import MasterSlaveCheckbox from './master-slave-checkbox'
import DkElCollapseItem from './dk-el-collapse-item'
import {button as buttonList} from "@/locale/lang/zh-CN";

export default {
  name: 'dk-function',
  components: {MasterSlaveCheckbox, DkElCollapseItem},
  data() {
    const vm = window.vm;
    let self = this;
    return {
      self: self,
      documentKeyDownContent: Object,
      vm: vm,
      title: '',
      funcFlag: 'flgMenu',
      name: 'menuName',
      // funcFlag:'funcFlag',
      // name:'funcName',
      loading: false,
      visible: false,//显示控制,
      okFunc: () => {
      },//确定回调
      model: [],
      collapseFlag: true,
      parentData: [],
      webData: [],
      appData: [],
      data: [],
      collapseItems: [],
      collapseIds: [],
      disabled: false,
      tabValue: 'CP-WEB',
      tabOptions: null,
      appList: [],
      tabList: []
    }
  },
  watch: {
    visible(n, o) {
      if (!n) {
        //回复快捷键
        document.onkeydown = this.documentKeyDownContent;
      }
    },
  },
  methods: {
    /**
     * @desc   : 全选
     * @author : 周兴
     * @date   : 2022/12/29 12:51
     */
    selectAll() {
      this.data.filter(f => f.appCode == this.tabValue).updateAll('checked', true);
      this.$forceUpdate()
    },
    /**
     * @desc   : 全不选
     * @author : 周兴
     * @date   : 2022/12/29 12:51
     */
    unSelectAll() {
      this.data.filter(f => f.appCode == this.tabValue).updateAll('checked', false);
      this.$forceUpdate()
    },
    /**
     * @desc   : 展开所有节点
     * @author : 周兴
     * @date   : 2022/12/29 13:01
     */
    expandAll() {
      this.model = this.data.map(it => it.id)
      this.handleChange(null);
    },
    /**
     * @desc   : 收缩所有节点
     * @author : 周兴
     * @date   : 2022/12/29 13:01
     */
    collapseAll() {
      this.model = []
      this.handleChange(null);
    },
    /**
     * @desc   : 获取节点的ref
     * @author : 周兴
     * @date   : 2022/12/29 13:54
     */
    getCollapseItems() {
      let items = this.data.filter(it => !it[this.funcFlag]);
      if (items && items.length > 0) {
        items.forEach(it => {
          this.collapseItems.push('collapseItem_' + it.id)
          this.collapseIds.push(it.id)
        })
      }
    },
    /**
     * @desc   : 点击保存
     * @author : 周兴
     * @date   : 2022/12/29 11:38
     */
    modalOk() {
      let data = this.data.filter(it => it.checked);
      console.log('dds',data)
      this.okFunc(data,this)
      // this.visible = false;
    },
    /**
     * @desc   : 关闭
     * @author : 周兴
     * @date   : 2022/12/30 9:09
     */
    modalCancel() {
      this.unSelectAll();
      this.visible = false;
    },
    /**
     * @desc   : 重新计算位置
     * @author : 周兴
     * @date   : 2022/12/29 16:02
     */
    handleChange(id) {
      this.$nextTick(() => {
        if (this.collapseItems && this.collapseItems.length > 0) {
          let index = 0;
          if (id) {
            index = this.collapseItems.findIndex(item => item == 'collapseItem_' + id)
          }
          for (let i = index + 1; i < this.collapseItems.length; i++) {
            let it = this.collapseItems[i]
            if (this.$refs[it] && this.$refs[it].length > 0) {
              this.$refs[it][0].itemTop = null;
              setTimeout(() => {
                this.$refs[it][0].countCheckboxLocation();
              }, 400)
            }
          }
        }
      })
    },
    /**
     * @desc   : 勾选节点上的选择框
     * @author : 周兴
     * @date   : 2022/12/29 16:52
     */
    handleChangeCheckbox(checked, id) {
      let item = {id: id, checked: checked};
      let filterRows = this.data.filter(it => it.id === id);
      if (filterRows && filterRows.length > 0) {
        filterRows[0].checked = checked;
      }
      this.data.update(item, 'id', 'checked', 'parentId');
      this.$forceUpdate()
    },
    /**
     * @desc   : 监听全局键盘按钮按下的事件
     * @author : 周兴
     * @date   : 2022/3/4 16:57
     */
    addKeyBoardEvent() {
      let code = 0
      let self = this
      this.documentKeyDownContent = document.onkeydown;
      document.onkeydown = function (e) {
        const evn = e || event
        const key = evn.keyCode || evn.which || evn.charCode
        // alt：code = 18
        if (key === 18) {
          code = 18
        }

        // Q：code = 81 查询
        let btList = Object.values(self.$config.button);
        btList.forEach(forIt => {
          if (code === 18 && forIt.hotKey?.toLowerCase() === e.key.toLowerCase()) {
            e.returnValue = false
            if (self.$refs[forIt.name]) {
              self.$refs[forIt.name].$el.click()
            }
          }
        })
      }
      // 监听全局键盘按钮松开的事件
      document.onkeyup = function (e) {
        const evn = e || event
        const key = evn.keyCode || evn.which || evn.charCode
        if (key === 18) {
          code = 0
        }
        // 一秒钟失效，避免因为按了alt+tab之后再回来，按其他什么英文字母都不好使了的问题
        setTimeout(() => {
          code = 0
        }, 1000)
      }
    },
    /**
     * @desc   : 获取应用
     * @author : 洪旭东
     * @date   : 2023-06-30 15:02
     */
    getApplication() {
      this.excute(this.$service.commonService, this.$service.commonService.getApplication, {}).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          let data = res.data.filter(it=>it.appCode != 'DK-WEB')
          this.appList = data
          this.tabList = data.map(m => {return {
            label: m.appName,
            name: m.appCode
          }})
        }
      })
    },
  },
  mounted() {
    this.addKeyBoardEvent()   // 增加快捷键
    // 先过滤顶级
    this.parentData = this.data?.filter(it => !it.parentId);
    this.webData = this.parentData.filter(f => f.appCode == 'CP-WEB')
    this.appData = this.parentData.filter(f => f.appCode == 'CP-WXP')
    if (this.collapseFlag) {
      this.model = this.data.map(it => it.id)
    } else {
      this.model = []
    }
    this.$nextTick(() => {
      this.getCollapseItems();
    })
    this.getApplication()
  }

}
</script>

<style scoped>
.main-class {
  overflow: hidden;
  border-top: 1px solid #b6b6b6;
  border-left: 1px solid #b6b6b6;
  border-right: 1px solid #b6b6b6;
}

.choose-all-class {
  /*position: absolute;*/
  /*bottom: 66px;*/
  /*left: 8px;*/
  padding-top: 5px;
}

.item-check-box {
  position: absolute;
}

.ivu-collapse-content {
  padding: 0 !important;
}

/deep/ .el-collapse {
  border-radius: 10px;
}

/deep/ .el-collapse-item__header {
  height: 40px;
  background: #f5f7fa;
  padding-left: 10px;
  /*border-right: 1px solid #b6b6b6;*/
  border-top:1px solid #b6b6b6;
  border-bottom: 1px solid #b6b6b6;
}

/deep/ .el-collapse-item__content {
  padding-bottom: 0;
}

/deep/ .el-collapse {
  border-radius: 0;
  border: none;
}

/deep/ .el-collapse-item__wrap {
  border-bottom: 0;
}


.child-item-collapse > /deep/ .el-collapse-item__wrap .el-collapse-item__content {
  border-bottom: 1px solid #b6b6b6;
}


</style>