表单样式修改

src/views/base/personInfo-list.vue

@@ -115,17 +115,18 @@
       style="min-height:400px;"
       v-loading="loading"
       stripe
+      height="100%"
       @sort-change="sortChange"
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55"></el-table-column>
-      <el-table-column prop="id" label="序号" width="100"></el-table-column>
-      <el-table-column prop="companyName" label="企业" width="280"></el-table-column>
-      <el-table-column prop="faceImageUrl" label="人员照片" width="110" fixed="left">
+      <el-table-column prop="id" label="序号" width="80" fixed="left"></el-table-column>
+      <el-table-column prop="companyName" label="企业" width="250"></el-table-column>
+      <el-table-column prop="faceImageUrl" label="人员照片" width="80" fixed="left">
         <template slot-scope="{row}">
           <a :href="row.faceImageUrl" target="_blank">
             <el-avatar
-              :size="60"
+              :size="40"
               :src="row.faceImageUrl+'?x-oss-process=image/resize,m_lfit,h_100,w_100'"
               :key="row.id"
             ></el-avatar>
@@ -135,11 +136,11 @@
       <el-table-column prop="name" label="姓名" width="80" fixed="left"></el-table-column>
       <el-table-column prop="phone" label="手机号" width="180"></el-table-column>
       <el-table-column prop="idCard" label="身份证" width="200"></el-table-column>
-      <el-table-column prop="position1" :label="position1" width="250"></el-table-column>
-      <el-table-column prop="position2" :label="position2" width="250"></el-table-column>
-      <el-table-column prop="position3" :label="position3" width="250"></el-table-column>
-      <el-table-column prop="position4" :label="position4" width="250"></el-table-column>
-      <el-table-column prop="position5" :label="position5" width="250"></el-table-column>
+      <el-table-column prop="position1" :label="position1" width="250" v-if="position1Show"></el-table-column>
+      <el-table-column prop="position2" :label="position2" width="250" v-if="position2Show"></el-table-column>
+      <el-table-column prop="position3" :label="position3" width="250" v-if="position3Show"></el-table-column>
+      <el-table-column prop="position4" :label="position4" width="250" v-if="position4Show"></el-table-column>
+      <el-table-column prop="position5" :label="position5" width="250" v-if="position5Show"></el-table-column>
       <el-table-column prop="openId" label="是否绑定公众号" width="180">
         <template slot-scope="{row}">{{row.openId == null ? "否" : "是"}}</template>
       </el-table-column>
@@ -195,30 +196,20 @@
           ></el-switch>
         </template>
       </el-table-column>
-      <el-table-column label="操作" width="300" fixed="right">
+      <el-table-column label="操作" width="300">
         <template slot-scope="{row}">
           <el-row>
-            <el-col :span="8">
-              <el-button size="mini" type="warning" @click="handleEdit(row)">编辑</el-button>
-            </el-col>
-            <el-col :span="8">
-              <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
-            </el-col>
-          </el-row>
-          <el-row style="margin-top:5px;">
-            <el-col :span="8">
-              <el-button size="mini" type="success" @click="bindDevice(row)">绑定设备</el-button>
-            </el-col>
-            <el-col :span="8">
+            <el-col>
+              <el-link type="primary" :underline="false" @click="handleEdit(row)">编辑</el-link>-
+              <el-link type="danger" :underline="false" @click="handleDelete(row)">删除</el-link>-
+              <el-link type="primary" :underline="false" @click="bindDevice(row)">绑定设备</el-link>-
               <span v-if="row.faceBound">
-                <el-button size="mini" type="success" :disabled="true" @click="uploadData(row)">上传数据</el-button>
+                <el-link type="primary" :underline="false" :disabled="true" @click="uploadData(row)">上传数据</el-link>-
               </span>
               <span v-if="!row.faceBound">
-                <el-button size="mini" type="success" @click="uploadData(row)">上传数据</el-button>
+                <el-link type="primary" :underline="false" @click="uploadData(row)">上传数据</el-link>-
               </span>
-            </el-col>
-            <el-col :span="8">
-              <el-button size="mini" type="info" @click="showBound(row)">已绑定设备</el-button>
+              <el-link type="primary" :underline="false" @click="showBound(row)">已绑定设备</el-link>
             </el-col>
           </el-row>
         </template>
@@ -372,12 +363,12 @@ export default {
       loading: false,
       tableData: [],
       pageIndex: 1,
-      pageSize: 10,
+      pageSize: 30,
       totalPages: 0,
       totalElements: 0,
       field: "",
       direction: "",
-      pageSizeList: [10, 20, 30],
+      pageSizeList: [30, 50, 100],
       multipleSelection: [],
       showModal: false,
       modalTitle: "",
@@ -400,6 +391,11 @@ export default {
       position3: "",
       position4: "",
       position5: "",
+      position1Show: false,
+      position2Show: false,
+      position3Show: false,
+      position4Show: false,
+      position5Show: false,
       showDeviceModal: false,
       showBoundModal: false,
       personId: "",
@@ -415,11 +411,27 @@ export default {
 
     companyPositionApi.detailForCompany().then(function(response) {
       var jsonData = response.data.data;
-      self.position1 = jsonData.position1Name;
-      self.position2 = jsonData.position2Name;
-      self.position3 = jsonData.position3Name;
-      self.position4 = jsonData.position4Name;
-      self.position5 = jsonData.position5Name;
+      if (jsonData.position1Name != null) {
+        self.position1 = jsonData.position1Name;
+        self.position1Show = true;
+      }
+      if (jsonData.position2Name != null) {
+        self.position2 = jsonData.position2Name;
+        self.position2Show = true;
+      }
+      if (jsonData.position3Name != null) {
+        self.position3 = jsonData.position3Name;
+        self.position3Show = true;
+      }
+      if (jsonData.position4Name != null) {
+        self.position4 = jsonData.position4Name;
+        self.position4Show = true;
+      }
+      if (jsonData.position5Name != null) {
+        alert(jsonData.position5Name);
+        self.position5 = jsonData.position5Name;
+        self.position5Show = true;
+      }
     });
   },
   methods: {