saber/src/views/manager/projectinfo/independent.vue

<template>
  <div style="height: 100%" class="flexStar">
    <div class="boxswai" style="width: 26%; padding-left: 0px">
      <div class="boxnei" style="display: flex; flex-direction: column">
        <h3>引用元素表</h3>
        <div style="overflow: auto; flex: 1;height:500px">
          <el-tree
            style="display: inline-block;min-width: 100%;"
            ref="trees"
            :loading="loading"
            :load="loadNode"
            lazy
            :data="data"
            :props="defaultProps"
            @node-click="nodeClick"
            node-key="id"
            :expand-on-click-node="false"
            v-show="!allTreeShow"
            :default-expanded-keys="defaultExpandKey"
            :current-node-key="defaultCheckedKey"
          >
            <span
              class="custom-tree-node"
              slot-scope="{ data ,node }"

              style="box-sizing: border-box;padding-right:70px!important;;"
            >
              <div style="width:100%;">
                <span style="text-overflow: ellipsis;"> {{ data.title }} </span>

              <!-- 调整排序 -->
              <el-link :underline="false">
                <i
                  class="el-icon-sort"
                  @click.stop="sortpai(data, node)"
                  v-if="node.level == 2"
                  title="调整排序"
                ></i>
              </el-link>
              </div>
            </span>
          </el-tree>
        </div>
      </div>
    </div>
    <div
      class="boxswai"
      style="width: 74%; padding-left: 0px; padding-right: 0px"
    >
      <div class="boxnei">
        <div
          class="marleft10"
          style="height: 100%; display: flex; flex-direction: column"
        >
          <div class="martop20" v-if="true" style="flex: 1">
            <avue-crud
              :data="loadData"
              :option="loadOption"
              v-model="obj"
              ref="crud"
              @selection-change="selectionChange"
              :page.sync="page"
              :table-loading="tabloading"
              @on-load="onLoad"
              @current-change="currentChange"
              @size-change="sizeChange"
              @refresh-change="refreshChange"
            >


              <template slot="menuRight">
                            <el-button
                              type="primary"
                              size="small"
                              plain
                              @click="quteEle"
                            >引用元素表单库
                            </el-button>

                          <el-button
                            size="small"
                            type="danger"
                            plain

                            @click="handleDelete"
                          >删除表单
                          </el-button>
              </template>
               <template slot="menuLeft" slot-scope="{size}">
                 <div style="display:flex">
                   <el-input placeholder="请输入你想搜索的表单名称" v-model="input3" :size="size"  clearable  @clear="clearinput" >  </el-input>
                    <el-button type="primary" icon="el-icon-search"  size="small"  @click="searchChange">搜索</el-button>
                 </div>

                     <!-- <i  class="el-icon-search" slot="append" @click="searchChange" style=" cursor:pointer;font-size: 16px;"></i> -->
                </template>
                <template slot-scope="{type,size,row}" slot="menu">
                      <el-button  :size="size" :type="type"  @click="Associationlist(row)">关联清表</el-button>
                      <el-button  :size="size" :type="type"  :disabled="row.excelIds == -1" @click="rightClick(row)">编辑元素</el-button>
                      <el-button  :size="size" :type="type"  :disabled="row.excelIds == -1" @click="adjustExcel(row.id,row.primaryKeyId)">调整表单</el-button>
                      <el-button  :size="size" :type="type" @click="handleEditFormula(row)">编辑公式</el-button>

                </template>
            </avue-crud>
          </div>
        </div>
      </div>
    </div>
    <Qute ref="Qute" :projectid="projectid" :wbsid="wbsid" :onLoad1="onLoad1" :refreshTree="refreshTree"> </Qute>
    <Relation ref="Relation" :GLExcelFrom="GLExcelFrom" :wbsid="wbsid"  :onLoad1="onLoad1" :refreshTree="refreshTree"></Relation>
    <!-- 编辑元素 -->
       <!-- 编辑元素 -->
    <el-dialog
      title="　"
      :visible.sync="editElementVisible"
      fullscreen
      append-to-body
      class="full-dialog"
    >
      <EditElement
        :curEleTable="curEleTable"
        :pkeyId="editElementQuery.pkeyId"
        :id="editElementQuery.id"
        :initTableName="editElementQuery.initTableName"
        :pid="editElementQuery.pid"
        :wbsid="editElementQuery.wbsid"
        :nodeid="editElementQuery.nodeid"
         :initTableId="editElementQuery.initTableId"
        @hideDialog="editElementVisible = false"
        v-if="editElementVisible"
        :elementType="true"
        :globaltype='1'
      ></EditElement>
    </el-dialog>
      <!-- 调整表单模板 -->
    <div v-if="excelHtml" class="excelHtml">
      <dynamicExcel
        @remove="removeExcel"
        v-if="excelHtml"
        :pkeyId="GLExcelFrom.id"
      />
    </div>
