From 00eef9749338a3839d9e6f4ab8fabb721cbb1217 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Fri, 25 Feb 2022 15:12:07 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=98=E5=8E=9F=E5=88=9A=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=E7=9A=84=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Transaction.vue | 261 +++++++++++++++++++++++---------------
 1 file changed, 157 insertions(+), 104 deletions(-)

diff --git a/src/views/Transaction.vue b/src/views/Transaction.vue
index c97b235..827aa50 100644
--- a/src/views/Transaction.vue
+++ b/src/views/Transaction.vue
@@ -1,6 +1,8 @@
 <template>
   <!-- 交易类 -->
-  <div class="content">
+  <div class="content" v-loading="loading"
+       element-loading-text="加载中"
+       element-loading-spinner="el-icon-loading">
     <div class="header">
       <div>
         <i class="back el-icon-arrow-left" @click="Back()" style="cursor:pointer">
@@ -20,7 +22,7 @@
           <div>基本信息</div>
         </div>
         <div class="item">
-          <div class="label">判分点名称</div>
+          <div class="label">判分点</div>
           <el-input
               v-model.trim="formData.lcJudgmentPoint.name"
               :readonly="isView"
@@ -33,12 +35,12 @@
         <div class="item">
           <div class="label">实验要求</div>
           <quill
-              v-model="formData.lcJudgmentPoint.experimentalRequirements"
-              :readonly="isView"
-              :border="true"
-              :minHeight="150"
-              :height="150"
-              style="width: 100%"
+            class="quill"
+            v-model="formData.lcJudgmentPoint.experimentalRequirements"
+            :readonly="isView"
+            :border="true"
+            :minHeight="150"
+            :height="150"
           />
         </div>
       </div>
@@ -50,22 +52,28 @@
             <div>判分规则</div>
           </div>
           <div>
+            <el-button v-if="!isView" type="primary" size="mini" @click="batchDel">批量删除</el-button>
             <el-button v-if="!isView" type="primary" size="mini" @click="addRules">新增</el-button>
-<!--            <el-button v-if="!isView" type="primary" size="mini" @click="addRule">新增</el-button>-->
           </div>
         </div>
         <el-dialog :visible.sync="configVisible" width="25%" title="批量新增判分点" center :append-to-body="false">
           <div class="flex-between mgb20">
             <div style="width: 100%;height: 400px;overflow: auto;margin: auto;background: #F5F5F5">
               <el-tree
-                   style="background: #F5F5F5"
-                  :data="treeData"
-                   @check="currentChecked"
-                   header-align="center"
-                   show-checkbox
-                   ref="tree"
-                   node-key="operationIds"
-                  :props="defaultProps">
+                class="add-tree"
+                style="background: #F5F5F5"
+                :data="treeData"
+                @check="currentChecked"
+                header-align="center"
+                show-checkbox
+                ref="tree"
+                node-key="operationIds"
+                :props="defaultProps"
+                v-if="configVisible">
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                  <span>{{ node.label }}</span>
+                  <em class="exist" v-if="data.exist">（已导入）</em>
+                </span>
               </el-tree>
             </div>
           </div>
@@ -77,12 +85,21 @@
          
         <el-card shadow="hover">
           <el-table
-              :data="tableData"
-              :stripe="true"
-              :key="itemkey"
-              header-align="center"
+            class="lc-table"
+            :data="tableData"
+            :stripe="true"
+            :key="itemkey"
+            header-align="center"
+            @selection-change="handleSelectionChange"
           >
+            <el-table-column
+                type="selection"
+                width="55">
+            </el-table-column>
             <el-table-column prop="indexNo" type="index" label="序号" width="80">
+              <template slot-scope="scope">
+                {{ scope.row.isSubject && scope.row.index + 1 }}
+              </template>
             </el-table-column>
             <el-table-column label="流程类考核点">
               <template slot-scope="scope" v-if="scope.row.isSubject">
@@ -90,25 +107,12 @@
                 <div class="tree-con">
                   <div class="block1" :id="'divTree'+scope.$index">
                     <el-tree :data="scope.row.operationIData" :props="defaultProp" :default-expand-all="true"></el-tree>
