元素识别页面优化更改

src/views/exctab/ElementIdentification/index333.vue

@@ -98,7 +98,7 @@
                   >
               </div>
               <el-tabs type="border-card"  v-model="editableTabsValue"  @tab-click="editableTabhandleClick">
-                      <el-tab-pane label="创建新的元素表"    name="创建新的元素表">
+                      <!-- <el-tab-pane label="创建新的元素表"    name="创建新的元素表">
                          <div class=" flexItemsC " style="justify-content: space-between;">
                            <el-button
                                 type="primary"
@@ -125,10 +125,10 @@
                               >
                             </div>
                           </div>
-                       </el-tab-pane>
+                       </el-tab-pane> -->
                       <el-tab-pane label="关联已有元素表" name="关联已有元素表">
 
-                            <div class=" flexItemsC " style="justify-content: space-between;">
+                            <div class=" flexItemsC " style="justify-content: space-between;"  v-if="!isshowAddtab">
                                 <el-select
                                 v-model="excelopmodel"
                                 placeholder="请选择元素表"
@@ -149,13 +149,69 @@
                                 type="primary"
                                 size="mini"
                                  icon="el-icon-plus"
-                                :disabled="from.id == ''"
-                                @click="pushTableData(1)"
-                                >新增元素
+                               
+                                @click="showAddtab"
+                                >新增元素表
+                              </el-button >
+                            </div>
+                            <!-- 新增元素表 -->
+                            <div class=" flexItemsC " style="justify-content: space-between;" v-if="isshowAddtab">
+                              <el-button
+                                    type="primary"
+                                    size="mini"
+                                    @click="pushTableData()"
+                                    :disabled="from.id == ''"
+                                    >新增元素</el-button
+                                  >
+                                <div >
+                                  <el-button
+                                    type="success"
+                                    size="mini"
+                                    @click="establish()"
+                                    :disabled="from.id == ''"
+                                    >关联WBS并创建元素</el-button
+                                  >
+                                  <el-button
+                                    type="success"
+                                    size="mini"
+                                    icon="el-icon-plus"
+                                    @click="addtoElement()"
+                                    :disabled="from.id == ''"
+                                    >添加到元素库</el-button
+                                  >
+                                </div>
+                            </div>
+
+                      </el-tab-pane>
+
+
+                       <el-tab-pane label="定位匹配" name="定位匹配">
+                          <div >
+                            <div class="flex">
+                              <el-alert
+                                v-if="ishowelementBynlist"
+                                title="目前已匹配成功25个坐标，还剩5个未匹配成功，请检查!"
+                                type="warning"
+                                 :closable="false"
+                                >
+                              </el-alert>
+                              <el-button
+                                  type="primary"
+                                  size="mini"
+                                  @click="showelementBynlist"
+                                  >点击匹配
                               </el-button >
                             </div>
+                            
+                            <div style="margin-top:20px">
+                                <div v-for="item in elementBynlist" class="elementBynlistbox"  v-if="ishowelementBynlist"> 
+                                  <el-button round class="elementBynlist">{{item.name}}</el-button> 
+                              </div>
+                            </div>
+                          </div>
 
                       </el-tab-pane>
+
                       <el-tab-pane label="修改元素信息" name="修改元素信息">
                           <div class=" flexItemsC " style="justify-content: right;">
                             <el-button
@@ -176,6 +232,7 @@
                           </div>
 
                       </el-tab-pane>
+
                       <el-tab-pane label="编辑HTML表单" name="编辑HTML表单">
                         <el-tabs v-model="htmlactiveName" @tab-click="htmlhandleClick">
                           <el-tab-pane label="编辑元素坐标" name="first">
@@ -953,7 +1010,7 @@ export default {
       },
       excelopmodel:'',
       excelopmodelloading:false,
-      editableTabsValue:'创建新的元素表',
+      editableTabsValue:'关联已有元素表',
       optionList:[
       ],
       exceloptions:[],
@@ -985,6 +1042,15 @@ export default {
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
         }],
+        isshowAddtab:false,
+        elementBynlist:[
+          {name:'元素名称1',id:1},
+          {name:'元素名称1',id:1},
+          {name:'元素名称1',id:1},
+          {name:'元素名称1',id:1},
+          {name:'元素名称1',id:1},
+        ],//定位匹配lisyt
+        ishowelementBynlist:false
 
     };
   },
@@ -1286,9 +1352,6 @@ export default {
 
           template: res.data,
           methods: {
-            contextmenuClick(event) {
-              //event.preventDefault();
-            },
             getInformation (name, tr, td) {//鼠标右键事件
               _that.getInformation(name, tr, td)
             },
@@ -1303,11 +1366,6 @@ export default {
             checkboxGroupChange(){},
             formRemoteChange(){},
             dateKeydown(){},
-            keyupShiftUp() {},
-            keyupShiftDown() {},
-            keyupShiftLeft() {},
-            keyupShiftRight() {},
-            inputLeftClick() {},
         },
 
 
@@ -1336,9 +1394,6 @@ export default {
           }
         },
         methods: {
-          contextmenuClick(event) {
-            //event.preventDefault();
-          },
           getInformation (name, tr, td) {//鼠标右键事件
             _that.getInformation(name, tr, td)
           },
@@ -1353,11 +1408,6 @@ export default {
           checkboxGroupChange(){},
           formRemoteChange(){},
           dateKeydown(){},
-          keyupShiftUp() {},
-          keyupShiftDown() {},
-          keyupShiftLeft() {},
-          keyupShiftRight() {},
-          inputLeftClick() {},
         }
       })
       var component = new MyComponent().$mount()
@@ -2107,12 +2157,20 @@ export default {
       }else if(tab.name==='关联已有元素表'){
         this.tabTypeLazyTreeAll()
       }
+      this.isshowAddtab=false
     },
 
     //同步到项目
     syncproject(){
       console.log('同步到项目');
       this.syncprojectVisible=true
+    },
+    //新增元素表
+    showAddtab(){
+      this.isshowAddtab=true
+    },
+    showelementBynlist(){
+      this.ishowelementBynlist=true
     }
 
   },
@@ -2213,4 +2271,12 @@ export default {
     display: flex;
     justify-content: space-between;
 }
+.elementBynlistbox{
+  text-align: center;
+  margin-top: 5px;
+}
+.elementBynlist{
+  width: 250px;
+
+}
 </style>