saber/src/views/manager/projectinfo/qutediaolog/qute1.vue

<template>
<el-dialog
    title="引用元素表"
    :visible.sync="dialogVisible"
    width="70%"
    append-to-body
    destroy-on-close
    custom-class="flow-design-dialog"
    
    >
      
      <div  class="flexStar" > 
        <div class="boxswai" style="width:30%;padding-left:0px;height:547px">
           <div class="boxnei" style="display: flex;flex-direction: column;">
             <div style="overflow: auto;flex:1">
                <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"   style="display: inline-block;min-width: 100%;"></avue-tree>
             </div>
           </div>
        </div>
         <div class="boxswai" style="width:70%;padding-left:0px;padding-right:0px;height:547px">
            <div class="boxnei"  style="flex:1;">
             
                <avue-crud
                  :data="loadData"
                  :option="loadOption"
                  v-model="obj"
                  :page.sync="page"
                  @on-load="quteonLoad"
                  @selection-change="selectionChange"
                  ref="crud">
                    <template slot="menuLeft" slot-scope="{size}">
                          <el-input placeholder="请输入你想搜索的表单名称" v-model="input3" :size="size"  clearable>
                              <i  class="el-icon-search" slot="append" @click="searchChange"></i>
                          </el-input>
                    </template>
                  </avue-crud>
              </div>
            </div>
     </div>
    
      
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitQute">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import {tabTypeLazyTreeAll,projecttabInfo} from "@/api/manager/wbsprivate";
export default {
    data() {
      return {
        input3:'',
        dialogVisible:false,
        obj: {},
        treeData:[],
       
        treeOption:{
          filter:false,
          addBtn:false,
          indexFixed:false,
          selectionFixed:false,
          expandFixed:false,
          props:{
            labelText:'标题',
            label:'title',
            value:'id',
            children:'children'
          },
          lazy: true,
          treeLoad: function (node, resolve) {
          const parentId = (node.level === 0) ? 12345678910 : node.data.id;
          tabTypeLazyTreeAll({parentId,current:1,size:1000}).then(res => {
              resolve(res.data.data.records.map(item => {
                  return {
                    ...item,
                    leaf: !item.hasChildren
                  }
                }))
                
              }); 
          },
        },
      selectionList:[],
      loadData:[],
      loadOption: {
          height: 'auto',
          calcHeight: 30,
          tip: false,
          searchShow:false,
         
          border: true,
          index: true,
          viewBtn: false,
          selection: true,
          editBtn:false,
          delBtn:false,
          addBtn:false,
          menu:false,
        
          dialogClickModal: false,
         column: [
          {
            label: "元素表名称",
            prop: "title",
            editDisplay: false,
            addDisplay: false,
          },
          {
            label: "元素表类型",
            prop: "tabType",
            // search: true,
            rules: [
              {
                required: true,
                message: "请输入名称",
                trigger: "blur",
              },
            ],
          },

          {
            label: "元素总量",
            prop: "elementTotal",

            editDisplay: false,
            addDisplay: false,
            rules: [
              {
                message: "请输入表数量",
                trigger: "blur",
              },
            ],
          },
          {
            label: "所书方",
            prop: "tabOwner",

            editDisplay: false,
            addDisplay: false,
            rules: [
              {
                message: "请输入表数量",
                trigger: "blur",
              },
            ],
          },
          {
            label: "填报率",
            prop: "fillRate",

            editDisplay: false,
            addDisplay: false,
            rules: [
              {
                message: "请输入表数量",
                trigger: "blur",
              },
            ],
          },
        ],
       
        },
        page:{
          current:1,
          size:10,
          total:10
        },
        treeId:''
        
     }
    },
    props:{
      projectid:String,
      onLoad1:Function,
      refreshTree:Function
    },
    computed:{
     ids () {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
    created(){
      //  this.loadData=this.loadData1;
      
    },


    methods: {
    quteonLoad(page){
      console.log(page,'page');
      if(this.treeId){
         this.tabTypeLazyTreeAll(this.treeId, page.currentPage,page.pageSize).then((res)=>{
          this.loadData=res.records
           this.page.total=res.total
        })
      }
    },
    selectionChange (list) {
      this.selectionList = list;
      },
    selectionClear () {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      //搜索
    searchChange(){
      if(this.treeId){
       this.tabTypeLazyTreeAll(this.treeId, this.page.current,this.page.size,this.input3).then((res)=>{
          this.loadData=res.records
          this.page.total=res.total
          
        })
      }else{
         this.$message.warning("请先选择左侧节点");  
      }
     
    },
    resetChange(item){
      console.log(item);
        this.tabTypeLazyTreeAll(this.treeId, this.page.current,this.page.size).then((res)=>{
          this.loadData=res.records
          this.page.total=res.total
           
        })
    },
    async tabTypeLazyTreeAll ( parentId,current,size,titleName) {//清表树
      console.log(parentId);
      const { data: res } = await tabTypeLazyTreeAll({parentId,current,size,titleName}	)
      console.log(res,'tabTypeLazyTreeAll');
      if (res.code === 200) {
        return res.data
        
      }
    },
      nodeClick(data,node){
          console.log(data,'treedata');
          this.treeId=data.id
          if(data.hasChildren){
             this.tabTypeLazyTreeAll(data.id, this.page.current,this.page.size).then((res)=>{
              this.loadData=res.records
              this.page.total=res.total
            })
          }
        if(data.hasChildren===false&&node.level==2){
          let arr=[]
            arr.push(data)
            this.loadData=arr
            this.page.total=1
        }else{
           this.loadData=[]
            this.page.total=0
        }
         
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      show(){
        this.dialogVisible=true;
        
      },
      submitQute(){
        console.log('确定');
        console.log(this.ids,'ids');
       
       
        projecttabInfo(this.ids,this.projectid).then((res)=>{
          console.log(res,'res');
          if(res.data.code===200){
             this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
          this.dialogVisible=false;
          this.onLoad1();
          this.refreshTree()
          }
        })
      }
    
    },
    
   
}
</script>

<style  scoped lang="scss">
/deep/.avue-crud__left{
  width: 75% !important;
}
.boxswai1 .boxnei {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%; 
    background-color: #fff;
    padding: 14px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
    overflow: auto;
}
</style>