ai-admin/src/components/FieldProblem/index.js

import React, { useState, useEffect, useRef } from 'react';
import { Form, Input, Button, Table, Row, Col, Select, Modal, DatePicker, Space, message } from 'antd';
import { getCookie, disabledDate } from '@utils/index'
import '@common/common.less';
import moment from "moment";
import "moment/locale/zh-cn"
import './index.less'
import apiObj from '@api/index';
import EditProblem from './editProblem';
import ProblemContext from './problem-context';
import { getValueFromEvent } from '@utils/index'
const { post, api, xPost } = apiObj;
const { RangePicker } = DatePicker;
const { Option } = Select;
function FieldProblem() {
    useEffect(() => {
        getColumnResultPage();
        getColumnResultNumber(date)
        getModeName()
    }, []);
    const [logList, setLogList] = useState([]);
    const [total, setTotal] = useState(0);
    const [type, setType] = useState(0);//1新增 2修改
    const [visible, setVisible] = useState(false);
    const [startValue, setStartValue] = useState();
    const [endValue, setendValue] = useState();
    const [size, setSize] = useState(15);
    const [current, setCurrent] = useState(1);
    const [probleData, setProbleData] = useState({});
    const [problemDetail, setProblemDetail] = useState(null);//详情数据
    const [title, setTitle] = useState();//正则式数据
    const [modeList, setModeList] = useState([]);//质控模块
    const [params, setParams] = useState({
        pages: 1,
        current: 1,
        size: 15,
        asc: ['isSolved'],
        desc: ['solveTime', 'behospitalCode'],
        behospitalStartDate: getCurrentDataFront().split('/').join('-') + ' 00:00:00',
        behospitalEndDate: getCurrentData().split('/').join('-') + ' 23:23:59'
    });
    const [form] = Form.useForm();
    let data = {
        pages: 1,
        current: 1,
        size: size,
        asc: ['isSolved'],
        desc: ['solveTime', 'behospitalCode'],
        behospitalStartDate: getCurrentDataFront().split('/').join('-') + ' 00:00:00',
        behospitalEndDate: getCurrentData().split('/').join('-') + ' 23:23:59'
    }
    let date = {
        behospitalStartDate: getCurrentDataFront().split('/').join('-') + ' 00:00:00',
        behospitalEndDate: getCurrentData().split('/').join('-') + ' 23:23:59'
    }
    //表格数据
    function getColumnResultPage(param) {
        post(api.getColumnResultPage, param || params).then((res) => {
            if (res.data.code === 200) {
                const data = res.data.data;
                setLogList(data.records);
                setTotal(data.total)
            }
        })
    }
    function getColumnResultNumber(param) {
        post(api.getColumnResultNumber, {
            hospitalId: getCookie('hospitalId'),
            ...param
        }).then((res) => {
            if (res.data.code === 200) {
                const data = res.data.data || [];
                setProbleData(data)
            }
        })
    }
    function getModeName(name) {
        post(api.getModeName, {
            modeName: name
        }).then((res) => {
            if (res.data.code === 200) {
                const data = res.data.data || [];
                setModeList(data)
            }
        })
    }
    function onSearch(val) {
        getModeName(val)
    }
    function onStartChange(val) {
        setStartValue(val)
    }
    function onEndChange(val) {
        setendValue(val)
    }
    function disabledStartDate(startValue) {
        if (!startValue || !endValue) {
            //如果没有选择结束日期，则选择开始日期时，开始日期不能大于今天
            return startValue.valueOf() > new Date().getTime();//大于今天的日期一律返回true，禁止选择
        }
        //如果选择了结束日期，则结束日期和开始日期之差大于30天（24*60*60*1000*30是30天的毫秒数）,还需要开始日期小于结束日期，返回true，禁止选择
        return endValue.valueOf() - startValue.valueOf() > 24 * 60 * 60 * 1000 * 365 || endValue.valueOf() <= startValue.valueOf();
    }

    function disabledEndDate(endValue) {
        if (!endValue || !startValue) {
            ////如果没有选择开始日期，则结束日期时大于今天
            return endValue.valueOf() > new Date().getTime();//大于今天的日期一律返回true，禁止选择
        }
        //结束日期这里稍微复杂了一些，如果选择了开始日期，则结束日期和开始日期除了不能超过30个自然日之外，还需要结束日期不能小于开始日期，还需要不能超过今天，返回true为不能选择，所以用或链接，式子之间的符号正好与咱们分析的相反
        return endValue.valueOf() <= startValue.valueOf() || endValue.valueOf() > new Date().getTime() || endValue.valueOf() - startValue.valueOf() > 24 * 60 * 60 * 1000 * 365;
    }
    //修改
    function showModal(title, row, type) {
        setVisible(true)
        setProblemDetail(row)
        setTitle(title)
        setType(type)
    }
    //返回
    function cancel() {
        setVisible(false)
        setProblemDetail(null)
    }
    function userChange() {
        setVisible(false)
        getColumnResultPage();
        getColumnResultNumber({ behospitalStartDate: params.behospitalStartDate, behospitalEndDate: params.behospitalEndDate })
        setProblemDetail(null)
    }
    function onSizeChange(current, pageSize) {
        params.current = current
        params.size = pageSize
        setSize(pageSize)
        setCurrent(current)
        setParams(params)
        getColumnResultPage()
    }
    function changePage(page, pageSize) {
        params.current = page
        params.size = pageSize
        setParams(params)
        setCurrent(page)
        getColumnResultPage()
    }
    const onFinish = (value) => {
        value.behospitalStartDate = moment(value.tbehospitalStartDate).format('YYYY-MM-DD 00:00:00');
        value.behospitalEndDate = moment(value.behospitalEndDate).format('YYYY-MM-DD 23:23:59');
        delete value.time
        const param = {
            ...data,
            ...value,
        }
        setCurrent(1)
        setParams(param)
        getColumnResultPage(param);
        getColumnResultNumber({ behospitalStartDate: value.behospitalStartDate, behospitalEndDate: value.behospitalEndDate })
    };
    const onReset = () => {
        setCurrent(1)
        setParams(data)
        form.resetFields();
        getColumnResultPage(data);
        getColumnResultNumber(date)
    };
    function getCurrentDataFront() {
        let time = new Date((new Date() - 30 * 24 * 3600 * 1000)).toLocaleDateString()
        return time
    }
    // 结束时间
    function getCurrentData() {
        let time = new Date().toLocaleDateString()
        return time
    }
    const columns = [
        { title: '序号', dataIndex: 'index', render: (text, record, index) => (current - 1) * params.size + index + 1 },
        { title: '住院序号', dataIndex: 'behospitalCode', key: 'behospitalCode' },
        {
            title: '文书编号', dataIndex: 'hosptialDatatmpCode', key: 'hosptialDatatmpCode', render: (text, record) => {
                return record.hosptialDatatmpCode || '-';
            }
        },
        {
            title: '文书标题', dataIndex: 'hosptialDatatmpName', key: 'hosptialDatatmpName', render: (text, record) => {
                return record.hosptialDatatmpName || '-';
            }
        },
        { title: '质控模块名称', dataIndex: 'modeName', key: 'modeName' },
        { title: '表名称（中文）', dataIndex: 'tableCname', key: 'tableCname' },
        { title: '表名称（英文）', dataIndex: 'tableEname', key: 'tableEname' },
        { title: '字段名称（中文）', dataIndex: 'columnCname', key: 'columnCname' },
        { title: '字段名称（英文）', dataIndex: 'columnEname', key: 'columnEname' },
        {
            title: '上传字段值', dataIndex: 'tableVal', key: 'tableVal', render: (text, record) => {
                return record.tableVal ? record.tableVal.length > 8 ? <span title={record.tableVal}>{record.tableVal.substring(0, 8) + '...'}</span> : record.tableVal : '-';
            }
        },
        {
            title: '备注', dataIndex: 'description', key: 'description', render: (text, record) => {
                return record.description ? record.description.length > 20 ? <span title={record.description}>{record.description.substring(0, 20) + '...'}</span> : record.description : '-';
            }
        },
        {
            title: '问题类型', dataIndex: 'type', render: (text, record) => {
                return record.type == 1 ? "数据缺失" : record.type == 2 ? "非标准值" : "正则校验失败";
            }
        },
        {
            title: '更新时间', dataIndex: 'solveTime', key: 'solveTime', render: (text, record) => {
                return record.solveTime || '-';
            }
        },
        {
            title: '状态', dataIndex: 'isRequired', key: 'isRequired', render: (text, record) => {
                return record.isSolved == 1 ? "已处理" : record.isSolved == 0 ? "未处理" : "-";
            }
        },
        {
            title: '操作', dataIndex: 'key', render: (text, record) => (
                <Space size="middle">
                    <a onClick={e => showModal('修改字段校验问题明细', record, 3)}>修改</a>
                </Space>
            )
        }
    ];

    return (
        <div className="wrapper">
            <div className="filter-box">
                <Form
                    form={form}
                    name="normal_login"
                    onFinish={onFinish}
                    initialValues={{
                        isSolved: '', type: '', behospitalStartDate: moment(getCurrentDataFront()), behospitalEndDate: moment(getCurrentData())
                    }}
                >
                    <Row gutter={24}>
                        <Col span={7} key={0}>
                            <Form.Item label="日期" >
                                <Form.Item name="behospitalStartDate" className='times'>
                                    <DatePicker
                                        allowClear={false}
                                        disabledDate={disabledStartDate}
                                        value={startValue}
                                        placeholder="请选择开始日期"
                                        onChange={onStartChange}
                                    />

                                </Form.Item>
                                <span style={{ margin: '0 5px', position: 'relative', top: '2px' }}>-</span>
                                <Form.Item name="behospitalEndDate" className='times'>
                                    <DatePicker
                                        allowClear={false}
                                        disabledDate={disabledEndDate}
                                        value={endValue}
                                        placeholder="请选择结束始日期"
                                        onChange={onEndChange}
                                    />
                                </Form.Item>
                            </Form.Item>
                        </Col>
                        <Col span={5} key={1}>
                            <Form.Item label="住院序号" name="behospitalCode" getValueFromEvent={getValueFromEvent}>
                                <Input placeholder="住院序号" autoComplete='off' allowClear maxLength='30' />
                            </Form.Item>
                        </Col>
                        <Col span={5} key={2}>
                            <Form.Item label="文书编号" name="hosptialDatatmpCode" getValueFromEvent={getValueFromEvent}>
                                <Input placeholder="文书编号" autoComplete='off' allowClear maxLength='30' />
                            </Form.Item>
                        </Col>
                        <Col span={5} key={3}>
                            <Form.Item label="文书标题" name="hosptialDatatmpName" getValueFromEvent={getValueFromEvent}>
                                <Input placeholder="文书标题" autoComplete='off' allowClear maxLength='30' />
                            </Form.Item>
                        </Col>
                        <Col span={5} key={4}>
                            <Form.Item label="质控模块名称" name="modeName" >
                                <Select showSearch allowClear onSearch={onSearch} placeholder="请选择">
                                    {modeList.map((item, i) => {
                                        return (
                                            <Option value={item} key={i}>{item}</Option>
                                        )
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={5} key={5}>
                            <Form.Item label="问题类型" name="type">
                                <Select
                                    placeholder="请选择"
                                    allowClear
                                >
                                    <Option value="" key={0}>全部</Option>
                                    <Option value="1" key={1}>数据缺失</Option>
                                    <Option value="2" key={2}>非标准值</Option>
                                    <Option value="3" key={3}>正则校验失败</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={5} key={7}>
                            <Form.Item label="状态" name="isSolved">
                                <Select
                                    placeholder="请选择"
                                    allowClear
                                >
                                    <Option value="" key={3}>全部</Option>
                                    <Option value="0" key={0}>未处理</Option>
                                    <Option value="1" key={1}>已处理</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={4} key={8}>
                            <Form.Item>
                                <Button type="primary" htmlType="submit">
                                    查询
                                </Button>
                                <Button onClick={onReset}>
                                    重置
                                </Button>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </div>

            <div className="table">
                <div className="table-header">
                    <h2 className="table-title">字段校验问题明细</h2>
                    <Space size="middle">
                        <Button type="primary" onClick={() => showModal('数据校验设置', { behospitalCode: '', time: '' }, 1)}>数据校验</Button>
                    </Space>

                </div>
                <div className="table-data" style={{ justifyContent: 'left' }}>
                    <Row className="data-box">
                        <Col span={6} order={1} className="box-item">
                            <p>{probleData.notSolvedNonnull || probleData.notSolvedNonnull == 0 ? probleData.notSolvedNonnull : '-'}</p>
                            <p>数据缺失</p>
                        </Col>
                        <Col span={6} order={2} className="box-item">
                            <p>{probleData.notSolvedStandardvalue || probleData.notSolvedStandardvalue == 0 ? probleData.notSolvedStandardvalue : '-'}</p>
                            <p>非标准值</p>
                        </Col>
                        <Col span={6} order={3} className="box-item">
                            <p>{probleData.notSolvedRegular || probleData.notSolvedRegular == 0 ? probleData.notSolvedRegular : '-'}</p>
                            <p>正则校验失败</p>
                        </Col>
                        <Col span={6} order={4} className="box-item item">
                            <p>{probleData.notSolved || probleData.notSolved == 0 ? probleData.notSolved : '-'}</p>
                            <p>未处理</p>
                        </Col>
                    </Row>
                    <Row className="data-box">
                        <Col span={6} order={1} className="box-item">
                            <p>{probleData.resolvedNonnull || probleData.resolvedNonnull == 0 ? probleData.resolvedNonnull : '-'}</p>
                            <p>数据缺失</p>
                        </Col>
                        <Col span={6} order={2} className="box-item">
                            <p>{probleData.resolvedStandardvalue || probleData.resolvedStandardvalue == 0 ? probleData.resolvedStandardvalue : '-'}</p>
                            <p>非标准值</p>
                        </Col>
                        <Col span={6} order={3} className="box-item">
                            <p>{probleData.resolvedRegular || probleData.resolvedRegular == 0 ? probleData.resolvedRegular : '-'}</p>
                            <p>正则校验失败</p>
                        </Col>
                        <Col span={6} order={4} className="box-item box">
                            <p>{probleData.resolved || probleData.resolved == 0 ? probleData.resolved : '-'}</p>
                            <p>已处理</p>
                        </Col>
                    </Row>
                </div>
                <Table
                    columns={columns}
                    scroll={{ y: 'calc(100vh - 570px)' }}
                    dataSource={logList}
                    rowKey={record => record.id}
                    pagination={{
                        pageSize: size,
                        size: 'small',
                        current: current,
                        showSizeChanger: true,
                        pageSizeOptions: ['15', '30', '60', '120'],
                        showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条数据`,
                        onShowSizeChange: (current, pageSize) => onSizeChange(current, pageSize), // 改变每页数量时更新显示
                        onChange: (page, pageSize) => changePage(page, pageSize),//点击页码事件
                        total: total
                    }} />
            </div>

            {visible && problemDetail ?
                <Modal
                    title={title}
                    okText='确定'
                    cancelText='取消'
                    width="500px"
                    visible={visible}
                    onCancel={cancel}
                    footer={null}
                    forceRender={true}
                    maskClosable={false}
                >
                    <ProblemContext.Provider value={{ problemDetail, type }}>
                        <EditProblem cancel={cancel} userChange={userChange} />
                    </ProblemContext.Provider>

                </Modal>
                : ''}
        </div >
    )
}

export default FieldProblem;