|
@@ -1,15 +1,225 @@
|
|
|
-import { Modal } from "antd"
|
|
|
-import React from "react"
|
|
|
+import { useAjax } from "@/Hook/useAjax"
|
|
|
+import { modifyAdTimeBatchApi, modifyAmountBatchApi, modifyDailyBudgetBatchApi, updateBatchAdgroupInfoApi } from "@/services/launchAdq/adqv3"
|
|
|
+import { Button, Card, DatePicker, Form, Input, InputNumber, Modal, Radio, Space, Table, message } from "antd"
|
|
|
+import React, { useState } from "react"
|
|
|
+import '../../tencentAdPutIn/index.less'
|
|
|
+import { RangePickerProps } from "antd/lib/date-picker"
|
|
|
+import moment from "moment"
|
|
|
+import style from '../../tencentAdPutIn/create/index.less'
|
|
|
+import TimeInSelect from "@/pages/launchSystemNew/components/timeInSelect"
|
|
|
+import { getTimeSeriesList } from "@/pages/launchSystemNew/adq/ad/const"
|
|
|
|
|
|
+interface Props {
|
|
|
+ type: '修改出价' | '修改名称' | '修改日限额' | '修改投放时间'
|
|
|
+ updateData: any[],
|
|
|
+ visible?: boolean,
|
|
|
+ onClose?: () => void
|
|
|
+ onChange?: () => void
|
|
|
+}
|
|
|
+
|
|
|
+const UpdateAd3: React.FC<Props> = ({ visible, type, onClose, onChange, updateData }) => {
|
|
|
+
|
|
|
+ /****************************************/
|
|
|
+ const [form] = Form.useForm();
|
|
|
+ const timeSeriesType = Form.useWatch('timeSeriesType', form)
|
|
|
+
|
|
|
+ const [failIdList, setFailIdList] = useState<{ adgroupId: number, code: number, message: string, messageCn: string }[]>([])
|
|
|
+ const [failVisible, setFailVisible] = useState<boolean>(false)
|
|
|
+
|
|
|
+ const modifyAmountBatch = useAjax((params) => modifyAmountBatchApi(params)) // 出价
|
|
|
+ const modifyAdTimeBatch = useAjax((params) => modifyAdTimeBatchApi(params)) // 时间
|
|
|
+ const updateBatchAdgroupInfo = useAjax((params) => updateBatchAdgroupInfoApi(params)) // 名称
|
|
|
+ const modifyDailyBudgetBatch = useAjax((params) => modifyDailyBudgetBatchApi(params)) // 日限额
|
|
|
+ /****************************************/
|
|
|
|
|
|
+ const handleOk = (values: any) => {
|
|
|
+ console.log(values)
|
|
|
+ let accountAdgroupMaps = [...new Set(updateData?.map(item => item.accountId + ',' + item.adgroupId))]
|
|
|
+ switch (type) {
|
|
|
+ case '修改出价':
|
|
|
+ modifyAmountBatch.run({ accountAdgroupMaps, ...values }).then(res => {
|
|
|
+ if (res) {
|
|
|
+ message.success(`修改操作完成!`)
|
|
|
+ onChange?.()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ break
|
|
|
+ case '修改名称':
|
|
|
+ updateBatchAdgroupInfo.run({ accountAdgroupMaps, ...values }).then(res => {
|
|
|
+ if (res) {
|
|
|
+ message.success(`修改操作完成!`)
|
|
|
+ onChange?.()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ break
|
|
|
+ case '修改投放时间':
|
|
|
+ let params = { accountAdgroupMaps, ...values }
|
|
|
+ params.beginDate = moment(params.date[0]).format('YYYY-MM-DD')
|
|
|
+ params.endDate = moment(params.date[1]).format('YYYY-MM-DD')
|
|
|
+ if (params.timeSeriesType === '0') {
|
|
|
+ params.timeSeries = Array(336).fill(1).join('');
|
|
|
+ } else {
|
|
|
+ params.timeSeries = params.timeSeries.join('');
|
|
|
+ }
|
|
|
+ delete params.timeSeriesType
|
|
|
+ delete params.date
|
|
|
+ modifyAdTimeBatch.run(params).then(res => {
|
|
|
+ console.log('2222->', res)
|
|
|
+ if (res?.failIdList?.length === 0) {
|
|
|
+ message.success(`修改操作完成!`)
|
|
|
+ onChange?.()
|
|
|
+ } else {
|
|
|
+ setFailIdList(res?.list || [])
|
|
|
+ setFailVisible(true)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ break
|
|
|
+ case '修改日限额':
|
|
|
+ modifyDailyBudgetBatch.run({ accountAdgroupMaps, ...values }).then(res => {
|
|
|
+ console.log('2222->', res)
|
|
|
+ if (res?.failIdList?.length === 0) {
|
|
|
+ message.success(`修改操作完成!`)
|
|
|
+ onChange?.()
|
|
|
+ } else {
|
|
|
+ setFailIdList(res?.list || [])
|
|
|
+ setFailVisible(true)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ break
|
|
|
+ }
|
|
|
|
|
|
+ }
|
|
|
|
|
|
-const UpdateAd3: React.FC = () => {
|
|
|
+ /** 禁止选择以前时间 */
|
|
|
+ const disabledDate: RangePickerProps['disabledDate'] = current => {
|
|
|
+ // Can not select days before today and today
|
|
|
+ return current && current < moment().startOf('day');
|
|
|
+ };
|
|
|
|
|
|
+ return <>
|
|
|
+ <Modal
|
|
|
+ title={<strong>{type}</strong>}
|
|
|
+ visible={visible}
|
|
|
+ footer={null}
|
|
|
+ onCancel={onClose}
|
|
|
+ bodyStyle={{ padding: '0 0 40px', position: 'relative', borderRadius: '0 0 8px 8px' }}
|
|
|
+ className='modalResetCss'
|
|
|
+ width={900}
|
|
|
+ >
|
|
|
+ <Form
|
|
|
+ form={form}
|
|
|
+ name="updateAd3.0"
|
|
|
+ labelAlign='left'
|
|
|
+ labelCol={{ span: 4 }}
|
|
|
+ colon={false}
|
|
|
+ style={{ backgroundColor: '#f1f4fc', maxHeight: 600, overflow: 'hidden', overflowY: 'auto', padding: '10px 10px 10px', borderRadius: '0 0 8px 8px' }}
|
|
|
+ scrollToFirstError
|
|
|
+ onFinishFailed={({ errorFields }) => {
|
|
|
+ message.error(errorFields?.[0]?.errors?.[0])
|
|
|
+ }}
|
|
|
+ onFinish={handleOk}
|
|
|
+ initialValues={{ timeSeriesType: '0', timeSeries: getTimeSeriesList() }}
|
|
|
+ >
|
|
|
+ <Card
|
|
|
+ title={<strong style={{ fontSize: 14 }}>修改设置</strong>}
|
|
|
+ className="cardResetCss"
|
|
|
+ >
|
|
|
+ {type === '修改出价' ? <Form.Item
|
|
|
+ label={<strong>出价</strong>}
|
|
|
+ name='bidAmount'
|
|
|
+ rules={[
|
|
|
+ { required: true, message: '请输入' }
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ <InputNumber min={0} style={{ width: '100%' }} placeholder="请输入价格 元" />
|
|
|
+ </Form.Item> : type === '修改名称' ? <Form.Item
|
|
|
+ label={<strong>广告名称</strong>}
|
|
|
+ name='adgroupName'
|
|
|
+ rules={[
|
|
|
+ { required: true, message: '请输入' }
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ <Input placeholder="请输入广告名称" />
|
|
|
+ </Form.Item> : type === '修改日限额' ? <Form.Item
|
|
|
+ label={<strong>日限额</strong>}
|
|
|
+ name='bidAmount'
|
|
|
+ rules={[
|
|
|
+ { required: true, message: '请输入' }
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ <InputNumber min={0} style={{ width: '100%' }} placeholder="请输入日限额 元" />
|
|
|
+ </Form.Item> : type === '修改投放时间' ? <>
|
|
|
+ <Form.Item label={<strong>投放日期</strong>} name='date' rules={[{ required: true, message: '请选择投放日期' }]}>
|
|
|
+ <DatePicker.RangePicker disabledDate={disabledDate} />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label={<strong>投放时间</strong>}>
|
|
|
+ <Card bordered className="cardResetCss newCss" bodyStyle={{ padding: 0 }}>
|
|
|
+ <div className={style.newSpace}>
|
|
|
+ <div className={style.newSpace_top}>
|
|
|
+ <div className={style.newSpace_title} style={{ width: 78 }}>选择时段</div>
|
|
|
+ <Form.Item name='timeSeriesType' style={{ marginBottom: 0 }}>
|
|
|
+ <Radio.Group>
|
|
|
+ <Radio value="0">全天</Radio>
|
|
|
+ <Radio value="2">指定多个时段</Radio>
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+ </div>
|
|
|
+ {timeSeriesType === '2' && <div className={style.newSpace_bottom} style={{ marginLeft: 65 }}>
|
|
|
+ <Form.Item name='timeSeries' noStyle rules={[{ required: true, message: '请选择时段' }]}>
|
|
|
+ <TimeInSelect />
|
|
|
+ </Form.Item>
|
|
|
+ </div>}
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ </Form.Item>
|
|
|
+ </> : null}
|
|
|
+ </Card>
|
|
|
+ <Form.Item className="submit_pull">
|
|
|
+ <Space>
|
|
|
+ <Button onClick={onClose}>取消</Button>
|
|
|
+ <Button type="primary" htmlType="submit" className="modalResetCss" loading={modifyAmountBatch.loading || modifyAdTimeBatch.loading || updateBatchAdgroupInfo.loading || modifyDailyBudgetBatch.loading}>
|
|
|
+ 确定
|
|
|
+ </Button>
|
|
|
+ </Space>
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ </Modal>
|
|
|
|
|
|
- return <Modal>
|
|
|
-
|
|
|
- </Modal>
|
|
|
+ {failVisible && <Modal
|
|
|
+ title={<strong>报错信息</strong>}
|
|
|
+ visible={failVisible}
|
|
|
+ className='modalResetCss'
|
|
|
+ width={650}
|
|
|
+ onCancel={() => { setFailVisible(false); setFailIdList([]) }}
|
|
|
+ footer={null}
|
|
|
+ >
|
|
|
+ <Table
|
|
|
+ size="small"
|
|
|
+ bordered
|
|
|
+ rowKey={'adgroupId'}
|
|
|
+ columns={[{
|
|
|
+ title: '广告ID',
|
|
|
+ dataIndex: 'adgroupId',
|
|
|
+ key: 'adgroupId',
|
|
|
+ width: 110,
|
|
|
+ render: (value) => <span style={{ fontSize: 12 }}>{value}</span>,
|
|
|
+ }, {
|
|
|
+ title: 'code',
|
|
|
+ dataIndex: 'code',
|
|
|
+ key: 'code',
|
|
|
+ width: 70,
|
|
|
+ align: 'center',
|
|
|
+ render: (value) => <span style={{ fontSize: 12 }}>{value}</span>,
|
|
|
+ }, {
|
|
|
+ title: '错误信息',
|
|
|
+ dataIndex: 'messageCn',
|
|
|
+ key: 'messageCn',
|
|
|
+ render: (value) => <span style={{ fontSize: 12 }}>{value}</span>,
|
|
|
+ }]}
|
|
|
+ dataSource={failIdList}
|
|
|
+ />
|
|
|
+ </Modal>}
|
|
|
+ </>
|
|
|
}
|
|
|
|
|
|
export default React.memo(UpdateAd3)
|