企微客户表头固定

src/views/qw/externalContact/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px" class="search-form">
       <el-form-item label="企微公司" prop="corpId">
             <el-select v-model="queryParams.corpId" placeholder="企微公司"  size="small" @change="updateCorpId()">
               <el-option
@@ -54,6 +54,8 @@
           </div>
         </div>
       </el-form-item>
+
+      <!-- 用户属性 -->
       <el-form-item label="用户类别" prop="type">
         <el-select v-model="queryParams.type" placeholder="请选择用户类别" clearable size="small">
           <el-option
@@ -64,15 +66,6 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="所属销售" prop="companyUser">
-        <el-input
-          v-model="queryParams.companyUser"
-          placeholder="请输入昵称或者手机号"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
       <el-form-item label="性别" prop="gender">
         <el-select v-model="queryParams.gender" placeholder="性别" clearable size="small">
           <el-option
@@ -89,145 +82,87 @@
           <el-option label="是" :value="1"/>
         </el-select>
       </el-form-item>
-      <el-form-item label="客户等级" prop="level">
-        <el-select v-model="queryParams.level" placeholder="客户等级" clearable size="small">
-          <el-option
-            v-for="dict in ratingType"
-            :key="dict.dictValue"
-            :label="dict.dictLabel"
-            :value="dict.dictValue"
-          />
-        </el-select>
+      <!-- 标签 -->
+      <el-form-item label="标签" prop="tagIds">
+        <div @click="hangleChangeTags()" style="cursor: pointer; border: 1px solid #DCDFE6; border-radius: 4px; background-color: #FFF; overflow: hidden; width: 210px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; flex-wrap: wrap; box-sizing: border-box">
+          <el-tag type="success"
+                  closable
+                  :disable-transitions="false"
+                  v-for="list in selectTags"
+                  :key="list.tagId"
+                  @close="handleCloseTags(list)"
+                  size="small"
+                  style="margin: 2px;"
+          >{{list.name}}
+          </el-tag>
+        </div>
       </el-form-item>
-      <el-form-item label="等级升降" prop="levelType">
-        <el-select v-model="queryParams.levelType" placeholder="等级升降" clearable size="small">
-          <el-option
-            v-for="dict in ratingUpFall"
-            :key="dict.dictValue"
-            :label="dict.dictLabel"
-            :value="dict.dictValue"
-          />
-        </el-select>
+      <el-form-item label="排除标签" prop="outTagIds">
+        <div @click="hangleChangeOutTags()"
+             style="cursor: pointer; border: 1px solid #DCDFE6; border-radius: 4px; background-color: #FFF; overflow: hidden; width: 210px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; flex-wrap: wrap; box-sizing: border-box">
+          <el-tag type="success"
+                  closable
+                  :disable-transitions="false"
+                  v-for="list in outSelectTags"
+                  :key="list.tagId"
+                  @close="handleCloseOutTags(list)"
+                  size="small"
+                  style="margin: 2px;"
+          >{{ list.name }}
+          </el-tag>
+        </div>
+      </el-form-item>
+      <!-- 联系信息 -->
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="queryParams.remark" placeholder="请输入备注" clearable size="small" @keyup.enter.native="handleQuery"/>
       </el-form-item>
-
-
       <el-form-item label="电话号码" prop="remarkMobiles">
-        <el-input
-          v-model="queryParams.remarkMobiles"
-          placeholder="请输入备注电话号码"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.remarkMobiles" placeholder="请输入备注电话号码" clearable size="small" @keyup.enter.native="handleQuery"/>
       </el-form-item>
-
+      <el-form-item label="所属销售" prop="companyUser">
+        <el-input v-model="queryParams.companyUser" placeholder="请输入昵称或者手机号" clearable size="small" @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <!-- 状态 -->
       <el-form-item label="来源" prop="addWay">
-
         <el-select v-model="queryParams.addWay" placeholder="来源" clearable size="small">
-          <el-option
-            v-for="dict in addWayOptions"
-            :key="dict.dictValue"
-            :label="dict.dictLabel"
-            :value="dict.dictValue"
-          />
+          <el-option v-for="dict in addWayOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
         </el-select>
       </el-form-item>
       <el-form-item label="状态" prop="status">
-
         <el-select v-model="queryParams.status" placeholder="状态" clearable size="small">
-          <el-option
-            v-for="dict in statusOptions"
-            :key="dict.dictValue"
-            :label="dict.dictLabel"
-            :value="dict.dictValue"
-          />
+          <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
         </el-select>
       </el-form-item>
-      <el-form-item label="转接状态" prop="addWay">
-
+      <el-form-item label="转接状态" prop="transferStatus">
         <el-select v-model="queryParams.transferStatus" placeholder="转接状态" clearable size="small">
-          <el-option
-            v-for="dict in transferStatusOptions"
-            :key="dict.dictValue"
-            :label="dict.dictLabel"
-            :value="dict.dictValue"
-          />
+          <el-option v-for="dict in transferStatusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
         </el-select>
       </el-form-item>
