add 查询表格种子文件及系统配置功能

web-react/public/seed/query-table-form/form.jsx

@@ -0,0 +1,77 @@
+import React, { Component } from 'react'
+import { Form, Spin } from 'antd'
+import { AntIcon } from 'components'
+import { cloneDeep } from 'lodash'
+
+const initialValues = {}
+
+export default class form extends Component {
+    state = {
+        // 加载状态
+        loading: true,
+    }
+
+    // 表单实例
+    form = React.createRef()
+
+    // 初始化数据
+    record = {}
+
+    /**
+     * mount后回调
+     */
+    componentDidMount() {
+        this.props.created && this.props.created(this)
+    }
+
+    /**
+     * 填充数据
+     * 可以在设置this.record之后对其作出数据结构调整
+     * [异步,必要]
+     * @param {*} params
+     */
+    async fillData(params) {
+        this.record = cloneDeep(params.record)
+        //#region 从后端转换成前段所需格式,也可以在此处调用获取详细数据接口
+        //#endregion
+        this.form.current.setFieldsValue(this.record)
+
+        this.setState({
+            loading: false,
+        })
+    }
+
+    /**
+     * 获取数据
+     * 可以对postData进行数据结构调整
+     * [异步,必要]
+     * @returns
+     */
+    async getData() {
+        const form = this.form.current
+
+        const valid = await form.validateFields()
+        if (valid) {
+            const postData = form.getFieldsValue()
+            if (this.record) {
+                postData.id = this.record.id
+            }
+            //#region 从前段转换后端所需格式
+            //#endregion
+            return postData
+        }
+    }
+
+    //#region 自定义方法
+    //#endregion
+
+    render() {
+        return (
+            <Form initialValues={initialValues} ref={this.form} className="yo-form">
+                <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
+                    <div className="yo-form-group"></div>
+                </Spin>
+            </Form>
+        )
+    }
+}

web-react/public/seed/query-table/index.jsx

