laws_weilai/jero-web/src/views/documentManage/subscribtion/module/subArea.vue

<template>
    <div class="sub-area">
      <a-modal
        :title="$t('SubscriptionManagement')"
        class="sub-area-modal"
        :visible="visible"
        :confirm-loading="confirmLoading"
        :okText="$t('preservation')"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <a-input-search v-model="searchValue" style="margin-bottom: 8px" :placeholder="$t('NodeQuickLookup')" @change="onChange" @search="onSearch" />
        <a-tree
          v-if="treeData && treeData.length"
          v-model="checkedKeys"
          checkable
          :expanded-keys="expandedKeys"
          :auto-expand-parent="autoExpandParent"
          :defaultExpandAll="true"
          :tree-data="treeData"
          :selected-keys="selectedKeys"
          @select="onSelect"
          @expand="onExpand"
        >
          <template slot="title" slot-scope="{ title }">
            <span v-if="title.indexOf(searchValue) > -1">
              {{ title.substr(0, title.indexOf(searchValue)) }}
              <span style="color: #f50">{{ searchValue }}</span>{{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
            </span>
            <span v-else>{{ title }}</span>
          </template>
        </a-tree>
      </a-modal>
    </div>
</template>

<script>
  import { getAction, postAction, deleteAction } from '@/api/manage'
  export default {
    name: 'subArea',
    data(){
      return{
        visible:false,
        confirmLoading:false,
        checkedKeys:[],
        selectedKeys: [],
        expandedKeys: [],
        autoExpandParent: true,
        treeData: [],
        dataList:[],
        searchValue:'',
        data:[]
      }
    },
    props:{
      subVisible:Boolean
    },
    watch: {
      checkedKeys(val) {
        console.log('onCheck', val);
      },
    },
    mounted() {
      this.getSubscribtion()
      this.loadData()
      this.visible=this.subVisible
      this.generateList(this.treeData)
    },
    methods:{
      //获取数据
      loadData(){
        let params = {
          title:this.searchValue
        }

        getAction(`sys/category/getSysCategoryTree`,params).then(res=> {
          if(res.success){
            this.data=[...res.result]
            this.treeData=[...this.addAttr(this.data)]
            // console.log('treeData',this.treeData)
          }
        })
      },
      onSearch(){
        // this.treeData=[]
        // this.treeData=this.getSearch(this.data)
      },
      //获取用户的订阅
      getSubscribtion(){
        postAction(`domain/domainUserRel/queryList`,{}).then(res=> {
          if(res.success){
            let ids=[]
            let data=res.result
            data.forEach(res=>{
              ids.push(res.domainId)
            })
            this.checkedKeys=[...ids]
            // this.selectedKeys=this.checkedKeys
            // console.log('checkKeys',this.checkedKeys)
          }
        })
      },
      addAttr(dataI){
        if((Array.isArray(dataI)) && dataI.length>0){
          dataI.forEach((item,index)=>{
            this.$set(item,'key',item.id)
            let arr = [];
            this.addAttr(item.children,arr);
          });
        }
        // console.log('dataI',dataI)
        return dataI
      },
      getSearch(dataI){
        let dataSearch=[]
        console.log('tree',this.treeData,this.data)
        if((Array.isArray(dataI)) && dataI.length>0){
          dataI.forEach((item,index)=>{
            this.$set(item,'key',item.id)
            if(item.title.indexOf(this.searchValue)>-1){
              dataSearch.push(item)
            }
            let arr = [];
            this.addAttr(item.children,arr);
          });
        }
        console.log('dataSearch',dataSearch)
        return dataSearch
      },
      afterVisibleChange(val) {
        // console.log('visible', val);
      },
      handleOk(e) {
        this.confirmLoading = true;

        let params={
          domainIdList:this.checkedKeys
        }
        postAction(`domain/domainUserRel/insert`,params).then(res=>{
          if(res.success){
            this.$emit('visible',false)
            this.$message.success(this.$t('OperationSuccessful'))
          }else{
            this.$message.warning(this.$t('operationFailed'))
          }
        })
      },
      handleCancel(e) {
        this.visible = false;
        this.$emit('visible',false)
      },
      generateList(data){
        for (let i = 0; i < data.length; i++) {
          const node = data[i];
          const key = node.key;
          this.dataList.push({ key, title: key });
          if (node.children) {
            this.generateList(node.children);
          }
        }
      },

      getParentKey(key, tree){
        let parentKey;
        for (let i = 0; i < tree.length; i++) {
          const node = tree[i];
          if (node.children) {
            if (node.children.some(item => item.key === key)) {
              parentKey = node.key;
            } else if (this.getParentKey(key, node.children)) {
              parentKey = this.getParentKey(key, node.children);
            }
          }
        }
        return parentKey;
      },
      onExpand(expandedKeys){
        this.expandedKeys = expandedKeys;
        this.autoExpandParent = false;
      },
      onChange(e) {
        // this.loadData()
        const value = e.target.value;
        const expandedKeys = this.dataList
          .map(item => {
            if (item.title.indexOf(value) > -1) {
              return this.getParentKey(item.key, this.treeData);
            }
            return null;
          })
          .filter((item, i, self) => item && self.indexOf(item) === i);

        Object.assign(this, {
          expandedKeys,
          searchValue: value,
          autoExpandParent: true,
        })
      },
      onCheck(checkedKeys) {
        // console.log('onCheck', checkedKeys);
        this.checkedKeys = checkedKeys;
      },
      onSelect(selectedKeys, info) {
        // console.log('onSelect', info);
        this.selectedKeys = selectedKeys;
      },

    }

  }
</script>

<style lang="less" scoped>
  .sub-area{

  }
</style>

<style lang="less">
  .sub-area-modal{
    .ant-modal-footer{
      text-align: center;
    }
  }
</style>