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

<template>
<el-dialog
    title="引用元素表"
    :visible.sync="dialogVisible"
    width="70%"
    append-to-body
    destroy-on-close
    custom-class="flow-design-dialog"
    >
        <el-container>
        <el-aside width="200px">
        <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick" ></avue-tree>
        </el-aside>
        <el-main>
            <avue-crud
            :data="loadData"
            :option="loadOption"
            v-model="obj"
            :page.sync="page"
            @on-load="onLoad"
            @search-change="searchChange" 
            @search-reset="resetChange"
            @selection-change="selectionChange"
            ref="crud"

            ></avue-crud>
        </el-main>
        </el-container>
        <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 {
        dialogVisible:false,
        obj: {},
        treeData:[],
        treeOption:{
          defaultExpandAll:true,
          filter:false,
          addBtn:false,
          props:{
            labelText:'标题',
            label:'title',
            value:'id',
            children:'children'
          }
        },
      selectionList:[],
      loadData:[],
      loadOption: {
          height: 'auto',
          calcHeight: 30,
          tip: false,
          searchShow:true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: false,
          selection: true,
          editBtn:false,
          delBtn:false,
          addBtn:false,
          menu:false,
        
          dialogClickModal: false,
         column: [
          {
            label: "元素表名称",
            prop: "title",
            search: true,
            editDisplay: false,
            addDisplay: false,
            searchPlaceholder:'请输入元素表名称',
            searchSpan:18,
            searchLabelWidth:100,
          },
          {
            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
    },
    computed:{
     ids () {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
    created(){
      //  this.loadData=this.loadData1;
      
    },


    methods: {
    onLoad(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(params,done){
     if(this.treeId){
         this.tabTypeLazyTreeAll(this.treeId, this.page.current,this.page.size,params.title).then((res)=>{
          this.loadData=res.records
          this.page.total=res.total
           done()
        })
      }
     
    },
    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){
          console.log(data,'treedata');
          this.treeId=data.id
          this.tabTypeLazyTreeAll(data.id, this.page.current,this.page.size).then((res)=>{
          this.loadData=res.records
           this.page.total=res.total
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      show(){
        this.dialogVisible=true;
        let id=12345678910
        this.tabTypeLazyTreeAll(id).then((res)=>{
            this.treeData=res.records;
        })
      },
      submitQute(){
        console.log('确定');
        console.log(this.ids,'ids');
       
       
        projecttabInfo({primaryKeyIds:this.ids,projectId:this.projectid}).then((res)=>{
          console.log(res,'res');
          if(res.data.code===200){
             this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
          }
        })
      }
    
    },
    
   
}
</script>

<style>

</style>