fix: 字典页面排版

src/views/system/dict/data.vue

@@ -148,32 +148,38 @@ let tableColumns: ColumnsType = [
     title: t('views.system.dictData.dictCode'),
     dataIndex: 'dictCode',
     align: 'left',
+    width: 100,
   },
   {
     title: t('views.system.dictData.dictLabel'),
     dataIndex: 'dictLabel',
     align: 'left',
+    width: 200,
   },
   {
     title: t('views.system.dictData.dictValue'),
     dataIndex: 'dictValue',
     align: 'left',
+    width: 200,
   },
   {
     title: t('views.system.dictData.dictSort'),
     dataIndex: 'dictSort',
     align: 'left',
+    width: 100,
   },
   {
     title: t('views.system.dictData.status'),
     dataIndex: 'status',
     key: 'status',
     align: 'left',
+    width: 100,
   },
   {
     title: t('views.system.dictData.createTime'),
     dataIndex: 'createTime',
     align: 'left',
+    width: 150,
     customRender(opt) {
       if (+opt.value <= 0) return '';
       return parseDateToStr(+opt.value);
@@ -182,7 +188,7 @@ let tableColumns: ColumnsType = [
   {
     title: t('common.operate'),
     key: 'dictCode',
-    align: 'center',
+    align: 'left',
   },
 ];
 
@@ -513,14 +519,13 @@ onMounted(() => {
       <!-- 表格搜索栏 -->
       <a-form :model="queryParams" name="queryParams" layout="horizontal">
         <a-row :gutter="16">
-          <a-col :lg="6" :md="12" :xs="24">
+          <a-col :lg="6" :md="12" :xs="24" v-if="dictId !== '0'">
             <a-form-item
               :label="t('views.system.dictData.dictType')"
               name="dictType"
             >
               <a-select
                 v-model:value="queryParams.dictType"
-                :allow-clear="dictId === '0'"
                 :disabled="dictId !== '0'"
                 :placeholder="t('common.selectPlease')"
                 :options="dict.sysDictType"
@@ -672,7 +677,7 @@ onMounted(() => {
         :data-source="tableState.data"
         :size="tableState.size"
         :row-class-name="fnTableStriped"
-        :scroll="{ x: true }"
+        :scroll="{ x: tableColumns.length * 120 }"
         :pagination="tablePagination"
         :row-selection="{
           type: 'checkbox',
@@ -729,7 +734,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
@@ -835,8 +840,17 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-form-item :label="t('views.system.dictData.remark')" name="remark">
-          {{ modalState.from.remark }}
+        <a-form-item
+          :label="t('views.system.dictData.remark')"
+          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>
@@ -857,7 +871,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
@@ -934,6 +953,7 @@ onMounted(() => {
                 type="color"
                 allow-clear
                 :placeholder="t('common.inputPlease')"
+                size="small"
               ></a-input>
             </a-form-item>
           </a-col>
@@ -979,7 +999,12 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-form-item :label="t('views.system.dictData.remark')" name="remark">
+        <a-form-item
+          :label="t('views.system.dictData.remark')"
+          name="remark"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+        >
           <a-textarea
             v-model:value="modalState.from.remark"
             :auto-size="{ minRows: 4, maxRows: 6 }"