From 95fda13c28cb664a57336dd2e01d5b41ec4f717f Mon Sep 17 00:00:00 2001
From: 王震 <10952869+daywangzhen@user.noreply.gitee.com>
Date: 星期五, 25 八月 2023 12:57:19 +0800
Subject: [PATCH] 查看详情页

---
 src/views/standardLibrary/index.vue | 1104 ++++++++++++++++++++++++++++-----------------------------
 1 files changed, 542 insertions(+), 562 deletions(-)

diff --git a/src/views/standardLibrary/index.vue b/src/views/standardLibrary/index.vue
index 7e0ba8b..6070828 100644
--- a/src/views/standardLibrary/index.vue
+++ b/src/views/standardLibrary/index.vue
@@ -1,670 +1,650 @@
 <template>
   <div class="standard-library-main">
     <div class="content-main">
-      <div class="library-bom">
+      <div class="library-bom" style="width: 300px">
         <el-input
           v-model="filterText"
           placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�"
-        />
-        <el-button type="text" @click="getAllStandard">鍏ㄩ儴</el-button>
+        ></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
           default-expand-all
           :filter-node-method="filterNode"
+          :render-content="renderContent"
           @node-click="nodeClick"
         />
       </div>
-      <div class="library-table">
+      <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>
-                <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-button type="text">楂樼骇鎼滅储<i class="el-icon-arrow-down el-icon--right" /></el-button> -->
-              </el-form-item>
-            </el-form>
-          </div>
           <div class="serve-btn">
-            <el-button type="primary" icon="el-icon-plus" @click="showFormInfo">{{ selectedNodeType }}</el-button>
+            <span class="tipMsg">{{ msg !== "" ? msg : "" }}</span>
+            <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
-            ref="tableData"
-            :cell-style="{textAlign: 'center'}"
-            :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
             :data="tableData"