-<!--                    <my-tree-->
-<!--                        :id="'depTree'+scope.$index"-->
-<!--                        class="action"-->
-<!--                        :ref="'tree-'+scope.$index"-->
-<!--                        :data="treeData"-->
-<!--                        :props="defaultProps"-->
-<!--                        default-expand-all-->
-<!--                        node-key="operationIds"-->
-<!--                        show-checkbox-->
-<!--                        @check-change="(data, checked, indeterminate) => {-->
-<!--                          handleCheckChange(data, checked, indeterminate, scope.row, scope.$index);-->
-<!--                        }"-->
-<!--                    ></my-tree>-->
                   </div>
                   <div v-show="scope.row.isDisabled" class="mask"></div>
                 </div>
               </template>
             </el-table-column>
-            <el-table-column label=" " width="150">
+            <el-table-column label=" " width="150" align="center">
               <template slot-scope="scope">
                 <el-button
                     circle
@@ -116,7 +120,6 @@
                     v-if="scope.row.isSubject"
                     :disabled="isView || scope.row.isDisabled"
                     @click="changeResult(scope.row)"
-                    style="position: absolute; right: 55px"
                 >
                   {{ scope.row.resultOperation === 0 ? "且" : "或" }}
                 </el-button>
@@ -350,7 +353,6 @@
 import quill from "@/components/quill";
 import MyTree from "@/components/myTree/src/tree";
 import {deepCopy} from "@/utils/deepCopy";
