refactor:优化系统配置加载

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-form ref="formRef" :model="form" :rules="rules" size="large" layout="vertical" :disabled="!isUpdate" class="form">
-    <a-list class="list-layout" :bordered="false">
+    <a-list class="list-layout" :bordered="false" :loading="loading">
-      <a-list-item>
       <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;

src/views/system/config/components/MailSetting.vue

@@ -1,16 +1,8 @@
 <template>
   <a-space wrap :size="30">
-    <a-form
+    <a-form ref="formRef" :model="form" :rules="rules" auto-label-width label-align="left"
-      ref="formRef"
+      :layout="width >= 500 ? 'horizontal' : 'vertical'" :disabled="!isUpdate" scroll-to-first-error class="form">
-      :model="form"
+      <a-list :bordered="false" :loading="loading">
-      :rules="rules"
-      auto-label-width
-      label-align="left"
-      :layout="width >= 500 ? 'horizontal' : 'vertical' "
-      :disabled="!isUpdate"
-      scroll-to-first-error
-      class="form"
-    >
         <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
 }
 
 // 保存

src/views/system/config/components/SecuritySetting.vue

@@ -1,16 +1,8 @@
 <template>
   <a-space wrap :size="30">
-    <a-form
+    <a-form ref="formRef" :model="form" :rules="rules" auto-label-width label-align="left"
-      ref="formRef"
+      :layout="width >= 500 ? 'horizontal' : 'vertical'" :disabled="!isUpdate" scroll-to-first-error class="form">
-      :model="form"
+      <a-list :bordered="false" :loading="loading">
-      :rules="rules"
-      auto-label-width
-      label-align="left"
-      :layout="width >= 500 ? 'horizontal' : 'vertical'"
-      :disabled="!isUpdate"
-      scroll-to-first-error
-      class="form"
-    >
         <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
 }
 
 // 保存

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
+        <GiTable row-key="id" :data="dataList" :columns="columns" :loading="loading"
-          row-key="id"
+          :scroll="{ x: '100%', y: '100%', minWidth: 1500 }" :pagination="pagination" :disabled-tools="['size']"
-          :data="dataList"
+          :disabled-column-keys="['username']" @refresh="search">
-          :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
+            <a-select v-model="queryForm.status" :options="DisEnableStatusList" placeholder="请选择状态" allow-clear
-              v-model="queryForm.status"
+              style="width: 150px" @change="search" />
-              :options="DisEnableStatusList"
-              placeholder="请选择状态"
-              allow-clear
-              style="width: 150px"
-              @change="search"
-            />
             <a-button @click="reset">重置</a-button>
           </template>
           <template #custom-right>