mirror of
				https://github.com/continew-org/continew-admin.git
				synced 2025-10-31 10:57:13 +08:00 
			
		
		
		
	优化:优化设置表单控件尺寸大小的写法
This commit is contained in:
		| @@ -7,6 +7,7 @@ | ||||
|       :model="form" | ||||
|       :rules="rules" | ||||
|       layout="vertical" | ||||
|       size="large" | ||||
|       class="login-form" | ||||
|       @submit="handleLogin" | ||||
|     > | ||||
| @@ -15,7 +16,6 @@ | ||||
|           v-model="form.username" | ||||
|           :placeholder="$t('login.form.placeholder.username')" | ||||
|           max-length="50" | ||||
|           size="large" | ||||
|         > | ||||
|           <template #prefix><icon-user /></template> | ||||
|         </a-input> | ||||
| @@ -26,7 +26,6 @@ | ||||
|           :placeholder="$t('login.form.placeholder.password')" | ||||
|           max-length="32" | ||||
|           allow-clear | ||||
|           size="large" | ||||
|         > | ||||
|           <template #prefix><icon-lock /></template> | ||||
|         </a-input-password> | ||||
| @@ -36,12 +35,15 @@ | ||||
|           v-model="form.captcha" | ||||
|           :placeholder="$t('login.form.placeholder.captcha')" | ||||
|           allow-clear | ||||
|           size="large" | ||||
|           style="width: 63%" | ||||
|         > | ||||
|           <template #prefix><icon-check-circle /></template> | ||||
|         </a-input> | ||||
|         <img :src="captchaImgBase64" :alt="$t('login.form.captcha')" @click="getCaptcha"> | ||||
|         <img | ||||
|           :src="captchaImgBase64" | ||||
|           :alt="$t('login.form.captcha')" | ||||
|           @click="getCaptcha" | ||||
|         /> | ||||
|       </a-form-item> | ||||
|       <a-space :size="16" direction="vertical"> | ||||
|         <div class="login-form-remember-me"> | ||||
| @@ -53,7 +55,12 @@ | ||||
|             {{ $t('login.form.rememberMe') }} | ||||
|           </a-checkbox> | ||||
|         </div> | ||||
|         <a-button :loading="loading" type="primary" size="large" long html-type="submit"> | ||||
|         <a-button | ||||
|           :loading="loading" | ||||
|           type="primary" | ||||
|           long | ||||
|           html-type="submit" | ||||
|         > | ||||
|           {{ $t('login.form.login') }} | ||||
|         </a-button> | ||||
|       </a-space> | ||||
| @@ -98,9 +105,15 @@ | ||||
|     // 表单验证规则 | ||||
|     rules: computed((): Record<string, FieldRule[]> => { | ||||
|       return { | ||||
|         username: [{ required: true, message: t('login.form.error.required.username') }], | ||||
|         password: [{ required: true, message: t('login.form.error.required.password') }], | ||||
|         captcha: [{ required: true, message: t('login.form.error.required.captcha') }], | ||||
|         username: [ | ||||
|           { required: true, message: t('login.form.error.required.username') }, | ||||
|         ], | ||||
|         password: [ | ||||
|           { required: true, message: t('login.form.error.required.password') }, | ||||
|         ], | ||||
|         captcha: [ | ||||
|           { required: true, message: t('login.form.error.required.captcha') }, | ||||
|         ], | ||||
|       }; | ||||
|     }), | ||||
|   }); | ||||
| @@ -123,35 +136,42 @@ | ||||
|    * @param errors 表单验证错误 | ||||
|    * @param values 表单数据 | ||||
|    */ | ||||
|   const handleLogin = ({ errors, values, }: { | ||||
|   const handleLogin = ({ | ||||
|     errors, | ||||
|     values, | ||||
|   }: { | ||||
|     errors: Record<string, ValidatedError> | undefined; | ||||
|     values: Record<string, any>; | ||||
|   }) => { | ||||
|     if (loading.value) return; | ||||
|     if (!errors) { | ||||
|       loading.value = true; | ||||
|       loginStore.login({ | ||||
|         username: values.username, | ||||
|         password: encryptByRsa(values.password) || '', | ||||
|         captcha: values.captcha, | ||||
|         uuid: values.uuid | ||||
|       }).then(() => { | ||||
|         const { redirect, ...othersQuery } = router.currentRoute.value.query; | ||||
|         router.push({ | ||||
|           name: (redirect as string) || 'Workplace', | ||||
|           query: { | ||||
|             ...othersQuery, | ||||
|           }, | ||||
|       loginStore | ||||
|         .login({ | ||||
|           username: values.username, | ||||
|           password: encryptByRsa(values.password) || '', | ||||
|           captcha: values.captcha, | ||||
|           uuid: values.uuid, | ||||
|         }) | ||||
|         .then(() => { | ||||
|           const { redirect, ...othersQuery } = router.currentRoute.value.query; | ||||
|           router.push({ | ||||
|             name: (redirect as string) || 'Workplace', | ||||
|             query: { | ||||
|               ...othersQuery, | ||||
|             }, | ||||
|           }); | ||||
|           const { rememberMe } = loginConfig.value; | ||||
|           const { username } = values; | ||||
|           loginConfig.value.username = rememberMe ? username : ''; | ||||
|           proxy.$message.success(t('login.form.login.success')); | ||||
|         }) | ||||
|         .catch(() => { | ||||
|           getCaptcha(); | ||||
|         }) | ||||
|         .finally(() => { | ||||
|           loading.value = false; | ||||
|         }); | ||||
|         const { rememberMe } = loginConfig.value; | ||||
|         const { username } = values; | ||||
|         loginConfig.value.username = rememberMe ? username : ''; | ||||
|         proxy.$message.success(t('login.form.login.success')); | ||||
|       }).catch(() => { | ||||
|         getCaptcha(); | ||||
|       }).finally(() => { | ||||
|         loading.value = false; | ||||
|       }); | ||||
|     } | ||||
|   }; | ||||
|  | ||||
|   | ||||
| @@ -12,7 +12,7 @@ | ||||
|                 v-model="queryParams.description" | ||||
|                 placeholder="输入操作内容搜索" | ||||
|                 allow-clear | ||||
|                 style="width: 150px;" | ||||
|                 style="width: 150px" | ||||
|                 @press-enter="handleQuery" | ||||
|               /> | ||||
|             </a-form-item> | ||||
| @@ -22,7 +22,7 @@ | ||||
|                 :options="statusOptions" | ||||
|                 placeholder="操作状态搜索" | ||||
|                 allow-clear | ||||
|                 style="width: 150px;" | ||||
|                 style="width: 150px" | ||||
|               /> | ||||
|             </a-form-item> | ||||
|             <a-form-item field="createTime" hide-label> | ||||
| @@ -128,12 +128,14 @@ | ||||
|    */ | ||||
|   const getList = (params: OperationLogParam = { ...queryParams.value }) => { | ||||
|     loading.value = true; | ||||
|     listOperationLog(params).then((res) => { | ||||
|       operationLogList.value = res.data.list; | ||||
|       total.value = res.data.total; | ||||
|     }).finally(() => { | ||||
|       loading.value = false; | ||||
|     }); | ||||
|     listOperationLog(params) | ||||
|       .then((res) => { | ||||
|         operationLogList.value = res.data.list; | ||||
|         total.value = res.data.total; | ||||
|       }) | ||||
|       .finally(() => { | ||||
|         loading.value = false; | ||||
|       }); | ||||
|   }; | ||||
|   getList(); | ||||
|  | ||||
|   | ||||
| @@ -188,27 +188,18 @@ | ||||
|         @ok="handleOk" | ||||
|         @cancel="handleCancel" | ||||
|       > | ||||
|         <a-form ref="formRef" :model="form" :rules="rules"> | ||||
|         <a-form ref="formRef" :model="form" :rules="rules" size="large"> | ||||
|           <a-form-item label="角色名称" field="roleName"> | ||||
|             <a-input | ||||
|               v-model="form.roleName" | ||||
|               placeholder="请输入角色名称" | ||||
|               size="large" | ||||
|             /> | ||||
|             <a-input v-model="form.roleName" placeholder="请输入角色名称" /> | ||||
|           </a-form-item> | ||||
|           <a-form-item label="角色编码" field="roleCode"> | ||||
|             <a-input | ||||
|               v-model="form.roleCode" | ||||
|               placeholder="请输入角色编码" | ||||
|               size="large" | ||||
|             /> | ||||
|             <a-input v-model="form.roleCode" placeholder="请输入角色编码" /> | ||||
|           </a-form-item> | ||||
|           <a-form-item label="数据权限" field="dataScope"> | ||||
|             <a-select | ||||
|               v-model="form.dataScope" | ||||
|               :options="dataScopeOptions" | ||||
|               placeholder="请选择数据权限" | ||||
|               size="large" | ||||
|             /> | ||||
|           </a-form-item> | ||||
|           <a-form-item | ||||
| @@ -226,7 +217,6 @@ | ||||
|               tree-check-strictly | ||||
|               :filter-tree-node="filterDeptTree" | ||||
|               :fallback-option="false" | ||||
|               size="large" | ||||
|             /> | ||||
|           </a-form-item> | ||||
|           <a-form-item label="角色排序" field="roleSort"> | ||||
| @@ -235,7 +225,6 @@ | ||||
|               placeholder="请输入角色排序" | ||||
|               :min="1" | ||||
|               mode="button" | ||||
|               size="large" | ||||
|             /> | ||||
|           </a-form-item> | ||||
|           <a-form-item label="描述" field="description"> | ||||
| @@ -247,7 +236,6 @@ | ||||
|                 minRows: 3, | ||||
|               }" | ||||
|               show-word-limit | ||||
|               size="large" | ||||
|             /> | ||||
|           </a-form-item> | ||||
|         </a-form> | ||||
| @@ -281,12 +269,8 @@ | ||||
|               <a-skeleton-line :rows="1" /> | ||||
|             </a-skeleton> | ||||
|             <span v-else> | ||||
|               <a-tag v-if="role.status === 1" color="green"> | ||||
|                 <span class="circle pass"></span>启用 | ||||
|               </a-tag> | ||||
|               <a-tag v-else color="red"> | ||||
|                 <span class="circle fail"></span>禁用 | ||||
|               </a-tag> | ||||
|               <a-tag v-if="role.status === 1" color="green">启用</a-tag> | ||||
|               <a-tag v-else color="red">禁用</a-tag> | ||||
|             </span> | ||||
|           </a-descriptions-item> | ||||
|           <a-descriptions-item label="数据权限"> | ||||
| @@ -580,7 +564,7 @@ | ||||
|   }; | ||||
|  | ||||
|   /** | ||||
|    * 多选 | ||||
|    * 已选择的数据行发生改变时触发 | ||||
|    * | ||||
|    * @param rowKeys ID 列表 | ||||
|    */ | ||||
|   | ||||
| @@ -5,6 +5,7 @@ | ||||
|     :rules="rules" | ||||
|     :label-col-props="{ span: 8 }" | ||||
|     :wrapper-col-props="{ span: 16 }" | ||||
|     size="large" | ||||
|     class="form" | ||||
|   > | ||||
|     <a-form-item :label="$t('userCenter.basicInfo.form.label.username')" disabled> | ||||
| @@ -12,14 +13,12 @@ | ||||
|         v-model="form.username" | ||||
|         :placeholder="$t('userCenter.basicInfo.form.placeholder.username')" | ||||
|         max-length="50" | ||||
|         size="large" | ||||
|       /> | ||||
|     </a-form-item> | ||||
|     <a-form-item :label="$t('userCenter.basicInfo.form.label.nickname')" field="nickname"> | ||||
|       <a-input | ||||
|         v-model="form.nickname" | ||||
|         :placeholder="$t('userCenter.basicInfo.form.placeholder.nickname')" | ||||
|         size="large" | ||||
|         max-length="32" | ||||
|       /> | ||||
|     </a-form-item> | ||||
| @@ -46,7 +45,7 @@ | ||||
| <script lang="ts" setup> | ||||
|   import { getCurrentInstance, ref, toRefs, reactive, computed } from 'vue'; | ||||
|   import { FieldRule } from '@arco-design/web-vue'; | ||||
|   import { BasicInfoModel, updateBasicInfo } from "@/api/system/user-center"; | ||||
|   import { BasicInfoModel, updateBasicInfo } from '@/api/system/user-center'; | ||||
|   import { useI18n } from 'vue-i18n'; | ||||
|   import { useLoginStore } from '@/store'; | ||||
|  | ||||
| @@ -66,8 +65,18 @@ | ||||
|     // 表单验证规则 | ||||
|     rules: computed((): Record<string, FieldRule[]> => { | ||||
|       return { | ||||
|         username: [{ required: true, message: t('userCenter.basicInfo.form.error.required.username') }], | ||||
|         nickname: [{ required: true, message: t('userCenter.basicInfo.form.error.required.nickname') }], | ||||
|         username: [ | ||||
|           { | ||||
|             required: true, | ||||
|             message: t('userCenter.basicInfo.form.error.required.username'), | ||||
|           }, | ||||
|         ], | ||||
|         nickname: [ | ||||
|           { | ||||
|             required: true, | ||||
|             message: t('userCenter.basicInfo.form.error.required.nickname'), | ||||
|           }, | ||||
|         ], | ||||
|       }; | ||||
|     }), | ||||
|   }); | ||||
| @@ -84,12 +93,14 @@ | ||||
|         updateBasicInfo({ | ||||
|           nickname: form.value.nickname, | ||||
|           gender: form.value.gender, | ||||
|         }).then((res) => { | ||||
|           loginStore.getInfo(); | ||||
|           proxy.$message.success(t('userCenter.basicInfo.form.save.success')); | ||||
|         }).finally(() => { | ||||
|           loading.value = false; | ||||
|         }); | ||||
|         }) | ||||
|           .then((res) => { | ||||
|             loginStore.getInfo(); | ||||
|             proxy.$message.success(t('userCenter.basicInfo.form.save.success')); | ||||
|           }) | ||||
|           .finally(() => { | ||||
|             loading.value = false; | ||||
|           }); | ||||
|       } | ||||
|     }); | ||||
|   }; | ||||
|   | ||||
| @@ -29,13 +29,12 @@ | ||||
|     @ok="handleUpdate" | ||||
|     @cancel="handleCancel" | ||||
|   > | ||||
|     <a-form ref="formRef" :model="form" :rules="rules"> | ||||
|     <a-form ref="formRef" :model="form" :rules="rules" size="large"> | ||||
|       <a-form-item :label="$t('userCenter.securitySettings.updateEmail.form.label.newEmail')" field="newEmail"> | ||||
|         <a-input | ||||
|           v-model="form.newEmail" | ||||
|           :placeholder="$t('userCenter.securitySettings.updateEmail.form.placeholder.newEmail')" | ||||
|           allow-clear | ||||
|           size="large" | ||||
|         /> | ||||
|       </a-form-item> | ||||
|       <a-form-item :label="$t('userCenter.securitySettings.updateEmail.form.label.captcha')" field="captcha"> | ||||
| @@ -44,13 +43,11 @@ | ||||
|           :placeholder="$t('userCenter.securitySettings.updateEmail.form.placeholder.captcha')" | ||||
|           max-length="6" | ||||
|           allow-clear | ||||
|           size="large" | ||||
|           style="width: 80%" | ||||
|         /> | ||||
|         <a-button | ||||
|           :loading="captchaLoading" | ||||
|           type="primary" | ||||
|           size="large" | ||||
|           :disabled="captchaDisable" | ||||
|           class="captcha-btn" | ||||
|           @click="handleSendCaptcha" | ||||
| @@ -64,7 +61,6 @@ | ||||
|           :placeholder="$t('userCenter.securitySettings.updateEmail.form.placeholder.currentPassword')" | ||||
|           max-length="32" | ||||
|           allow-clear | ||||
|           size="large" | ||||
|         /> | ||||
|       </a-form-item> | ||||
|     </a-form> | ||||
|   | ||||
| @@ -29,14 +29,13 @@ | ||||
|     @ok="handleUpdate" | ||||
|     @cancel="handleCancel" | ||||
|   > | ||||
|     <a-form ref="formRef" :model="form" :rules="rules"> | ||||
|     <a-form ref="formRef" :model="form" :rules="rules" size="large"> | ||||
|       <a-form-item :label="$t('userCenter.securitySettings.updatePwd.form.label.oldPassword')" field="oldPassword"> | ||||
|         <a-input-password | ||||
|           v-model="form.oldPassword" | ||||
|           :placeholder="$t('userCenter.securitySettings.updatePwd.form.placeholder.oldPassword')" | ||||
|           max-length="32" | ||||
|           allow-clear | ||||
|           size="large" | ||||
|         /> | ||||
|       </a-form-item> | ||||
|       <a-form-item :label="$t('userCenter.securitySettings.updatePwd.form.label.newPassword')" field="newPassword"> | ||||
| @@ -45,7 +44,6 @@ | ||||
|           :placeholder="$t('userCenter.securitySettings.updatePwd.form.placeholder.newPassword')" | ||||
|           max-length="32" | ||||
|           allow-clear | ||||
|           size="large" | ||||
|         /> | ||||
|       </a-form-item> | ||||
|       <a-form-item :label="$t('userCenter.securitySettings.updatePwd.form.label.rePassword')" field="rePassword"> | ||||
| @@ -54,7 +52,6 @@ | ||||
|           :placeholder="$t('userCenter.securitySettings.updatePwd.form.placeholder.rePassword')" | ||||
|           max-length="32" | ||||
|           allow-clear | ||||
|           size="large" | ||||
|         /> | ||||
|       </a-form-item> | ||||
|     </a-form> | ||||
|   | ||||
		Reference in New Issue
	
	Block a user