|
@@ -3,7 +3,7 @@ import { txtLength } from "@/utils/utils"
|
|
|
import { Button, Card, Form, Modal, Popconfirm, Radio, Space, message } from "antd"
|
|
|
import React, { useEffect, useState } from "react"
|
|
|
import { TextTypeList } from "../../const"
|
|
|
-import { DeleteOutlined, PlusOutlined } from "@ant-design/icons"
|
|
|
+import { DeleteOutlined, MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"
|
|
|
import AddTextS from "./addTextS"
|
|
|
import style from '../index.less'
|
|
|
import styles from '../Material/index.less'
|
|
@@ -35,46 +35,42 @@ const NewText: React.FC<Props> = ({ visible, onClose, onChange, value, textData,
|
|
|
const [textList, setTextList] = useState<PULLIN.TextDtoProps[]>([])
|
|
|
const [desVisible, setDesVisible] = useState<boolean>(false)
|
|
|
const [addSTitle, setAddStitle] = useState<string>()
|
|
|
+ const [newText, setNewText] = useState<{ description?: string[], title?: string[] }>({})
|
|
|
/*************************************/
|
|
|
|
|
|
const handleOk = (values: any) => {
|
|
|
+ console.log(values)
|
|
|
const { type, textDto } = values
|
|
|
onChange?.({
|
|
|
type,
|
|
|
- dynamicCreativesTextDetailDTOList: textDto.map((item: any) => {
|
|
|
- let data: any = {}
|
|
|
- Object.keys(item).forEach(key => {
|
|
|
- data[key] = [item[key]]
|
|
|
- })
|
|
|
- return data
|
|
|
- })
|
|
|
+ dynamicCreativesTextDetailDTOList: textDto
|
|
|
})
|
|
|
}
|
|
|
|
|
|
useEffect(() => {
|
|
|
if (value && Object.keys(value).length) {
|
|
|
const { type, dynamicCreativesTextDetailDTOList } = value
|
|
|
- form.setFieldsValue({
|
|
|
- type, textDto: dynamicCreativesTextDetailDTOList.map((item: any) => {
|
|
|
- let data: any = {}
|
|
|
- Object.keys(item).forEach(key => {
|
|
|
- data[key] = item[key]?.[0]
|
|
|
- })
|
|
|
- return data
|
|
|
- })
|
|
|
- })
|
|
|
+ form.setFieldsValue({ type, textDto: dynamicCreativesTextDetailDTOList })
|
|
|
}
|
|
|
}, [value])
|
|
|
|
|
|
useEffect(() => {
|
|
|
if (textData && Object.keys(textData)) {
|
|
|
+ let newText: { description?: string[], title?: string[] } = {}
|
|
|
let data = Object.values(textData).map((item: any) => {
|
|
|
let content = item.children.content
|
|
|
- return { label: content.description, restriction: content.restriction, value: item.name, required: item.required }
|
|
|
+ if (item.name === 'description') {
|
|
|
+ newText.description = ['']
|
|
|
+ } else if (item.name === 'title') {
|
|
|
+ newText.title = ['']
|
|
|
+ }
|
|
|
+ return { label: content.description, restriction: content.restriction, value: item.name, required: item.required, arrayProperty: item?.arrayProperty }
|
|
|
})
|
|
|
+ setNewText(newText)
|
|
|
+ if (!(value && Object.keys(value).length)) { form.setFieldsValue({ textDto: [newText] }) }
|
|
|
setTextList(data)
|
|
|
}
|
|
|
- }, [textData])
|
|
|
+ }, [textData, value])
|
|
|
|
|
|
// 一一对应显示素材
|
|
|
const showMaterial = (index: number) => {
|
|
@@ -161,7 +157,7 @@ const NewText: React.FC<Props> = ({ visible, onClose, onChange, value, textData,
|
|
|
}}
|
|
|
initialValues={{
|
|
|
type: 0,
|
|
|
- textDto: [{}]
|
|
|
+ textDto: [{ description: [''], title: [''] }]
|
|
|
}}
|
|
|
onFinish={handleOk}
|
|
|
>
|
|
@@ -176,7 +172,7 @@ const NewText: React.FC<Props> = ({ visible, onClose, onChange, value, textData,
|
|
|
oldtextDto = [textDto[0] || {}]
|
|
|
} else if (value === 1) {
|
|
|
if (count > length) {
|
|
|
- oldtextDto = oldtextDto.concat(Array(count - length).fill({}))
|
|
|
+ oldtextDto = oldtextDto.concat(Array(count - length).fill(newText || { description: [''] }))
|
|
|
} else {
|
|
|
oldtextDto = oldtextDto.slice(0, count)
|
|
|
}
|
|
@@ -212,33 +208,49 @@ const NewText: React.FC<Props> = ({ visible, onClose, onChange, value, textData,
|
|
|
>
|
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, width: '100%', flexDirection: 'column' }}>
|
|
|
{textList.map(item => {
|
|
|
- return <Form.Item
|
|
|
+ return <Form.List
|
|
|
{...restField}
|
|
|
- label={<strong>{item.label}</strong>}
|
|
|
name={[name, item.value]}
|
|
|
key={key}
|
|
|
- style={{ marginBottom: 0, width: '100%' }}
|
|
|
- rules={[{
|
|
|
- required: item.required, message: '请输入正确的' + item.label, validator: (rule, value) => {
|
|
|
- if (!value) {
|
|
|
- return Promise.reject()
|
|
|
- } else if (!value.match(RegExp(item.restriction.textRestriction.textPattern))) {
|
|
|
- return Promise.reject()
|
|
|
- } else if (txtLength(value) > item.restriction.textRestriction.maxLength) {
|
|
|
- return Promise.reject()
|
|
|
- }
|
|
|
- return Promise.resolve()
|
|
|
- }
|
|
|
- }]}
|
|
|
>
|
|
|
- <TextAideInput placeholder={'请输入' + item.label} style={{ width: 580 }} maxTextLength={item.restriction.textRestriction.maxLength} />
|
|
|
- </Form.Item>
|
|
|
+ {(fields, { add, remove }) => <>
|
|
|
+ {fields.map((field, tIndex) => (
|
|
|
+ <Form.Item
|
|
|
+ {...field}
|
|
|
+ label={<Space>
|
|
|
+ <strong>{item.label}</strong>
|
|
|
+ {textDto?.[num]?.[item.value]?.length > 1 && <a style={{ color: 'red', fontSize: 12 }} onClick={() => remove(field.name)}><MinusCircleOutlined /></a>}
|
|
|
+ </Space>}
|
|
|
+ style={{ marginBottom: 0, width: '100%' }}
|
|
|
+ rules={[{
|
|
|
+ required: item.required, message: '请输入正确的' + item.label, validator: (rule, value) => {
|
|
|
+ if (!value) {
|
|
|
+ return Promise.reject()
|
|
|
+ } else if (!value.match(RegExp(item.restriction.textRestriction.textPattern))) {
|
|
|
+ return Promise.reject()
|
|
|
+ } else if (txtLength(value) > item.restriction.textRestriction.maxLength) {
|
|
|
+ return Promise.reject()
|
|
|
+ }
|
|
|
+ return Promise.resolve()
|
|
|
+ }
|
|
|
+ }]}
|
|
|
+ >
|
|
|
+ <TextAideInput placeholder={'请输入' + item.label} style={{ width: 580 }} maxTextLength={item.restriction.textRestriction.maxLength} />
|
|
|
+ </Form.Item>
|
|
|
+ ))}
|
|
|
+ {deliveryMode === 'DELIVERY_MODE_COMPONENT' && item.arrayProperty?.maxNumber > 1 && textDto?.[num]?.[item.value]?.length < item.arrayProperty?.maxNumber && <Form.Item style={{ marginTop: 6, marginBottom: 0 }}>
|
|
|
+ <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />} >
|
|
|
+ 新增{item.label}
|
|
|
+ </Button>
|
|
|
+ </Form.Item>}
|
|
|
+ </>}
|
|
|
+ </Form.List>
|
|
|
})}
|
|
|
</div>
|
|
|
</Card>
|
|
|
))}
|
|
|
{[3, 2, 4].includes(type) && !(type === 2 && textDto.length >= dynamicMaterialDTos.dynamicGroup.length) && <Form.Item style={{ marginTop: 10, marginBottom: 0 }}>
|
|
|
- <Button type="dashed" onClick={() => add({})} block icon={<PlusOutlined />} disabled={type === 3 && textDto.length >= 30}>
|
|
|
+ <Button type="primary" onClick={() => add(newText)} block icon={<PlusOutlined />} disabled={type === 3 && textDto.length >= 30}>
|
|
|
新增
|
|
|
</Button>
|
|
|
</Form.Item>}
|
|
@@ -273,8 +285,17 @@ const NewText: React.FC<Props> = ({ visible, onClose, onChange, value, textData,
|
|
|
if (type === 1) {
|
|
|
let len = 0
|
|
|
const newTextDto = textDto.map((item: { [x: string]: any }) => {
|
|
|
- if (fieldData?.value && !item?.[fieldData?.value] && valList.length >= len + 1) {
|
|
|
- return { ...item, [fieldData.value]: valList[len++] }
|
|
|
+ if (fieldData?.value && (item?.[fieldData?.value]?.length === 0 || !item?.[fieldData?.value]?.every((t: string) => t)) && valList.length >= len + 1) {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ [fieldData.value]: (item?.[fieldData?.value]?.length === 0 ? [''] : item?.[fieldData?.value]).map((t: string) => {
|
|
|
+ if (t) {
|
|
|
+ return t
|
|
|
+ } else {
|
|
|
+ return valList[len++]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
return item
|
|
|
})
|
|
@@ -284,8 +305,17 @@ const NewText: React.FC<Props> = ({ visible, onClose, onChange, value, textData,
|
|
|
} else if (type === 2) {
|
|
|
let len = 0
|
|
|
const newTextDto = textDto.map((item: { [x: string]: any }) => {
|
|
|
- if (fieldData?.value && !item?.[fieldData?.value] && valList.length >= len + 1) {
|
|
|
- return { ...item, [fieldData.value]: valList[len++] }
|
|
|
+ if (fieldData?.value && (item?.[fieldData?.value]?.length === 0 || !item?.[fieldData?.value]?.every((t: string) => t)) && valList.length >= len + 1) {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ [fieldData.value]: (item?.[fieldData?.value]?.length === 0 ? [''] : item?.[fieldData?.value]).map((t: string) => {
|
|
|
+ if (t) {
|
|
|
+ return t
|
|
|
+ } else {
|
|
|
+ return valList[len++]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
return item
|
|
|
})
|
|
@@ -301,7 +331,7 @@ const NewText: React.FC<Props> = ({ visible, onClose, onChange, value, textData,
|
|
|
}
|
|
|
diffTextDto = Array(diff).fill('').map((item: { [x: string]: any }) => {
|
|
|
if (fieldData?.value) {
|
|
|
- return { ...item, [fieldData.value]: valList[len++] }
|
|
|
+ return { ...item, [fieldData.value]: [valList[len++]] }
|
|
|
}
|
|
|
return item
|
|
|
})
|
|
@@ -312,8 +342,16 @@ const NewText: React.FC<Props> = ({ visible, onClose, onChange, value, textData,
|
|
|
} else if ([3, 4].includes(type)) {
|
|
|
let len = 0
|
|
|
const newTextDto = textDto.map((item: { [x: string]: any }) => {
|
|
|
- if (fieldData?.value && !item?.[fieldData?.value] && valList.length >= len + 1) {
|
|
|
- return { ...item, [fieldData.value]: valList[len++] }
|
|
|
+ if (fieldData?.value && (item?.[fieldData?.value]?.length === 0 || !item?.[fieldData?.value]?.every((t: string) => t)) && valList.length >= len + 1) {
|
|
|
+ return {
|
|
|
+ ...item, [fieldData.value]: (item?.[fieldData?.value]?.length === 0 ? [''] : item?.[fieldData?.value]).map((t: string) => {
|
|
|
+ if (t) {
|
|
|
+ return t
|
|
|
+ } else {
|
|
|
+ return valList[len++]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
return item
|
|
|
})
|
|
@@ -322,7 +360,7 @@ const NewText: React.FC<Props> = ({ visible, onClose, onChange, value, textData,
|
|
|
let diff = valList.length - len
|
|
|
diffTextDto = Array(diff).fill('').map((item: { [x: string]: any }) => {
|
|
|
if (fieldData?.value) {
|
|
|
- return { ...item, [fieldData.value]: valList[len++] }
|
|
|
+ return { ...item, [fieldData.value]: [valList[len++]] }
|
|
|
}
|
|
|
return item
|
|
|
})
|