style: 岗位管理页面排版

src/views/system/post/index.vue

@@ -88,33 +88,39 @@ let tableColumns: ColumnsType = [
   {
     title: t('views.system.post.positionId'),
     dataIndex: 'postId',
-    align: 'center',
+    align: 'left',
+    width: 150,
   },
   {
     title: t('views.system.post.positionName'),
     dataIndex: 'postName',
     align: 'left',
+    width: 200,
   },
   {
     title: t('views.system.post.positionCode'),
     dataIndex: 'postCode',
     align: 'left',
+    width: 200,
   },
   {
     title: t('views.system.post.positionSort'),
     dataIndex: 'postSort',
     align: 'left',
+    width: 150,
   },
   {
     title: t('views.system.post.positionStatus'),
     dataIndex: 'status',
     key: 'status',
     align: 'center',
+    width: 150,
   },
   {
     title: t('views.system.post.createTime'),
     dataIndex: 'createTime',
     align: 'center',
+    width: 150,
     customRender(opt) {
       if (+opt.value <= 0) return '';
       return parseDateToStr(+opt.value);
@@ -123,7 +129,7 @@ let tableColumns: ColumnsType = [
   {
     title: t('common.operate'),
     key: 'postId',
-    align: 'center',
+    align: 'left',
   },
 ];
 
@@ -585,7 +591,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,
@@ -641,7 +647,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
@@ -701,8 +707,17 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-form-item :label="t('views.system.post.positionMark')" name="remark">
-          {{ modalState.from.remark }}
+        <a-form-item
+          :label="t('views.system.post.positionMark')"
+          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>
       <template #footer>
@@ -723,7 +738,12 @@ onMounted(() => {
       @ok="fnModalOk"
       @cancel="fnModalCancel"
     >
-      <a-form name="modalStateFrom" layout="horizontal">
+      <a-form
+        name="modalStateFrom"
+        layout="horizontal"
+        :label-col="{ span: 6 }"
+        :label-wrap="true"
+      >
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
@@ -780,7 +800,12 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-form-item :label="t('views.system.post.positionMark')" name="remark">
+        <a-form-item
+          :label="t('views.system.post.positionMark')"
+          name="remark"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+        >
           <a-textarea
             v-model:value="modalState.from.remark"
             :auto-size="{ minRows: 4, maxRows: 6 }"