-            style="width: 100%"
+            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="搴忓彿"
-              min-width="50"
-            />
-            <!-- 澶嶇敤 -->
-            <el-table-column
-              v-for="(item,index) in tablespecifications"
-              :key="index"
-              :prop="item.prop"
-              :label="item.label"
-              :min-width="item.minWidth"
-            />
-            <template v-if="showTableCurrent===2">
-              <el-table-column
-                prop="spe_state"
-                label="鐘舵��"
-                min-width="150"
-              >
-                <template slot-scope="scope">
-                  <el-tag
-                    :type="scope.row.spe_state === 0 ? 'primary' : 'success'"
-                    disable-transitions
-                  >{{ scope.row.spe_state === 0 ? '宸插仠鐢�' : '宸插惎鐢�' }}</el-tag>
-                </template>
-              </el-table-column>
-              <el-table-column
-                label="鎿嶄綔"
-                min-width="150"
-              >
-                <template slot-scope="scope">
-                  <el-button
-                    type="text"
-                    size="small"
-                    :style="{marginRight:'8px'}"
-                    @click="specificationDetails(scope.row)"
-                  >鏌ョ湅</el-button>
-                  <el-popover
-                    v-model="scope.row.visible"
-                    placement="top"
-                    width="30"
+            ></el-table-column>
+            <el-table-column label="椤圭洰鍚嶇О" sortable>
+              <template scope="scope">
+                <el-tag
+                  ><div
+                    class="firstDiv"
+                    :style="`color: ${
+                      scope.row.code == '[1]' ? '#16a7ff' : '#58c173'
+                    }`"
                   >
-                    <div @click=" getRowID(scope.row)" style="text-align: center; margin: 0">
-                      <div>
-                        <el-button size="mini" @click="dialogFormVisible4=true" type="text">缂栬緫</el-button>
-                      </div>
-                      <div>
-                        <el-button size="mini" @click="dialogFormVisible5 = true" type="text">鍋滅敤</el-button>
-                      </div>
-                    </div>
-                    <el-button slot="reference" type="text"><i class="el-icon-more" /></el-button>
-                  </el-popover>
-                </template>
-              </el-table-column>
-            </template>
+                    {{ 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>
-            <!-- 娣诲姞鏍囧噯 -->
-            <el-dialog title="娣诲姞鏍囧噯" :visible.sync="dialogFormVisible1">
-              <el-form ref="standardForm" :model="standardForm" :rules="rulesStandard">
-                <el-form-item label="鏍囧噯鍙�" :label-width="formLabelWidth" prop="standardnumber">
-                  <el-input v-model="standardForm.standardnumber" autocomplete="off" />
-                </el-form-item>
-                <el-form-item label="鏍囧噯鍚嶇О" :label-width="formLabelWidth" prop="standardname">
-                  <el-input v-model="standardForm.standardname" autocomplete="off" />
-                </el-form-item>
-                <el-form-item label="鑻辨枃鍚嶇О" :label-width="formLabelWidth" prop="standardenname">
-                  <el-input v-model="standardForm.engname" autocomplete="off" />
-                </el-form-item>
-                <el-form-item label="鐖剁骇鍒嗙被" :label-width="formLabelWidth">
-                  <el-select v-model="standardForm.type" placeholder="璇烽�夋嫨">
-                    <el-option label="鍘熸潗鏂�" value="0" />
-                    <el-option label="鐢电嚎鐢电紗" value="1" />
-                  </el-select>
-                </el-form-item>
-              </el-form>
-              <div slot="footer" class="dialog-footer">
-                <el-button @click="dialogFormVisible1 = false">鍙� 娑�</el-button>
-                <el-button type="primary" @click="submitForm">纭� 瀹�</el-button>
-              </div>
-            </el-dialog>
-            <!-- 娣诲姞鍨嬪彿 -->
-            <el-dialog title="娣诲姞鍨嬪彿" :visible.sync="dialogFormVisible2">
-              <el-form ref="form" :model="modelForm" :rules="rulesModel">
-                <el-form-item label="鍨嬪彿" :label-width="formLabelWidth" prop="model">
-                  <el-input v-model="modelForm.model" autocomplete="off" />
-                </el-form-item>
-                <el-form-item label="鍨嬪彿鍚嶇О" :label-width="formLabelWidth" prop="modelname">
-                  <el-input v-model="modelForm.modelname" autocomplete="off" />
-                </el-form-item>
-              </el-form>
-              <div slot="footer" class="dialog-footer">
-                <el-button @click="dialogFormVisible2 = false">鍙� 娑�</el-button>
-                <el-button type="primary" @click="submitForm()">纭� 瀹�</el-button>
-              </div>
-            </el-dialog>
-            <!-- 娣诲姞瑙勬牸 -->
-            <el-dialog title="娣诲姞瑙勬牸" :visible.sync="dialogFormVisible3">
-              <el-form ref="form" :model="specificationForm" :rules="rulesspecification">
-                <el-form-item label="瑙勬牸鍚嶇О" :label-width="formLabelWidth" prop="name">
-                  <el-input v-model="specificationForm.name" autocomplete="off" />
-                </el-form-item>
-                <el-form-item label="瑙勬牸缂栧彿" :label-width="formLabelWidth" prop="number">
-                  <el-input v-model="specificationForm.number" autocomplete="off" />
-                </el-form-item>
-                <el-form-item label="涓婃柟濉啓鐢熶骇鎸囦护鍙�" :label-width="formLabelWidth" prop="instruct">
-                  <el-input v-model="specificationForm.instruct" autocomplete="off" />
-                </el-form-item>
-                <el-form-item label="鐢靛帇绛夌骇" :label-width="formLabelWidth">
-                  <el-select v-model="specificationForm.voltageLevel" placeholder="璇烽�夋嫨鐢靛帇绛夌骇">
-                    <el-option label="鍒嗙被1" value="test" />
-                    <el-option label="鍒嗙被2" value="2" />
-                    <el-option label="鍒嗙被3" value="3" />
-                  </el-select>
-                </el-form-item>
-                <el-form-item label="涓荤嚎鑺埅闈�" :label-width="formLabelWidth">
-                  <el-select v-model="specificationForm.crossSection" placeholder="璇烽�夋嫨涓荤嚎鑺埅闈�">
-                    <el-option label="鍒嗙被1" value="test" />
-                    <el-option label="鍒嗙被2" value="2" />
-                    <el-option label="鍒嗙被3" value="3" />
-                  </el-select>
-                </el-form-item>
-                <el-form-item label="涓荤嚎鑺姱鏁�" :label-width="formLabelWidth">
-                  <el-select v-model="specificationForm.numberOfCores" placeholder="璇烽�夋嫨涓荤嚎鑺姱鏁�">
-                    <el-option label="鍒嗙被1" value="test" />
-                    <el-option label="鍒嗙被2" value="2" />
-                    <el-option label="鍒嗙被3" value="3" />
-                  </el-select>
-                </el-form-item>
-              </el-form>
-              <div slot="footer" class="dialog-footer">
-                <el-button @click="dialogFormVisible3 = false">鍙� 娑�</el-button>
-                <el-button type="primary" @click="submitForm()">纭� 瀹�</el-button>
-              </div>
-            </el-dialog>
-            <!-- 缂栬緫瑙勬牸 -->
-            <el-dialog title="缂栬緫瑙勬牸" :visible.sync="dialogFormVisible4">
-              <el-form ref="form" :model="editSpeForm" :rules="rulesspecification">
-                <el-form-item label="瑙勬牸鍚嶇О" :label-width="formLabelWidth" prop="name">
-                  <el-input v-model="editSpeForm.name" autocomplete="off" />
-                </el-form-item>
-                <el-form-item label="瑙勬牸缂栧彿" :label-width="formLabelWidth" prop="number">
-                  <el-input v-model="editSpeForm.number" autocomplete="off" />
-                </el-form-item>
-                <el-form-item label="涓婃柟濉啓鐢熶骇鎸囦护鍙�" :label-width="formLabelWidth" prop="instruct">
-                  <el-input v-model="editSpeForm.instruct" autocomplete="off" />
-                </el-form-item>
-                <el-form-item label="鐢靛帇绛夌骇" :label-width="formLabelWidth">
-                  <el-select v-model="editSpeForm.voltageLevel" placeholder="璇烽�夋嫨鐢靛帇绛夌骇">
-                    <el-option label="鍒嗙被1" value="test" />
-                    <el-option label="鍒嗙被2" value="2" />
-                    <el-option label="鍒嗙被3" value="3" />
-                  </el-select>
-                </el-form-item>
-                <el-form-item label="涓荤嚎鑺埅闈�" :label-width="formLabelWidth">
-                  <el-select v-model="editSpeForm.crossSection" placeholder="璇烽�夋嫨涓荤嚎鑺埅闈�">
-                    <el-option label="鍒嗙被1" value="test" />
-                    <el-option label="鍒嗙被2" value="2" />
-                    <el-option label="鍒嗙被3" value="3" />
-                  </el-select>
-                </el-form-item>
-                <el-form-item label="涓荤嚎鑺姱鏁�" :label-width="formLabelWidth">
-                  <el-select v-model="editSpeForm.numberOfCores" placeholder="璇烽�夋嫨涓荤嚎鑺姱鏁�">
-                    <el-option label="鍒嗙被1" value="test" />
-                    <el-option label="鍒嗙被2" value="2" />
-                    <el-option label="鍒嗙被3" value="3" />
-                  </el-select>
-                </el-form-item>
-                <el-form-item label="瑙勬牸鐘舵��" :label-width="formLabelWidth">
-                  <el-select v-model="editSpeForm.spe_state" placeholder="璇烽�夋嫨瑙勬牸鐘舵��">
-                    <el-option label="鍋滅敤" value="0" />
-                    <el-option label="姝e父" value="1" />
-                    <el-option label="鑽夌" value="-1" />
-                  </el-select>
-                </el-form-item>
-              </el-form>
-              <div slot="footer" class="dialog-footer">
-                <el-button @click="dialogFormVisible4 = false">鍙� 娑�</el-button>
-                <el-button type="primary" @click="handleEdit">纭� 瀹�</el-button>
-              </div>
-            </el-dialog>
-            <!-- 鍋滅敤 -->
-            <el-dialog
-              title="鎻愮ず"
-              :visible.sync="dialogFormVisible5"
-              width="30%">
-              <span>纭鍋滅敤鍚楋紵</span>
-              <span slot="footer" class="dialog-footer">
-                <el-button @click="dialogFormVisible5 = false">鍙� 娑�</el-button>
-                <el-button type="primary" @click="updateSpeState">纭� 瀹�</el-button>
-              </span>
-            </el-dialog>
-          </div>
-          <div>
-            <!-- 鍒嗛〉鍣� -->
-            <el-pagination
-              :current-page="pageParams.pageNo"
-              :page-sizes="[10, 15, 20, 25]"
-              :page-size="pageParams.pageNo"
-              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>
 </template>
 
 <script>
-import { getStandardsList, getSerialNumberList, getSpecificationsList, getStandardsListOfPage, addStandards, addSerialNumber, addSpecifications, updateSpecifications, updateSpeState } from '@/api/standardLibrary'
+import {
+  getMaterialList,
+  getProductList,
+  addMaterial,
+  addStandards,
+  addSpecifications,
+  deleteListApi,
+  blurUpdateApi,
+} from "@/api/standardLibrary";
+
+import { selectproductModelApi } from "@/api/basicData/index";
 export default {
   data() {
     return {
-      dialogFormVisible1: false,
-      dialogFormVisible2: false,
-      dialogFormVisible3: false,
-      dialogFormVisible4: false,
-      dialogFormVisible5: false,
-      visible: false,
-      filterText: '',
+      deleteList: [],
+      msg: "",
+      isAllSelect: false,
+      addTreeFormVisible: false,
+      filterText: "",
       // 鏍囧噯搴揵om鏍�
       standardTree: [],
-      // bom鐨�,榛樿鍊�
+      // bom鐨�,榛樿閰嶇疆鍊�
       defaultProps: {
-        children: 'children',
-        label: 'label'
+        children: "children",
+        label: "name",
+        value: "id",
       },
-      // 鏌ヨ鏉′欢
-      searchData: {
-        keyword: ''
-      },
-      tableData: [
-      ],
+      tableData: [],
       oldtableData: [],
-      // 鍒嗛〉鍙傛暟
-      pageParams: {
-        pageNo: 1,
-        pageSize: 10,
-        total: 0
-      },
-      tablespecifications: [
-      ],
-      // 閫変腑鑺傜偣瀵瑰簲鐨勮〃鏍� 0 鏄爣鍑嗚〃 1鏄瀷鍙疯〃 2瑙勬牸琛�
-      showTableCurrent: 0,
+      tablespecifications: [],
       // 閫変腑鐨勮妭鐐规暟鎹�
-      selectNode: {},
-      selectedNodeType: '娣诲姞鏍囧噯',
-      standardForm: [{
-        standardnumber: '',
-        standardname: '',
-        engname: '',
-        type: ''
-      }],
-      modelForm: [{
-        model: '',
-        modelname: ''
-      }],
-      specificationForm: [{
-        name: '', // 浜у搧瑙勬牸鍚嶇О
-        number: '', // 瑙勬牸缂栧彿
-        crossSection: '',
-        numberOfCores: '',
-        instruct: '',
-        voltageLevel: ''
-      }],
-      editSpeForm: [{
-        crossSection: '',
-        instruct: '',
-        name: '', // 瑙勬牸鍚嶇О
-        number: '', // 瑙勬牸缂栧彿
-        numberOfCores: '',
-        serialId: '', // 鍨嬪彿ID
-        spe_state: '',
-        voltageLevel: ''
-      }],
-      formLabelWidth: '120',
-      rulesStandard: {
-        standardnumber: [
-          {
-            required: true, message: '璇疯緭鍏ユ爣鍑嗗彿', trigger: 'blur'
-          }
-        ],
-        standardname: [{
-          required: true, message: '璇疯緭鍏ユ爣鍑嗗悕绉�', trigger: 'blur'
-        }],
-        standardenname: [
-          { required: false, message: '璇疯緭鍏ヨ嫳鏂囧悕绉�', trigger: 'blur' }
-        ]
+      selectData: {},
+      formTypeOptions: [],
+      addTreeForm: {
+        addTypeArr: [],
       },
-      rulesModel: {
-        model: [
-          { required: true, message: '璇疯緭鍏ュ瀷鍙�', trigger: 'blur'
-          }],
-        modelname: [{
-          required: true, message: '璇疯緭鍏ュ瀷鍙峰悕绉�', trigger: 'blur'
-        }],
-        parentclassification: [
-          { required: true, message: '璇疯緭鍏�', trigger: 'blur' }
-        ]
-      },
-      rulesspecification: {
-        number: [
-          { required: true, message: '璇疯緭鍏ヨ鏍肩紪鍙�', trigger: 'blur'
-          }],
-        name: [{
-          required: true, message: '璇疯緭鍏ヨ鏍煎悕绉�', trigger: 'blur'
-        }],
-        instruct: [
-          { required: true, message: '璇疯緭鍏ヤ笂鏂瑰~鍐欑敓浜ф寚浠ゅ彿', trigger: 'blur' }
-        ]
-      },
-      standardId: '', // 鑾峰彇褰撳墠鏍囧噯ID
-      modelId: '', // 鑾峰彇褰撳墠鍨嬪彿ID
-      rowId: '' // 鑾峰彇褰撳墠瑙勬牸鎵�鍦ㄨID
-    }
+    };
   },
   watch: {
     filterText(val) {
-      this.$refs.tree.filter(val)
-    }
+      this.$refs.tree.filter(val);
+    },
   },
   created() {
-    this.getStandardTree()
-    this.getAllStandard()
+    this.getStandardTree();
   },
   methods: {
     filterNode(value, data) {
-      if (!value) return true
-      return data.label.indexOf(value) !== -1
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
     },
     // 鑾峰彇bom鏍戠殑鏍囧噯鏁版嵁
     async getStandardTree() {
-      this.selectedNodeType = '娣诲姞鏍囧噯'
-      const { data: standard } = await getStandardsList()// 鑾峰彇鎵�鏈夋爣鍑�
-      // console.log(standard)// 鑾峰彇鎵�鏈夋爣鍑�
-      this.standardTree = standard.map(item => {
-        item.serialNumber = item.serialNumber?.map(childrenItem => ({ ...childrenItem, label: childrenItem.name }))
-        return { ...item, label: item.name, children: item.serialNumber }
-      })
-      // console.log(this.standardTree)
+      const { data } = await getMaterialList();
+      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"
+        );
+        firstNode.click();
+      });
+    },
+    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) {
-      // console.log('data', data)
-      // console.log('children' in data)
       // 鏄瓙鑺傜偣
-      if (!('children' in data)) {
-        // console.log('鐐瑰嚮瀛愯妭鐐�', data)
-        this.selectedNodeType = '娣诲姞瑙勬牸'
-        this.modelId = data.id
-        this.selectNode = data
-        // 鑾峰彇鐐瑰嚮瀛愯妭鐐圭殑琛ㄦ牸
-        await this.getSpecifications(data)
-        return
+      if (node.level === 4) {
+        this.getParentData(node.parent, node.data.name);
+        // 瀛樹笅閫変腑鑺傜偣
+        this.selectData = data;
+        this.getTableByClick(data);
       }
-      // 涓嶆槸瀛愯妭鐐�
-      this.selectedNodeType = '娣诲姞鍨嬪彿'
-      this.standardId = data.id
-      this.selectNode = data
-      await this.getSerialNumber(data)
+      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) {
+      await getProductList({
+        specificationsId: data.id,
+      }).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}`)
+      this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`);
     },
-    getRowID(row) {
-      // console.log(row.id)
-      this.id = row.id
+    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>
+      );
     },
-    // 鑾峰彇鎵�鏈夋爣鍑唗able
-    async getAllStandard() {
-      this.selectedNodeType = '娣诲姞鏍囧噯'
-      // console.log(this.pageParams)
-      const { data: { row, total }} = await getStandardsListOfPage({ ...this.pageParams })
-      // console.log('寰楀埌鎵�鏈夋爣鍑�==>', row)
-      this.pageParams.total = total
-      this.tableData = row
-      this.tablespecifications = [
-        {
-          prop: 'name',
-          label: '鏍囧噯鍚嶇О',
-          minWidth: '150px'
-        },
-        {
-          prop: 'eng_name',
-          label: '鏍囧噯鑻辨枃鍚嶇О',
-          minWidth: '150px'
-        },
-        {
-          prop: 'createTime',
-          label: '鍒涘缓鏃堕棿',
-          minWidth: '150px'
+    async subAddTreeForm() {
+      this.addTreeFormVisible = false;
+      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;
         }
-      ]
-      this.showTableCurrent = 0
-    },
-    // 鑾峰彇瀵瑰簲鍨嬪彿涓嬬殑鎵�鏈夎鏍�
-    async getSerialNumber(data) {
-      const { data: { row, total }} = await getSerialNumberList({ standardsId: data.id, ...this.pageParams })
-      console.log('鐐瑰嚮鐖惰妭鐐�', row)// 鏍规嵁鏍囧噯鑾峰彇瀵瑰簲鏍囧噯涓嬬殑瑙勬牸
-      this.tableData = row
-      this.pageParams.total = total
-      this.tablespecifications = [
-        {
-          prop: 'name',
-          label: '鍨嬪彿鍚嶇О',
-          minWidth: '150px'
-        }
-      ]
-      this.showTableCurrent = 1
-    },
-    // 鑾峰彇鏍囧噯涓嬪搴旂殑鎵�鏈夊瀷鍙�
-    async getSpecifications(data) {
-      const { data: { row, total }} = await getSpecificationsList({ serialNumberId: data.id, ...this.pageParams })
-      // console.log(row)
-      this.tableData = row
-      this.pageParams.total = total
-      this.tablespecifications = [
-        {
-          prop: 'name',
-          label: '浜у搧鍚嶇О',
-          minWidth: '150px'
-        },
-        {
-          prop: 'username',
-          label: '鏇存柊浜�',
-          minWidth: '100px'
-        },
-        {
-          prop: 'updateTime',
-          label: '鏇存柊鏃堕棿',
-          minWidth: '150px'
-        },
-        {
-          prop: 'vel',
-          label: '鐗堟湰',
-          minWidth: '150px'
-        }
-      ]
-      this.showTableCurrent = 2
-    },
-    // 灞曠ず寮瑰嚭妗�
-    showFormInfo() {
-      if (this.selectedNodeType === '娣诲姞鏍囧噯') {
-        this.dialogFormVisible1 = true
-      } else if (this.selectedNodeType === '娣诲姞鍨嬪彿') {
-        this.dialogFormVisible2 = true
-      } else {
-        this.dialogFormVisible3 = true
+      } catch (error) {
+        this.$message.error("娣诲姞澶辫触");
       }
-    },
-    async submitForm() {
-      if (this.showTableCurrent === 0) {
-        await addStandards({ engName: this.standardForm.engname,
-          id: this.standardForm.standardnumber,
-          name: this.standardForm.standardname,
-          type: parseInt(this.standardForm.type) })
-        this.dialogFormVisible1 = false
-      } else if (this.showTableCurrent === 1) {
-        await addSerialNumber({ id: this.modelForm.model,
-          name: this.modelForm.modelname,
-          standardsId: this.standardId // 鍏宠仈鏍囧噯ID
-        })
-        this.dialogFormVisible2 = false
-      } else {
-        await addSpecifications({ crossSection: this.specificationForm.crossSection,
-          instruct: this.specificationForm.instruct,
-          name: this.specificationForm.name,
-          number: this.specificationForm.number,
-          numberOfCores: this.specificationForm.numberOfCores,
-          serialId: this.modelId, // 鍏宠仈鍨嬪彿ID
-          voltageLevel: this.specificationForm.voltageLevel
-        })
-        this.dialogFormVisible3 = false
-      }
-    },
 
-    // 鍒嗛〉鏉′欢鏀瑰彉鏃跺垽鏂渶瑕佸垎椤垫煡璇㈢殑鏂规硶
-    judgment() {
-      switch (this.showTableCurrent) {
-        case 0:
-          this.getAllStandard()
-          break
-        case 1:
-          this.getSerialNumber(this.selectNode)
-          break
-        case 2:
-          this.getSpecifications(this.selectNode)
-          break
+      console.log(res);
+      this.$message.success("娣诲姞鎴愬姛");
+      this.addTreeForm = {
+        addTypeArr: [],
+      };
+      this.getStandardTree();
+      this.getTableByClick(this.selectData);
+    },
+    changeCascader(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)
+    // }
+    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) => {
+          if (i.id !== undefined) {
+            this.deleteList.push(i.id);
+          } else {
+            i.children.forEach((c) => {
+              this.deleteList.push(c.id);
+            });
+          }
+        });
+      } else {
+        this.deleteList.splice(0, this.deleteList.length);
       }
     },
-    handleSizeChange(val) {
-      console.log(`姣忛〉 ${val} 鏉)
-      this.pageParams.pageSize = val
-      this.judgment()
+    //閫夋嫨鏌愯
+    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) {
+        if (row.children !== undefined) {
+          row.children.forEach((i) => {
+            this.deleteList.push(i.id);
+          });
+        } else {
+          this.deleteList.push(row.id);
+        }
+      } else if (row.isChecked === false) {
+        if (row.children !== undefined) {
+          row.children.forEach((i) => {
+            this.deleteList.findIndex((c, index) => {
+              if (c === i.id) {
+                this.deleteList.splice(index, 1);
+                return;
+              }
+            });
+          });
+        }
+        this.deleteList.findIndex((c, index) => {
+          if (c === row.id) {
+            this.deleteList.splice(index, 1);
+            return;
+          }
+        });
+      }
     },
