update 系统功能列表全部加上列宽

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

@@ -2,24 +2,22 @@ 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 { 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
+    delete: api.sysPosDelete,
 }
 
 // 用于弹窗标题
 const name = '职位'
 
 export default class index extends Component {
-
     // 表格实例
     table = React.createRef()
 
@@ -32,29 +30,34 @@ export default class index extends Component {
         {
             title: '职位名称',
             dataIndex: 'name',
+            width: 400,
             sorter: true,
         },
         {
             title: '唯一编码',
             dataIndex: 'code',
+            width: 400,
             sorter: true,
         },
         {
             title: '排序',
             dataIndex: 'sort',
+            width: 80,
             sorter: true,
+            defaultSortOrder: 'ascend',
         },
         {
             title: '备注',
             dataIndex: 'remark',
+            width: 400,
             sorter: true,
         },
     ]
 
     /**
- * 构造函数,在渲染前动态添加操作字段等
- * @param {*} props 
- */
+     * 构造函数,在渲染前动态添加操作字段等
+     * @param {*} props
+     */
     constructor(props) {
         super(props)
 
@@ -65,20 +68,22 @@ export default class index extends Component {
                 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>)
+                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>
+                ),
             })
         }
     }
@@ -87,9 +92,9 @@ export default class index extends Component {
      * 阻止外部组件引发的渲染,提升性能
      * 可自行添加渲染条件
      * [必要]
-     * @param {*} props 
-     * @param {*} state 
-     * @returns 
+     * @param {*} props
+     * @param {*} state
+     * @returns
      */
     shouldComponentUpdate(props, state) {
         return !isEqual(this.state, state)
@@ -98,9 +103,9 @@ export default class index extends Component {
     /**
      * 调用加载数据接口,可在调用前对query进行处理
      * [异步,必要]
-     * @param {*} params 
-     * @param {*} query 
-     * @returns 
+     * @param {*} params
+     * @param {*} query
+     * @returns
      */
     loadData = async (params, query) => {
         const { data } = await apiAction.page({
@@ -111,21 +116,21 @@ export default class index extends Component {
     }
 
     /**
-    * 打开新增/编辑弹窗
-    * @param {*} modal 
-    * @param {*} record 
-    */
+     * 打开新增/编辑弹窗
+     * @param {*} modal
+     * @param {*} record
+     */
     onOpen(modal, record) {
         modal.current.open({
-            record
+            record,
         })
     }
 
     /**
      * 对表格上的操作进行统一处理
      * [异步]
-     * @param {*} action 
-     * @param {*} successMessage 
+     * @param {*} action
+     * @param {*} successMessage
      */
     async onAction(action, successMessage) {
         this.table.current.onLoading()
@@ -140,13 +145,10 @@ export default class index extends Component {
 
     /**
      * 删除
-     * @param {*} record 
+     * @param {*} record
      */
     onDelete(record) {
-        this.onAction(
-            apiAction.delete(record),
-            '删除成功'
-        )
+        this.onAction(apiAction.delete(record), '删除成功')
     }
 
     render() {
@@ -172,11 +174,11 @@ export default class index extends Component {
                             <Button
                                 icon={<AntIcon type="plus" />}
                                 onClick={() => this.onOpen(this.addForm)}
-                            >新增{name}</Button>
+                            >
+                                新增{name}
+                            </Button>
                         }
-                    >
-
-                    </QueryTable>
+                    ></QueryTable>
                 </Card>
                 <ModalForm
                     title={`新增${name}`}
@@ -198,4 +200,4 @@ export default class index extends Component {
             </Container>
         )
     }
-}
+}