Explorar el Código

feat: 调整表格列标题内容居中显示

lanjianrong hace 3 años
padre
commit
79b28883ec

+ 12 - 10
src/pages/Institutions/Company/List/index.tsx

@@ -86,8 +86,7 @@ const CompanyList: React.FC<ListProps> = ({ base, dispatch, pTypeList }) => {
               managerID: record.manager.ID
             })
           }
-          className="text-primary cursor-pointer"
-        >
+          className="text-primary cursor-pointer">
           {name}
         </span>
       )
@@ -104,13 +103,15 @@ const CompanyList: React.FC<ListProps> = ({ base, dispatch, pTypeList }) => {
       renderText: (text, record) => `${text}/${record.memberTotal}`
       width: 96
       width: 96,
-      align: 'center'
+      align: 'center',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } })
     },
     {
       dataIndex: 'createdTime',
       title: '创建时间',
       width: 106,
       align: 'center',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
       renderText: text => dayjs(text).format('YYYY-MM-DD')
     },
     // {
@@ -131,13 +132,15 @@ const CompanyList: React.FC<ListProps> = ({ base, dispatch, pTypeList }) => {
       dataIndex: 'created',
       title: '创建人',
       width: 116,
-      align: 'center'
+      align: 'center',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } })
     },
     {
       title: '操作',
       dataIndex: 'operation',
       width: 61,
       align: 'center',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
       render: (_, record) => (
         <div className="divide-x divide-bg-gray-400 flex flex-row justify-center">
           <div
@@ -149,8 +152,7 @@ const CompanyList: React.FC<ListProps> = ({ base, dispatch, pTypeList }) => {
                 currentModalType: ModalType.UPDATE,
                 defaultFormData: record
               })
-            }}
-          >
+            }}>
             编辑
           </div>
           {/* <Popconfirm
@@ -195,8 +197,9 @@ const CompanyList: React.FC<ListProps> = ({ base, dispatch, pTypeList }) => {
           actions: [
             <Button
               type="primary"
-              onClick={() => setState({ ...state, visible: true, currentModalType: ModalType.ADD })}
-            >
+              onClick={() =>
+                setState({ ...state, visible: true, currentModalType: ModalType.ADD })
+              }>
               新建企事业单位
             </Button>
           ]
@@ -206,8 +209,7 @@ const CompanyList: React.FC<ListProps> = ({ base, dispatch, pTypeList }) => {
       <AnimateContent
         title={state.currentModalType === ModalType.ADD ? '新增企事业单位' : '编辑企事业单位'}
         visible={state.visible}
-        onVisibleChange={visible => setState({ ...state, visible })}
-      >
+        onVisibleChange={visible => setState({ ...state, visible })}>
         <CompanyDrawer
           type={state.currentModalType}
           defaultFormData={state.defaultFormData}

+ 11 - 1
src/pages/Institutions/Staff/index.tsx

@@ -62,6 +62,7 @@ const CompanyList: React.FC<ListProps> = ({ schema, dispatch, accountTypeList })
       title: '账号',
       width: 116,
       align: 'center',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
       render: (name, record) => (
         <div
           className="text-primary cursor-pointer hover:text-hex-967bbd"
@@ -88,7 +89,8 @@ const CompanyList: React.FC<ListProps> = ({ schema, dispatch, accountTypeList })
       key: 'name',
       title: '名称',
       width: 86,
-      align: 'center'
+      align: 'center',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } })
     },
     {
       dataIndex: 'enable',
@@ -98,6 +100,7 @@ const CompanyList: React.FC<ListProps> = ({ schema, dispatch, accountTypeList })
       align: 'center',
       filters: true,
       filterMultiple: false,
+      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
       valueEnum: {
         true: { text: '启用', status: 'Success' },
         false: { text: '禁用', status: 'Error' }
@@ -109,6 +112,7 @@ const CompanyList: React.FC<ListProps> = ({ schema, dispatch, accountTypeList })
       title: '性别',
       width: 56,
       align: 'center',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
       render: (_, { gender }) => {
         return <span>{genderEum[gender]}</span>
       }
@@ -119,6 +123,7 @@ const CompanyList: React.FC<ListProps> = ({ schema, dispatch, accountTypeList })
       title: '组织架构',
       width: 146,
       align: 'center',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
       renderText: (_, record) => record.organizationalStructure?.name
     },
     {
@@ -127,6 +132,7 @@ const CompanyList: React.FC<ListProps> = ({ schema, dispatch, accountTypeList })
       title: '所属企事业单位',
       width: 286,
       align: 'center',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
       renderText: (_, record) => record.institution.name
     },
     {
@@ -135,6 +141,7 @@ const CompanyList: React.FC<ListProps> = ({ schema, dispatch, accountTypeList })
       width: 106,
       align: 'center',
       title: '创建时间',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
       renderText: text => dayjs(text).format('YYYY-MM-DD')
     },
     {
@@ -143,6 +150,7 @@ const CompanyList: React.FC<ListProps> = ({ schema, dispatch, accountTypeList })
       title: '创建者',
       width: 116,
       align: 'center',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
       renderText: (_, record) => record?.created?.name
     },
     {
@@ -153,6 +161,7 @@ const CompanyList: React.FC<ListProps> = ({ schema, dispatch, accountTypeList })
       align: 'center',
       filters: true,
       filterMultiple: false,
+      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
       valueEnum: accountTypeList.reduce((prev, curr) => {
         const items = { ...prev }
         items[curr.value] = {
@@ -166,6 +175,7 @@ const CompanyList: React.FC<ListProps> = ({ schema, dispatch, accountTypeList })
       dataIndex: 'operation',
       width: 61,
       align: 'center',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
       render: (_, record) => (
         <div className="divide-x divide-bg-gray-400 flex flex-row justify-center">
           <div

+ 9 - 10
src/pages/Project/Created/index.tsx

@@ -50,13 +50,15 @@ const Created = () => {
       dataIndex: 'account',
       title: '账号',
       width: 116,
-      align: 'center'
+      align: 'center',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } })
     },
     {
       dataIndex: 'name',
       title: '名称',
       width: 86,
-      align: 'center'
+      align: 'center',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } })
     },
     {
       dataIndex: 'institutionID',
@@ -70,6 +72,7 @@ const Created = () => {
       title: '组织架构',
       width: 146,
       align: 'center',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
       renderText: (_, record) => record?.organizationalStructure?.name
     },
     {
@@ -87,8 +90,7 @@ const Created = () => {
               modalType: CreatedModalType.DEL,
               modalVisible: true
             })
-          }
-        >
+          }>
           <DeleteOutlined />
         </div>
       )
@@ -130,8 +132,7 @@ const Created = () => {
               type="primary"
               onClick={() =>
                 setState({ ...state, modalVisible: true, modalType: CreatedModalType.ADD })
-              }
-            >
+              }>
               添加创建人
             </Button>
           ]
@@ -160,16 +161,14 @@ const Created = () => {
         }}
         isKeyPressSubmit
         visible={state.modalVisible}
-        onVisibleChange={visible => setState({ ...state, modalVisible: visible })}
-      >
+        onVisibleChange={visible => setState({ ...state, modalVisible: visible })}>
         {state.modalType === CreatedModalType.ADD ? (
           <>
             {/* <p className="mb-4">创建人可在前台创建项目、上传项目数据、编制项目等</p> */}
             <Form.Item
               name="ID"
               label="创建人可在前台创建项目、上传项目数据、编制项目等"
