调整销售绑定员工用户

src/views/company/companyUser/index.vue

@@ -706,68 +706,96 @@
     </el-dialog>
 
     <!-- 绑定会员对话框 -->
-    <el-dialog :title="member.title" :visible.sync="member.open" width="600px" append-to-body>
-      <!-- 添加筛选表单 -->
-      <el-form :model="memberQueryParams" :inline="true" @submit.native.prevent>
-        <el-form-item label="昵称">
-          <el-input
-            v-model="memberQueryParams.nickName"
-            placeholder="请输入昵称"
-            clearable        style="width: 160px;"
-            @keyup.enter.native="handleMemberQuery"
-          />
-        </el-form-item>
-        <el-form-item label="手机号">
-          <el-input
-            v-model="memberQueryParams.phone"
-            placeholder="请输入手机号"
-            clearable        style="width: 160px;"
-            @keyup.enter.native="handleMemberQuery"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button icon="el-icon-search" size="mini" @click="handleMemberQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" size="mini" @click="resetMemberQuery">重置</el-button>
-        </el-form-item>
+    <el-dialog
+      :title="member.title"
+      :visible.sync="member.open"
+      width="800px"
+      append-to-body
+      class="bind-member-dialog"
+    >
+      <!-- 筛选表单 - 优化布局，修复按钮换行问题 -->
+      <el-form
+        :model="memberQueryParams"
+        :inline="true"
+        @submit.native.prevent
+        class="filter-form"
+      >
+        <div style="display: flex; flex-wrap: wrap; gap: 12px; align-items: center;">
+          <el-form-item label="昵称" style="margin-bottom: 0; flex: 1 1 auto; min-width: 160px;">
+            <el-input
+              v-model="memberQueryParams.nickName"
+              placeholder="请输入昵称"
+              clearable
+              @keyup.enter.native="handleMemberQuery"
+              prefix-icon="el-icon-user"
+              style="width: 100%;"
+            />
+          </el-form-item>
+
+          <el-form-item label="手机号" style="margin-bottom: 0; flex: 1 1 auto; min-width: 160px;">
+            <el-input
+              v-model="memberQueryParams.phone"
+              placeholder="请输入手机号"
+              clearable
+              @keyup.enter.native="handleMemberQuery"
+              prefix-icon="el-icon-phone"
+              style="width: 100%;"
+            />
+          </el-form-item>
+
+          <el-form-item style="margin-bottom: 0; flex: 0 0 auto;">
+            <el-button type="primary" icon="el-icon-search" @click="handleMemberQuery" size="mini">搜索</el-button>
+            <el-button icon="el-icon-refresh" @click="resetMemberQuery" size="mini">重置</el-button>
+          </el-form-item>
+        </div>
       </el-form>
 
-      <div style="height: 300px; margin-top: 10px;">
+      <!-- 表格区域 -->
+      <div class="table-container" style="margin-top: 16px;">
         <el-table
           :data="memberList"
-          height="220"
+          height="260"
           highlight-current-row
           @current-change="selectMember"
           v-loading="loading"
+          border
+          stripe
+          size="small"
         >
-          <!--          <el-table-column type="selection" width="55"></el-table-column>-->
-          <el-table-column property="userId" label="ID" width="80"></el-table-column>
-          <el-table-column property="nickName" label="昵称" width="120"></el-table-column>
-          <el-table-column property="phone" label="手机号" width="120"></el-table-column>
-          <el-table-column property="status" label="绑定状态" width="100">
+          <el-table-column property="userId" label="ID" width="70" align="center"></el-table-column>
+          <el-table-column property="nickName" label="昵称" min-width="130" show-overflow-tooltip></el-table-column>
+          <el-table-column property="phone" label="手机号" width="130" align="center"></el-table-column>
+          <el-table-column property="status" label="绑定状态" width="100" align="center">
             <template slot-scope="scope">
               <el-tag
                 :type="scope.row.status === 1 ? 'success' : 'info'"
-                size="mini">
+                size="small"
+                effect="light"
+              >
                 {{ scope.row.status === 1 ? '已绑定' : '未绑定' }}
               </el-tag>
             </template>
           </el-table-column>
         </el-table>
+
         <!-- 分页组件 -->
+        <!-- 修改分页组件，添加判断条件 -->
         <pagination
           v-show="memberTotal > 0"
           :total="memberTotal"
           :page.sync="memberQueryParams.pageNum"
           :limit.sync="memberQueryParams.pageSize"
-          @pagination="getMemberList"  style="margin-top: 10px; text-align: center;"
+          @pagination="handlePagination"
+          style="margin-top: 10px; text-align: center;"
         />
       </div>
+
+      <!-- 底部按钮 -->
       <div slot="footer" class="dialog-footer">
-        <el-button @click="cancelBindMember">取 消</el-button>
-        <el-button type="primary" @click="confirmBindMember">确 定</el-button>
+        <el-button @click="cancelBindMember" size="small">取 消</el-button>
+        <el-button type="primary" @click="confirmBindMember" size="small">确 定</el-button>
       </div>
     </el-dialog>
-
   </div>
 </template>
 
@@ -1060,6 +1088,12 @@ export default {
     });
   },
   methods: {
+    handlePagination(data) {
+      // 添加防抖或判断，避免初始化时自动触发
+      if (this.member.open) {
+        this.getMemberList();
+      }
+    },
     onDomainBlur() {
       if (this.form.domain != null) {
         let value = this.form.domain.trim();
@@ -2016,3 +2050,32 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+/* 确保筛选表单在一行显示 */
+.bind-member-dialog :deep(.el-form--inline .el-form-item) {
+  margin-right: 0;
+}
+
+.bind-member-dialog :deep(.el-form-item__label) {
+  font-size: 13px;
+  padding-right: 8px;
+}
+
+/* 修复小屏幕下的显示问题 */
+@media (max-width: 580px) {
+  .bind-member-dialog .filter-form > div {
+    flex-direction: column;
+    align-items: stretch !important;
+  }
+
+  .bind-member-dialog .filter-form .el-form-item {
+    width: 100%;
+    margin-right: 0;
+  }
+
+  .bind-member-dialog .filter-form .el-form-item:last-child {
+    text-align: right;
+  }
+}
+</style>