382 lines
12 KiB
TypeScript
382 lines
12 KiB
TypeScript
import { View, Button } from '@tarojs/components'
|
|
import React, { useCallback, memo, useEffect, useMemo, useRef, useState, ReactNode } from 'react'
|
|
import styles from "./index.module.scss"
|
|
import classnames from "classnames";
|
|
import Taro, { usePullDownRefresh, useRouter, useDidShow, setNavigationBarTitle } from '@tarojs/taro';
|
|
import Popup from '@/components/popup'
|
|
import { debounce } from '@/common/util'
|
|
import { alert, goLink } from '@/common/common'
|
|
import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format'
|
|
import Form from "./components/form"
|
|
import Remark from '../orderDetails/components/remark';
|
|
import Address from "@/components/address"
|
|
import { mppurchaser, mppurchaserpost, mppurchaserput } from '@/api/customer'
|
|
type AddressParms = {
|
|
id: number,
|
|
name: string
|
|
}
|
|
|
|
export default () => {
|
|
|
|
|
|
const router = useRouter()
|
|
|
|
const [infoObj, setinfoObj] = useState<any>()
|
|
|
|
const [formData, setformData] = useState<any>()
|
|
|
|
const [addressArr, setaddressArr] = useState<AddressParms[]>([])
|
|
useEffect(() => {
|
|
if (router.params.type === 'edit') {
|
|
getInfo()
|
|
}
|
|
}, [])
|
|
|
|
//默认业务员
|
|
useDidShow(() => {
|
|
if (router.params.type === 'add') {
|
|
setNavigationBarTitle({ title: "新增客户" })
|
|
} else {
|
|
|
|
setNavigationBarTitle({ title: "客户编辑" })
|
|
}
|
|
let userInfo = JSON.parse(Taro.getStorageSync('userInfo'))
|
|
//获取选择的客户
|
|
let pages = Taro.getCurrentPages();
|
|
let 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 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 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 [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) => {
|
|
var 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)
|
|
}
|
|
|
|
const isDisabled = useMemo(() => {
|
|
let empty: any = null;
|
|
if (typeof (formData) == 'undefined') return
|
|
for (const key in formData) {
|
|
if (formData.hasOwnProperty(key)) {
|
|
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
|
|
let query = {
|
|
...formData,
|
|
remark: remarkDesc,
|
|
id: infoObj?.id
|
|
}
|
|
if (router.params.type == 'add') {
|
|
delete query.id
|
|
}
|
|
Taro.showModal({
|
|
content: "确定要提交吗？",
|
|
confirmText: "确认",
|
|
cancelText: "取消",
|
|
success: async function (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 => {
|
|
return (
|
|
<View 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={true}
|
|
showMore={true}
|
|
inputValue={formData?.addressName}
|
|
placeholderFont={'请选择省市区'}
|
|
handNav={() => setShowSiteModal(true)}
|
|
></Form>
|
|
<Form
|
|
title={'详细地址'}
|
|
handBlur={handAddress}
|
|
placeholderFont={'请输入地址'}
|
|
inputValue={formData?.address_detail}
|
|
></Form>
|
|
<Form
|
|
title={'业务员'}
|
|
isDisabled={true}
|
|
showMore={true}
|
|
placeholderFont={'请选择业务员'}
|
|
handNav={() => goLink('/pages/saleuserPage/index')}
|
|
showBorder={false}
|
|
inputValue={formData?.sale_user_name}
|
|
></Form>
|
|
</View>
|
|
<DefaultBox title={'备注信息'} showMode={true} modeName={`${'填写/修改备注'} >`} clickNode={() => setShowDesc(true)}>
|
|
<View className={classnames(remarkDesc === '' ? styles.remarkFontactive : styles.remarkFont)}>{remarkDesc === '' ? '尚未备注信息' : remarkDesc}</View>
|
|
</DefaultBox>
|
|
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
|
|
<Remark onSave={(e) => getRemark(e)} defaultValue={infoObj?.remark} showInput={showDesc ? true : false} />
|
|
</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>
|
|
</>
|
|
)
|
|
}
|
|
|
|
|
|
|
|
//卡片盒子元素
|
|
interface Obs {
|
|
title?: string,
|
|
modeName?: string,
|
|
showMode?: boolean,
|
|
children?: ReactNode,
|
|
clickNode?: () => void
|
|
}
|
|
|
|
const DefaultBox = memo((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>
|
|
)
|
|
}) |