8-21基础数据完成

XiaoRuby

2023-08-22 73ae352a2cf79d802ce860c9a62e7334595b63e6

8-21基础数据完成

 .env.development

@@ -2,4 +2,4 @@
ENV = 'development'

# base api
VUE_APP_BASE_API = 'http://192.168.110.254:1234/'
VUE_APP_BASE_API = 'http://localhost:1234/'

 src/layout/components/AppMain.vue

@@ -1,28 +1,32 @@
<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <router-view ref="child" @triggerMainBtnPlan="triggerMainBtnPlan" :key="key" />
      <router-view
        ref="child"
        @triggerMainBtnPlan="triggerMainBtnPlan"
        :key="key"
      />
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  name: "AppMain",
  computed: {
    key() {
      return this.$route.path
    }
      return this.$route.path;
    },
  },
  methods: {
    childMethod(){
      this.$refs.child.combackLookPlan()    
    childMethod() {
      this.$refs.child.combackLookPlan();
    },
    triggerMainBtnPlan(){
      this.$parent.triggerCombackBtn()
    }
  }
}
    triggerMainBtnPlan() {
      this.$parent.triggerCombackBtn();
    },
  },
};
</script>

<style lang="scss" scoped>
@@ -32,16 +36,17 @@
  width: 100%;
  position: relative;
  overflow: hidden;
  >div{
  > div {
    min-height: calc(100vh - 88px);
    height: 100%;
    width: 100%;
  }
  ::v-deep .content-main{//这是所有页面的内边距
  ::v-deep .content-main {
    //这是所有页面的内边距
    padding: 24px !important;
  }
}
.fixed-header+.app-main {
.fixed-header + .app-main {
  padding-top: 50px;
}
</style>
@@ -53,7 +58,7 @@
    padding-right: 15px;
  }
}
.el-menu--popup{
.el-menu--popup {
  width: 120px;
}
</style>

 src/router/index.js

@@ -443,6 +443,20 @@
      }
    ]
  },
  {
    path: '/baseData',
    component: Layout,
    redirect: '/baseData/basicDataMessage',
    meta: { title: '基础数据', icon: 'el-icon-s-tools' },
    children: [
      {
        path: '/basicDataMessage',
        name: 'BasicDataMessage',
        component: () => import('@/views/basicData/index'),
        meta: { title: '基础数据', icon: 'el-icon-s-tools' }
      }
    ]
  },
  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

 src/utils/request.js

@@ -18,7 +18,7 @@
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['token'] = getToken()
      config.headers['X-Token'] = getToken()
    }
    config.headers['link'] = store.state.settings.link
    // console.log('config' ,config)

 src/views/standardLibrary/index.vue

@@ -1,15 +1,12 @@
<template>
  <div class="standard-library-main">
    <div class="content-main">
      <div class="library-bom" style="width: 300px;">
        <el-input
          v-model="filterText"
          placeholder="输入关键字进行过滤"
        />
      <div class="library-bom" style="width: 300px">
        <el-input v-model="filterText" placeholder="输入关键字进行过滤" />
        <el-button type="text">全部</el-button>
        <el-tree
          ref="tree"
          style="width: 100%;"
          style="width: 100%"
          class="filter-tree"
          :data="standardTree"
          :props="defaultProps"
@@ -21,11 +18,12 @@
          @node-click="nodeClick"
        />
      </div>
      <div class="library-table" style="width: 80%;">
      <div class="library-table" style="width: 80%">
        <div class="table-header">
          <div class="search-bar">
            <el-form ref="form" :inline="true" :model="searchData">
              <el-form-item>
                <span>原材料编码：</span>
                <el-input
                  v-model="searchData.keyword"
                  placeholder="请输入人员名称/原材料名称"
