feat: 产品筛选优化

src/pages/Product/Cloud/index.jsx

@@ -22,7 +22,9 @@ const Cloud = () => {
     cloud: state.cloud,
     shouldUpdate: state.refresh.cloud
   }))
-  const roadpricing = cloud.roadpricing[roadpricingEnum[columnStateType]]
+  const compilation = cloud.compilation[roadpricingEnum[columnStateType]]
+  const province = cloud.province[roadpricingEnum[columnStateType]]
+
   const [state, setState] = useState({
     params: {
       projectPype: roadpricingEnum[columnStateType],
@@ -31,7 +33,7 @@ const Cloud = () => {
   })
 
   useEffect(() => {
-    if (!roadpricing?.length) {
+    if (!compilation?.length) {
       dispatch({
         type: 'cloud/fetchCompilation',
         payload: {
@@ -39,16 +41,23 @@ const Cloud = () => {
         }
       })
     }
+    if (!province?.length) {
+      dispatch({
+        type: 'cloud/fetchProvince',
+        payload: {
+          projectPype: roadpricingEnum[columnStateType]
+        }
+      })
+    }
   }, [])
 
-  if (!roadpricing?.length) return null
   const columns = [
     {
       title: '通行账号',
       dataIndex: 'mobile',
       key: 'mobile',
       fixed: 'left',
-      width: 50
+      width: 80
     },
     {
       title: '称呼',
@@ -94,8 +103,8 @@ const Cloud = () => {
       key: 'latestUsed',
       filters: true,
       filterMultiple: false,
-      width: 50,
-      valueEnum: roadpricing.reduce((prev, curr) => {
+      width: 80,
+      valueEnum: compilation.reduce((prev, curr) => {
         const obj = { ...prev }
         if (curr._id) {
           obj[curr._id] = {
@@ -108,12 +117,27 @@ const Cloud = () => {
         record.latestUsedName && <Tag color="purple">{record.latestUsedName}</Tag>
     },
     {
+      title: '地区',
+      dataIndex: 'province',
+      key: 'province',
+      filters: true,
+      valueEnum: province.reduce((prev, curr) => {
+        const obj = { ...prev }
+        obj[curr.value] = {
+          text: curr.label
+        }
+        return obj
+      }, {}),
+      filterMultiple: false,
+      width: 50
+    },
+    {
       title: '截至上一次登录时长',
       dataIndex: 'onlineTimes',
       key: 'onlineTimes',
       filters: true,
       filterMultiple: false,
-      width: 80,
+      width: 100,
       valueEnum: {
         1: { text: '超过30分钟' },
         2: { text: '超过1小时' },
@@ -162,7 +186,7 @@ const Cloud = () => {
       width: 150,
       filters: true,
       filterMultiple: false,
-      valueEnum: roadpricing.reduce((prev, curr) => {
+      valueEnum: compilation.reduce((prev, curr) => {
         const obj = { ...prev }
         if (curr._id) {
           obj[curr._id] = {
@@ -178,7 +202,7 @@ const Cloud = () => {
             .map(item => {
               return (
                 <Tag color="purple" key={item.compilationID}>
-                  {roadpricing?.find(i => i._id === item.compilationID)?.name}
+                  {compilation?.find(i => i._id === item.compilationID)?.name}
                 </Tag>
               )
             })}

src/pages/Product/Cloud/model.js

@@ -1,11 +1,17 @@
 import consts from '@/consts'
-import { queryCompilationList } from '@/services/product'
+import { queryCompilationList, queryProvinceList } from '@/services/product'
 import { roadpricingEnum } from './index'
 
 export default {
   namespace: 'cloud',
   state: {
-    roadpricing: {
+    compilation: {
+      [roadpricingEnum.BUILDING]: [],
+      [roadpricingEnum.CURING]: [],
+      [roadpricingEnum.GS]: [],
+      [roadpricingEnum.HIGHWAY]: []
+    },
+    province: {
       [roadpricingEnum.BUILDING]: [],
       [roadpricingEnum.CURING]: [],
       [roadpricingEnum.GS]: [],
@@ -17,20 +23,38 @@ export default {
       const response = yield call(queryCompilationList, payload)
       if (response && response.code === consts.RET_CODE.SUCCESS) {
         yield put({
-          type: 'changeRoadpricingState',
+          type: 'changeCompilationState',
           payload: {
             key: payload?.projectPype,
             data: response.data
           }
         })
       }
+    },
+    *fetchProvince({ payload }, { call, put }) {
+      const response = yield call(queryProvinceList, payload)
+      if (response && response.code === consts.RET_CODE.SUCCESS) {
+        yield put({
+          type: 'changeProvinceState',
+          payload: {
+            key: payload?.projectPype,
+            data: response.data.map((item, idx) => ({ label: item, value: idx + 1 }))
+          }
+        })
+      }
     }
   },
   reducers: {
-    changeRoadpricingState(state, action) {
+    changeCompilationState(state, action) {
+      return {
+        ...state,
+        compilation: { ...state.compilation, [action.payload.key]: action.payload.data }
+      }
+    },
+    changeProvinceState(state, action) {
       return {
         ...state,
-        roadpricing: { ...state.roadpricing, [action.payload.key]: action.payload.data }
+        province: { ...state.province, [action.payload.key]: action.payload.data }
       }
     }
   }

src/pages/Product/Lock/Lockstore/index.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react'
-import { Tag, Select, Tooltip, Input, DatePicker, Button } from 'antd'
+import { Tag, Tooltip, Input, DatePicker, Button } from 'antd'
 import consts from '@/consts'
 import { useModel, connect } from 'umi'
 import { queryLock } from '@/services/product'
@@ -18,15 +18,15 @@ import { getPermAuthCache } from '@/utils/auth'
 
 // 渲染产品标签
 export const ProductLabel = ({ data }) => {
-  if (!data) return <></>
-  let newData = data
+  if (!data) return null
+  let newData
   if (!Array.isArray(data)) {
     newData = data.split('+')
   }
   return (
     <div className="children:m-2px">
-      {newData.map((item, index) => (
-        <Tag color="purple" key={index}>
+      {newData.map((item, idx) => (
+        <Tag color="purple" key={item + idx}>
           {item}
         </Tag>
       ))}
@@ -113,18 +113,20 @@ const LockStore = ({ prodList = [], dispatch, shouldUpdate }) => {
     orderIds: []
   })
 
-  // 获取软件锁产品列表
-  function fetchSoftProducts() {
-    dispatch({
-      type: 'lock/fetchProdList'
-    })
-  }
-
   const handleSearch = value => {
     setState({ ...state, params: { ...state.params, search: value } })
   }
 
   useEffect(() => {
+    // 获取软件锁产品列表
+    function fetchSoftProducts() {
+      dispatch({
+        type: 'lock/fetchProdList'
+      })
+    }
+    if (!prodList?.length) {
+      fetchSoftProducts()
+    }
     if (shouldUpdate) {
       tRef.current.reload()
     }
@@ -193,7 +195,8 @@ const LockStore = ({ prodList = [], dispatch, shouldUpdate }) => {
       render: (keyNum, record) => (
         <span
           onClick={() => showDrawer(record.id)}
-          className="text-primary cursor-pointer hover:text-[#967bbd]">
+          className="text-primary cursor-pointer hover:text-[#967bbd]"
+        >
           {keyNum}
         </span>
       )
@@ -201,14 +204,35 @@ const LockStore = ({ prodList = [], dispatch, shouldUpdate }) => {
     {
       title: '产品',
       dataIndex: 'product',
+      key: 'product',
       width: 200,
       fixed: 'left',
-      render: text => <ProductLabel data={text} />
+      filters: true,
+      filterMultiple: false,
+      valueEnum: prodList.reduce((prev, curr) => {
+        const obj = { ...prev }
+        obj[curr.title] = {
+          text: curr.title
+        }
+        return obj
+      }, {}),
+      render: (_, record) => <ProductLabel data={record.product} />
     },
+    // {
+    //   title: '出库时间',
+    //   dataIndex: 'makeDay',
+    //   key: 'makeDay',
+    //   valueType: 'date',
+    //   filters: true,
+    //   sorter: true,
+    //   width: 150
+    // },
     {
       title: '出库时间',
-      dataIndex: 'makeDay',
+      dataIndex: 'stockTime',
+      key: 'stockTime',
       valueType: 'date',
+      filters: true,
       sorter: true,
       width: 90
     },
@@ -220,14 +244,11 @@ const LockStore = ({ prodList = [], dispatch, shouldUpdate }) => {
       onFilter: true,
       valueType: 'select',
       valueEnum: longleStatusNum,
-      render: (_, { status }) => {
-        return <>{longleStatusNum[status]?.text}</>
-      }
+      renderText: (_, { status }) => longleStatusNum[status]?.text
     },
     {
       title: '出库状态',
       dataIndex: 'stockStatus',
-      valueType: 'date',
       key: 'stockStatus',
       width: 60,
       render: (_, { stockStatus }) => {
@@ -244,7 +265,6 @@ const LockStore = ({ prodList = [], dispatch, shouldUpdate }) => {
     {
       title: '销售状态',
       dataIndex: 'sellStatus',
-      valueType: 'date',
       key: 'sellStatus',
       width: 60,
       render: (_, { sellStatus }) => {
@@ -254,14 +274,12 @@ const LockStore = ({ prodList = [], dispatch, shouldUpdate }) => {
     {
       title: '销售时间',
       dataIndex: 'sellTime',
-      valueType: 'date',
       key: 'sellTime',
       width: 90
     },
     {
       title: '维护状态',
       dataIndex: 'preserveStatus',
-      valueType: 'date',
       key: 'preserveStatus',
       width: 60,
       render: (_, { preserveStatus }) => {
@@ -282,7 +300,8 @@ const LockStore = ({ prodList = [], dispatch, shouldUpdate }) => {
       render: (text, record) => (
         <span
           onClick={() => showDrawerResponsible(record.responsibleId)}
-          className="text-primary cursor-pointer hover:text-[#967bbd]">
+          className="text-primary cursor-pointer hover:text-[#967bbd]"
+        >
           {text}
         </span>
       )
@@ -290,11 +309,13 @@ const LockStore = ({ prodList = [], dispatch, shouldUpdate }) => {
     {
       title: '单位名称',
       dataIndex: 'customerName',
+      key: 'customerName',
       width: 300,
       render: (text, record) => (
         <span
           onClick={() => showCompanyDrawer(record.customerId)}
-          className="text-primary cursor-pointer hover:text-[#967bbd]">
+          className="text-primary cursor-pointer hover:text-[#967bbd]"
+        >
           {text}
         </span>
       )
@@ -302,11 +323,13 @@ const LockStore = ({ prodList = [], dispatch, shouldUpdate }) => {
     {
       title: '客户',
       dataIndex: 'client',
+      key: 'client',
       width: 150,
       render: (text, record) => (
         <span
           onClick={() => showDrawerClient(record.clientId)}
-          className="text-primary cursor-pointer hover:text-[#967bbd]">
+          className="text-primary cursor-pointer hover:text-[#967bbd]"
+        >
           {text}
         </span>
       )
@@ -331,9 +354,6 @@ const LockStore = ({ prodList = [], dispatch, shouldUpdate }) => {
     stockStatus: {
       show: false
     },
-    stockTime: {
-      show: false
-    },
     sellStatus: {
       show: false
     },
@@ -437,22 +457,7 @@ const LockStore = ({ prodList = [], dispatch, shouldUpdate }) => {
                 })
               }}
             />
-          </Tooltip>,
-          <Select
-            key="select"
-            bordered={false}
-            style={{ width: '150px' }}
-            labelInValue={true}
-            allowClear={true}
-            placeholder="请选择产品"
-            onDropdownVisibleChange={async e => {
-              e && !prodList?.length && (await fetchSoftProducts())
-            }}
-            options={prodList.map(item => ({ value: item.title }))}
-            onChange={e =>
-              setState({ ...state, params: { ...state.params, product: e?.value || '' } })
-            }
-          />
+          </Tooltip>
         ]
       }}
     />

src/services/product.js

@@ -69,3 +69,9 @@ export async function queryCompilationList(params) {
     params
   })
 }
+/** 地区列表 */
+export async function queryProvinceList(params) {
+  return request('/RoadPricing/province', {
+    params
+  })
+}