<!-- 元素公式 -->
    <el-dialog
      title="元素公式"
      :visible.sync="editEleFormulaVisible"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <div class="flex mg-b-10">
        <el-input
          v-model="formulaInput"
          placeholder="请输入名称"
          size="samll"
          clearable
          @clear="searchFormulaName"
        ></el-input>
        <el-button type="info" class="mg-l-10" @click="searchFormulaName"
          >搜索</el-button
        >
      </div>
        <el-table
        :data="editEleListFilter"
        border
        style="width: 100%"
        height="400px"
      >
        <el-table-column align="center" prop="eName" label="字段信息">
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-link
              :type="scope.row.globalFormula == 1 ? 'warning' : 'primary'"
              @click="toFormulaEdit(scope.row,1)"
              >全局公式</el-link
            >
            <!-- <el-link
              class="mg-l-10"
              :type="scope.row.isSaveFormula == 1 ? 'warning' : 'primary'"
              @click="toFormulaEdit(scope.row,10)"
              >节点公式</el-link
            > -->
            <!-- <el-link
              class="mg-l-10"
              type="danger"
              @click="delEleRowHandle(scope.$index,editEleListFilter)"
            >删除</el-link> -->
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
      <!-- 公式 -->
    <el-dialog
      title="元素公式"
      :visible.sync="formulaCompVisible"
      fullscreen
      append-to-body
      class="full-dialog"
      @close="closeformulaComp"
    >
      <FormulaEdit
      :fromcurNode="curEleTable"
       :initTableId='curTreeData.id'
        :wbsid="id"
        :nodeid="curTreeData.id"
        :eleid="formulaCurRow.id"
        :projectid="projectid"
        :globaltype="formulaCurRow.globaltype"
        :elementType="formulaCurRow.elementType"
        @hideDialog="formulaCompVisible = false"
        v-if="formulaCompVisible"
      ></FormulaEdit>
    </el-dialog>
      <!-- 排序弹框 -->
    <el-dialog
      title="调整排序"
      :visible.sync="sortTag"
      width="50%"

      append-to-body
    >
      <ManualSorting v-if="sortTag2" @bianhua="bianhua()" :sort="sort" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="(sortTag = false), (sortTag2 = false)"
          >取 消</el-button
        >
        <el-button type="primary" @click="editSort()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {tabTypeLazyTree,delAprojectTab} from "@/api/manager/wbsprivate";
import {selectPrivateFormElements} from "@/api/manager/wbstree";
import {getTableElments} from "@/api/manager/wbstree";
import {wbsInfotabSort} from "@/api/manager/wbsinfo";
import {getExcelHtml} from "@/api/exctab/excelmodel"
import Qute from "./qutediaolog/qute1.vue";//引入元素库
import Relation from './qutediaolog/relation.vue'//关联清表
import EditElement from "@/views/manager/projectinfo/editElement/editElement.vue";//编辑元素
import dynamicExcel from "./treeTemplate/dynamicExcel.vue";
import FormulaEdit from "@/views/formula/edit1.vue";
import ManualSorting from '@/components/WbsTree/ManualSorting'