@@ -34,59 +32,116 @@
                </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>
                <span>原材料名称：</span>
                <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>
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="addTreeFormVisible = true"
              >新增</el-button
            >
            <el-button
              class="top_div_button"
              icon="el-icon-delete-solid"
              size="small"
              style="color: #00a5ff"
              @click="deleteListClick"
              >删除</el-button
            >
          </div>
        </div>
        <div class="table-box">
          <el-table
          <!-- <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'}"
            :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 }}
            <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"
            >
            <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 }}
                <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> -->
          <el-table
            :data="tableData"
            style="width: 100%; margin-bottom: 20px"
            row-key="name"
            border
            height="calc(100vh - 250px)"
            default-expand-all
            ref="multipleTable"
            @select="selectTr"
            @select-all="selectAll"
            :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="单位"
              width="300px"
            />
            <el-table-column
              prop="required"
              label="标准"
              width="300px"
            />
            <el-table-column
              prop="internal"
              label="内控制"
              width="300px"
            />
              sortable
            ></el-table-column>
          </el-table>
          <!-- 弹出表单页 -->
          <div>
@@ -94,7 +149,7 @@
          </div>
          <div>
            <!-- 分页器 -->
            <el-pagination
            <!-- <el-pagination
              :current-page="pageParams.pageNo"
              :page-sizes="[10, 15, 20, 25]"
              :page-size="pageParams.pageSize"
@@ -102,29 +157,44 @@
              :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-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 }"
            :props="{ ...defaultProps, checkStrictly: true }"
            clearable
            @change="changeCascader"
          />
        </el-form-item>
        <el-form-item v-show="addTreeForm.addTypeArr.length<2" label="物料名称">
        <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-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-form-item
          v-show="addTreeForm.addTypeArr.length < 4"
          label="规格型号"
        >
          <el-input v-model="addTreeForm.specificationsName" />
        </el-form-item>
      </el-form>
@@ -137,99 +207,110 @@
</template>

<script>
import { getMaterialList, getProductList, getProductSonList,
  addMaterial, addStandards, addSpecifications
} from '@/api/standardLibrary'
import {
  getMaterialList,
  getProductList,
  getProductSonList,
  addMaterial,
  addStandards,
  addSpecifications,
  deleteListApi,
} from "@/api/standardLibrary";

import { selectproductModelApi } from "@/api/basicData/index";
export default {
  data() {
    return {
      deleteList: [],
      addTreeFormVisible: false,
      filterText: '',
      filterText: "",
      // 标准库bom树
      standardTree: [],
      // bom的,默认配置值
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id'
        children: "children",
        label: "name",
        value: "id",
      },
      // 查询条件
      searchData: {
        keyword: ''
        keyword: "",
      },
      tableData: [
      ],
      tableData: [],
      oldtableData: [],
      // 分页参数
      pageParams: {
        pageNo: 1,
        pageSize: 12,
        total: 0
        total: 0,
      },
      tablespecifications: [
      ],
      tablespecifications: [],
      // 选中的节点数据
      selectData: {},
      formTypeOptions: [],
      addTreeForm: {
        addTypeArr: []
      }
    }
        addTypeArr: [],
      },
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getStandardTree()
    this.getStandardTree();
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
      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
      const { data } = await getMaterialList();
      console.log(data);
      this.standardTree = data.map((item) => {
        let name = null;
        switch (item.type) {
          case 1:
            name = '原材料'
            break
            name = "原材料";
            break;
          case 2:
            name = '半成品'
            break
            name = "半成品";
            break;
          case 3:
            name = '成品'
            break
            name = "成品";
            break;
        }
        return {
          ...item, id: item.type, name
        }
      })
      console.log(this.standardTree)
          ...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
      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()
        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)
          // 有子节点
          this.getDefault(item.children, index + 1);
          if (index === 2) {
            item.children = null
            item.children = null;
          }
        }
        // else {
