feat: 增加发货日历功能

src/apis/deliver.js

@@ -80,3 +80,13 @@ export function clear(id) {
 export function modifyFinalDate(data) {
   return put({url: `${BASE_URL}/updArrivalTime`, data});
 }
+
+/**
+ * 获取发货日志
+ *
+ * agoScrg 开始时间
+ * endScrg 结束时间
+ */
+export function getOrderDateList(data) {
+  return get({url: `${BASE_URL}/getDispatchListLog`, data});
+}

src/app.config.js

@@ -1,6 +1,7 @@
 export default defineAppConfig({
   pages: [
     'pages/index/index',
+    'pages/log-list/index',
     'pages/customer/index',
     'pages/list/index',
     'pages/receive/index',

src/pages/index/hooks.js

@@ -3,11 +3,13 @@ import complateIcon from '@assets/complate.svg';
 import orderIcon from '@assets/order.svg';
 import anomalyIcon from '@assets/anomaly.svg';
 import customerIcon from '@assets/customer.svg';
+import calendarIcon from '@assets/calendar.svg';
 import {
   CUSTOMER_PATH,
   DELIVER_GOODS_PATH,
   ORDER_PATH,
   RECEIVE_GOODS_PATH,
+  RECEIVE_LOG_PATH,
 } from '@routes';
 import {useStore} from 'zustand';
 import {userStore} from '@stores';
@@ -38,7 +40,8 @@ export function useBtnList() {
       const powerContext = Number(power),
         sendContext = /**       */ 0x000001,
         anomalyContext = /**    */ 0x000010,
-        customerContext = /**   */ 0x000100;
+        customerContext = /**   */ 0x000100,
+        calendarContext = /**   */ 0x001000;
 
       setBtnList(function () {
         const next = klona(defaultBtnList);
@@ -64,6 +67,13 @@ export function useBtnList() {
             url: CUSTOMER_PATH,
           });
 
+        powerContext & calendarContext &&
+          next[1].children.push({
+            title: '发货日历',
+            icon: calendarIcon,
+            url: RECEIVE_LOG_PATH,
+          });
+
         return next;
       });
     },

src/pages/log-list/filter/index.jsx

@@ -0,0 +1,69 @@
+import {Button, Popup} from '@antmjs/vantui';
+import {Input, Picker, Text, View} from '@tarojs/components';
+import {useState} from 'react';
+
+export default function Filter({visible, onClose, onConfirm}) {
+  const [{start, end}, setDate] = useState({start: '', endTime: ''});
+
+  function onChange(key) {
+    return function (value) {
+      setDate(prev => ({...prev, ...{[key]: value}}));
+    };
+  }
+
+  function confirm() {
+    onConfirm(start, end);
+    onClose();
+  }
+
+  return (
+    <Popup
+      show={visible}
+      onClose={onClose}
+      closeable
+      position='bottom'
+      round
+      className='pt-8 px-4 !pb-6'
+    >
+      <View className='mt-4 pb-5'>
+        <View>
+          <Text className='text-lg font-semibold color-[#333] block'>
+            到货时间
+          </Text>
+
+          <View className='mt-4 flex mb-8'>
+            <View className='flex-1 border-b border-gray-200 border-solid border-0 pb-1 mr-3'>
+              <Picker
+                mode='date'
+                onChange={e => onChange('start')(e.detail.value)}
+              >
+                <Input
+                  placeholder='请选择开始时间'
+                  className='text-sm'
+                  value={start}
+                />
+              </Picker>
+            </View>
+
+            <View className='flex-1 border-b border-gray-200 border-solid border-0 pb-1'>
+              <Picker
+                mode='date'
+                onChange={e => onChange('end')(e.detail.value)}
+              >
+                <Input
+                  placeholder='请选择结束时间'
+                  className='text-sm'
+                  value={end}
+                />
+              </Picker>
+            </View>
+          </View>
+        </View>
+
+        <Button type='primary' round block color='#58C6EA' onClick={confirm}>
+          查询
+        </Button>
+      </View>
+    </Popup>
+  );
+}

src/pages/log-list/hooks.js

@@ -0,0 +1,41 @@
+import {getOrderDateList} from '@apis';
+import {useQuery} from '@tanstack/react-query';
+import dayjs from 'dayjs';
+import {groupBy} from 'lodash-es';
+import {useState} from 'react';
+
+export function useList() {
+  const [params, setParams] = useState({
+    agoScrq: dayjs().format('YYYY-MM') + '-01',
+    endScrq:
+      dayjs().format('YYYY-MM') +
+      '-' +
+      dayjs().daysInMonth().toString().padStart(2, '0'),
+  });
+
+  function onDateChange(start, end) {
+    setParams({agoScrq: start, endScrq: end});
+  }
+
+  const {data, isFetching, refetch} = useQuery({
+    queryKey: [getOrderDateList.name, params.agoScrq, params.endScrq],
+    async queryFn() {
+      const data = await getOrderDateList(params);
+
+      if (data.code === '200') {
+        const group = groupBy(data.data, 'arrivalTime');
+
+        return Object.values(group);
+      }
+
+      return [];
+    },
+    placeholderData: [],
+    keepPreviousData: true,
+  });
+
+  return [
+    {data, isFetching},
+    {refetch, onDateChange},
+  ];
+}

src/pages/log-list/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '发货单日历',
+});

src/pages/log-list/index.jsx

@@ -0,0 +1,55 @@
+import {View, Text, Image} from '@tarojs/components';
+import Item from './item';
+import {Refresh} from '@components';
+import {useList} from './hooks';
+import filterIcon from '@assets/filter.svg';
+import classNames from 'classnames';
+import {useBoolean} from 'ahooks';
+import Filter from './filter';
+
+function LogList() {
+  const [{isFetching, data}, {refetch, onDateChange}] = useList();
+  const [visible, {setTrue, setFalse}] = useBoolean(false);
+
+  return (
+    <>
+      <View className='h-screen w-screen flex flex-col box-border'>
+        <View className='w-full flex text-xs py-1 text-gray-600'>
+          <Text className='text-center text-over flex-1 px-1'>到货日期</Text>
+          <Text className='text-center text-over w-28 px-1'>客户名称</Text>
+          <Text className='text-center text-over flex-1 px-1'>是否送达</Text>
+          <Text className='text-center text-over flex-1 px-1'>是否异常</Text>
+        </View>
+
+        <View className='flex-1 overflow-hidden'>
+          <Refresh
+            className='h-full'
+            isRefreshing={isFetching}
+            onRefresh={refetch}
+            noMore={false}
+            empty={data.length === 0}
+          >
+            {data.map(function (data) {
+              return <Item key={data[0].id} data={data} />;
+            })}
+            <View className='h-20' />
+          </Refresh>
+        </View>
+      </View>
+
+      <View
+        onClick={setTrue}
+        className={classNames(
+          'fixed right-3 bottom-8 flex items-center justify-center bg-white rounded-3xl',
+          'w-10 h-10 shadow-lg z-10',
+        )}
+      >
+        <Image src={filterIcon} mode='widthFix' className='w-5' />
+      </View>
+
+      <Filter visible={visible} onClose={setFalse} onConfirm={onDateChange} />
+    </>
+  );
+}
+
+export default LogList;

src/pages/log-list/item/index.css

@@ -0,0 +1,3 @@
+.last-el-no-border:nth-last-child(4) {
+  border: none;
+}

src/pages/log-list/item/index.jsx

@@ -0,0 +1,36 @@
+import {View, Text} from '@tarojs/components';
+import classNames from 'classnames';
+import './index.css';
+
+export default function Item({data}) {
+  return (
+    <View className='w-full py-2 border-gray-500 border-0 border-b border-dashed last-el-no-border'>
+      {data.map(function ({id, name, states, anomaly, arrivalTime}, idx) {
+        return (
+          <View className='flex text-xs mt-2 px-2' key={`child_${id}`}>
+            <Text className='text-center text-over flex-1 px-1'>
+              {idx === 0 ? arrivalTime : ''}
+            </Text>
+            <Text className='text-center text-over w-28 px-1'>{name}</Text>
+            <Text
+              className={classNames('text-center text-over flex-1 px-1', {
+                'text-gray-700': states === '1',
+                'text-red-500': states !== '1',
+              })}
+            >
+              {states === '0' ? '未送达' : '已送达'}
+            </Text>
+            <Text
+              className={classNames('text-center text-over flex-1 px-1', {
+                'text-gray-700': anomaly === '0',
+                'text-red-500': anomaly !== '0',
+              })}
+            >
+              {anomaly === '0' ? '无异常' : '异常'}
+            </Text>
+          </View>
+        );
+      })}
+    </View>
+  );
+}

src/routes/name.js

@@ -6,3 +6,5 @@ export const RECEIVE_GOODS_PATH = '/pages/receive/index';
 export const ORDER_PATH = '/pages/list/index';
 /** 客户管理 */
 export const CUSTOMER_PATH = '/pages/customer/index';
+/** 发货日历 */
+export const RECEIVE_LOG_PATH = '/pages/log-list/index';

src/utils/constants.js

@@ -1,7 +1,7 @@
 /** 请求地址 */
 export const NETWORK_URL =
   process.env.NODE_ENV === 'development'
-    ? 'https://tms.tuyatrip.com'
+    ? 'http://192.168.0.147:8090'
     : 'https://tms.tuyatrip.com';
 /** token存储 */
 export const USER_TOKEN_STORAGE = 'userToken';