元素识别 关联和新增元素表

src/api/exctab/excelmodel.js

@@ -147,6 +147,15 @@ export const submitExcelRelationWbsTreeAndElement = (data) => {
     })
 }
 
+//取消关联
+export const cancelRelation = (params) => {
+    return request({
+        url: ' /api/blade-manager/wbsFormElement/cancelRelation',
+        method: 'get',
+        params
+    })
+}
+
 export const getLazytree = (params) => {
     return request({
         url: '/api/blade-manager/wbsTree/lazy-tree',

src/views/exctab/ElementIdentification/index.vue

@@ -180,82 +180,80 @@
             :span="12"
             v-if="addElementForm.wbsId"
           >
-            <el-button
-              type="primary"
-              style="float:right;"
-              class="marbottom20"
-              @click="addElementMD"
-              :disabled="addElement"
-            >新增元素信息表</el-button>
-
-            <el-table
-              :data="addTableData"
-              border
-              style="width: 100%"
-            >
-              <el-table-column
-                prop="tableName"
-                label="已有元素表名称"
-                align="center"
-              >
-              </el-table-column>
-              <el-table-column
-                prop="name"
-                label="操作"
-                align="center"
-              >
-                <template slot-scope="scope">
-                  <el-button
-                    type="primary"
-                    size="mini"
-                    style="margin:0px;"
-                    @click="relationMD(scope.$index,'关联')"
-                    v-show="!scope.row.checknd"
-                  >选择关联</el-button>
-                  <el-button
-                    type="danger"
-                    size="mini"
-                    style="margin:0px;"
-                    @click="relationMD(scope.$index,'取消关联')"
-                    v-show="scope.row.checknd"
-                  >取消关联</el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-
-            <div v-if="addElement">
-              <div class="flexBetween martop40">
-                <el-input
-                  v-model="addElementForm.deptName"
-                  placeholder="请输入表名"
-                ></el-input>
-                <el-select
-                  class="marleft10"
-                  v-model="addElementForm.tableType"
-                  placeholder="请选择表类型"
+             <el-tabs v-model="activeName" type="card" >
+              <el-tab-pane label="关联元素表" name="link">
+                <el-table
+                  :data="addTableData"
+                  border
+                  style="width: 100%"
+                  class="martop20"
                 >
-                  <el-option
-                    v-for="(item,index) in  exceltypeData"
-                    :key="index"
-                    :label="item.dictValue"
-                    :value="item.dictKey"
-                  ></el-option>
-                </el-select>
-              </div>
-              <el-select
-                style="width:100%;"
-                class="martop20 "
-                v-model="addElementForm.tableOwner"
-                placeholder="请选择所属方"
-              >
-                <el-option
-                  v-for="(item,index) in ownerTypeList"
-                  :key="index"
-                  :label="item.dictValue"
-                  :value="item.dictKey"
-                ></el-option>
-              </el-select>
-            </div>
+                  <el-table-column
+                    prop="tableName"
+                    label="已有元素表名称"
+                    align="center"
+                  >
+                  </el-table-column>
+                  <el-table-column
+                    prop="name"
+                    label="操作"
+                    align="center"
+                  >
+                    <template slot-scope="scope">
+                      <el-button
+                        type="primary"
+                        size="mini"
+                        style="margin:0px;"
+                        @click="relationMD(scope.row,'关联')"
+                        v-show="!scope.row.checknd"
+                      >选择关联</el-button>
+                      <el-button
+                        type="danger"
+                        size="mini"
+                        style="margin:0px;"
+                        @click="relationMD(scope.row,'取消关联')"
+                        v-show="scope.row.checknd"
+                      >取消关联</el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-tab-pane>
+              <el-tab-pane label="新增元素表" name="add">
+                <div>
+                  <div class="flexBetween martop20">
+                    <el-input
+                      v-model="addElementForm.deptName"
+                      placeholder="请输入表名"
+                    ></el-input>
+                    <el-select
+                      class="marleft10"
+                      v-model="addElementForm.tableType"
+                      placeholder="请选择表类型"
+                    >
+                      <el-option
+                        v-for="(item,index) in  exceltypeData"
+                        :key="index"
+                        :label="item.dictValue"
+                        :value="item.dictKey"
+                      ></el-option>
+                    </el-select>
+                  </div>
+                  <el-select
+                    style="width:100%;"
+                    class="martop20"
+                    v-model="addElementForm.tableOwner"
+                    placeholder="请选择所属方"
+                  >
+                    <el-option
+                      v-for="(item,index) in ownerTypeList"
+                      :key="index"
+                      :label="item.dictValue"
+                      :value="item.dictKey"
+                    ></el-option>
+                  </el-select>
+                </div>
+              </el-tab-pane>
+            </el-tabs>
           </el-col>
         </el-row>
         <span
@@ -275,7 +273,7 @@
   </div>
 </template>
 <script>
-import { tabLazytree, getExcelHtmlCol, excelType, submitExcelRelationWbsTreeAndElement, getWbsTypeList, getLazytree, } from "@/api/exctab/excelmodel";
+import { tabLazytree, getExcelHtmlCol, excelType, submitExcelRelationWbsTreeAndElement, getWbsTypeList, getLazytree,cancelRelation } from "@/api/exctab/excelmodel";
 import { dictionarydataType } from "@/api/exctab/editelement";
 import { getColByTabId } from "@/api/manager/AdjustForm";
 import { selectByNodeTable } from "@/api/manager/wbstree";
@@ -328,6 +326,8 @@ export default {
       //#endregion
 
       ownerTypeList: [],
+      
+      activeName:'link',
     }
   },
   methods: {
@@ -526,65 +526,46 @@ export default {
         this.exceltypeData = res.data
       }
     },
-    relationMD (index, type) {//关联取消关联
-      console.log(this.addTableData[index]);
-      if (this.addTableData.length > 0) {
-        if (type == '关联') {
-          this.addTableData.forEach((val, k) => {
-            if (index == k) {
-              val.checknd = !val.checknd
-            } else {
-              val.checknd = false
-            }
-          })
-          this.addElementForm.id = this.addTableData[index].id
-          this.addElementForm.initTableName = this.addTableData[index].initTableName
-        } else {
-          this.addTableData.forEach((val, k) => {
-            val.checknd = false
-          })
-          this.addElementForm.id = ''
-          this.addElementForm.initTableName = ''
-        }
+    relationMD (row, type) {//关联取消关联
+      if (type == '关联') {
+        row.checknd = true;
+      } else {
+        cancelRelation({id:row.id}).then(()=>{
+          row.checknd = false;
+          row.isLinkTable = 1;
+        })
       }
     },
     saveElementMD () {//保存按钮
       if (this.addElementForm.wbsId) {
-        if (this.tableData.length > 0) {
-          let tag = false
-          this.addTableData.forEach(val => {
-            if ((val.checknd == true && val.isLinkTable != 2) || (val.checknd == false && val.isLinkTable == 2)) {
-              tag = true
+        if (this.activeName == 'link') {
+          let tableIds = [];
+          this.addTableData.forEach((table)=>{
+            if(table.checknd){
+              tableIds.push(table.id);
             }
           })
-          if (tag) {
+
+          this.submitExcelRelationWbsTreeAndElement({
+            tableIds:tableIds,
+            elementList: this.tableData
+          })
+        } else {
+          if (this.addElementForm.deptName && this.addElementForm.tableType && this.addElementForm.tableOwner) {
             this.submitExcelRelationWbsTreeAndElement({
-              id: this.addElementForm.id,
-              initTableName: this.addElementForm.initTableName,
+              deptName: this.addElementForm.deptName,
+              tableType: this.addElementForm.tableType,
+              tableOwner: this.addElementForm.tableOwner,
+              wbsId: this.addElementForm.wbsId,
+              parentId: this.addElementForm.parentId,
               elementList: this.tableData
             })
-          } else {
-            if (this.addElementForm.deptName && this.addElementForm.tableType && this.addElementForm.tableOwner) {
-              this.submitExcelRelationWbsTreeAndElement({
-                deptName: this.addElementForm.deptName,
-                tableType: this.addElementForm.tableType,
-                tableOwner: this.addElementForm.tableOwner,
-                wbsId: this.addElementForm.wbsId,
-                parentId: this.addElementForm.parentId,
-                elementList: this.tableData
-              })
-            }else{
-              this.$message({
-                type: 'warning',
-                message: '请填写和选择新增的表名，表类型，表所属方'
-              })
-            }
+          }else{
+            this.$message({
+              type: 'warning',
+              message: '请填写和选择新增的表名，表类型，表所属方'
+            })
           }
-        }else{
-          this.$message({
-          type: 'warning',
-          message: '至少有一个元素才可以保存'
-        })
         }
       } else {
         this.$message({
@@ -647,6 +628,7 @@ export default {
   },
   created () {
     this.getOwnerTypelist();
+    this.excelType();
   }
 }
 </script>