@@ -247,117 +328,138 @@
      // console.log('children' in data)
      // 是子节点
      if (node.level === 4) {
        // console.log(data, node)
        console.log(data, node);
        // 存下选中节点
        this.selectData = data
        this.selectData = data;
        // eslint-disable-next-line prefer-const
        this.getTableByClick(data)
        this.getTableByClick(data);
      }
      if (!('children' in data)) {
        return
      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 })
      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 }))
      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
          const res = await getProductSonList({ fatherName: item.father });
          item.children = res.data;
          item.id = item.father;
        }
      }
      this.tableData = row
      this.tableData = row;
    },
    specificationDetails(row) {
      // 跳转产品规格详情页
      this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`)
      this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageParams.pageSize = val
      this.getTableByClick(this.selectData)
      console.log(`每页 ${val} 条`);
      this.pageParams.pageSize = val;
      this.getTableByClick(this.selectData);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageParams.pageNo = val
      this.getTableByClick(this.selectData)
      console.log(`当前页: ${val}`);
      this.pageParams.pageNo = val;
      this.getTableByClick(this.selectData);
    },
    // 查询按钮
    filteredTableData() {
      this.oldtableData = this.tableData
      this.oldtableData = this.tableData;
      // 根据输入的关键字得到过滤后的数据，如果有就把过滤后的数据展示在页面上
      const filteredtabledata = this.tableData.filter(item => {
        return item.name.includes(this.searchData.keyword)
      })
      const filteredtabledata = this.tableData.filter((item) => {
        return item.name.includes(this.searchData.keyword);
      });
      // console.log('filteredtabledata', filteredtabledata)
      this.tableData = filteredtabledata
      this.tableData = filteredtabledata;
    },
    // 重置按钮
    resetBtn() {
      this.searchData.keyword = ''
      this.tableData = this.oldtableData
      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
      const isFolder = "children" in data;
      return (
        <span class='tree-node'>
        <span class="tree-node">
          {isFolder ? (
            <i
              class={node.expanded ? 'el-icon-folder-opened blue-folder' : 'el-icon-folder blue-folder'}
              class={
                node.expanded
                  ? "el-icon-folder-opened blue-folder"
                  : "el-icon-folder blue-folder"
              }
            ></i>
          ) : (
            <i class='el-icon-document blue-folder'></i>
            <i class="el-icon-document blue-folder"></i>
          )}
          <div class='tree-lable'>[{node.level}]  {data.name}</div>
          <div class="tree-lable">
            [{node.level}] {data.name}
          </div>
        </span>
      )
      );
    },
    async subAddTreeForm() {
      this.addTreeFormVisible = false
      console.log(this.addTreeForm.addTypeArr.length)
      let res = null
      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
            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
            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
            console.log(this.addTreeForm);
            res = await addSpecifications({
              ...this.addTreeForm,
              standardId: this.addTreeForm.addTypeArr.pop(),
            });
            break;
        }
      } catch (error) {
        this.$message.error('添加失败')
        this.$message.error("添加失败");
      }

      console.log(res)
      this.$message.success('添加成功')
      this.addTreeForm = {}
      this.getStandardTree()
      this.getTableByClick(this.selectData)
      console.log(res);
      this.$message.success("添加成功");
      this.addTreeForm = {};
      this.getStandardTree();
      this.getTableByClick(this.selectData);
    },
    changeCascader(data) {
      console.log(data)
      this.addTreeForm.addTypeArr = data
      console.log(data);
      this.addTreeForm.addTypeArr = data;
    },
    closeAddTreeForm() {
      this.addTreeForm = {
        addTypeArr: []
      }
      console.log(this.addTreeForm)
    }
        addTypeArr: [],
      };
      console.log(this.addTreeForm);
    },
    /** 表格某行点击事件 */
    // handleRowClick(row, column, event) {
    //   // 判断当前行是否有子集，若没有则结束处理
@@ -365,15 +467,123 @@
    //   if (!row.children) return
    //   this.$refs.tableData.toggleRowExpansion(row)
    // }
  }
}
    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() {
      this.tableData.forEach((a) => {
        a.code = "[1]";
        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");
      // 自定义
      if (this.isAllSelect) {
        val.forEach((i) => {
          let isExist = false;
          this.deleteList.findIndex((c) => {
            if (c === i.id) {
              isExist = true;
            }
          });
          if (!isExist && i.id !== undefined) {
            this.deleteList.push(i.id);
          }
        });
      } else {
        this.deleteList.splice(0, this.deleteList.length);
      }
      // 自定义结束
    },
    //选择某行
    selectTr(selection, row) {
      this.$set(row, "isChecked", !row.isChecked);
      this.$nextTick(() => {
        this.isAllSelect = row.isChecked;
        this.toggleSelect(row, row.isChecked, "tr");
      });
      if (row.isChecked === true) {
        this.deleteList.push(row.id);
      } else if (row.isChecked === false) {
        this.deleteList.findIndex((c, index) => {
          if (c === row.id) {
            this.deleteList.splice(index, 1);
            return;
          }
        });
      }
      console.log(`output->this.deleteList`, this.deleteList);
    },
    //递归子级
    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();
        }
      });
    },
    // 表格树全部选中配置  结束
    deleteListClick() {
      deleteListApi(this.deleteList).then((res) => {
        this.$message({
          message: res.message,
          type: "success",
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>

// el-table表格对齐
::v-deep .el-table__row:not([class*="el-table__row--level-"]) {
  td:nth-child(2){
  td:nth-child(2) {
    padding-left: 23px !important;
  }
}
@@ -384,21 +594,21 @@
//   width: 1000px;
//   height: 800px;
// }
.standard-library-main{
.standard-library-main {
  width: 100vh;
  height: 100%;
// 页面中心内容区域
  .content-main{
  // 页面中心内容区域
  .content-main {
    display: flex;
    height: 100%;
    min-height: calc(100vh - 88px);
    max-height: calc(100vh - 88px);
    padding: 15px;
    >div{
    > div {
      padding: 20px;
      background: #fff;
    }
    .library-bom{
    .library-bom {
      // padding-right: 10px;
      width: 300px;
      // height: 100%;
@@ -406,27 +616,27 @@
      // margin-right: 12px;
      // overflow-y: scroll;
      .el-tree {
        // margin-top: 
        // margin-top:
        width: 100%;
        ::v-deep .el-tree-node__content{
        ::v-deep .el-tree-node__content {
          height: 24px !important;
          font-size: 18px;
          // display: inline-block !important;
          padding: 2px;
          // color: #333;
          .tree-node{
          .tree-node {
            display: flex;
            align-items: center;
            height: 20px;
          }
          .tree-lable{
          .tree-lable {
            height: 100%;
            line-height: 23px;
            font-size: 12px;
            padding-left: 8px;
          }
          .blue-folder{
            color: rgb(64, 158, 255)
          .blue-folder {
            color: rgb(64, 158, 255);
          }
        }
      }
@@ -453,7 +663,7 @@
      //   }
      // }
    }
    .library-table{
    .library-table {
      // height: 100%;
      width: 170vh;
      max-height: 100%;
@@ -462,40 +672,40 @@
      display: flex;
      flex-direction: column;
      // overflow-y: scroll;
      .table-header{
      .table-header {
        display: flex;
        justify-content: space-between;
        .el-form-item{
        .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;
      .table-box {
        flex: 1;
        background: #fff;
        // padding: 20px 20px 10px 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

          .el-table {
            // flex: 1;
            // max-height: 680px;
            // overflow-y: scroll;
          }
          >div:nth-child(3){
            // height: 20px;
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
        .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{
  .addTree {
    .el-form-item {
      margin-bottom: 10px;
    }
    .el-cascader{
    .el-cascader {
      width: 100%;
    }
  }