feat: 联系人、客户增加排序功能

src/pages/Customer/Client/index.jsx

@@ -20,6 +20,7 @@ import { useTableScroll } from '@/hooks/useAutoTable'
 import { apiAddClient, queryClient } from '@/services/customer'
 import { apiBatchLink } from '@/services/customer'
 import styles from './index.less'
+import { refactorSortField } from '@/utils/utils'
 
 const Client = props => {
   const { toggleDrawer, setDrawerProps } = useModal()
@@ -46,7 +47,7 @@ const Client = props => {
     const personOptions = []
     const teamOptions = []
     personTags.forEach(item => {
-      personOptions.push({ label: item.name, value: item.id })
+      // personOptions.push({ label: item.name, value: item.id })
       personTagMap[item.id] = {
         text: (
           <>
@@ -61,7 +62,7 @@ const Client = props => {
     })
 
     teamTags.forEach(item => {
-      teamOptions.push({ label: item.name, value: item.id })
+      // teamOptions.push({ label: item.name, value: item.id })
       teamTagMap[item.id] = {
         text: (
           <>
@@ -240,14 +241,15 @@ const Client = props => {
       key: 'tagIds',
       width: 60,
       filters: true,
+      search: false,
       // onFilter: true,
       valueEnum: tag.personTagMap,
-      valueType: 'select',
-      fieldProps: {
-        mode: 'multiple',
-        options: tag.personOptions,
-        showArrow: true
-      },
+      // valueType: 'select',
+      // fieldProps: {
+      //   mode: 'multiple',
+      //   options: tag.personOptions,
+      //   showArrow: true
+      // },
       render: (_, record) => (
         <div className="flex items-center flex-wrap">
           {record.tagIds.map(item => (
@@ -276,13 +278,14 @@ const Client = props => {
       key: 'tagCooperationIds',
       width: 60,
       filters: true,
+      search: false,
       valueEnum: tag.teamTagMap,
-      valueType: 'select',
-      fieldProps: {
-        mode: 'multiple',
-        options: tag.teamOptions,
-        showArrow: true
-      },
+      // valueType: 'select',
+      // fieldProps: {
+      //   mode: 'multiple',
+      //   options: tag.teamOptions,
+      //   showArrow: true
+      // },
       render: (_, record) => (
         <div className="flex items-center flex-wrap">
           {record.tagCooperationIds.map(item => (
@@ -525,10 +528,11 @@ const Client = props => {
         rowKey={record => record.id}
         columns={columns}
         request={async (params, sort, filter) => {
+          const srotOrder = refactorSortField(sort)
           const {
             code = -1,
             data: { client = [], total = 0 }
-          } = await queryClient({ ...params, ...sort, ...filter })
+          } = await queryClient({ ...params, ...srotOrder, ...filter })
           setState({ ...state, orderIds: client.map(item => item.id) })
           return {
             data: client,

src/pages/Customer/Company/index.jsx

@@ -15,6 +15,7 @@ import { TagTypeEnum, TagDataTypeEnum, LabelModeType } from './components/Person
 import { Add, Down, Check } from '@icon-park/react'
 import { apiBatchLink } from '@/services/customer'
 import styles from './index.less'
+import { refactorSortField } from '@/utils/utils'
 
 const Company = props => {
   const {
@@ -43,12 +44,12 @@ const Company = props => {
     const personOptions = []
     const teamOptions = []
     personTags.forEach(item => {
-      personOptions.push({ label: item.name, value: item.id })
+      // personOptions.push({ label: item.name, value: item.id })
       personTagMap[item.id] = {
         text: (
           <>
             <span
-              className="inline-block w-12px h-12px rounded-1\/2 mr-3px"
+              className="inline-block w-12px h-12px rounded-1/2 mr-3px"
               style={{ backgroundColor: personTagColorMap[item.id] }}
             />
             <span>{item.name}</span>
@@ -57,7 +58,7 @@ const Company = props => {
       }
     })
     teamTags.forEach(item => {
-      teamOptions.push({ label: item.name, value: item.id })
+      // teamOptions.push({ label: item.name, value: item.id })
       teamTagMap[item.id] = {
         text: (
           <>
@@ -80,10 +81,6 @@ const Company = props => {
     visible: false,
     orderIds: []
   })
-  const [addCompany, setAddCompany] = useState({
-    visible: false,
-    loading: false
-  })
 
   // 重置到默认值，包括表单
   const initData = () => {
@@ -96,15 +93,12 @@ const Company = props => {
   }
 
   const handleAddCompany = async values => {
-    setAddCompany({ ...addCompany, loading: true })
     const params = formatValues(values)
     const { code = -1 } = await apiAddCompany(params)
     if (code === consts.RET_CODE.SUCCESS) {
       message.success('新增成功')
+      initData()
     }
-    // 请求完了
-    setAddCompany({ ...addCompany, loading: false, visible: false })
-    initData()
   }
 
   useEffect(() => {
@@ -183,13 +177,14 @@ const Company = props => {
       dataIndex: 'tagIds',
       width: 100,
       filters: true,
+      search: false,
       valueEnum: tag.personTagMap,
-      valueType: 'select',
-      fieldProps: {
-        mode: 'multiple',
-        options: tag.personOptions,
-        showArrow: true
-      },
+      // valueType: 'select',
+      // fieldProps: {
+      //   mode: 'multiple',
+      //   options: tag.personOptions,
+      //   showArrow: true
+      // },
       render: (_, record) => (
         <div className="items-center flex-wrap">
           {record.tagIds.map(item => (
@@ -217,14 +212,15 @@ const Company = props => {
       dataIndex: 'tagCooperationIds',
       key: 'tagCooperationIds',
       width: 80,
+      search: false,
       filters: true,
       valueEnum: tag.teamTagMap,
-      valueType: 'select',
-      fieldProps: {
-        mode: 'multiple',
-        options: tag.teamOptions,
-        showArrow: true
-      },
+      // valueType: 'select',
+      // fieldProps: {
+      //   mode: 'multiple',
+      //   options: tag.teamOptions,
+      //   showArrow: true
+      // },
       render: (_, record) => (
         <div className="flex items-center flex-wrap">
           {record.tagCooperationIds.map(item => (
@@ -438,8 +434,9 @@ const Company = props => {
         actionRef={tRef}
         params={state.params}
         request={async (params, sort, filter) => {
+          const srotOrder = refactorSortField(sort)
           const { code = -1, data: { customer = [], total = 0 } = { customer: [], total: 0 } } =
-            await queryCompany({ ...params, ...sort, ...filter })
+            await queryCompany({ ...params, ...srotOrder, ...filter })
           setState({ ...state, orderIds: customer.map(item => item.id) })
           return {
             data: customer,

src/utils/utils.js

@@ -2,7 +2,8 @@ import { parse } from 'querystring'
 import dayjs from 'dayjs'
 /* eslint no-useless-escape:0 import/prefer-default-export:0 */
 
-const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/
+const reg =
+  /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/
 export const isUrl = path => reg.test(path)
 export const isAntDesignPro = () => {
   if (ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site') {
@@ -28,6 +29,23 @@ export const getPageQuery = () => parse(window.location.href.split('?')[1])
  * @param format - 格式
  */
 export const dayjsFormat = (date, format = 'YYYY-MM-DD HH:mm:ss') => {
-  if (date === "0001-01-01 00:00:00" || !date) return ''
+  if (date === '0001-01-01 00:00:00' || !date) return ''
   return dayjs(date).format(format)
 }
+
+/** 处理表格排序字段 */
+export const refactorSortField = sort => {
+  if (!sort) return
+  // 处理后的排序，格式{ field: 'xxxxx', order: 'desc/asc' }
+  const s = { field: null, order: null }
+  const keys = Object.keys(sort)
+  const orKey = keys[0]
+  if (orKey) {
+    s.field = orKey
+    s.order = sort[orKey].replace('end', '')
+    // eslint-disable-next-line consistent-return
+    return s
+  }
+  // eslint-disable-next-line consistent-return
+  return {}
+}