admin2 1.0.0

package/src/pages/pageComponents/historyPage/components/ExportTask/index.jsx

@@ -0,0 +1,707 @@
+/* eslint-disable guard-for-in */
+/* eslint-disable react/jsx-closing-tag-location */
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import {
+    Table,
+    Modal,
+    Tabs,
+    Form,
+    Input,
+    Button,
+    Select,
+    DatePicker,
+    message,
+    Tooltip,
+    Cascader,
+    Radio,
+} from 'antd';
+import { connect } from 'umi';
+import _ from 'lodash';
+import moment from 'moment';
+import { SMTable, SMModal } from 'sm-antd';
+
+import {FIELD_SOURCE_TYPE, SM_FIELD_SORT, MODEL_TYPE, DATE_FORMAT_TYPE, SERVICEID_LIST, tableText} from '@/contants';
+import {Storage, getDisabledDate} from '@/utils/utils';
+import SMIcon from '@/components/SMIcon';
+import FieldMessageModal from '@/components/FieldMessageModal';
+import {useLanguage, useDeviceExport} from '@/hooks';
+import {formatUs} from '@/utils/helpers';
+import withIntlComponents from '@/hoc/withIntlComponents';
+
+import SMPopConfirm from '../../../mdPage/components/SMPopConfirm';
+
+import styles from './styles.less';
+
+const { TextArea } = Input;
+const { Option } = Select;
+const { ModalType } = SMModal;
+const { TabPane } = Tabs;
+const MAX_ROWS = 200;// 文本域最多提交200条数据
+const FIELD_CONFIG = [ // 历史数据导出 新增导出字段设置
+    SERVICEID_LIST.POST_TEXT,
+    SERVICEID_LIST.POST_TEXT_EN,
+    SERVICEID_LIST.POST_TEXT_AR,
+    SERVICEID_LIST.POST_EVENT,
+    SERVICEID_LIST.ACCOUNT_LOGIN,
+    SERVICEID_LIST.ACCOUNT_REGISTER,
+    SERVICEID_LIST.POST_IMG,
+    SERVICEID_LIST.POST_ARTICLE,
+    SERVICEID_LIST.ANTI_ROBOT_SMS,
+];
+
+const processMap = {
+    0: '数据生成中', // 待提取
+    1: '数据生成中',
+    2: '数据生成失败，有可能是数据量太大，请尝试调小时间范围',
+    3: '数据生成成功',
+    4: '无数据',
+    5: '数据生成失败，有可能是数据量太大，请尝试调小时间范围',
+    6: '终止任务',
+};
+const INIT_END_DATE = 1; // 时间控件结束时间 -1
+const dateFormat = 'YYYY-MM-DD';
+const SPECIAL_SERVICE  = ['POST_IMG'];// 图片获取历史记录字段特殊处理
+// const dateFormat = "YYYY-MM-DD HH:mm:ss";
+
+//  组件
+const ExportTask = props => {
+    const {
+        organization,
+        serviceId,
+        currentUser = {},
+        appId,
+        dispatch,
+        listLoading = false,
+        exportTaskList = {},
+        pageSize = 10,
+        pageSizeOptions = [10, 20, 50],
+        exportDetailMap = {},
+        formatHistoryTaskFormColumns,
+        buildHistoryTaskDetail,
+        selectListMap,
+        title = '风险类型',
+        visible = false,
+        onCancel,
+        storageTime,
+    } = props;
+    const storageName = `${SM_FIELD_SORT}_${serviceId}_${currentUser && currentUser.account}_export`;
+
+    const {t} = useLanguage();
+
+    const [detailVisible, setDetailVisible] = useState(false);
+    const formEl = useRef(null);
+    const [currentPage, setCurrentPage] =  useState(1);
+    const [current, setCurrent] = useState({
+        base: [],
+        exportData: [],
+    });
+    const [activeTab, setActiveTab] = useState('1');
+    const [fieldSetData, setFieldSetData] = useState([]);
+    const [activityList, setActivityList] = useState([]);
+
+    const disabledTime = useCallback(current => {
+        const {disabledDateEnd, disabledDateStart} = getDisabledDate(storageTime, INIT_END_DATE);
+        if (disabledDateEnd) {
+            return current && (current > disabledDateStart || current < disabledDateEnd);
+        }
+        return current && current > moment().endOf(DATE_FORMAT_TYPE.DAY);
+    }, [storageTime]);
+
+    useEffect(() => {
+        if (appId) {
+            formEl.current && formEl.current.setFieldsValue({
+                'appId': appId,
+            });
+        }
+    }, [appId]);
+    const copy = val => {
+        const input = document.createElement('input');
+        document.body.appendChild(input);
+        input.setAttribute('value', val);
+        input.select();
+        if (document.execCommand('copy')) {
+            document.execCommand('copy');
+            message.success(t('复制成功'));
+        }
+        document.body.removeChild(input);
+    };
+    const tableColumns = [
+        {
+            title: '任务编号',
+            key: 'id',
+            dataIndex: 'id',
+            type: 'text',
+            width: '20%',
+            ellipsis: true,
+        },
+        {
+            title: '任务状态',
+            key: 'status',
+            dataIndex: 'status',
+            type: 'text',
+            // width: '10%',
+            render: (text, record) => {
+                return t(processMap[record.status]);
+            },
+        },
+        {
+            title: '创建时间',
+            key: 'createTime',
+            dataIndex: 'createTime',
+            type: 'text',
+            ellipsis: true,
+            render: (text, record) => {
+                return moment(+record.createTime).format('YYYY-MM-DD HH:mm:ss');
+            },
+        },
+        {
+            title: '操作',
+            key: 'op',
+            dataIndex: 'op',
+            type: 'text',
+            ellipsis: true,
+            render: (text, record) => {
+                const downloadLink = record.downloadLink && record.downloadLink.replace('http://', 'https://');
+                return (
+                    <span className={styles.operate}>
+                        {record.status === 3 ? (
+                            <>
+                                <Tooltip placement="left" title={t('下载')} trigger="hover">
+                                    <a href={downloadLink}>
+                                        <SMIcon type={'icon-xiazai3'} />
+                                    </a>
+                                </Tooltip>
+                                <Tooltip placement="left" title={t('复制下载地址')} trigger="hover">
+                                    <span
+                                        onClick={() => {
+                                            copy(downloadLink);
+                                        }}
+                                    >
+                                        <SMIcon type={'icon-fuzhi'} />
+                                    </span>
+                                </Tooltip>
+                            </>
+                        ) : null}
+                        <Tooltip placement="left" title={t('详情')} trigger="hover">
+                            <span
+                                onClick={() => {
+                                    setDetailVisible(true);
+                                    setCurrent(record);
+                                }}
+                            >
+                                <SMIcon type={'icon-chakan1'} />
+                            </span>
+                        </Tooltip>
+                        {record.status === 0 || record.status === 1 ? (
+                            <SMPopConfirm
+                                title={t('该条数据正在提取中，终止后将不在继续提取，是否确认操作。')}
+                                icon={false}
+                                customStyle
+                                width="300"
+                                customVisible={record.status === 6 ? false : undefined}
+                                onConfirm={(value, cb) => handlePopConfirm(record, cb)}
+                            >
+                                <a
+                                    className={record.status === 6 ? styles.disabled : ''}
+                                    disabled={record.status === 6}
+                                >
+                                    {t('终止')}
+                                </a>
+                            </SMPopConfirm>
+                        ) : null}
+
+                    </span>
+                );
+            },
+        },
+    ];
+
+    const renderForm = (columns = []) => {
+        return columns.map((item, index) => {
+            const {
+                type,
+                mode,
+                label,
+                name,
+                help,
+                defaultValue,
+                rules = [],
+                placeholder,
+                options = [],
+                onChange = () => { },
+                disabledDate = () => { },
+            } = item;
+            switch (type) {
+                case 'select':
+                    return (
+                        <Form.Item
+                            label={label}
+                            name={name}
+                            key={name}
+                            placeholder={placeholder}
+                            rules={rules}
+                        >
+                            <Select
+                                mode={mode}
+                                placeholder={placeholder}
+                                showSearch
+                                optionFilterProp="children"
+                                defaultValue={defaultValue ? defaultValue : undefined}
+                                onChange={onChange}
+                                allowClear
+                            >
+                                {options.map((it, index) => {
+                                    return (
+                                        <Option value={it.value || it.name} key={it.id || index}>
+                                            {it.name}
+                                        </Option>
+                                    );
+                                })}
+                            </Select>
+                        </Form.Item>
+                    );
+                case 'date':
+                    return (
+                        <Form.Item label={label} name={name} key={name} rules={rules}>
+                            <DatePicker
+                                key={name}
+                                disabledDate={storageTime ? disabledTime : disabledDate}
+                                placeholder={placeholder}
+                                showToday={false}
+                                allowClear={false}
+                                format={dateFormat}
+                            />
+                        </Form.Item>
+                    );
+                case 'textarea':
+                    return (
+                        <Form.Item label={label} name={name} key={name} rules={rules}>
+                            <TextArea
+                                placeholder={placeholder}
+                                allowClear
+                                onChange={onChange}
+                            />
+                        </Form.Item>
+                    );
+                case 'cascader':
+                    return (
+                        <Form.Item label={label} name={name} key={name} rules={rules}>
+                            <Cascader
+                                // style={style || { width: 128, height: 32 }}
+                                placeholder={placeholder}
+                                showSearch
+                                options={options}
+                            />
+                        </Form.Item>
+                    );
+                case 'radio':
+                    return (
+                        <Form.Item
+                            label={label}
+                            name={name}
+                            help={help?.(t)}
+                            key={name}
+                            placeholder={placeholder}
+                            rules={rules}
+                        >
+                            <Radio.Group
+                                placeholder={placeholder}
+                                defaultValue={defaultValue ? defaultValue : undefined}
+                                onChange={onChange}
+                            >
+                                {options.map((it, index) => {
+                                    return (
+                                        <Radio value={it.value || it.name} key={it.id || index}>
+                                            {it.name}
+                                        </Radio>
+                                    );
+                                })}
+                            </Radio.Group>
+                        </Form.Item>
+                    );
+                default:
+                    return (
+                        <Form.Item
+                            label={label}
+                            name={name}
+                            key={name}
+                            placeholder={placeholder}
+                            rules={rules}
+                        >
+                            <Input placeholder={placeholder} />
+                        </Form.Item>
+                    );
+            }
+        });
+    };
+
+    const layout = {
+        labelCol: { span: 6 },
+        wrapperCol: { span: 13 },
+    };
+    const tailLayout = {
+        wrapperCol: { offset: 6, span: 13 },
+    };
+    const onFinish = values => {
+        values.appId = values.appId ? values.appId : appId;
+        const params = {};
+        const channelArr = [];
+        const eventIdArr = [];
+        for (let k in values) {
+            const val = values[k];
+            if (k === 'channel') {
+                val
+          && val.forEach(value => {
+              let statChannel = value.split('|')[0] || '';
+              let statEventId = value.split('|')[1] || '';
+              if (statChannel || !statEventId) {
+                  channelArr.push(statChannel);
+              } else {
+                  eventIdArr.push(statEventId);
+              }
+          });
+            } else if (k === 'riskLevelCascader') {
+                if (val && val[0] && val[0] !== 'all') {
+                    params.riskLevel = val && val[0];
+                }
+                if (val && val[1]) {
+                    params.verifyType = val && val[1];
+                }
+            } else if (val && Array.isArray(val)) {
+                params[k] = val.join(',');
+            } else if (val && /\n/.test(val)) {
+                let arrList  = val.split(/\n/).join(',').split(',');
+                let submitList = [];
+                arrList = arrList.length > MAX_ROWS ? arrList.splice(0, MAX_ROWS) : arrList;
+                arrList.map(item => {
+                    if (item) {
+                        submitList.push(item.trim());
+                    }
+                });
+                params[k] = submitList.join(',');
+            } else if (val && val !== 'all') {
+                params[k] = val;
+            }
+        }
+        if (channelArr.length) {
+            params.channel = channelArr.join(',');
+        }
+        if (eventIdArr.length) {
+            params.eventId = eventIdArr.join(',');
+        }
+        let arr;
+        let matchedItemSet;
+        let newArr;
+        if (params.matchedItem) {
+            arr = params.matchedItem.split(',');
+            matchedItemSet = new Set(arr);
+            newArr = [...matchedItemSet];
+            params.matchedItem = newArr.join(',');
+        }
+        params.startTime = moment(values.startTime).startOf('day').format('x');
+        params.endTime = moment(values.endTime).endOf('day').format('x');
+        if (values.appId === 'all' || values.appId === '') {
+            delete values.appId;
+        }
+        const globalFilter = {
+            organization: organization,
+            serviceId: serviceId,
+            appId: values.appId,
+        };
+        if (values.appId === 'all' || values.appId === '') {
+            delete globalFilter.appId;
+        }
+
+        let data = {
+            ...globalFilter,
+            fieldSet: fieldSetData,
+            filter: Object.assign(
+                // values,
+                params,
+                {
+                    ...globalFilter,
+                }
+
+            ),
+        };
+        // 修复serviceId
+        switch (serviceId) {
+            case 'ACCOUNT_FRAUD':
+                data.filter.serviceId = 'POST_EVENT';
+                break;
+            case 'CHANNEL_ANTICHEAT':
+                data.filter.serviceId = 'POST_EVENT';
+                break;
+        }
+
+        dispatch({
+            type: 'history/createDownloadTask',
+            payload: data,
+        }).then(res => {
+            if (res === 1100) {
+                message.success(t('提交成功'));
+                setActiveTab('2');
+            } else {
+                message.success(t('提交失败'));
+            }
+        });
+    };
+
+    const getTaskList = (current = 1, p = 10) => {
+        const payload = {
+            appId: appId === 'all' || appId === '' ? undefined : appId,
+            serviceId,
+            organization,
+            startTime: +moment().subtract(6, 'days').format('x'),
+            endTime: +moment().endOf('day').format('x'),
+            count: p,
+            offset: (current - 1) * p || 0,
+        };
+        setCurrentPage(current);
+        dispatch({
+            type: 'history/getDownloadTask',
+            payload,
+        });
+    };
+    const handlePopConfirm = useCallback(async (record, cb) => {
+        const {code, message: Message} = await dispatch({
+            type: 'history/updateDownloadTask',
+            payload: {id: record.id, status: 6},
+        });
+        if (code === 1100) {
+            message.success(t('请求成功'));
+        } else {
+            message.error(Message);
+        }
+        setCurrent(record);
+        cb();
+        getTaskList();
+    }, [dispatch, getTaskList]);
+    const callback = key => {
+        setActiveTab(key);
+        if (key === 2) {
+            getTaskList();
+        }
+    };
+
+    const historyTaskFormColumns = formatHistoryTaskFormColumns({...selectListMap, serviceId, appId});
+    const cancelModal = () => {
+        onCancel();
+
+        formEl.current.resetFields();
+        setCurrent({});
+        setActiveTab('1');
+        setDetailVisible(false);
+        dispatch({
+            type: 'history/setExportTaskList',
+            payload: { exportTaskList: {} },
+        });
+    };
+    const formatField = useCallback(data => {
+        const newData = [];
+        data.forEach(item => {
+            newData.push(item.uuid);
+        });
+        global.modal.pop();
+        Storage.set(storageName, data);
+        message.success(t('字段顺序调整已保存在浏览器缓存中，清除缓存会以系统默认顺序展示。'));
+        setFieldSetData(newData);
+        setActivityList(data);
+    }, []);
+    // 获取字段配置
+    const getHistoryList = useCallback(async () => {
+        const result = await dispatch({
+            type: MODEL_TYPE.FIELD_URL_LIST.DOWNLOAD_FILEDS,
+            payload: {
+                organization,
+                serviceId,
+                pageCategory: FIELD_SOURCE_TYPE.HISTORY_DOWNLOAD,
+            },
+        });
+        if (result) {
+            const fieldSort = Storage.get(storageName);
+            let fieldList = [];
+            try {
+                fieldList = result.filter(item => item.name === 'list')[0].value;
+            }
+            catch (error) {};
+            let list =  [];
+            if (_.isArray(fieldSort)) {
+                fieldSort.forEach(item => {
+                    const key = item.key || item.name;
+                    fieldList.forEach(cItem => {
+                        if (key === cItem.fieldTag) {
+                            list.push(item);
+                        }
+                    });
+                });
+                Storage.set(storageName, list); // 更新缓存，缓存中数据和接口请求数据保持一致
+            }
+            else {
+                list = fieldList;
+            }
+            const filedData = [];
+            const newList = list.map(item => {
+                const fieldTag = item.fieldTag || item.key;
+                filedData.push(item.uuid);
+
+                return {
+                    name: `${item.name}`,
+                    title: fieldTag ? `${item.name}(${fieldTag})` : `${item.name}`,
+                    fieldTag: fieldTag,
+                    uuid: item.uuid,
+                }; // 兼容老数据
+            });
+            setFieldSetData(filedData);
+            setActivityList(newList);
+        }
+    }, [organization, serviceId, storageName, dispatch]);
+    // 添加信息字段
+    const detailField = useCallback(() => {
+        global.modal.show(ModalType.MODAL_ALERT, {
+            width: 576,
+            modalTitle: t('设置导出字段'),
+            renderChildren: () => {
+                return (
+                    <div className={styles.hint}>
+                        <FieldMessageModal
+                            {...props}
+                            organization={organization}
+                            source={FIELD_SOURCE_TYPE.HISTORY_DOWNLOAD}
+                            dataSource={activityList}
+                            handleSubmit={formatField}
+                        />
+                    </div>
+                );
+            },
+        });
+    }, [organization, storageName, activityList, formatField]);
+
+    useEffect(() => {
+        if (formEl.current !== null) {
+            formEl.current.resetFields();
+        }
+        if (activeTab === '2') {
+            getTaskList();
+        }
+        setCurrent({});
+        setDetailVisible(false);
+        dispatch({
+            type: 'history/setExportTaskList',
+            payload: { exportTaskList: {} },
+        });
+    }, [activeTab]);
+
+    useEffect(() => {
+        if (organization) {
+            getHistoryList();
+        }
+    }, [getHistoryList, organization]);
+
+    return (
+        <Modal
+            className={styles.task}
+            width={715}
+            height={660}
+            footer={null}
+            centered
+            title={t(title)}
+            visible={visible}
+            maskClosable={false}
+            onOk={() => { }}
+            onCancel={() => {
+                cancelModal();
+            }}
+        >
+            <div className={styles.height}>
+                <Tabs activeKey={activeTab} centered onChange={callback}>
+                    <TabPane tab={t('新建下载任务')} key="1">
+                        {
+                            FIELD_CONFIG.includes(serviceId)
+                            && <div className={styles.fields} onClick={detailField}>
+                                <SMIcon type="icon-daochushezhi" />
+                                <span className={styles.text}>{t('导出字段设置')}</span>
+                            </div>
+                        }
+                        <p className={styles.note}>{t('建议每日10时后提取前一天的数据')}</p>
+                        <Form
+                            {...layout}
+                            ref={formEl}
+                            name="basic"
+                            initialValues={{
+                                startTime: moment().subtract(1, 'days').startOf('day'),
+                                endTime: moment().subtract(1, 'days').endOf('day'),
+                                format: 'csv',
+                            }}
+                            onFinish={onFinish}
+                        >
+                            {renderForm(formatUs(historyTaskFormColumns, ['label', 'placeholder', 'help'], t))}
+
+                            <Form.Item {...tailLayout} key="button">
+                                <div className={styles.between}>
+                                    <Button type="ghost" onClick={cancelModal}>{t('取消')}</Button>
+                                    <Button type="primary" htmlType="submit">
+                                        {t('确定')}
+                                    </Button>
+                                </div>
+                            </Form.Item>
+                        </Form>
+                    </TabPane>
+                    <TabPane tab={t('下载列表')} key="2">
+                        <p className={styles.note}>{t('该列表仅保存近7天创建的下载任务，请及时下载')}</p>
+                        <SMTable
+                            classNane={styles.margin}
+                            columns={formatUs(tableColumns, ['title'], t)}
+                            dataSource={exportTaskList.contents || []}
+                            loading={listLoading}
+                            onSearch={getTaskList}
+                            showTotal={() => `${t('共')}${exportTaskList.contents}${t('条')}`}
+                            i18nText={tableText(t)}
+                            customLoadingUrl={props.customLoadingIcon}
+                            antdProps={{
+                                pagination: {
+                                    showQuickJumper: true,
+                                    showSizeChanger: true,
+                                    defaultPageSize: pageSize,
+                                    pageSizeOptions: pageSizeOptions,
+                                    total: exportTaskList.totalCount || 0,
+                                    current: currentPage,
+                                },
+                            }}
+                        />
+                    </TabPane>
+                </Tabs>
+            </div>
+
+            {/* 详情 */}
+            <div
+                className={styles.detail}
+                style={{ display: detailVisible ? 'block' : 'none' }}
+            >
+                <div className={styles.head}>
+                    <a
+                        onClick={() => {
+                            setDetailVisible(false);
+                            setCurrent({});
+                        }}
+                    >
+                        &lt; {t('返回下载列表')}
+                    </a>
+                </div>
+                <div className={styles.content}>
+                    {buildHistoryTaskDetail({
+                        record: current,
+                        ...exportDetailMap,
+                        processMap,
+                        serviceId,
+                        t,
+                    })}
+                </div>
+            </div>
+        </Modal>
+    );
+};
+
+export default connect(({ history }) => ({
+    exportTaskList: history.exportTaskList,
+}))(withIntlComponents(ExportTask));