modified: .env.development modified: src/views/experiment/planAssignm...

zouyu

2023-09-06 154d53ca0f4c9a3f1a8433ae4d458f65a81341dc

 src/views/standardLibrary/index.vue

@@ -1,501 +1,688 @@
<template>
  <div class="standard-library-main">
    <div class="content-main">
      <div class="library-bom">
        <el-input
          v-model="filterText"
          placeholder="输入关键字进行过滤"
        />
        <el-button type="text">全部</el-button>
        <el-tree
          ref="tree"
          class="filter-tree"
          :data="standardTree"
          :props="defaultProps"
          node-key="id"
          highlight-current
          default-expand-all
          :filter-node-method="filterNode"
          :render-content="renderContent"
          @node-click="nodeClick"
        />
      </div>
      <div class="library-table">
        <div class="table-header">
          <div class="search-bar">
            <el-form ref="form" :inline="true" :model="searchData">
              <el-form-item>
                <el-input
                  v-model="searchData.keyword"
                  placeholder="请输入人员名称/原材料名称"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search" />
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="filteredTableData">查询</el-button>
                <el-button type="primary" plain @click="resetBtn">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="serve-btn">
            <el-button type="primary" icon="el-icon-plus" @click="addTreeFormVisible = true">新增</el-button>
          </div>
        </div>
        <div class="table-box">
          <el-table
            ref="tableData"
            row-key="id"
            max-height="680"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            :cell-style="{textAlign: 'left'}"
            :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'left'}"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              width="100px"
            >
              <template v-if="scope.row.index+1" slot-scope="scope">
                {{ scope.row.index+1 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="father"
              label="名称"
              width="320px"
            >
              <template slot-scope="scope">
                <el-tag size="mini" :type="scope.row.father? '':'success'" :style="{borderRadius: '40%',marginRight: '12px'}">{{ scope.row.father? '01':'02' }}</el-tag> {{ scope.row.father || scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column
              prop="unit"
              label="单位"
              width="300px"
            />
            <el-table-column
              prop="required"
              label="标准"
              width="300px"
            />
            <el-table-column
              prop="internal"
              label="内控制"
              width="300px"
            />
          </el-table>
          <!-- 弹出表单页 -->
          <div>
            <!--  -->
          </div>
          <div>
            <!-- 分页器 -->
            <el-pagination
              :current-page="pageParams.pageNo"
              :page-sizes="[10, 15, 20, 25]"
              :page-size="pageParams.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageParams.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
    <el-dialog class="addTree" title="添加指标" width="28%" :visible.sync="addTreeFormVisible" @close="closeAddTreeForm">
      <el-form v-model="addTreeForm" label-position="top">
        <el-form-item label="上级">
          <el-cascader
            v-model="addTreeForm.addTypeArr"
            :options="formTypeOptions"
            :props="{ ...defaultProps,checkStrictly: true }"
            clearable
            @change="changeCascader"
          />
        </el-form-item>
        <el-form-item v-show="addTreeForm.addTypeArr.length<2" label="物料名称">
          <el-input v-model="addTreeForm.materialName" />
        </el-form-item>
        <el-form-item v-show="addTreeForm.addTypeArr.length<3" label="执行标准">
          <el-input v-model="addTreeForm.standardName" />
        </el-form-item>
        <el-form-item v-show="addTreeForm.addTypeArr.length<4" label="规格型号">
          <el-input v-model="addTreeForm.specificationsName" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="subAddTreeForm">确 定</el-button>
        <el-button @click="addTreeFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
   <div class="standard-library-main">
      <div class="content-main">
         <div class="library-bom" style="width: 300px">
            <el-input clearable v-model="filterText" placeholder="输入关键字进行过滤"></el-input>
            <el-button type="text">全部</el-button>
            <el-tree ref="tree" style="width: 100%" class="filter-tree" :data="standardTree" :props="defaultProps"
               node-key="id" :highlight-current="true" :default-expand-all="true" :filter-node-method="filterNode"
               :render-content="renderContent" @node-click="nodeClick" />
         </div>
         <div class="library-table" style="width: 80%">
            <div class="table-header">
               <div class="serve-btn">
                  <span class="tipMsg">{{ msg !== "" ? msg : "" }}</span>
                  <el-select v-model="versionValue" @change="changeSelect" placeholder="请选择版本号">
                     <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                     </el-option>
                  </el-select>
                  <el-button type="primary" @click="addVersionFun">新增版本号</el-button>
                  <el-button type="primary" icon="el-icon-plus" @click="addTreeFormVisible = true">新增</el-button>
                  <el-button class="top_div_button" icon="el-icon-delete-solid" style="color: #00a5ff"
                     @click="deleteListClick">删除</el-button>
               </div>
            </div>
            <div class="table-box">
               <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border
                  height="calc(100vh - 250px)" default-expand-all ref="multipleTable" @select="selectTr"
                  @select-all="selectAll" @selection-change="handleSelectionChange"
                  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                  <el-table-column type="selection" label="序号"> </el-table-column>
                  <el-table-column type="index" width="50px" label="序号"></el-table-column>
                  <el-table-column label="项目名称" sortable>
                     <template scope="scope">
                        <el-tag>
                           <div class="firstDiv" :style="`color: ${
                      scope.row.code == '[1]' ? '#16a7ff' : '#58c173'
                    }`">
                              {{ scope.row.code == "[1]" ? "01" : "02" }}
                           </div>
                           <span style="color: black">{{ scope.row.name }}</span>
                        </el-tag>
                     </template>
                  </el-table-column>
                  <el-table-column prop="unit" label="单位" sortable></el-table-column>
                  <el-table-column label="标准值" sortable>
                     <template scope="scope">
                        <el-input v-if="scope.row.edit === true || scope.row.code === '[2]'" @blur="requiredOnfocus(scope)"
                           v-model="scope.row.required" placeholder="请输入标准值"></el-input>
                     </template>
                  </el-table-column>
                  <el-table-column prop="internal" label="内控值" sortable>
                     <template scope="scope">
                        <el-input v-if="scope.row.edit === true || scope.row.code === '[2]'" @blur="requiredOnfocus(scope)"
                           v-model="scope.row.internal" placeholder="请输入内控值"></el-input>
                     </template>
                  </el-table-column>
               </el-table>
               <!-- 弹出表单页 -->
               <div>
                  <!--  -->
               </div>
            </div>
         </div>
      </div>
      <el-dialog class="addTree" title="添加标准指标" width="28%" :visible.sync="addTreeFormVisible">
         <el-form v-model="addTreeForm" label-position="top">
            <el-form-item label="标准类型">
               <el-cascader  v-model="addTreeForm.addTypeArr" :options="formTypeOptions"
                  :props="{ ...defaultProps, checkStrictly: true }" clearable @change="changeCascader"/>
            </el-form-item>
            <el-form-item v-show="addTreeForm.addTypeArr.length < 2" label="物料名称">
               <el-input @change="changeSample" v-model="addTreeForm.materialName" />
            </el-form-item>
            <el-form-item v-show="addTreeForm.addTypeArr.length < 3" label="执行标准">
               <el-input  v-model="addTreeForm.standardName" />
            </el-form-item>
            <el-form-item v-show="addTreeForm.addTypeArr.length < 4" label="规格型号">
               <el-input  v-model="addTreeForm.specificationsName" />
            </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="subAddTreeForm">确 定</el-button>
            <el-button @click="clear">取 消</el-button>
         </div>
      </el-dialog>
   </div>
</template>

<script>
import { getMaterialList, getProductList, getProductSonList,
  addMaterial, addStandards, addSpecifications
} from '@/api/standardLibrary'
export default {
  data() {
    return {
      addTreeFormVisible: false,
      filterText: '',
      // 标准库bom树
      standardTree: [],
      // bom的,默认配置值
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id'
      },
      // 查询条件
      searchData: {
        keyword: ''
      },
      tableData: [
      ],
      oldtableData: [],
      // 分页参数
      pageParams: {
        pageNo: 1,
        pageSize: 12,
        total: 0
      },
      tablespecifications: [
      ],
      // 选中的节点数据
      selectData: {},
      formTypeOptions: [],
      addTreeForm: {
        addTypeArr: []
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getStandardTree()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 获取bom树的标准数据
    async getStandardTree() {
      const { data } = await getMaterialList()
      console.log(data)
      this.standardTree = data.map(item => {
        let name = null
        switch (item.type) {
          case 1:
            name = '原材料'
            break
          case 2:
            name = '半成品'
            break
          case 3:
            name = '成品'
            break
        }
        return {
          ...item, id: item.type, name
        }
      })
      console.log(this.standardTree)
      // formTypeOptions
      // 默认第一个四级节点搜索，新增配置项
      const treeOptions = JSON.parse(JSON.stringify(this.standardTree))
      this.getDefault(treeOptions, 0)
      console.log(treeOptions)
      this.formTypeOptions = treeOptions
      this.$nextTick().then(() => {
        const firstNode = document.querySelector('.el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node')
        firstNode.click()
        // console.log(firstNode)
      })
    },
    getDefault(arr, index) {
      for (const item of arr) {
        if (item.children && item.children?.length > 0) {
        // 有子节点
          this.getDefault(item.children, index + 1)
          if (index === 2) {
            item.children = null
          }
        }
        // else {
        //   // if ('children' in item) {
        //   //   //
        //   // } else {
        //   //   // console.log(index, item)
        //   // }
        // }
      }
    },
    // 点击bom树节点方法
    async nodeClick(data, node, element) {
      // console.log('data', data)
      // console.log('children' in data)
      // 是子节点
      if (node.level === 4) {
        // console.log(data, node)
        // 存下选中节点
        this.selectData = data
        // eslint-disable-next-line prefer-const
        this.getTableByClick(data)
      }
      if (!('children' in data)) {
        return
      }
    },
    async getTableByClick(data) {
      // eslint-disable-next-line prefer-const
      let { data: { row, total }} = await getProductList({ pageNo: this.pageParams.pageNo, pageSize: this.pageParams.pageSize, specificationsId: data.id })
      // console.log(row)
      this.pageParams.total = total
      row = row.map((item, index) => ({ ...item, index }))
      for (const item of row) {
        if (item.children) {
          const res = await getProductSonList({ fatherName: item.father })
          item.children = res.data
          item.id = item.father
        }
      }
      this.tableData = row
    },
    specificationDetails(row) {
      // 跳转产品规格详情页
      this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageParams.pageSize = val
      this.getTableByClick(this.selectData)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageParams.pageNo = val
      this.getTableByClick(this.selectData)
    },
    // 查询按钮
    filteredTableData() {
      this.oldtableData = this.tableData
      // 根据输入的关键字得到过滤后的数据，如果有就把过滤后的数据展示在页面上
      const filteredtabledata = this.tableData.filter(item => {
        return item.name.includes(this.searchData.keyword)
      })
      // console.log('filteredtabledata', filteredtabledata)
      this.tableData = filteredtabledata
    },
    // 重置按钮
    resetBtn() {
      this.searchData.keyword = ''
      this.tableData = this.oldtableData
    },
    renderContent(h, { node, data, store }) {
      // console.log('data', data)
      // console.log('node', node)
      // 判断是否是父节点或文件夹
      const isFolder = ('children') in data
      return (
        <span class='tree-node'>
          {isFolder ? (
            <i
              class={node.expanded ? 'el-icon-folder-opened blue-folder' : 'el-icon-folder blue-folder'}
            ></i>
          ) : (
            <i class='el-icon-document blue-folder'></i>
          )}
          <div class='tree-lable'>[{node.level}]  {data.name}</div>
        </span>
      )
    },
    async subAddTreeForm() {
      this.addTreeFormVisible = false
      console.log(this.addTreeForm.addTypeArr.length)
      let res = null
      try {
        switch (this.addTreeForm.addTypeArr.length) {
          case 1:
            console.log(this.addTreeForm)
            res = await addMaterial({ ...this.addTreeForm, type: this.addTreeForm.addTypeArr.pop() })
            break
          case 2:
            console.log(this.addTreeForm)
            res = await addStandards({ ...this.addTreeForm, materialId: this.addTreeForm.addTypeArr.pop() })
            break
          case 3:
            console.log(this.addTreeForm)
            res = await addSpecifications({ ...this.addTreeForm, standardId: this.addTreeForm.addTypeArr.pop() })
            break
        }
      } catch (error) {
        this.$message.error('添加失败')
      }
   import {
      getMaterialList,
      getProductList,
      addMaterial,
      addStandards,
      addSpecifications,
      deleteListApi,
      blurUpdateApi,
      getVersion,
      addVersion,
   } from "@/api/standardLibrary";

      console.log(res)
      this.$message.success('添加成功')
      this.addTreeForm = {}
      this.getStandardTree()
      this.getTableByClick(this.selectData)
    },
    changeCascader(data) {
      console.log(data)
      this.addTreeForm.addTypeArr = data
    },
    closeAddTreeForm() {
      this.addTreeForm = {
        addTypeArr: []
      }
      console.log(this.addTreeForm)
    }
    /** 表格某行点击事件 */
    // handleRowClick(row, column, event) {
    //   // 判断当前行是否有子集，若没有则结束处理
    //   // console.log(row)
    //   if (!row.children) return
    //   this.$refs.tableData.toggleRowExpansion(row)
    // }
  }
}
   import {
      selectproductModelApi
   } from "@/api/basicData/index";
   import {
      Tree
   } from "element-ui";
   export default {
      data() {
         return {
            filterNodeData: [],
            options: [],
            versionValue: "",
            deleteList: [],
            msg: "",
            isAllSelect: false,
            addTreeFormVisible: false,
            filterText: "",
            // 标准库bom树
            standardTree: [],
            // bom的,默认配置值
            defaultProps: {
               children: "children",
               label: "name",
               value: "id",
            },
            tableData: [],
            oldtableData: [],
            tablespecifications: [],
            // 选中的节点数据
            selectData: {},
            formTypeOptions: [],
            addTreeForm: {
               addTypeArr: [],
               specificationsName: ""
            }
         };
      },
      watch: {
         filterText(val) {
            this.$refs.tree.filter(val);
         },
         addTreeFormVisible(newVal){
            if(newVal === false){
               this.clear();
            }
         }
      },
      created() {
         this.getStandardTree();
      },
      mounted() {},
      methods: {
         clear(){
            this.addTreeFormVisible = false;
            this.addTreeForm.addTypeArr=[];
            this.addTreeForm.specificationsName='';
            this.addTreeForm.materialName=''
            this.addTreeForm.standardName=''
         },
         changeSample(){
            // console.log(this.standardTree);
            // console.log(this.addTreeForm);
            // console.log(this.addTreeForm.addTypeArr.length);
            let selectType=this.standardTree.filter(item=>{
               return item.id===this.addTreeForm.addTypeArr[0]
            })[0];
            if(this.addTreeForm.addTypeArr.length==1){
               let samples=selectType.children.filter(item=>{
                  return item.name===this.addTreeForm.materialName
               })[0]
               if(samples===undefined||samples===[]){
                  this.$message({
                            message: '请先在基础数据中添加该【'+this.addTreeForm.materialName+'】样品',
                            type: 'warning'
                       });
                   return false;
               }
            }
            return true
         },
         oneSize(){},
         twoSize(){
            return true;
         },
         threeSize(){
            return true;
         },
         async initSelect() {
            this.options = [];
            this.versionValue = "";
            const response = await getVersion({
               specificationsId: this.selectData.id,
            });
            if (response.code === 200 && response.data.length > 0) {
               this.getTableByClick(this.selectData, response.data[0]);
               for (let i = 0; i < response.data.length; i++) {
                  this.options.push({
                     value: response.data[i],
                     label: "V" + response.data[i],
                  });
                  this.versionValue = response.data[0];
               }
            }
         },
         changeSelect() {
            this.tableData = [];
            this.getTableByClick(this.selectData, this.versionValue);
         },
         async insertVersion() {
            const resp = await addVersion({
               specificationsId: this.selectData.id,
               version: this.versionValue
            });
            if (resp.code === 200) {
               this.initSelect();
               this.$message({
                  type: "success",
                  message: resp.message,
               });
            }
         },
         addVersionFun() {
            this.$confirm("确认添加新的版本号吗?", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
               })
               .then(() => {
                  this.insertVersion();
               })
               .catch(() => {});
         },
         filterNode(value, data,node) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
         },
         // 获取bom树的标准数据
         async getStandardTree() {
            let {
               data
            } = await getMaterialList();
            if (data.length < 2) {
               if (data.length == 0) {
                  data = [{
                     type: 0
                  }, {
                     type: 1
                  }]
               } else {
                  data[1] = {
                     type: data[0].type == 1 ? 0 : 1
                  }
               }
            }
            this.standardTree = data.map((item) => {
               let name = null;
               switch (item.type) {
                  case 0:
                     name = "原材料";
                     break;
                  case 1:
                     name = "成品";
                     break;
               }
               return {
                  ...item,
                  id: item.type,
                  name,
               };
            });
            // formTypeOptions
            // 默认第一个四级节点搜索，新增配置项
            const treeOptions = JSON.parse(JSON.stringify(this.standardTree));
            this.getDefault(treeOptions, 0);
            this.formTypeOptions = treeOptions;
            this.$nextTick().then(() => {
               const firstNode = document.querySelector(
                  ".el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node"
               );
               try {
                  firstNode.click();
               } catch (e) {
                  //TODO handle the exception
               }
            });

         },
         getDefault(arr, index) {
            for (const item of arr) {
               if (item.children && item.children?.length > 0) {
                  // 有子节点
                  this.getDefault(item.children, index + 1);
                  if (index === 2) {
                     item.children = null;
                  }
               }
            }
         },
         // 点击bom树节点方法
         async nodeClick(data, node, element) {
            // 是子节点
            if (node.level === 4) {
               this.getParentData(node.parent, node.data.name);
               // 存下选中节点
               this.selectData = data;
               this.getTableByClick(data, this.versionValue);
               this.initSelect();
            }
            if (!("children" in data)) {
               return;
            }
         },
         // 获取树路径
         getParentData(node, name) {
            if (node !== null) {
               if (node.data.name !== undefined) {
                  this.msg = node.data.name + " > " + name;
               }
               this.getParentData(node.parent, this.msg);
            }
         },
         async getTableByClick(data, versionVal) {
            await getProductList({
               specificationsId: data.id,
               version: versionVal,
            }).then((res) => {
               res.data.forEach((i) => {
                  if (i.name === undefined) {
                     i.name = i.children[0].name;
                     i.unit = i.children[0].unit;
                     i.id = i.children[0].id;
                     i.required = i.children[0].required;
                     i.internal = i.children[0].internal;
                     i.edit = true;
                     delete i.children;
                  }
               });
               this.tableData = res.data;
               this.selectDataList();
            });
         },
         specificationDetails(row) {
            // 跳转产品规格详情页
            this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`);
         },
         renderContent(h, {
            node,
            data,
            store
         }) {
            // 判断是否是父节点或文件夹
            const isFolder = "children" in data;
            return ( <span class="tree-node"> {
                  isFolder ? ( <i class = {node.expanded ?"el-icon-folder-opened blue-folder" : "el-icon-folder blue-folder"} ></i>
                  ) : ( <i class = "el-icon-document blue-folder" > </i>)
               } <div class = "tree-lable" > [{node.level}] {data.name} </div> </span>
            );
         },
         async subAddTreeForm() {
            if(this.addTreeForm.addTypeArr.length==0){
               this.$message({
                            message: '请先选择标准类型！',
                            type: 'warning'
                       });
               return
            }
            let handelerSample=this.changeSample()
            if(!handelerSample){
               return;
            }
            let res = null;
            try {
               switch (this.addTreeForm.addTypeArr.length) {
                  case 1:
                     res = await addMaterial({
                        ...this.addTreeForm,
                        type: this.addTreeForm.addTypeArr[0],
                     });
                     break;
                  case 2:
                     res = await addStandards({
                        ...this.addTreeForm,
                        materialId: this.addTreeForm.addTypeArr[1],
                     });
                     break;
                  case 3:
                     res = await addSpecifications({
                        ...this.addTreeForm,
                        standardId: this.addTreeForm.addTypeArr[2],
                     });
                     break;
               }
            } catch (error) {
               this.$message.error("添加失败");
            }
            this.$message.success("添加成功");
            this.addTreeFormVisible = false;
            this.getStandardTree();
            this.getTableByClick(this.selectData, this.versionValue);
            this.addTreeForm.addTypeArr=[];
            this.addTreeForm.specificationsName=''
            this.addTreeForm.materialName=''
            this.addTreeForm.standardName=''
            // console.log(this.addTreeForm);
         },
         changeCascader(data) {
            this.addTreeForm.addTypeArr = data;
         },
         selectProductModelTable() {
            selectproductModelApi(this.params).then((res) => {
               res.data.forEach((i) => {
                  if (i.name === undefined) {
                     i.name = i.children[0].name;
                     i.unit = i.children[0].unit;
                     i.id = i.children[0].id;
                     i.edit = true;
                     delete i.children;
                  }
               });
               this.tableData = res.data;
               this.selectDataList();
            });
         },
         selectDataList() {
            let i=0
            this.tableData.forEach((a) => {
               a.id="0"+i
               a.code = "[1]";
               i++;
               if (a.children != undefined) {
                  a.children.forEach((b) => {
                     b.code = "[2]";
                  });
               }
            });
         },
         // 表格树全部选中配置
         // 全选/取消选操作
         selectAll(val) {
            this.isAllSelect = !this.isAllSelect;
            let data = this.tableData;
            this.toggleSelect(data, this.isAllSelect, "all");
         },
         //选择某行
         selectTr(selection, row) {
            this.$set(row, "isChecked", !row.isChecked);
            this.$nextTick(() => {
               this.isAllSelect = row.isChecked;
               this.toggleSelect(row, row.isChecked, "tr");
            });
         },
         //递归子级
         toggleSelect(data, flag, type) {
            if (type === "all") {
               if (data.length > 0) {
                  data.forEach((item) => {
                     this.toggleSelection(item, flag);
                     if (item.children && item.children.length > 0) {
                        this.toggleSelect(item.children, flag, type);
                     }
                  });
               }
            } else {
               if (data.children && data.children.length > 0) {
                  data.children.forEach((item) => {
                     item.isChecked = !item.isChecked;
                     this.$refs.multipleTable.toggleRowSelection(item, flag);
                     this.toggleSelect(item, flag, type);
                  });
               }
            }
         },
         //改变选中
         toggleSelection(row, flag) {
            this.$set(row, "isChecked", flag);
            this.$nextTick(() => {
               if (flag) {
                  this.$refs.multipleTable.toggleRowSelection(row, flag);
               } else {
                  this.$refs.multipleTable.clearSelection();
               }
            });
         },
         handleSelectionChange(val) {
            this.deleteList = [];
            val.forEach((v) => {
               if (v.id !== undefined) {
                  this.deleteList.push(v.id);
               }
            });
         },
         // 表格树全部选中配置  结束
         deleteListClick() {
            if(this.deleteList.length==0){
               this.$message.error('请选择要删除的项目')
               return
            }
            deleteListApi(this.deleteList).then((res) => {
               this.$message({
                  message: res.message,
                  type: "success",
               });
               this.getTableByClick(this.selectData, this.versionValue);
            });
         },
         async requiredOnfocus(scope) {
            let obj = {
               id: scope.row.id,
               required: scope.row.required,
               internal: scope.row.internal,
            };

            await blurUpdateApi(obj).then((res) => {
               this.$message({
                  message: res.message,
                  type: "success",
               });
               this.getTableByClick(this.selectData, this.versionValue);
            });
         },
      },
   };
