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">
+        <a-form-item
-          {{ modalState.from.remark }}
+          :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 }"

src/views/system/dict/index.vue

@@ -104,28 +104,32 @@ let tableColumns: ColumnsType = [
   {
     title: t('views.system.dict.dictId'),
     dataIndex: 'dictId',
-    align: 'center',
+    align: 'left',
   },
   {
     title: t('views.system.dict.dictName'),
     dataIndex: 'dictName',
     align: 'left',
+    width: 200,
   },
   {
     title: t('views.system.dict.dictType'),
     dataIndex: 'dictType',
     align: 'left',
+    width: 200,
   },
   {
     title: t('views.system.dict.dictSatus'),
     dataIndex: 'status',
     key: 'status',
     align: 'center',
+    width: 100,
   },
   {
     title: t('views.system.dict.createTime'),
     dataIndex: 'createTime',
     align: 'center',
+    width: 150,
     customRender(opt) {
       if (+opt.value <= 0) return '';
       return parseDateToStr(+opt.value);
@@ -134,7 +138,7 @@ let tableColumns: ColumnsType = [
   {
     title: t('common.operate'),
     key: 'dictId',
-    align: 'center',
+    align: 'left',
   },
 ];
 
@@ -347,7 +351,7 @@ function fnRecordDelete(dictId: string = '0') {
   }
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: t('views.system.dict.dictType', { dictId }),
+    content: t('views.system.dict.delSure', { dictId }),
     onOk() {
       const key = 'delType';
       message.loading({ content: t('common.loading'), key });
@@ -663,7 +667,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,
@@ -731,33 +735,28 @@ onMounted(() => {
       :title="modalState.title"
       @cancel="fnModalCancel"
     >
-      <a-form layout="horizontal">
+      <a-form layout="horizontal" :label-col="{ span: 3 }" :label-wrap="true">
-        <a-row :gutter="16">
+        <a-form-item :label="t('views.system.dict.dictId')" name="dictId">
-          <a-col :lg="12" :md="12" :xs="24">
+          {{ modalState.from.dictId }}
-            <a-form-item :label="t('views.system.dict.dictId')" name="dictId">
+        </a-form-item>
-              {{ modalState.from.dictId }}
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.system.dict.dictSatus')"
-              name="status"
-            >
-              <DictTag
-                :options="dict.sysNormalDisable"
-                :value="modalState.from.status"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
         <a-form-item :label="t('views.system.dict.dictName')" name="dictName">
           {{ modalState.from.dictName }}
         </a-form-item>
         <a-form-item :label="t('views.system.dict.dictType')" name="dictType">
           {{ modalState.from.dictType }}
         </a-form-item>
+        <a-form-item :label="t('views.system.dict.dictSatus')" name="status">
+          <DictTag
+            :options="dict.sysNormalDisable"
+            :value="modalState.from.status"
+          />
+        </a-form-item>
         <a-form-item :label="t('views.system.dict.mark')" name="remark">
-          {{ modalState.from.remark }}
+          <a-textarea
+            v-model:value="modalState.from.remark"
+            :auto-size="{ minRows: 2, maxRows: 6 }"
+            :disabled="true"
+          />
         </a-form-item>
       </a-form>
       <template #footer>
@@ -778,46 +777,40 @@ onMounted(() => {
       @ok="fnModalOk"
       @cancel="fnModalCancel"
     >
-      <a-form name="modalStateFrom" layout="horizontal">
+      <a-form
-        <a-row :gutter="16">
+        name="modalStateFrom"
-          <a-col :lg="18" :md="18" :xs="24">
+        layout="horizontal"
-            <a-form-item
+        :label-col="{ span: 3 }"
-              :label="t('views.system.dict.dictName')"
+        :label-wrap="true"
-              name="dictName"
+      >
-              v-bind="modalStateFrom.validateInfos.dictName"
+        <a-form-item
-            >
+          :label="t('views.system.dict.dictName')"
-              <a-input
+          name="dictName"
-                v-model:value="modalState.from.dictName"
+          v-bind="modalStateFrom.validateInfos.dictName"
-                allow-clear
+        >
-              ></a-input>
+          <a-input
-            </a-form-item>
+            v-model:value="modalState.from.dictName"
-          </a-col>
+            allow-clear
-          <a-col :lg="6" :md="6" :xs="24">
+          ></a-input>
-            <a-form-item
+        </a-form-item>
-              :label="t('views.system.dict.dictSatus')"
+        <a-form-item
-              name="status"
+          :label="t('views.system.dict.dictType')"
-            >
+          name="dictType"
-              <a-select
+          v-bind="modalStateFrom.validateInfos.dictType"
-                v-model:value="modalState.from.status"
+        >
-                default-value="0"
+          <a-input
-                :options="dict.sysNormalDisable"
+            v-model:value="modalState.from.dictType"
-              >
+            allow-clear
-              </a-select>
+          ></a-input>
-            </a-form-item>
+        </a-form-item>
-          </a-col>
+        <a-form-item :label="t('views.system.dict.dictSatus')" name="status">
-          <a-col :lg="18" :md="18" :xs="24">
+          <a-select
-            <a-form-item
+            v-model:value="modalState.from.status"
-              :label="t('views.system.dict.dictType')"
+            default-value="0"
-              name="dictType"
+            :options="dict.sysNormalDisable"
-              v-bind="modalStateFrom.validateInfos.dictType"
+          >
-            >
+          </a-select>
-              <a-input
+        </a-form-item>
-                v-model:value="modalState.from.dictType"
-                allow-clear
-              ></a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
 
         <a-form-item :label="t('views.system.dict.mark')" name="remark">
           <a-textarea