| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <script setup lang="ts"> |
| | | import { message } from 'ant-design-vue'; |
| | | import { Button, Input, Upload } from 'ant-design-vue'; |
| | | import { onMounted, ref } from 'vue'; |
| | | |
| | | // 注æï¼æ¬æä»¶ä½äº @vben ç packages å
é¨ï¼æ æ³ä½¿ç¨åºç¨å±å«å #/ï¼éç¨ç¸å¯¹è·¯å¾ï¼ä¸åç®å½ custom.vue ä¿æä¸è´ï¼ |
| | | import { publicUploadFile } from '../../../../../../../../api/system/storage'; |
| | | import { $t } from '../../../../../../../locales/src'; |
| | | import { useCompanyConfigStore } from '../../../../../../../../store/company-config'; |
| | | |
| | | defineOptions({ |
| | | name: 'PreferenceCompanyConfig', |
| | | }); |
| | | |
| | | const companyConfigStore = useCompanyConfigStore(); |
| | | |
| | | const companyName = ref(companyConfigStore.companyName); |
| | | const loginTitle = ref(companyConfigStore.loginTitle); |
| | | const loginDescription = ref(companyConfigStore.loginDescription); |
| | | const logoUrl = ref(companyConfigStore.logoUrl); |
| | | const uploading = ref(false); |
| | | |
| | | // æå¼åºåæ¶ä»å端æåææ°å
¬å¸é
置并å填表åï¼store åå¼å¯è½ä¸ºç©ºï¼å å¯å¨å è½½èµ°çæ¯çº¯å½æ°ï¼ |
| | | onMounted(async () => { |
| | | await companyConfigStore.loadFromServer(); |
| | | companyName.value = companyConfigStore.companyName; |
| | | loginTitle.value = companyConfigStore.loginTitle; |
| | | loginDescription.value = companyConfigStore.loginDescription; |
| | | logoUrl.value = companyConfigStore.logoUrl; |
| | | }); |
| | | |
| | | /** ä¸ä¼ logoï¼æ°¸ä¹
å
¬å¼ï¼ä¾ç»å½é¡µå
ç»å½å±ç¤ºï¼ */ |
| | | async function handleBeforeUpload(file: File) { |
| | | uploading.value = true; |
| | | try { |
| | | const blobs = await publicUploadFile([file]); |
| | | const blob = blobs?.[0]; |
| | | if (blob?.previewURL || blob?.url) { |
| | | logoUrl.value = blob.previewURL || blob.url || ''; |
| | | message.success($t('preferences.company.uploadSuccess')); |
| | | } else { |
| | | message.error($t('preferences.company.uploadFailed')); |
| | | } |
| | | } catch { |
| | | message.error($t('preferences.company.uploadFailed')); |
| | | } finally { |
| | | uploading.value = false; |
| | | } |
| | | // è¿å falseï¼é»æ¢ç»ä»¶é»è®¤ä¸ä¼ ï¼å·²éè¿æ¥å£ä¸ä¼ ï¼ |
| | | return false; |
| | | } |
| | | |
| | | async function handleSave() { |
| | | if (!companyName.value.trim()) { |
| | | message.warning($t('preferences.company.companyNameRequired')); |
| | | return; |
| | | } |
| | | try { |
| | | await companyConfigStore.save({ |
| | | companyName: companyName.value.trim(), |
| | | logoUrl: logoUrl.value || undefined, |
| | | loginTitle: loginTitle.value, |
| | | loginDescription: loginDescription.value, |
| | | }); |
| | | message.success($t('preferences.company.saveSuccess')); |
| | | } catch { |
| | | message.error($t('preferences.company.saveFailed')); |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <template> |
| | | <div class="flex flex-col"> |
| | | <!-- å
¬å¸åç§° --> |
| | | <div class="my-2 flex w-full items-center justify-between gap-4 rounded-md px-2 py-2"> |
| | | <span class="shrink-0 text-sm text-foreground/80"> |
| | | {{ $t('preferences.company.companyName') }} |
| | | </span> |
| | | <Input |
| | | v-model:value="companyName" |
| | | :placeholder="$t('preferences.company.companyNamePlaceholder')" |
| | | class="w-41.25" |
| | | allow-clear |
| | | /> |
| | | </div> |
| | | |
| | | <!-- ç»å½é¡µæ é¢ --> |
| | | <div class="my-2 flex w-full items-center justify-between gap-4 rounded-md px-2 py-2"> |
| | | <span class="shrink-0 text-sm text-foreground/80"> |
| | | {{ $t('preferences.company.loginTitle') }} |
| | | </span> |
| | | <Input |
| | | v-model:value="loginTitle" |
| | | :placeholder="$t('preferences.company.loginTitlePlaceholder')" |
| | | class="w-41.25" |
| | | allow-clear |
| | | /> |
| | | </div> |
| | | |
| | | <!-- ç»å½é¡µæè¿° --> |
| | | <div class="my-2 flex w-full items-center justify-between gap-4 rounded-md px-2 py-2"> |
| | | <span class="shrink-0 text-sm text-foreground/80"> |
| | | {{ $t('preferences.company.loginDescription') }} |
| | | </span> |
| | | <Input |
| | | v-model:value="loginDescription" |
| | | :placeholder="$t('preferences.company.loginDescriptionPlaceholder')" |
| | | class="w-41.25" |
| | | allow-clear |
| | | /> |
| | | </div> |
| | | |
| | | <!-- å
¬å¸ Logo --> |
| | | <div class="my-2 flex w-full items-center justify-between gap-4 rounded-md px-2 py-2"> |
| | | <span class="shrink-0 text-sm text-foreground/80"> |
| | | {{ $t('preferences.company.logo') }} |
| | | </span> |
| | | <div class="flex items-center gap-2"> |
| | | <Upload |
| | | :show-upload-list="false" |
| | | accept="image/*" |
| | | :before-upload="handleBeforeUpload" |
| | | > |
| | | <Button size="small" :loading="uploading"> |
| | | {{ $t('preferences.company.uploadLogo') }} |
| | | </Button> |
| | | </Upload> |
| | | <img |
| | | v-if="logoUrl" |
| | | :src="logoUrl" |
| | | alt="company-logo" |
| | | class="h-9 w-9 rounded border border-border object-contain" |
| | | /> |
| | | <span v-else class="text-xs text-muted-foreground"> |
| | | {{ $t('preferences.company.logoEmpty') }} |
| | | </span> |
| | | </div> |
| | | </div> |
| | | |
| | | <div v-if="uploading" class="px-2 pb-1 text-xs text-muted-foreground"> |
| | | {{ $t('preferences.company.uploading') }} |
| | | </div> |
| | | |
| | | <!-- ä¿å --> |
| | | <div class="mt-3 px-2"> |
| | | <Button type="primary" class="w-full" @click="handleSave"> |
| | | {{ $t('preferences.company.save') }} |
| | | </Button> |
| | | </div> |
| | | </div> |
| | | </template> |