元素识别，左侧树可折叠，展开

src/views/exctab/ElementIdentification/index.vue

@@ -2,11 +2,11 @@
   <div class="boxswai">
     <div class="boxnei">
       <el-row
-        :gutter="20"
+        :gutter="0"
         style="height:100%;"
       >
         <el-col
-          :span="5"
+          :span="showLeft?5:0"
           style="height:99%;"
         >
           <div
@@ -52,112 +52,118 @@
           </div>
         </el-col>
         <el-col
-          :span="19"
-          style="height:98%;"
+          :span="showLeft?19:24"
+          style="height:98%;display: flex;"
         >
-          <div v-if="addElementForm.deptName==''">表名称</div>
-          <div v-else>{{addElementForm.deptName}}</div>
-          <el-row
-            class="martop20"
-            :gutter="20"
-            style="height:96%;"
-          >
-            <el-col
-              :span="16"
-              style="overflow:auto;height:100%;border:1px solid black; border-radius: 4px;box-sizing: border-box;padding: 10px 10px;"
+          <div class="flex flex-center" style="width:20px;height:100%;cursor: pointer;" @click="showLeftChange">
+            <i v-if="showLeft" class="el-icon-d-arrow-left"></i>
+            <i v-else class="el-icon-d-arrow-right"></i>
+          </div>
+          <div class="flex1" style="padding-left:10px;">
+            <div v-if="addElementForm.deptName==''">表名称</div>
+            <div v-else>{{addElementForm.deptName}}</div>
+            <el-row
+              class="martop20"
+              :gutter="20"
+              style="height:96%;"
             >
-              <div
-                class="parent"
-                id='parent'
+              <el-col
+                :span="showLeft?16:12"
+                style="overflow:auto;height:100%;border:1px solid black; border-radius: 4px;box-sizing: border-box;padding: 10px 10px;"
               >
-              </div>
-            </el-col>
-            <el-col
-              :span="8"
-              style="overflow:auto;height:100%;"
-            >
-              <div class="flexBetween flexItemsC">
-                <el-button
-                  type="info"
-                  size="mini"
-                  :disabled="from.id==''"
-                  @click="automaticRecognition"
-                >自动识别</el-button>
                 <div
-                  class="el-icon-plus"
-                  @click="pushTableData"
-                  style="width:16px;height:16px;backgroundColor:#1DD81D;color:#fff;cursor: pointer;"
-                ></div>
-              </div>
-              <el-table
-                class="martop20"
-                :data="tableData"
-                border
-                style="width: 100%"
-              >
-                <el-table-column
-                  type="index"
-                  label="坐标"
-                >
-                </el-table-column>
-                <el-table-column
-                  prop="eName"
-                  label="元素名称"
+                  class="parent"
+                  id='parent'
                 >
-                  <template slot-scope="scope">
-                    <el-input
-                      v-model="scope.row.eName"
-                      placeholder="请输入内容"
-                    ></el-input>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="eType"
-                  label="数据类型"
+                </div>
+              </el-col>
+              <el-col
+                :span="showLeft?8:12"
+                style="overflow:auto;height:100%;"
+              >
+                <div class="flexBetween flexItemsC">
+                  <el-button
+                    type="info"
+                    size="mini"
+                    :disabled="from.id==''"
+                    @click="automaticRecognition"
+                  >自动识别</el-button>
+                  <div
+                    class="el-icon-plus"
+                    @click="pushTableData"
+                    style="width:16px;height:16px;backgroundColor:#1DD81D;color:#fff;cursor: pointer;"
+                  ></div>
+                </div>
+                <el-table
+                  class="martop20"
+                  :data="tableData"
+                  border
+                  style="width: 100%"
                 >
-                  <template slot-scope="scope">
-                    <el-select
-                      v-model="scope.row.eType"
-                      placeholder="请选择"
-                    >
-                      <el-option
-                        v-for="item in dataType"
-                        :key="item.dictKey"
-                        :label="item.dictValue"
-                        :value="item.dictKey"
+                  <el-table-column
+                    type="index"
+                    label="坐标"
+                  >
+                  </el-table-column>
+                  <el-table-column
+                    prop="eName"
+                    label="元素名称"
+                  >
+                    <template slot-scope="scope">
+                      <el-input
+                        v-model="scope.row.eName"
+                        placeholder="请输入内容"
+                      ></el-input>
+                    </template>
+                  </el-table-column>
+                  <el-table-column
+                    prop="eType"
+                    label="数据类型"
+                  >
+                    <template slot-scope="scope">
+                      <el-select
+                        v-model="scope.row.eType"
+                        placeholder="请选择"
                       >
-                      </el-option>
-                    </el-select>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="eAllowDeviation"
-                  label="允许偏差值"
-                >
-                  <template slot-scope="scope">
-                    <el-input
-                      v-model="scope.row.eAllowDeviation"
-                      placeholder="请输入内容"
-                    ></el-input>
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作">
-                  <template slot-scope="scope">
-                    <el-link
-                      type="danger"
-                      @click="deleteTableData(scope.$index)"
-                    >删除</el-link>
-                  </template>
-                </el-table-column>
-              </el-table>
-              <el-button
-                type="success"
-                class="martop20 dingwei"
-                @click="establish()"
-                :disabled="from.id==''"
-              >关联WBS并创建元素</el-button>
-            </el-col>
-          </el-row>
+                        <el-option
+                          v-for="item in dataType"
+                          :key="item.dictKey"
+                          :label="item.dictValue"
+                          :value="item.dictKey"
+                        >
+                        </el-option>
+                      </el-select>
+                    </template>
+                  </el-table-column>
+                  <el-table-column
+                    prop="eAllowDeviation"
+                    label="允许偏差值"
+                  >
+                    <template slot-scope="scope">
+                      <el-input
+                        v-model="scope.row.eAllowDeviation"
+                        placeholder="请输入内容"
+                      ></el-input>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="操作" width="60">
+                    <template slot-scope="scope">
+                      <el-link
+                        type="danger"
+                        @click="deleteTableData(scope.$index)"
+                      >删除</el-link>
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <el-button
+                  type="success"
+                  class="martop20 dingwei"
+                  @click="establish()"
+                  :disabled="from.id==''"
+                >关联WBS并创建元素</el-button>
+              </el-col>
+            </el-row>
+          </div>
         </el-col>
       </el-row>
 
@@ -371,6 +377,8 @@ export default {
       ownerTypeList: [],
 
       activeName:'link',
+
+      showLeft:true,//左侧树是否显示
     }
   },
   methods: {
@@ -737,6 +745,12 @@ export default {
         this.ownerTypeList = res.data.data;
       })
     },
+
+    //修改树显示状态
+    showLeftChange(){
+      this.showLeft = !this.showLeft;
+    }
+
   },
   created () {
     this.getOwnerTypelist();