style: 用户管理页面排版

src/i18n/locales/en-US.ts

@@ -1243,7 +1243,7 @@ export default {
         userTop:'User profile',
         sex:'User Gender',
         email:'E-mail',
-        fromClass:'DEPARTMENT',
+        fromClass:'Department',
         userWork:'User position',
         userWorkPlease: 'Please select user post',
         userTip:'User Description',

src/views/system/user/index.vue

@@ -120,39 +120,46 @@ let tableColumns: ColumnsType = [
   {
     title: t('views.system.user.userNum'),
     dataIndex: 'userId',
-    align: 'center',
+    align: 'left',
+    width: 120,
   },
   {
     title: t('views.system.user.account'),
     dataIndex: 'userName',
-    align: 'center',
+    align: 'left',
+    width: 150,
   },
   {
     title: t('views.system.user.userName'),
     dataIndex: 'nickName',
-    align: 'center',
+    align: 'left',
+    width: 150,
   },
   {
     title: t('views.system.user.permission'),
     key: 'roles',
     align: 'left',
+    width: 200,
   },
   {
     title: t('views.system.user.className'),
     dataIndex: 'deptId',
     key: 'deptId',
-    align: 'center',
+    align: 'left',
+    width: 200,
   },
   {
     title: t('views.system.user.loginIp'),
     dataIndex: 'loginIp',
     key: 'loginIp',
-    align: 'center',
+    align: 'left',
+    width: 120,
   },
   {
     title: t('views.system.user.loginTime'),
     dataIndex: 'loginDate',
-    align: 'center',
+    align: 'left',
+    width: 150,
     customRender(opt) {
       if (+opt.value <= 0) return '';
       return parseDateToStr(+opt.value);
@@ -162,12 +169,13 @@ let tableColumns: ColumnsType = [
     title: t('views.system.user.status'),
     dataIndex: 'status',
     key: 'status',
-    align: 'center',
+    align: 'left',
+    width: 100,
   },
   {
     title: t('common.operate'),
     key: 'userId',
-    align: 'center',
+    align: 'left',
   },
 ];
 
@@ -991,7 +999,7 @@ onMounted(() => {
         :size="tableState.size"
         :row-class-name="fnTableStriped"
         :pagination="tablePagination"
-        :scroll="{ x: true }"
+        :scroll="{ x: tableColumns.length * 150 }"
         :row-selection="{
           type: 'checkbox',
           selectedRowKeys: tableState.selectedRowKeys,
@@ -1020,9 +1028,9 @@ onMounted(() => {
               v-perms:has="['system:user:edit']"
               v-model:checked="record.status"
               checked-value="1"
-              :checked-children="t('views.system.user.normalcy')"
+              :checked-children="dict.sysNormalDisable[0].label"
               un-checked-value="0"
-              :un-checked-children="t('views.system.user.deactivate')"
+              :un-checked-children="dict.sysNormalDisable[1].label"
               size="small"
               @change="fnRecordStatus(record)"
             />
@@ -1084,7 +1092,7 @@ onMounted(() => {
       :title="modalState.title"
       @cancel="fnModalCancel"
     >
-      <a-form layout="horizontal">
+      <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.user.userNum')" name="userId">
@@ -1130,6 +1138,7 @@ onMounted(() => {
               ></a-avatar>
             </a-form-item>
           </a-col>
+          <a-col :lg="12" :md="12" :xs="24"> </a-col>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.user.account')"
@@ -1138,8 +1147,6 @@ onMounted(() => {
               {{ modalState.from.userName }}
             </a-form-item>
           </a-col>
-        </a-row>
-        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.user.userName')"
@@ -1148,7 +1155,9 @@ onMounted(() => {
               {{ modalState.from.nickName }}
             </a-form-item>
           </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
+        </a-row>
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.user.sex')" name="sex">
               <DictTag
                 :options="dict.sysUserSex"
@@ -1156,7 +1165,7 @@ onMounted(() => {
               />
             </a-form-item>
           </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
+          <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.user.status')" name="status">
               <DictTag
                 :options="dict.sysNormalDisable"
@@ -1182,7 +1191,12 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-form-item :label="t('views.system.user.fromClass')" name="deptId">
+        <a-form-item
+          :label="t('views.system.user.fromClass')"
+          name="deptId"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+        >
           <a-tree-select
             :value="modalState.from.deptId"
             disabled
@@ -1236,7 +1250,12 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-form-item :label="t('views.system.user.userTip')" name="remark">
+        <a-form-item
+          :label="t('views.system.user.userTip')"
+          name="remark"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+        >
           {{ modalState.from.remark }}
         </a-form-item>
       </a-form>