-import { mapMutation, mapState } from 'vuex';
 
 export default {
   components: {quill, MyTree},
@@ -361,7 +363,7 @@ export default {
       fromCountIndex: -999,
       checkChange: [],
       changeArr: [],
-
+      multipleSelection: [],
       lcId: "", // 流程类判分点id
       isAdd: Boolean(this.$route.query.isAdd), // 添加
       isEdit: Boolean(this.$route.query.isEdit), // 编辑
@@ -370,7 +372,7 @@ export default {
       treeData: [], // 树结构数据
       defaultProps: {
         children: "children",
-        label: "name"
+        label: "label"
       }, // 树结构配置项
       defaultProp: {
         children: "children",
@@ -396,6 +398,7 @@ export default {
       configVisible:false,
       SelectedObj:[],
       counts:0,
+      loading:true,
     };
   },
   mounted() {
@@ -409,9 +412,6 @@ export default {
     }
   },
   methods: {
-    // ...mapMutation({
-    //   setTreeData: 'setTreeData'  setTreeData
-    // }),
     getInfoData(lcId) { // 获取判分点详细信息
       this.counts = 0
       this.$get(`${this.api.queryJudgmentPointDetails}?lcId=${lcId}`).then(res => {
@@ -422,7 +422,7 @@ export default {
             lcJudgmentRuleList: judgmentRuleList
           };
           this.anewPosttingData(judgmentRuleList)
-          this.tableData.forEach((item, index) => {
+          this.tableData.forEach(async (item, index) => {
             // 勾选树节点
             let lists = JSON.parse(JSON.stringify(this.treeData))
             if (item.operationIds) {
@@ -441,22 +441,26 @@ export default {
                 }
               }
               item.operationIData.push(testObj)
-              console.log('-====-')
-              console.log(testObj)
             }
             // 根据题目id,获取题目信息
             if (item.isSubject && item.type && item.type != 4 && item.emptyOne) {
               // await this.getSubjectData(item.emptyOne, index);
             }
           });
-          this.$store.commit('setTreeDataStore', { treeDataStore: this.treeData})
+          this.setIndex()
+          this.loading = false
         } else {
           this.$message.warning(res.message);
+          this.loading = false
         }
       }).catch(err => {
+        this.loading = false
         // console.log(err);
       });
     },
+    handleSelectionChange(val){
+      this.multipleSelection = val
+    },
     cxk(arr, obj, needObj) {
       if(arr.length === 0) {
         return obj
@@ -477,7 +481,7 @@ export default {
       this.counts = this.counts+1
       let list = []
       if (this.SelectedObj.checkedNodes.length > 0){
-        for (var i=0;i<this.SelectedObj.checkedNodes.length;i++){
+        for (let i=0;i<this.SelectedObj.checkedNodes.length;i++){
           if(this.SelectedObj.checkedNodes[i].children.length > 0){
 
           }else{
@@ -489,6 +493,7 @@ export default {
         }
       }
       this.anewPosttingDatas(list)
+      let i = 0
       this.tableData.forEach(async (item, index) => {
         // 勾选树节点
         if (!item.type){
@@ -513,6 +518,7 @@ export default {
           item.operationIData.push(testObj)
         }
       });
+      this.setIndex()
       this.configVisible = false
     },
     anewPosttingDatas(judgmentRuleList){
@@ -584,6 +590,11 @@ export default {
           isDisabled: true,  // 已禁用
           isSave: true // 已保存
         };
+        if(item.type == undefined || item.type == ''){
+          obj.type = null
+        }else{
+          obj.type = item.type
+        }
         //题目类型(1选择 2判断 3填空 4问答 5指标结果)
         if (item.type == 1 || item.type == 2) {
           obj.subjectId = Number(item.emptyOne);
@@ -624,7 +635,6 @@ export default {
               ...res.subject,
               lcItems: res.items
             };
-            console.log(res)
             this.$set(this.tableData, index, item);
           }
         }).catch(err => {
@@ -633,18 +643,11 @@ export default {
       }
     },
     handleCheckChange(data, checked, indeterminate, row, index) { // 处理勾选
-
       if (checked && data.isNode === 1) {
-        console.log(data)
         if (!data.type){
           this.getSubjectData(data.subjectId, index);
         }
         this.tableData[index].operationIds = data.operationIds; // 操作id串
-        // row.value1 = "";
-        // row.value2 = "";
-        // row.value3 = "";
-        // row.value4 = "";
-        // row.value5 = "";
         if (data.subjectId) { // 是否有题目id
           this.currentNodeData = data;
           this.$refs[`tree-${index}`].setCheckedNodes([data]);
@@ -668,40 +671,28 @@ export default {
       }
     },
     getTreeData() { // 获取树结构数据
-
-      // .length
-      if(this.treeDataStore.length) {
-        console.log('what?')
-          console.log(this.treeDataStore)
-          const tmp = [...this.treeDataStore]
-          this.treeData = this.toTreeId(tmp, this.treeDataStore[0].parentId);
-          if (this.$route.query.lcId) {
-            this.lcId = this.$route.query.lcId;
-            this.getInfoData(this.$route.query.lcId);
-          }
-      }else {
-        this.$get(this.api.getLcRecord).then(res => {
-          if (res.status == 200 && res.list.length>0) {
-            if (res.list.length>0) {
-              this.$store.commit('setTreeDataStore', { treeDataStore: res.list})
-              this.treeData = this.toTreeId(res.list, res.list[0].parentId);
-              if (this.$route.query.lcId) {
-                this.lcId = this.$route.query.lcId;
-                this.getInfoData(this.$route.query.lcId);
-              }
+      this.$get(this.api.getLcRecord).then(res => {
+        if (res.status == 200 && res.list.length>0) {
+          if (res.list.length>0) {
+            this.treeData = this.toTreeId(res.list, res.list[0].parentId);
+            if (this.$route.query.lcId) {
+              this.lcId = this.$route.query.lcId;
+              this.getInfoData(this.$route.query.lcId);
+            } else {
+              this.loading = false
             }
-          } else {
-            this.$message.warning(res.message);
           }
-          }).catch(err => {
-            // console.log(err);
-          });
-      }
-      
+        } else {
+          this.$message.warning(res.message);
+        }
+      }).catch(err => {
+        // console.log(err);
+      });
     },
     toTreeId(data, parentId) { // id重新串连成（父+子+孙）,已便达到树节点需要的key唯一性,且后面提交数据，需要传这个id串到后台
       let result = [];
       data.forEach(item => {
+        item.label = item.name
         if (item.isNode === 0) {
           item.showCheckbox = false;
         } else {
@@ -757,12 +748,13 @@ export default {
         this.$message.warning(`请添加判分规则`);
         return;
       } else {
-        for (let i = 0; i < this.tableData.length; i++) {
-          if (this.tableData[i].isSubject && !this.tableData[i].operationIds) {
-            this.$message.warning(`第${i + 1}项请选择操作点`);
+        const list = this.tableData
+        for (let i = 0; i < list.length; i++) {
+          if (list[i].isSubject && !list[i].operationIds) {
+            this.$message.warning(`第${list[i].index + 1}项请选择操作点`);
             return;
-          } else if (this.tableData[i].isSubject && !this.tableData[i].isSave) {
-            this.$message.warning(`第${i + 1}项，未保存`);
+          } else if (list[i].isSubject && !list[i].isSave) {
+            this.$message.warning(`第${list[i].index + 1}项，未保存`);
             return;
           }
         }
@@ -829,12 +821,26 @@ export default {
         });
       }
     },
+    // 新增判分点
     addRules(){
-      this.configVisible = true;
-      this.$nextTick(() => {
-        this.$refs.tree.setCheckedKeys([]);
+      this.configVisible = TextTrackCue
+      const ids = []
+      const treeData = this.treeData
+      const list = this.tableData
+      list.map(e => {
+        e.operationIds && ids.push(e.operationIds) // 获取列表中已有的判分id
       })
-      
+      // 列表中已有的判分，在新增判分树形里判分名后面加上已导入三个字
+      const addSuffix = data => {
+        data.map(e => {
+          // 判分规则列表上的规则，要加个标识
+          e.exist = ids.includes(e.operationIds) || (e.children && e.children.length && e.children.every(n => ids.includes(n.operationIds)))
+          // 有子级，则递归
+          if (e.children && e.children.length) addSuffix(e.children)
+        })
+      }
+      addSuffix(treeData)
+      this.$refs.tree.setCheckedKeys([])
     },
     addRule() { // 新增规则
       this.changeArr.splice(0, this.changeArr.length)
@@ -887,6 +893,13 @@ export default {
       row.ruleOperation = row.ruleOperation === 0 ? 1 : 0;
       this.tableData[index - 1].ruleOperation = row.ruleOperation;
     },
+    // 设置序号
+    setIndex() {
+      let i = 0
+      this.tableData.map(e => {
+        if (e.isSubject) e.index = i++
+      })
+    },
     handleEdit(row) { // 处理编辑规则
       this.judgePoints = true
       this.tableDataCopy = deepCopy(this.tableData); // 深拷贝
@@ -957,6 +970,7 @@ export default {
         }
         this.isAddRule = false;
       }
+      this.setIndex()
     },
     handleDelete(row, index) { // 处理删除规则
       this.$confirm("此操作将永久删除该规则, 是否继续?", "提示", {
@@ -987,6 +1001,37 @@ export default {
       }).catch(() => {
       });
     },
+    // 批量删除
+    batchDel() {
+      if(this.multipleSelection.length){
+        this.$confirm("此操作将永久删除该规则, 是否继续?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+          center: true
+        }).then(() => {
+          const ids = this.multipleSelection.map(e => e.id)
+          const list = this.tableData
+          ids.map((e, i) => {
+            const index = list.findIndex(j => j.id === e)
+            if (index !== -1) {
+              this.tableData.splice(index === this.tableData.length - 1 ? index - 1 : index, 2)
+            }
+          })
+          this.setIndex()
+          this.itemkey = Math.random()
+          this.tableData.forEach(async (item, index) => {
+            // 根据题目id,获取题目信息
+            if (item.isSubject && item.type && item.type != 4 && item.emptyOne) {
+              await this.getSubjectData(item.emptyOne, index);
+            }
+          });
+          this.isAddRule = false;
+        }).catch(() => {})
+      } else {
+        this.$message.error('请先选择数据 ！')
+      }
+    },
     // 表头样式设置
     headClass() {
       return "text-align: center;";
@@ -995,11 +1040,6 @@ export default {
     rowClass() {
       return "text-align: center;";
     }
-  },
-  computed: {
-    ...mapState({
-      treeDataStore: state => state.treeDataStore
-    })
   }
 };
 </script>
@@ -1019,18 +1059,15 @@ export default {
     border-bottom: 1px dashed #ccc;
     height: 45px;
     line-height: 45px;
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 600;
-    //padding: 0 10px;
     display: flex;
     justify-content: space-between;
 
     .back {
       line-height: 3;
-      //padding-left: 10px;
-
       span {
-        font-size: 14px;
+        font-size: 16px;
         font-weight: 600;
         padding-left: 5px;
       }
@@ -1038,6 +1075,7 @@ export default {
 
     .title {
       font-weight: bold;
+      font-size: 14px;
       margin-left: 20px;
     }
   }
@@ -1073,6 +1111,9 @@ export default {
         padding-right: 20px;
         line-height: 35px;
       }
+      .quill {
+        width: calc(100% - 240px);
+      }
     }
   }
 
@@ -1100,7 +1141,13 @@ export default {
 
   }
 }
-
+/deep/.add-tree {
+  .exist {
+    font-size: 12px;
+    font-style: normal;
+    color: #b3b3b3;
+  }
+}
 // 滚动条的宽度
 /deep/ ::-webkit-scrollbar {
   width: 6px; // 横向滚动条
@@ -1136,7 +1183,13 @@ export default {
     z-index: 99999;
   }
 }
-
+/deep/.lc-table {
+  .el-table__body {
+    tr:nth-child(even) .el-checkbox {
+      display: none;
+    }
+  }
+}
 @mixin block {
   padding: 10px;
   border: 1px solid #e4e7ed;