|
|
@@ -9,6 +9,8 @@ import useOptions from './useOptions'
|
|
|
import ChangeSelect from '@/pages/customer/Company/components/ChangeSelect'
|
|
|
import ChangeTreeSelect from '@/pages/staff/Employee/components/ChangeTreeSelect'
|
|
|
|
|
|
+const extraValArr = ['cascader', 'select', 'treeSelect'] // 需要设置ExtraVal的类型
|
|
|
+
|
|
|
const EditableFormItem = ({
|
|
|
type,
|
|
|
label,
|
|
|
@@ -31,7 +33,11 @@ const EditableFormItem = ({
|
|
|
})
|
|
|
|
|
|
useEffect(() => {
|
|
|
- setState({ ...state, val: '', extraVal: '' })
|
|
|
+ setState({
|
|
|
+ ...state,
|
|
|
+ val: '',
|
|
|
+ extraVal: ''
|
|
|
+ })
|
|
|
}, [])
|
|
|
useEffect(() => {
|
|
|
// 处于编辑状态自动聚焦, 级联有问题暂无解决办法
|
|
|
@@ -55,14 +61,45 @@ const EditableFormItem = ({
|
|
|
}
|
|
|
// 当val为空时,需要设置默认值
|
|
|
if (!state.val) {
|
|
|
- // setVal(record)
|
|
|
setState({ ...state, val: '' })
|
|
|
}
|
|
|
}, [record, editing, iRef])
|
|
|
|
|
|
// 单独设置一个依赖,防止dataId变化
|
|
|
useEffect(() => {
|
|
|
- setState({ ...state, val: record })
|
|
|
+ function findTreeNode(tree, v) {
|
|
|
+ let node = null
|
|
|
+ tree?.some(n => {
|
|
|
+ if (n.value === v) {
|
|
|
+ node = n
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ return findTreeNode(n.children, v)
|
|
|
+ })
|
|
|
+ return node
|
|
|
+ }
|
|
|
+ function reduceExtralVal(v) {
|
|
|
+ if (editCellType === 'cascader') {
|
|
|
+ // 针对级联,拿到显示用名称
|
|
|
+ return dataSource.districtName
|
|
|
+ }
|
|
|
+ if (extraValArr.includes(editCellType)) {
|
|
|
+ if (Array.isArray(v)) {
|
|
|
+ return record?.reduce((prev, curr) => {
|
|
|
+ return `${prev}${prev ? ',' : ''}${
|
|
|
+ options?.find(item => item.value === curr)?.label || ''
|
|
|
+ }`
|
|
|
+ }, '')
|
|
|
+ }
|
|
|
+ return findTreeNode(options, v)?.label
|
|
|
+ }
|
|
|
+ return options?.find(item => item.value === record)?.label || ''
|
|
|
+ }
|
|
|
+ setState({
|
|
|
+ ...state,
|
|
|
+ val: record,
|
|
|
+ extraVal: reduceExtralVal(record)
|
|
|
+ })
|
|
|
}, [dataId])
|
|
|
|
|
|
const toggleEdit = () => {
|
|
|
@@ -102,7 +139,6 @@ const EditableFormItem = ({
|
|
|
}
|
|
|
|
|
|
let cell = null
|
|
|
-
|
|
|
// 是否是自定义cell
|
|
|
if (editCellType === 'custom') {
|
|
|
cell = customCell
|
|
|
@@ -114,7 +150,7 @@ const EditableFormItem = ({
|
|
|
ref={iRef}
|
|
|
defaultValue={state.val}
|
|
|
allowClear={false}
|
|
|
- className="zh-width-100P"
|
|
|
+ className="w-full"
|
|
|
autoFocus={true}
|
|
|
onChange={(value, local) => save({ currentTarget: { value, local } })}
|
|
|
popupVisible={true}
|
|
|
@@ -133,7 +169,7 @@ const EditableFormItem = ({
|
|
|
/>
|
|
|
)
|
|
|
break
|
|
|
- case 'treeselect':
|
|
|
+ case 'treeSelect':
|
|
|
cell = (
|
|
|
<ChangeTreeSelect
|
|
|
ref={iRef}
|
|
|
@@ -169,12 +205,10 @@ const EditableFormItem = ({
|
|
|
}
|
|
|
} else {
|
|
|
let content = state.val
|
|
|
- if (editCellType === 'cascader') {
|
|
|
- content = state.extraVal || dataSource.local
|
|
|
- }
|
|
|
- if (editCellType === 'select') {
|
|
|
- content = state.extraVal || dataSource.gender
|
|
|
+ if (extraValArr.includes(editCellType)) {
|
|
|
+ content = state.extraVal
|
|
|
}
|
|
|
+
|
|
|
cell = (
|
|
|
<div className="editable-cell-value-wrap" onClick={toggleEdit}>
|
|
|
{content}
|
|
|
@@ -185,7 +219,7 @@ const EditableFormItem = ({
|
|
|
return (
|
|
|
<Col span={span}>
|
|
|
<Row wrap={false} className="zh-border-top-1 zh-pd-top-8 zh-pd-bottom-8">
|
|
|
- <Col flex="100px" className="zh-text-right">
|
|
|
+ <Col flex="100px" className="text-right">
|
|
|
<span className="zh-lh-32 zh-mg-right-10">{label}:</span>
|
|
|
</Col>
|
|
|
<Col flex="auto">{cell}</Col>
|