chore: 重构组件
This commit is contained in:
parent
19fe1b05eb
commit
9edd78e581
@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { useAttrs } from 'vue';
|
||||
import { ref, useAttrs } from 'vue';
|
||||
import type { UploadFileInfo, UploadProps } from 'naive-ui';
|
||||
import { fetchBatchDeleteOss } from '@/service/api/system/oss';
|
||||
import { getToken } from '@/store/modules/auth/shared';
|
||||
@ -29,6 +29,9 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
const attrs: UploadProps = useAttrs();
|
||||
|
||||
let fileNum = 0;
|
||||
const fileList = ref<UploadFileInfo[]>([]);
|
||||
|
||||
const isHttpProxy = import.meta.env.DEV && import.meta.env.VITE_HTTP_PROXY === 'Y';
|
||||
const { baseURL } = getServiceBaseURL(import.meta.env, isHttpProxy);
|
||||
|
||||
@ -38,6 +41,7 @@ const headers: Record<string, string> = {
|
||||
};
|
||||
|
||||
function beforeUpload(options: { file: UploadFileInfo; fileList: UploadFileInfo[] }) {
|
||||
fileNum += 1;
|
||||
const { file } = options;
|
||||
|
||||
// 校检文件类型
|
||||
@ -73,15 +77,19 @@ function isErrorState(xhr: XMLHttpRequest) {
|
||||
}
|
||||
|
||||
function handleFinish(options: { file: UploadFileInfo; event?: ProgressEvent }) {
|
||||
fileNum -= 1;
|
||||
const { file, event } = options;
|
||||
// @ts-expect-error Ignore type errors
|
||||
const responseText = event?.target?.responseText;
|
||||
const response = JSON.parse(responseText);
|
||||
const oss: Api.System.Oss = response.data;
|
||||
fileList.value.find(item => item.id === file.id)!.id = String(oss.ossId);
|
||||
file.id = String(oss.ossId);
|
||||
file.url = oss.url;
|
||||
file.name = oss.fileName;
|
||||
window.$message?.success('上传成功');
|
||||
if (fileNum === 0) {
|
||||
window.$message?.success('上传成功');
|
||||
}
|
||||
return file;
|
||||
}
|
||||
|
||||
@ -106,6 +114,7 @@ async function handleRemove(file: UploadFileInfo) {
|
||||
<template>
|
||||
<NUpload
|
||||
v-bind="attrs"
|
||||
v-model:file-list="fileList"
|
||||
:action="`${baseURL}${action}`"
|
||||
:headers="headers"
|
||||
:max="max"
|
||||
|
@ -2,12 +2,20 @@ import { transformRecordToOption } from '@/utils/common';
|
||||
|
||||
/** enable status */
|
||||
export const enableStatusRecord: Record<Api.Common.EnableStatus, string> = {
|
||||
'0': '启用',
|
||||
'1': '禁用'
|
||||
'0': '正常',
|
||||
'1': '停用'
|
||||
};
|
||||
|
||||
export const enableStatusOptions = transformRecordToOption(enableStatusRecord);
|
||||
|
||||
/** yes or no status */
|
||||
export const yesOrNoStatusRecord: Record<Api.Common.YesOrNoStatus, string> = {
|
||||
Y: '是',
|
||||
N: '否'
|
||||
};
|
||||
|
||||
export const yesOrNoStatusOptions = transformRecordToOption(yesOrNoStatusRecord);
|
||||
|
||||
/** menu type */
|
||||
export const menuTypeRecord: Record<Api.System.MenuType, string> = {
|
||||
M: '目录',
|
||||
@ -91,3 +99,20 @@ export const genTplCategoryRecord: Record<Api.Tool.TplCategory, string> = {
|
||||
};
|
||||
|
||||
export const genTplCategoryOptions = transformRecordToOption(genTplCategoryRecord);
|
||||
|
||||
/** oss config is https */
|
||||
export const ossConfigIsHttpsRecord: Record<Api.Common.YesOrNoStatus, string> = {
|
||||
Y: 'https://',
|
||||
N: 'http://'
|
||||
};
|
||||
|
||||
export const ossConfigIsHttpsOptions = transformRecordToOption(ossConfigIsHttpsRecord);
|
||||
|
||||
/** oss access policy */
|
||||
export const ossAccessPolicyRecord: Record<Api.System.OssAccessPolicy, string> = {
|
||||
'0': '私有',
|
||||
'1': '公有',
|
||||
'2': '自定义'
|
||||
};
|
||||
|
||||
export const ossAccessPolicyOptions = transformRecordToOption(ossAccessPolicyRecord);
|
||||
|
@ -48,7 +48,7 @@ watch(tenantId, async () => {
|
||||
<GlobalBreadcrumb v-if="!appStore.isMobile" class="ml-12px" />
|
||||
</div>
|
||||
<div class="h-full flex-y-center justify-end">
|
||||
<TenantSelect class="mr-12px w-150px" :clearable="true" />
|
||||
<TenantSelect v-model:value="tenantId" class="mr-12px w-150px" />
|
||||
<GlobalSearch />
|
||||
<FullScreen v-if="!appStore.isMobile" :full="isFullscreen" @click="toggle" />
|
||||
<LangSwitch
|
||||
|
@ -213,13 +213,14 @@ export const generatedRoutes: GeneratedRoute[] = [
|
||||
},
|
||||
{
|
||||
name: 'system_oss-config',
|
||||
path: '/oss-config',
|
||||
path: '/system/oss-config',
|
||||
component: 'view.system_oss-config',
|
||||
meta: {
|
||||
title: 'system_oss-config',
|
||||
i18nKey: 'route.system_oss-config',
|
||||
constant: true,
|
||||
hideInMenu: true
|
||||
hideInMenu: true,
|
||||
icon: 'hugeicons:configuration-01'
|
||||
}
|
||||
},
|
||||
{
|
||||
|
@ -183,7 +183,7 @@ const routeMap: RouteMap = {
|
||||
"system_menu": "/system/menu",
|
||||
"system_notice": "/system/notice",
|
||||
"system_oss": "/system/oss",
|
||||
"system_oss-config": "/oss-config",
|
||||
"system_oss-config": "/system/oss-config",
|
||||
"system_post": "/system/post",
|
||||
"system_tenant": "/system/tenant",
|
||||
"system_user": "/system/user",
|
||||
|
@ -126,7 +126,7 @@ const dynamicConstantRoutes: ElegantRoute[] = [
|
||||
children: [
|
||||
{
|
||||
name: 'system_oss-config',
|
||||
path: '/oss-config',
|
||||
path: '/system/oss-config',
|
||||
component: 'view.system_oss-config',
|
||||
meta: {
|
||||
title: 'system_oss-config',
|
||||
|
6
src/typings/api/api.d.ts
vendored
6
src/typings/api/api.d.ts
vendored
@ -47,10 +47,10 @@ declare namespace Api {
|
||||
/**
|
||||
* 是否状态
|
||||
*
|
||||
* - "0": 是
|
||||
* - "1": 否
|
||||
* - "Y": 是
|
||||
* - "N": 否
|
||||
*/
|
||||
type YesOrNoStatus = '0' | '1';
|
||||
type YesOrNoStatus = 'Y' | 'N';
|
||||
|
||||
/** common record */
|
||||
type CommonRecord<T = any> = {
|
||||
|
11
src/typings/api/system.api.d.ts
vendored
11
src/typings/api/system.api.d.ts
vendored
@ -182,7 +182,7 @@ declare namespace Api {
|
||||
/** 是否为外链(0是 1否 2iframe) */
|
||||
isFrame: IsMenuFrame;
|
||||
/** 是否缓存(0缓存 1不缓存) */
|
||||
isCache: Common.YesOrNoStatus;
|
||||
isCache: Common.EnableStatus;
|
||||
/** 菜单类型(M目录 C菜单 F按钮) */
|
||||
menuType: MenuType;
|
||||
/** 显示状态(0显示 1隐藏) */
|
||||
@ -643,6 +643,9 @@ declare namespace Api {
|
||||
/** oss list */
|
||||
type OssList = Api.Common.PaginatingQueryRecord<Oss>;
|
||||
|
||||
/** oss access policy */
|
||||
type OssAccessPolicy = '0' | '1' | '2';
|
||||
|
||||
/** oss config */
|
||||
type OssConfig = Common.CommonRecord<{
|
||||
/** 主键 */
|
||||
@ -664,13 +667,13 @@ declare namespace Api {
|
||||
/** 自定义域名 */
|
||||
domain: string;
|
||||
/** 是否https(Y=是,N=否) */
|
||||
isHttps: string;
|
||||
isHttps: Api.Common.YesOrNoStatus;
|
||||
/** 域 */
|
||||
region: string;
|
||||
/** 桶权限类型 */
|
||||
accessPolicy: string;
|
||||
accessPolicy: Api.System.OssAccessPolicy;
|
||||
/** 是否默认(0=是,1=否) */
|
||||
status: string;
|
||||
status: Api.Common.EnableStatus;
|
||||
/** 扩展字段 */
|
||||
ext1: string;
|
||||
/** 备注 */
|
||||
|
8
src/typings/elegant-router.d.ts
vendored
8
src/typings/elegant-router.d.ts
vendored
@ -37,7 +37,7 @@ declare module "@elegant-router/types" {
|
||||
"system_menu": "/system/menu";
|
||||
"system_notice": "/system/notice";
|
||||
"system_oss": "/system/oss";
|
||||
"system_oss-config": "/oss-config";
|
||||
"system_oss-config": "/system/oss-config";
|
||||
"system_post": "/system/post";
|
||||
"system_tenant": "/system/tenant";
|
||||
"system_user": "/system/user";
|
||||
@ -117,8 +117,8 @@ declare module "@elegant-router/types" {
|
||||
| "system_dict_type"
|
||||
| "system_menu"
|
||||
| "system_notice"
|
||||
| "system_oss"
|
||||
| "system_oss-config"
|
||||
| "system_oss"
|
||||
| "system_post"
|
||||
| "system_tenant"
|
||||
| "system_user"
|
||||
@ -194,7 +194,7 @@ declare module "@elegant-router/types" {
|
||||
component: `view.${K}`;
|
||||
}
|
||||
: never;
|
||||
|
||||
|
||||
/**
|
||||
* the center level route
|
||||
*/
|
||||
@ -217,7 +217,7 @@ declare module "@elegant-router/types" {
|
||||
children: (CenterLevelRoute<GetChildRouteKey<K>> | LastLevelRoute<GetChildRouteKey<K>>)[];
|
||||
}
|
||||
: never;
|
||||
|
||||
|
||||
/**
|
||||
* the custom first level route
|
||||
*/
|
||||
|
26
src/utils/copy.ts
Normal file
26
src/utils/copy.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import { useClipboard } from '@vueuse/core';
|
||||
|
||||
const { copy, isSupported } = useClipboard();
|
||||
|
||||
export async function handleCopy(source?: string) {
|
||||
if (!isSupported) {
|
||||
window.$message?.error('您的浏览器不支持 Clipboard API');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!source) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
await copy(source);
|
||||
} else {
|
||||
const range = document.createRange();
|
||||
range.selectNode(document.getElementById('tokenDetailInput')!);
|
||||
const selection = window.getSelection();
|
||||
if (selection?.rangeCount) selection.removeAllRanges();
|
||||
selection?.addRange(range);
|
||||
document.execCommand('copy');
|
||||
}
|
||||
window.$message?.success('复制成功');
|
||||
}
|
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref, watch } from 'vue';
|
||||
import { computed, reactive, watch } from 'vue';
|
||||
import { ossAccessPolicyOptions, ossConfigIsHttpsOptions } from '@/constants/business';
|
||||
import { fetchCreateOssConfig, fetchUpdateOssConfig } from '@/service/api/system/oss-config';
|
||||
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
|
||||
import { $t } from '@/locales';
|
||||
@ -51,9 +52,9 @@ function createDefaultModel(): Model {
|
||||
prefix: '',
|
||||
endpoint: '',
|
||||
domain: '',
|
||||
isHttps: '0',
|
||||
isHttps: 'N',
|
||||
region: '',
|
||||
accessPolicy: '0',
|
||||
accessPolicy: '1',
|
||||
remark: ''
|
||||
};
|
||||
}
|
||||
@ -73,12 +74,6 @@ const rules: Record<RuleKey, App.Global.FormRule> = {
|
||||
accessPolicy: createRequiredRule('桶权限类型不能为空')
|
||||
};
|
||||
|
||||
const accessPolicyOptions = ref<CommonType.Option[]>([
|
||||
{ label: '私有', value: '0' },
|
||||
{ label: '公有', value: '1' },
|
||||
{ label: '自定义', value: '2' }
|
||||
]);
|
||||
|
||||
function handleUpdateModelWhenEdit() {
|
||||
if (props.operateType === 'add') {
|
||||
Object.assign(model, createDefaultModel());
|
||||
@ -183,7 +178,12 @@ watch(visible, () => {
|
||||
</NFormItem>
|
||||
<NFormItem label="访问站点" path="endpoint">
|
||||
<NInputGroup>
|
||||
<NInputGroupLabel>http://</NInputGroupLabel>
|
||||
<NSelect
|
||||
v-model:value="model.isHttps"
|
||||
class="w-110px"
|
||||
:options="ossConfigIsHttpsOptions"
|
||||
placeholder="请选择访问协议"
|
||||
/>
|
||||
<NInput v-model:value="model.endpoint" placeholder="请输入访问站点" />
|
||||
</NInputGroup>
|
||||
</NFormItem>
|
||||
@ -192,10 +192,10 @@ watch(visible, () => {
|
||||
</NFormItem>
|
||||
<NDivider>认证信息</NDivider>
|
||||
<NFormItem label="accessKey" path="accessKey">
|
||||
<NInput v-model:value="model.accessKey" placeholder="请输入accessKey" />
|
||||
<NInput v-model:value="model.accessKey" placeholder="请输入 AccessKey" />
|
||||
</NFormItem>
|
||||
<NFormItem label="secretKey" path="secretKey">
|
||||
<NInput v-model:value="model.secretKey" placeholder="请输入秘钥secretKey" />
|
||||
<NInput v-model:value="model.secretKey" placeholder="请输入秘钥 SecretKey" />
|
||||
</NFormItem>
|
||||
<NDivider>桶信息</NDivider>
|
||||
<NFormItem label="桶名称" path="bucketName">
|
||||
@ -205,17 +205,12 @@ watch(visible, () => {
|
||||
<NInput v-model:value="model.prefix" placeholder="请输入前缀" />
|
||||
</NFormItem>
|
||||
<NGrid :cols="2" :x-gap="24">
|
||||
<NGridItem>
|
||||
<NFormItem label="是否https" path="isHttps">
|
||||
<DictRadio v-model:value="model.isHttps" dict-code="sys_yes_no" />
|
||||
</NFormItem>
|
||||
</NGridItem>
|
||||
<NGridItem>
|
||||
<NFormItem label="桶权限类型" path="accessPolicy">
|
||||
<NRadioGroup v-model:value="model.accessPolicy">
|
||||
<NSpace>
|
||||
<NRadio
|
||||
v-for="option in accessPolicyOptions"
|
||||
v-for="option in ossAccessPolicyOptions"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
:label="option.label"
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script setup lang="tsx">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { NImage, NTag } from 'naive-ui';
|
||||
import { NButton, NEllipsis, NImage, NTag, NTooltip } from 'naive-ui';
|
||||
import { useBoolean, useLoading } from '@sa/hooks';
|
||||
import { fetchBatchDeleteOss, fetchGetOssList } from '@/service/api/system/oss';
|
||||
import { fetchGetConfigByKey, fetchUpdateConfigByKey } from '@/service/api/system/config';
|
||||
@ -10,6 +10,7 @@ import { useAuth } from '@/hooks/business/auth';
|
||||
import { useDownload } from '@/hooks/business/download';
|
||||
import { useRouterPush } from '@/hooks/common/router';
|
||||
import { isImage } from '@/utils/common';
|
||||
import { handleCopy } from '@/utils/copy';
|
||||
import { $t } from '@/locales';
|
||||
import ButtonIcon from '@/components/custom/button-icon.vue';
|
||||
import OssSearch from './modules/oss-search.vue';
|
||||
@ -71,19 +72,27 @@ const {
|
||||
key: 'fileName',
|
||||
title: '文件名',
|
||||
align: 'center',
|
||||
ellipsis: {
|
||||
tooltip: true,
|
||||
lineClamp: 3
|
||||
},
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
key: 'originalName',
|
||||
title: '原名',
|
||||
align: 'center',
|
||||
ellipsis: {
|
||||
tooltip: true,
|
||||
lineClamp: 3
|
||||
},
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
key: 'fileSuffix',
|
||||
title: '文件后缀名',
|
||||
align: 'center',
|
||||
minWidth: 120
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
key: 'url',
|
||||
@ -94,7 +103,20 @@ const {
|
||||
if (preview.value && isImage(row.fileSuffix)) {
|
||||
return <NImage class="h-40px w-40px object-contain" src={row.url} />;
|
||||
}
|
||||
return <span>{row.url}</span>;
|
||||
return (
|
||||
<NTooltip>
|
||||
{{
|
||||
default: () => <span>点击复制</span>,
|
||||
trigger: () => (
|
||||
<div class="cursor-pointer" onClick={async () => await handleCopy(row.url)}>
|
||||
<NEllipsis line-clamp={3} tooltip={false}>
|
||||
{row.url}
|
||||
</NEllipsis>
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
</NTooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -113,7 +135,7 @@ const {
|
||||
key: 'service',
|
||||
title: '服务商',
|
||||
align: 'center',
|
||||
minWidth: 120,
|
||||
minWidth: 100,
|
||||
render: row => {
|
||||
return <NTag type="primary">{row.service}</NTag>;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user