@@ -0,0 +1,237 @@
+import React, { Component } from 'react'
+import { Button, Card, Form, Input, message as Message, Popconfirm } from 'antd'
+import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions } from 'components'
+import { api } from 'common/api'
+import auth from 'components/authorized/handler'
+import { isEqual } from 'lodash'
+import getDictData from 'util/dic'
+import { toCamelCase } from 'util/format'
+import FormBody from './form'
+
+/**
+ * 注释段[\/**\/]为必须要改
+ */
+
+/**
+ * 配置页面所需接口函数
+ */
+const apiAction = {
+    page: api /**/,
+    add: api /**/,
+    edit: api /**/,
+    delete: api /**/,
+}
+
+/**
+ * 用于弹窗标题
+ * [必要]
+ */
+const name = '/**/'
+
+/**
+ * 统一配置权限标识
+ * [必要]
+ */
+const authName = '/**/'
+
+export default class index extends Component {
+    state = {
+        codes: {},
+    }
+
+    // 表格实例
+    table = React.createRef()
+
+    // 新增窗口实例
+    addForm = React.createRef()
+    // 编辑窗口实例
+    editForm = React.createRef()
+
+    columns = []
+
+    /**
+     * 构造函数,在渲染前动态添加操作字段等
+     * @param {*} props
+     */
+    constructor(props) {
+        super(props)
+
+        const flag = auth({ [authName]: [['edit'], ['delete']] })
+
+        if (flag) {
+            this.columns.push({
+                title: '操作',
+                width: 150,
+                dataIndex: 'actions',
+                render: (text, record) => (
+                    <QueryTableActions>
+                        <Auth auth={{ [authName]: 'edit' }}>
+                            <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
+                        </Auth>
+                        <Auth auth={{ [authName]: 'delete' }}>
+                            <Popconfirm
+                                placement="topRight"
+                                title="是否确认删除"
+                                onConfirm={() => this.onDelete(record)}
+                            >
+                                <a>删除</a>
+                            </Popconfirm>
+                        </Auth>
+                    </QueryTableActions>
+                ),
+            })
+        }
+    }
+
+    /**
+     * 阻止外部组件引发的渲染,提升性能
+     * 可自行添加渲染条件
+     * [必要]
+     * @param {*} props
+     * @param {*} state
+     * @returns
+     */
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
+    }
+
+    /**
+     * 加载字典数据,之后开始加载表格数据
+     * 如果必须要加载字典数据,可直接对表格设置autoLoad=true
+     */
+    componentDidMount() {
+        const { onLoading, onLoadData } = this.table.current
+        onLoading()
+        getDictData(/**/).then(codes => {
+            this.setState({ codes }, () => {
+                onLoadData()
+            })
+        })
+    }
+
+    /**
+     * 调用加载数据接口,可在调用前对query进行处理
+     * [异步,必要]
+     * @param {*} params
+     * @param {*} query
+     * @returns
+     */
+    loadData = async (params, query) => {
+        const { data } = await apiAction.page({
+            ...params,
+            ...query,
+        })
+        return data
+    }
+
+    /**
+     * 绑定字典数据
+     * @param {*} code
+     * @param {*} name
+     * @returns
+     */
+    bindCodeValue(code, name) {
+        name = toCamelCase(name)
+        const codes = this.state.codes[name]
+        if (codes) {
+            const c = codes.find(p => p.code === code)
+            if (c) {
+                return c.value
+            }
+        }
+        return null
+    }
+
+    /**
+     * 打开新增/编辑弹窗
+     * @param {*} modal
+     * @param {*} record
+     */
+    onOpen(modal, record) {
+        modal.current.open({
+            record,
+        })
+    }
+
+    /**
+     * 对表格上的操作进行统一处理
+     * [异步]
+     * @param {*} action
+     * @param {*} successMessage
+     */
+    async onAction(action, successMessage) {
+        const { onLoading, onLoaded, onReloadData } = this.table.current
+        onLoading()
+        try {
+            if (action) {
+                await action
+            }
+            if (successMessage) {
+                Message.success(successMessage)
+            }
+            onReloadData()
+        } catch {
+            onLoaded()
+        }
+    }
+
+    /**
+     * 删除
+     * @param {*} record
+     */
+    onDelete(record) {
+        this.onAction(apiAction.delete(record), '删除成功')
+    }
+
+    //#region 自定义方法
+    //#endregion
+
+    render() {
+        return (
+            <Container mode="fluid">
+                <br />
+                <Card bordered={false}>
+                    <QueryTable
+                        ref={this.table}
+                        autoLoad={false}
+                        loadData={this.loadData}
+                        columns={this.columns}
+                        query={<Auth auth={{ [authName]: 'page' }}></Auth>}
+                        operator={
+                            <Auth auth={{ [authName]: 'add' }}>
+                                <Button
+                                    icon={<AntIcon type="plus" />}
+                                    onClick={() => this.onOpen(this.addForm)}
+                                >
+                                    新增{name}
+                                </Button>
+                            </Auth>
+                        }
+                    />
+                </Card>
+
+                <Auth auth={{ [authName]: 'add' }}>
+                    <ModalForm
+                        title={`新增${name}`}
+                        action={apiAction.add}
+                        ref={this.addForm}
+                        onSuccess={() => this.table.current.onReloadData()}
+                    >
+                        <FormBody />
+                    </ModalForm>
+                </Auth>
+
+                <Auth auth={{ [authName]: 'edit' }}>
+                    <ModalForm
+                        title={`编辑${name}`}
+                        action={apiAction.edit}
+                        ref={this.editForm}
+                        onSuccess={() => this.table.current.onReloadData()}
+                    >
+                        <FormBody />
+                    </ModalForm>
+                </Auth>
+            </Container>
+        )
+    }
+}

web-react/src/pages/system/config/form.jsx

