🐳 chore(eslint): 修正所有文件的eslint 错误❌
This commit is contained in:
xuan
+277
-280
@@ -77,8 +77,278 @@ const FilterTimeOptions = {
|
||||
},
|
||||
}
|
||||
|
||||
// 需要传进来的数据示例
|
||||
|
||||
// 需要传进来的表头数据示例
|
||||
const productRankingColumns = [
|
||||
{
|
||||
key: 'index',
|
||||
title: '编号',
|
||||
dataIndex: 'index',
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
key: 'product_name',
|
||||
title: '面料名称',
|
||||
dataIndex: 'product_name',
|
||||
width: '20%',
|
||||
ellipsis: {
|
||||
isEllipsis: true,
|
||||
rows: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'roll',
|
||||
title: '匹数',
|
||||
dataIndex: 'roll',
|
||||
width: '30%',
|
||||
},
|
||||
{
|
||||
key: 'sales_amount',
|
||||
title: '交易金额',
|
||||
dataIndex: 'sales_amount',
|
||||
width: '30%',
|
||||
render: (text: string) => <Text className={styles.amount}>{text}</Text>,
|
||||
},
|
||||
]
|
||||
|
||||
// 需要传进来的表头数据示例
|
||||
const purchaserRankingColumns = [
|
||||
{
|
||||
key: 'index',
|
||||
title: '编号',
|
||||
dataIndex: 'index',
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
key: 'purchaser_name',
|
||||
title: '客户名称',
|
||||
dataIndex: 'purchaser_name',
|
||||
width: '20%',
|
||||
ellipsis: {
|
||||
isEllipsis: true,
|
||||
rows: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'roll',
|
||||
title: '交易匹数',
|
||||
dataIndex: 'roll',
|
||||
width: '30%',
|
||||
},
|
||||
{
|
||||
key: 'sales_amount',
|
||||
title: '交易金额',
|
||||
dataIndex: 'sales_amount',
|
||||
width: '30%',
|
||||
render: (text: string) => <Text className={styles.amount}>{text}</Text>,
|
||||
},
|
||||
]
|
||||
|
||||
// 需要传进来的表头数据示例
|
||||
const salesmanRankingColumns = [
|
||||
{
|
||||
key: 'index',
|
||||
title: '编号',
|
||||
dataIndex: 'index',
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
key: 'sale_user_name',
|
||||
title: '业务员名称',
|
||||
dataIndex: 'sale_user_name',
|
||||
width: '25%',
|
||||
ellipsis: {
|
||||
isEllipsis: true,
|
||||
rows: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'roll',
|
||||
title: '销售匹数',
|
||||
dataIndex: 'roll',
|
||||
width: '25%',
|
||||
},
|
||||
{
|
||||
key: 'sales_amount',
|
||||
title: '销售金额',
|
||||
dataIndex: 'sales_amount',
|
||||
width: '30%',
|
||||
render: (text: string) => <Text className={styles.amount}>{text}</Text>,
|
||||
},
|
||||
]
|
||||
|
||||
const tabsConfig = [
|
||||
{
|
||||
name: '面料',
|
||||
key: 0,
|
||||
},
|
||||
{
|
||||
name: '客户',
|
||||
key: 1,
|
||||
},
|
||||
{
|
||||
name: '业务员',
|
||||
key: 2,
|
||||
},
|
||||
]
|
||||
|
||||
interface RankingBlockPropsType {
|
||||
saleType?: number | null
|
||||
saleDepartmentId?: number | null
|
||||
date_min?: string
|
||||
date_max?: string
|
||||
}
|
||||
// 销售排行
|
||||
const RankingBlock = (props: RankingBlockPropsType) => {
|
||||
const { saleType, saleDepartmentId, date_min, date_max } = props
|
||||
|
||||
const { fetchData: fetchProductRank } = ProductRankApi()
|
||||
const { fetchData: fetchPurchaserRank } = PurchaserRankApi()
|
||||
const { fetchData: fetchSalesmanRank } = SalesmanRankApi()
|
||||
|
||||
const [limit, setLimit] = useState(defaultLimit)
|
||||
|
||||
const [indicator, setIndicator] = useState<number | null>(null)
|
||||
|
||||
// 切换排行指标
|
||||
const onChangeIndicators = useCallback((indicators: number) => {
|
||||
console.log('indicators', indicators)
|
||||
if (indicators === -1) {
|
||||
setIndicator(null)
|
||||
}
|
||||
else {
|
||||
setIndicator(indicators)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const [currentKey, setCurrentKey] = useState(tabsConfig[0].key)
|
||||
|
||||
const handleClickTab = (event) => {
|
||||
const key = event.target.dataset.key
|
||||
if (key === currentKey) { return }
|
||||
setCurrentKey(key)
|
||||
setLimit(defaultLimit)
|
||||
}
|
||||
const [currentTable, setCurrentTable] = useState<TablePropsType>({
|
||||
columns: productRankingColumns,
|
||||
})
|
||||
const getData = useCallback(
|
||||
async(tabKey: number) => {
|
||||
let res: any
|
||||
const payload = {
|
||||
limit,
|
||||
saleType,
|
||||
saleDepartmentId,
|
||||
date_min,
|
||||
date_max,
|
||||
data_form_status: indicator,
|
||||
}
|
||||
if (tabKey === 0) {
|
||||
res = await fetchProductRank(getFilterData(payload))
|
||||
}
|
||||
else if (tabKey === 1) {
|
||||
res = await fetchPurchaserRank(getFilterData(payload))
|
||||
}
|
||||
else {
|
||||
res = await fetchSalesmanRank(getFilterData(payload))
|
||||
}
|
||||
if (res.data) {
|
||||
console.log('排名', res.data)
|
||||
if (tabKey === 0) {
|
||||
setCurrentTable(() => ({
|
||||
columns: productRankingColumns,
|
||||
dataSource: {
|
||||
list: res.data.list.map((item, index: number) => ({
|
||||
key: index,
|
||||
index: index + 1,
|
||||
product_name: item.product_name || '--',
|
||||
sales_amount: `￥${priceformat(item.sales_amount)}`,
|
||||
roll: dataUnit(item.roll),
|
||||
})),
|
||||
total: res.data.total,
|
||||
},
|
||||
}))
|
||||
}
|
||||
else if (tabKey === 1) {
|
||||
setCurrentTable(() => ({
|
||||
columns: purchaserRankingColumns,
|
||||
dataSource: {
|
||||
list: res.data.list.map((item, index: number) => ({
|
||||
key: index,
|
||||
index: index + 1,
|
||||
purchaser_name: item.purchaser_name || '--',
|
||||
sales_amount: `￥${priceformat(item.sales_amount)}`,
|
||||
roll: dataUnit(item.roll),
|
||||
})),
|
||||
total: res.data.total,
|
||||
},
|
||||
}))
|
||||
}
|
||||
else {
|
||||
setCurrentTable(() => ({
|
||||
columns: salesmanRankingColumns,
|
||||
dataSource: {
|
||||
list: res.data.list.map((item, index: number) => ({
|
||||
key: index,
|
||||
index: index + 1,
|
||||
sale_user_name: item.sale_user_name || '--',
|
||||
sales_amount: `￥${priceformat(item.sales_amount)}`,
|
||||
roll: dataUnit(item.roll),
|
||||
})),
|
||||
total: res.data.total,
|
||||
},
|
||||
}))
|
||||
}
|
||||
}
|
||||
},
|
||||
[limit, saleType, saleDepartmentId, date_min, date_max, indicator],
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
getData(currentKey)
|
||||
}, [currentKey, getData])
|
||||
|
||||
const handleLoadMore = () => {
|
||||
console.log('loadmore')
|
||||
// TODO（优化）：结合接口的offset 和 limit 分段请求接口然后通过 push 将旧数据和新数据拼接起来
|
||||
setLimit(v => v + defaultLimit)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 销售排行 */}
|
||||
<LayoutBlock circle flexDirection="col" customStyle={{ padding: 0 }}>
|
||||
<View className={classnames(styles.rankingIndicatorTitle, 'flex-row justify-between')} style={{ position: 'relative' }}>
|
||||
<View className="flex-row items-center">
|
||||
<Iconfont name="icon-paiming" size={32}></Iconfont>
|
||||
<Text className={styles.title}>销售排行</Text>
|
||||
</View>
|
||||
<View style={{ width: '90px' }}>
|
||||
<SelectSaleRankingIndicators onChange={onChangeIndicators} dropDownStyle={{ padding: '16rpx 0' }}></SelectSaleRankingIndicators>
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ padding: '0 32rpx' }}>
|
||||
<Divider direction="horizontal" customStyles={{ margin: '10rpx 0 20rpx 0' }}></Divider>
|
||||
<View className={styles.rankingTabs} onClick={handleClickTab}>
|
||||
{tabsConfig.map((item) => {
|
||||
return (
|
||||
<View data-key={item.key} className={classnames(styles.rankingTab, item.key === currentKey ? styles.active : '')} key={item.key}>
|
||||
{item.name}
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
<Table columns={currentTable.columns} dataSource={currentTable.dataSource} onLoadMore={handleLoadMore}></Table>
|
||||
</View>
|
||||
</LayoutBlock>
|
||||
</>
|
||||
)
|
||||
}
|
||||
const RankingBlockWithMemo = memo<RankingBlockPropsType>(RankingBlock)
|
||||
|
||||
// 销售统计
|
||||
const saleStatistic = () => {
|
||||
const SaleStatistic = () => {
|
||||
const { fetchData } = SaleOrderDataFormApi()
|
||||
|
||||
const [saleType, setSaleType] = useState<number | null>(null)
|
||||
@@ -88,10 +358,6 @@ const saleStatistic = () => {
|
||||
date_max: FilterTimeOptions[0].date_max,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
getData()
|
||||
}, [saleType, saleDepartmentId, dateRange])
|
||||
|
||||
const getData = async() => {
|
||||
const res = await fetchData(
|
||||
getFilterData({
|
||||
@@ -164,14 +430,16 @@ const saleStatistic = () => {
|
||||
const selectSaleTypeRef = useRef<any>(null)
|
||||
const selectMarketingDepartmentRef = useRef<any>(null)
|
||||
const selectTimePickerRef = useRef<any>(null)
|
||||
|
||||
useEffect(() => {
|
||||
getData()
|
||||
}, [saleType, saleDepartmentId, dateRange])
|
||||
return (
|
||||
<View className={styles.saleStatistic}>
|
||||
<View className={styles['saleStatistic--filterBar']}>
|
||||
<SelectGroup>
|
||||
<SelectSaleType onChange={onChangeSaleType} defaultValue={-1} onCloseOverlay={() => true} ref={selectSaleTypeRef}></SelectSaleType>
|
||||
<SelectMarketingDepartment onChange={onChangeDepartment} onCloseOverlay={() => true} ref={selectMarketingDepartmentRef}></SelectMarketingDepartment>
|
||||
<SelectTimePicker onChange={onChangeTimePicker} onCloseOverlay={() => true} defaultValue="0" timeOptions={FilterTimeOptions} ref={selectTimePickerRef}></SelectTimePicker>
|
||||
<SelectTimePicker onChange={onChangeTimePicker} onCloseOverlay={() => true} defaultValue={0} timeOptions={FilterTimeOptions} ref={selectTimePickerRef}></SelectTimePicker>
|
||||
</SelectGroup>
|
||||
</View>
|
||||
<View className={styles['saleStatistic--content']}>
|
||||
@@ -319,281 +587,10 @@ const saleStatistic = () => {
|
||||
)
|
||||
})}
|
||||
</LayoutBlock>
|
||||
<RankingBlock saleType={saleType} saleDepartmentId={saleDepartmentId} date_min={dateRange.date_min} date_max={dateRange.date_max}></RankingBlock>
|
||||
<RankingBlockWithMemo saleType={saleType} saleDepartmentId={saleDepartmentId} date_min={dateRange.date_min} date_max={dateRange.date_max}></RankingBlockWithMemo>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// 需要传进来的数据示例
|
||||
|
||||
// 需要传进来的表头数据示例
|
||||
const productRankingColumns = [
|
||||
{
|
||||
key: 'index',
|
||||
title: '编号',
|
||||
dataIndex: 'index',
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
key: 'product_name',
|
||||
title: '面料名称',
|
||||
dataIndex: 'product_name',
|
||||
width: '20%',
|
||||
ellipsis: {
|
||||
isEllipsis: true,
|
||||
rows: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'roll',
|
||||
title: '匹数',
|
||||
dataIndex: 'roll',
|
||||
width: '30%',
|
||||
},
|
||||
{
|
||||
key: 'sales_amount',
|
||||
title: '交易金额',
|
||||
dataIndex: 'sales_amount',
|
||||
width: '30%',
|
||||
render: (text: string) => <Text className={styles.amount}>{text}</Text>,
|
||||
},
|
||||
]
|
||||
|
||||
// 需要传进来的表头数据示例
|
||||
const purchaserRankingColumns = [
|
||||
{
|
||||
key: 'index',
|
||||
title: '编号',
|
||||
dataIndex: 'index',
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
key: 'purchaser_name',
|
||||
title: '客户名称',
|
||||
dataIndex: 'purchaser_name',
|
||||
width: '20%',
|
||||
ellipsis: {
|
||||
isEllipsis: true,
|
||||
rows: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'roll',
|
||||
title: '交易匹数',
|
||||
dataIndex: 'roll',
|
||||
width: '30%',
|
||||
},
|
||||
{
|
||||
key: 'sales_amount',
|
||||
title: '交易金额',
|
||||
dataIndex: 'sales_amount',
|
||||
width: '30%',
|
||||
render: (text: string) => <Text className={styles.amount}>{text}</Text>,
|
||||
},
|
||||
]
|
||||
|
||||
// 需要传进来的表头数据示例
|
||||
const salesmanRankingColumns = [
|
||||
{
|
||||
key: 'index',
|
||||
title: '编号',
|
||||
dataIndex: 'index',
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
key: 'sale_user_name',
|
||||
title: '业务员名称',
|
||||
dataIndex: 'sale_user_name',
|
||||
width: '25%',
|
||||
ellipsis: {
|
||||
isEllipsis: true,
|
||||
rows: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'roll',
|
||||
title: '销售匹数',
|
||||
dataIndex: 'roll',
|
||||
width: '25%',
|
||||
},
|
||||
{
|
||||
key: 'sales_amount',
|
||||
title: '销售金额',
|
||||
dataIndex: 'sales_amount',
|
||||
width: '30%',
|
||||
render: (text: string) => <Text className={styles.amount}>{text}</Text>,
|
||||
},
|
||||
]
|
||||
|
||||
const tabsConfig = [
|
||||
{
|
||||
name: '面料',
|
||||
key: 0,
|
||||
},
|
||||
{
|
||||
name: '客户',
|
||||
key: 1,
|
||||
},
|
||||
{
|
||||
name: '业务员',
|
||||
key: 2,
|
||||
},
|
||||
]
|
||||
|
||||
interface RankingBlockPropsType {
|
||||
saleType?: number | null
|
||||
saleDepartmentId?: number | null
|
||||
date_min?: string
|
||||
date_max?: string
|
||||
}
|
||||
// 销售排行
|
||||
const RankingBlock = memo<RankingBlockPropsType>((props) => {
|
||||
const { saleType, saleDepartmentId, date_min, date_max } = props
|
||||
|
||||
const { fetchData: fetchProductRank } = ProductRankApi()
|
||||
const { fetchData: fetchPurchaserRank } = PurchaserRankApi()
|
||||
const { fetchData: fetchSalesmanRank } = SalesmanRankApi()
|
||||
|
||||
const [limit, setLimit] = useState(defaultLimit)
|
||||
|
||||
const [indicator, setIndicator] = useState<number | null>(null)
|
||||
|
||||
// 切换排行指标
|
||||
const onChangeIndicators = useCallback((indicators: number) => {
|
||||
console.log('indicators', indicators)
|
||||
if (indicators === -1) {
|
||||
setIndicator(null)
|
||||
}
|
||||
else {
|
||||
setIndicator(indicators)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const [currentKey, setCurrentKey] = useState(tabsConfig[0].key)
|
||||
|
||||
const handleClickTab = (event) => {
|
||||
const key = event.target.dataset.key
|
||||
if (key === currentKey) { return }
|
||||
setCurrentKey(key)
|
||||
setLimit(defaultLimit)
|
||||
}
|
||||
|
||||
const getData = useCallback(
|
||||
async(tabKey: number) => {
|
||||
let res: any
|
||||
const payload = {
|
||||
limit,
|
||||
saleType,
|
||||
saleDepartmentId,
|
||||
date_min,
|
||||
date_max,
|
||||
data_form_status: indicator,
|
||||
}
|
||||
if (tabKey === 0) {
|
||||
res = await fetchProductRank(getFilterData(payload))
|
||||
}
|
||||
else if (tabKey === 1) {
|
||||
res = await fetchPurchaserRank(getFilterData(payload))
|
||||
}
|
||||
else {
|
||||
res = await fetchSalesmanRank(getFilterData(payload))
|
||||
}
|
||||
if (res.data) {
|
||||
console.log('排名', res.data)
|
||||
if (tabKey === 0) {
|
||||
setCurrentTable(() => ({
|
||||
columns: productRankingColumns,
|
||||
dataSource: {
|
||||
list: res.data.list.map((item, index: number) => ({
|
||||
key: index,
|
||||
index: index + 1,
|
||||
product_name: item.product_name || '--',
|
||||
sales_amount: `￥${priceformat(item.sales_amount)}`,
|
||||
roll: dataUnit(item.roll),
|
||||
})),
|
||||
total: res.data.total,
|
||||
},
|
||||
}))
|
||||
}
|
||||
else if (tabKey === 1) {
|
||||
setCurrentTable(() => ({
|
||||
columns: purchaserRankingColumns,
|
||||
dataSource: {
|
||||
list: res.data.list.map((item, index: number) => ({
|
||||
key: index,
|
||||
index: index + 1,
|
||||
purchaser_name: item.purchaser_name || '--',
|
||||
sales_amount: `￥${priceformat(item.sales_amount)}`,
|
||||
roll: dataUnit(item.roll),
|
||||
})),
|
||||
total: res.data.total,
|
||||
},
|
||||
}))
|
||||
}
|
||||
else {
|
||||
setCurrentTable(() => ({
|
||||
columns: salesmanRankingColumns,
|
||||
dataSource: {
|
||||
list: res.data.list.map((item, index: number) => ({
|
||||
key: index,
|
||||
index: index + 1,
|
||||
sale_user_name: item.sale_user_name || '--',
|
||||
sales_amount: `￥${priceformat(item.sales_amount)}`,
|
||||
roll: dataUnit(item.roll),
|
||||
})),
|
||||
total: res.data.total,
|
||||
},
|
||||
}))
|
||||
}
|
||||
}
|
||||
},
|
||||
[limit, saleType, saleDepartmentId, date_min, date_max, indicator],
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
getData(currentKey)
|
||||
}, [currentKey, getData])
|
||||
|
||||
const handleLoadMore = () => {
|
||||
console.log('loadmore')
|
||||
// TODO（优化）：结合接口的offset 和 limit 分段请求接口然后通过 push 将旧数据和新数据拼接起来
|
||||
setLimit(v => v + defaultLimit)
|
||||
}
|
||||
|
||||
const [currentTable, setCurrentTable] = useState<TablePropsType>({
|
||||
columns: productRankingColumns,
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 销售排行 */}
|
||||
<LayoutBlock circle flexDirection="col" customStyle={{ padding: 0 }}>
|
||||
<View className={classnames(styles.rankingIndicatorTitle, 'flex-row justify-between')} style={{ position: 'relative' }}>
|
||||
<View className="flex-row items-center">
|
||||
<Iconfont name="icon-paiming" size={32}></Iconfont>
|
||||
<Text className={styles.title}>销售排行</Text>
|
||||
</View>
|
||||
<View style={{ width: '90px' }}>
|
||||
<SelectSaleRankingIndicators onChange={onChangeIndicators} dropDownStyle={{ padding: '16rpx 0' }}></SelectSaleRankingIndicators>
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ padding: '0 32rpx' }}>
|
||||
<Divider direction="horizontal" customStyles={{ margin: '10rpx 0 20rpx 0' }}></Divider>
|
||||
<View className={styles.rankingTabs} onClick={handleClickTab}>
|
||||
{tabsConfig.map((item) => {
|
||||
return (
|
||||
<View data-key={item.key} className={classnames(styles.rankingTab, item.key === currentKey ? styles.active : '')} key={item.key}>
|
||||
{item.name}
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
<Table columns={currentTable.columns} dataSource={currentTable.dataSource} onLoadMore={handleLoadMore}></Table>
|
||||
</View>
|
||||
</LayoutBlock>
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
export default saleStatistic
|
||||
export default SaleStatistic
|
||||
|
||||
Reference in New Issue
Block a user