updata

f/web-kboss/src/views/operation/publicCostomerManagement/index.vue

@@ -1,13 +1,69 @@
 <template>
   <div class="container">
     <el-card>
-      <el-table v-loading="loading" ref="table" :data="tableData" tooltip-effect="dark" style="width: 100%"
+      <!-- 搜索表单 -->
-        @selection-change="handleSelectionChange" height="calc(100vh - 190px)">
+      <el-form :model="query" inline class="search-form">
+        <el-form-item label="客户名称">
+          <el-input
+            v-model="query.orgname"
+            placeholder="请输入客户名称"
+            size="small"
+            clearable
+            @keyup.enter.native="handleSearch">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="联系方式">
+          <el-input
+            v-model="query.contactor_phone"
+            placeholder="请输入联系方式"
+            size="small"
+            clearable
+            @keyup.enter.native="handleSearch">
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
+          <el-button size="small" @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <!-- 客户表格 -->
+      <el-table
+        v-loading="loading"
+        ref="table"
+        :data="tableData"
+        tooltip-effect="dark"
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+        height="calc(100vh - 320px)">
         <el-table-column type="selection" width="55"></el-table-column>
-        <el-table-column prop="orgname" label="客户名称"></el-table-column>
+        <el-table-column prop="orgname" label="客户名称">
+          <template slot-scope="scope">
+            {{ scope.row.orgname || scope.row.contactor_phone || '未知客户' }}
+          </template>
+        </el-table-column>
         <el-table-column label="联系方式" prop="contactor_phone"></el-table-column>
-        <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="address" label="地址" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{ scope.row.address || '未填写地址' }}
+          </template>
+        </el-table-column>
       </el-table>
+
+      <!-- 分页组件 -->
+      <div class="pagination-container">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="query.page"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="query.size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total">
+        </el-pagination>
+      </div>
+
+      <!-- 操作按钮 -->
       <div class="button-container">
         <el-button @click="selectSales()" size="small" type="primary" :disabled="!hasSelection" class="action-button">
           选择销售
@@ -18,13 +74,14 @@
         </el-button>
       </div>
     </el-card>
+
+    <!-- 选择销售对话框 -->
     <el-dialog class="myDialog" title="选择销售人员" :visible.sync="isShow" width="30%" :before-close="handleClose">
       <el-form ref="form" :model="form" label-width="130px">
-        <el-form-item label="请选择销售人员:" style="width: 80%;" prop="sales">
+        <el-form-item label="请选择销售人员:" style="width: 100%;" prop="sales">
-          <!-- 添加一个容器来应用滚动样式 -->
           <div class="radio-group-container">
             <el-radio-group v-model="form.id">
-              <div class="radio" v-for="(item, index) in salesData" :key="index">
+              <div class="radio-item" v-for="(item, index) in salesData" :key="index">
                 <el-radio :label="item.id">{{ item.username }}</el-radio>
               </div>
             </el-radio-group>