@@ -0,0 +1,134 @@
+import React, { Component } from 'react'
+import { Form, Input, Radio, Select, Spin } from 'antd'
+import { AntIcon } from 'components'
+import { cloneDeep } from 'lodash'
+import getDictData from 'util/dic'
+
+const initialValues = {}
+
+export default class form extends Component {
+    state = {
+        // 加载状态
+        loading: true,
+
+        codes: {
+            constsType: [],
+        },
+    }
+
+    // 表单实例
+    form = React.createRef()
+
+    // 初始化数据
+    record = {}
+
+    /**
+     * mount后回调
+     */
+    componentDidMount() {
+        this.props.created && this.props.created(this)
+    }
+
+    /**
+     * 填充数据
+     * 可以在设置this.record之后对其作出数据结构调整
+     * [异步,必要]
+     * @param {*} params
+     */
+    async fillData(params) {
+        this.record = cloneDeep(params.record)
+        //#region 从后端转换成前段所需格式,也可以在此处调用获取详细数据接口
+        const codes = await getDictData('consts_type')
+        this.setState({ codes })
+        //#endregion
+        this.form.current.setFieldsValue(this.record)
+
+        this.setState({
+            loading: false,
+        })
+    }
+
+    /**
+     * 获取数据
+     * 可以对postData进行数据结构调整
+     * [异步,必要]
+     * @returns
+     */
+    async getData() {
+        const form = this.form.current
+
+        const valid = await form.validateFields()
+        if (valid) {
+            const postData = form.getFieldsValue()
+            if (this.record) {
+                postData.id = this.record.id
+            }
+            //#region 从前段转换后端所需格式
+            //#endregion
+            return postData
+        }
+    }
+
+    //#region 自定义方法
+    //#endregion
+
+    render() {
+        const { codes } = this.state
+
+        return (
+            <Form initialValues={initialValues} ref={this.form} className="yo-form">
+                <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
+                    <div className="yo-form-group">
+                        <Form.Item
+                            label="角色名"
+                            name="name"
+                            rules={[{ required: true, message: '请输入应用名称' }]}
+                        >
+                            <Input autoComplete="off" placeholder="请输入角色名" />
+                        </Form.Item>
+                        <Form.Item
+                            label="唯一编码"
+                            name="code"
+                            rules={[{ required: true, message: '请输入唯一编码' }]}
+                        >
+                            <Input autoComplete="off" placeholder="请输入唯一编码" />
+                        </Form.Item>
+                        <Form.Item
+                            label="系统参数"
+                            name="sysFlag"
+                            rules={[{ required: true, message: '请选择参数类型' }]}
+                        >
+                            <Radio.Group disabled={this.record}>
+                                <Radio.Button value="Y">是</Radio.Button>
+                                <Radio.Button value="N">否</Radio.Button>
+                            </Radio.Group>
+                        </Form.Item>
+                        <Form.Item
+                            label="所属分类"
+                            name="groupCode"
+                            rules={[{ required: true, message: '请选择所属分类' }]}
+                        >
+                            <Select placeholder="请选择所属分类" disabled={this.record}>
+                                {codes.constsType.map(item => (
+                                    <Select.Option key={item.code} value={item.code}>
+                                        {item.value}
+                                    </Select.Option>
+                                ))}
+                            </Select>
+                        </Form.Item>
+                        <Form.Item
+                            label="参数值"
+                            name="value"
+                            rules={[{ required: true, message: '请输入参数值' }]}
+                        >
+                            <Input autoComplete="off" placeholder="请输入参数值" />
+                        </Form.Item>
+                        <Form.Item label="备注" name="remark">
+                            <Input.TextArea autoComplete="off" placeholder="请输入备注" />
+                        </Form.Item>
+                    </div>
+                </Spin>
+            </Form>
+        )
+    }
+}

web-react/src/pages/system/config/index.jsx