-    handleCurrentChange(val) {
-      console.log(`褰撳墠椤�: ${val}`)
-      this.pageParams.pageNo = val
-      this.judgment()
+    //閫掑綊瀛愮骇
+    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);
+          });
+        }
+      }
     },
-    // 鏌ヨ鎸夐挳
-    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
+    //鏀瑰彉閫変腑
+    toggleSelection(row, flag) {
+      this.$set(row, "isChecked", flag);
+      this.$nextTick(() => {
+        if (flag) {
+          this.$refs.multipleTable.toggleRowSelection(row, flag);
+        } else {
+          this.$refs.multipleTable.clearSelection();
+        }
+      });
     },
-    // 閲嶇疆鎸夐挳
-    resetBtn() {
-      this.searchData.keyword = ''
-      this.tableData = this.oldtableData
+    // 琛ㄦ牸鏍戝叏閮ㄩ�変腑閰嶇疆  缁撴潫
+    deleteListClick() {
+      deleteListApi(this.deleteList).then((res) => {
+        this.$message({
+          message: res.message,
+          type: "success",
+        });
+        this.getTableByClick(this.selectData);
+      });
     },
-    // 澶勭悊缂栬緫瑙勬牸
-    async handleEdit() {
-      // console.log(this.id)
-      await updateSpecifications({ crossSection: this.editSpeForm.crossSection,
-        id: this.rowId,
-        instruct: this.editSpeForm.instruct,
-        name: this.editSpeForm.name,
-        number: this.editSpeForm.number,
-        numberOfCores: this.editSpeForm.numberOfCores,
-        serialId: this.modelId, // 鍏宠仈鍨嬪彿ID
-        spe_state: this.editSpeForm.spe_state,
-        voltageLevel: this.editSpeForm.spe_state })
-      this.dialogFormVisible4 = false
+    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);
+      });
     },