-      <el-form-item label="是否绑定会员" prop="isBindMini">
-        <el-select v-model="queryParams.isBindMini" placeholder="是否绑定会员" clearable size="small" @change="handleQuery" >
-          <el-option
-            v-for="dict in isBindMiniOptions"
-            :key="dict.dictValue"
-            :label="dict.dictLabel"
-            :value="dict.dictValue"
-          />
+      <!-- 等级 -->
+      <el-form-item label="客户等级" prop="level">
+        <el-select v-model="queryParams.level" placeholder="客户等级" clearable size="small">
+          <el-option v-for="dict in ratingType" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
         </el-select>
       </el-form-item>
-      <el-form-item label="标签" prop="tagIds">
-        <div @click="hangleChangeTags()" style="cursor: pointer; border: 1px solid #e6e6e6; background-color: white; overflow: hidden; flex-grow: 1;width: 250px">
-          <div style="min-height: 35px; max-height: 200px; overflow-y: auto;">
-            <el-tag type="success"
-                    closable
-                    :disable-transitions="false"
-                    v-for="list in this.selectTags"
-                    :key="list.tagId"
-                    @close="handleCloseTags(list)"
-                    style="margin: 3px;"
-            >{{list.name}}
-            </el-tag>
-          </div>
-        </div>
-      </el-form-item>
-
-      <el-form-item label="排除标签" prop="outTagIds">
-        <div @click="hangleChangeOutTags()"
-             style="cursor: pointer; border: 1px solid #e6e6e6; background-color: white; overflow: hidden; flex-grow: 1;width: 250px">
-          <div style="min-height: 35px; max-height: 200px; overflow-y: auto;">
-            <el-tag type="success"
-                    closable
-                    :disable-transitions="false"
-                    v-for="list in this.outSelectTags"
-                    :key="list.tagId"
-                    @close="handleCloseOutTags(list)"
-                    style="margin: 3px;"
-            >{{ list.name }}
-            </el-tag>
-          </div>
-        </div>
+      <el-form-item label="等级升降" prop="levelType">
+        <el-select v-model="queryParams.levelType" placeholder="等级升降" clearable size="small">
+          <el-option v-for="dict in ratingUpFall" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
+        </el-select>
       </el-form-item>
-      <el-form-item label="备注" prop="remark">
-        <el-input
-          v-model="queryParams.remark"
-          placeholder="请输入备注"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
+      <el-form-item label="是否绑定会员" prop="isBindMini">
+        <el-select v-model="queryParams.isBindMini" placeholder="是否绑定会员" clearable size="small" @change="handleQuery">
+          <el-option v-for="dict in isBindMiniOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
+        </el-select>
       </el-form-item>
-
-       <el-form-item label="添加时间" prop="createTime">
-          <el-date-picker v-model="createTime" size="small" style="width: 220px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="change"></el-date-picker>
+      <!-- 时间 -->
+      <el-form-item label="添加时间" prop="createTime">
+        <el-date-picker v-model="createTime" size="small" style="width: 220px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="change"/>
       </el-form-item>
-
-
-
-
       <el-form-item label="流失时间" prop="lossTime">
-        <el-date-picker clearable size="small"
-                        v-model="queryParams.lossTime"
-                        type="date"
-                        value-format="yyyy-MM-dd"
-                        placeholder="选择流失时间">
-        </el-date-picker>
+        <el-date-picker clearable size="small" v-model="queryParams.lossTime" type="date" value-format="yyyy-MM-dd" placeholder="选择流失时间"/>
       </el-form-item>
       <el-form-item label="删除时间" prop="delTime">
-        <el-date-picker clearable size="small"
-                        v-model="queryParams.delTime"
-                        type="date"
-                        value-format="yyyy-MM-dd"
-                        placeholder="选择删除时间">
-        </el-date-picker>
+        <el-date-picker clearable size="small" v-model="queryParams.delTime" type="date" value-format="yyyy-MM-dd" placeholder="选择删除时间"/>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -336,7 +271,7 @@
 <!--      <el-tab-pane label="未绑定CRM" name="noBind"></el-tab-pane>-->
 <!--    </el-tabs>-->
 
-    <el-table v-loading="loading" :data="externalContactList" @selection-change="handleSelectionChange" border>
+    <el-table v-loading="loading" :data="externalContactList" @selection-change="handleSelectionChange" border height="calc(100vh - 310px)">
       <el-table-column type="selection" width="55" align="center" fixed="left"/>
       <el-table-column label="企微客户ID" align="center" prop="id" fixed="left"/>
       <el-table-column label="企微客户头像" align="center" prop="avatar" width="100px" fixed="left">
@@ -2285,6 +2220,11 @@ export default {
 
 </script>
 <style scoped>
+/* 搜索表单紧凑布局 */
+.search-form .el-form-item {
+  margin-bottom: 6px;
+  margin-right: 10px;
+}
 /* CSS 样式 */
 .tag-container {
   display: flex;