xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ feat: 发货单对接70%

Browse Source
This commit is contained in:
xuan
2022-09-20 19:40:05 +08:00
parent 078f3e79b7
commit 5ae01087ab
20 changed files with 662 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/delivery/components/DeliveryStatusList/index.module.scss
View File
src/pages/delivery/components/DeliveryStatusList/index.tsx
+42
View File
@@ -0,0 +1,42 @@
import SegmentedControl from '@/components/segmentedControl'
import { FC, memo, useCallback, useEffect, useState } from 'react'
import { EnumSaleorderStatus } from '@/api/index'
type PropsType = {
onChangeStatus?: (data: {id: number, name: string}) => void
}
const DeliveryStatusList = memo<PropsType>((props) => {
const { onChangeStatus } = props
const { fetchData } = EnumSaleorderStatus()
const [statusList, setStatusList] = useState([
{
id: -1,
name: '全部',
},
])
// 请求
const getDeliveryStatusList = async () => {
const res = await fetchData()
console.log(res.data.list);
setStatusList(
res.data.list.filter((item) => {
return item.id === 3 || item.id === 4 // 待发货 已完成
}),
)
}
useEffect(() => {
getDeliveryStatusList()
}, [])
// //状态改变
const changeStatus = useCallback(
(data: {id:number, name: string}) => {
onChangeStatus && onChangeStatus({ id: data.id, name: data.name })
},
[onChangeStatus],
)
return <SegmentedControl list={statusList} onSelect={changeStatus} defaultId={statusList[0].id} />
})
export default DeliveryStatusList
src/pages/delivery/components/Filter/index.module.scss
+41
View File
@@ -0,0 +1,41 @@
.filterItem {
margin: 24px 48px;
&--title {
font-size: 28px;
font-weight: 550;
line-height: 1.5;
}
&--wrapper {
margin-top: 24px;
display: grid;
grid-gap: 16px 16px;
}
}
.filter {
&--time {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
&--inputBar {
}
&--type {
grid-template-columns: 1fr 1fr;
}
}
.filterTypeButton{
padding: 0 24px;
font-size: 28px;
}
.filterTypeText{
color: #6e6e6e !important;
}
.filterTimeButton{
padding: 0 24px;
font-size: 28px;
grid-column-start: span 2;
}
.selected{
background-color: #eaf2ff;
}
src/pages/delivery/components/Filter/index.tsx
+152
View File
@@ -0,0 +1,152 @@
import NormalButton from "@/components/normalButton"
import Popup from "@/components/popup"
import { View } from "@tarojs/components"
import classnames from "classnames"
import styles from './index.module.scss'
import { FC, memo, useEffect, useState } from 'react'
import Search from "@/components/search"
import IconFont from "@/components/iconfont/iconfont"
import {EnumDeliveryNoticeTypeList} from '@/api/index'
type SearchFilter = {
type?: number
}
const scanIcon = () => {
// 扫描
const handleScan = () => {}
return (
<View onClick={handleScan} className={styles.scanHandler}>
<IconFont name='icon-saomiao' size={40}></IconFont>
</View>
)
}
const DeliveryFilter: FC = memo(() => {
const {fetchData} = EnumDeliveryNoticeTypeList()
const [searchFilter, useSearchFilter] = useState<SearchFilter>({
})
const handleSelectedType = (type: string | number) => {
if (typeof type === 'string' && type === 'default') {
// setSearch((e) => ({ ...e }))
} else {
// setSearch((e) => ({ ...e, type: type as number }))
}
}
const handleSearchBarChange = () => {}
useEffect(() => {
getEnumData()
}, [])
const [typeList, setTypeList] = useState<{id: number, name: string}[]>()
const getEnumData = async () => {
const res = await fetchData()
setTypeList(res.data.list)
}
return (
<>
<View className={styles.filterItem}>
<View className={styles['filterItem--title']}>发货类型</View>
<View className={classnames(styles['filterItem--wrapper'], styles['filter--type'])}>
<NormalButton
type={searchFilter.type == null ? 'primary' : 'info'}
plain={searchFilter.type === null}
circle
customClassName={classnames(styles.filterTypeButton)}
customTextClassName={searchFilter.type === null && styles.filterTypeText}
onClick={() => handleSelectedType('default')}>
不限
</NormalButton>
{!!typeList?.length && typeList?.map(item => {
return (
<NormalButton
type={searchFilter.type === item?.id ? 'primary' : 'info'}
plain={searchFilter.type !== item?.id}
circle
customClassName={styles.filterTypeButton}
customTextClassName={searchFilter.type === item?.id && styles.filterTypeText}
onClick={() => handleSelectedType(item?.id)}>
{item.name}
</NormalButton>
)
})}
{/* <NormalButton
type={searchFilter.type === 0 ? 'primary' : 'info'}
plain={searchFilter.type !== 0}
circle
customClassName={styles.filterTypeButton}
customTextClassName={searchFilter.type === 0 && styles.filterTypeText}
onClick={() => handleSelectedType(1)}>
销售发货单
</NormalButton>
<NormalButton
type={searchFilter.type === 0 ? 'primary' : 'info'}
plain={searchFilter.type !== 0}
circle
customClassName={styles.filterTypeButton}
customTextClassName={searchFilter.type === 1 && styles.filterTypeText}
onClick={() => handleSelectedType(2)}>
调拨发货单
</NormalButton>
<NormalButton
type={searchFilter.type === 0 ? 'primary' : 'info'}
plain={searchFilter.type !== 0}
circle
customClassName={styles.filterTypeButton}
customTextClassName={searchFilter.type === 2 && styles.filterTypeText}
onClick={() => handleSelectedType(3)}>
采购退货单
</NormalButton> */}
</View>
</View>
<View className={styles.filterItem}>
<View className={styles['filterItem--title']}>发货单号</View>
<View className={classnames(styles['filterItem--wrapper'], styles['filter--inputBar'])}>
<Search
placeholder='请输入或扫描条形码'
showBtn={false}
changeOnSearch={handleSearchBarChange}
debounceTime={300}
customRightSlot={scanIcon()}></Search>
</View>
</View>
<View className={styles.filterItem}>
<View className={styles['filterItem--title']}>查询日期</View>
<View className={classnames(styles['filterItem--wrapper'], styles['filter--time'])}>
<NormalButton type='primary' circle customClassName={styles.filterTypeButton}>
不限
</NormalButton>
<NormalButton type='primary' circle customClassName={styles.filterTypeButton}>
今天
</NormalButton>
<NormalButton type='primary' circle customClassName={styles.filterTypeButton}>
昨日
</NormalButton>
<NormalButton type='primary' circle customClassName={styles.filterTypeButton}>
近7日
</NormalButton>
<NormalButton type='primary' circle customClassName={styles.filterTypeButton}>
近30日
</NormalButton>
<NormalButton type='primary' circle customClassName={styles.filterTypeButton}>
近90日
</NormalButton>
<NormalButton type='primary' circle customClassName={styles.filterTimeButton}>
自定义起始时间{<IconFont name='icon-chakanquanbukehu' size={60}></IconFont>}
</NormalButton>
</View>
</View>
</>
)
})
export default DeliveryFilter
src/pages/delivery/components/ItemList/index.module.scss
+8 -1
View File
@@ -15,7 +15,12 @@
}
&__orderStatus {
font-weight: 550;
color: #e42945;
&--toBeAudited{
color: #e42945;
}
&--finish{
color: $color_main;
}
}
}
.content {
@@ -27,8 +32,10 @@
font-size: 28px;
color: rgba($color: #000000, $alpha: 0.4);
&__left {
min-width: 140px;
}
&__right {
@include common_ellipsis(2);
}
}
}
src/pages/delivery/components/ItemList/index.tsx
+58 -18
View File
@@ -6,49 +6,87 @@ import { FC } from 'react'
import NormalButton from '@/components/normalButton'
import styles from './index.module.scss'
import classnames from 'classnames'
import { EnumSaleMode } from '@/common/Enumerate'
import { formatDateTime } from '@/common/format'
import { goLink } from '@/common/common'
import { DeliveryNoticeOrderAudit } from '@/api/index'
import Taro from '@tarojs/taro'
type PropsType = {
itemData?: Record<string, any>
onSuccess?: Function
}
const ItemList:FC<PropsType> = (props) => {
const { itemData } = props
const { itemData, onSuccess } = props
// 查看详情
const handleDetail = () => {
const handleDetail = (id: number) => {
goLink('/pages/deliveryDetail/index', {
id
})
}
// 确认审核
const handleAudit = () => {
const {fetchData, state} = DeliveryNoticeOrderAudit()
// 确认审核
const handleAudit = (id: number) => {
Taro.showModal({
content: '确认要审核吗？',
confirmColor: '#337FFF',
success: async (res) => {
if (res.confirm) {
const res = await fetchData({ id })
if (res.success) {
Taro.showToast({ title: '审核成功', icon: 'success' })
onSuccess?.()
}else{
Taro.showToast({ title: '审核失败', icon: 'error' })
}
}
},
})
}
return (
<LayoutBlock circle customClassName={styles.layoutBlock}>
<View className={styles.topBar}>
<View className={styles.topBar__orderNo}>
<View>单号：XS-LY-2208220092</View>
<View className={styles.topBar__orderStatus}>待审核</View>
<View>单号：{itemData?.order_no}</View>
{itemData?.status === 1 && <View className={classnames(styles.topBar__orderStatus, styles['topBar__orderStatus--finish'])}>已审核</View>}
{itemData?.status === 0 && <View className={classnames(styles.topBar__orderStatus, styles['topBar__orderStatus--toBeAudited'])}>待审核</View>}
</View>
<Text className={styles.topBar__orderType}>销售发货单</Text>
<Text className={styles.topBar__orderType}>{itemData?.type_name}</Text>
</View>
<Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
<View className={styles.content}>
<View className={classnames(styles.content__row, styles.bord)}>
<View className={styles.content__row__left}>货品信息：</View>
<View className={styles.content__row__right}>
<Tag type='primary' circle plain size='small' customClassName={styles.tag}>
大货
</Tag>
2种面料，4种颜色，共5米
{itemData?.sale_mode === EnumSaleMode.Bulk && (
<Tag type='primary' circle plain size='small' customClassName={styles.tag}>
大货
</Tag>
)}
{itemData?.sale_mode === EnumSaleMode.Plate && (
<Tag type='danger' circle plain size='small' customClassName={styles.tag}>
剪板
</Tag>
)}
{itemData?.sale_mode === EnumSaleMode.BulkCut && (
<Tag type='warning' circle plain size='small' customClassName={styles.tag}>
散剪
</Tag>
)}
2种面料，4种颜色，共{itemData?.sale_mode === EnumSaleMode.Bulk ? `${itemData?.delivery_roll}条` : `${itemData?.delivery_length}米`}
</View>
</View>
<View className={styles.content__row}>
<View className={styles.content__row__left}>发货地址：</View>
<View className={styles.content__row__right}>永川纺织有限公司</View>
<View className={styles.content__row__right}>{itemData?.delivery_address || '空'}</View>
</View>
<View className={styles.content__row}>
<View className={styles.content__row__left}>创建时间：</View>
<View className={styles.content__row__right}>2022-09-01 18:32:32</View>
<View className={styles.content__row__right}>{formatDateTime(itemData?.create_time) || '空'}</View>
</View>
</View>
<View className={styles.bottomBar}>
@@ -57,12 +95,14 @@ const ItemList:FC<PropsType> = (props) => {
type='info'
customStyles={{ color: '#8e8e8e', borderColor: '#8e8e8e' }}
round
onClick={handleDetail}>
onClick={() => handleDetail(itemData?.id)}>
查看详情
</NormalButton>
<NormalButton customClassName={styles.bottomBar__button} type='primary' round onClick={handleAudit}>
确认审核
</NormalButton>
{itemData?.status === 0 && (
<NormalButton customClassName={styles.bottomBar__button} type='primary' round onClick={() => handleAudit(itemData?.id)}>
确认审核
</NormalButton>
)}
</View>
</LayoutBlock>
)
src/pages/delivery/index.module.scss
+11 -7
View File
@@ -22,17 +22,21 @@ page {
flex: 1 1 auto;
background-color: #f7f7f7;
overflow: scroll;
&--total {
display: block;
margin-top: 24px;
padding: 0 24px;
font-size: 24px;
color: #9d9d9d;
}
}
}
.scanHandler{
.scanHandler {
width: 40px;
height: 40px;
position: absolute;
right: 40px;
}
.icon__filter{
padding: 0 20px;
padding-right: 10px;
.icon__filter {
padding: 0 20px;
padding-right: 10px;
}
src/pages/delivery/index.tsx
+117 -104
View File
@@ -1,40 +1,63 @@
import { View, Text } from '@tarojs/components'
import { useCallback, useEffect, useMemo, useRef, useState, FC } from 'react'
import { useCallback, useEffect, useMemo, useRef, useState, FC, memo } from 'react'
import styles from './index.module.scss'
import classnames from 'classnames'
import Search from '@/components/search'
import { ClientListApi } from '@/api/order'
import { DeliverNoticeOrderList, EnumSaleorderStatus } from '@/api/index'
import Taro from '@tarojs/taro'
import { useRouter } from '@tarojs/taro'
import InfiniteScroll from '@/components/infiniteScroll'
import { dataLoadingStatus, getFilterData } from '@/common/util'
import IconText from '@/components/iconText'
import SegmentedControl from '@/components/segmentedControl'
import IconFont from '@/components/iconfont/iconfont'
import ItemList from './components/ItemList'
import DeliveryStatusList from './components/DeliveryStatusList'
import Popup from '@/components/popup'
import DeliveryFilter from './components/Filter'
type SearchData = {
delivery_notice_order_no?: string // 发货单号
delivery_notice_order_status?: number | string // 发货状态
date_min?: string // 开始时间
date_max?: string // 结束时间
type?: number // 发货类型
page: number
size: number
}
const scanIcon = () => {
// 扫描
const handleScan = () => {}
return (
<View onClick={handleScan} className={styles.scanHandler}>
<IconFont name='icon-saomiao' size={40}></IconFont>
</View>
)
}
// 发货列表
const Delivery: FC = () => {
// const [search, setSearch] = useState({
// name: null,
// page: 1,
// size: 10,
// })
// const [clentList, setClientlist] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
const [search, setSearch] = useState<SearchData>({
delivery_notice_order_status: 0, // 待发货
page: 1,
size: 10,
})
const [deliveryOrderList, setDeliveryOrderList] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
// const { fetchData: clitentFetch, state: orderState } = ClientListApi()
// //数据加载状态
// const statusMore = useMemo(() => {
// return dataLoadingStatus({ list: clentList.list, total: clentList.total, status: orderState.loading })
// }, [clentList, orderState])
const { fetchData: FetchDeliveryOrderList, state: orderState } = DeliverNoticeOrderList()
//数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({ list: deliveryOrderList.list, total: deliveryOrderList.total, status: orderState.loading })
}, [deliveryOrderList, orderState])
// const [clientObj, setclientObj] = useState({
// clientId: null,
// clientName: '',
// })
//输入了搜索关键字
const getSearchData = useCallback((eq) => {
//输入搜索关键字
const getSearchData = useCallback((searchValue: string) => {
console.log('searchValue==>', searchValue)
// pageNum.current.page = 1
// setClientlist(() => ({ list: [], total: 0 }))
// setSearch((e) => ({ ...e, name: eq, size: 10 }))
@@ -42,46 +65,48 @@ const Delivery: FC = () => {
// const router = useRouter()
// useEffect(() => {
// if (search.name === '') {
// setSearch((e) => ({ ...e, name: null }))
// }
// if (search.name !== '') getCuss()
// }, [search])
useEffect(() => {
console.log('useEffect ===> search', search)
if (search.delivery_notice_order_no === '') {
setSearch((e) => ({ ...e, delivery_notice_order_no: undefined }))
}
if (search.delivery_notice_order_no !== '') getData()
}, [search])
// //上拉加载数据
// const pageNum = useRef({ size: search.size, page: search.page })
// const getScrolltolower = useCallback(() => {
// if (clentList.list.length < clentList.total) {
// pageNum.current.page++
// const size = pageNum.current.size * pageNum.current.page
// setSearch((e) => ({ ...e, size }))
// console.log(search, 11111)
// }
// }, [clentList])
//上拉加载数据
const pageNum = useRef({ size: search.size, page: search.page })
// //列表下拉刷新
// const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
// const getRefresherRefresh = async () => {
// pageNum.current.size = 1
// setRefresherTriggeredStatus(true)
// setSearch((val) => ({ ...val, size: 10 }))
// }
// const getCuss = async () => {
// let res = await clitentFetch({ name: search.name === null ? '' : search.name, page: search.page, size: search.size })
// if (router?.params.clientId) {
// res.data.list.map((item) => {
// if (item.id == router?.params.clientId) {
// item.checked = true
// } else {
// item.checked = false
// }
// return item
// })
// }
// setClientlist((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
// setRefresherTriggeredStatus(() => false)
// }
const getScrollToLower = useCallback(() => {
if (deliveryOrderList.list.length < deliveryOrderList.total) {
pageNum.current.page++
const size = pageNum.current.size * pageNum.current.page
setSearch((e) => ({ ...e, size }))
console.log(search, 11111)
}
}, [deliveryOrderList])
//列表下拉刷新
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
const getRefresherRefresh = async () => {
pageNum.current.size = 1
setRefresherTriggeredStatus(true)
setSearch((val) => ({ ...val, size: 10 }))
}
const getData = async () => {
const res = await FetchDeliveryOrderList(getFilterData(search))
// if (router?.params.clientId) {
// res.data.list.map((item) => {
// if (item.id == router?.params.clientId) {
// item.checked = true
// } else {
// item.checked = false
// }
// return item
// })
// }
setDeliveryOrderList((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
setRefresherTriggeredStatus(() => false)
}
// //选择客户
// const selectClient = (item) => {
@@ -120,39 +145,35 @@ const Delivery: FC = () => {
// }
// }, [clientObj])
// 筛选列表
const onShowFilter = () => {}
const handleChangeFilterData = () => {}
const [statusList, setStatusList] = useState([
{
id: -1,
name: '待发货',
},
{
id: 2,
name: '已完成',
},
])
const [currentStatus, setCurrentStatus] = useState('待发货')
// //状态改变
const changeStatus = useCallback((e) => {
// pageNum.current.page = 1
// setSearchField((value) => ({ ...value, status: e, size: 10 }))
console.log(e, '123123')
// setOrderData(() => ({ list: [], total: 0 }))
}, [])
// 扫描
const handleScan = () => {}
const scanIcon = () => {
return (
<View onClick={handleScan} className={styles.scanHandler}>
<IconFont name='icon-saomiao' size={40}></IconFont>
</View>
)
const handleChangeStatus = ({ id: statusId, name: statusName }) => {
let fuckingBadCodeId: string | number = 0
if (statusId === 3) {
fuckingBadCodeId = 0
} else if (statusId === 4) {
fuckingBadCodeId = '1,2'
}
setCurrentStatus(statusName)
setSearch((e) => ({ ...e, delivery_notice_order_status: fuckingBadCodeId }))
getData()
}
const handleAuditSuccess = () => {
getData()
}
const [showFilter, setShowFilter] = useState(false)
// 筛选列表
const onShowFilter = () => {
setShowFilter(true)
}
return (
<View className={styles.delivery}>
<View className={styles.searchBox}>
@@ -163,36 +184,28 @@ const Delivery: FC = () => {
</Search>
</View>
{/* 状态栏 */}
<SegmentedControl list={statusList} onSelect={changeStatus} defaultId={-1} />
<DeliveryStatusList onChangeStatus={handleChangeStatus}></DeliveryStatusList>
<View className={styles.listBox}>
{/* <InfiniteScroll
<InfiniteScroll
statusMore={statusMore}
selfonScrollToLower={getScrolltolower}
selfonScrollToLower={getScrollToLower}
refresherEnabled={true}
refresherTriggered={refresherTriggeredStatus}
selfOnRefresherRefresh={getRefresherRefresh}>
{clentList.list.map((item, index) => {
return (
<View
className={classnames(item.checked ? styles.acticveitemBox : styles.itemBox)}
key={index}
onClick={() => {
selectClient(item)
}}>
<View className={styles.cussName}>{item.name}</View>
<View className={styles.phone}>{item.phone}</View>
<View className={styles.woker}>{item.sale_user_name}</View>
</View>
)
<Text className={styles['listBox--total']}>
{currentStatus}共 {deliveryOrderList.total} 单
</Text>
{deliveryOrderList.list.map((item, index) => {
return <ItemList itemData={item} key={item.id} onSuccess={handleAuditSuccess}></ItemList>
})}
</InfiniteScroll> */}
<ItemList></ItemList>
<ItemList></ItemList>
<ItemList></ItemList>
<ItemList></ItemList>
</InfiniteScroll>
</View>
<Popup show={showFilter} title='筛选列表'>
<DeliveryFilter />
</Popup>
</View>
)
}
export default Delivery