refactor:优化系统配置加载

2025-10-24 18:57:11 +08:00 · 2024-06-02 10:55:06 +08:00
parent 66f89b44d8
commit 1d8c9705e9
4 changed files with 255 additions and 274 deletions
--- a/src/views/system/config/components/BasicSetting.vue
+++ b/src/views/system/config/components/BasicSetting.vue
@@ -1,7 +1,6 @@
 <template>
-  <a-form ref="formRef" :model="form" :rules="rules" size="large" layout="vertical" :disabled="!isUpdate">
-    <a-list class="list-layout" :bordered="false">
-      <a-list-item>
+  <a-form ref="formRef" :model="form" :rules="rules" size="large" layout="vertical" :disabled="!isUpdate" class="form">
+    <a-list class="list-layout" :bordered="false" :loading="loading">
      <a-form-item class="image-item" field="SITE_FAVICON" hide-label>
        {{ siteConfig.SITE_FAVICON.name }}
        <template #extra>
@@ -29,8 +28,6 @@
          </a-upload>
        </template>
      </a-form-item>
-      </a-list-item>
-      <a-list-item>
      <a-form-item class="image-item" field="SITE_LOGO" hide-label>
        {{ siteConfig.SITE_LOGO.name }}
        <template #extra>
@@ -57,8 +54,6 @@
          </a-upload>
        </template>
      </a-form-item>
-      </a-list-item>
-      <a-list-item style="padding-top: 13px; border: none">
      <a-form-item class="input-item" field="SITE_TITLE" :label="siteConfig.SITE_TITLE.name">
        <a-input v-model.trim="form.SITE_TITLE" placeholder="请输入网站标题" :max-length="18" />
      </a-form-item>
@@ -94,7 +89,6 @@
          </a-button>
        </a-space>
      </div>
-      </a-list-item>
    </a-list>
  </a-form>
 </template>
@@ -114,6 +108,7 @@ import { useForm } from '@/hooks'

 defineOptions({ name: 'BasicSetting' })