</script>

<style lang="scss" scoped>
   // el-table表格对齐
   ::v-deep .el-table__row:not([class*="el-table__row--level-"]) {
      td:nth-child(2) {
         padding-left: 23px !important;
      }
   }

// el-table表格对齐
::v-deep .el-table__row:not([class*="el-table__row--level-"]) {
  td:nth-child(2){
    padding-left: 23px !important;
  }
}
// .dialogform {
//   transform: translate(-50%, -50%);
//   top: 50% !important;
//   left: 50% !important;
//   width: 1000px;
//   height: 800px;
// }
.standard-library-main{
  width: 100vh;
  height: 100%;
// 页面中心内容区域
  .content-main{
    display: flex;
    height: 100%;
    min-height: calc(100vh - 88px);
    max-height: calc(100vh - 88px);
    padding: 15px;
    >div{
      padding: 20px;
      background: #fff;
    }
    .library-bom{
      padding-right: 10px;
      width: 40vh;
      // height: 100%;
      max-height: 100%;
      margin-right: 12px;
      // overflow-y: scroll;
      .el-tree {
        // margin-top: 12px;
        ::v-deep .el-tree-node__content{
          height: 24px !important;
          font-size: 18px;
          // display: inline-block !important;
          padding: 2px;
          // color: #333;
          .tree-node{
            display: flex;
            align-items: center;
            height: 20px;
          }
          .tree-lable{
            height: 100%;
            line-height: 23px;
            font-size: 12px;
            padding-left: 8px;
          }
          .blue-folder{
            color: rgb(64, 158, 255)
          }
        }
      }
      // .el-tree {
      //   margin-top: 12px;
      //   ::v-deep .el-tree-node__content{
      //     height: 24px !important;
      //     font-size: 14px;
      //     display: inline-block !important;
      //     padding: 2px;
      //     color: #333;
      //   }
      //   ::v-deep .el-tree-node__content:hover{
      //     background: rgba(58,124,253,0.1) ;
      //     // opacity: 0.31;
      //     border-radius: 3px;
      //     color: #333 !important;
      //   }
      //   ::v-deep .el-tree-node:focus>.el-tree-node__content{
      //     background: rgba(58,124,253,0.1) ;
      //     // opacity: 0.31;
      //     border-radius: 3px;
      //     color: #333 !important;
      //   }
      // }
    }
    .library-table{
      // height: 100%;
      width: 170vh;
      max-height: 100%;
      // flex: 8;
      margin-left: 12px;
      display: flex;
      flex-direction: column;
      // overflow-y: scroll;
      .table-header{
        display: flex;
        justify-content: space-between;
        .el-form-item{
          margin-bottom: 30px !important;
        }
      }
      .table-box{
          flex: 1;
          background: #fff;
          // padding: 20px 20px 10px 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
   .standard-library-main {
      width: 100vh;
      height: 100%;

          .el-table {
            // flex: 1;
            // max-height: 680px;
            // overflow-y: scroll;
          }
          >div:nth-child(3){
            // height: 20px;
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
      }
    }
  }
  .addTree{
    .el-form-item{
      margin-bottom: 10px;
    }
    .el-cascader{
      width: 100%;
    }
  }
}
</style>
      // 页面中心内容区域
      .content-main {
         display: flex;
         height: 100%;
         min-height: calc(100vh - 88px);
         max-height: calc(100vh - 88px);
         padding: 15px;

         >div {
            padding: 20px;
            background: #fff;
         }

         .library-bom {
            // padding-right: 10px;
            width: 300px;
            overflow-y: auto;
            // height: 100%;
            max-height: 100%;

            // margin-right: 12px;
            // overflow-y: scroll;
            .el-tree {
               // margin-top:
               width: 100%;

               ::v-deep .el-tree-node__content {
                  height: 24px !important;
                  font-size: 18px;
                  // display: inline-block !important;
                  padding: 2px;

                  // color: #333;
                  .tree-node {
                     display: flex;
                     align-items: center;
                     height: 20px;
                  }

                  .tree-lable {
                     height: 100%;
                     line-height: 23px;
                     font-size: 12px;
                     padding-left: 8px;
                  }

                  .blue-folder {
                     color: rgb(64, 158, 255);
                  }
               }
            }
         }

         .library-table {
            // height: 100%;
            width: 170vh;
            max-height: 100%;
            // flex: 8;
            margin-left: 12px;
            display: flex;
            flex-direction: column;

            // overflow-y: scroll;
            .table-header {
               display: flex;
               justify-content: space-between;
               width: 100%;

               .el-form-item {
                  margin-bottom: 30px !important;
               }
            }

            .table-box {
               flex: 1;
               background: #fff;
               // padding: 20px 20px 10px 20px;
               display: flex;
               flex-direction: column;
               justify-content: space-between;

               >div:nth-child(3) {
                  // height: 20px;
                  display: flex;
                  justify-content: end;
                  margin: 10px 0;
               }
            }
         }
      }

      .addTree {
         .el-form-item {
            margin-bottom: 10px;
         }

         .el-cascader {
            width: 100%;
         }
      }
   }

   .search-bar {
      .el-input {
         position: relative;
         font-size: 0.07292rem;
         display: inline-block;
         width: 70%;
      }
   }

   .firstDiv {
      float: left;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #eff5ff;
      margin-top: 5px;
      justify-content: center;
      display: flex;
      align-items: center;
      margin-right: 8px;
   }

   .el-tag.el-tag {
      border-color: transparent;
      background-color: transparent;
   }

   .el-tag.el-tag:hover {
      border-color: transparent;
      background-color: transparent;
   }

   .serve-btn {
      width: 100%;
      padding-bottom: 6px;
      text-align: right;

      .el-select {
         margin-right: 10px;
      }
   }

   .tipMsg {
      float: left;
      font-size: 16px;
      font-weight: 500;
      color: #999999;
   }
</style>