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

import React, { useState, useEffect, useRef } from 'react';
import { Form, Input, Button, Table, Pagination, Row, Col, Select, Modal, DatePicker, Space } from 'antd';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import '@common/common.less';
import apiObj from '@api/index';
import AddRules from './addRules';
import FiledContext from './filed-context';
import { message } from "antd/lib/index";
const { post, api, xPost } = apiObj;
const { RangePicker } = DatePicker;
const { Option } = Select;
function FieldRules() {
    useEffect(() => {
        getColumnVerifyPage();
    }, []);
    const [addVisible, setAddVisible] = useState(false);         //新增页面显示
    const [logList, setLogList] = useState([]);
    const [total, setTotal] = useState(0);
    const [type, setType] = useState(0);//1新增 2修改
    const [visible, setVisible] = useState(false);
    const [size, setSize] = useState(15);
    const [current, setCurrent] = useState(1);
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [filedDetail, setFiledDetail] = useState(null);//详情数据
    const [params, setParams] = useState({
        pages: 1,
        current: 1,
        size: 15
    });
    const [form] = Form.useForm();
    const typeMap = {
        '1': '职务变更',
        '2': '职称变更'
    };
    let data = {
        pages: 1,
        current: 1,
        size: size
    }
    //表格数据
    function getColumnVerifyPage(param) {
        post(api.getColumnVerifyPage, param || params).then((res) => {
            if (res.data.code === 200) {
                const data = res.data.data;
                setLogList(data.records);
                setTotal(data.total)
            }
        })
    }
    //删除记录
    function delRecord() {
        post(api.delOfficialCapacityPage, { id: selectedRowKeys }).then((res) => {
            if (res.data.code === 200) {
                //刷新列表
                getColumnVerifyPage()
            } else {
                message.warning(res.data.msg || '操作失败，请重试~');
            }
        });
        showDelModal(false);
    }
    //删除弹窗确认
    function showDelModal(flag) {
        console.log(selectedRowKeys)
        if (flag && !selectedRowKeys.length) {
            message.warning("请先选择要删除的记录~", 1);
            return;
        }
        setVisible(flag)
    }
    //新增修改跳转
    function showModal(type) {
        setAddVisible(true)
        setType(type)
        setFiledDetail([])
    }
    function onSizeChange(current, pageSize) {
        params.current = current
        params.size = pageSize
        setSize(pageSize)
        setCurrent(current)
        setParams(params)
        getColumnVerifyPage()
    }
    function changePage(page, pageSize) {
        params.current = page
        params.size = pageSize
        setParams(params)
        setCurrent(page)
        getColumnVerifyPage()
    }
    function onTypeChange() {

    }
    function onSelectChange(selectedRowKeys) {
        setSelectedRowKeys(selectedRowKeys);
    };
    //返回
    function goBack() {
        setAddVisible(false);
        // setOrgDetail(null)
        // getTableData();
    }
    //保存
    function addSubFiled() {

    }
    const onFinish = (value) => {
        const param = {
            ...data,
            ...value,
        }
        setCurrent(1)
        setParams(param)
        getColumnVerifyPage(param);
    };
    const onReset = () => {
        setCurrent(1)
        setParams(data)
        form.resetFields();
        getColumnVerifyPage(data);
    };
    const columns = [
        { title: '序号', dataIndex: 'index', render: (text, record, index) => (current - 1) * params.size + index + 1 },
        { title: '表名称（中文）', dataIndex: 'tableCname', key: 'tableCname' },
        { title: '表名称（英文）', dataIndex: 'tableEname', key: 'tableEname' },
        { title: '字段名称（中文）', dataIndex: 'columnCname', key: 'columnCname' },
        { title: '字段名称（英文）', dataIndex: 'columnEname', key: 'columnEname' },
        {
            title: '是否必填', dataIndex: 'isRequired', key: 'isRequired', render: (text, record) => {
                return record.isRequired == 1 ? "是" : "否";
            }
        },
        { title: '标准值维护', dataIndex: 'standardValue', key: 'standardValue' },
        { title: '正则式名称', dataIndex: 'regularName', key: 'regularName' },
        { title: '说明', dataIndex: 'regularName', key: 'regularName' },
        {
            title: '操作', dataIndex: 'key', render: (text, record) => (
                <Space size="middle">
                    <a >修改</a>
                </Space>
            )
        }
    ];
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    if (addVisible && filedDetail) {
        return (
            <FiledContext.Provider value={{ type,save: addSubFiled, detail: filedDetail }}>
                <AddRules back={goBack} />
            </FiledContext.Provider>
        )
    }
    return (
        <div className="wrapper">
            <div className="filter-box">
                <Form
                    form={form}
                    name="normal_login"
                    onFinish={onFinish}
                >
                    <Row gutter={24}>
                        <Col span={5} key={0}>
                            <Form.Item label="表名称（中文）" name="doctorName">
                                <Input placeholder="请输入" autoComplete='off' />
                            </Form.Item>
                        </Col>
                        <Col span={5} key={1}>
                            <Form.Item label="表名称（英文）" name="deptName">
                                <Input placeholder="请输入" autoComplete='off' />
                            </Form.Item>
                        </Col>
                        <Col span={5} key={2}>
                            <Form.Item label="字段名称（中文）" name="doctorCode">
                                <Input placeholder="请输入" autoComplete='off' />
                            </Form.Item>
                        </Col>
                        <Col span={5} key={3}>
                            <Form.Item label="字段名称（英文）" name="name">
                                <Input placeholder="请输入" autoComplete='off' />
                            </Form.Item>
                        </Col>
                        <Col span={5} key={4}>
                            <Form.Item label="是否必填" name="type">
                                <Select
                                    placeholder="请选择"
                                    onChange={onTypeChange}
                                    allowClear
                                >
                                    <Option value="0" key={0}>全部</Option>
                                    <Option value="1" key={1}>{typeMap['1']}</Option>
                                    <Option value="2" key={2}>{typeMap['2']}</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={5} key={3}>
                            <Form.Item label="标准值" name="name">
                                <Input placeholder="请输入" autoComplete='off' />
                            </Form.Item>
                        </Col>
                        <Col span={7} key={5}>
                            <Form.Item label="正则名称" name="changeTime">
                                <RangePicker
                                    placeholder={['开始时间', '结束时间']}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={6} key={6}>
                            <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" icon={<PlusOutlined />} onClick={() => showModal(1)}>新增</Button>
                        <Button type="primary" icon={<DeleteOutlined />} onClick={() => showDelModal(true)} danger>删除</Button>
                    </Space>

                </div>

                <Table
                    columns={columns}
                    rowSelection={rowSelection}
                    scroll={{ y: 'calc(100vh - 380px)' }}
                    dataSource={logList}
                    rowKey={record => record.columnId}
                    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>
            <Modal
                title="删除职务职称变更记录"
                okText='确定'
                cancelText='取消'
                width={400}
                visible={visible}
                onOk={delRecord}
                /*confirmLoading={confirmLoading}*/
                onCancel={() => showDelModal(false)}
            >
                <p>职务职称变更记录删除后将无法恢复，确认删除这{selectedRowKeys.length}条变更记录？</p>
            </Modal>
        </div >
    )
}

export default FieldRules;