saber/src/views/manager/wbsinfo/element.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;">
        <div style="overflow: auto;flex:1">
          <avue-tree
          :option="treeOption"
          :data="treeData"
           @node-click="nodeClick"
           ref="avueTree"
           style="display: inline-block;min-width: 100%;">
             <span
            class="custom-tree-node"
            slot-scope="{ data ,node }"
            @mouseover.stop="mouseOver(data)"
            @mouseleave.stop="mouseLeave(data)"
            style="box-sizing: border-box;padding-right:70px!important;;"
          >
            <div style="width:100%;">
              <span style="text-overflow: ellipsis;"> {{ data.title }} </span>
              <!-- <span> {{ node}} </span> -->
              <!-- 添加 -->
              <span>
               <!-- 调整排序 -->
                 <el-link :underline="false">
                            <i
                              class="el-icon-sort"
                              @click.stop="sortpai(data, node)"
                              v-if="node.level == 2"
                              title="调整排序"
                            ></i>
                  </el-link>
              </span>
            </div>
          </span>
           </avue-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="rightHeader"
            v-show="from.checkd"
          >
          </div>

          <el-empty
            style="height:80%;"
            v-show="false"
            description="该目录为根目录没有EXCEL文件"
          ></el-empty>
          <div
            class="martop20"
            v-if="true"
            style="flex:1;"
          >
              <avue-crud
                  ref="crud"
                  :data="loadData"
                  :option="loadOption"
                  v-model="obj"
                  :page.sync="page"
                  @on-load="onLoad"
                  @selection-change="selectionChange"
                  :table-loading="tabloading"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange"
                  >

                  <template slot="menuRight">
                          <el-button
                            type="danger"
                            size="small"
                            icon="el-icon-delete"
                            plain
                            @click="handleDelete">删除元素表
                          </el-button>

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

                          @click="editele"
                        >编辑表单
                        </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>
                </template>
                  <template slot-scope="{type,size,row}" slot="menu">
                      <el-button  :size="size" :type="type" @click="distribution(row)">分配节点</el-button>
                      <el-button  :size="size" :type="type" @click="handleEditFormula(row)">公式配置</el-button>
                    <el-button  :size="size" :type="type" @click="editElement(row)">编辑元素</el-button>
                  </template>
                </avue-crud>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑元素表单信息 -->
    <el-dialog
      title="编辑元素表单信息"
      :visible.sync="editElementFormTag"
      width="60%"
      :modal-append-to-body="false"
    >
      <div>
        <el-table
          :data="formDatass"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="tableName"
            label="表名"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.tableName"
                placeholder="请输入表名称"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="tableType"
            label="表类型"

          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.tableType"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item,key) in tableTypelist"
                  :key="key"
                  :label="item.dictValue"
                  :value="item.dictKey"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="tableOwner"
            label="所属方"

          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.tableOwner"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item,key) in ownerTypeList"
                  :key="key"
                  :label="item.dictValue"
                  :value="item.dictKey"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="fillRate"
            label="填报率"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.fillRate"
                placeholder="请输入填报率"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="editElementFormTag = false">取 消</el-button>
        <el-button
          type="primary"
          @click="editeditElementFormMF()"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 公式配置 -->
    <el-dialog
      title="元素公式6"
      :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="元素公式66"
      :visible.sync="formulaCompVisible"
      fullscreen
      append-to-body
      class="full-dialog"
      @close="closeformulaComp"
    >
      <FormulaEdit
        :fromcurNode="curEleTable"
        :wbsid="id"
        :nodeid="curTreeData.id"
        :eleid="formulaCurRow.id"
        :projectid="projectid"
        :elementType="formulaCurRow.elementType"
        :globaltype="formulaCurRow.globaltype"
        @hideDialog="formulaCompVisible = false"
        v-if="formulaCompVisible"
      ></FormulaEdit>
    </el-dialog>
  <!-- 关联公共WBS模板 -->
    <PublicWbs  ref="PublicWbs" :from="from"/>
    <!-- 编辑元素 -->
     <el-dialog
      :title="(curEleTable.title?curEleTable.title:'')+'  元素编辑'"
      :visible.sync="editEleVisible"
      width="80%"
      append-to-body
      :close-on-click-modal="false"
    >
      <p class="font-c-warning">编辑元素信息（请谨慎操作）</p>
      <el-table
        :data="editEleList"
        border
        style="width: 100%"
        height="400px"
         v-loading="editEleloading"
      >
        <el-table-column
          align="center"
          type="index"
          width="50"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="eName"
          label="元素名称"
        >
          <template slot="header">
            <i class="required"></i>
            <span>元素名称</span>
          </template>
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.eName"
              size="small"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="eType"
          label="数据类型"
          width="120"
        >
          <template slot="header">
            <i class="required"></i>
            <span>数据类型</span>
          </template>
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.eType"
              @change="setDefaultLength(scope.row)"
              size="small"
              placeholder="请选择"
            >
              <el-option
                v-for="item in dataTypeList"
                :key="item.id"
                :label="item.dictValue"
                :value="item.dictKey"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="eLength"
          label="长度"
          width="120"
        >
          <template slot="header">
            <i class="required"></i>
            <span>长度</span>
          </template>
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.eLength"
              size="small"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="eAllowDeviation"
          label="允许偏差值"
        >
          <template slot-scope="scope">
            <div class="flex">
              <el-select
                v-model="scope.row.allow"
                size="small"
                placeholder="请选择"
                style="width:120px"
              >
                <el-option
                  :key="1"
                  label="-"
                  value="-"
                ></el-option>
                <el-option
                  :key="2"
                  label=">"
                  value=">"
                ></el-option>
                <el-option
                  :key="3"
                  label="<"
                  value="<"
                ></el-option>
                <el-option
                  :key="4"
                  label="≥"
                  value="≥"
                ></el-option>
                <el-option
                  :key="5"
                  label="≤"
                  value="≤"
                ></el-option>
                <el-option
                  :key="6"
                  label="±"
                  value="±"
                ></el-option>
                <el-option
                  :key="7"
                  label="【】"
                  value="【】"
                ></el-option>
              </el-select>
              <el-input
                v-model="scope.row.deviation"
                size="small"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="eInspectionMethod"
          label="检查方法和频率"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.eInspectionMethod"
              size="small"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="120"
        >
          <template slot="header">
            <el-button
              @click="addEleRow(editEleList)"
              type="text"
              icon="el-icon-circle-plus-outline"
              class="text-icon"
            ></el-button>
          </template>
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.id"
              icon="el-icon-remove-outline"
              type="text"
              @click="delEleRowHandle(scope.$index,editEleList)"
              class="text-icon text-icon-danger"
            ></el-button>
            <div
              class="flex"
              v-else
            >
              <el-button
                @click="saveNewEle(scope.row)"
                type="mini"
              >保存</el-button>
              <el-button
                icon="el-icon-remove-outline"
                type="text"
                @click="delEleRowHandle(scope.$index,editEleList)"
                class="text-icon text-icon-danger"
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="editEleVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="saveEles"
        >确 定</el-button>
      </span>
    </el-dialog>
     <!-- 私有wbs树排序弹框 -->
    <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 { excelType} from '@/api/exctab/excelmodel';
