|
|
@@ -0,0 +1,902 @@
|
|
|
+import { Badge, Button, Card, DatePicker, Drawer, Dropdown, Form, Input, InputNumber, message, Modal, Popconfirm, Radio, Select, Space, Table, Tag, Tooltip } from "antd"
|
|
|
+import React, { useEffect, useState } from "react"
|
|
|
+import './index1.less'
|
|
|
+import style from './index.less'
|
|
|
+import { DownOutlined, QuestionCircleOutlined } from "@ant-design/icons"
|
|
|
+import { useAjax } from "@/Hook/useAjax"
|
|
|
+import { RangePickerProps } from "antd/lib/date-picker"
|
|
|
+import moment from "moment"
|
|
|
+import { copy } from "@/utils/utils"
|
|
|
+import SetTime from "./setTime"
|
|
|
+import { adAddTaskApi, addOnceTaskAutoAcquisitionApi, addTaskAutoAcquisitionApi, delAdgroupQuantTaskAdApi, delAdgroupQuantTaskApi, getAdgroupQuantTaskAdDetailsListApi, getAdgroupQuantTaskAdLogListApi, getAdgroupQuantTaskListApi, getTaskAllListApi, updateTaskAutoAcquisitionApi } from "@/services/gameData"
|
|
|
+
|
|
|
+interface AutoAcquisitionSetTaskProps {
|
|
|
+ selectAdList: any[]
|
|
|
+ onChange?: (type?: number) => void
|
|
|
+}
|
|
|
+/**
|
|
|
+ * 一键起量任务
|
|
|
+ * @returns
|
|
|
+ */
|
|
|
+const AutoAcquisitionSetTask: React.FC<AutoAcquisitionSetTaskProps> = ({ selectAdList = [], onChange }) => {
|
|
|
+
|
|
|
+ /*********************************/
|
|
|
+ const [visible, setVisible] = useState<boolean>(false)
|
|
|
+ const [taskVisible, setTaskVisible] = useState<boolean>(false)
|
|
|
+ const [addTaskVisible, setAddTaskVisible] = useState<boolean>(false)
|
|
|
+ /*********************************/
|
|
|
+
|
|
|
+ return <>
|
|
|
+ <Dropdown
|
|
|
+ menu={{
|
|
|
+ items: [
|
|
|
+ {
|
|
|
+ label: <span style={{ display: 'inline-block', width: 120 }}>创建一键起量任务</span>,
|
|
|
+ key: '1',
|
|
|
+ onClick: () => { setVisible(true) }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '添加到任务',
|
|
|
+ key: '2',
|
|
|
+ disabled: selectAdList.length === 0,
|
|
|
+ onClick: () => { setAddTaskVisible(true) }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '起量任务列表',
|
|
|
+ key: '3',
|
|
|
+ onClick: () => { setTaskVisible(true) }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }}
|
|
|
+ placement="bottomLeft"
|
|
|
+ arrow
|
|
|
+ >
|
|
|
+ <Button>
|
|
|
+ <Space>
|
|
|
+ 一键起量
|
|
|
+ <DownOutlined />
|
|
|
+ </Space>
|
|
|
+ </Button>
|
|
|
+ </Dropdown>
|
|
|
+
|
|
|
+ {/* 任务创建 */}
|
|
|
+ {visible && <AutoAcquisitionSet
|
|
|
+ selectAdList={selectAdList}
|
|
|
+ visible={visible}
|
|
|
+ onClose={() => {
|
|
|
+ setVisible(false)
|
|
|
+ }}
|
|
|
+ onChange={(val) => {
|
|
|
+ onChange?.(val)
|
|
|
+ setVisible(false)
|
|
|
+ }}
|
|
|
+ />}
|
|
|
+
|
|
|
+ {/* 广告加人到任务 */}
|
|
|
+ {addTaskVisible && <AdAddTask
|
|
|
+ selectAdList={selectAdList}
|
|
|
+ visible={addTaskVisible}
|
|
|
+ onClose={() => {
|
|
|
+ setAddTaskVisible(false)
|
|
|
+ }}
|
|
|
+ onChange={(val) => {
|
|
|
+ setAddTaskVisible(false)
|
|
|
+ }}
|
|
|
+ />}
|
|
|
+
|
|
|
+ {/* 任务列表 */}
|
|
|
+ {taskVisible && <TaskLog
|
|
|
+ visible={taskVisible}
|
|
|
+ onClose={() => setTaskVisible(false)}
|
|
|
+ />}
|
|
|
+ </>;
|
|
|
+};
|
|
|
+
|
|
|
+interface Props {
|
|
|
+ selectAdList?: any[]
|
|
|
+ initialValues?: any
|
|
|
+ visible?: boolean
|
|
|
+ onClose?: () => void
|
|
|
+ onChange?: (type?: number) => void
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 设置一键起量任务
|
|
|
+ * @param param0
|
|
|
+ * @returns
|
|
|
+ */
|
|
|
+const AutoAcquisitionSet: React.FC<Props> = ({ selectAdList = [], initialValues, visible, onChange, onClose }) => {
|
|
|
+
|
|
|
+ /****************************************/
|
|
|
+ const [form] = Form.useForm<ADQV3.AddTaskAutoAcquisitionProps>();
|
|
|
+ const startDay = Form.useWatch('startDay', form);
|
|
|
+ const endDay = Form.useWatch('endDay', form);
|
|
|
+ const addType = Form.useWatch('addType', form);
|
|
|
+ const taskType = Form.useWatch('taskType', form);
|
|
|
+
|
|
|
+ const addTaskAutoAcquisition = useAjax((params) => addTaskAutoAcquisitionApi(params))
|
|
|
+ const updateTaskAutoAcquisition = useAjax((params) => updateTaskAutoAcquisitionApi(params))
|
|
|
+ const addOnceTaskAutoAcquisition = useAjax((params) => addOnceTaskAutoAcquisitionApi(params))
|
|
|
+ /****************************************/
|
|
|
+
|
|
|
+ const handleOk = () => {
|
|
|
+ form.validateFields().then((values) => {
|
|
|
+
|
|
|
+ const { taskType, addType, startDay, endDay, budgetPercent, ...val } = values;
|
|
|
+ const params: ADQV3.AddTaskAutoAcquisitionProps = {
|
|
|
+ ...val,
|
|
|
+ }
|
|
|
+ if (addType === 'percent' && budgetPercent) {
|
|
|
+ params.budgetPercent = budgetPercent / 100;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (selectAdList?.length) {
|
|
|
+ params.adgroupBeanList = selectAdList.map(item => ({ accountId: item.accountId, adgroupId: item.adgroupId }))
|
|
|
+ }
|
|
|
+ if (initialValues?.id) {
|
|
|
+ params.startDay = moment(startDay).format('YYYY-MM-DD')
|
|
|
+ params.endDay = moment(endDay).format('YYYY-MM-DD')
|
|
|
+ updateTaskAutoAcquisition.run({ ...params, idList: [initialValues.id] }).then(res => {
|
|
|
+ if (res?.data) {
|
|
|
+ message.success('修改成功')
|
|
|
+ onChange?.()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ if (taskType === 'cyc') { // 循环
|
|
|
+ params.startDay = moment(startDay).format('YYYY-MM-DD')
|
|
|
+ params.endDay = moment(endDay).format('YYYY-MM-DD')
|
|
|
+ addTaskAutoAcquisition.run(params).then(res => {
|
|
|
+ if (res?.data) {
|
|
|
+ message.success('添加成功')
|
|
|
+ onChange?.()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else { // 立即执行
|
|
|
+ addOnceTaskAutoAcquisition.run(params).then(res => {
|
|
|
+ if (res?.data) {
|
|
|
+ message.success('添加成功')
|
|
|
+ onChange?.(1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ form.submit()
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ const disabledDateStart: RangePickerProps['disabledDate'] = current => {
|
|
|
+ // Can not select days before today and today
|
|
|
+ if (endDay) {
|
|
|
+ return current && current < moment().startOf('day') || current > moment(endDay) || current < moment(endDay).subtract(10, 'days');
|
|
|
+ }
|
|
|
+ return current && current < moment().startOf('day');
|
|
|
+ };
|
|
|
+
|
|
|
+ const disabledDateEnd: RangePickerProps['disabledDate'] = current => {
|
|
|
+ // Can not select days before today and today
|
|
|
+ if (startDay) {
|
|
|
+ return current && current < moment().startOf('day') || current < moment(startDay) || current > moment(startDay).add(10, 'days');
|
|
|
+ }
|
|
|
+ return current && current < moment().startOf('day');
|
|
|
+ };
|
|
|
+
|
|
|
+ return <Modal
|
|
|
+ title={<strong>{initialValues?.id ? '修改' : '新增'}一键起量任务
|
|
|
+ <Tooltip title={<div>
|
|
|
+ <p>1. 一键起量期间产生的消耗不赔付，但转化计入赔付门槛判断；</p>
|
|
|
+ <p>2. 一键起量可能导致转化成本高于预期，且起量结束后不一定能持续消耗。</p>
|
|
|
+ </div>}>
|
|
|
+ <QuestionCircleOutlined />
|
|
|
+ </Tooltip>
|
|
|
+ </strong>}
|
|
|
+ open={visible}
|
|
|
+ onCancel={onClose}
|
|
|
+ onOk={handleOk}
|
|
|
+ className='modalResetCss'
|
|
|
+ width={750}
|
|
|
+ confirmLoading={addTaskAutoAcquisition.loading || addOnceTaskAutoAcquisition.loading || updateTaskAutoAcquisition.loading}
|
|
|
+ >
|
|
|
+ <div className={style.autoAcquisitionSet}>
|
|
|
+ {selectAdList?.length > 0 && <div className={style.left}>
|
|
|
+ <Table
|
|
|
+ dataSource={selectAdList}
|
|
|
+ size="small"
|
|
|
+ scroll={{ x: 400, y: 450 }}
|
|
|
+ bordered
|
|
|
+ rowKey={'adgroupId'}
|
|
|
+ pagination={false}
|
|
|
+ columns={[
|
|
|
+ {
|
|
|
+ title: '广告名称',
|
|
|
+ dataIndex: 'adgroupName',
|
|
|
+ key: 'adgroupName',
|
|
|
+ width: 200,
|
|
|
+ render(value) {
|
|
|
+ return <span style={{ wordBreak: 'break-all' }}>{value}</span>
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '原设置',
|
|
|
+ dataIndex: 'beforeSet',
|
|
|
+ key: 'beforeSet',
|
|
|
+ width: 120,
|
|
|
+ render(value, record) {
|
|
|
+ if (!record?.autoAcquisitionEnabled) {
|
|
|
+ return '未开启'
|
|
|
+ }
|
|
|
+ return `一键起量中，起量预算：${record?.autoAcquisitionBudget} 元`
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </div>}
|
|
|
+ <div className={style.right}>
|
|
|
+ <div className={style.edit}>
|
|
|
+ <div>
|
|
|
+ <Form
|
|
|
+ form={form}
|
|
|
+ name="newTaks"
|
|
|
+ layout={selectAdList?.length > 0 ? 'vertical' : 'horizontal'}
|
|
|
+ labelCol={selectAdList?.length > 0 ? undefined : { span: 5 }}
|
|
|
+ labelAlign="left"
|
|
|
+ colon={false}
|
|
|
+ scrollToFirstError={{
|
|
|
+ behavior: 'smooth',
|
|
|
+ block: 'center'
|
|
|
+ }}
|
|
|
+ onFinishFailed={({ errorFields }) => {
|
|
|
+ message.error(errorFields?.[0]?.errors?.[0])
|
|
|
+ }}
|
|
|
+ onFinish={handleOk}
|
|
|
+ initialValues={initialValues?.id ? initialValues : { addType: 'fixed', taskType: 'cyc' }}
|
|
|
+ >
|
|
|
+ <Form.Item label={<strong>任务类型</strong>} name="taskType" rules={[{ required: true, message: '请输入任务类型!' }]}>
|
|
|
+ <Radio.Group buttonStyle="solid">
|
|
|
+ <Radio.Button value="cyc">循环执行</Radio.Button>
|
|
|
+ <Radio.Button value="imm" disabled={selectAdList.length === 0 || initialValues?.id}>立即执行</Radio.Button>
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label={<strong>任务名称</strong>} name="taskName" rules={[{ required: true, message: '请输入任务名称!' }]}>
|
|
|
+ <Input placeholder="请输入任务名称" />
|
|
|
+ </Form.Item>
|
|
|
+ {taskType === 'cyc' && <>
|
|
|
+ <Form.Item label={<strong>执行日期</strong>} required>
|
|
|
+ <Space>
|
|
|
+ <Form.Item name="startDay" rules={[{ required: true, message: '请选择开始日期!' }]} noStyle>
|
|
|
+ {/* @ts-ignore */}
|
|
|
+ <DatePicker placeholder="开始日期" disabledDate={disabledDateStart} />
|
|
|
+ </Form.Item>
|
|
|
+ <span>-</span>
|
|
|
+ <Form.Item name="endDay" rules={[{ required: true, message: '请选择结束日期!' }]} noStyle>
|
|
|
+ {/* @ts-ignore */}
|
|
|
+ <DatePicker placeholder="结束日期" disabledDate={disabledDateEnd} />
|
|
|
+ </Form.Item>
|
|
|
+ </Space>
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label={<strong>执行时间</strong>} name="timeList" rules={[{ required: true, message: '请添加执行时间!' }]}>
|
|
|
+ <SetTime />
|
|
|
+ </Form.Item>
|
|
|
+ </>}
|
|
|
+ <Form.Item label={<strong>修改预算类型</strong>} name="addType" rules={[{ required: true, message: '请选择修改预算类型!' }]}>
|
|
|
+ <Radio.Group buttonStyle="solid">
|
|
|
+ <Radio.Button value="fixed">固定值</Radio.Button>
|
|
|
+ <Radio.Button value="percent" disabled={taskType === 'cyc'}>百分比上下浮动修改</Radio.Button>
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+ {addType === 'fixed' ? <Form.Item label={<strong>一键起量预算</strong>} name="budget">
|
|
|
+ <InputNumber placeholder="起量预算，建议设置为出价的10倍" min={200} max={100000} style={{ width: '100%' }} />
|
|
|
+ </Form.Item> : <>
|
|
|
+ <Form.Item label={<strong>默认起量预算</strong>} name="defaultBudget" rules={[{ required: true, message: '请输入默认起量预算!' }]}>
|
|
|
+ <InputNumber placeholder="默认起量预算，建议设置为出价的10倍" min={200} max={100000} style={{ width: '100%' }} />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label={<strong>起量预算百分比</strong>} name="budgetPercent" rules={[{ required: true, message: '请输入起量预算百分比!' }]}>
|
|
|
+ <InputNumber placeholder="起量预算，原有基础上下调百分比" style={{ width: '100%' }} addonAfter="%" />
|
|
|
+ </Form.Item>
|
|
|
+ </>}
|
|
|
+ </Form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Modal>
|
|
|
+}
|
|
|
+
|
|
|
+interface AdAddTaskProps {
|
|
|
+ selectAdList?: any[]
|
|
|
+ visible?: boolean
|
|
|
+ onClose?: () => void
|
|
|
+ onChange?: (type?: number) => void
|
|
|
+}
|
|
|
+
|
|
|
+const AdAddTask: React.FC<AdAddTaskProps> = ({ selectAdList = [], visible, onClose, onChange }) => {
|
|
|
+
|
|
|
+ /*************************************/
|
|
|
+ const [form] = Form.useForm();
|
|
|
+ const [taskList, setTaskList] = useState<{ label: string, value: number }[]>([])
|
|
|
+
|
|
|
+ const getTaskAllList = useAjax(() => getTaskAllListApi())
|
|
|
+ const adAddTask = useAjax((params) => adAddTaskApi(params))
|
|
|
+ /*************************************/
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ getTaskAllList.run().then(res => {
|
|
|
+ if (res?.data) {
|
|
|
+ setTaskList(Object.keys(res?.data).map(key => ({ label: res.data[key], value: Number(key) })))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, [])
|
|
|
+
|
|
|
+ const handleOk = () => {
|
|
|
+ form.validateFields().then((values) => {
|
|
|
+ adAddTask.run({ ...values, adgroupBeanList: selectAdList.map(item => ({ accountId: item.accountId, adgroupId: item.adgroupId })) }).then(res => {
|
|
|
+ if (res?.data) {
|
|
|
+ message.success('添加成功')
|
|
|
+ onChange?.(1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ return <Modal
|
|
|
+ title={<strong>添加至一键起量任务</strong>}
|
|
|
+ open={visible}
|
|
|
+ onCancel={onClose}
|
|
|
+ onOk={handleOk}
|
|
|
+ className='modalResetCss'
|
|
|
+ width={600}
|
|
|
+ >
|
|
|
+ <Form
|
|
|
+ form={form}
|
|
|
+ name="addTaks"
|
|
|
+ labelCol={{ span: 5 }}
|
|
|
+ labelAlign="left"
|
|
|
+ colon={false}
|
|
|
+ scrollToFirstError={{
|
|
|
+ behavior: 'smooth',
|
|
|
+ block: 'center'
|
|
|
+ }}
|
|
|
+ onFinishFailed={({ errorFields }) => {
|
|
|
+ message.error(errorFields?.[0]?.errors?.[0])
|
|
|
+ }}
|
|
|
+ onFinish={handleOk}
|
|
|
+ >
|
|
|
+ <Form.Item label={<strong>任务</strong>} name="taskId" rules={[{ required: true, message: '请一键起量任务!' }]}>
|
|
|
+ <Select
|
|
|
+ showSearch
|
|
|
+ allowClear
|
|
|
+ placeholder="一键起量任务"
|
|
|
+ filterOption={(input, option) =>
|
|
|
+ ((option?.children ?? '') as any).toLowerCase().includes(input.toLowerCase())
|
|
|
+ }
|
|
|
+ >
|
|
|
+ {taskList.map(item => <Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>)}
|
|
|
+ </Select>
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ </Modal>
|
|
|
+}
|
|
|
+
|
|
|
+interface TaskLogProps {
|
|
|
+ visible?: boolean
|
|
|
+ onClose?: () => void
|
|
|
+}
|
|
|
+const TaskLog: React.FC<TaskLogProps> = ({ visible, onClose }) => {
|
|
|
+
|
|
|
+ /******************************************/
|
|
|
+ const [queryForm, setQueryForm] = useState<ADQV3.GetAdgroupQuantTaskListProps>({ pageNum: 1, pageSize: 20 })
|
|
|
+ const [adLogData, setAdLogData] = useState<{ taskData: any, visible?: boolean }>({ taskData: {}, visible: false })
|
|
|
+ const [adDetailsData, setAdDetailsData] = useState<{ taskData: any, visible?: boolean }>({ taskData: {}, visible: false })
|
|
|
+ const [adEditData, setAdEditData] = useState<{ initialValues: any, visible?: boolean }>({ initialValues: {}, visible: false })
|
|
|
+ const getAdgroupQuantTaskList = useAjax((params) => getAdgroupQuantTaskListApi(params))
|
|
|
+ const delAdgroupQuantTask = useAjax((params) => delAdgroupQuantTaskApi(params))
|
|
|
+ /******************************************/
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ getAdgroupQuantTaskList.run(queryForm)
|
|
|
+ }, [queryForm])
|
|
|
+
|
|
|
+ const handleDel = (id: number) => {
|
|
|
+ const hide = message.loading('正在删除...', 0)
|
|
|
+ delAdgroupQuantTask.run({ id }).then((res) => {
|
|
|
+ hide()
|
|
|
+ if (res?.data) {
|
|
|
+ message.success('删除成功')
|
|
|
+ getAdgroupQuantTaskList.refresh()
|
|
|
+ }
|
|
|
+ }).catch(() => hide())
|
|
|
+ }
|
|
|
+
|
|
|
+ return <Drawer
|
|
|
+ title={<strong>一键起量任务列表</strong>}
|
|
|
+ open={visible}
|
|
|
+ onClose={onClose}
|
|
|
+ width={1200}
|
|
|
+ headerStyle={{ padding: '10px 16px' }}
|
|
|
+ maskClosable={false}
|
|
|
+ className={`modalResetCss targetingSelect`}
|
|
|
+ >
|
|
|
+ <Card className="cardResetCss">
|
|
|
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: '100%' }}>
|
|
|
+ <div style={{ display: 'flex', gap: 8 }}>
|
|
|
+ <Input.Search placeholder="任务名称" style={{ width: 200 }} onSearch={(val) => setQueryForm({ ...queryForm, taskName: val, pageNum: 1 })} allowClear enterButton />
|
|
|
+ <Input.Search
|
|
|
+ placeholder="广告ID（多个，,空格换行）"
|
|
|
+ style={{ width: 250 }}
|
|
|
+ onSearch={(val) => {
|
|
|
+ let valArr: any = []
|
|
|
+ if (val) {
|
|
|
+ valArr = val.replace(/[,，\s]/g, ',').split(',').filter((a: any) => a)
|
|
|
+ }
|
|
|
+ setQueryForm({ ...queryForm, adgroupIdList: valArr, pageNum: 1 })
|
|
|
+ }}
|
|
|
+ allowClear
|
|
|
+ enterButton
|
|
|
+ />
|
|
|
+ {/* @ts-ignore */}
|
|
|
+ <DatePicker placeholder="开始日期" value={queryForm?.startDay ? moment(queryForm.startDay) : undefined} onChange={(_, dateString) => setQueryForm({ ...queryForm, startDay: dateString, pageNum: 1 })} />
|
|
|
+ {/* @ts-ignore */}
|
|
|
+ <DatePicker placeholder="结束日期" value={queryForm?.endDay ? moment(queryForm.endDay) : undefined} onChange={(_, dateString) => setQueryForm({ ...queryForm, endDay: dateString, pageNum: 1 })} />
|
|
|
+ </div>
|
|
|
+ <Table
|
|
|
+ size={'small'}
|
|
|
+ bordered
|
|
|
+ dataSource={getAdgroupQuantTaskList?.data?.data?.records}
|
|
|
+ rowKey={'id'}
|
|
|
+ scroll={{ y: 400 }}
|
|
|
+ pagination={{
|
|
|
+ pageSize: getAdgroupQuantTaskList?.data?.data?.size || 50,
|
|
|
+ current: getAdgroupQuantTaskList?.data?.data?.current || 1,
|
|
|
+ showTotal: total => `总共 ${total} 数据`,
|
|
|
+ total: getAdgroupQuantTaskList?.data?.data?.total,
|
|
|
+ showSizeChanger: true,
|
|
|
+ showLessItems: true,
|
|
|
+ defaultCurrent: 1,
|
|
|
+ defaultPageSize: 50,//默认初始的每页条数
|
|
|
+ onChange: (page, pageSize) => {
|
|
|
+ setQueryForm({ ...queryForm, pageNum: page, pageSize })
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ loading={getAdgroupQuantTaskList.loading}
|
|
|
+ columns={[
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'cz',
|
|
|
+ key: 'cz',
|
|
|
+ width: 135,
|
|
|
+ align: 'center',
|
|
|
+ fixed: 'left',
|
|
|
+ render(_, record) {
|
|
|
+ return <div style={{ display: 'flex', gap: 10 }}>
|
|
|
+ <a style={{ fontSize: 12 }} onClick={() => {
|
|
|
+ setAdDetailsData({ taskData: record, visible: true })
|
|
|
+ }}>详情</a>
|
|
|
+ <a style={{ fontSize: 12 }} onClick={() => {
|
|
|
+ setAdLogData({ taskData: record, visible: true })
|
|
|
+ }}>执行日志</a>
|
|
|
+ {record?.type === 1 && <a style={{ fontSize: 12 }} onClick={() => {
|
|
|
+ setAdEditData({
|
|
|
+ initialValues: {
|
|
|
+ id: record.id,
|
|
|
+ taskType: record.type === 1 ? 'cyc' : 'imm',
|
|
|
+ taskName: record.taskName,
|
|
|
+ startDay: record?.startDay ? moment(record.startDay) : undefined,
|
|
|
+ endDay: record?.endDay ? moment(record.endDay) : undefined,
|
|
|
+ timeList: record.timeList,
|
|
|
+ addType: record?.budget ? 'fixed' : 'percent',
|
|
|
+ budget: record?.budget || 0,
|
|
|
+ defaultBudget: record?.defaultBudget || 0,
|
|
|
+ budgetPercent: record?.budgetPercent ? record.budgetPercent * 100 : 0,
|
|
|
+ }, visible: true
|
|
|
+ })
|
|
|
+ }}>修改</a>}
|
|
|
+ <Popconfirm
|
|
|
+ title="确定删除?"
|
|
|
+ onConfirm={() => handleDel(record.id)}
|
|
|
+ >
|
|
|
+ <a style={{ color: 'red', fontSize: 12 }}>删除</a>
|
|
|
+ </Popconfirm>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '任务名称',
|
|
|
+ dataIndex: 'taskName',
|
|
|
+ key: 'taskName',
|
|
|
+ width: 80,
|
|
|
+ align: 'center',
|
|
|
+ render(value) {
|
|
|
+ return <span style={{ fontSize: 12 }}>{value}</span>
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '任务类型',
|
|
|
+ dataIndex: 'type',
|
|
|
+ key: 'type',
|
|
|
+ width: 100,
|
|
|
+ align: 'center',
|
|
|
+ render(value) {
|
|
|
+ return value === 1 ? <Tag color="magenta"><span style={{ fontSize: 12 }}>循环任务</span></Tag> : <Tag color="red"><span style={{ fontSize: 12 }}>立即执行</span></Tag>
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '任务状态',
|
|
|
+ dataIndex: 'status',
|
|
|
+ key: 'status',
|
|
|
+ align: 'center',
|
|
|
+ width: 100,
|
|
|
+ render(value) {
|
|
|
+ return value === 0 ? <Badge status="warning" text={<span style={{ fontSize: 12 }}>等待执行</span>} /> :
|
|
|
+ value === 1 ? <Badge status="processing" text={<span style={{ fontSize: 12 }}>正在执行</span>} /> :
|
|
|
+ value === 2 ? <Badge status="success" text={<span style={{ fontSize: 12 }}>执行完成</span>} /> : '--'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '执行日期',
|
|
|
+ dataIndex: 'startDay',
|
|
|
+ key: 'startDay',
|
|
|
+ width: 150,
|
|
|
+ ellipsis: true,
|
|
|
+ render(value, record) {
|
|
|
+ return <span style={{ fontSize: 12 }}>{value ? value + '~' + record.endDay : '--'}</span>
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '执行时间',
|
|
|
+ dataIndex: 'timeList',
|
|
|
+ key: 'timeList',
|
|
|
+ width: 100,
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true,
|
|
|
+ render(value) {
|
|
|
+ return <span style={{ fontSize: 12 }}>{value?.length > 0 ? value.toString() : '--'}</span>
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '一键起量预算',
|
|
|
+ dataIndex: 'budget',
|
|
|
+ key: 'budget',
|
|
|
+ width: 150,
|
|
|
+ render(value, record) {
|
|
|
+ return <span style={{ fontSize: 12 }}>{value ? value + '元' : record?.budgetPercent ? (record?.budgetPercent * 100 + `% 默认${record?.defaultBudget}元`) : '--'}</span>
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '关联广告个数',
|
|
|
+ dataIndex: 'adCount',
|
|
|
+ key: 'adCount',
|
|
|
+ width: 85,
|
|
|
+ align: 'center',
|
|
|
+ render(value) {
|
|
|
+ return <span style={{ fontSize: 12, color: value > 0 ? '#52C41A' : 'red' }}>{(value || value === 0) ? value : '--'}</span>
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+
|
|
|
+ {/* 广告执行记录 */}
|
|
|
+ {adLogData?.visible && <TaskAdLog
|
|
|
+ {...adLogData}
|
|
|
+ onClose={() => {
|
|
|
+ setAdLogData({ visible: false, taskData: {} })
|
|
|
+ }}
|
|
|
+ />}
|
|
|
+
|
|
|
+ {/* 详情 */}
|
|
|
+ {adDetailsData?.visible && <TaskAdDetails
|
|
|
+ {...adDetailsData}
|
|
|
+ onClose={() => {
|
|
|
+ setAdDetailsData({ visible: false, taskData: {} })
|
|
|
+ }}
|
|
|
+ />}
|
|
|
+
|
|
|
+ {/* 修改 */}
|
|
|
+ {adEditData?.visible && <AutoAcquisitionSet
|
|
|
+ {...adEditData}
|
|
|
+ onChange={() => {
|
|
|
+ getAdgroupQuantTaskList?.refresh()
|
|
|
+ setAdEditData({ visible: false, initialValues: {} })
|
|
|
+ }}
|
|
|
+ onClose={() => {
|
|
|
+ setAdEditData({ visible: false, initialValues: {} })
|
|
|
+ }}
|
|
|
+ />}
|
|
|
+ </Drawer>
|
|
|
+}
|
|
|
+
|
|
|
+interface TaskAdLogProps {
|
|
|
+ taskData: any
|
|
|
+ visible?: boolean
|
|
|
+ onClose?: () => void
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 广告执行日志
|
|
|
+ * @param param0
|
|
|
+ */
|
|
|
+const TaskAdLog: React.FC<TaskAdLogProps> = ({ taskData, visible, onClose }) => {
|
|
|
+
|
|
|
+ /************************************/
|
|
|
+ const [queryForm, setQueryForm] = useState<ADQV3.GetAdgroupQuantTaskAdLogListProps>({ pageNum: 1, pageSize: 20, taskId: taskData.id })
|
|
|
+ const getAdgroupQuantTaskAdLogList = useAjax((params) => getAdgroupQuantTaskAdLogListApi(params))
|
|
|
+ /************************************/
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ getAdgroupQuantTaskAdLogList.run(queryForm)
|
|
|
+ }, [queryForm])
|
|
|
+
|
|
|
+ return <Modal
|
|
|
+ title={<strong>{taskData.taskName} 广告执行日志</strong>}
|
|
|
+ open={visible}
|
|
|
+ onCancel={onClose}
|
|
|
+ className='modalResetCss'
|
|
|
+ width={1000}
|
|
|
+ >
|
|
|
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: '100%' }}>
|
|
|
+ <div style={{ display: 'flex', gap: 8 }}>
|
|
|
+ <Input.Search placeholder="媒体账号" style={{ width: 160 }} onSearch={(val) => setQueryForm({ ...queryForm, accountId: val, pageNum: 1 })} allowClear enterButton />
|
|
|
+ <Input.Search placeholder="广告ID" style={{ width: 160 }} onSearch={(val) => setQueryForm({ ...queryForm, adgroupId: val, pageNum: 1 })} allowClear enterButton />
|
|
|
+ {/* @ts-ignore */}
|
|
|
+ <DatePicker placeholder="开始日期" style={{ width: 130 }} value={queryForm?.startDay ? moment(queryForm.startDay) : undefined} onChange={(_, dateString) => setQueryForm({ ...queryForm, startDay: dateString, pageNum: 1 })} />
|
|
|
+ {/* @ts-ignore */}
|
|
|
+ <DatePicker placeholder="结束日期" style={{ width: 130 }} value={queryForm?.endDay ? moment(queryForm.endDay) : undefined} onChange={(_, dateString) => setQueryForm({ ...queryForm, endDay: dateString, pageNum: 1 })} />
|
|
|
+ <Select
|
|
|
+ style={{ width: 110 }}
|
|
|
+ showSearch
|
|
|
+ allowClear
|
|
|
+ placeholder="执行状态"
|
|
|
+ filterOption={(input, option) =>
|
|
|
+ ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
|
|
|
+ }
|
|
|
+ value={queryForm.status}
|
|
|
+ onChange={(e) => setQueryForm({ ...queryForm, status: e, pageNum: 1 })}
|
|
|
+ options={[{ label: '成功', value: 0 }, { label: '失败', value: 1 }]}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <Table
|
|
|
+ size={'small'}
|
|
|
+ bordered
|
|
|
+ dataSource={getAdgroupQuantTaskAdLogList?.data?.data?.records}
|
|
|
+ rowKey={'id'}
|
|
|
+ scroll={{ y: 400 }}
|
|
|
+ pagination={{
|
|
|
+ pageSize: getAdgroupQuantTaskAdLogList?.data?.data?.size || 50,
|
|
|
+ current: getAdgroupQuantTaskAdLogList?.data?.data?.current || 1,
|
|
|
+ showTotal: total => `总共 ${total} 数据`,
|
|
|
+ total: getAdgroupQuantTaskAdLogList?.data?.data?.total,
|
|
|
+ showSizeChanger: true,
|
|
|
+ showLessItems: true,
|
|
|
+ defaultCurrent: 1,
|
|
|
+ defaultPageSize: 50,//默认初始的每页条数
|
|
|
+ onChange: (page, pageSize) => {
|
|
|
+ setQueryForm({ ...queryForm, pageNum: page, pageSize })
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ loading={getAdgroupQuantTaskAdLogList.loading}
|
|
|
+ columns={[
|
|
|
+ {
|
|
|
+ title: '起量操作',
|
|
|
+ dataIndex: 'enabled',
|
|
|
+ key: 'enabled',
|
|
|
+ width: 80,
|
|
|
+ align: 'center',
|
|
|
+ render(value) {
|
|
|
+ return <span style={{ fontSize: 12 }}>{value ? '开启' : '关闭'}</span>
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '媒体账号',
|
|
|
+ dataIndex: 'accountId',
|
|
|
+ key: 'accountId',
|
|
|
+ width: 80,
|
|
|
+ align: 'center',
|
|
|
+ render(value) {
|
|
|
+ return <span style={{ fontSize: 12 }}>{value}</span>
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '广告ID',
|
|
|
+ dataIndex: 'adgroupId',
|
|
|
+ key: 'adgroupId',
|
|
|
+ width: 96,
|
|
|
+ align: 'center',
|
|
|
+ render(value) {
|
|
|
+ return <span style={{ fontSize: 12 }}>{value}</span>
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '广告名称',
|
|
|
+ dataIndex: 'adgroupName',
|
|
|
+ key: 'adgroupName',
|
|
|
+ width: 180,
|
|
|
+ ellipsis: true,
|
|
|
+ render(value) {
|
|
|
+ return <span style={{ fontSize: 12 }}>{value}</span>
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '执行时间',
|
|
|
+ dataIndex: 'createTime',
|
|
|
+ key: 'createTime',
|
|
|
+ width: 135,
|
|
|
+ ellipsis: true,
|
|
|
+ align: 'center',
|
|
|
+ render(value) {
|
|
|
+ return <span style={{ fontSize: 12 }}>{value}</span>
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '执行状态',
|
|
|
+ dataIndex: 'status',
|
|
|
+ key: 'status',
|
|
|
+ width: 90,
|
|
|
+ align: 'center',
|
|
|
+ render(value) {
|
|
|
+ return value === 0 ? <Tag color='success'><span style={{ fontSize: 12 }}>成功</span></Tag> : <Tag color="error"><span style={{ fontSize: 12 }}>失败</span></Tag>
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '结果消息',
|
|
|
+ dataIndex: 'msg',
|
|
|
+ key: 'msg',
|
|
|
+ width: 250,
|
|
|
+ ellipsis: true,
|
|
|
+ render(value) {
|
|
|
+ return <a style={{ fontSize: 12 }} onClick={() => copy(value)}>{value}</a>
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </Modal>
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 任务下广告详情
|
|
|
+ * @param param0
|
|
|
+ * @returns
|
|
|
+ */
|
|
|
+const TaskAdDetails: React.FC<TaskAdLogProps> = ({ taskData, visible, onClose }) => {
|
|
|
+
|
|
|
+ /************************************/
|
|
|
+ const [queryForm, setQueryForm] = useState<ADQV3.GetAdgroupQuantTaskAdDetailsListProps>({ pageNum: 1, pageSize: 20, taskId: taskData.id })
|
|
|
+ const [selectRowData, setSelectRowData] = useState<any[]>([])
|
|
|
+ const getAdgroupQuantTaskAdDetailsList = useAjax((params) => getAdgroupQuantTaskAdDetailsListApi(params))
|
|
|
+ const delAdgroupQuantTaskAd = useAjax((params) => delAdgroupQuantTaskAdApi(params))
|
|
|
+ /************************************/
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ getAdgroupQuantTaskAdDetailsList.run(queryForm)
|
|
|
+ }, [queryForm])
|
|
|
+
|
|
|
+ const handleDel = () => {
|
|
|
+ delAdgroupQuantTaskAd.run({
|
|
|
+ taskId: taskData.id,
|
|
|
+ adgroupBeanList: selectRowData.map(item => ({ accountId: item.accountId, adgroupId: item.adgroupId }))
|
|
|
+ }).then(res => {
|
|
|
+ if (res?.data) {
|
|
|
+ message.success('删除成功')
|
|
|
+ getAdgroupQuantTaskAdDetailsList.refresh()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ return <Modal
|
|
|
+ title={<strong>{taskData.taskName} 广告执行日志</strong>}
|
|
|
+ open={visible}
|
|
|
+ onCancel={onClose}
|
|
|
+ className='modalResetCss'
|
|
|
+ width={800}
|
|
|
+ >
|
|
|
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: '100%' }}>
|
|
|
+ <div style={{ display: 'flex', gap: 8 }}>
|
|
|
+ <Input.Search placeholder="媒体账号" style={{ width: 180 }} onSearch={(val) => setQueryForm({ ...queryForm, accountId: val, pageNum: 1 })} allowClear enterButton />
|
|
|
+ <Input.Search placeholder="广告ID" style={{ width: 180 }} onSearch={(val) => setQueryForm({ ...queryForm, adgroupId: val, pageNum: 1 })} allowClear enterButton />
|
|
|
+ {taskData.type === 1 && <Button type="primary" danger style={{ height: 32, padding: '4px 15px' }} loading={delAdgroupQuantTaskAd.loading} disabled={selectRowData?.length === 0} onClick={handleDel}>删除</Button>}
|
|
|
+ </div>
|
|
|
+ <Table
|
|
|
+ size={'small'}
|
|
|
+ bordered
|
|
|
+ dataSource={getAdgroupQuantTaskAdDetailsList?.data?.data?.records}
|
|
|
+ rowKey={'id'}
|
|
|
+ scroll={{ y: 400 }}
|
|
|
+ pagination={{
|
|
|
+ pageSize: getAdgroupQuantTaskAdDetailsList?.data?.data?.size || 50,
|
|
|
+ current: getAdgroupQuantTaskAdDetailsList?.data?.data?.current || 1,
|
|
|
+ showTotal: total => `总共 ${total} 数据`,
|
|
|
+ total: getAdgroupQuantTaskAdDetailsList?.data?.data?.total,
|
|
|
+ showSizeChanger: true,
|
|
|
+ showLessItems: true,
|
|
|
+ defaultCurrent: 1,
|
|
|
+ defaultPageSize: 50,//默认初始的每页条数
|
|
|
+ onChange: (page, pageSize) => {
|
|
|
+ setQueryForm({ ...queryForm, pageNum: page, pageSize })
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ loading={getAdgroupQuantTaskAdDetailsList.loading}
|
|
|
+ columns={[
|
|
|
+ {
|
|
|
+ title: '媒体账号',
|
|
|
+ dataIndex: 'accountId',
|
|
|
+ key: 'accountId',
|
|
|
+ width: 80,
|
|
|
+ align: 'center',
|
|
|
+ render(value) {
|
|
|
+ return <span style={{ fontSize: 12 }}>{value}</span>
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '广告ID',
|
|
|
+ dataIndex: 'adgroupId',
|
|
|
+ key: 'adgroupId',
|
|
|
+ width: 96,
|
|
|
+ align: 'center',
|
|
|
+ render(value) {
|
|
|
+ return <span style={{ fontSize: 12 }}>{value}</span>
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '广告名称',
|
|
|
+ dataIndex: 'adgroupName',
|
|
|
+ key: 'adgroupName',
|
|
|
+ width: 180,
|
|
|
+ ellipsis: true,
|
|
|
+ render(value) {
|
|
|
+ return <span style={{ fontSize: 12 }}>{value}</span>
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '加入任务时间',
|
|
|
+ dataIndex: 'createTime',
|
|
|
+ key: 'createTime',
|
|
|
+ width: 135,
|
|
|
+ ellipsis: true,
|
|
|
+ align: 'center',
|
|
|
+ render(value) {
|
|
|
+ return <span style={{ fontSize: 12 }}>{value}</span>
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]}
|
|
|
+ rowSelection={taskData.type === 1 ? {
|
|
|
+ selectedRowKeys: selectRowData?.map((item: any) => item.id),
|
|
|
+ onSelect: (record: { id: number, mpName: string }, selected: boolean) => {
|
|
|
+ if (selected) {
|
|
|
+ selectRowData.push({ ...record })
|
|
|
+ setSelectRowData([...selectRowData])
|
|
|
+ } else {
|
|
|
+ let newSelectAccData = selectRowData.filter((item: { id: number }) => item.id !== record.id)
|
|
|
+ setSelectRowData([...newSelectAccData])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onSelectAll: (selected: boolean, selectedRows: { id: number }[], changeRows: { id: number }[]) => {
|
|
|
+ if (selected) {
|
|
|
+ let newSelectAccData = [...selectRowData]
|
|
|
+ changeRows.forEach((item: { id: number }) => {
|
|
|
+ let index = newSelectAccData.findIndex((ite: { id: number }) => ite.id === item.id)
|
|
|
+ if (index === -1) {
|
|
|
+ newSelectAccData.push({ ...item })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ setSelectRowData([...newSelectAccData])
|
|
|
+ } else {
|
|
|
+ let newSelectAccData = selectRowData.filter((item: { id: number }) => {
|
|
|
+ let index = changeRows.findIndex((ite: { id: number }) => ite.id === item.id)
|
|
|
+ if (index !== -1) {
|
|
|
+ return false
|
|
|
+ } else {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ setSelectRowData([...newSelectAccData])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } : undefined}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </Modal>
|
|
|
+}
|
|
|
+
|
|
|
+export default React.memo(AutoAcquisitionSetTask);
|
wjx