update vue代码迁移至react

web-react/src/components/query-table/index.jsx

@@ -223,7 +223,7 @@ export default class QueryTable extends Component {
             columns: (columns || []).filter(p => !p.hidden),
             bordered: true,
             size: 'middle',
-            rowKey: record => record.id || Math.random().toString(16).slice(2),
+            rowKey: record => record.id || record,
             ...this.props
         }
 

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

@@ -250,6 +250,12 @@ export default class index extends Component {
                                 onClick={() => this.onOpen(this.addForm)}
                             >新增{name}</Button>
                         }
+                        expandedRowRender={
+                            record => {
+                                console.log(record)
+                                return <div>123</div>
+                            }
+                        }
                     />
                 </Card>
 

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

@@ -0,0 +1,132 @@
+import React, { Component } from 'react'
+import { Form, Input, InputNumber, Select, Spin } from 'antd'
+import { AntIcon } from 'components'
+import { cloneDeep } from 'lodash'
+import getDicData from 'util/dic'
+
+const initialValues = {
+    sort: 100
+}
+export default class form extends Component {
+    state = {
+        // 加载状态
+        loading: true,
+        exist: false,
+        codes: {
+            dicAreacodeType: []
+        }
+    }
+    // 表单实例
+    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 getDicData('dic_areacode_type')
+        const exist = !!params.record;
+        this.setState({
+            codes,
+            exist
+        })
+
+        this.record = {
+            ...this.record
+        }
+        //#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
+        }
+    }
+
+    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">
+                        {/* 表单控件 */}
+                        <Form.Item label="区域类型" name="levelType" rules={[{ required: true, message: '请选择区域类型' }]}>
+                            <Select placeholder="请选择区域类型" suffixIcon={<AntIcon type="lock" v-if={this.state.exist} />}>
+                                {
+                                    this.state.codes.dicAreacodeType.map(item => {
+                                        return <Select.Option
+                                            key={item.code}
+                                            value={+item.code}
+                                        >{item.value}</Select.Option>
+                                    })
+                                }
+                            </Select>
+                        </Form.Item>
+                        <Form.Item label="区域名称" name="name" rules={[{ required: true, message: '请输入区域名称' }]}>
+                            <Input autoComplete="off" placeholder="请输入区域名称" />
+                        </Form.Item>
+                        <Form.Item label="区域编码" name="code" tooltip="用于系统内部使用，添加后不可更改">
+                            <Input disabled={this.state.exist} placeholder="请输入区域编码" suffix={this.state.exist && <AntIcon type="lock" />}>
+                            </Input>
+                        </Form.Item>
+                        <Form.Item label="行政编码" name="adCode" tooltip="国家规定的区划代码，可随实际情况更改而更改">
+                            <Input placeholder="请输入区域编码" >
+                            </Input>
+                        </Form.Item>
+                        <Form.Item label="排序" name="sort">
+                            <InputNumber
+                                min={0}
+                                placeholder="请输入排序"
+                                className="w-100-p"
+                            />
+                        </Form.Item>
+                        <Form.Item label="备注" name="note">
+                            <Input.TextArea placeholder="请输入备注" />
+                        </Form.Item>
+                        {/* ... */}
+                    </div>
+                </Spin>
+            </Form>
+        )
+    }
+}

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