@@ -0,0 +1,263 @@
+import React, { Component } from 'react'
+import { Button, Card, Form, Input, message as Message, Popconfirm } from 'antd'
+import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions } from 'components'
+import { api } from 'common/api'
+import auth from 'components/authorized/handler'
+import { isEqual } from 'lodash'
+import getDictData from 'util/dic'
+import { toCamelCase } from 'util/format'
+import FormBody from './form'
+
+// 配置页面所需接口函数
+const apiAction = {
+    page: api.sysConfigPage,
+    add: api.sysConfigAdd,
+    edit: api.sysConfigEdit,
+    delete: api.sysConfigDelete,
+}
+
+// 用于弹窗标题
+const name = '应用'
+
+// 统一配置权限标识
+const authName = 'sysConfig'
+
+export default class index extends Component {
+    state = {
+        codes: {
+            constsType: [],
+        },
+    }
+
+    // 表格实例
+    table = React.createRef()
+
+    // 新增窗口实例
+    addForm = React.createRef()
+    // 编辑窗口实例
+    editForm = React.createRef()
+
+    columns = [
+        {
+            title: '参数名称',
+            dataIndex: 'name',
+            sorter: true,
+        },
+        {
+            title: '唯一编码',
+            dataIndex: 'code',
+            sorter: true,
+        },
+        {
+            title: '参数值',
+            dataIndex: 'value',
+            sorter: true,
+        },
+        {
+            title: '所属分类',
+            dataIndex: 'groupCode',
+            sorter: true,
+            render: text => this.bindCodeValue(text, 'consts_type'),
+        },
+        {
+            title: '备注',
+            dataIndex: 'remark',
+            sorter: true,
+        },
+    ]
+
+    /**
+     * 构造函数,在渲染前动态添加操作字段等
+     * @param {*} props
+     */
+    constructor(props) {
+        super(props)
+
+        const flag = auth({ [authName]: [['edit'], ['delete']] })
+
+        if (flag) {
+            this.columns.push({
+                title: '操作',
+                width: 150,
+                dataIndex: 'actions',
+                render: (text, record) => (
+                    <QueryTableActions>
+                        <Auth auth={{ [authName]: 'edit' }}>
+                            <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
+                        </Auth>
+                        <Auth auth={{ [authName]: 'delete' }}>
+                            <Popconfirm
+                                placement="topRight"
+                                title="是否确认删除"
+                                onConfirm={() => this.onDelete(record)}
+                            >
+                                <a>删除</a>
+                            </Popconfirm>
+                        </Auth>
+                    </QueryTableActions>
+                ),
+            })
+        }
+    }
+
+    /**
+     * 阻止外部组件引发的渲染,提升性能
+     * 可自行添加渲染条件
+     * [必要]
+     * @param {*} props
+     * @param {*} state
+     * @returns
+     */
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
+    }
+
+    /**
+     * 加载字典数据,之后开始加载表格数据
+     * 如果必须要加载字典数据,可直接对表格设置autoLoad=true
+     */
+    componentDidMount() {
+        const { onLoading, onLoadData } = this.table.current
+        onLoading()
+        getDictData('consts_type').then(codes => {
+            this.setState({ codes }, () => {
+                onLoadData()
+            })
+        })
+    }
+
+    /**
+     * 调用加载数据接口,可在调用前对query进行处理
+     * [异步,必要]
+     * @param {*} params
+     * @param {*} query
+     * @returns
+     */
+    loadData = async (params, query) => {
+        const { data } = await apiAction.page({
+            ...params,
+            ...query,
+        })
+        return data
+    }
+
+    /**
+     * 绑定字典数据
+     * @param {*} code
+     * @param {*} name
+     * @returns
+     */
+    bindCodeValue(code, name) {
+        name = toCamelCase(name)
+        const codes = this.state.codes[name]
+        if (codes) {
+            const c = codes.find(p => p.code === code)
+            if (c) {
+                return c.value
+            }
+        }
+        return null
+    }
+
+    /**
+     * 打开新增/编辑弹窗
+     * @param {*} modal
+     * @param {*} record
+     */
+    onOpen(modal, record) {
+        modal.current.open({
+            record,
+        })
+    }
+
+    /**
+     * 对表格上的操作进行统一处理
+     * [异步]
+     * @param {*} action
+     * @param {*} successMessage
+     */
+    async onAction(action, successMessage) {
+        const { onLoading, onLoaded, onReloadData } = this.table.current
+        onLoading()
+        try {
+            if (action) {
+                await action
+            }
+            if (successMessage) {
+                Message.success(successMessage)
+            }
+            onReloadData()
+        } catch {
+            onLoaded()
+        }
+    }
+
+    /**
+     * 删除
+     * @param {*} record
+     */
+    onDelete(record) {
+        this.onAction(apiAction.delete(record), '删除成功')
+    }
+
+    //#region 自定义方法
+    //#endregion
+
+    render() {
+        return (
+            <Container mode="fluid">
+                <br />
+                <Card bordered={false}>
+                    <QueryTable
+                        ref={this.table}
+                        autoLoad={false}
+                        loadData={this.loadData}
+                        columns={this.columns}
+                        query={
+                            <Auth auth={{ [authName]: 'page' }}>
+                                <Form.Item label="参数名称" name="name">
+                                    <Input autoComplete="off" placeholder="请输入参数名称" />
+                                </Form.Item>
+                                <Form.Item label="唯一编码" name="code">
+                                    <Input autoComplete="off" placeholder="请输入唯一编码" />
+                                </Form.Item>
+                            </Auth>
+                        }
+                        operator={
+                            <Auth auth={{ [authName]: 'add' }}>
+                                <Button
+                                    icon={<AntIcon type="plus" />}
+                                    onClick={() => this.onOpen(this.addForm)}
+                                >
+                                    新增{name}
+                                </Button>
+                            </Auth>
+                        }
+                    />
+                </Card>
+
+                <Auth auth={{ [authName]: 'add' }}>
+                    <ModalForm
+                        title={`新增${name}`}
+                        action={apiAction.add}
+                        ref={this.addForm}
+                        onSuccess={() => this.table.current.onReloadData()}
+                    >
+                        <FormBody />
+                    </ModalForm>
+                </Auth>
+
+                <Auth auth={{ [authName]: 'edit' }}>
+                    <ModalForm
+                        title={`编辑${name}`}
+                        action={apiAction.edit}
+                        ref={this.editForm}
+                        onSuccess={() => this.table.current.onReloadData()}
+                    >
+                        <FormBody />
+                    </ModalForm>
+                </Auth>
+            </Container>
+        )
+    }
+}