379 lines
10 KiB
TypeScript
379 lines
10 KiB
TypeScript
import { Button, View } from '@tarojs/components'
|
|
import Taro, { setNavigationBarTitle, useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
|
|
import type { ReactNode } from 'react'
|
|
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
|
import classnames from 'classnames'
|
|
import Remark from '../orderDetails/components/remark'
|
|
import styles from './index.module.scss'
|
|
import Form from './components/form'
|
|
import Popup from '@/components/popup'
|
|
import { debounce } from '@/common/util'
|
|
import { alert, goLink } from '@/common/common'
|
|
import { formatDateTime, formatPriceDiv, formatWeightDiv } from '@/common/format'
|
|
import Address from '@/components/address'
|
|
import { MpPurchaser, MpPurchaserPost, MpPurchaserPut } from '@/api/customer'
|
|
// 卡片盒子元素
|
|
interface Obs {
|
|
title?: string
|
|
modeName?: string
|
|
showMode?: boolean
|
|
children?: ReactNode
|
|
clickNode?: () => void
|
|
}
|
|
|
|
const DefaultBox = (props: Obs) => {
|
|
const {
|
|
title = '标题',
|
|
modeName = '大货',
|
|
showMode = false,
|
|
children,
|
|
clickNode,
|
|
} = props
|
|
|
|
return (
|
|
<View className={styles.defaltBox}>
|
|
<View className={styles.titleBox}>
|
|
<View className={styles.title}>{title}</View>
|
|
{
|
|
showMode && <View className={styles.modeName} onClick={() => clickNode?.()}>{modeName}</View>
|
|
}
|
|
</View>
|
|
<View className={styles.modeLine}></View>
|
|
{children}
|
|
</View>
|
|
)
|
|
}
|
|
const DefaultBoxWithMemo = memo(DefaultBox)
|
|
|
|
interface AddressParms {
|
|
id: number
|
|
name: string
|
|
}
|
|
const CustomerEditor = () => {
|
|
const router = useRouter()
|
|
|
|
const [infoObj, setinfoObj] = useState<any>()
|
|
|
|
const [formData, setformData] = useState<any>()
|
|
|
|
const [addressArr, setaddressArr] = useState<AddressParms[]>([])
|
|
|
|
// 默认业务员
|
|
useDidShow(() => {
|
|
if (router.params.type === 'add') {
|
|
setNavigationBarTitle({ title: '新增客户' })
|
|
}
|
|
else {
|
|
setNavigationBarTitle({ title: '客户编辑' })
|
|
}
|
|
const userInfo = JSON.parse(Taro.getStorageSync('userInfo'))
|
|
// 获取选择的客户
|
|
const pages = Taro.getCurrentPages()
|
|
const currPage = pages[pages.length - 1] // 获取当前页面
|
|
// 判断是否有跳转选择业务员
|
|
if (currPage.data?.saleuserId && currPage.data?.saleuserId !== '') {
|
|
setformData(val => ({
|
|
...val,
|
|
sale_user_id: currPage.data?.saleuserId,
|
|
sale_user_name: currPage.data?.saleuserName,
|
|
}))
|
|
}
|
|
// 默认业务员
|
|
if (currPage.data?.saleuserId == null) {
|
|
setformData(e => ({
|
|
...e,
|
|
sale_user_id: userInfo?.user_id,
|
|
sale_user_name: userInfo?.user_name,
|
|
}))
|
|
}
|
|
})
|
|
|
|
const { fetchData: getDesc } = MpPurchaser()
|
|
|
|
const handTitle = useCallback((e) => {
|
|
setformData(val => ({ ...val, name: e }))
|
|
}, [])
|
|
|
|
const handName = useCallback((e) => {
|
|
setformData(val => ({ ...val, short_name: e }))
|
|
}, [])
|
|
|
|
const handUsername = useCallback((e) => {
|
|
setformData(val => ({ ...val, director: e }))
|
|
}, [])
|
|
|
|
const handUserPhone = useCallback((e) => {
|
|
setformData(val => ({ ...val, phone: e }))
|
|
}, [])
|
|
|
|
const handAddress = useCallback((e) => {
|
|
setformData(val => ({ ...val, address_detail: e }))
|
|
}, [])
|
|
|
|
// 客户类型数组
|
|
const [list, setlist] = useState<any[]>([
|
|
{
|
|
id: 1,
|
|
name: '布行',
|
|
check: false,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '二批',
|
|
check: false,
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '制衣厂',
|
|
check: false,
|
|
},
|
|
])
|
|
|
|
// 选择客户类型
|
|
const handItem = (item) => {
|
|
list.map((it) => {
|
|
if (it.id === item.id) {
|
|
it.check = true
|
|
}
|
|
else {
|
|
it.check = false
|
|
}
|
|
return it
|
|
})
|
|
setlist([...list])
|
|
setformData(val => ({ ...val, purchaser_type: item.id }))
|
|
}
|
|
// 备注操作
|
|
const [remarkDesc, setremarkDesc] = useState('')
|
|
const getInfo = async() => {
|
|
Taro.showLoading({
|
|
title: '请稍等...',
|
|
mask: true,
|
|
})
|
|
const res = await getDesc({ id: router.params.id })
|
|
setinfoObj(res.data)
|
|
list.map((item) => {
|
|
if (item.id == res.data.purchaser_type) {
|
|
item.check = true
|
|
}
|
|
else {
|
|
item.check = false
|
|
}
|
|
return item
|
|
})
|
|
setlist([...list])
|
|
setformData({
|
|
sale_user_id: res.data?.sale_user_id,
|
|
sale_user_name: res.data?.sale_user_name,
|
|
name: res.data?.name,
|
|
short_name: res.data?.short_name,
|
|
director: res.data?.director,
|
|
phone: res.data?.phone,
|
|
addressName: res.data?.province_name + res.data?.city_name + res.data?.district_name,
|
|
address_detail: res.data?.address_detail,
|
|
purchaser_type: res.data?.purchaser_type,
|
|
district_id: res.data?.district_id,
|
|
})
|
|
setremarkDesc(res.data?.remark)
|
|
let arr: any[] = []
|
|
arr = [
|
|
{ id: res.data.province_id, name: res.data.province_name },
|
|
{ id: res.data.city_id, name: res.data.city_name },
|
|
{ id: res.data.district_id, name: res.data.district_name },
|
|
]
|
|
setaddressArr([...arr])
|
|
Taro.hideLoading()
|
|
}
|
|
|
|
const [showDesc, setShowDesc] = useState(false)
|
|
const getRemark = useCallback(async(e) => {
|
|
setShowDesc(false)
|
|
setremarkDesc(e)
|
|
// setformData((val) => ({ ...val, remark: e }))
|
|
}, [])
|
|
|
|
// 地址选择
|
|
const [showSiteModal, setShowSiteModal] = useState(false)
|
|
|
|
const handleSetSite = (ev) => {
|
|
const addressName: any = []
|
|
ev.forEach((v) => {
|
|
addressName.push(v?.name)
|
|
})
|
|
if (ev.length === 3) {
|
|
setShowSiteModal(false)
|
|
setformData(val => ({ ...val, addressName: ev[0]?.name + ev[1]?.name + ev[2]?.name || '', district_id: ev[2]?.id }))
|
|
}
|
|
}
|
|
|
|
const onClose = () => {
|
|
setShowSiteModal(false)
|
|
}
|
|
useEffect(() => {
|
|
if (router.params.type === 'edit') {
|
|
getInfo()
|
|
}
|
|
}, [])
|
|
const isDisabled = useMemo(() => {
|
|
let empty: any = null
|
|
if (typeof (formData) == 'undefined') { return }
|
|
for (const key in formData) {
|
|
if (key in formData) {
|
|
if (formData[key] !== '' && typeof (formData[key]) !== 'undefined') {
|
|
empty = false
|
|
}
|
|
else {
|
|
empty = true
|
|
break
|
|
}
|
|
}
|
|
}
|
|
return empty
|
|
}, [formData])
|
|
|
|
// 重置
|
|
const handReset = () => {
|
|
setformData({
|
|
sale_user_id: '',
|
|
sale_user_name: '',
|
|
name: '',
|
|
short_name: '',
|
|
director: '',
|
|
phone: '',
|
|
addressName: '',
|
|
address_detail: '',
|
|
purchaser_type: '',
|
|
remark: '',
|
|
district_id: '',
|
|
})
|
|
}
|
|
|
|
const { fetchData: postFetch } = MpPurchaserPost()
|
|
const { fetchData: putFetch } = MpPurchaserPut()
|
|
// 提交
|
|
const handSure = async() => {
|
|
// if (!isDisabled) return false
|
|
const query = {
|
|
...formData,
|
|
remark: remarkDesc,
|
|
id: infoObj?.id,
|
|
}
|
|
if (router.params.type == 'add') {
|
|
delete query.id
|
|
}
|
|
Taro.showModal({
|
|
content: '确定要提交吗？',
|
|
confirmText: '确认',
|
|
cancelText: '取消',
|
|
async success(res) {
|
|
if (res.confirm) {
|
|
const res = await (router.params.type == 'add' ? postFetch(query) : putFetch(query))
|
|
Taro.showLoading({
|
|
title: '请稍等...',
|
|
mask: true,
|
|
})
|
|
if (res.msg === 'success') {
|
|
Taro.showToast({
|
|
title: '成功',
|
|
})
|
|
Taro.hideLoading()
|
|
Taro.navigateBack({
|
|
delta: 1,
|
|
})
|
|
}
|
|
else {
|
|
Taro.showToast({
|
|
title: res.msg,
|
|
icon: 'error',
|
|
})
|
|
}
|
|
}
|
|
},
|
|
})
|
|
}
|
|
|
|
return (
|
|
<>
|
|
|
|
<View className={styles.mainBox}>
|
|
<Form
|
|
title="客户全称"
|
|
handBlur={handTitle}
|
|
placeholderFont="请输入全称"
|
|
inputValue={formData?.name}
|
|
></Form>
|
|
<Form
|
|
title="客户简称"
|
|
handBlur={handName}
|
|
placeholderFont="请输入简称"
|
|
inputValue={formData?.short_name}
|
|
></Form>
|
|
<Form
|
|
title="客户类型"
|
|
showInput={false}
|
|
>
|
|
<View className={styles.flexBox}>
|
|
{
|
|
list.map((item, key) => {
|
|
return (
|
|
<View key={key} className={classnames(item.check ? styles.activeBox : styles.itemBox)} onClick={() => handItem(item)}>{item.name}</View>
|
|
)
|
|
})
|
|
}
|
|
</View>
|
|
</Form>
|
|
<Form
|
|
title="联系人"
|
|
handBlur={handUsername}
|
|
placeholderFont="请输入联系人"
|
|
inputValue={formData?.director}
|
|
></Form>
|
|
<Form
|
|
title="联系电话"
|
|
handBlur={handUserPhone}
|
|
inputType="number"
|
|
placeholderFont="请输入号码"
|
|
maxlength={11}
|
|
inputValue={formData?.phone}
|
|
></Form>
|
|
<Form
|
|
title="省市区"
|
|
isDisabled
|
|
showMore
|
|
inputValue={formData?.addressName}
|
|
placeholderFont="请选择省市区"
|
|
handNav={() => setShowSiteModal(true)}
|
|
></Form>
|
|
<Form
|
|
title="详细地址"
|
|
handBlur={handAddress}
|
|
placeholderFont="请输入地址"
|
|
inputValue={formData?.address_detail}
|
|
></Form>
|
|
<Form
|
|
title="业务员"
|
|
isDisabled
|
|
showMore
|
|
placeholderFont="请选择业务员"
|
|
handNav={() => goLink('/pages/saleuserPage/index')}
|
|
showBorder={false}
|
|
inputValue={formData?.sale_user_name}
|
|
></Form>
|
|
</View>
|
|
<DefaultBoxWithMemo title="备注信息" showMode modeName={`${'填写/修改备注'} >`} clickNode={() => setShowDesc(true)}>
|
|
<View className={classnames(remarkDesc === '' ? styles.remarkFontactive : styles.remarkFont)}>{remarkDesc === '' ? '尚未备注信息' : remarkDesc}</View>
|
|
</DefaultBoxWithMemo>
|
|
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
|
|
<Remark onSave={e => getRemark(e)} defaultValue={infoObj?.remark} showInput={!!showDesc} />
|
|
</Popup>
|
|
<Address addressOnChange={val => handleSetSite(val)} defaultValue={addressArr} addressOnClose={() => onClose()} show={showSiteModal} />
|
|
<View className={styles.safeBox}></View>
|
|
<View className={styles.bottomBox}>
|
|
<Button className={styles.resetBox} onClick={() => { handReset() }}> 重置</Button >
|
|
<Button className={classnames(isDisabled ? styles.button2 : styles.activeButton)} disabled={isDisabled} onClick={() => handSure()}> 确认</Button >
|
|
</View>
|
|
</>
|
|
)
|
|
}
|
|
export default CustomerEditor
|