export default {
   components: { dynamicExcel, EditElement, Qute,Relation,FormulaEdit,ManualSorting },
  computed:{
     ids () {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.primaryKeyId);
      });
      return ids.join(",");
    }
  },
  data() {
    return {
      input3:'',
      page:{
        current:1,
        size:10,
        total:0
      },
      search:{},
      loading:false,
      tabloading:false,
      dialogVisible: false,
      obj: {},
      data: [],
      defaultProps: {
        children: "children",
        isLeaf: function (data) {
          return !data.hasChildren;
        },
      },
      allTreeShow:false,//是否显示整棵树
      loadData: [],
      loadData1: [
        {
          tableName: "张三",
          formatTableType: "男",
        },
      ],
      loadData2: [
        {
          tableName: "李四2",
          formatTableType: "女",
        },
      ],
      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: true,
        menuWidth:300,
        searchShowBtn:true,

        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",
              },
            ],
          },
        ],
      },
      defaultExpandKey:[],//默认展开的节点
      defaultCheckedKey:'',
      selectionList:[],
      GLExcelFrom: {
          id: "",
          name: "",
          search: "", //搜素框舒服的值
          ids: "",
          excelId: "",
          initTableName: "",
          initTableId:'',
      },
      //编辑元素弹窗
      editElementVisible: false, //编辑元素弹框
      editElementQuery: {
        pkeyId: "",
        excelId: "",
        id: "",
        initTableName: "",
        pid: "",
        wbsid: "",
        nodeid: "",
      }, //
      excelHtml:false,//调整表单

      //#region 调整表单
      adjustmentExcel: "",
      curEleTable: {},//编辑元素公式
      editEleFormulaVisible: false,//元素公式
      formulaInput: "",
      editEleListFilter: [],
      editEleListAll: [],
      formulaCurRow: {}, //当前元素
      formulaCompVisible:false,
        //#region公式
      id: "",
      curTreeData: {},
      projectid:'',
      treeId:"",
      curNode:{},
      sortTag: false,
      sortTag2: false,
      sort:[]


    };
  },
  created() {
     this.projectid = this.$route.query.pid;
     this.wbsid=this.$route.query.wbsid;
  },
  methods: {
      //关闭公式弹窗
    closeformulaComp(){
      console.log('关闭');
        getTableElments(this.curEleTable.initTableId).then((res) => {

        this.editEleListFilter = res.data.data;
        this.editEleListAll = [].concat(this.editEleListFilter);
      })

    },
    async sortpai(data,node) {
      this.curNode=node;
      this.curTreeData=data;
      await this.findWbsTreePrivateSameLevel(node,data)
      this.sortTag = true;
      this.sortTag2 = true;
    },
    editSort() {
      this.wbsInfotabSort();
    },
    bianhua() {
      this.sortTag2 = false;
      this.$nextTick(() => {
        this.sortTag2 = true;
      });
    },
    async wbsInfotabSort() {
      //元素库、独立库节点排序
      console.log(this.sort,'this.sort');
     var newArr=this.sort.map((v)=>{return v.id})
     newArr=newArr.join(',')
      const { data: res } = await wbsInfotabSort(newArr);
      if (res.code == 200) {
        this.$message.success('操作成功')
        this.sortTag = false;
        this.sortTag2 = false;
        this. refreshTree();
      }
    },
    async findWbsTreePrivateSameLevel(node,data) {
      const { data: res } =await tabTypeLazyTree({parentId:node.data.parentId,projectId:this.projectid,current:1,size:1000})
      if (res.code == 200) {
        console.log(res.data,'res1111111');
        let tabArr=res.data.records
        tabArr.forEach((item)=>{
          item.tableName=item.title
        })
        console.log(tabArr,'tabArr');
        this.sort =tabArr
      }
    },
        //#region 接口
    async tabTypeLazyTree (parentId, projectId,current,size,titleName) {//清表树
      console.log(parentId, projectId);
      this.loading=true;
      const { data: res } = await tabTypeLazyTree({ parentId, projectId,current,size,titleName })
       this.loading=false;
      if (res.code === 200) {
        return res.data;
      }
    },
    loadNode(node, resolve) {
      const parentId = (node.level === 0) ? 12345678910 : node.data.id;
      this.tabTypeLazyTree(parentId,this.projectid,this.page.current,1000).then(res=>{
        resolve(res.records.map(item=>{
           return{
              ...item,
            leaf: !item.hasChildren
           }
        }))
      })
    },
    searchChange(){
        if(this.treeId){
          this.page.current=1;
          this.page.currentPage=1
          this.page.size=10;
          this.onLoad2()
          }else{
            if(this.input3){
                this.tabloading=true;
                this.page.current=1;
                this.page.currentPage=1
                this.page.size=10;
                this.tabTypeLazyTree(this.curTreeData.id, this.projectid, this.page.current,this.page.size,this.input3).then((res)=>{
                console.log(res.records);
                this.loadData=res.records;
                this.page.total=res.total;
                this.tabloading=false;
                })
            }else{
              this.$message.warning('请输入你想搜索的表单名称')
            }
              
        }
      

    },
    currentChange (currentPage) {
        this.page.current = currentPage;
        
        //  this.searchChange();

    },
    sizeChange (pageSize) {
        this.page.size = pageSize;
    },
    refreshChange () {
      this.searchChange();

    },
    clearinput(){
      this.searchChange()
    
    },
    onLoad2(){

           if(this.curTreeData.hasChildren){
            this.tabloading=true;
            this.tabTypeLazyTree(this.curTreeData.id, this.projectid, this.page.current,this.page.size,this.input3).then((res)=>{
            console.log(res.records);
            this.loadData=res.records;
            this.page.total=res.total;
            this.tabloading=false;
            })
        }
        if(this.curTreeData.hasChildren===false&&this.curNode.level==2){
          this.tabloading=true;
          let arr=[]
            arr.push(this.curTreeData)
            this.loadData=arr
            this.page.total=1
            setTimeout(() => {
              this.tabloading=false

            }, 1000);
        }else{
          this.tabloading=true;
           this.loadData=[]
           this.page.total=0;
            setTimeout(() => {
              this.tabloading=false

            }, 1000);
        }

    },
    onLoad1(){
      if(this.curNode.level===1){
        this.tabloading=true;
         this.tabTypeLazyTree(this.curTreeData.id, this.projectid, this.page.current,this.page.size,this.input3).then((res)=>{
          this.loadData=res.records
           this.page.total=res.total
           this.tabloading=false
        })
      }else{

          this.tabTypeLazyTree(this.curTreeData.parentId, this.projectid, this.page.current,1000,this.input3).then((res)=>{
           let faArr=res.records;
           this.loadData=faArr.filter((item)=>{
             if(item.id===this.treeId){
               return item
             }
           })
          })
      }
    },
     onLoad(page){
        if(this.input3||this.treeId){
           this.tabloading=true;
           this.tabTypeLazyTree(this.treeId,this.projectid, page.currentPage,page.pageSize,this.input3).then((res)=>{
            this.loadData=res.records
            this.page.total=res.total
            this.tabloading=false

          })
        }
        
    },


    nodeClick (data,node) {//外层树结构
        console.log(data,node,'treedata');
        this.curNode=node
        this.treeId=data.id
        this.curTreeData=data;
        this.page.current=1;
        this.page.currentPage=1
        console.log(this.page,'this.page111111');
        if(data.hasChildren){
          this.onLoad(this.page)
        }
        if(data.hasChildren===false&&node.level==2){
          this.tabloading=true;
          let arr=[]
            arr.push(data)
            this.loadData=arr
            this.page.total=1
            setTimeout(() => {
              this.tabloading=false

            }, 1000);
        }else{
           this.loadData=[]
            this.page.total=0
        }

    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //引用元素表单库
    quteEle(){
      this.$refs.Qute.show();

    },

    handleDelete () {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
        return delAprojectTab(this.ids,this.projectid);
        })
        .then(() => {
        this.onLoad1()
        this.refreshTree()
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },
    selectionChange (list) {
    this.selectionList = list;
    },
    selectionClear () {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    //关联清表
     Associationlist(row) {
       console.log('关联清表',row);
       this.$refs.Relation.show()
      // this.GLExcelFrom.name = row.title;

      this.GLExcelFrom.id = row.primaryKeyId;
      this.GLExcelFrom.excelId =row.excelIds;
      this.GLExcelFrom.ids = row.id;
      this.GLExcelFrom.initTableName =row.initTableName;
      this.GLExcelFrom.initTableId =row.initTableId;
      this.GLExcelFrom.nodeid =this.curTreeData.id


    },
       //#region 编辑元素
    async rightClick(row) {
      console.log(row,'编辑元素');
      await this.getExcelHtml2(row.primaryKeyId);
      // console.log('编辑元素');
      this.editElementQuery.pkeyId = row.primaryKeyId;
      this.editElementQuery.excelId = row.excelIds;
      this.editElementQuery.id = row.id;
      this.editElementQuery.initTableName =row. initTableName;
      this.editElementQuery.pid = this.$route.query.pid;
      this.editElementQuery.wbsid = this.$route.query.wbsid;
      this.editElementQuery.initTableId = row.initTableId;
      this.editElementQuery.nodeid = this.curTreeData.id;
      this.curEleTable=row;
      this.editElementVisible = true;
    },
    async getExcelHtml2(pkeyId) {
      const { data: res } = await getExcelHtml({ pkeyId });
      console.log(res);
      if (res.code === 200) {
        localStorage.setItem("editElement", res.data);
      }
    },
      //#region 调整表单
    adjustExcel(id,pkeyId) {
      this.excelHtml=false;
      // //调整表单
      this.GLExcelFrom.id = pkeyId;
      this.getExcelHtml(pkeyId);
    },
    handleEditFormula(row) {
      console.log(row,'公式');
      this.curEleTable = row;
        getTableElments(this.curEleTable.initTableId).then((res) => {
      // selectFormElements(this.curEleTable.id).then((res) => {
        this.editEleListFilter = res.data.data;
        this.editEleListAll = [].concat(this.editEleListFilter);
      });
      this.editEleFormulaVisible = true;
    },
    //搜索 筛选
    searchFormulaName() {
      this.editEleListFilter = this.editEleListAll.filter((ele) => {
        return ele.eName.indexOf(this.formulaInput) > -1;
      });
    },
   async getExcelHtml(pkeyId) {
      const { data: res } = await getExcelHtml({ pkeyId });
      console.log(res);
      if (res.code === 200) {
        localStorage.setItem("excelHtml", res.data);
        this.adjustmentExcel = res.data;
        this.excelHtml = true;
      }
    },
    removeExcel() {
      this.excelHtml = false;
    },
        //跳转到公式配置页面
    toFormulaEdit(row,type) {
      this.formulaCurRow = row;
      this.formulaCompVisible = true;
      this.formulaCurRow.globaltype = type;
       this.formulaCurRow.elementType = true;
    },
    //刷新左边树形数据
      refreshTree(){
        //刷新左边树形数据
      if(this.curNode.level===1){
         const parentId =12345678910
        tabTypeLazyTree({parentId,projectId:this.projectid,current:1,size:1000}).then(res => {
            this.data=res.data.data.records;
             this.$nextTick(()=>{
              this.defaultExpandKey.push(this.curNode.data.id);
              this.$refs.trees.setCurrentKey(this.curNode.data.id);

            })

          });
      }else{
        this.updateTreeNewNode()
      }
    },
     updateTreeNewNode() {
      tabTypeLazyTree(
       {parentId:this.curTreeData.parentId,projectId:this.projectid,current:1,size:1000}
      ).then((res) => {
        this.$refs.trees.updateKeyChildren(
         this.curTreeData.parentId,
         res.data.data.records
        );
        this.$refs.trees.setCurrentKey(this.curNode.data.id);
      });
    },

  },

  mounted() {
    // this.heightss = this.$refs.rulesss.clientHeight
  },
};
</script>

<style scoped lang="scss">
//调整表单样式
.excelHtml {
  position: absolute;
  z-index: 999999;
  top: 50px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.marleft10 {
  margin-left: 10px;
}
/deep/.el-tree-node__expand-icon {
  font-size: 16px;
}
.colorblue {
  color: rgb(0, 82, 217);
}

.treecontent /deep/.el-scrollbar {
  height: 100%;
}

.el-scrollbar {
  height: 100%;
}

.rightHeader {
  display: flex;
  justify-content: flex-start;
  align-items: top;
  font-size: 14px;
  background-color: #fff;

  .excelname {
    box-sizing: border-box;
    min-width: 200px;
    height: 28px;
    border: 1px solid rgb(220, 220, 220);
    padding: 0 10px;
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.dialogModel {
  .dialogBox {
    .middle {
      display: flex;

      .left {
        border: 1px solid rgb(220, 220, 220);
        border-radius: 3px;
        height: 500px;
        width: 49%;

        .select {
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          padding: 5px 0;
          border-bottom: 1px solid #e0e0e0;
        }
        .leftscroll {
          height: 450px;
          overflow-y: scroll;
        }
      }

      .right {
        height: auto;
        height: 60px;
        max-height: 500px;
        margin-left: 2%;
        // height: 500px;
        border-radius: 3px;
        td {
          box-sizing: border-box;
          padding: 5px 10px;
          height: 30px;
          line-height: 30px;
        }
      }
    }
  }

  .btbox {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}

.rightBox {
  flex: 1;
}

.boxswai {
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 10px;
}
/deep/.avue-crud__left{
  width: 65%;
}
/deep/.el-input-group__append{
   background-color: #ecf5ff;
    color: #409EFF;
}
/deep/.el-input-group__append:hover{
   background-color: #409EFF;
    color: white;
}
/deep/.el-input-group__prepend:hover{
  background-color:  #409EFF;
  color: white;
}
/deep/.el-input-group__append:active{
   background-color: #9dc5ee;
    color: white;
}
/deep/.el-input-group__prepend:active{
  background-color: #9dc5ee;
  color: white;
}
</style>