-              rules={[{ required: true, message: '请选择创建人' }]}
-            >
+              rules={[{ required: true, message: '请选择创建人' }]}>
               <TreeNodeSelect params={{ isCreated: 0 }} />
             </Form.Item>
             {/* <ProFormSelect

+ 4 - 0
src/pages/Project/Management/List/index.tsx

@@ -90,6 +90,7 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
       title: '创建时间',
       width: 116,
       align: 'center',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
       renderText: text => dayjs(text).format('YYYY-MM-DD')
     },
     {
@@ -99,6 +100,8 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
       align: 'center',
       filters: true,
       filterMultiple: false,
+      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
+      render: (_, record) => <div>{record.projectType.name}</div>,
       valueEnum: pTypeList.reduce((prev, curr) => {
         const items = { ...prev }
         items[curr.value] = {
@@ -177,6 +180,7 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
     <PageContainer title={false}>
       <ProTable<API.ProjectListItem>
         rowKey="ID"
+        bordered
         params={state.params}
         actionRef={tRef}
         scroll={{ y: document.body.clientHeight - 313 }}

+ 10 - 13
src/pages/Project/Verification/index.tsx

@@ -46,7 +46,8 @@ const FlowList = () => {
   const columns = [
     {
       dataIndex: 'name',
-      title: '名称'
+      title: '名称',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } })
     },
     // {
     //   dataIndex: ''
@@ -54,6 +55,8 @@ const FlowList = () => {
     {
       dataIndex: 'opreate',
       title: '操作',
+      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
+      align: 'center',
       render: (_, record) => (
         <div className="divide-x divide-bg-gray-400 ">
           <span
@@ -61,8 +64,7 @@ const FlowList = () => {
             onClick={() => {
               setState({ ...state, modalType: 'update', modalVisible: true })
               formRef.current?.setFieldsValue({ ID: record.ID, name: record.name })
-            }}
-          >
+            }}>
             编辑
           </span>
           <span
@@ -78,16 +80,14 @@ const FlowList = () => {
                   flowProcessData: record.flowProcessData
                 }
               })
-            }}
-          >
+            }}>
             设置审批人
           </span>
           <Popconfirm
             title={`确认删除${record.name}吗?`}
             okText="确认"
             cancelText="取消"
-            onConfirm={() => tryDel({ ID: record.ID })}
-          >
+            onConfirm={() => tryDel({ ID: record.ID })}>
             <span className="text-hex-F5222D pl-2 cursor-pointer hover:text-hex-967bbd">删除</span>
           </Popconfirm>
         </div>
@@ -122,8 +122,7 @@ const FlowList = () => {
             <Button
               type="primary"
               onClick={() => setState({ ...state, modalType: 'add', modalVisible: true })}
-              key="add_flow_btn"
-            >
+              key="add_flow_btn">
               新建流程
             </Button>
           ]
@@ -132,8 +131,7 @@ const FlowList = () => {
       <AnimateContent
         title={state.current.name}
         visible={state.visible}
-        onVisibleChange={visible => setState({ ...state, visible })}
-      >
+        onVisibleChange={visible => setState({ ...state, visible })}>
         <ApprovalDetail
           data={state.current}
           onVisibleChange={visible => setState({ ...state, visible })}
@@ -157,8 +155,7 @@ const FlowList = () => {
             message.error(error)
             return false
           }
-        }}
-      >
+        }}>
         <ProFormText name="ID" label="名称" hidden />
         <ProFormText name="name" label="名称" />
       </ModalForm>