增加排序

.env

@@ -1,5 +1,5 @@
 # title
-VITE_GLOB_APP_TITLE = 云趣科技
+VITE_GLOB_APP_TITLE = CRM
 
 # 本地运行端口号
 VITE_PORT = 8848

README.md

@@ -127,7 +127,7 @@ Geeker-Admin
 - 本地开发推荐使用 Chrome 最新版浏览器 [Download](https://www.google.com/intl/zh-CN/chrome/)。
 - 生产环境支持现代浏览器，不再支持 IE 浏览器，更多浏览器可以查看 [Can I Use Es Module](https://caniuse.com/?search=ESModule)。
 
-| ![IE](https://i.imgtg.com/2023/04/11/8z7ot.png) | ![Edge](https://i.imgtg.com/2023/04/11/8zr3p.png) | ![Firefox](https://i.imgtg.com/2023/04/11/8zKiU.png) | ![Chrome](https://i.imgtg.com/2023/04/11/8zNrx.png) | ![Safari](https://i.imgtg.com/2023/04/11/8zeGj.png) |
+| ![IE](https://i.imgtg.com/2023/04/11/8z7ot.png) | ![Edge](https://i.imgtg.com/2023/04/11/8zr3p.png) | ![Fiefox]r(https://i.imgtg.com/2023/04/11/8zKiU.png) | ![Chrome](https://i.imgtg.com/2023/04/11/8zNrx.png) | ![Safari](https://i.imgtg.com/2023/04/11/8zeGj.png) |
 | :---------------------------------------------: | :-----------------------------------------------: | :--------------------------------------------------: | :-------------------------------------------------: | :-------------------------------------------------: |
 |                   not support                   |                  last 2 versions                  |                   last 2 versions                    |                   last 2 versions                   |                   last 2 versions                   |
 

src/api/modules/customer.ts

@@ -17,7 +17,7 @@ export interface ResCustomerList {
   isValid: boolean;
   contactName: string;
   nextRemindTime: string;
-  lastFollowTime: string;
+  latestFollowTime: string;
 }
 
 // 获取客户列表

src/components/ProTable/components/ColSetting.vue

@@ -7,9 +7,9 @@
         <el-table-column v-slot="scope" prop="isShow" align="center" label="显示">
           <el-switch v-model="scope.row.isShow" @change="() => onSettingChange()"></el-switch>
         </el-table-column>
-        <el-table-column v-slot="scope" prop="sortable" align="center" label="排序">
+        <!-- <el-table-column v-slot="scope" prop="sortable" align="center" label="排序">
           <el-switch v-model="scope.row.sortable" @change="() => onSettingChange()"></el-switch>
-        </el-table-column>
+        </el-table-column> -->
         <template #empty>
           <div class="table-empty">
             <img src="@/assets/images/notData.png" alt="notData" />

src/views/customerManage/customerList/index.vue

@@ -9,6 +9,7 @@
       :data-callback="dataCallback"
       row-key="advertiserId"
       @row-click="handleRowClick"
+      @sort-change="handleSortChange"
     >
       <!-- 表格 header 按钮 -->
       <template #tableHeader="scope">
@@ -94,6 +95,12 @@ const followUpInitParam = reactive({ customerId: "" as string | number, contactI
 // 如果表格需要初始化请求参数，直接定义传给 ProTable
 const initParam = reactive({});
 
+// 排序参数
+const sortParam = reactive({
+  orderBy: "",
+  asc: true
+});
+
 // dataCallback 处理返回数据
 const dataCallback = (data: any) => {
   return {
@@ -105,9 +112,27 @@ const dataCallback = (data: any) => {
 // 获取客户列表
 const getTableList = (params: any) => {
   let newParams = JSON.parse(JSON.stringify(params));
+  // 添加排序参数
+  if (sortParam.orderBy) {
+    newParams.orderBy = sortParam.orderBy;
+    newParams.asc = sortParam.asc;
+  }
   return getCustomerList(newParams);
 };
 
+// 排序变化处理
+const handleSortChange = ({ prop, order }: { prop: string; order: string | null }) => {
+  if (prop && order) {
+    sortParam.orderBy = prop;
+    sortParam.asc = order === "ascending";
+  } else {
+    sortParam.orderBy = "";
+    sortParam.asc = true;
+  }
+  // 刷新表格数据
+  proTable.value?.getTableList();
+};
+
 // 获取跟进列表
 const getFollowUpTableList = (params: any) => {
   let newParams = JSON.parse(JSON.stringify(params));
@@ -118,27 +143,29 @@ const getFollowUpTableList = (params: any) => {
 const columns = reactive<ColumnProps<ResCustomerList>[]>([
   {
     prop: "name",
-    label: "客户名称",
+    label: "客户信息",
     search: { el: "input" },
     width: 280,
+    fixed: true,
+    sortable: "custom",
     render: (scope: any) => {
       return (
         <div class="customer-info">
           <div class="customer-name">{scope.row.name}</div>
-          <div class="customer-id"> ID:{scope.row.id}</div>
+          <div class="customer-id">ID: {scope.row.id}</div>
         </div>
       );
     }
   },
-  // { prop: "name", label: "客户名称", width: 160, search: { el: "input" }, isShow: false },
+  // { prop: "name", label: "客户名称", width: 160, search: { el: "input" }, isShow: false, sortable: "custom" },
-  { prop: "introducer", label: "介绍人", width: 160, search: { el: "input" } },
+  { prop: "introducer", label: "介绍人", width: 160, search: { el: "input" }, sortable: "custom" },
-  { prop: "baseLocation", label: "base地", width: 160, search: { el: "input" } },
+  { prop: "baseLocation", label: "base地", width: 160, search: { el: "input" }, sortable: "custom" },
-  { prop: "type", label: "客户类型", width: 160, enum: customerType, search: { el: "select" } },
+  { prop: "type", label: "客户类型", width: 160, enum: customerType, search: { el: "select" }, sortable: "custom" },
-  { prop: "createdAt", label: "创建时间", width: 160 },
+  { prop: "createdAt", label: "创建时间", width: 200 },
   { prop: "isValid", label: "是否有效", width: 160, enum: isValidType, search: { el: "select" } },
   { prop: "contactName", label: "联系人名称", width: 160, search: { el: "input" } },
-  { prop: "nextRemindTime", label: "下次提醒时间", width: 200 },
+  { prop: "nextRemindTime", label: "下次提醒时间", width: 200, sortable: "custom" },
-  { prop: "lastFollowTime", label: "最后跟进时间", width: 200 },
+  { prop: "latestFollowTime", label: "最后跟进时间", width: 200, sortable: "custom" },
   { prop: "operation", label: "操作", fixed: "right", width: 320 }
 ]);