@@ -49,19 +106,22 @@ export default {
       tableData: [],
       salesData: [],
       isShow: false,
-      page: 1,
+      total: 0,
       form: {
         username: '',
         id: ''
       },
-      defaultProps: {
-        children: "children",
-        label: "username",
-      },
       customerid: [], // 客户的id
-      hasSelection: false, // 新增：跟踪是否有选中项
+      hasSelection: false, // 跟踪是否有选中项
       userId: sessionStorage.getItem("userId"),
       orgid: sessionStorage.getItem("orgid"),
+      query: {
+        page: 1,
+        size: 10,
+        orgid: this.orgid,
+        orgname: '',
+        contactor_phone: ''
+      },
     };
   },
   created() {
@@ -70,25 +130,26 @@ export default {
   },
   methods: {
     getNoinvitationcode() { // 获取全部客户
-      getNoinvitationcodeAPI({ orgid: this.orgid }).then(res => {
+      this.loading = true;
+      getNoinvitationcodeAPI(this.query).then(res => {
         this.loading = false;
         this.tableData = res.data.rows;
-        // console.log(res);
+        this.total = res.pagination.total;
+      }).catch(() => {
+        this.loading = false;
       });
     },
     getSales() { // 展示所有销售人员
       getSalesAPI({ role: "销售", userid: this.userId }).then(res => {
-        // console.log(res);
+        if (res.data && res.data.length > 0) {
-        if (res.data.length > 0) {
           this.salesData = res.data.map((item) => {
             return {
               username: item.username,
               id: item.id,
             };
           });
-          // 注意：这里通常不需要设置默认选中第一个销售，
+        } else {
-          // 因为用户需要主动选择。如果需要默认选中，可以取消注释下一行
+          this.salesData = [];
-          // this.form.id = this.salesData[0]?.id || '';
         }
       });
     },
@@ -98,14 +159,12 @@ export default {
     },
     handleSelectionChange(val) {
       // 更新选中的客户ID数组
-      this.customerid = val.map(item => item.id); // 更简洁的写法
+      this.customerid = val.map(item => item.id);
       // 更新是否有选中项的状态
       this.hasSelection = this.customerid.length > 0;
-      // console.log(this.customerid);
     },
     cancelSelection() {
       this.$refs.table.clearSelection();
-      // 清除选择后，确保按钮状态更新（虽然通常 clearSelection 会触发 handleSelectionChange）
       this.hasSelection = false;
       this.customerid = [];
     },
@@ -163,54 +222,84 @@ export default {
     cancel() {
       this.isShow = false;
     },
-    // getFormData(object) { // 转换参数为formdata格式 - 当前未使用
+    handleSearch() {
-    //   const formData = new FormData();
+      this.query.page = 1; // 搜索时重置到第一页
-    //   Object.keys(object).forEach(key => {
+      this.getNoinvitationcode();
-    //     const value = object[key];
+    },
-    //     if (Array.isArray(value)) {
+    handleReset() {
-    //       value.forEach((subValue, i) => {
+      this.query = {
-    //         formData.append(key + `[${i}]`, subValue)
+        page: 1,
-    //       })
+        size: 10,
-    //     } else {
+        orgid: this.orgid,
-    //       formData.append(key, object[key])
+        orgname: '',
-    //     }
+        contactor_phone: ''
-    //   })
+      };
-    //   return formData;
+      this.getNoinvitationcode();
-    // },
+    },
+    handleSizeChange(size) {
+      this.query.size = size;
+      this.getNoinvitationcode();
+    },
+    handleCurrentChange(page) {
+      this.query.page = page;
+      this.getNoinvitationcode();
+    }
   }
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .container {
+  padding: 20px;
+
+  .search-form {
+    margin-bottom: 20px;
+
+    .el-form-item {
+      margin-bottom: 10px;
+      margin-right: 15px;
+    }
+  }
+
+  .pagination-container {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+  }
+
   .button-container {
     margin-top: 20px;
     display: flex;
-    gap: 10px; // 按钮之间的间距
+    gap: 10px;
-  }
 
-  .action-button {
+    .action-button {
-    padding: 8px 16px; // 增加按钮内边距
+      padding: 8px 16px;
-    font-size: 14px; // 调整字体大小
+      font-size: 14px;
-    border-radius: 4px; // 添加圆角
+      border-radius: 4px;
+    }
   }
 
   .myDialog {
     .radio-group-container {
-      // 为单选按钮组添加最大高度和滚动条
       max-height: 200px;
       overflow-y: auto;
-      border: 1px solid #e4e7ed; // 可选：添加边框
+      border: 1px solid #e4e7ed;
-      border-radius: 4px; // 可选：添加圆角
+      border-radius: 4px;
-      padding: 5px; // 可选：内部填充
+      padding: 10px;
     }
 
-    .radio {
+    .radio-item {
-      // 单选按钮项的样式（如果需要）
+      margin-bottom: 8px;
-      margin-bottom: 5px; // 项之间的间距
+      padding: 5px;
+      border-radius: 4px;
+      transition: background-color 0.3s;
+
+      &:hover {
+        background-color: #f5f7fa;
+      }
 
       &:last-child {
-        margin-bottom: 0; // 最后一项移除下边距
+        margin-bottom: 0;
       }
     }
 
@@ -220,4 +309,7 @@ export default {
     }
   }
 }
+/deep/.el-table__row{
+  height: 62px!important;
+}
 </style>