mirror of
https://github.com/bufanyun/hotgo.git
synced 2025-11-12 12:13:51 +08:00
发布v2.8.4版本，更新内容请查看：https://github.com/bufanyun/hotgo/tree/v2.0/docs/guide-zh-CN/addon-version-upgrade.md
This commit is contained in:
孟帅
@@ -46,7 +46,7 @@
|
||||
const source = ref(props.startVal);
|
||||
const disabled = ref(false);
|
||||
let outputValue = useTransition(source);
|
||||
|
||||
|
||||
const value = computed(() => formatNumber(unref(outputValue)));
|
||||
|
||||
watchEffect(() => {
|
||||
|
||||
361
web/src/components/FileChooser/index.vue
Normal file
361
web/src/components/FileChooser/index.vue
Normal file
@@ -0,0 +1,361 @@
|
||||
<template>
|
||||
<n-space vertical>
|
||||
<n-button @click="showModal = true" size="small">
|
||||
<template #icon
|
||||
><n-icon><PlusOutlined /></n-icon> </template
|
||||
>选择{{ buttonText }}
|
||||
</n-button>
|
||||
<div class="w-full">
|
||||
<div class="upload">
|
||||
<div class="upload-card" v-if="fileList.length > 0">
|
||||
<div
|
||||
class="upload-card-item"
|
||||
:style="getCSSProperties"
|
||||
v-for="(item, index) in fileList"
|
||||
:key="`img_${index}`"
|
||||
>
|
||||
<div class="upload-card-item-info">
|
||||
<div class="img-box">
|
||||
<template v-if="fileType === 'image'">
|
||||
<img :src="item" @error="errorImg($event)" alt="" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<n-avatar :style="fileAvatarCSS">{{ getFileExt(item) }}</n-avatar>
|
||||
</template>
|
||||
</div>
|
||||
<div class="img-box-actions">
|
||||
<template v-if="fileType === 'image'">
|
||||
<n-icon size="18" class="mx-2 action-icon" @click="handlePreview(item)">
|
||||
<EyeOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
<template v-else>
|
||||
<n-icon size="18" class="mx-2 action-icon" @click="handleDownload(item)">
|
||||
<CloudDownloadOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-icon size="18" class="mx-2 action-icon" @click="handleRemove(index)">
|
||||
<DeleteOutlined />
|
||||
</n-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div> </div></div
|
||||
></div>
|
||||
</n-space>
|
||||
|
||||
<n-modal
|
||||
v-model:show="showModal"
|
||||
:on-after-leave="handleCancel"
|
||||
:style="{
|
||||
width: dialogWidth,
|
||||
}"
|
||||
>
|
||||
<n-card title="文件选择">
|
||||
<template #header-extra>
|
||||
<n-space>
|
||||
<n-button @click="handleUpload" ghost>
|
||||
<template #icon>
|
||||
<n-icon :component="UploadOutlined" />
|
||||
</template>
|
||||
上传文件
|
||||
</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
<n-card style="overflow: auto" content-style="padding: 0;">
|
||||
<Chooser
|
||||
ref="chooserRef"
|
||||
:file-type="fileType"
|
||||
:maxNumber="maxNumber"
|
||||
:fileList="fileList"
|
||||
@saveChange="saveChange"
|
||||
/>
|
||||
</n-card>
|
||||
<template #footer>
|
||||
<n-space justify="end">
|
||||
<n-button @click="handleCancel"> 取消 </n-button>
|
||||
<n-button type="primary" @click="handleSelectFile"> 确定 </n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-card>
|
||||
</n-modal>
|
||||
|
||||
<FileUpload
|
||||
ref="fileUploadRef"
|
||||
:width="dialogWidth"
|
||||
:finish-call="handleFinishCall"
|
||||
max-upload="20"
|
||||
/>
|
||||
|
||||
<Preview ref="previewRef" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { NButton, NSpace, NCard, NModal, NIcon, useDialog } from 'naive-ui';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import FileUpload from '@/components/FileChooser/src/Upload.vue';
|
||||
import Chooser from '@/components/FileChooser/src/Chooser.vue';
|
||||
import Preview from '@/components/FileChooser/src/Preview.vue';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { adaModalWidth, errorImg } from '@/utils/hotgo';
|
||||
import { getFileExt } from '@/utils/urlUtils';
|
||||
import {
|
||||
UploadOutlined,
|
||||
PlusOutlined,
|
||||
CloudDownloadOutlined,
|
||||
DeleteOutlined,
|
||||
EyeOutlined,
|
||||
} from '@vicons/antd';
|
||||
import { Attachment, FileType, getFileType } from '@/components/FileChooser/src/model';
|
||||
import { isArrayString, isString } from '@/utils/is';
|
||||
|
||||
export interface Props {
|
||||
value: string | string[] | null;
|
||||
maxNumber?: number;
|
||||
fileType?: FileType;
|
||||
width?: number;
|
||||
height?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
value: '',
|
||||
maxNumber: 1,
|
||||
fileType: 'default',
|
||||
width: 100,
|
||||
height: 100,
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:value']);
|
||||
const fileUploadRef = ref();
|
||||
const dialogWidth = ref('85%');
|
||||
const dialog = useDialog();
|
||||
const showModal = ref(false);
|
||||
const chooserRef = ref();
|
||||
const previewRef = ref();
|
||||
const fileList = ref<string[]>([]);
|
||||
|
||||
const getCSSProperties = computed(() => {
|
||||
return {
|
||||
width: `${props.width}px`,
|
||||
height: `${props.height}px`,
|
||||
};
|
||||
});
|
||||
|
||||
const fileAvatarCSS = computed(() => {
|
||||
return {
|
||||
'--n-merged-size': `var(--n-avatar-size-override, ${props.width * 0.8}px)`,
|
||||
'--n-font-size': `18px`,
|
||||
};
|
||||
});
|
||||
|
||||
const buttonText = computed(() => {
|
||||
return getFileType(props.fileType);
|
||||
});
|
||||
|
||||
// 预览
|
||||
function handlePreview(url: string) {
|
||||
previewRef.value.openPreview(url);
|
||||
}
|
||||
|
||||
// 下载
|
||||
function handleDownload(url: string) {
|
||||
window.open(url);
|
||||
}
|
||||
|
||||
// 删除
|
||||
function handleRemove(index: number) {
|
||||
dialog.info({
|
||||
title: '提示',
|
||||
content: '你确定要删除吗？',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: () => {
|
||||
fileList.value.splice(index, 1);
|
||||
if (props.maxNumber === 1) {
|
||||
emit('update:value', '');
|
||||
} else {
|
||||
emit('update:value', fileList.value);
|
||||
}
|
||||
},
|
||||
onNegativeClick: () => {},
|
||||
});
|
||||
}
|
||||
|
||||
function handleSelectFile() {
|
||||
showModal.value = false;
|
||||
if (props.maxNumber === 1) {
|
||||
emit('update:value', fileList.value.length > 0 ? fileList.value[0] : '');
|
||||
} else {
|
||||
emit('update:value', fileList.value);
|
||||
}
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
showModal.value = false;
|
||||
loadImage();
|
||||
}
|
||||
|
||||
function handleUpload() {
|
||||
fileUploadRef.value.openModal();
|
||||
}
|
||||
|
||||
function handleFinishCall(result: Attachment, success: boolean) {
|
||||
if (success) {
|
||||
chooserRef.value.reloadTable();
|
||||
}
|
||||
}
|
||||
|
||||
function saveChange(list: string[]) {
|
||||
fileList.value = list;
|
||||
}
|
||||
|
||||
function loadImage() {
|
||||
const value = cloneDeep(props.value);
|
||||
if (props.maxNumber === 1) {
|
||||
fileList.value = [];
|
||||
if (value !== '') {
|
||||
if (!isString(value)) {
|
||||
console.warn(
|
||||
'When the file picker is currently in single-file mode, but the passed value is not of type string, there may be potential issues.'
|
||||
);
|
||||
}
|
||||
fileList.value.push(value as string);
|
||||
}
|
||||
} else {
|
||||
if (!isArrayString(value)) {
|
||||
console.warn(
|
||||
'When the file picker is currently in multiple-file mode, but the passed value is not of type string array, there may be potential issues.'
|
||||
);
|
||||
}
|
||||
fileList.value = value as string[];
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
() => {
|
||||
loadImage();
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
adaModalWidth(dialogWidth, 1080);
|
||||
loadImage();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.n-upload {
|
||||
width: auto; /** 居中 */
|
||||
}
|
||||
|
||||
.upload {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&-card {
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
&-item {
|
||||
margin: 0 8px 8px 0;
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background: 0 0;
|
||||
|
||||
.upload-card-item-info::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-info::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
.img-box-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.img-box {
|
||||
position: relative;
|
||||
//padding: 8px;
|
||||
//border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.img-box-actions {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 10;
|
||||
white-space: nowrap;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&:hover {
|
||||
background: 0 0;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-item-select-picture {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
background: #fafafa;
|
||||
color: #666;
|
||||
|
||||
.upload-title {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
428
web/src/components/FileChooser/src/Chooser.vue
Normal file
428
web/src/components/FileChooser/src/Chooser.vue
Normal file
@@ -0,0 +1,428 @@
|
||||
<template>
|
||||
<n-grid :x-gap="5" :y-gap="5" :cols="pageGridCols" responsive="screen">
|
||||
<n-gi :span="2">
|
||||
<n-menu
|
||||
:options="options.kind"
|
||||
style="width: 100%"
|
||||
:default-value="defaultKindValue"
|
||||
:on-update:value="handleUpdateKind"
|
||||
/>
|
||||
</n-gi>
|
||||
<n-gi :span="8">
|
||||
<n-spin style="height: 100%" :show="loading">
|
||||
<n-layout style="height: 100%" content-style="display:flex;flex-direction: column;">
|
||||
<n-layout-header>
|
||||
<BasicForm
|
||||
style="padding-top: 10px; box-sizing: border-box"
|
||||
@register="register"
|
||||
@submit="reloadTable"
|
||||
@reset="reloadTable"
|
||||
@keyup.enter="reloadTable"
|
||||
ref="searchFormRef"
|
||||
>
|
||||
<template #statusSlot="{ model, field }">
|
||||
<n-input v-model:value="model[field]" />
|
||||
</template>
|
||||
</BasicForm>
|
||||
</n-layout-header>
|
||||
|
||||
<n-empty v-if="isEmptyDataSource()" description="无数据" />
|
||||
<n-layout-content style="padding: 5px; box-sizing: border-box">
|
||||
<n-grid :cols="imageGridCols" x-gap="15" y-gap="15" responsive="screen">
|
||||
<n-grid-item
|
||||
v-for="item in dataSource"
|
||||
:key="item.id"
|
||||
:class="{ imageActive: isSelected(item) }"
|
||||
>
|
||||
<n-card
|
||||
size="small"
|
||||
hoverable
|
||||
content-style="padding: 3px;"
|
||||
footer-style="padding: 0"
|
||||
style="overflow: hidden"
|
||||
bordered
|
||||
>
|
||||
<div @click="handleSelect(item)">
|
||||
<n-image
|
||||
v-if="item.kind === 'image'"
|
||||
preview-disabled
|
||||
class="image-size"
|
||||
:src="item.fileUrl"
|
||||
:on-error="errorImg"
|
||||
/>
|
||||
<n-avatar v-else class="image-size">
|
||||
<span style="font-size: 24px"> {{ getFileExt(item.fileUrl) }}</span>
|
||||
</n-avatar>
|
||||
</div>
|
||||
<template #footer>
|
||||
<n-ellipsis style="padding-left: 5px">
|
||||
{{ item.name }}
|
||||
</n-ellipsis>
|
||||
</template>
|
||||
|
||||
<template #action style="padding: 5px">
|
||||
<n-space justify="center">
|
||||
<n-button
|
||||
strong
|
||||
secondary
|
||||
size="tiny"
|
||||
type="primary"
|
||||
@click="item.kind === 'image' ? handlePreview(item) : handleDown(item)"
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<EyeOutlined v-if="item.kind === 'image'" />
|
||||
<DownloadOutlined v-else />
|
||||
</n-icon>
|
||||
</template>
|
||||
|
||||
{{ item.kind === 'image' ? '预览' : '下载' }}
|
||||
</n-button>
|
||||
<n-button
|
||||
strong
|
||||
secondary
|
||||
size="tiny"
|
||||
type="error"
|
||||
@click="handleDelete(item)"
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<DeleteOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
删除
|
||||
</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-card>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</n-layout-content>
|
||||
<n-space
|
||||
v-if="!isEmptyDataSource()"
|
||||
justify="end"
|
||||
align="center"
|
||||
style="box-sizing: border-box; padding: 5px; margin: 0"
|
||||
>
|
||||
<n-pagination
|
||||
v-model:page="params.page"
|
||||
v-model:page-size="params.pageSize"
|
||||
:page-count="params.pageCount"
|
||||
:page-slot="pageSlot"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:on-update:page="onUpdatePage"
|
||||
:on-update:page-size="onUpdatePageSize"
|
||||
show-size-picker
|
||||
show-quick-jumper
|
||||
/>
|
||||
</n-space>
|
||||
</n-layout>
|
||||
</n-spin>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
<Preview ref="previewRef" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { NSpace, NInput, NButton, useMessage, NEllipsis, useDialog } from 'naive-ui';
|
||||
import { onMounted, ref, h, computed } from 'vue';
|
||||
import { BasicForm, FormSchema, useForm } from '@/components/Form';
|
||||
import { defRangeShortcuts } from '@/utils/dateUtil';
|
||||
import { EyeOutlined, DeleteOutlined, DownloadOutlined, ClearOutlined } from '@vicons/antd';
|
||||
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||
import { ChooserOption, ClearKind, Delete, List } from '@/api/apply/attachment';
|
||||
import { constantRouterIcon } from '@/router/router-icons';
|
||||
import { errorImg } from '@/utils/hotgo';
|
||||
import { getFileExt } from '@/utils/urlUtils';
|
||||
import { renderIcon } from '@/utils';
|
||||
import { Attachment, FileType, KindOption, KindRawOption } from './model';
|
||||
import Preview from './Preview.vue';
|
||||
import { VNode } from '@vue/runtime-core';
|
||||
|
||||
export interface Props {
|
||||
fileList: string[] | null;
|
||||
maxNumber?: number;
|
||||
fileType?: FileType;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
fileList: null,
|
||||
maxNumber: 1,
|
||||
fileType: 'default',
|
||||
});
|
||||
|
||||
const emit = defineEmits(['saveChange']);
|
||||
const settingStore = useProjectSettingStore();
|
||||
const message = useMessage();
|
||||
const dialog = useDialog();
|
||||
const selectList = ref(props.fileList);
|
||||
const loading = ref(false);
|
||||
const previewRef = ref();
|
||||
const searchFormRef = ref<any>();
|
||||
const dataSource = ref<Attachment[]>([]);
|
||||
|
||||
const defaultKindValue = computed(() => {
|
||||
if (props.fileType === 'default') {
|
||||
return '';
|
||||
}
|
||||
return props.fileType;
|
||||
});
|
||||
|
||||
const pageSlot = computed(() => (settingStore.isMobile ? 3 : 10));
|
||||
|
||||
const imageGridCols = computed(() =>
|
||||
settingStore.isMobile ? '2 s:1 m:2 l:2 xl:2 2xl:3' : '5 s:3 m:4 l:5 xl:5 2xl:6'
|
||||
);
|
||||
|
||||
const pageGridCols = computed(() =>
|
||||
settingStore.isMobile ? '1' : '10 s:1 m:1 l:10 xl:10 2xl:10'
|
||||
);
|
||||
|
||||
const options = ref({
|
||||
drive: [],
|
||||
kind: [],
|
||||
});
|
||||
|
||||
const schemas = ref<FormSchema[]>([
|
||||
{
|
||||
field: 'drive',
|
||||
component: 'NSelect',
|
||||
label: '',
|
||||
defaultValue: null,
|
||||
componentProps: {
|
||||
placeholder: '请选择上传驱动',
|
||||
options: options.value.drive,
|
||||
onUpdateValue: (e: any) => {
|
||||
console.log(e);
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
component: 'NInput',
|
||||
label: '',
|
||||
defaultValue: null,
|
||||
componentProps: {
|
||||
placeholder: '请输入文件名称',
|
||||
options: options.value.drive,
|
||||
onUpdateValue: (e: any) => {
|
||||
console.log(e);
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'updatedAt',
|
||||
component: 'NDatePicker',
|
||||
label: '',
|
||||
componentProps: {
|
||||
type: 'datetimerange',
|
||||
clearable: true,
|
||||
shortcuts: defRangeShortcuts(),
|
||||
onUpdateValue: (e: any) => {
|
||||
console.log(e);
|
||||
},
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
const [register, {}] = useForm({
|
||||
gridProps: { cols: '1 s:1 m:2 l:2 xl:3 2xl:3' },
|
||||
labelWidth: 80,
|
||||
schemas,
|
||||
});
|
||||
|
||||
const params = ref({
|
||||
kind: defaultKindValue.value,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
pageCount: 0,
|
||||
});
|
||||
|
||||
function handleDelete(item: Attachment) {
|
||||
dialog.warning({
|
||||
title: '警告',
|
||||
content: '你确定要删除？',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: () => {
|
||||
Delete({ id: item.id }).then((_res) => {
|
||||
message.success('操作成功');
|
||||
reloadTable();
|
||||
});
|
||||
},
|
||||
onNegativeClick: () => {
|
||||
// message.error('取消');
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handlePreview(item: Attachment) {
|
||||
previewRef.value.openPreview(item.fileUrl);
|
||||
}
|
||||
|
||||
function handleDown(item: Attachment) {
|
||||
window.open(item.fileUrl);
|
||||
}
|
||||
|
||||
function handleSelect(item: Attachment) {
|
||||
if (selectList.value === null || props.maxNumber == 1) {
|
||||
selectList.value = [];
|
||||
}
|
||||
|
||||
const index = selectList.value.findIndex((selected) => selected === item.fileUrl);
|
||||
if (index === -1) {
|
||||
if (selectList.value.length >= props.maxNumber) {
|
||||
message.error('已达最大允许选择上限' + props.maxNumber + '个');
|
||||
return;
|
||||
}
|
||||
selectList.value.push(item.fileUrl);
|
||||
} else {
|
||||
selectList.value.splice(index, 1);
|
||||
}
|
||||
emit('saveChange', selectList.value);
|
||||
}
|
||||
|
||||
function handleUpdateKind(value: string) {
|
||||
params.value.page = 1;
|
||||
params.value.kind = value;
|
||||
loadList();
|
||||
}
|
||||
|
||||
function isSelected(item: Attachment) {
|
||||
if (selectList.value === null) {
|
||||
return false;
|
||||
}
|
||||
return selectList.value.some((selected) => selected === item.fileUrl);
|
||||
}
|
||||
|
||||
function generateKindOptions(kinds: KindRawOption[]): any {
|
||||
const option: KindOption[] = [];
|
||||
kinds.forEach((item) => {
|
||||
const data: KindOption = {
|
||||
label: () => h(NEllipsis, null, { default: () => item.label }),
|
||||
key: item.key,
|
||||
extra: () => createExtraContent(item),
|
||||
icon: constantRouterIcon[item.icon] || null,
|
||||
disabled: isDisabledKindOption(item),
|
||||
};
|
||||
option.push(data);
|
||||
});
|
||||
return option;
|
||||
}
|
||||
|
||||
function isDisabledKindOption(item: KindRawOption): boolean {
|
||||
if (props.fileType === 'default') {
|
||||
return false;
|
||||
}
|
||||
return item.key !== props.fileType;
|
||||
}
|
||||
|
||||
function createExtraContent(item: KindRawOption): VNode {
|
||||
return h(
|
||||
NButton,
|
||||
{
|
||||
quaternary: true,
|
||||
type: 'default',
|
||||
size: 'tiny',
|
||||
style: 'position: absolute; right: 15px;',
|
||||
onClick: (event: MouseEvent) => {
|
||||
event.stopPropagation();
|
||||
dialog.warning({
|
||||
title: '警告',
|
||||
content: '你确定要清空 [' + item.label + '] 分类？该操作不可恢复！',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: () => {
|
||||
ClearKind({ kind: item.key }).then((_res) => {
|
||||
message.success('操作成功');
|
||||
reloadTable();
|
||||
});
|
||||
},
|
||||
onNegativeClick: () => {
|
||||
// message.error('取消');
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
{ icon: renderIcon(ClearOutlined) }
|
||||
);
|
||||
}
|
||||
|
||||
async function loadOptions() {
|
||||
let tmpOptions = await ChooserOption();
|
||||
options.value.drive = tmpOptions.drive;
|
||||
options.value.kind = generateKindOptions(tmpOptions.kind);
|
||||
|
||||
for (const item of schemas.value) {
|
||||
switch (item.field) {
|
||||
case 'drive':
|
||||
item.componentProps.options = options.value.drive;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function loadList() {
|
||||
loading.value = true;
|
||||
List({ ...params.value, ...searchFormRef.value?.formModel }).then((res) => {
|
||||
dataSource.value = res.list;
|
||||
params.value.page = res.page;
|
||||
params.value.pageSize = res.pageSize;
|
||||
params.value.pageCount = res.pageCount;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function isEmptyDataSource(): boolean {
|
||||
return !dataSource.value || dataSource.value.length === 0;
|
||||
}
|
||||
|
||||
function onUpdatePage(page: number) {
|
||||
params.value.page = page;
|
||||
loadList();
|
||||
}
|
||||
|
||||
function onUpdatePageSize(pageSize: number) {
|
||||
params.value.pageSize = pageSize;
|
||||
loadList();
|
||||
}
|
||||
|
||||
function reloadTable() {
|
||||
params.value.page = 1;
|
||||
loadList();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await loadOptions();
|
||||
loadList();
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
reloadTable,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.base-list .n-spin-content {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
:deep(.n-card__action) {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.imageActive {
|
||||
border: 2px solid #3086ff;
|
||||
}
|
||||
|
||||
:deep(img, video) {
|
||||
max-width: 100%;
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
:deep(.image-size) {
|
||||
aspect-ratio: 1/1;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
29
web/src/components/FileChooser/src/Preview.vue
Normal file
29
web/src/components/FileChooser/src/Preview.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<n-modal
|
||||
v-model:show="showModal"
|
||||
preset="card"
|
||||
title="预览"
|
||||
:bordered="false"
|
||||
:style="{ width: '520px' }"
|
||||
>
|
||||
<n-image preview-disabled :src="previewUrl" :on-error="errorImg" />
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { errorImg } from '@/utils/hotgo';
|
||||
import { ref } from 'vue';
|
||||
const showModal = ref(false);
|
||||
const previewUrl = ref('');
|
||||
|
||||
function openPreview(url) {
|
||||
showModal.value = true;
|
||||
previewUrl.value = url;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
openPreview,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
113
web/src/components/FileChooser/src/Upload.vue
Normal file
113
web/src/components/FileChooser/src/Upload.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<n-modal
|
||||
v-model:show="showFileModal"
|
||||
:show-icon="false"
|
||||
preset="dialog"
|
||||
:style="{
|
||||
width: width,
|
||||
}"
|
||||
:title="'上传' + typeTag"
|
||||
>
|
||||
<n-upload
|
||||
multiple
|
||||
directory-dnd
|
||||
:action="`${uploadUrl}${urlPrefix}/upload/file`"
|
||||
:headers="uploadHeaders"
|
||||
:data="{ type: 0 }"
|
||||
@finish="finish"
|
||||
name="file"
|
||||
:max="maxUpload"
|
||||
:default-file-list="fileList"
|
||||
list-type="image"
|
||||
>
|
||||
<n-upload-dragger>
|
||||
<div style="margin-bottom: 12px">
|
||||
<n-icon size="48" :depth="3">
|
||||
<FileAddOutlined />
|
||||
</n-icon>
|
||||
</div>
|
||||
<n-text style="font-size: 16px"> 点击或者拖动{{ typeTag }}到该区域来上传</n-text>
|
||||
<n-p depth="3" style="margin: 8px 0 0 0"> 单次最多允许{{ maxUpload }}个{{ typeTag }}</n-p>
|
||||
</n-upload-dragger>
|
||||
</n-upload>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
import { FileAddOutlined } from '@vicons/antd';
|
||||
import { useUserStoreWidthOut } from '@/store/modules/user';
|
||||
import { useGlobSetting } from '@/hooks/setting';
|
||||
import { NModal, UploadFileInfo, useMessage } from 'naive-ui';
|
||||
import componentSetting from '@/settings/componentSetting';
|
||||
import { ResultEnum } from '@/enums/httpEnum';
|
||||
import { Attachment, FileType, getFileType, UploadTag } from '@/components/FileChooser/src/model';
|
||||
|
||||
export interface Props {
|
||||
width?: string;
|
||||
maxUpload?: number;
|
||||
finishCall?: Function | null;
|
||||
uploadType?: FileType;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
width: '60%',
|
||||
maxUpload: 20,
|
||||
finishCall: null,
|
||||
uploadType: 'default',
|
||||
});
|
||||
|
||||
const fileList = ref<UploadFileInfo[]>([]);
|
||||
const showFileModal = ref(false);
|
||||
const message = useMessage();
|
||||
const useUserStore = useUserStoreWidthOut();
|
||||
const globSetting = useGlobSetting();
|
||||
const { uploadUrl } = globSetting;
|
||||
const urlPrefix = globSetting.urlPrefix || '';
|
||||
const uploadHeaders = reactive({
|
||||
Authorization: useUserStore.token,
|
||||
uploadType: props.uploadType,
|
||||
});
|
||||
|
||||
const typeTag = computed(() => {
|
||||
return getFileType(props.uploadType);
|
||||
});
|
||||
|
||||
//上传结束
|
||||
function finish({ event: Event }) {
|
||||
const res = eval('(' + Event.target.response + ')');
|
||||
const infoField = componentSetting.upload.apiSetting.infoField;
|
||||
const { code } = res;
|
||||
const msg = res.msg || res.message || '上传失败';
|
||||
const result = res[infoField] as Attachment;
|
||||
|
||||
//成功
|
||||
if (code === ResultEnum.SUCCESS) {
|
||||
fileList.value.push({
|
||||
id: result.md5,
|
||||
name: result.name,
|
||||
status: 'finished',
|
||||
type: result.naiveType,
|
||||
});
|
||||
|
||||
message.success('上传' + result.name + '成功');
|
||||
if (props.finishCall !== null) {
|
||||
props.finishCall(result, true);
|
||||
}
|
||||
} else {
|
||||
message.error(msg);
|
||||
if (props.finishCall !== null) {
|
||||
props.finishCall(result, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function openModal() {
|
||||
showFileModal.value = true;
|
||||
fileList.value = [];
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
57
web/src/components/FileChooser/src/model.ts
Normal file
57
web/src/components/FileChooser/src/model.ts
Normal file
@@ -0,0 +1,57 @@
|
||||
import { VNode } from '@vue/runtime-core';
|
||||
|
||||
export type Attachment = {
|
||||
id: number;
|
||||
appId: string;
|
||||
memberId: number;
|
||||
cateId: number;
|
||||
drive: string;
|
||||
name: string;
|
||||
kind: string;
|
||||
metaType: string;
|
||||
naiveType: string;
|
||||
path: string;
|
||||
fileUrl: string;
|
||||
size: number;
|
||||
ext: string;
|
||||
md5: string;
|
||||
status: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
sizeFormat: string;
|
||||
};
|
||||
|
||||
export interface KindRawOption {
|
||||
key: string;
|
||||
label: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
export interface KindOption {
|
||||
key: string;
|
||||
label: any;
|
||||
icon: VNode;
|
||||
extra: any;
|
||||
disabled: boolean;
|
||||
}
|
||||
|
||||
export type FileType = 'image' | 'doc' | 'audio' | 'video' | 'zip' | 'other' | 'default';
|
||||
|
||||
export function getFileType(fileType: string): string {
|
||||
switch (fileType) {
|
||||
case 'image':
|
||||
return '图片';
|
||||
case 'doc':
|
||||
return '文档';
|
||||
case 'audio':
|
||||
return '音频';
|
||||
case 'video':
|
||||
return '视频';
|
||||
case 'zip':
|
||||
return '压缩包';
|
||||
case 'other':
|
||||
case 'default':
|
||||
return '文件';
|
||||
}
|
||||
return '文件';
|
||||
}
|
||||
@@ -5,7 +5,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'SvgIcon',
|
||||
@@ -21,22 +21,22 @@
|
||||
},
|
||||
computed: {
|
||||
component(): string {
|
||||
return this.prefix === 'icon' ? 'svg' : 'i'
|
||||
return this.prefix === 'icon' ? 'svg' : 'i';
|
||||
},
|
||||
iconName(): string {
|
||||
return `#${this.prefix}-${this.name}`
|
||||
return `#${this.prefix}-${this.name}`;
|
||||
},
|
||||
className(): string {
|
||||
if (this.prefix === 'icon') {
|
||||
return 'svg-icon'
|
||||
return 'svg-icon';
|
||||
} else if (this.prefix === 'iconfont') {
|
||||
return 'iconfont icon-' + this.name
|
||||
return 'iconfont icon-' + this.name;
|
||||
} else {
|
||||
return ''
|
||||
return '';
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -68,16 +68,7 @@
|
||||
</n-space>
|
||||
</div>
|
||||
|
||||
<!--预览图片-->
|
||||
<n-modal
|
||||
v-model:show="showModal"
|
||||
preset="card"
|
||||
title="预览"
|
||||
:bordered="false"
|
||||
:style="{ width: '520px' }"
|
||||
>
|
||||
<img :src="previewUrl" />
|
||||
</n-modal>
|
||||
<Preview ref="previewRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -86,6 +77,7 @@
|
||||
import { EyeOutlined, DeleteOutlined, PlusOutlined, CloudDownloadOutlined } from '@vicons/antd';
|
||||
import { basicProps } from './props';
|
||||
import { useMessage, useDialog } from 'naive-ui';
|
||||
import Preview from '@/components/FileChooser/src/Preview.vue';
|
||||
import { ResultEnum } from '@/enums/httpEnum';
|
||||
import componentSetting from '@/settings/componentSetting';
|
||||
import { useGlobSetting } from '@/hooks/setting';
|
||||
@@ -110,6 +102,7 @@
|
||||
};
|
||||
});
|
||||
|
||||
const previewRef = ref();
|
||||
const message = useMessage();
|
||||
const dialog = useDialog();
|
||||
const uploadTitle = ref(props.fileType === 'image' ? '上传图片' : '上传附件');
|
||||
@@ -185,9 +178,9 @@
|
||||
|
||||
//预览
|
||||
function preview(url: string) {
|
||||
state.showModal = true;
|
||||
state.previewUrl = url;
|
||||
previewRef.value.openPreview(url);
|
||||
}
|
||||
|
||||
//下载
|
||||
function download(url: string) {
|
||||
window.open(url);
|
||||
@@ -294,6 +287,8 @@
|
||||
uploadTitle,
|
||||
fileAvatarCSS,
|
||||
getFileExt,
|
||||
Preview,
|
||||
previewRef,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@@ -26,6 +26,10 @@
|
||||
helpText?: string;
|
||||
}
|
||||
|
||||
const emit = defineEmits(['update:value']);
|
||||
const props = withDefaults(defineProps<Props>(), { value: '', maxNumber: 1, helpText: '' });
|
||||
const image = ref<string>('');
|
||||
const images = ref<string[]>([]);
|
||||
const globSetting = useGlobSetting();
|
||||
const urlPrefix = globSetting.urlPrefix || '';
|
||||
const { uploadUrl } = globSetting;
|
||||
@@ -33,10 +37,6 @@
|
||||
const uploadHeaders = reactive({
|
||||
Authorization: useUserStore.token,
|
||||
});
|
||||
const emit = defineEmits(['update:value']);
|
||||
const props = withDefaults(defineProps<Props>(), { value: '', maxNumber: 1, helpText: '' });
|
||||
const image = ref<string>('');
|
||||
const images = ref<string[]>([]);
|
||||
|
||||
function uploadChange(list: string | string[]) {
|
||||
if (props.maxNumber === 1) {
|
||||
@@ -48,7 +48,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
//赋值默认图片显示
|
||||
function loadImage() {
|
||||
if (props.maxNumber === 1) {
|
||||
image.value = props.value as string;
|
||||
|
||||
Reference in New Issue
Block a user