元素识别的优化需求

src/api/exctab/excelmodel.js

@@ -198,3 +198,21 @@ export const uploadcoverfileExcel = (row) => {
         data: row
     })
 }
+
+export const exctabcellSave = (row) => {
+    return request({
+      url: '/api/blade-manager/exctabcell/save',
+      method: 'post',
+      data: row
+    })
+  }
+
+export const exctabcellRemove = (ids) => {
+    return request({
+        url: '/api/blade-manager/exctabcell/remove',
+        method: 'post',
+        params: {
+            ids,
+        }
+    })
+}

src/views/exctab/ElementIdentification/index.vue

@@ -74,11 +74,13 @@
                 <div
                   class="parent"
                   id='parent'
+                  @dblclick="dblBtnClick($event)"
+                  @click="parentClick($event)"
                 >
                 </div>
               </el-col>
               <el-col
-                :span="showLeft?8:12"
+                :span="showLeft?8:12" ref="tablescroll"
                 style="overflow:auto;height:100%;"
               >
                 <div class="flexBetween flexItemsC">
@@ -105,7 +107,7 @@
                 <el-table
                   class="martop20"
                   :data="tableData"
-                  border
+                  border :row-class-name="tableRowClassName"
                   style="width: 100%"
                 >
                   <el-table-column
@@ -313,16 +315,143 @@
           >确 定</el-button>
         </span>
       </el-dialog>
+
+      <el-dialog
+        title="添加新元素字段"
+        :visible="addNewElementDialog"
+        width="60%"
+        :before-close="handleClose"
+        :modal-append-to-body="false"
+        style="z-index: 999999;"
+      >
+        <div>
+          <i
+            @click="addNewElement"
+            class="el-icon-circle-plus marbottom10"
+            style="color:red; font-size:24px; float: right;cursor: pointer;"
+          ></i>
+          <el-table
+            :data="newElements"
+            height="250"
+            border
+            style="width: 100%"
+          >
+            <el-table-column
+              label="元素名称"
+            >
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.textInfo"
+                  placeholder="请输入内容"
+                ></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              align="center"
+              width="120"
+              label="操作"
+            >
+              <template slot-scope="scope">
+                <el-button
+                  type="danger"
+                  size="mini"
+                  @click="deleteNewElement(scope.$index)"
+                >删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <span
+          slot="footer"
+          class="dialog-footer"
+        >
+          <el-button @click="handleClose()">取 消</el-button>
+          <el-button
+            type="primary"
+            v-throttle='2000'
+            :disabled="newElements.length===0"
+            @click="addNewElementHandle()"
+          >确 定</el-button>
+        </span>
+      </el-dialog>
+
+      <el-dialog
+        title="编辑元素信息"
+        :visible.sync="editTitleDialog"
+        width="60%"
+        append-to-body
+      >
+        <div>
+          <draggable v-model="titleList">
+            <div
+              v-for="(item,key) in titleList"
+              :key="key"
+              class="flexBetween flexItemsC title-item"
+            >
+              <div>
+                <span>{{item}}</span>
+              </div>
+              <div class="flexItemsC">
+                <i
+                  @click="listUp(key)"
+                  class="el-icon-top"
+                  :style="{'font-size':'20px','color':key==0 ?'#aaa':'#0A8CD5', 'cursor': key!=0?'pointer':'default'}"
+                ></i>
+                <i
+                  @click="listDown(key)"
+                  class="el-icon-bottom marleft5"
+                  :style="{'font-size':'20px','color':key==titleList.length-1?'#aaa':'#0A8CD5', 'cursor':  key!=titleList.length-1?'pointer':'default'}"
+                ></i>
+                <i
+                  @click="deleTitle(key)"
+                  class="el-icon-circle-close marleft5"
+                  :style="{'font-size':'20px',
+                  'color':'#ee7049','cursor':'pointer'}"
+                ></i>
+              </div>
+            </div>
+          </draggable>
+        </div>
+        <div style="margin-top:50px;">
+          <div class="flex jc-sb mg-b-10">
+            <div></div>
+            <div>
+              <el-button size="medium" type="primary" @click="setTitleText">合成文本</el-button>
+            </div>
+          </div>
+          <el-input type="textarea" rows="5" v-model="titleText"></el-input>
+        </div>
+        <el-alert
+          title="匹配不到右侧元素列表，无法修改到相应名称" v-if="titleIndex < 0"
+          type="error" :closable="false"
+          effect="dark" style="margin-top:10px;">
+        </el-alert>
+        <span
+          slot="footer"
+          class="dialog-footer"
+        >
+          <el-button @click="editTitleDialog = false">取 消</el-button>
+          <el-button
+            type="primary"
+            v-throttle='2000'
+            :disabled="titleIndex < 0"
+            @click="editTitle()"
+          >确定修改</el-button>
+        </span>
+      </el-dialog>
+
     </div>
   </div>
 </template>
 <script>
