提交

web-admin/src/components/CustomerSelector.vue

@@ -36,43 +36,53 @@
     </el-form>
 
     <!-- 客户列表 -->
-    <el-table v-loading="loading" :data="customerList" @current-change="handleCurrentChange" :max-height="400" border highlight-current-row>
-      <el-table-column type="index" label="序号" width="60" align="center" />
-      <el-table-column label="客户名称" prop="customerName" min-width="230" :show-overflow-tooltip="true" />
-      <el-table-column label="客户类型" prop="customerType" width="150" align="center">
-        <template #default="scope">
-          <DictTag dict-type="crm_customer_type" :value="scope.row.customerType" />
-        </template>
-      </el-table-column>
-      <el-table-column label="所属行业" prop="industry" width="120" :show-overflow-tooltip="true">
-        <template #default="scope">
-          <DictTag dict-type="crm_customer_industry" :value="scope.row.industry" />
-        </template>
-      </el-table-column>
-      <el-table-column label="客户级别" prop="level" width="100" align="center">
-        <template #default="scope">
-          <DictTag dict-type="crm_customer_level" :value="scope.row.level" />
-        </template>
-      </el-table-column>
-      <el-table-column label="联系人" prop="contactName" width="100" :show-overflow-tooltip="true" />
-      <el-table-column label="手机号码" prop="mobile" width="120" />
-      <el-table-column label="地区" prop="province" width="120">
-        <template #default="scope">
-          <span>{{ scope.row.province }} {{ scope.row.city }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="负责人" prop="ownerUserName" width="100" :show-overflow-tooltip="true" />
-    </el-table>
+    <div class="panel dialog-list-panel">
+      <div class="list-body list-wrap dialog-list-body-only">
+        <el-table
+          v-loading="loading"
+          :data="customerList"
+          class="list-table"
+          stripe
+          highlight-current-row
+          @current-change="handleCurrentChange"
+          :max-height="400"
+        >
+          <el-table-column type="index" label="序号" min-width="60" align="center" header-align="center" />
+          <el-table-column label="客户名称" prop="customerName" min-width="230" align="center" header-align="center" :show-overflow-tooltip="true" />
+          <el-table-column label="客户类型" prop="customerType" min-width="150" align="center" header-align="center">
+            <template #default="scope">
+              <DictTag dict-type="crm_customer_type" :value="scope.row.customerType" />
+            </template>
+          </el-table-column>
+          <el-table-column label="所属行业" prop="industry" min-width="120" align="center" header-align="center" :show-overflow-tooltip="true">
+            <template #default="scope">
+              <DictTag dict-type="crm_customer_industry" :value="scope.row.industry" />
+            </template>
+          </el-table-column>
+          <el-table-column label="客户级别" prop="level" min-width="100" align="center" header-align="center">
+            <template #default="scope">
+              <DictTag dict-type="crm_customer_level" :value="scope.row.level" />
+            </template>
+          </el-table-column>
+          <el-table-column label="联系人" prop="contactName" min-width="100" align="center" header-align="center" :show-overflow-tooltip="true" />
+          <el-table-column label="手机号码" prop="mobile" min-width="120" align="center" header-align="center" />
+          <el-table-column label="地区" prop="province" min-width="120" align="center" header-align="center">
+            <template #default="scope">
+              <span>{{ scope.row.province }} {{ scope.row.city }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="负责人" prop="ownerUserName" min-width="100" align="center" header-align="center" :show-overflow-tooltip="true" />
+        </el-table>
 
-    <!-- 分页 -->
-    <ListPagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-      class="mt-3"
-    />
+        <ListPagination
+          v-show="total > 0"
+          :total="total"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </div>
+    </div>
 
     <!-- 当前选中客户 -->
     <template v-if="currentCustomer">
@@ -188,6 +198,20 @@ const resetQuery = () => {
   handleQuery()
 }
 
+watchDebounced(
+  () => ({
+    customerName: queryParams.value.customerName,
+    customerNo: queryParams.value.customerNo,
+    customerType: queryParams.value.customerType,
+    mobile: queryParams.value.mobile
+  }),
+  () => {
+    queryParams.value.pageNum = 1
+    getList()
+  },
+  { debounce: 300, deep: true }
+)
+
 const handleCurrentChange = (row: any) => {
   currentCustomer.value = row
 }