-    // 鍋滅敤
-    async updateSpeState() {
-      await updateSpeState({ id: this.rowId,
-        spe_state: '0' })
-      this.dialogFormVisible5 = false
-    }
-  }
-}
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-
-.standard-library-main{
-  width: 100%;
+// el-table琛ㄦ牸瀵归綈
+::v-deep .el-table__row:not([class*="el-table__row--level-"]) {
+  td:nth-child(2) {
+    padding-left: 23px !important;
+  }
+}
+.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{
-      flex: 2;
-      margin-right: 12px;
+    .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: 12px;
+        // 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);
+          }
+        }
       }
-      // .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{
-      flex: 8;
+    .library-table {
+      // height: 100%;
+      width: 170vh;
+      max-height: 100%;
+      // flex: 8;
       margin-left: 12px;
       display: flex;
       flex-direction: column;
-
-      .table-header{
+      // overflow-y: scroll;
+      .table-header {
         display: flex;
         justify-content: space-between;
-        .el-form-item{
+        width: 100%;
+        .el-form-item {
           margin-bottom: 30px !important;
         }
       }
-      .table-box{
-          flex: 1;
-          background: #fff;
-          // padding: 20px 20px 10px 20px;
+      .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;
-          flex-direction: column;
-          .el-table {
-            flex: 1;
-          }
-          >div:nth-child(2){
-            display: flex;
-            justify-content: end;
-            margin: 10px 0;
-          }
+          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;
+}
+.tipMsg {
+  float: left;
+  font-size: 16px;
+  font-weight: 500;
+  color: #999999;
 }
 </style>

--
Gitblit v1.9.3