-import { tabLazytree, getExcelHtmlCol, excelType, submitExcelRelationWbsTreeAndElement, getWbsTypeList, getLazytree,cancelRelation,saveRelation,searchNodeTables,tabLazytreeAll} from "@/api/exctab/excelmodel";
+import { tabLazytree, getExcelHtmlCol, excelType, submitExcelRelationWbsTreeAndElement, getWbsTypeList, getLazytree,cancelRelation,saveRelation,searchNodeTables,tabLazytreeAll,exctabcellSave,exctabcellRemove} from "@/api/exctab/excelmodel";
 import { dictionarydataType } from "@/api/exctab/editelement";
 import { getColByTabId } from "@/api/manager/AdjustForm";
 import { selectByNodeTable } from "@/api/manager/wbstree";
 import { getDictionary } from "@/api/system/dict";
 import Vue from 'vue'
+import draggable from 'vuedraggable'
 export default {
   data () {
     return {
@@ -386,8 +515,19 @@ export default {
       activeName:'link',
 
       showLeft:true,//左侧树是否显示
+
+      addNewElementDialog:false,//新增元素弹窗
+      newElements:[],
+
+      editTitleDialog:false,//编辑标题弹窗
+      titleList:[],//标题拆分的列表
+      titleText:'',
+      titleIndex:-1,
     }
   },
+  components: {
+      draggable,
+  },
   methods: {
 
     //搜索树
@@ -430,6 +570,9 @@ export default {
         this.from.id = data.id
 
         this.tableData = [];
+
+        //触发自动识别按钮
+        this.automaticRecognition();
       }
     },
     async loadNode (node, resolve) {//懒加载获取节点
@@ -444,16 +587,26 @@ export default {
       this.getColByTabId()
     },
     pushTableData () {//
+      // if (this.from.id) {
+      //   this.tableData.unshift({
+      //     eName: '',
+      //     eType: 1,
+      //     eAllowDeviation: ''
+      //   })
+      // }
+
       if (this.from.id) {
-        this.tableData.unshift({
-          eName: '',
-          eType: 1,
-          eAllowDeviation: ''
-        })
+        this.addNewElementDialog = true;
       }
     },
     deleteTableData (key) {//删除
-      this.tableData.splice(key, 1)
+      exctabcellRemove(this.tableData[key].id).then(()=>{
+        this.tableData.splice(key, 1)
+        this.$message({
+          type: "success",
+          message: "删除成功!"
+        });
+      })
     },
     async getColByTabId () {//获取字段信息
       const { data: res } = await getColByTabId({ tabId: this.from.id })
@@ -769,6 +922,122 @@ export default {
     //修改树显示状态
     showLeftChange(){
       this.showLeft = !this.showLeft;
+    },
+
+    handleClose () {
+      this.newElements = []
+      this.addNewElementDialog = false;
+    },
+
+    addNewElement(){
+      this.newElements.push({
+        exctabId:this.from.id,
+        textInfo: ''
+      })
+    },
+
+    deleteNewElement(index){
+      this.newElements.splice(index, 1);
+    },
+
+    addNewElementHandle(){
+      exctabcellSave(this.newElements).then(()=>{
+          this.handleClose();
+          //触发自动识别按钮
+          this.automaticRecognition();
+          this.$message({
+            type: "success",
+            message: "保存成功!"
+          });
+      })
+    },
+
+    listUp(index){
+      if(index != 0){
+        this.titleList[index] = this.titleList.splice(index-1,1,this.titleList[index])[0];
+      }
+    },
+
+    listDown(index){
+      if(index != this.titleList.length-1){
+        this.titleList[index] = this.titleList.splice(index+1,1,this.titleList[index])[0];
+      }
+    },
+
+    deleTitle(index){
+      this.titleList.splice(index,1);
+    },
+
+    setTitleText(){
+      this.titleText = this.titleList.join('_');
+    },
+
+    editTitle(){
+      this.tableData[this.titleIndex].textInfo = this.titleText;
+      this.tableData[this.titleIndex].eName = this.titleText;
+
+      //console.log(this.$refs.tablescroll)
+      this.$refs.tablescroll.$el.scrollTop = 120+this.titleIndex*65;
+      this.editTitleDialog = false;
+    },
+
+    dblBtnClick(e){
+      //console.log(e)
+      let target = e.target;
+      //console.log(target.getAttribute('trindex'))
+      if(target.getAttribute('trindex') !== null && target.getAttribute('tdindex')){
+        let tdEle = this.getParentTD(target);
+        if(tdEle){
+          this.editTitleDialog = true;
+          this.titleText = tdEle.getAttribute('title');
+          //console.log(title)
+          this.titleList = this.titleText.split('_');
+          let trtd = target.getAttribute('trindex')+"_"+target.getAttribute('tdindex');
+          for (let i = 0; i < this.tableData.length; i++) {
+            if(this.tableData[i].xys.indexOf(trtd) > -1){
+              this.titleIndex = i;
+              break;
+            }
+          }
+        }
+      }
+    },
+
+    parentClick(e){
+      let target = e.target;
+      //console.log(target.getAttribute('trindex'))
+      if(target.getAttribute('trindex') !== null && target.getAttribute('tdindex')){
+        let tdEle = this.getParentTD(target);
+        if(tdEle){
+          let trtd = target.getAttribute('trindex')+"_"+target.getAttribute('tdindex');
+          for (let i = 0; i < this.tableData.length; i++) {
+            if(this.tableData[i].xys.indexOf(trtd) > -1){
+              this.titleIndex = i;
+              break;
+            }
+          }
+
+          this.$refs.tablescroll.$el.scrollTop = 120+this.titleIndex*65;
+        }
+      }
+    },
+
+    getParentTD(ele){
+      let targetParent = ele.parentNode;
+      while (targetParent.nodeName !== "TD") {
+          if(targetParent.id == 'parent'){
+            return null;
+          }
+          targetParent = targetParent.parentNode;
+      }
+      return targetParent;
+    },
+
+    tableRowClassName({rowIndex}) {
+      if (rowIndex === this.titleIndex) {
+        return 'warning-row';
+      }
+      return '';
     }
 
   },
@@ -799,4 +1068,20 @@ export default {
   box-sizing: border-box;
   padding-bottom: 10px;
 }
+
+.title-item{
+  box-sizing: border-box;
+  width:100%;
+  font-size:16px;
+  height:30px;
+  padding:3px 20px;
+  background-color: #f3f3f3;
+  color: #ee7049;
+  margin-bottom: 6px;
+  cursor:pointer;
+}
+
+/deep/ .el-table .warning-row {
+  background: oldlace;
+}
 </style>