style: 角色管理页面排版

src/views/system/role/index.vue

@@ -110,33 +110,39 @@ let tableColumns: ColumnsType = [
   {
     title: t('views.system.role.roleId'),
     dataIndex: 'roleId',
-    align: 'center',
+    align: 'left',
+    width: 100,
   },
   {
     title: t('views.system.role.roleName'),
     dataIndex: 'roleName',
     align: 'left',
+    width: 200,
   },
   {
     title: t('views.system.role.roleKey'),
     dataIndex: 'roleKey',
     align: 'left',
+    width: 200,
   },
   {
     title: t('views.system.role.roleSort'),
     dataIndex: 'roleSort',
     align: 'left',
+    width: 100,
   },
   {
     title: t('views.system.role.roleStatus'),
     dataIndex: 'status',
     key: 'status',
     align: 'center',
+    width: 100,
   },
   {
     title: t('views.system.role.createTime'),
     dataIndex: 'createTime',
     align: 'center',
+    width: 150,
     customRender(opt) {
       if (+opt.value <= 0) return '';
       return parseDateToStr(+opt.value);
@@ -145,7 +151,7 @@ let tableColumns: ColumnsType = [
   {
     title: t('common.operate'),
     key: 'roleId',
-    align: 'center',
+    align: 'left',
   },
 ];
 
@@ -909,7 +915,7 @@ onMounted(() => {
         :size="tableState.size"
         :row-class-name="fnTableStriped"
         :pagination="tablePagination"
-        :scroll="{ x: true }"
+        :scroll="{ x: tableColumns.length * 120 }"
         :row-selection="{
           type: 'checkbox',
           selectedRowKeys: tableState.selectedRowKeys,
@@ -920,13 +926,15 @@ onMounted(() => {
           <template v-if="column.key === 'status'">
             <a-switch
               v-if="
-                record.roleId !== '1' && hasPermissions(['system:role:edit'])
+                dict.sysNormalDisable.length > 0 &&
+                record.roleId !== '1' &&
+                hasPermissions(['system:role:edit'])
               "
               v-model:checked="record.status"
               checked-value="1"
-              :checked-children="t('views.system.role.normal')"
+              :checked-children="dict.sysNormalDisable[0].label"
               un-checked-value="0"
-              :un-checked-children="t('views.system.role.stop')"
+              :un-checked-children="dict.sysNormalDisable[1].label"
               size="small"
               @change="fnRecordStatus(record)"
             />
@@ -968,7 +976,7 @@ onMounted(() => {
                   <template #icon><DeleteOutlined /></template>
                 </a-button>
               </a-tooltip>
-              <a-tooltip v-if="record.roleId !== '1'">
+              <a-tooltip placement="topRight" v-if="record.roleId !== '1'">
                 <template #title>{{
                   t('views.system.role.distribute')
                 }}</template>
@@ -980,7 +988,7 @@ onMounted(() => {
                   <template #icon><SecurityScanOutlined /></template>
                 </a-button>
               </a-tooltip>
-              <a-tooltip v-if="record.roleId !== '1'">
+              <a-tooltip placement="topRight" v-if="record.roleId !== '1'">
                 <template #title>{{
                   t('views.system.role.distributeUser')
                 }}</template>
@@ -1005,7 +1013,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.role.roleId')" name="roleId">
@@ -1056,13 +1064,24 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-form-item :label="t('views.system.role.roleMark')" name="remark">
+        <a-form-item
-          {{ modalState.from.remark }}
+          :label="t('views.system.role.roleMark')"
+          name="remark"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+        >
+          <a-textarea
+            v-model:value="modalState.from.remark"
+            :auto-size="{ minRows: 2, maxRows: 6 }"
+            :disabled="true"
+          />
         </a-form-item>
 
         <a-form-item
           :label="t('views.system.role.menu')"
           name="menuCheckStrictly"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
         >
           <a-tree
             disabled
@@ -1097,7 +1116,12 @@ onMounted(() => {
       @ok="fnModalOk"
       @cancel="fnModalCancel"
     >
-      <a-form name="modalStateFromByEdit" layout="horizontal">
+      <a-form
+        name="modalStateFromByEdit"
+        layout="horizontal"
+        :label-col="{ span: 6 }"
+        :label-wrap="true"
+      >
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
@@ -1162,7 +1186,12 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-form-item :label="t('views.system.role.roleMark')" name="remark">
+        <a-form-item
+          :label="t('views.system.role.roleMark')"
+          name="remark"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+        >
           <a-textarea
             v-model:value="modalState.from.remark"
             :auto-size="{ minRows: 4, maxRows: 6 }"
@@ -1174,6 +1203,8 @@ onMounted(() => {
         <a-form-item
           :label="t('views.system.role.menu')"
           name="menuCheckStrictly"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
         >
           <a-space :size="12" align="center">
             <a-checkbox
@@ -1228,7 +1259,12 @@ onMounted(() => {
       @ok="fnModalOkDataScope"
       @cancel="fnModalCancel"
     >
-      <a-form name="modalStateFromByDataScope" layout="horizontal">
+      <a-form
+        name="modalStateFromByDataScope"
+        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.role.roleId')" name="roleId">
@@ -1282,11 +1318,25 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-form-item :label="t('views.system.role.roleMark')" name="remark">
+        <a-form-item
-          {{ modalState.from.remark }}
+          :label="t('views.system.role.roleMark')"
+          name="remark"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+        >
+          <a-textarea
+            v-model:value="modalState.from.remark"
+            :auto-size="{ minRows: 2, maxRows: 6 }"
+            :disabled="true"
+          />
         </a-form-item>
 
-        <a-form-item :label="t('views.system.role.preScope')" name="dataScope">
+        <a-form-item
+          :label="t('views.system.role.preScope')"
+          name="dataScope"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+        >
           <a-select
             v-model:value="modalState.from.dataScope"
             default-value="5"
@@ -1297,6 +1347,8 @@ onMounted(() => {
         <a-form-item
           :label="t('views.system.role.dataPer')"
           name="deptCheckStrictly"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
           v-show="modalState.from.dataScope === '2'"
         >
           <a-space :size="12" align="center">