@@ -0,0 +1,290 @@
+import React, { Component } from 'react'
+import { Button, Card, Form, Input, message as Message, Popconfirm } from 'antd'
+import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions, QueryTreeLayout } from 'components'
+import { api } from 'common/api'
+import auth from 'components/authorized/handler'
+import { toCamelCase } from 'util/format'
+import { isEqual } from 'lodash'
+import getDicData from 'util/dic'
+import FormBody from './form'
+
+const apiAction = {
+    tree: api.getAreaTree,
+    page: api.sysAreaPage,
+    add: api.sysAreaAdd,
+    edit: api.sysAreaEdit,
+    delete: api.sysAreaDelete
+}
+
+const name = '区域'
+
+export default class index extends Component {
+
+    state = {
+        codes: {
+            dicAreacodeType: []
+        }
+    }
+
+    // 表格实例
+    table = React.createRef()
+
+    // 新增窗口实例
+    addForm = React.createRef()
+    // 编辑窗口实例
+    editForm = React.createRef()
+
+    // 树选中节点
+    selectCode = undefined
+    columns = [
+        {
+            title: '区域类型',
+            dataIndex: 'levelType',
+            sorter: true,
+            render: text => (<>{this.bindCodeValue(text, 'dic_areacode_type')}</>)
+        },
+        {
+            title: '区域名称',
+            dataIndex: 'name',
+            sorter: true,
+        },
+        {
+            title: '区域编号',
+            dataIndex: 'code',
+            sorter: true,
+        },
+        {
+            title: '行政编号',
+            dataIndex: 'adCode',
+            sorter: true,
+        },
+        {
+            title: '描述',
+            dataIndex: 'note',
+            sorter: false,
+        },
+        {
+            title: '排序',
+            dataIndex: 'sort',
+            sorter: true,
+        },
+    ]
+    /**
+     * 构造函数,在渲染前动态添加操作字段等
+     * @param {*} props 
+     */
+    constructor(props) {
+        super(props)
+
+        const flag = auth({ sysArea: [['edit'], ['delete']] })
+
+        if (flag) {
+            this.columns.push({
+                title: '操作',
+                width: 150,
+                dataIndex: 'actions',
+                render: (text, record) => (<QueryTableActions>
+                    <Auth auth="sysArea:edit">
+                        <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
+                    </Auth>
+                    <Auth auth="sysArea: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() {
+        this.table.current.onLoading()
+        getDicData('dic_areacode_type').then(res => {
+            this.setState({
+                codes: res
+            }, () => {
+                this.table.current.onLoadData()
+            })
+        })
+    }
+    /**
+    * 调用加载数据接口,可在调用前对query进行处理
+    * [异步,必要]
+    * @param {*} params 
+    * @param {*} query 
+    * @returns 
+    */
+    loadData = async (params, query) => {
+
+        query = {
+            ...query,
+            pcode: this.selectCode
+        }
+        //首次加载根据code列升序排序
+        if (!params.sortField) {
+            params.sortField = 'code';
+            params.sortOrder = 'ascend';
+        }
+        const { data } = await apiAction.page({
+            ...params,
+            ...query,
+        })
+        return data
+    }
+
+    /**
+     * 调用树结构数据接口
+     * [异步,必要]
+     * @returns
+     */
+    loadTreeData = async () => {
+        const { data } = await apiAction.tree()
+        return data
+    }
+
+    /**
+     * 树节点选中事件
+     * [必要]
+     * @param {*} id 
+     */
+    onSelectTree(code) {
+        this.selectCode = code
+        this.table.current.onReloadData()
+    }
+
+    /**
+     * 绑定字典数据
+     * @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({
+            pcode: this.pcode,
+            record
+        })
+    }
+
+    /**
+     * 对表格上的操作进行统一处理
+     * [异步]
+     * @param {*} action 
+     * @param {*} successMessage 
+     */
+    async onAction(action, successMessage) {
+        this.table.current.onLoading()
+        try {
+            await action
+            Message.success(successMessage)
+            this.table.current.onReloadData()
+        } catch {
+            this.table.current.onLoaded()
+        }
+    }
+
+    /**
+     * 删除
+     * @param {*} record 
+     */
+    onDelete(record) {
+        this.onAction(
+            apiAction.delete(record),
+            '删除成功'
+        )
+    }
+
+    render() {
+        return (
+            <QueryTreeLayout
+                loadData={this.loadTreeData}
+                defaultExpanded={true}
+                onSelect={(key) => this.onSelectTree(key)}
+                replaceFields={{ value: 'code', title: 'name', children: 'children' }}
+            >
+                <Container mode="fluid">
+                    <Card bordered={false}>
+                        <QueryTable
+                            ref={this.table}
+                            autoLoad={false}
+                            loadData={this.loadData}
+                            columns={this.columns}
+                            query={
+                                <Auth auth="sysArea: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="sysArea:add">
+                                    <Button
+                                        icon={<AntIcon type="plus" />}
+                                        onClick={() => this.onOpen(this.addForm)}
+                                    >新增{name}</Button>
+                                </Auth>
+                            }
+                        >
+
+                        </QueryTable>
+                    </Card>
+                </Container>
+                <ModalForm
+                    title={`新增${name}`}
+                    action={apiAction.add}
+                    ref={this.addForm}
+                    onSuccess={() => this.table.current.onReloadData()}
+                >
+                    <FormBody />
+                </ModalForm>
+
+                <ModalForm
+                    title={`编辑${name}`}
+                    action={apiAction.edit}
+                    ref={this.editForm}
+                    onSuccess={() => this.table.current.onReloadData()}
+                >
+                    <FormBody />
+                </ModalForm>
+            </QueryTreeLayout>
+        )
+    }
+}

web-react/src/pages/system/log/oplog/index.jsx

@@ -0,0 +1,245 @@
+import React, { Component } from 'react'
+import { Alert, Button, Card, Descriptions, Form, Popconfirm, Input, message as Message, Select } from 'antd'
+import { Auth, Container, QueryTable } from 'components'
+import { api } from 'common/api'
+import { toCamelCase } from 'util/format'
+import { isEqual } from 'lodash'
+import getDicData from 'util/dic'
+import moment from 'moment'
+
+const apiAction = {
+    page: api.sysOpLogPage,
+    delete: api.sysOpLogDelete
+}
+export default class index extends Component {
+    state = {
+        codes: {
+            opType: []
+        }
+    }
+    // 表格实例
+    table = React.createRef()
+    // 表格字段
+    columns = [
+        {
+            title: '日志名称',
+            dataIndex: 'name',
+            sorter: true,
+        },
+        {
+            title: '操作类型',
+            dataIndex: 'opType',
+            render: text => (<>{this.bindCodeValue(text, 'op_type')}</>),
+            sorter: true,
+        },
+        {
+            title: '是否成功',
+            dataIndex: 'success',
+            render: text => (<> {text ? '是' : '否'}</>),
+            sorter: true,
+        },
+        {
+            title: 'ip',
+            dataIndex: 'ip',
+            sorter: true,
+        },
+        {
+            title: '请求地址',
+            dataIndex: 'url',
+            sorter: true,
+        },
+        {
+            title: '操作时间',
+            dataIndex: 'opTime',
+            sorter: true,
+        },
+        {
+            title: '操作人',
+            dataIndex: 'account',
+            sorter: true,
+        },
+    ]
+
+    /**
+     * 阻止外部组件引发的渲染,提升性能
+     * 可自行添加渲染条件
+     * [必要]
+     * @param {*} props 
+     * @param {*} state 
+     * @returns 
+     */
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
+    }
+
+    /**
+     * 加载字典数据,之后开始加载表格数据
+     * 如果必须要加载字典数据,可直接对表格设置autoLoad=true
+     */
+    componentDidMount() {
+        this.table.current.onLoading()
+        getDicData('op_type').then(res => {
+            this.setState({
+                codes: res
+            }, () => {
+                this.table.current.onLoadData()
+            })
+        })
+    }
+
+    /**
+     * 调用加载数据接口,可在调用前对query进行处理
+     * [异步,必要]
+     * @param {*} params 
+     * @param {*} query 
+     * @returns 
+     */
+    loadData = async (params, query) => {
+        // if (query.dates && query.dates.length) {
+        //     query.searchBeginTime = moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss');
+        //     query.searchEndTime = moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss');
+        //     delete query.dates;
+        // }
+        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 {*} action 
+     * @param {*} successMessage 
+     */
+    async onAction(action, successMessage) {
+        this.table.current.onLoading()
+        try {
+            await action
+            Message.success(successMessage)
+            this.table.current.onReloadData()
+        } catch {
+            this.table.current.onLoaded()
+        }
+    }
+
+    onOpLogClear() {
+        this.onAction(
+            apiAction.delete(),
+            '清空成功'
+        )
+    }
+
+    render() {
+        return (
+            <Container mode="fluid">
+                <br />
+                <Alert closable type="error" message={
+                    <>
+                        <div>后端bug:任何操作的操作类型都是增加</div>
+                        <div>没有记录请求参数.返回结果等信息</div>
+                    </>
+                } />
+                <br />
+                <Card bordered={false}>
+                    <QueryTable
+                        ref={this.table}
+                        autoLoad={false}
+                        loadData={this.loadData}
+                        columns={this.columns}
+                        query={
+                            <Auth auth="sysOpLog:page">
+                                <Form.Item label="日志名称" name="name">
+                                    <Input autoComplete="off" placeholder="请输入日志名称" />
+                                </Form.Item>
+                                <Form.Item label="操作类型" name="opType">
+                                    <Select placeholder="请选择操作类型">
+                                        {
+                                            this.state.codes.opType.map(item => {
+                                                return <Select.Option
+                                                    key={item.code}
+                                                    value={+item.code}
+                                                >{item.value}</Select.Option>
+                                            })
+                                        }
+                                    </Select>
+                                </Form.Item>
+                                <Form.Item label="操作类型" name="success">
+                                    <Select placeholder="请选择是否成功" style={{ width: '170px' }}>
+                                        <Select.Option
+                                            key='true'
+                                        >
+                                            是</Select.Option>
+                                        <Select.Option
+                                            key='false'
+                                        >
+                                            否</Select.Option>
+                                    </Select>
+                                </Form.Item>
+                            </Auth>
+                        }
+                        operator={
+                            <Auth auth="sysOpLog:delete">
+                                <Popconfirm
+                                    placement="bottomLeft"
+                                    title="是否确认清空日志"
+                                    onConfirm={() => this.onOpLogClear()}
+                                >
+                                    <Button>清空日志</Button>
+                                </Popconfirm>
+                            </Auth>
+                        }
+                        expandable={{
+                            expandedRowRender: record =>
+                                <Descriptions bordered size="small">
+                                    <Descriptions.Item span="1" label="方法名称">
+                                        {record.methodName}
+                                    </Descriptions.Item>
+                                    <Descriptions.Item span="2" label="地址">
+                                        {record.location}
+                                    </Descriptions.Item>
+                                    <Descriptions.Item label="浏览器">
+                                        {record.browser}
+                                    </Descriptions.Item>
+                                    <Descriptions.Item span="2" label="操作系统">
+                                        {record.os}
+                                    </Descriptions.Item>
+                                    <Descriptions.Item span="3" label="类名称">
+                                        {record.className}
+                                    </Descriptions.Item>
+                                    <Descriptions.Item span="3" label="返回结果">
+                                        {record.result}
+                                    </Descriptions.Item>
+                                    <Descriptions.Item span="3" label="请求参数">
+                                        {record.param}
+                                    </Descriptions.Item>
+                                    <Descriptions.Item span="3" label="具体消息">
+                                        {record.message}
+                                    </Descriptions.Item>
+                                </Descriptions>
+                        }}
+
+                    />
+                </Card>
+            </Container>
+        )
+    }
+}

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

@@ -0,0 +1,101 @@
+import React, { Component } from 'react'
+import { Form, Input, InputNumber, Spin } from 'antd'
+import { AntIcon, IconSelector } from 'components'
+import { cloneDeep } from 'lodash'
+
+const initialValues = {
+    sort: 100
+}
+
+export default class form extends Component {
+    state = {
+        // 加载状态
+        loading: true,
+    }
+
+    // 表单实例
+    form = React.createRef()
+
+    iconSelector = 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
+        }
+    }
+
+    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">
+                        <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="sort">
+                            <InputNumber
+                                max={1000}
+                                min={0}
+                                placeholder="请输入排序"
+                                className="w-100-p"
+                            />
+                        </Form.Item>
+                        <Form.Item label="备注" name="remark">
+                            <Input.TextArea autoComplete="off" placeholder="请输入备注" rows="4" >
+                            </Input.TextArea>
+                        </Form.Item>
+                    </div>
+                </Spin>
+            </Form>
+        )
+    }
+}

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