import {
  updateBatchNodeTableInfoElement,
  selectByNodeTable,
  selectFormElements,
  selectPrivateFormElements
} from "@/api/manager/wbstree";
import {getTableElments} from "@/api/manager/wbstree";
import {tabTypeLazyTreeAll,delTabInfoAll} from "@/api/manager/wbsprivate";
import {saveElement, remove as removeElement, updateBatchElements, getTemplate,importWbsElement} from "@/api/manager/wbsformelement";
import FormulaEdit from "@/views/formula/edit1.vue";
import PublicWbs from './PublicWbs.vue'
import { searchNodeTables, } from "@/api/exctab/excelmodel";
import {wbsInfotabSort} from "@/api/manager/wbsinfo";
import { getDictionary } from "@/api/system/dict";
import ManualSorting from '@/components/WbsTree/ManualSorting'

export default {
  components:{
    FormulaEdit,
    PublicWbs,
    ManualSorting
  },
  data () {
    return {
      input3:'',
      editElementFormTag:false,//编辑元素
      tabloading:false,
      formDatass: [],
      selectionList:[],
      tableTypelist:[],
      ownerTypeList:[],
      dataTypeList:[],
           //数据类型的默认长度
      dataTypeDefaultMap: {
        1: 250,//字符串
        2: 50,//整数
        3: 50,//小数
        4: 50,//日期
        5: 50,//数值
        6: 50,//签名
        7: 100,//文件
      },
      page: {
        size: 10,
        current: 1,
        total: 2
      },
       loadOption: {
          height: 'auto',
          calcHeight: 30,
          tip: false,
          searchShow:false,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: false,
          selection: true,
          editBtn:false,
          delBtn:false,
          addBtn:false,
          menu: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",
              },
            ],
          },
        ],

        },
      formelemtfoelemtformrm: {},
      elementloading: false,
      elemtData:[
        {
          tableName:'张三',
          sex:'男',
          id:1
        }, {
          tableName:'李四',
          sex:'女',
          id:2
        }
      ],
      curEleTable:{},
      eleReg: /(-|>|<|≥|≤|±|【】)?([^≥≤±【】]*)/,
      editEleList:[],
      editEleListAll:[],
      editEleFormulaVisible:false,
      editEleListFilter:[],
      excelId:'',
      treeNode: {},
      //#region 鼠标
      leftTRee: '',//左侧树ID
      threessW: 400,
      //#endregion
      heightss: '',//

      data: [],//清表模板
      filterText:"",//搜索关键字

      treeloading:false,
      defaultProps: {
        children: "children",
        isLeaf: function (data) {
          return !data.hasChildren || (data.isExistForm == 1);
        },
      },
      wbsdata: [],//wbs模板
      //#region 右侧数据
      from:{
        checkd:false
      },
      rules: {
        nodeName: [
          { required: true, message: '请输入清表名称', trigger: 'blur' },
        ],
        tabType: [
          { required: true, message: '请选择清表类型', trigger: 'blur' },
        ],
      },
      wbsform: {
        id: '',
        wbsType: '',
        wbsName: '',
      },//wbs树选中的值
      tableData: [],//右侧表数据
      wbsmiddle: false,//选择wbs模板那块是否有
      tableList: [],//进行处理的wbs关联表
      exceltypeData: [],//清表类型枚举
      wbsmodel: [],//wbs模板名称枚举
      //#endregion

      saveExcelLoad:false,
      filterText1: "",
      addTableData:[],
      //编辑元素
      editEleVisible:false,
      editEleloading:false,
      formulaInput:"",//公式配置
      formulaCompVisible: false, //公式弹框
      formulaCurRow: {}, //当前元素
      id:'',
      curTreeData:{},
      loadData:[],
      treeOption:{
       defaultExpandedKeys:[],
       currentNode:{},
        filter:false,
        addBtn: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
              }
            }))
          });
        },

      },
      treeData:'',
      projectid:"",
      curNode:{},
      defaultExpandKey:[],//默认展开的节点
      sortTag: false,
      sortTag2: false,
      sort:[]
    }
  },
  computed:{
     ids () {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  watch: {
      'input3'(){
       this.page.currentPage=1;
       this.page.current=1
      }
  },
  methods: {
    //关闭公式弹窗
    closeformulaComp(){
      console.log('关闭');
        getTableElments(this.curEleTable.initTableId).then((res) => {

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

    },
        //#region  树形控件外层左侧事件
    mouseLeave (data) {
      if (data.moreShow) {
        this.$set(data, 'moreShow', false)
      }
    },
    mouseOver (data) {
      if (!data.moreShow) {
        this.$set(data, 'moreShow', true)
      }
    },
    async sortpai(data,node) {
      console.log(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() {
      //元素库、独立库节点排序
      var newArr=this.sort.map((v)=>{return v.id})
      newArr=newArr.join(',')
      const { data: res } = await wbsInfotabSort(newArr);
      console.log(res);
      if (res.code == 200) {
        this.sortTag = false;
        this.sortTag2 = false;
        this.refreshTreeData();
      }
    },
    async findWbsTreePrivateSameLevel(node,data) {
       const { data: res } =await tabTypeLazyTreeAll({parentId:node.data.parentId,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
      }
    },

    addEleRow (list) {
      list.push({});
    },
     //修改数据类型，给个默认值
    setDefaultLength (row) {
      this.$set(row, 'eLength', this.dataTypeDefaultMap[row.eType]);
    },

    delEleRow (index, list) {
      list.splice(index, 1);
    },
    delEleRowHandle (index, list) {
      let row = list[index];
      if (row.id) {
        //有id需要请求删除
        this.$confirm('是否确认删除?', '删除元素', {
          distinguishCancelAndClose: true,
          confirmButtonText: '删除',
          cancelButtonText: '取消'
        }).then(() => {
            removeElement(row.id, this.curEleTable.initTableName, row.ekey).then(() => {
            list.splice(index, 1);
          })
          this.curEleTable.elementTotal --;
        })
      } else {
        list.splice(index, 1);
      }
    },
     formatTableType(cellValue) {
      for (let i = 0; i < this.tableTypelist.length; i++) {
        if (this.tableTypelist[i].dictValue == cellValue) {
          return this.tableTypelist[i].dictKey;
        }
      }
      return cellValue;
      //console.log(cellValue)
    },
    formatOwner( cellValue) {
      for (let i = 0; i < this.ownerTypeList.length; i++) {
        if (this.ownerTypeList[i].dictValue == cellValue) {
          return this.ownerTypeList[i].dictKey;
        }
      }
      return cellValue;
      //console.log(cellValue)
    },
      currentChange (currentPage) {
        this.page.current = currentPage;
          this.page.currentPage = currentPage;
       this.searchChange();

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

      },
      selectionChange (list) {
      this.selectionList = list;
      },
      selectionClear () {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
     async tabTypeLazyTreeAll ( parentId,current,size,titleName) {//清表树
      console.log(parentId);
      const { data: res } = await tabTypeLazyTreeAll({parentId,current,size,titleName}	)
      if (res.code === 200) {
        return res.data

      }
    },
    nodeClick(data,node){
          console.log(data,node,'treedata');
          this.curNode=node
          this.curTreeData=data
          this.treeId=data.id
          this.page.current=1;
          this.page.currentPage=1
          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
        }

      },


    refreshChange () {
      this.searchChange();
    },
     onLoad(page, params = {}){
      if(this.treeId){
        this.tabloading=true;
         this.tabTypeLazyTreeAll(this.treeId, page.currentPage,page.pageSize,this.input3).then((res)=>{
          this.loadData=res.records
           this.page.total=res.total
           this.tabloading=false
        })
      }
    },
    //编辑后刷新
    onLoad1(){
      if(this.curNode.level===1&&this.curNode.data.hasChildren){
        this.tabloading=true;
         this.tabTypeLazyTreeAll(this.treeId, this.page.current,this.page.size,this.input3).then((res)=>{
          this.loadData=res.records
           this.page.total=res.total
           this.tabloading=false
        })
      }else{

          this.tabTypeLazyTreeAll(this.curNode.data.parentId,this.page.current,1000,this.input3).then((res)=>{
           let faArr=res.records;
           this.loadData=faArr.filter((item)=>{
             if(item.id===this.treeId){
               return item
             }
           })
          })
      }
    },
        //搜索
    searchChange(){
     if(this.treeId){
           if(this.curTreeData.hasChildren){
            this.tabloading=true;
                this.tabTypeLazyTreeAll(this.curTreeData.id, this.page.current,this.page.size,this.input3).then((res)=>{
                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);
        }
      }else{
        //  this.$message.warning("请选选择左侧节点");
        if(this.input3){
           this.tabloading=true;
          this.tabTypeLazyTreeAll(this.curTreeData.id, this.page.current,this.page.size,this.input3).then((res)=>{
          this.loadData=res.records
          this.page.total=res.total
          this.tabloading=false;
        })
      }else{
          this.$message.warning("请输入你想搜索的表单名称");
      }
         
      }

    },
    clearinput(){
      this.searchChange()
    },
    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
        })
    },
    handleDelete () {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return delTabInfoAll(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);//刷新表格数据
           //刷新左边树形数据
          this.refreshTreeData()
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },
    // //刷新左边树形数据
    // refreshTreeData(){
    //   const parentId =12345678910
    //   tabTypeLazyTreeAll({parentId,current:1,siez:1000}).then(res => {
    //     this.treeData=res.data.data.records;
    //       this.$nextTick(()=>{
    //       //树默认展开
    //       if(this.curNode.level===1){
    //          this.treeOption.defaultExpandedKeys.push(this.curNode.data.id);
    //          this.$refs.avueTree.setCurrentKey(this.curNode.data.id)

    //       }else{
    //          this.treeOption.defaultExpandedKeys.push(this.curNode.data.parentId);
    //           // 设置选中的节点
    //           this.treeOption.currentNode =this.curNode.data.id
    //           this.$refs.avueTree.setCurrentKey(this.curNode.data.id)
    //       }

    //     })
    //   });
    // },
        //刷新左边树形数据
      refreshTreeData(){
      if(this.curNode.level===1){
         const parentId =12345678910
        tabTypeLazyTreeAll({parentId,current:1,size:1000}).then(res => {
            this.data=res.data.data.records;
             this.$nextTick(()=>{
              this.defaultExpandKey.push(this.curNode.data.id);
              this.$refs.avueTree.setCurrentKey(this.curNode.data.id);
            })
          });
      }else{

        this.updateTreeNewNode()
      }
    },
    //编辑元素表单信息
    updateTreeNewNode() {
      tabTypeLazyTreeAll(
       {parentId:this.curTreeData.parentId,current:1,size:1000}
      ).then((res) => {
          var resarr=  res.data.data.records.map(item=>{
            return{
              ...item,
              leaf: !item.hasChildren
            }
          })
        this.$refs.avueTree.updateKeyChildren(
         this.curTreeData.parentId,
        //  res.data.data.records
        resarr
        );
        this.$refs.avueTree.setCurrentKey(this.curNode.data.id);
      });
    },
    editElement (row) {
      console.log(row,'row');
      this.curEleTable = row;
      this.editEleloading=true
      selectPrivateFormElements(this.curEleTable.id).then((res) => {
           this.editEleloading=false
          res.data.data.forEach((element) => {
          this.eleReg.exec(element.eAllowDeviation);
          //console.log(RegExp.$1)
          //console.log(RegExp.$2)
          element.allow = RegExp.$1 ? RegExp.$1 : '';
          element.deviation = RegExp.$2 ? RegExp.$2 : '';
        })
        this.editEleList = res.data.data;
      })
      this.editEleVisible = true;
    },
      //修改数据类型，给个默认值
    setDefatableTypeultLength (row) {
      this.$set(row, 'eLength', this.dataTypeDefaultMap[row.eType]);
    },
    //分配节点
    distribution(row){
      console.log(row);
      this.from.id=row.id;
      this.from.title=row.title;
      this.from.tableType=row.tabType
      this.from.tableType=this.formatTableType(this.from.tableType);
      this.from.tableOwner=row.tabOwner
      this.from.tableOwner=this.formatOwner(this.from.tableOwner);
      this.$refs.PublicWbs.show();
    },

    saveNewEle (row) {
      if (!row.eName) {
        this.$message({
          type: "warning",
          message: "请填写元素名称"
        });
        return;
      }
      if (!row.eType) {
        this.$message({
          type: "warning",
          message: "请选择数据类型"
        });
        return;
      }

      row.eAllowDeviation = (row.allow ? row.allow : '') + (row.deviation ? row.deviation : '');
      row.fId = this.curEleTable.id;
      row.initTableName = this.curEleTable.initTableName;

      if (!row.eLength) {
        this.$message({
          type: "warning",
          message: "请填写长度"
        });
        return;
      }

      saveElement(row).then((res) => {
        if (res.data.data) {
          this.$set(row, 'id', res.data.data.id);
          this.$set(row, 'ekey', res.data.data.ekey);
          this.$message({
            type: "success",
            message: "保存成功!"
          });
        }
      })
    },
    saveEles () {
      for (let i = 0; i < this.editEleList.length; i++) {
        if (!this.editEleList[i].id) {
          this.$message({
            type: "warning",
            message: "请先将新增的元素点击保存"
          });
          return;
        }
        if (!this.editEleList[i].eName) {
          this.$message({
            type: "warning",
            message: "请填写第" + (i + 1) + "条元素名称"
          });
          return;
        }
        if (!this.editEleList[i].eType) {
          this.$message({
            type: "warning",
            message: "请选择第" + (i + 1) + "条数据类型"
          });
          return;
        }
        if ( !this.editEleList[i].eLength) {
          this.$message({
            type: "warning",
            message: "请填写第" + (i + 1) + "条长度"
          });
          return;
        }
      }
      if (this.editEleList.length > 0) {
        this.editEleList.forEach((element) => {
          element.eAllowDeviation = (element.allow ? element.allow : '') + (element.deviation ? element.deviation : '');
          // if (element.eType == 4) {
          //   this.$set(element, 'eLength', 0);
          //   //element.eLength = 0;
          // }
        })
        console.log(this.editEleList,'this.editEleList');
        updateBatchElements(this.editEleList, this.curEleTable.initTableName).then(() => {
          this.editEleVisible = false;
           this.onLoad1(this.page);
          this.$message({
            type: "success",
            message: "保存成功!"
          });
        })
      } else {
        this.editEleVisible = false;
         this.onLoad1(this.page);
        this.$message({
          type: "success",
          message: "保存成功!"
        });
      }
    },
    handleEditFormula ( row) {
       console.log(row,'row');
      this.curEleTable = row;
      getTableElments(this.curEleTable.initTableId).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;
      })
    },
        //跳转到公式配置页面
    toFormulaEdit(row,type) {
      this.formulaCurRow = row;
      this.formulaCurRow.globaltype = type;
      this.formulaCurRow.elementType = false;
      this.formulaCompVisible = true;
    },
    editele(){
      console.log('编辑元素表单信息');
        if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
       if (this.elemtData.length) {
        let da = []
        this.formDatass = [...this.selectionList];
        console.log(this.formDatass,'his.formDatass111');
        this.formDatass.forEach(val => {
          da.push({
            tableType: val.tabType,
            tableOwner: val.tabOwner,
            id: val.id,
            tableName: val.title,
            fillRate: val.fillRate,
          })
        })
        this.formDatass = da
        console.log(this.formDatass,'this.formDatass');
        let fa=[]
        this.formDatass.forEach(val=>{
             let newarr= this.tableTypelist.filter(e => e.dictValue===val.tableType);
             let newarr1= this.ownerTypeList.filter(e => e.dictValue===val.tableOwner);
              fa.push({
              tableType: newarr[0].dictKey,
              tableOwner: newarr1[0].dictKey,
              id: val.id,
              tableName: val.tableName,
              fillRate: val.fillRate,
            })
        })
        this.formDatass=fa
        this.editElementFormTag = true;

      }
    },
     getOwnerTypelist() {
      if (this.ownerTypeList.length > 1) {
        return;
      }
      getDictionary({
        code: "owner_type",
      }).then((res) => {
        res.data.data.forEach((element) => {
          element.dictKey = Number(element.dictKey);
        });
        this.ownerTypeList = res.data.data;
      });
    },
    getDataTypelist() {
      if (this.dataTypeList.length > 1) {
        return;
      }
      getDictionary({
        code: "data_type",
      }).then((res) => {
        res.data.data.forEach((element) => {
          element.dictKey = Number(element.dictKey);
        });
        this.dataTypeList = res.data.data;
      });
    },
    getTableTypelist() {
      if (this.tableTypelist.length > 1) {
        return;
      }
      getDictionary({
        code: "table_type",
      }).then((res) => {
        res.data.data.forEach((element) => {
          element.dictKey = Number(element.dictKey);
        });
        this.tableTypelist = res.data.data;
      });
    },

    editeditElementFormMF () {//保存按钮
      let da = []
      let tag = true
        console.log(this.tableTypelist,'tableTypelist');
      this.formDatass.forEach(val => {
        if (!val.tableName || !val.tableType || !val.tableOwner) {
          tag = false
          return
        } else {

          da.push({
            id: val.id,
            nodeName: val.tableName,
            tableType: val.tableType,
            tableOwner:val.tableOwner,
            fillRate: val.fillRate,
            Type:10
          })
        }
      })
      if (tag) {
        this.updateBatchNodeTableInfoElement(da)
      } else {
        this.$message({
          type: 'success',
          message: '请填写完整元素表单的所有信息!',
        })
      }
    },
    async updateBatchNodeTableInfoElement (da) {//共有编辑元素
    console.log(da,'编辑表单');
      const { data: res } = await updateBatchNodeTableInfoElement(da)
      if (res.code == 200) {
        this.$message.success('操作成功');
        this.editElementFormTag = false
        this.onLoad1(this.page);
      }
    },


    async excelType () {//清表类型
      const { data: res } = await excelType({ code: 'sys_excltab_type' })
      console.log(res);
      if (res.code === 200) {
        res.data.forEach(element => {
          element.dictKey = Number(element.dictKey)
        });
        this.exceltypeData = res.data
      }
    },


    //查看节点下已关联的元素表信息
    searchNodeTables(id) {
      searchNodeTables(id, this.from.id).then((res) => {
        if (res.data.data.length > 0) {
          res.data.data.forEach((val) => {
            if (val.isLinkTable == 2) {
              val.checknd = true;
            } else {
              val.checknd = false;
            }
            val.loading = false;
          });
          this.addTableData = res.data.data;
        } else {
          this.addTableData = [];
        }
      });
    },

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

<style scoped lang="scss">
.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% !important;
}
/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>