+const loading = ref<boolean>(false)
 const formRef = ref<FormInstance>()
 const { form } = useForm({
  SITE_FAVICON: '',
@@ -162,12 +157,14 @@ const queryForm = reactive({
 })
 // 查询列表数据
 const getDataList = async () => {
+  loading.value = true
  const { data } = await listOption(queryForm)
  siteConfig.value = data.reduce((obj: SiteConfig, option: OptionResp) => {
    obj[option.code] = { ...option }
    return obj
  }, {})
  handleCancel()
+  loading.value = false
 }

 const appStore = useAppStore()
@@ -268,6 +265,10 @@ onMounted(() => {
 </script>

 <style lang="scss" scoped>
+.form {
+  margin: 20px 0 0 20px;
+}
+
 .logo {
  width: 33px;
  height: 33px;
--- a/src/views/system/config/components/MailSetting.vue
+++ b/src/views/system/config/components/MailSetting.vue
@@ -1,16 +1,8 @@
 <template>
  <a-space wrap :size="30">
-    <a-form
-      ref="formRef"
-      :model="form"
-      :rules="rules"
-      auto-label-width
-      label-align="left"
-      :layout="width >= 500 ? 'horizontal' : 'vertical' "
-      :disabled="!isUpdate"
-      scroll-to-first-error
-      class="form"
-    >
+    <a-form ref="formRef" :model="form" :rules="rules" auto-label-width label-align="left"
+      :layout="width >= 500 ? 'horizontal' : 'vertical'" :disabled="!isUpdate" scroll-to-first-error class="form">
+      <a-list :bordered="false" :loading="loading">
        <a-form-item field="MAIL_PROTOCOL" :label="mailConfig.MAIL_PROTOCOL.name" hide-asterisk>
          <a-select v-model.trim="form.MAIL_PROTOCOL">
            <a-option label="SMTP" value="smtp" />
@@ -34,7 +26,8 @@
            <a-radio value="0">禁用</a-radio>
          </a-radio-group>
        </a-form-item>
-      <a-form-item v-if="form.MAIL_SSL_ENABLED === '1'" field="MAIL_SSL_PORT" :label="mailConfig.MAIL_SSL_PORT.name" hide-asterisk>
+        <a-form-item v-if="form.MAIL_SSL_ENABLED === '1'" field="MAIL_SSL_PORT" :label="mailConfig.MAIL_SSL_PORT.name"
+          hide-asterisk>
          <a-input-number v-model="form.MAIL_SSL_PORT" :min="0" />
        </a-form-item>
        <a-space>
@@ -54,6 +47,7 @@
            <template #icon><icon-undo /></template>取消
          </a-button>
        </a-space>
+      </a-list>
    </a-form>
  </a-space>
 </template>
@@ -72,7 +66,7 @@ import { useForm } from '@/hooks'

 defineOptions({ name: 'MailSetting' })
 const { width } = useWindowSize()
-
+const loading = ref<boolean>(false)
 const formRef = ref<FormInstance>()
 const { form } = useForm({
  MAIL_PROTOCOL: '',
@@ -130,12 +124,14 @@ const queryForm = {
 }
 // 查询列表数据
 const getDataList = async () => {
+  loading.value = true
  const { data } = await listOption(queryForm)
  mailConfig.value = data.reduce((obj: MailConfig, option: OptionResp) => {
    obj[option.code] = { ...option, value: ['MAIL_PORT', 'MAIL_SSL_PORT'].includes(option.code) ? Number.parseInt(option.value) : option.value }
    return obj
  }, {})
  handleCancel()
+  loading.value = false
 }

 // 保存
--- a/src/views/system/config/components/SecuritySetting.vue
+++ b/src/views/system/config/components/SecuritySetting.vue
@@ -1,16 +1,8 @@
 <template>
  <a-space wrap :size="30">
-    <a-form
-      ref="formRef"
-      :model="form"
-      :rules="rules"
-      auto-label-width
-      label-align="left"
-      :layout="width >= 500 ? 'horizontal' : 'vertical'"
-      :disabled="!isUpdate"
-      scroll-to-first-error
-      class="form"
-    >
+    <a-form ref="formRef" :model="form" :rules="rules" auto-label-width label-align="left"
+      :layout="width >= 500 ? 'horizontal' : 'vertical'" :disabled="!isUpdate" scroll-to-first-error class="form">
+      <a-list :bordered="false" :loading="loading">
        <a-form-item field="PASSWORD_ERROR_LOCK_COUNT" :label="securityConfig.PASSWORD_ERROR_LOCK_COUNT.name"
          :help="securityConfig.PASSWORD_ERROR_LOCK_COUNT.description" hide-asterisk>
          <a-input-number v-model="form.PASSWORD_ERROR_LOCK_COUNT" class="input-width" :default-value="0" :precision="0"
@@ -50,13 +42,15 @@
          :help="securityConfig.PASSWORD_MIN_LENGTH.description" hide-asterisk>
          <a-input-number v-model="form.PASSWORD_MIN_LENGTH" class="input-width" :precision="0" :min="8" :max="32" />
        </a-form-item>
-      <a-form-item field="PASSWORD_ALLOW_CONTAIN_USERNAME" :label="securityConfig.PASSWORD_ALLOW_CONTAIN_USERNAME.name">
+        <a-form-item field="PASSWORD_ALLOW_CONTAIN_USERNAME"
+          :label="securityConfig.PASSWORD_ALLOW_CONTAIN_USERNAME.name">
          <a-switch v-model="form.PASSWORD_ALLOW_CONTAIN_USERNAME" type="round" :checked-value="1" :unchecked-value="0">
            <template #checked>是</template>
            <template #unchecked>否</template>
          </a-switch>
        </a-form-item>
-      <a-form-item field="PASSWORD_CONTAIN_SPECIAL_CHARACTERS" :label="securityConfig.PASSWORD_CONTAIN_SPECIAL_CHARACTERS.name">
+        <a-form-item field="PASSWORD_CONTAIN_SPECIAL_CHARACTERS"
+          :label="securityConfig.PASSWORD_CONTAIN_SPECIAL_CHARACTERS.name">
          <a-switch v-model="form.PASSWORD_CONTAIN_SPECIAL_CHARACTERS" type="round" :checked-value="1"
            :unchecked-value="0">
            <template #checked>是</template>
@@ -80,6 +74,7 @@
            <template #icon><icon-undo /></template>取消
          </a-button>
        </a-space>
+      </a-list>
    </a-form>
  </a-space>
 </template>
@@ -93,6 +88,7 @@ import { useForm } from '@/hooks'
 defineOptions({ name: 'SecuritySetting' })
 const { width } = useWindowSize()

+const loading = ref<boolean>(false)
 const formRef = ref<FormInstance>()
 const { form } = useForm({
  PASSWORD_ERROR_LOCK_COUNT: 0,
@@ -164,12 +160,14 @@ const queryForm = {
 }
 // 查询列表数据
 const getDataList = async () => {
+  loading.value = true
  const { data } = await listOption(queryForm)
  securityConfig.value = data.reduce((obj: SecurityConfig, option: OptionResp) => {
    obj[option.code] = { ...option, value: Number.parseInt(option.value) }
    return obj
  }, {})
  handleCancel()
+  loading.value = false
 }

 // 保存
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -12,29 +12,15 @@
        <DeptTree placeholder="请输入关键词" @node-click="handleSelectDept" />
      </a-col>
      <a-col :xs="24" :sm="16" :md="17" :lg="18" :xl="19" :xxl="20" flex="1" class="h-full ov-hidden">
-        <GiTable
-          row-key="id"
-          :data="dataList"
-          :columns="columns"
-          :loading="loading"
-          :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
-          :pagination="pagination"
-          :disabled-tools="['size']"
-          :disabled-column-keys="['username']"
-          @refresh="search"
-        >
+        <GiTable row-key="id" :data="dataList" :columns="columns" :loading="loading"
+          :scroll="{ x: '100%', y: '100%', minWidth: 1500 }" :pagination="pagination" :disabled-tools="['size']"
+          :disabled-column-keys="['username']" @refresh="search">
          <template #custom-left>
            <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
              <template #prefix><icon-search /></template>
            </a-input>
-            <a-select
-              v-model="queryForm.status"
-              :options="DisEnableStatusList"
-              placeholder="请选择状态"
-              allow-clear
-              style="width: 150px"
-              @change="search"
-            />
+            <a-select v-model="queryForm.status" :options="DisEnableStatusList" placeholder="请选择状态" allow-clear
+              style="width: 150px" @change="search" />
            <a-button @click="reset">重置</a-button>
          </template>
          <template #custom-right>