@@ -0,0 +1,201 @@
+import React, { Component } from 'react'
+import { Button, Card, Form, Input, Popconfirm, message as Message } from 'antd'
+import { isEqual } from 'lodash'
+import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions } from 'components'
+import { api } from "common/api"
+import auth from 'components/authorized/handler'
+import FormBody from './form'
+
+
+// 配置页面所需接口函数
+const apiAction = {
+    page: api.sysPosPage,
+    add: api.sysPosAdd,
+    edit: api.sysPosEdit,
+    delete: api.sysPosDelete
+}
+
+// 用于弹窗标题
+const name = '职位'
+
+export default class index extends Component {
+
+    // 表格实例
+    table = React.createRef()
+
+    // 新增窗口实例
+    addForm = React.createRef()
+    // 编辑窗口实例
+    editForm = React.createRef()
+
+    columns = [
+        {
+            title: '职位名称',
+            dataIndex: 'name',
+            sorter: true,
+        },
+        {
+            title: '唯一编码',
+            dataIndex: 'code',
+            sorter: true,
+        },
+        {
+            title: '排序',
+            dataIndex: 'sort',
+            sorter: true,
+        },
+        {
+            title: '备注',
+            dataIndex: 'remark',
+            sorter: true,
+        },
+    ]
+
+    /**
+ * 构造函数,在渲染前动态添加操作字段等
+ * @param {*} props 
+ */
+    constructor(props) {
+        super(props)
+
+        const flag = auth({ sysPos: [['edit'], ['delete']] })
+
+        if (flag) {
+            this.columns.push({
+                title: '操作',
+                width: 150,
+                dataIndex: 'actions',
+                render: (text, record) => (<QueryTableActions>
+                    <Auth auth="sysApp:edit">
+                        <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
+                    </Auth>
+                    <Auth auth="sysApp: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)
+    }
+
+    /**
+     * 调用加载数据接口,可在调用前对query进行处理
+     * [异步,必要]
+     * @param {*} params 
+     * @param {*} query 
+     * @returns 
+     */
+    loadData = async (params, query) => {
+        const { data } = await apiAction.page({
+            ...params,
+            ...query,
+        })
+        return data
+    }
+
+    /**
+    * 打开新增/编辑弹窗
+    * @param {*} modal 
+    * @param {*} record 
+    */
+    onOpen(modal, record) {
+        modal.current.open({
+            record
+        })
+    }
+
+    /**
+     * 对表格上的操作进行统一处理
+     * [异步]
+     * @param {*} action 
+     * @param {*} successMessage 
+     */
+    async onAction(action, successMessage) {
+        this.table.current.onLoading()
+        try {
+            await action
+            Message.success(successMessage)
+            this.table.current.onReloadData()
+        } catch {
+            this.table.current.onLoaded()
+        }
+    }
+
+    /**
+     * 删除
+     * @param {*} record 
+     */
+    onDelete(record) {
+        this.onAction(
+            apiAction.delete(record),
+            '删除成功'
+        )
+    }
+
+    render() {
+        return (
+            <Container mode="fluid">
+                <br />
+                <Card bordered={false}>
+                    <QueryTable
+                        ref={this.table}
+                        loadData={this.loadData}
+                        columns={this.columns}
+                        query={
+                            <Auth auth="sysPos: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={
+                            <Button
+                                icon={<AntIcon type="plus" />}
+                                onClick={() => this.onOpen(this.addForm)}
+                            >新增{name}</Button>
+                        }
+                    >
+
+                    </QueryTable>
+                </Card>
+                <ModalForm
+                    title={`新增${name}`}
+                    action={apiAction.add}
+                    ref={this.addForm}
+                    onSuccess={() => this.table.current.onReloadData()}
+                >
+                    <FormBody />
+                </ModalForm>
+
+                <ModalForm
+                    title={`编辑${name}`}
+                    action={apiAction.edit}
+                    ref={this.editForm}
+                    onSuccess={() => this.table.current.onReloadData()}
+                >
+                    <FormBody />
+                </ModalForm>
+            </Container>
+        )
+    }
+}