feat: add views
This commit is contained in:
xingyu4j
966
apps/web-tdesign/src/components/cron-tab/cron-tab.vue
Normal file
966
apps/web-tdesign/src/components/cron-tab/cron-tab.vue
Normal file
@@ -0,0 +1,966 @@
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue';
|
||||
|
||||
import type { CronData, CronValue, ShortcutsType } from './types';
|
||||
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
Form,
|
||||
Input,
|
||||
InputNumber,
|
||||
RadioButton,
|
||||
RadioGroup,
|
||||
Select,
|
||||
Tabs,
|
||||
} from 'tdesign-vue-next';
|
||||
|
||||
import { message } from '#/adapter/tdesign';
|
||||
|
||||
import { CronDataDefault, CronValueDefault } from './types';
|
||||
|
||||
defineOptions({ name: 'Crontab' });
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: '* * * * * ?',
|
||||
},
|
||||
shortcuts: {
|
||||
type: Array as PropType<ShortcutsType[]>,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const defaultValue = ref('');
|
||||
const dialogVisible = ref(false);
|
||||
|
||||
const cronValue = reactive<CronValue>(CronValueDefault);
|
||||
|
||||
const data = reactive<CronData>(CronDataDefault);
|
||||
const value_second = computed(() => {
|
||||
const v = cronValue.second;
|
||||
switch (v.type) {
|
||||
case '0': {
|
||||
return '*';
|
||||
}
|
||||
case '1': {
|
||||
return `${v.range.start}-${v.range.end}`;
|
||||
}
|
||||
case '2': {
|
||||
return `${v.loop.start}/${v.loop.end}`;
|
||||
}
|
||||
case '3': {
|
||||
return v.appoint.length > 0 ? v.appoint.join(',') : '*';
|
||||
}
|
||||
default: {
|
||||
return '*';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const value_minute = computed(() => {
|
||||
const v = cronValue.minute;
|
||||
switch (v.type) {
|
||||
case '0': {
|
||||
return '*';
|
||||
}
|
||||
case '1': {
|
||||
return `${v.range.start}-${v.range.end}`;
|
||||
}
|
||||
case '2': {
|
||||
return `${v.loop.start}/${v.loop.end}`;
|
||||
}
|
||||
case '3': {
|
||||
return v.appoint.length > 0 ? v.appoint.join(',') : '*';
|
||||
}
|
||||
default: {
|
||||
return '*';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const value_hour = computed(() => {
|
||||
const v = cronValue.hour;
|
||||
switch (v.type) {
|
||||
case '0': {
|
||||
return '*';
|
||||
}
|
||||
case '1': {
|
||||
return `${v.range.start}-${v.range.end}`;
|
||||
}
|
||||
case '2': {
|
||||
return `${v.loop.start}/${v.loop.end}`;
|
||||
}
|
||||
case '3': {
|
||||
return v.appoint.length > 0 ? v.appoint.join(',') : '*';
|
||||
}
|
||||
default: {
|
||||
return '*';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const value_day = computed(() => {
|
||||
const v = cronValue.day;
|
||||
switch (v.type) {
|
||||
case '0': {
|
||||
return '*';
|
||||
}
|
||||
case '1': {
|
||||
return `${v.range.start}-${v.range.end}`;
|
||||
}
|
||||
case '2': {
|
||||
return `${v.loop.start}/${v.loop.end}`;
|
||||
}
|
||||
case '3': {
|
||||
return v.appoint.length > 0 ? v.appoint.join(',') : '*';
|
||||
}
|
||||
case '4': {
|
||||
return 'L';
|
||||
}
|
||||
case '5': {
|
||||
return '?';
|
||||
}
|
||||
default: {
|
||||
return '*';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const value_month = computed(() => {
|
||||
const v = cronValue.month;
|
||||
switch (v.type) {
|
||||
case '0': {
|
||||
return '*';
|
||||
}
|
||||
case '1': {
|
||||
return `${v.range.start}-${v.range.end}`;
|
||||
}
|
||||
case '2': {
|
||||
return `${v.loop.start}/${v.loop.end}`;
|
||||
}
|
||||
case '3': {
|
||||
return v.appoint.length > 0 ? v.appoint.join(',') : '*';
|
||||
}
|
||||
default: {
|
||||
return '*';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const value_week = computed(() => {
|
||||
const v = cronValue.week;
|
||||
switch (v.type) {
|
||||
case '0': {
|
||||
return '*';
|
||||
}
|
||||
case '1': {
|
||||
return `${v.range.start}-${v.range.end}`;
|
||||
}
|
||||
case '2': {
|
||||
return `${v.loop.end}#${v.loop.start}`;
|
||||
}
|
||||
case '3': {
|
||||
return v.appoint.length > 0 ? v.appoint.join(',') : '*';
|
||||
}
|
||||
case '4': {
|
||||
return `${v.last}L`;
|
||||
}
|
||||
case '5': {
|
||||
return '?';
|
||||
}
|
||||
default: {
|
||||
return '*';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const value_year = computed(() => {
|
||||
const v = cronValue.year;
|
||||
switch (v.type) {
|
||||
case '-1': {
|
||||
return '';
|
||||
}
|
||||
case '0': {
|
||||
return '*';
|
||||
}
|
||||
case '1': {
|
||||
return `${v.range.start}-${v.range.end}`;
|
||||
}
|
||||
case '2': {
|
||||
return `${v.loop.start}/${v.loop.end}`;
|
||||
}
|
||||
case '3': {
|
||||
return v.appoint.length > 0 ? v.appoint.join(',') : '';
|
||||
}
|
||||
default: {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => cronValue.week.type,
|
||||
(val: string) => {
|
||||
if (val !== '5') {
|
||||
cronValue.day.type = '5';
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => cronValue.day.type,
|
||||
(val: string) => {
|
||||
if (val !== '5') {
|
||||
cronValue.week.type = '5';
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
defaultValue.value = props.modelValue;
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
defaultValue.value = props.modelValue;
|
||||
});
|
||||
|
||||
const select = ref<string>();
|
||||
|
||||
watch(
|
||||
() => select.value,
|
||||
() => {
|
||||
if (select.value === 'custom') {
|
||||
open();
|
||||
} else {
|
||||
defaultValue.value = select.value || '';
|
||||
emit('update:modelValue', defaultValue.value);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
function open() {
|
||||
set();
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
function set() {
|
||||
defaultValue.value = props.modelValue;
|
||||
let arr = (props.modelValue || '* * * * * ?').split(' ');
|
||||
|
||||
/** 简单检查 */
|
||||
if (arr.length < 6) {
|
||||
message.warning('cron表达式错误，已转换为默认表达式');
|
||||
arr = '* * * * * ?'.split(' ');
|
||||
}
|
||||
|
||||
/** 秒 */
|
||||
if (arr[0] === '*') {
|
||||
cronValue.second.type = '0';
|
||||
} else if (arr[0]?.includes('-')) {
|
||||
cronValue.second.type = '1';
|
||||
cronValue.second.range.start = Number(arr[0].split('-')[0]);
|
||||
cronValue.second.range.end = Number(arr[0].split('-')[1]);
|
||||
} else if (arr[0]?.includes('/')) {
|
||||
cronValue.second.type = '2';
|
||||
cronValue.second.loop.start = Number(arr[0].split('/')[0]);
|
||||
cronValue.second.loop.end = Number(arr[0].split('/')[1]);
|
||||
} else {
|
||||
cronValue.second.type = '3';
|
||||
cronValue.second.appoint = arr[0]?.split(',') || [];
|
||||
}
|
||||
|
||||
/** 分 */
|
||||
if (arr[1] === '*') {
|
||||
cronValue.minute.type = '0';
|
||||
} else if (arr[1]?.includes('-')) {
|
||||
cronValue.minute.type = '1';
|
||||
cronValue.minute.range.start = Number(arr[1].split('-')[0]);
|
||||
cronValue.minute.range.end = Number(arr[1].split('-')[1]);
|
||||
} else if (arr[1]?.includes('/')) {
|
||||
cronValue.minute.type = '2';
|
||||
cronValue.minute.loop.start = Number(arr[1].split('/')[0]);
|
||||
cronValue.minute.loop.end = Number(arr[1].split('/')[1]);
|
||||
} else {
|
||||
cronValue.minute.type = '3';
|
||||
cronValue.minute.appoint = arr[1]?.split(',') || [];
|
||||
}
|
||||
|
||||
/** 小时 */
|
||||
if (arr[2] === '*') {
|
||||
cronValue.hour.type = '0';
|
||||
} else if (arr[2]?.includes('-')) {
|
||||
cronValue.hour.type = '1';
|
||||
cronValue.hour.range.start = Number(arr[2].split('-')[0]);
|
||||
cronValue.hour.range.end = Number(arr[2].split('-')[1]);
|
||||
} else if (arr[2]?.includes('/')) {
|
||||
cronValue.hour.type = '2';
|
||||
cronValue.hour.loop.start = Number(arr[2].split('/')[0]);
|
||||
cronValue.hour.loop.end = Number(arr[2].split('/')[1]);
|
||||
} else {
|
||||
cronValue.hour.type = '3';
|
||||
cronValue.hour.appoint = arr[2]?.split(',') || [];
|
||||
}
|
||||
|
||||
/** 日 */
|
||||
switch (arr[3]) {
|
||||
case '*': {
|
||||
cronValue.day.type = '0';
|
||||
|
||||
break;
|
||||
}
|
||||
case '?': {
|
||||
cronValue.day.type = '5';
|
||||
|
||||
break;
|
||||
}
|
||||
case 'L': {
|
||||
cronValue.day.type = '4';
|
||||
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
if (arr[3]?.includes('-')) {
|
||||
cronValue.day.type = '1';
|
||||
cronValue.day.range.start = Number(arr[3].split('-')[0]);
|
||||
cronValue.day.range.end = Number(arr[3].split('-')[1]);
|
||||
} else if (arr[3]?.includes('/')) {
|
||||
cronValue.day.type = '2';
|
||||
cronValue.day.loop.start = Number(arr[3].split('/')[0]);
|
||||
cronValue.day.loop.end = Number(arr[3].split('/')[1]);
|
||||
} else {
|
||||
cronValue.day.type = '3';
|
||||
cronValue.day.appoint = arr[3]?.split(',') || [];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 月 */
|
||||
if (arr[4] === '*') {
|
||||
cronValue.month.type = '0';
|
||||
} else if (arr[4]?.includes('-')) {
|
||||
cronValue.month.type = '1';
|
||||
cronValue.month.range.start = Number(arr[4].split('-')[0]);
|
||||
cronValue.month.range.end = Number(arr[4].split('-')[1]);
|
||||
} else if (arr[4]?.includes('/')) {
|
||||
cronValue.month.type = '2';
|
||||
cronValue.month.loop.start = Number(arr[4].split('/')[0]);
|
||||
cronValue.month.loop.end = Number(arr[4].split('/')[1]);
|
||||
} else {
|
||||
cronValue.month.type = '3';
|
||||
cronValue.month.appoint = arr[4]?.split(',') || [];
|
||||
}
|
||||
|
||||
/** 周 */
|
||||
if (arr[5] === '*') {
|
||||
cronValue.week.type = '0';
|
||||
} else if (arr[5] === '?') {
|
||||
cronValue.week.type = '5';
|
||||
} else if (arr[5]?.includes('-')) {
|
||||
cronValue.week.type = '1';
|
||||
cronValue.week.range.start = arr[5].split('-')[0] || '';
|
||||
cronValue.week.range.end = arr[5].split('-')[1] || '';
|
||||
} else if (arr[5]?.includes('#')) {
|
||||
cronValue.week.type = '2';
|
||||
cronValue.week.loop.start = Number(arr[5].split('#')[1]);
|
||||
cronValue.week.loop.end = arr[5].split('#')[0] || '';
|
||||
} else if (arr[5]?.includes('L')) {
|
||||
cronValue.week.type = '4';
|
||||
cronValue.week.last = arr[5].split('L')[0] || '';
|
||||
} else {
|
||||
cronValue.week.type = '3';
|
||||
cronValue.week.appoint = arr[5]?.split(',') || [];
|
||||
}
|
||||
|
||||
/** 年 */
|
||||
if (!arr[6]) {
|
||||
cronValue.year.type = '-1';
|
||||
} else if (arr[6] === '*') {
|
||||
cronValue.year.type = '0';
|
||||
} else if (arr[6]?.includes('-')) {
|
||||
cronValue.year.type = '1';
|
||||
cronValue.year.range.start = Number(arr[6].split('-')[0]);
|
||||
cronValue.year.range.end = Number(arr[6].split('-')[1]);
|
||||
} else if (arr[6]?.includes('/')) {
|
||||
cronValue.year.type = '2';
|
||||
cronValue.year.loop.start = Number(arr[6].split('/')[1]);
|
||||
cronValue.year.loop.end = Number(arr[6].split('/')[0]);
|
||||
} else {
|
||||
cronValue.year.type = '3';
|
||||
cronValue.year.appoint = arr[6]?.split(',') || [];
|
||||
}
|
||||
}
|
||||
|
||||
function submit() {
|
||||
const year = value_year.value ? ` ${value_year.value}` : '';
|
||||
defaultValue.value = `${value_second.value} ${value_minute.value} ${
|
||||
value_hour.value
|
||||
} ${value_day.value} ${value_month.value} ${value_week.value}${year}`;
|
||||
emit('update:modelValue', defaultValue.value);
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
|
||||
function inputChange() {
|
||||
emit('update:modelValue', defaultValue.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Input
|
||||
v-model="defaultValue"
|
||||
class="input-with-select"
|
||||
v-bind="$attrs"
|
||||
@input="inputChange"
|
||||
>
|
||||
<template #addonAfter>
|
||||
<Select v-model="select" placeholder="生成器" class="w-36">
|
||||
<Select.Option value="0 * * * * ?">每分钟</Select.Option>
|
||||
<Select.Option value="0 0 * * * ?">每小时</Select.Option>
|
||||
<Select.Option value="0 0 0 * * ?">每天零点</Select.Option>
|
||||
<Select.Option value="0 0 0 1 * ?">每月一号零点</Select.Option>
|
||||
<Select.Option value="0 0 0 L * ?">每月最后一天零点</Select.Option>
|
||||
<Select.Option value="0 0 0 ? * 1">每周星期日零点</Select.Option>
|
||||
<Select.Option
|
||||
v-for="(item, index) in shortcuts"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.text }}
|
||||
</Select.Option>
|
||||
<Select.Option value="custom">自定义</Select.Option>
|
||||
</Select>
|
||||
</template>
|
||||
</Input>
|
||||
|
||||
<Dialog
|
||||
v-model:open="dialogVisible"
|
||||
:width="720"
|
||||
destroy-on-close
|
||||
title="cron规则生成器"
|
||||
>
|
||||
<div class="sc-cron">
|
||||
<Tabs>
|
||||
<Tabs.TabPane key="second">
|
||||
<template #tab>
|
||||
<div class="sc-cron-num">
|
||||
<h2>秒</h2>
|
||||
<h4>{{ value_second }}</h4>
|
||||
</div>
|
||||
</template>
|
||||
<Form>
|
||||
<Form.Item label="类型">
|
||||
<RadioGroup v-model="cronValue.second.type">
|
||||
<RadioButton value="0">任意值</RadioButton>
|
||||
<RadioButton value="1">范围</RadioButton>
|
||||
<RadioButton value="2">间隔</RadioButton>
|
||||
<RadioButton value="3">指定</RadioButton>
|
||||
</RadioGroup>
|
||||
</Form.Item>
|
||||
<Form.Item v-if="cronValue.second.type === '1'" label="范围">
|
||||
<InputNumber
|
||||
v-model="cronValue.second.range.start"
|
||||
:max="59"
|
||||
:min="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
<span style="padding: 0 15px">-</span>
|
||||
<InputNumber
|
||||
v-model="cronValue.second.range.end"
|
||||
:max="59"
|
||||
:min="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item v-if="cronValue.second.type === '2'" label="间隔">
|
||||
<InputNumber
|
||||
v-model="cronValue.second.loop.start"
|
||||
:max="59"
|
||||
:min="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
秒开始，每
|
||||
<InputNumber
|
||||
v-model="cronValue.second.loop.end"
|
||||
:max="59"
|
||||
:min="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
秒执行一次
|
||||
</Form.Item>
|
||||
<Form.Item v-if="cronValue.second.type === '3'" label="指定">
|
||||
<Select
|
||||
v-model="cronValue.second.appoint"
|
||||
mode="multiple"
|
||||
style="width: 100%"
|
||||
>
|
||||
<Select.Option
|
||||
v-for="(item, index) in data.second"
|
||||
:key="index"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Tabs.TabPane>
|
||||
|
||||
<Tabs.TabPane key="minute">
|
||||
<template #tab>
|
||||
<div class="sc-cron-num">
|
||||
<h2>分钟</h2>
|
||||
<h4>{{ value_minute }}</h4>
|
||||
</div>
|
||||
</template>
|
||||
<Form>
|
||||
<Form.Item label="类型">
|
||||
<RadioGroup v-model="cronValue.minute.type">
|
||||
<RadioButton value="0">任意值</RadioButton>
|
||||
<RadioButton value="1">范围</RadioButton>
|
||||
<RadioButton value="2">间隔</RadioButton>
|
||||
<RadioButton value="3">指定</RadioButton>
|
||||
</RadioGroup>
|
||||
</Form.Item>
|
||||
<Form.Item v-if="cronValue.minute.type === '1'" label="范围">
|
||||
<InputNumber
|
||||
v-model="cronValue.minute.range.start"
|
||||
:max="59"
|
||||
:min="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
<span style="padding: 0 15px">-</span>
|
||||
<InputNumber
|
||||
v-model="cronValue.minute.range.end"
|
||||
:max="59"
|
||||
:min="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item v-if="cronValue.minute.type === '2'" label="间隔">
|
||||
<InputNumber
|
||||
v-model="cronValue.minute.loop.start"
|
||||
:max="59"
|
||||
:min="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
分钟开始，每
|
||||
<InputNumber
|
||||
v-model="cronValue.minute.loop.end"
|
||||
:max="59"
|
||||
:min="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
分钟执行一次
|
||||
</Form.Item>
|
||||
<Form.Item v-if="cronValue.minute.type === '3'" label="指定">
|
||||
<Select
|
||||
v-model="cronValue.minute.appoint"
|
||||
mode="multiple"
|
||||
style="width: 100%"
|
||||
>
|
||||
<Select.Option
|
||||
v-for="(item, index) in data.minute"
|
||||
:key="index"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Tabs.TabPane>
|
||||
|
||||
<Tabs.TabPane key="hour">
|
||||
<template #tab>
|
||||
<div class="sc-cron-num">
|
||||
<h2>小时</h2>
|
||||
<h4>{{ value_hour }}</h4>
|
||||
</div>
|
||||
</template>
|
||||
<Form>
|
||||
<Form.Item label="类型">
|
||||
<RadioGroup v-model="cronValue.hour.type">
|
||||
<RadioButton value="0">任意值</RadioButton>
|
||||
<RadioButton value="1">范围</RadioButton>
|
||||
<RadioButton value="2">间隔</RadioButton>
|
||||
<RadioButton value="3">指定</RadioButton>
|
||||
</RadioGroup>
|
||||
</Form.Item>
|
||||
<Form.Item v-if="cronValue.hour.type === '1'" label="范围">
|
||||
<InputNumber
|
||||
v-model="cronValue.hour.range.start"
|
||||
:max="23"
|
||||
:min="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
<span style="padding: 0 15px">-</span>
|
||||
<InputNumber
|
||||
v-model="cronValue.hour.range.end"
|
||||
:max="23"
|
||||
:min="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item v-if="cronValue.hour.type === '2'" label="间隔">
|
||||
<InputNumber
|
||||
v-model="cronValue.hour.loop.start"
|
||||
:max="23"
|
||||
:min="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
小时开始，每
|
||||
<InputNumber
|
||||
v-model="cronValue.hour.loop.end"
|
||||
:max="23"
|
||||
:min="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
小时执行一次
|
||||
</Form.Item>
|
||||
<Form.Item v-if="cronValue.hour.type === '3'" label="指定">
|
||||
<Select
|
||||
v-model="cronValue.hour.appoint"
|
||||
mode="multiple"
|
||||
style="width: 100%"
|
||||
>
|
||||
<Select.Option
|
||||
v-for="(item, index) in data.hour"
|
||||
:key="index"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Tabs.TabPane>
|
||||
|
||||
<Tabs.TabPane key="day">
|
||||
<template #tab>
|
||||
<div class="sc-cron-num">
|
||||
<h2>日</h2>
|
||||
<h4>{{ value_day }}</h4>
|
||||
</div>
|
||||
</template>
|
||||
<Form>
|
||||
<Form.Item label="类型">
|
||||
<RadioGroup v-model="cronValue.day.type">
|
||||
<RadioButton value="0">任意值</RadioButton>
|
||||
<RadioButton value="1">范围</RadioButton>
|
||||
<RadioButton value="2">间隔</RadioButton>
|
||||
<RadioButton value="3">指定</RadioButton>
|
||||
<RadioButton value="4">本月最后一天</RadioButton>
|
||||
<RadioButton value="5">不指定</RadioButton>
|
||||
</RadioGroup>
|
||||
</Form.Item>
|
||||
<Form.Item v-if="cronValue.day.type === '1'" label="范围">
|
||||
<InputNumber
|
||||
v-model="cronValue.day.range.start"
|
||||
:max="31"
|
||||
:min="1"
|
||||
controls-position="right"
|
||||
/>
|
||||
<span style="padding: 0 15px">-</span>
|
||||
<InputNumber
|
||||
v-model="cronValue.day.range.end"
|
||||
:max="31"
|
||||
:min="1"
|
||||
controls-position="right"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item v-if="cronValue.day.type === '2'" label="间隔">
|
||||
<InputNumber
|
||||
v-model="cronValue.day.loop.start"
|
||||
:max="31"
|
||||
:min="1"
|
||||
controls-position="right"
|
||||
/>
|
||||
号开始，每
|
||||
<InputNumber
|
||||
v-model="cronValue.day.loop.end"
|
||||
:max="31"
|
||||
:min="1"
|
||||
controls-position="right"
|
||||
/>
|
||||
天执行一次
|
||||
</Form.Item>
|
||||
<Form.Item v-if="cronValue.day.type === '3'" label="指定">
|
||||
<Select
|
||||
v-model="cronValue.day.appoint"
|
||||
mode="multiple"
|
||||
style="width: 100%"
|
||||
>
|
||||
<Select.Option
|
||||
v-for="(item, index) in data.day"
|
||||
:key="index"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Tabs.TabPane>
|
||||
|
||||
<Tabs.TabPane key="month">
|
||||
<template #tab>
|
||||
<div class="sc-cron-num">
|
||||
<h2>月</h2>
|
||||
<h4>{{ value_month }}</h4>
|
||||
</div>
|
||||
</template>
|
||||
<Form>
|
||||
<Form.Item label="类型">
|
||||
<RadioGroup v-model="cronValue.month.type">
|
||||
<RadioButton value="0">任意值</RadioButton>
|
||||
<RadioButton value="1">范围</RadioButton>
|
||||
<RadioButton value="2">间隔</RadioButton>
|
||||
<RadioButton value="3">指定</RadioButton>
|
||||
</RadioGroup>
|
||||
</Form.Item>
|
||||
<Form.Item v-if="cronValue.month.type === '1'" label="范围">
|
||||
<InputNumber
|
||||
v-model="cronValue.month.range.start"
|
||||
:max="12"
|
||||
:min="1"
|
||||
controls-position="right"
|
||||
/>
|
||||
<span style="padding: 0 15px">-</span>
|
||||
<InputNumber
|
||||
v-model="cronValue.month.range.end"
|
||||
:max="12"
|
||||
:min="1"
|
||||
controls-position="right"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item v-if="cronValue.month.type === '2'" label="间隔">
|
||||
<InputNumber
|
||||
v-model="cronValue.month.loop.start"
|
||||
:max="12"
|
||||
:min="1"
|
||||
controls-position="right"
|
||||
/>
|
||||
月开始，每
|
||||
<InputNumber
|
||||
v-model="cronValue.month.loop.end"
|
||||
:max="12"
|
||||
:min="1"
|
||||
controls-position="right"
|
||||
/>
|
||||
月执行一次
|
||||
</Form.Item>
|
||||
<Form.Item v-if="cronValue.month.type === '3'" label="指定">
|
||||
<Select
|
||||
v-model="cronValue.month.appoint"
|
||||
mode="multiple"
|
||||
style="width: 100%"
|
||||
>
|
||||
<Select.Option
|
||||
v-for="(item, index) in data.month"
|
||||
:key="index"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Tabs.TabPane>
|
||||
|
||||
<Tabs.TabPane key="week">
|
||||
<template #tab>
|
||||
<div class="sc-cron-num">
|
||||
<h2>周</h2>
|
||||
<h4>{{ value_week }}</h4>
|
||||
</div>
|
||||
</template>
|
||||
<Form>
|
||||
<Form.Item label="类型">
|
||||
<RadioGroup v-model="cronValue.week.type">
|
||||
<RadioButton value="0">任意值</RadioButton>
|
||||
<RadioButton value="1">范围</RadioButton>
|
||||
<RadioButton value="2">间隔</RadioButton>
|
||||
<RadioButton value="3">指定</RadioButton>
|
||||
<RadioButton value="4">本月最后一周</RadioButton>
|
||||
<RadioButton value="5">不指定</RadioButton>
|
||||
</RadioGroup>
|
||||
</Form.Item>
|
||||
<Form.Item v-if="cronValue.week.type === '1'" label="范围">
|
||||
<Select v-model="cronValue.week.range.start">
|
||||
<Select.Option
|
||||
v-for="(item, index) in data.week"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</Select>
|
||||
<span style="padding: 0 15px">-</span>
|
||||
<Select v-model="cronValue.week.range.end">
|
||||
<Select.Option
|
||||
v-for="(item, index) in data.week"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item v-if="cronValue.week.type === '2'" label="间隔">
|
||||
第
|
||||
<InputNumber
|
||||
v-model="cronValue.week.loop.start"
|
||||
:max="4"
|
||||
:min="1"
|
||||
controls-position="right"
|
||||
/>
|
||||
周的星期
|
||||
<Select v-model="cronValue.week.loop.end">
|
||||
<Select.Option
|
||||
v-for="(item, index) in data.week"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</Select>
|
||||
执行一次
|
||||
</Form.Item>
|
||||
<Form.Item v-if="cronValue.week.type === '3'" label="指定">
|
||||
<Select
|
||||
v-model="cronValue.week.appoint"
|
||||
mode="multiple"
|
||||
style="width: 100%"
|
||||
>
|
||||
<Select.Option
|
||||
v-for="(item, index) in data.week"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item v-if="cronValue.week.type === '4'" label="最后一周">
|
||||
<Select v-model="cronValue.week.last">
|
||||
<Select.Option
|
||||
v-for="(item, index) in data.week"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Tabs.TabPane>
|
||||
|
||||
<Tabs.TabPane key="year">
|
||||
<template #tab>
|
||||
<div class="sc-cron-num">
|
||||
<h2>年</h2>
|
||||
<h4>{{ value_year }}</h4>
|
||||
</div>
|
||||
</template>
|
||||
<Form>
|
||||
<Form.Item label="类型">
|
||||
<RadioGroup v-model="cronValue.year.type">
|
||||
<RadioButton value="-1">忽略</RadioButton>
|
||||
<RadioButton value="0">任意值</RadioButton>
|
||||
<RadioButton value="1">范围</RadioButton>
|
||||
<RadioButton value="2">间隔</RadioButton>
|
||||
<RadioButton value="3">指定</RadioButton>
|
||||
</RadioGroup>
|
||||
</Form.Item>
|
||||
<Form.Item v-if="cronValue.year.type === '1'" label="范围">
|
||||
<InputNumber
|
||||
v-model="cronValue.year.range.start"
|
||||
controls-position="right"
|
||||
/>
|
||||
<span style="padding: 0 15px">-</span>
|
||||
<InputNumber
|
||||
v-model="cronValue.year.range.end"
|
||||
controls-position="right"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item v-if="cronValue.year.type === '2'" label="间隔">
|
||||
<InputNumber
|
||||
v-model="cronValue.year.loop.start"
|
||||
controls-position="right"
|
||||
/>
|
||||
年开始，每
|
||||
<InputNumber
|
||||
v-model="cronValue.year.loop.end"
|
||||
:min="1"
|
||||
controls-position="right"
|
||||
/>
|
||||
年执行一次
|
||||
</Form.Item>
|
||||
<Form.Item v-if="cronValue.year.type === '3'" label="指定">
|
||||
<Select
|
||||
v-model="cronValue.year.appoint"
|
||||
mode="multiple"
|
||||
style="width: 100%"
|
||||
>
|
||||
<Select.Option
|
||||
v-for="(item, index) in data.year"
|
||||
:key="index"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<Button @click="dialogVisible = false">取 消</Button>
|
||||
<Button theme="primary" @click="submit()">确 认</Button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sc-cron :deep(.ant-tabs-tab) {
|
||||
height: auto;
|
||||
padding: 0 7px;
|
||||
line-height: 1;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.sc-cron-num {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sc-cron-num h2 {
|
||||
margin-bottom: 15px;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.sc-cron-num h4 {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
padding: 0 15px;
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
background: hsl(var(--primary) / 10%);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.sc-cron :deep(.ant-tabs-tab.ant-tabs-tab-active) .sc-cron-num h4 {
|
||||
color: #fff;
|
||||
background: hsl(var(--primary));
|
||||
}
|
||||
|
||||
[data-theme='dark'] .sc-cron-num h4 {
|
||||
background: hsl(var(--white));
|
||||
}
|
||||
|
||||
.input-with-select .ant-input-group-addon {
|
||||
background-color: hsl(var(--muted));
|
||||
}
|
||||
</style>
|
||||
1
apps/web-tdesign/src/components/cron-tab/index.ts
Normal file
1
apps/web-tdesign/src/components/cron-tab/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as CronTab } from './cron-tab.vue';
|
||||
266
apps/web-tdesign/src/components/cron-tab/types.ts
Normal file
266
apps/web-tdesign/src/components/cron-tab/types.ts
Normal file
@@ -0,0 +1,266 @@
|
||||
export interface ShortcutsType {
|
||||
text: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export interface CronRange {
|
||||
start: number | string | undefined;
|
||||
end: number | string | undefined;
|
||||
}
|
||||
|
||||
export interface CronLoop {
|
||||
start: number | string | undefined;
|
||||
end: number | string | undefined;
|
||||
}
|
||||
|
||||
export interface CronItem {
|
||||
type: string;
|
||||
range: CronRange;
|
||||
loop: CronLoop;
|
||||
appoint: string[];
|
||||
last?: string;
|
||||
}
|
||||
|
||||
export interface CronValue {
|
||||
second: CronItem;
|
||||
minute: CronItem;
|
||||
hour: CronItem;
|
||||
day: CronItem;
|
||||
month: CronItem;
|
||||
week: CronItem & { last: string };
|
||||
year: CronItem;
|
||||
}
|
||||
|
||||
export interface WeekOption {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export interface CronData {
|
||||
second: string[];
|
||||
minute: string[];
|
||||
hour: string[];
|
||||
day: string[];
|
||||
month: string[];
|
||||
week: WeekOption[];
|
||||
year: number[];
|
||||
}
|
||||
|
||||
const getYear = (): number[] => {
|
||||
const v: number[] = [];
|
||||
const y = new Date().getFullYear();
|
||||
for (let i = 0; i < 11; i++) {
|
||||
v.push(y + i);
|
||||
}
|
||||
return v;
|
||||
};
|
||||
|
||||
export const CronValueDefault: CronValue = {
|
||||
second: {
|
||||
type: '0',
|
||||
range: {
|
||||
start: 1,
|
||||
end: 2,
|
||||
},
|
||||
loop: {
|
||||
start: 0,
|
||||
end: 1,
|
||||
},
|
||||
appoint: [],
|
||||
},
|
||||
minute: {
|
||||
type: '0',
|
||||
range: {
|
||||
start: 1,
|
||||
end: 2,
|
||||
},
|
||||
loop: {
|
||||
start: 0,
|
||||
end: 1,
|
||||
},
|
||||
appoint: [],
|
||||
},
|
||||
hour: {
|
||||
type: '0',
|
||||
range: {
|
||||
start: 1,
|
||||
end: 2,
|
||||
},
|
||||
loop: {
|
||||
start: 0,
|
||||
end: 1,
|
||||
},
|
||||
appoint: [],
|
||||
},
|
||||
day: {
|
||||
type: '0',
|
||||
range: {
|
||||
start: 1,
|
||||
end: 2,
|
||||
},
|
||||
loop: {
|
||||
start: 1,
|
||||
end: 1,
|
||||
},
|
||||
appoint: [],
|
||||
},
|
||||
month: {
|
||||
type: '0',
|
||||
range: {
|
||||
start: 1,
|
||||
end: 2,
|
||||
},
|
||||
loop: {
|
||||
start: 1,
|
||||
end: 1,
|
||||
},
|
||||
appoint: [],
|
||||
},
|
||||
week: {
|
||||
type: '5',
|
||||
range: {
|
||||
start: '2',
|
||||
end: '3',
|
||||
},
|
||||
loop: {
|
||||
start: 0,
|
||||
end: '2',
|
||||
},
|
||||
last: '2',
|
||||
appoint: [],
|
||||
},
|
||||
year: {
|
||||
type: '-1',
|
||||
range: {
|
||||
start: getYear()[0],
|
||||
end: getYear()[1],
|
||||
},
|
||||
loop: {
|
||||
start: getYear()[0],
|
||||
end: 1,
|
||||
},
|
||||
appoint: [],
|
||||
},
|
||||
};
|
||||
|
||||
export const CronDataDefault: CronData = {
|
||||
second: [
|
||||
'0',
|
||||
'5',
|
||||
'15',
|
||||
'20',
|
||||
'25',
|
||||
'30',
|
||||
'35',
|
||||
'40',
|
||||
'45',
|
||||
'50',
|
||||
'55',
|
||||
'59',
|
||||
],
|
||||
minute: [
|
||||
'0',
|
||||
'5',
|
||||
'15',
|
||||
'20',
|
||||
'25',
|
||||
'30',
|
||||
'35',
|
||||
'40',
|
||||
'45',
|
||||
'50',
|
||||
'55',
|
||||
'59',
|
||||
],
|
||||
hour: [
|
||||
'0',
|
||||
'1',
|
||||
'2',
|
||||
'3',
|
||||
'4',
|
||||
'5',
|
||||
'6',
|
||||
'7',
|
||||
'8',
|
||||
'9',
|
||||
'10',
|
||||
'11',
|
||||
'12',
|
||||
'13',
|
||||
'14',
|
||||
'15',
|
||||
'16',
|
||||
'17',
|
||||
'18',
|
||||
'19',
|
||||
'20',
|
||||
'21',
|
||||
'22',
|
||||
'23',
|
||||
],
|
||||
day: [
|
||||
'1',
|
||||
'2',
|
||||
'3',
|
||||
'4',
|
||||
'5',
|
||||
'6',
|
||||
'7',
|
||||
'8',
|
||||
'9',
|
||||
'10',
|
||||
'11',
|
||||
'12',
|
||||
'13',
|
||||
'14',
|
||||
'15',
|
||||
'16',
|
||||
'17',
|
||||
'18',
|
||||
'19',
|
||||
'20',
|
||||
'21',
|
||||
'22',
|
||||
'23',
|
||||
'24',
|
||||
'25',
|
||||
'26',
|
||||
'27',
|
||||
'28',
|
||||
'29',
|
||||
'30',
|
||||
'31',
|
||||
],
|
||||
month: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
|
||||
week: [
|
||||
{
|
||||
value: '1',
|
||||
label: '周日',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '周一',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '周二',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '周三',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '周四',
|
||||
},
|
||||
{
|
||||
value: '6',
|
||||
label: '周五',
|
||||
},
|
||||
{
|
||||
value: '7',
|
||||
label: '周六',
|
||||
},
|
||||
],
|
||||
year: getYear(),
|
||||
};
|
||||
125
apps/web-tdesign/src/components/cropper/cropper-avatar.vue
Normal file
125
apps/web-tdesign/src/components/cropper/cropper-avatar.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<script lang="ts" setup>
|
||||
import type { CSSProperties } from 'vue';
|
||||
|
||||
import type { CropperAvatarProps } from './typing';
|
||||
|
||||
import { computed, ref, unref, watch, watchEffect } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { Button } from 'tdesign-vue-next';
|
||||
|
||||
import { message } from '#/adapter/tdesign';
|
||||
|
||||
import cropperModal from './cropper-modal.vue';
|
||||
|
||||
defineOptions({ name: 'CropperAvatar' });
|
||||
|
||||
const props = withDefaults(defineProps<CropperAvatarProps>(), {
|
||||
width: 200,
|
||||
value: '',
|
||||
showBtn: true,
|
||||
btnProps: () => ({}),
|
||||
btnText: '',
|
||||
uploadApi: () => Promise.resolve(),
|
||||
size: 5,
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:value', 'change']);
|
||||
|
||||
const sourceValue = ref(props.value || '');
|
||||
const [CropperModal, modalApi] = useVbenModal({
|
||||
connectedComponent: cropperModal,
|
||||
});
|
||||
|
||||
const getWidth = computed(() => `${`${props.width}`.replace(/px/, '')}px`);
|
||||
|
||||
const getIconWidth = computed(
|
||||
() => `${Number.parseInt(`${props.width}`.replace(/px/, '')) / 2}px`,
|
||||
);
|
||||
|
||||
const getStyle = computed((): CSSProperties => ({ width: unref(getWidth) }));
|
||||
|
||||
const getImageWrapperStyle = computed(
|
||||
(): CSSProperties => ({ height: unref(getWidth), width: unref(getWidth) }),
|
||||
);
|
||||
|
||||
watchEffect(() => {
|
||||
sourceValue.value = props.value || '';
|
||||
});
|
||||
|
||||
watch(
|
||||
() => sourceValue.value,
|
||||
(v: string) => {
|
||||
emit('update:value', v);
|
||||
},
|
||||
);
|
||||
|
||||
function handleUploadSuccess({ data, source }: any) {
|
||||
sourceValue.value = source;
|
||||
emit('change', { data, source });
|
||||
message.success($t('ui.cropper.uploadSuccess'));
|
||||
}
|
||||
|
||||
const closeModal = () => modalApi.close();
|
||||
const openModal = () => modalApi.open();
|
||||
|
||||
defineExpose({
|
||||
closeModal,
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 头像容器 -->
|
||||
<div class="inline-block text-center" :style="getStyle">
|
||||
<!-- 图片包装器 -->
|
||||
<div
|
||||
class="bg-card group relative cursor-pointer overflow-hidden rounded-full border border-gray-200"
|
||||
:style="getImageWrapperStyle"
|
||||
@click="openModal"
|
||||
>
|
||||
<!-- 遮罩层 -->
|
||||
<div
|
||||
class="duration-400 absolute inset-0 flex cursor-pointer items-center justify-center rounded-full bg-black bg-opacity-40 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
:style="getImageWrapperStyle"
|
||||
>
|
||||
<IconifyIcon
|
||||
icon="lucide:cloud-upload"
|
||||
class="m-auto text-gray-400"
|
||||
:style="{
|
||||
...getImageWrapperStyle,
|
||||
width: getIconWidth,
|
||||
height: getIconWidth,
|
||||
lineHeight: getIconWidth,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<!-- 头像图片 -->
|
||||
<img
|
||||
v-if="sourceValue"
|
||||
:src="sourceValue"
|
||||
alt="avatar"
|
||||
class="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<!-- 上传按钮 -->
|
||||
<Button
|
||||
v-if="showBtn"
|
||||
class="mx-auto mt-2"
|
||||
@click="openModal"
|
||||
v-bind="btnProps"
|
||||
>
|
||||
{{ btnText ? btnText : $t('ui.cropper.selectImage') }}
|
||||
</Button>
|
||||
|
||||
<CropperModal
|
||||
:size="size"
|
||||
:src="sourceValue"
|
||||
:upload-api="uploadApi"
|
||||
@upload-success="handleUploadSuccess"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
304
apps/web-tdesign/src/components/cropper/cropper-modal.vue
Normal file
304
apps/web-tdesign/src/components/cropper/cropper-modal.vue
Normal file
@@ -0,0 +1,304 @@
|
||||
<script lang="ts" setup>
|
||||
import type { UploadFile } from 'tdesign-vue-next';
|
||||
|
||||
import type { CropendResult, CropperModalProps, CropperType } from './typing';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { $t } from '@vben/locales';
|
||||
import { dataURLtoBlob, isFunction, isNumber } from '@vben/utils';
|
||||
|
||||
import { Avatar, Button, Space, Tooltip, Upload } from 'tdesign-vue-next';
|
||||
|
||||
import { message } from '#/adapter/tdesign';
|
||||
|
||||
import CropperImage from './cropper.vue';
|
||||
|
||||
defineOptions({ name: 'CropperModal' });
|
||||
|
||||
const props = withDefaults(defineProps<CropperModalProps>(), {
|
||||
circled: true,
|
||||
size: 0,
|
||||
src: '',
|
||||
uploadApi: () => Promise.resolve(),
|
||||
});
|
||||
|
||||
const emit = defineEmits(['uploadSuccess', 'uploadError', 'register']);
|
||||
|
||||
let filename = '';
|
||||
const src = ref(props.src || '');
|
||||
const previewSource = ref('');
|
||||
const cropper = ref<CropperType>();
|
||||
let scaleX = 1;
|
||||
let scaleY = 1;
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
onConfirm: handleOk,
|
||||
onOpenChange(isOpen) {
|
||||
if (isOpen) {
|
||||
// 打开时，进行 loading 加载。后续 CropperImage 组件加载完毕，会自动关闭 loading（通过 handleReady）
|
||||
modalLoading(true);
|
||||
const img = new Image();
|
||||
img.src = src.value;
|
||||
img.addEventListener('load', () => {
|
||||
modalLoading(false);
|
||||
});
|
||||
img.addEventListener('error', () => {
|
||||
modalLoading(false);
|
||||
});
|
||||
} else {
|
||||
// 关闭时，清空右侧预览
|
||||
previewSource.value = '';
|
||||
modalLoading(false);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
function modalLoading(loading: boolean) {
|
||||
modalApi.setState({ confirmLoading: loading, loading });
|
||||
}
|
||||
|
||||
// Block upload
|
||||
function handleBeforeUpload(file: UploadFile) {
|
||||
if (
|
||||
file &&
|
||||
props.size > 0 &&
|
||||
isNumber(file.size) &&
|
||||
file.size > 1024 * 1024 * props.size
|
||||
) {
|
||||
emit('uploadError', { msg: $t('ui.cropper.imageTooBig') });
|
||||
return false;
|
||||
}
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file.raw as Blob);
|
||||
src.value = '';
|
||||
previewSource.value = '';
|
||||
reader.addEventListener('load', (e) => {
|
||||
src.value = (e.target?.result as string) ?? '';
|
||||
filename = file.name ?? '';
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
function handleCropend({ imgBase64 }: CropendResult) {
|
||||
previewSource.value = imgBase64;
|
||||
}
|
||||
|
||||
function handleReady(cropperInstance: CropperType) {
|
||||
cropper.value = cropperInstance;
|
||||
// 画布加载完毕 关闭 loading
|
||||
modalLoading(false);
|
||||
}
|
||||
|
||||
function handlerToolbar(event: string, arg?: number) {
|
||||
if (event === 'scaleX') {
|
||||
scaleX = arg = scaleX === -1 ? 1 : -1;
|
||||
}
|
||||
if (event === 'scaleY') {
|
||||
scaleY = arg = scaleY === -1 ? 1 : -1;
|
||||
}
|
||||
(cropper?.value as any)?.[event]?.(arg);
|
||||
}
|
||||
|
||||
async function handleOk() {
|
||||
const uploadApi = props.uploadApi;
|
||||
if (uploadApi && isFunction(uploadApi)) {
|
||||
if (!previewSource.value) {
|
||||
message.warning('未选择图片');
|
||||
return;
|
||||
}
|
||||
const blob = dataURLtoBlob(previewSource.value);
|
||||
try {
|
||||
modalLoading(true);
|
||||
const url = await uploadApi({ file: blob, filename, name: 'file' });
|
||||
emit('uploadSuccess', { data: url, source: previewSource.value });
|
||||
await modalApi.close();
|
||||
} finally {
|
||||
modalLoading(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal
|
||||
v-bind="$attrs"
|
||||
:confirm-text="$t('ui.cropper.okText')"
|
||||
:fullscreen-button="false"
|
||||
:title="$t('ui.cropper.modalTitle')"
|
||||
class="w-2/3"
|
||||
>
|
||||
<div class="flex h-96">
|
||||
<!-- 左侧区域 -->
|
||||
<div class="h-full w-3/5">
|
||||
<!-- 裁剪器容器 -->
|
||||
<div
|
||||
class="relative h-[300px] bg-gradient-to-b from-neutral-50 to-neutral-200"
|
||||
>
|
||||
<CropperImage
|
||||
v-if="src"
|
||||
:circled="circled"
|
||||
:src="src"
|
||||
height="300px"
|
||||
@cropend="handleCropend"
|
||||
@ready="handleReady"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 工具栏 -->
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<Upload
|
||||
:before-upload="handleBeforeUpload"
|
||||
:file-list="[]"
|
||||
accept="image/*"
|
||||
>
|
||||
<Tooltip :title="$t('ui.cropper.selectImage')" placement="bottom">
|
||||
<Button size="small" theme="primary">
|
||||
<template #icon>
|
||||
<div class="flex items-center justify-center">
|
||||
<IconifyIcon icon="lucide:upload" />
|
||||
</div>
|
||||
</template>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Upload>
|
||||
<Space>
|
||||
<Tooltip :title="$t('ui.cropper.btn_reset')" placement="bottom">
|
||||
<Button
|
||||
:disabled="!src"
|
||||
size="small"
|
||||
theme="primary"
|
||||
@click="handlerToolbar('reset')"
|
||||
>
|
||||
<template #icon>
|
||||
<div class="flex items-center justify-center">
|
||||
<IconifyIcon icon="lucide:rotate-ccw" />
|
||||
</div>
|
||||
</template>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
:title="$t('ui.cropper.btn_rotate_left')"
|
||||
placement="bottom"
|
||||
>
|
||||
<Button
|
||||
:disabled="!src"
|
||||
size="small"
|
||||
theme="primary"
|
||||
@click="handlerToolbar('rotate', -45)"
|
||||
>
|
||||
<template #icon>
|
||||
<div class="flex items-center justify-center">
|
||||
<IconifyIcon icon="ant-design:rotate-left-outlined" />
|
||||
</div>
|
||||
</template>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
:title="$t('ui.cropper.btn_rotate_right')"
|
||||
placement="bottom"
|
||||
>
|
||||
<Button
|
||||
:disabled="!src"
|
||||
size="small"
|
||||
theme="primary"
|
||||
@click="handlerToolbar('rotate', 45)"
|
||||
>
|
||||
<template #icon>
|
||||
<div class="flex items-center justify-center">
|
||||
<IconifyIcon icon="ant-design:rotate-right-outlined" />
|
||||
</div>
|
||||
</template>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip :title="$t('ui.cropper.btn_scale_x')" placement="bottom">
|
||||
<Button
|
||||
:disabled="!src"
|
||||
size="small"
|
||||
theme="primary"
|
||||
@click="handlerToolbar('scaleX')"
|
||||
>
|
||||
<template #icon>
|
||||
<div class="flex items-center justify-center">
|
||||
<IconifyIcon icon="vaadin:arrows-long-h" />
|
||||
</div>
|
||||
</template>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip :title="$t('ui.cropper.btn_scale_y')" placement="bottom">
|
||||
<Button
|
||||
:disabled="!src"
|
||||
size="small"
|
||||
theme="primary"
|
||||
@click="handlerToolbar('scaleY')"
|
||||
>
|
||||
<template #icon>
|
||||
<div class="flex items-center justify-center">
|
||||
<IconifyIcon icon="vaadin:arrows-long-v" />
|
||||
</div>
|
||||
</template>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip :title="$t('ui.cropper.btn_zoom_in')" placement="bottom">
|
||||
<Button
|
||||
:disabled="!src"
|
||||
size="small"
|
||||
theme="primary"
|
||||
@click="handlerToolbar('zoom', 0.1)"
|
||||
>
|
||||
<template #icon>
|
||||
<div class="flex items-center justify-center">
|
||||
<IconifyIcon icon="lucide:zoom-in" />
|
||||
</div>
|
||||
</template>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip :title="$t('ui.cropper.btn_zoom_out')" placement="bottom">
|
||||
<Button
|
||||
:disabled="!src"
|
||||
size="small"
|
||||
theme="primary"
|
||||
@click="handlerToolbar('zoom', -0.1)"
|
||||
>
|
||||
<template #icon>
|
||||
<div class="flex items-center justify-center">
|
||||
<IconifyIcon icon="lucide:zoom-out" />
|
||||
</div>
|
||||
</template>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧区域 -->
|
||||
<div class="h-full w-2/5">
|
||||
<!-- 预览区域 -->
|
||||
<div
|
||||
class="mx-auto h-56 w-56 overflow-hidden rounded-full border border-gray-200"
|
||||
>
|
||||
<img
|
||||
v-if="previewSource"
|
||||
:alt="$t('ui.cropper.preview')"
|
||||
:src="previewSource"
|
||||
class="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 头像组合预览 -->
|
||||
<template v-if="previewSource">
|
||||
<div
|
||||
class="mt-2 flex items-center justify-around border-t border-gray-200 pt-2"
|
||||
>
|
||||
<Avatar :src="previewSource" size="large" />
|
||||
<Avatar size="48" :src="previewSource" />
|
||||
<Avatar size="64" :src="previewSource" />
|
||||
<Avatar size="80" :src="previewSource" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
171
apps/web-tdesign/src/components/cropper/cropper.vue
Normal file
171
apps/web-tdesign/src/components/cropper/cropper.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<script lang="ts" setup>
|
||||
import type { CSSProperties } from 'vue';
|
||||
|
||||
import type { CropperProps } from './typing';
|
||||
|
||||
import { computed, onMounted, onUnmounted, ref, unref, useAttrs } from 'vue';
|
||||
|
||||
import { useDebounceFn } from '@vueuse/core';
|
||||
import Cropper from 'cropperjs';
|
||||
|
||||
import { defaultOptions } from './typing';
|
||||
|
||||
import 'cropperjs/dist/cropper.css';
|
||||
|
||||
defineOptions({ name: 'CropperImage' });
|
||||
|
||||
const props = withDefaults(defineProps<CropperProps>(), {
|
||||
src: '',
|
||||
alt: '',
|
||||
circled: false,
|
||||
realTimePreview: true,
|
||||
height: '360px',
|
||||
crossorigin: undefined,
|
||||
imageStyle: () => ({}),
|
||||
options: () => ({}),
|
||||
});
|
||||
|
||||
const emit = defineEmits(['cropend', 'ready', 'cropendError']);
|
||||
const attrs = useAttrs();
|
||||
|
||||
type ElRef<T extends HTMLElement = HTMLDivElement> = null | T;
|
||||
const imgElRef = ref<ElRef<HTMLImageElement>>();
|
||||
const cropper = ref<Cropper | null>();
|
||||
const isReady = ref(false);
|
||||
|
||||
const debounceRealTimeCropped = useDebounceFn(realTimeCropped, 80);
|
||||
|
||||
const getImageStyle = computed((): CSSProperties => {
|
||||
return {
|
||||
height: props.height,
|
||||
maxWidth: '100%',
|
||||
...props.imageStyle,
|
||||
};
|
||||
});
|
||||
|
||||
const getClass = computed(() => {
|
||||
return [
|
||||
attrs.class,
|
||||
{
|
||||
'cropper-image--circled': props.circled,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
const getWrapperStyle = computed((): CSSProperties => {
|
||||
return { height: `${`${props.height}`.replace(/px/, '')}px` };
|
||||
});
|
||||
|
||||
onMounted(init);
|
||||
|
||||
onUnmounted(() => {
|
||||
cropper.value?.destroy();
|
||||
});
|
||||
|
||||
async function init() {
|
||||
const imgEl = unref(imgElRef);
|
||||
if (!imgEl) {
|
||||
return;
|
||||
}
|
||||
cropper.value = new Cropper(imgEl, {
|
||||
...defaultOptions,
|
||||
ready: () => {
|
||||
isReady.value = true;
|
||||
realTimeCropped();
|
||||
emit('ready', cropper.value);
|
||||
},
|
||||
crop() {
|
||||
debounceRealTimeCropped();
|
||||
},
|
||||
zoom() {
|
||||
debounceRealTimeCropped();
|
||||
},
|
||||
cropmove() {
|
||||
debounceRealTimeCropped();
|
||||
},
|
||||
...props.options,
|
||||
});
|
||||
}
|
||||
|
||||
// Real-time display preview
|
||||
function realTimeCropped() {
|
||||
props.realTimePreview && cropped();
|
||||
}
|
||||
|
||||
// event: return base64 and width and height information after cropping
|
||||
function cropped() {
|
||||
if (!cropper.value) {
|
||||
return;
|
||||
}
|
||||
const imgInfo = cropper.value.getData();
|
||||
const canvas = props.circled
|
||||
? getRoundedCanvas()
|
||||
: cropper.value.getCroppedCanvas();
|
||||
canvas.toBlob((blob) => {
|
||||
if (!blob) {
|
||||
return;
|
||||
}
|
||||
const fileReader: FileReader = new FileReader();
|
||||
fileReader.readAsDataURL(blob);
|
||||
fileReader.onloadend = (e) => {
|
||||
emit('cropend', {
|
||||
imgBase64: e.target?.result ?? '',
|
||||
imgInfo,
|
||||
});
|
||||
};
|
||||
fileReader.addEventListener('error', () => {
|
||||
emit('cropendError');
|
||||
});
|
||||
}, 'image/png');
|
||||
}
|
||||
|
||||
// Get a circular picture canvas
|
||||
function getRoundedCanvas() {
|
||||
const sourceCanvas = cropper.value!.getCroppedCanvas();
|
||||
const canvas = document.createElement('canvas');
|
||||
const context = canvas.getContext('2d')!;
|
||||
const width = sourceCanvas.width;
|
||||
const height = sourceCanvas.height;
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
context.imageSmoothingEnabled = true;
|
||||
context.drawImage(sourceCanvas, 0, 0, width, height);
|
||||
context.globalCompositeOperation = 'destination-in';
|
||||
context.beginPath();
|
||||
context.arc(
|
||||
width / 2,
|
||||
height / 2,
|
||||
Math.min(width, height) / 2,
|
||||
0,
|
||||
2 * Math.PI,
|
||||
true,
|
||||
);
|
||||
context.fill();
|
||||
return canvas;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="getClass" :style="getWrapperStyle">
|
||||
<img
|
||||
v-show="isReady"
|
||||
ref="imgElRef"
|
||||
:alt="alt"
|
||||
:crossorigin="crossorigin"
|
||||
:src="src"
|
||||
:style="getImageStyle"
|
||||
class="h-auto max-w-full"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.cropper-image {
|
||||
&--circled {
|
||||
.cropper-view-box,
|
||||
.cropper-face {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
3
apps/web-tdesign/src/components/cropper/index.ts
Normal file
3
apps/web-tdesign/src/components/cropper/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export { default as CropperAvatar } from './cropper-avatar.vue';
|
||||
export { default as CropperImage } from './cropper.vue';
|
||||
export type { CropperType } from './typing';
|
||||
68
apps/web-tdesign/src/components/cropper/typing.ts
Normal file
68
apps/web-tdesign/src/components/cropper/typing.ts
Normal file
@@ -0,0 +1,68 @@
|
||||
import type Cropper from 'cropperjs';
|
||||
import type { ButtonProps } from 'tdesign-vue-next';
|
||||
|
||||
import type { CSSProperties } from 'vue';
|
||||
|
||||
export interface apiFunParams {
|
||||
file: Blob;
|
||||
filename: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface CropendResult {
|
||||
imgBase64: string;
|
||||
imgInfo: Cropper.Data;
|
||||
}
|
||||
|
||||
export interface CropperProps {
|
||||
src?: string;
|
||||
alt?: string;
|
||||
circled?: boolean;
|
||||
realTimePreview?: boolean;
|
||||
height?: number | string;
|
||||
crossorigin?: '' | 'anonymous' | 'use-credentials' | undefined;
|
||||
imageStyle?: CSSProperties;
|
||||
options?: Cropper.Options;
|
||||
}
|
||||
|
||||
export interface CropperAvatarProps {
|
||||
width?: number | string;
|
||||
value?: string;
|
||||
showBtn?: boolean;
|
||||
btnProps?: ButtonProps;
|
||||
btnText?: string;
|
||||
uploadApi?: (params: apiFunParams) => Promise<any>;
|
||||
size?: number;
|
||||
}
|
||||
|
||||
export interface CropperModalProps {
|
||||
circled?: boolean;
|
||||
uploadApi?: (params: apiFunParams) => Promise<any>;
|
||||
src?: string;
|
||||
size?: number;
|
||||
}
|
||||
|
||||
export const defaultOptions: Cropper.Options = {
|
||||
aspectRatio: 1,
|
||||
zoomable: true,
|
||||
zoomOnTouch: true,
|
||||
zoomOnWheel: true,
|
||||
cropBoxMovable: true,
|
||||
cropBoxResizable: true,
|
||||
toggleDragModeOnDblclick: true,
|
||||
autoCrop: true,
|
||||
background: true,
|
||||
highlight: true,
|
||||
center: true,
|
||||
responsive: true,
|
||||
restore: true,
|
||||
checkCrossOrigin: true,
|
||||
checkOrientation: true,
|
||||
scalable: true,
|
||||
modal: true,
|
||||
guides: true,
|
||||
movable: true,
|
||||
rotatable: true,
|
||||
};
|
||||
|
||||
export type { Cropper as CropperType };
|
||||
195
apps/web-tdesign/src/components/description/description.vue
Normal file
195
apps/web-tdesign/src/components/description/description.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<script lang="tsx">
|
||||
import type { DescriptionsProps } from 'tdesign-vue-next';
|
||||
|
||||
import type { CSSProperties, PropType, Slots } from 'vue';
|
||||
|
||||
import type { DescriptionItemSchema, DescriptionProps } from './typing';
|
||||
|
||||
import { computed, defineComponent, ref, unref, useAttrs } from 'vue';
|
||||
|
||||
import { get, getNestedValue, isFunction } from '@vben/utils';
|
||||
|
||||
import { Card, Descriptions } from 'tdesign-vue-next';
|
||||
|
||||
const props = {
|
||||
bordered: { default: true, type: Boolean },
|
||||
column: {
|
||||
default: () => {
|
||||
return { lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4 };
|
||||
},
|
||||
type: [Number, Object],
|
||||
},
|
||||
data: { type: Object },
|
||||
schema: {
|
||||
default: () => [],
|
||||
type: Array as PropType<DescriptionItemSchema[]>,
|
||||
},
|
||||
size: {
|
||||
default: 'small',
|
||||
type: String,
|
||||
validator: (v: string) =>
|
||||
['default', 'middle', 'small', undefined].includes(v),
|
||||
},
|
||||
title: { default: '', type: String },
|
||||
useCard: { default: true, type: Boolean },
|
||||
};
|
||||
|
||||
function getSlot(slots: Slots, slot: string, data?: any) {
|
||||
if (!slots || !Reflect.has(slots, slot)) {
|
||||
return null;
|
||||
}
|
||||
if (!isFunction(slots[slot])) {
|
||||
console.error(`${slot} is not a function!`);
|
||||
return null;
|
||||
}
|
||||
const slotFn = slots[slot];
|
||||
if (!slotFn) return null;
|
||||
return slotFn({ data });
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Description',
|
||||
props,
|
||||
setup(props, { slots }) {
|
||||
const propsRef = ref<null | Partial<DescriptionProps>>(null);
|
||||
|
||||
const prefixCls = 'description';
|
||||
const attrs = useAttrs();
|
||||
|
||||
// Custom title component: get title
|
||||
const getMergeProps = computed(() => {
|
||||
return {
|
||||
...props,
|
||||
...(unref(propsRef) as any),
|
||||
} as DescriptionProps;
|
||||
});
|
||||
|
||||
const getProps = computed(() => {
|
||||
const opt = {
|
||||
...unref(getMergeProps),
|
||||
title: undefined,
|
||||
};
|
||||
return opt as DescriptionProps;
|
||||
});
|
||||
|
||||
const useWrapper = computed(() => !!unref(getMergeProps).title);
|
||||
|
||||
const getDescriptionsProps = computed(() => {
|
||||
return { ...unref(attrs), ...unref(getProps) } as DescriptionsProps;
|
||||
});
|
||||
|
||||
// 防止换行
|
||||
function renderLabel({
|
||||
label,
|
||||
labelMinWidth,
|
||||
labelStyle,
|
||||
}: DescriptionItemSchema) {
|
||||
if (!labelStyle && !labelMinWidth) {
|
||||
return label;
|
||||
}
|
||||
|
||||
const labelStyles: CSSProperties = {
|
||||
...labelStyle,
|
||||
minWidth: `${labelMinWidth}px `,
|
||||
};
|
||||
return <div style={labelStyles}>{label}</div>;
|
||||
}
|
||||
|
||||
function renderItem() {
|
||||
const { data, schema } = unref(getProps);
|
||||
return unref(schema)
|
||||
.map((item) => {
|
||||
const { contentMinWidth, field, render, show, span } = item;
|
||||
|
||||
if (show && isFunction(show) && !show(data)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
function getContent() {
|
||||
const _data = unref(getProps)?.data;
|
||||
if (!_data) {
|
||||
return null;
|
||||
}
|
||||
const getField = field.includes('.')
|
||||
? (getNestedValue(_data, field) ?? get(_data, field))
|
||||
: get(_data, field);
|
||||
// if (
|
||||
// getField &&
|
||||
// !Object.prototype.hasOwnProperty.call(toRefs(_data), field)
|
||||
// ) {
|
||||
// return isFunction(render) ? render('', _data) : (getField ?? '');
|
||||
// }
|
||||
return isFunction(render)
|
||||
? render(getField, _data)
|
||||
: (getField ?? '');
|
||||
}
|
||||
|
||||
const width = contentMinWidth;
|
||||
return (
|
||||
<Descriptions.Item
|
||||
key={field}
|
||||
label={renderLabel(item)}
|
||||
span={span}
|
||||
>
|
||||
{() => {
|
||||
if (item.slot) {
|
||||
return getSlot(slots, item.slot, data);
|
||||
}
|
||||
if (!contentMinWidth) {
|
||||
return getContent();
|
||||
}
|
||||
const style: CSSProperties = {
|
||||
minWidth: `${width}px`,
|
||||
};
|
||||
return <div style={style}>{getContent()}</div>;
|
||||
}}
|
||||
</Descriptions.Item>
|
||||
);
|
||||
})
|
||||
.filter((item) => !!item);
|
||||
}
|
||||
|
||||
function renderDesc() {
|
||||
return (
|
||||
<Descriptions
|
||||
class={`${prefixCls}`}
|
||||
{...(unref(getDescriptionsProps) as any)}
|
||||
>
|
||||
{renderItem()}
|
||||
</Descriptions>
|
||||
);
|
||||
}
|
||||
|
||||
function renderCard() {
|
||||
const content = props.useCard ? renderDesc() : <div>{renderDesc()}</div>;
|
||||
// Reduce the dom level
|
||||
if (!props.useCard) {
|
||||
return content;
|
||||
}
|
||||
|
||||
const { title } = unref(getMergeProps);
|
||||
const extraSlot = getSlot(slots, 'extra');
|
||||
|
||||
return (
|
||||
<Card
|
||||
bodyStyle={{ padding: '8px 0' }}
|
||||
headerStyle={{
|
||||
padding: '8px 16px',
|
||||
fontSize: '14px',
|
||||
minHeight: '24px',
|
||||
}}
|
||||
style={{ margin: 0 }}
|
||||
title={title}
|
||||
>
|
||||
{{
|
||||
default: () => content,
|
||||
extra: () => extraSlot && <div>{extraSlot}</div>,
|
||||
}}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return () => (unref(useWrapper) ? renderCard() : renderDesc());
|
||||
},
|
||||
});
|
||||
</script>
|
||||
3
apps/web-tdesign/src/components/description/index.ts
Normal file
3
apps/web-tdesign/src/components/description/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export { default as Description } from './description.vue';
|
||||
export * from './typing';
|
||||
export { useDescription } from './use-description';
|
||||
45
apps/web-tdesign/src/components/description/typing.ts
Normal file
45
apps/web-tdesign/src/components/description/typing.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
import type { DescriptionsProps as TdDescriptionsProps } from 'tdesign-vue-next';
|
||||
import type { JSX } from 'vue/jsx-runtime';
|
||||
|
||||
import type { CSSProperties, VNode } from 'vue';
|
||||
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
export interface DescriptionItemSchema {
|
||||
labelMinWidth?: number;
|
||||
contentMinWidth?: number;
|
||||
// 自定义标签样式
|
||||
labelStyle?: CSSProperties;
|
||||
// 对应 data 中的字段名
|
||||
field: string;
|
||||
// 内容的描述
|
||||
label: JSX.Element | string | VNode;
|
||||
// 包含列的数量
|
||||
span?: number;
|
||||
// 是否显示
|
||||
show?: (...arg: any) => boolean;
|
||||
// 插槽名称
|
||||
slot?: string;
|
||||
// 自定义需要展示的内容
|
||||
render?: (
|
||||
val: any,
|
||||
data?: Recordable<any>,
|
||||
) => Element | JSX.Element | number | string | undefined | VNode;
|
||||
}
|
||||
|
||||
export interface DescriptionProps extends TdDescriptionsProps {
|
||||
// 是否包含卡片组件
|
||||
useCard?: boolean;
|
||||
// 描述项配置
|
||||
schema: DescriptionItemSchema[];
|
||||
// 数据
|
||||
data: Recordable<any>;
|
||||
// 标题
|
||||
title?: string;
|
||||
// 是否包含边框
|
||||
bordered?: boolean;
|
||||
}
|
||||
|
||||
export interface DescInstance {
|
||||
setDescProps(descProps: Partial<DescriptionProps>): void;
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import type { Component } from 'vue';
|
||||
|
||||
import type { DescInstance, DescriptionProps } from './typing';
|
||||
|
||||
import { h, reactive } from 'vue';
|
||||
|
||||
import Description from './description.vue';
|
||||
|
||||
export function useDescription(options?: Partial<DescriptionProps>) {
|
||||
const propsState = reactive<Partial<DescriptionProps>>(options || {});
|
||||
|
||||
const api: DescInstance = {
|
||||
setDescProps: (descProps: Partial<DescriptionProps>): void => {
|
||||
Object.assign(propsState, descProps);
|
||||
},
|
||||
};
|
||||
|
||||
// 创建一个包装组件，将 propsState 合并到 props 中
|
||||
const DescriptionWrapper: Component = {
|
||||
name: 'UseDescription',
|
||||
inheritAttrs: false,
|
||||
setup(_props, { attrs, slots }) {
|
||||
return () => {
|
||||
// @ts-ignore - 避免类型实例化过深
|
||||
return h(Description, { ...propsState, ...attrs }, slots);
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
return [DescriptionWrapper, api] as const;
|
||||
}
|
||||
82
apps/web-tdesign/src/components/dict-tag/dict-tag.vue
Normal file
82
apps/web-tdesign/src/components/dict-tag/dict-tag.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { getDictObj } from '@vben/hooks';
|
||||
import { isValidColor, TinyColor } from '@vben/utils';
|
||||
|
||||
import { Tag } from 'tdesign-vue-next';
|
||||
|
||||
interface DictTagProps {
|
||||
/**
|
||||
* 字典类型
|
||||
*/
|
||||
type: string;
|
||||
/**
|
||||
* 字典值
|
||||
*/
|
||||
value: any;
|
||||
/**
|
||||
* 图标
|
||||
*/
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
const props = defineProps<DictTagProps>();
|
||||
|
||||
/** 获取字典标签 */
|
||||
const dictTag = computed(() => {
|
||||
// 校验参数有效性
|
||||
if (!props.type || props.value === undefined || props.value === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// 获取字典对象
|
||||
const dict = getDictObj(props.type, String(props.value));
|
||||
if (!dict) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// 处理颜色类型
|
||||
let colorType = dict.colorType;
|
||||
switch (colorType) {
|
||||
case 'danger': {
|
||||
colorType = 'danger';
|
||||
break;
|
||||
}
|
||||
case 'info': {
|
||||
colorType = 'success';
|
||||
break;
|
||||
}
|
||||
case 'primary': {
|
||||
colorType = 'primary';
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
if (!colorType) {
|
||||
colorType = 'default';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (isValidColor(dict.cssClass)) {
|
||||
colorType = new TinyColor(dict.cssClass).toHexString();
|
||||
}
|
||||
|
||||
return {
|
||||
label: dict.label || '',
|
||||
theme: colorType as
|
||||
| 'danger'
|
||||
| 'default'
|
||||
| 'primary'
|
||||
| 'success'
|
||||
| 'warning',
|
||||
cssClass: dict.cssClass,
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Tag v-if="dictTag" :theme="dictTag.theme" :color="dictTag.cssClass">
|
||||
{{ dictTag.label }}
|
||||
</Tag>
|
||||
</template>
|
||||
1
apps/web-tdesign/src/components/dict-tag/index.ts
Normal file
1
apps/web-tdesign/src/components/dict-tag/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as DictTag } from './dict-tag.vue';
|
||||
14
apps/web-tdesign/src/components/table-action/icons.ts
Normal file
14
apps/web-tdesign/src/components/table-action/icons.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
export const ACTION_ICON = {
|
||||
DOWNLOAD: 'lucide:download',
|
||||
UPLOAD: 'lucide:upload',
|
||||
ADD: 'lucide:plus',
|
||||
EDIT: 'lucide:edit',
|
||||
DELETE: 'lucide:trash-2',
|
||||
REFRESH: 'lucide:refresh-cw',
|
||||
SEARCH: 'lucide:search',
|
||||
FILTER: 'lucide:filter',
|
||||
MORE: 'lucide:ellipsis-vertical',
|
||||
VIEW: 'lucide:eye',
|
||||
COPY: 'lucide:copy',
|
||||
CLOSE: 'lucide:x',
|
||||
};
|
||||
4
apps/web-tdesign/src/components/table-action/index.ts
Normal file
4
apps/web-tdesign/src/components/table-action/index.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export * from './icons';
|
||||
|
||||
export { default as TableAction } from './table-action.vue';
|
||||
export * from './typing';
|
||||
282
apps/web-tdesign/src/components/table-action/table-action.vue
Normal file
282
apps/web-tdesign/src/components/table-action/table-action.vue
Normal file
@@ -0,0 +1,282 @@
|
||||
<!-- add by 星语：参考 vben2 的方式，增加 TableAction 组件 -->
|
||||
<script setup lang="ts">
|
||||
import type { PropType } from 'vue';
|
||||
|
||||
import type { ActionItem, PopConfirm } from './typing';
|
||||
|
||||
import { computed, unref, watch } from 'vue';
|
||||
|
||||
import { useAccess } from '@vben/access';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { $t } from '@vben/locales';
|
||||
import { isBoolean, isFunction } from '@vben/utils';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Dropdown,
|
||||
Menu,
|
||||
Popconfirm,
|
||||
Space,
|
||||
Tooltip,
|
||||
} from 'tdesign-vue-next';
|
||||
|
||||
const props = defineProps({
|
||||
actions: {
|
||||
type: Array as PropType<ActionItem[]>,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
dropDownActions: {
|
||||
type: Array as PropType<ActionItem[]>,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
divider: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
const { hasAccessByCodes } = useAccess();
|
||||
|
||||
/** 检查是否显示 */
|
||||
function isIfShow(action: ActionItem): boolean {
|
||||
const ifShow = action.ifShow;
|
||||
let isIfShow = true;
|
||||
if (isBoolean(ifShow)) {
|
||||
isIfShow = ifShow;
|
||||
}
|
||||
if (isFunction(ifShow)) {
|
||||
isIfShow = ifShow(action);
|
||||
}
|
||||
if (isIfShow) {
|
||||
isIfShow =
|
||||
hasAccessByCodes(action.auth || []) || (action.auth || []).length === 0;
|
||||
}
|
||||
return isIfShow;
|
||||
}
|
||||
|
||||
/** 处理按钮 actions */
|
||||
const getActions = computed(() => {
|
||||
const actions = props.actions || [];
|
||||
return actions.filter((action: ActionItem) => isIfShow(action));
|
||||
});
|
||||
|
||||
/** 处理下拉菜单 actions */
|
||||
const getDropdownList = computed(() => {
|
||||
const dropDownActions = props.dropDownActions || [];
|
||||
return dropDownActions.filter((action: ActionItem) => isIfShow(action));
|
||||
});
|
||||
|
||||
/** Space 组件的 size */
|
||||
const spaceSize = computed(() => {
|
||||
const actions = unref(getActions);
|
||||
return actions?.some(
|
||||
(item: ActionItem) => item.type === 'primary' && item.variant === 'text',
|
||||
)
|
||||
? 4
|
||||
: 8;
|
||||
});
|
||||
|
||||
/** 获取 PopConfirm 属性 */
|
||||
function getPopConfirmProps(popConfirm: PopConfirm) {
|
||||
if (!popConfirm) return {};
|
||||
|
||||
const attrs: Record<string, any> = {};
|
||||
|
||||
// 复制基本属性，排除函数
|
||||
Object.keys(popConfirm).forEach((key) => {
|
||||
if (key !== 'confirm' && key !== 'cancel' && key !== 'icon') {
|
||||
attrs[key] = popConfirm[key as keyof PopConfirm];
|
||||
}
|
||||
});
|
||||
|
||||
// 单独处理事件函数
|
||||
if (popConfirm.confirm && isFunction(popConfirm.confirm)) {
|
||||
attrs.onConfirm = popConfirm.confirm;
|
||||
}
|
||||
if (popConfirm.cancel && isFunction(popConfirm.cancel)) {
|
||||
attrs.onCancel = popConfirm.cancel;
|
||||
}
|
||||
|
||||
return attrs;
|
||||
}
|
||||
|
||||
/** 获取 Button 属性 */
|
||||
function getButtonProps(action: ActionItem) {
|
||||
return {
|
||||
theme: action.type || 'primary',
|
||||
variant: action.variant || 'text',
|
||||
disabled: action.disabled,
|
||||
loading: action.loading,
|
||||
size: action.size,
|
||||
};
|
||||
}
|
||||
|
||||
/** 获取 Tooltip 属性 */
|
||||
function getTooltipProps(tooltip: any | string) {
|
||||
if (!tooltip) return {};
|
||||
return typeof tooltip === 'string' ? { title: tooltip } : { ...tooltip };
|
||||
}
|
||||
|
||||
/** 处理菜单点击 */
|
||||
function handleMenuClick(e: any) {
|
||||
const action = getDropdownList.value[e.key];
|
||||
if (action && action.onClick && isFunction(action.onClick)) {
|
||||
action.onClick();
|
||||
}
|
||||
}
|
||||
|
||||
/** 生成稳定的 key */
|
||||
function getActionKey(action: ActionItem, index: number) {
|
||||
return `${action.label || ''}-${action.type || ''}-${index}`;
|
||||
}
|
||||
|
||||
/** 处理按钮点击 */
|
||||
function handleButtonClick(action: ActionItem) {
|
||||
if (action.onClick && isFunction(action.onClick)) {
|
||||
action.onClick();
|
||||
}
|
||||
}
|
||||
|
||||
/** 监听props变化，强制重新计算 */
|
||||
watch(
|
||||
() => [props.actions, props.dropDownActions],
|
||||
() => {
|
||||
// 这里不需要额外处理，computed会自动重新计算
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="table-actions">
|
||||
<Space :size="spaceSize">
|
||||
<template
|
||||
v-for="(action, index) in getActions"
|
||||
:key="getActionKey(action, index)"
|
||||
>
|
||||
<Popconfirm
|
||||
v-if="action.popConfirm"
|
||||
v-bind="getPopConfirmProps(action.popConfirm)"
|
||||
>
|
||||
<template v-if="action.popConfirm.icon" #icon>
|
||||
<IconifyIcon :icon="action.popConfirm.icon" />
|
||||
</template>
|
||||
<Tooltip v-bind="getTooltipProps(action.tooltip)">
|
||||
<Button v-bind="getButtonProps(action)">
|
||||
<template v-if="action.icon" #icon>
|
||||
<IconifyIcon :icon="action.icon" />
|
||||
</template>
|
||||
{{ action.label }}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Popconfirm>
|
||||
<Tooltip v-else v-bind="getTooltipProps(action.tooltip)">
|
||||
<Button
|
||||
v-bind="getButtonProps(action)"
|
||||
@click="handleButtonClick(action)"
|
||||
>
|
||||
<template v-if="action.icon" #icon>
|
||||
<IconifyIcon :icon="action.icon" />
|
||||
</template>
|
||||
{{ action.label }}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</template>
|
||||
</Space>
|
||||
|
||||
<Dropdown v-if="getDropdownList.length > 0" trigger="hover">
|
||||
<slot name="more">
|
||||
<Button theme="primary" variant="text">
|
||||
<template #icon>
|
||||
{{ $t('page.action.more') }}
|
||||
<IconifyIcon icon="lucide:ellipsis-vertical" />
|
||||
</template>
|
||||
</Button>
|
||||
</slot>
|
||||
<template #overlay>
|
||||
<Menu>
|
||||
<Menu.Item
|
||||
v-for="(action, index) in getDropdownList"
|
||||
:key="index"
|
||||
:disabled="action.disabled"
|
||||
@click="!action.popConfirm && handleMenuClick({ key: index })"
|
||||
>
|
||||
<template v-if="action.popConfirm">
|
||||
<Popconfirm v-bind="getPopConfirmProps(action.popConfirm)">
|
||||
<template v-if="action.popConfirm.icon" #icon>
|
||||
<IconifyIcon :icon="action.popConfirm.icon" />
|
||||
</template>
|
||||
<div
|
||||
:class="
|
||||
action.disabled === true
|
||||
? 'cursor-not-allowed text-gray-300'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<IconifyIcon v-if="action.icon" :icon="action.icon" />
|
||||
<span :class="action.icon ? 'ml-1' : ''">
|
||||
{{ action.label }}
|
||||
</span>
|
||||
</div>
|
||||
</Popconfirm>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div
|
||||
:class="
|
||||
action.disabled === true
|
||||
? 'cursor-not-allowed text-gray-300'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<IconifyIcon v-if="action.icon" :icon="action.icon" />
|
||||
{{ action.label }}
|
||||
</div>
|
||||
</template>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.table-actions {
|
||||
.ant-btn-link {
|
||||
padding: 4px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.ant-btn > .iconify + span,
|
||||
.ant-btn > span + .iconify {
|
||||
margin-inline-start: 4px;
|
||||
}
|
||||
|
||||
.iconify {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
font-style: normal;
|
||||
line-height: 0;
|
||||
vertical-align: -0.125em;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
text-rendering: optimizelegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-popconfirm {
|
||||
.ant-popconfirm-buttons {
|
||||
.ant-btn {
|
||||
margin-inline-start: 4px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
32
apps/web-tdesign/src/components/table-action/typing.ts
Normal file
32
apps/web-tdesign/src/components/table-action/typing.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import type { TdButtonProps, TooltipProps } from 'tdesign-vue-next';
|
||||
|
||||
export interface PopConfirm {
|
||||
title: string;
|
||||
okText?: string;
|
||||
cancelText?: string;
|
||||
confirm: () => void;
|
||||
cancel?: () => void;
|
||||
icon?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export interface ActionItem {
|
||||
onClick?: () => void;
|
||||
type?: TdButtonProps['theme'];
|
||||
label?: string;
|
||||
icon?: string;
|
||||
color?: 'error' | 'success' | 'warning';
|
||||
popConfirm?: PopConfirm;
|
||||
disabled?: boolean;
|
||||
divider?: boolean;
|
||||
// 权限编码控制是否显示
|
||||
auth?: string[];
|
||||
// 业务控制是否显示
|
||||
ifShow?: ((action: ActionItem) => boolean) | boolean;
|
||||
tooltip?: string | TooltipProps;
|
||||
loading?: boolean;
|
||||
size?: TdButtonProps['size'];
|
||||
shape?: TdButtonProps['shape'];
|
||||
variant?: TdButtonProps['variant'];
|
||||
danger?: boolean;
|
||||
}
|
||||
344
apps/web-tdesign/src/components/tinymce/editor.vue
Normal file
344
apps/web-tdesign/src/components/tinymce/editor.vue
Normal file
@@ -0,0 +1,344 @@
|
||||
<script lang="ts" setup>
|
||||
import type { IPropTypes } from '@tinymce/tinymce-vue/lib/cjs/main/ts/components/EditorPropTypes';
|
||||
import type { Editor as EditorType } from 'tinymce/tinymce';
|
||||
|
||||
import {
|
||||
computed,
|
||||
nextTick,
|
||||
onActivated,
|
||||
onBeforeUnmount,
|
||||
onDeactivated,
|
||||
onMounted,
|
||||
ref,
|
||||
unref,
|
||||
useAttrs,
|
||||
watch,
|
||||
} from 'vue';
|
||||
|
||||
import { preferences, usePreferences } from '@vben/preferences';
|
||||
import { buildShortUUID, isNumber } from '@vben/utils';
|
||||
|
||||
import Editor from '@tinymce/tinymce-vue';
|
||||
|
||||
import { useUpload } from '#/components/upload/use-upload';
|
||||
|
||||
import { bindHandlers } from './helper';
|
||||
import ImgUpload from './img-upload.vue';
|
||||
import {
|
||||
plugins as defaultPlugins,
|
||||
toolbar as defaultToolbar,
|
||||
} from './tinymce';
|
||||
|
||||
type InitOptions = IPropTypes['init'];
|
||||
|
||||
defineOptions({ name: 'Tinymce', inheritAttrs: false });
|
||||
|
||||
const props = withDefaults(defineProps<TinymacProps>(), {
|
||||
height: 400,
|
||||
width: 'auto',
|
||||
options: () => ({}),
|
||||
plugins: defaultPlugins,
|
||||
toolbar: defaultToolbar,
|
||||
showImageUpload: true,
|
||||
});
|
||||
|
||||
const emit = defineEmits(['change']);
|
||||
|
||||
interface TinymacProps {
|
||||
options?: Partial<InitOptions>;
|
||||
toolbar?: string;
|
||||
plugins?: string;
|
||||
height?: number | string;
|
||||
width?: number | string;
|
||||
showImageUpload?: boolean;
|
||||
}
|
||||
|
||||
/** 外部使用 v-model 绑定值 */
|
||||
const modelValue = defineModel('modelValue', { default: '', type: String });
|
||||
|
||||
/** TinyMCE 自托管：https://www.jianshu.com/p/59a9c3802443 */
|
||||
const tinymceScriptSrc = `${import.meta.env.VITE_BASE}tinymce/tinymce.min.js`;
|
||||
|
||||
const attrs = useAttrs();
|
||||
const editorRef = ref<EditorType>();
|
||||
const fullscreen = ref(false); // 图片上传，是否放到全屏的位置
|
||||
const tinymceId = ref<string>(buildShortUUID('tiny-vue'));
|
||||
const elRef = ref<HTMLElement | null>(null);
|
||||
|
||||
const containerWidth = computed(() => {
|
||||
const width = props.width;
|
||||
if (isNumber(width)) {
|
||||
return `${width}px`;
|
||||
}
|
||||
return width;
|
||||
});
|
||||
|
||||
/** 主题皮肤 */
|
||||
const { isDark } = usePreferences();
|
||||
const skinName = computed(() => {
|
||||
return isDark.value ? 'oxide-dark' : 'oxide';
|
||||
});
|
||||
|
||||
const contentCss = computed(() => {
|
||||
return isDark.value ? 'dark' : 'default';
|
||||
});
|
||||
|
||||
/** 国际化：需要在 langs 目录下，放好语言包 */
|
||||
const { locale } = usePreferences();
|
||||
const langName = computed(() => {
|
||||
if (locale.value === 'en-US') {
|
||||
return 'en';
|
||||
}
|
||||
return 'zh_CN';
|
||||
});
|
||||
|
||||
/** 监听 mode、locale 进行主题、语言切换 */
|
||||
const init = ref(true);
|
||||
watch(
|
||||
() => [preferences.theme.mode, preferences.app.locale],
|
||||
async () => {
|
||||
if (!editorRef.value) {
|
||||
return;
|
||||
}
|
||||
// 通过 init + v-if 来挂载/卸载组件
|
||||
destroy();
|
||||
init.value = false;
|
||||
await nextTick();
|
||||
init.value = true;
|
||||
// 等待加载完成
|
||||
await nextTick();
|
||||
setEditorMode();
|
||||
},
|
||||
);
|
||||
|
||||
const initOptions = computed((): InitOptions => {
|
||||
const { height, options, plugins, toolbar } = props;
|
||||
return {
|
||||
height,
|
||||
toolbar,
|
||||
menubar: 'file edit view insert format tools table help',
|
||||
plugins,
|
||||
language: langName.value,
|
||||
branding: false, // 禁止显示，右下角的“使用 TinyMCE 构建”
|
||||
default_link_target: '_blank',
|
||||
link_title: false,
|
||||
object_resizing: true, // 和 vben2.0 不同，它默认是 false
|
||||
auto_focus: undefined, // 和 vben2.0 不同，它默认是 true
|
||||
skin: skinName.value,
|
||||
content_css: contentCss.value,
|
||||
content_style:
|
||||
'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
|
||||
contextmenu: 'link image table',
|
||||
image_advtab: true, // 图片高级选项
|
||||
image_caption: true,
|
||||
importcss_append: true,
|
||||
noneditable_class: 'mceNonEditable',
|
||||
paste_data_images: true, // 允许粘贴图片，默认 base64 格式，images_upload_handler 启用时为上传
|
||||
quickbars_selection_toolbar:
|
||||
'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
|
||||
toolbar_mode: 'sliding',
|
||||
...options,
|
||||
images_upload_handler: (blobInfo: any) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const file = blobInfo.blob() as File;
|
||||
const { httpRequest } = useUpload();
|
||||
httpRequest(file)
|
||||
.then((url) => {
|
||||
resolve(url);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('tinymce 上传图片失败:', error);
|
||||
reject(error.message);
|
||||
});
|
||||
});
|
||||
},
|
||||
setup: (editor: EditorType) => {
|
||||
editorRef.value = editor;
|
||||
editor.on('init', (e: any) => initSetup(e));
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
/** 监听 options.readonly 是否只读 */
|
||||
const disabled = computed(() => props.options.readonly ?? false);
|
||||
watch(
|
||||
() => props.options,
|
||||
(options) => {
|
||||
const getDisabled = options && Reflect.get(options, 'readonly');
|
||||
const editor = unref(editorRef);
|
||||
if (editor) {
|
||||
editor.mode.set(getDisabled ? 'readonly' : 'design');
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
if (!initOptions.value.inline) {
|
||||
tinymceId.value = buildShortUUID('tiny-vue');
|
||||
}
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
initEditor();
|
||||
setEditorMode();
|
||||
}, 30);
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
destroy();
|
||||
});
|
||||
|
||||
onDeactivated(() => {
|
||||
destroy();
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
setEditorMode();
|
||||
});
|
||||
|
||||
function setEditorMode() {
|
||||
const editor = unref(editorRef);
|
||||
if (editor) {
|
||||
const mode = props.options.readonly ? 'readonly' : 'design';
|
||||
editor.mode.set(mode);
|
||||
}
|
||||
}
|
||||
|
||||
function destroy() {
|
||||
const editor = unref(editorRef);
|
||||
editor?.destroy();
|
||||
}
|
||||
|
||||
function initEditor() {
|
||||
const el = unref(elRef);
|
||||
if (el) {
|
||||
el.style.visibility = '';
|
||||
}
|
||||
}
|
||||
|
||||
function initSetup(e: any) {
|
||||
const editor = unref(editorRef);
|
||||
if (!editor) {
|
||||
return;
|
||||
}
|
||||
const value = modelValue.value || '';
|
||||
|
||||
editor.setContent(value);
|
||||
bindModelHandlers(editor);
|
||||
bindHandlers(e, attrs, unref(editorRef));
|
||||
}
|
||||
|
||||
function setValue(editor: Record<string, any>, val?: string, prevVal?: string) {
|
||||
if (
|
||||
editor &&
|
||||
typeof val === 'string' &&
|
||||
val !== prevVal &&
|
||||
val !== editor.getContent({ format: attrs.outputFormat })
|
||||
) {
|
||||
editor.setContent(val);
|
||||
}
|
||||
}
|
||||
|
||||
function bindModelHandlers(editor: any) {
|
||||
const modelEvents = attrs.modelEvents ?? null;
|
||||
const normalizedEvents = Array.isArray(modelEvents)
|
||||
? modelEvents.join(' ')
|
||||
: modelEvents;
|
||||
|
||||
watch(
|
||||
() => modelValue.value,
|
||||
(val, prevVal) => {
|
||||
setValue(editor, val, prevVal);
|
||||
},
|
||||
);
|
||||
|
||||
editor.on(normalizedEvents || 'change keyup undo redo', () => {
|
||||
const content = editor.getContent({ format: attrs.outputFormat });
|
||||
emit('change', content);
|
||||
});
|
||||
|
||||
editor.on('FullscreenStateChanged', (e: any) => {
|
||||
fullscreen.value = e.state;
|
||||
});
|
||||
}
|
||||
|
||||
function getUploadingImgName(name: string) {
|
||||
return `[uploading:${name}]`;
|
||||
}
|
||||
|
||||
function handleImageUploading(name: string) {
|
||||
const editor = unref(editorRef);
|
||||
if (!editor) {
|
||||
return;
|
||||
}
|
||||
editor.execCommand('mceInsertContent', false, getUploadingImgName(name));
|
||||
const content = editor?.getContent() ?? '';
|
||||
setValue(editor, content);
|
||||
}
|
||||
|
||||
function handleDone(name: string, url: string) {
|
||||
const editor = unref(editorRef);
|
||||
if (!editor) {
|
||||
return;
|
||||
}
|
||||
const content = editor?.getContent() ?? '';
|
||||
const val =
|
||||
content?.replace(getUploadingImgName(name), `<img src="${url}"/>`) ?? '';
|
||||
setValue(editor, val);
|
||||
}
|
||||
|
||||
function handleError(name: string) {
|
||||
const editor = unref(editorRef);
|
||||
if (!editor) {
|
||||
return;
|
||||
}
|
||||
const content = editor?.getContent() ?? '';
|
||||
const val = content?.replace(getUploadingImgName(name), '') ?? '';
|
||||
setValue(editor, val);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :style="{ width: containerWidth }" class="app-tinymce">
|
||||
<ImgUpload
|
||||
v-if="showImageUpload"
|
||||
v-show="editorRef"
|
||||
:disabled="disabled"
|
||||
:fullscreen="fullscreen"
|
||||
@done="handleDone"
|
||||
@error="handleError"
|
||||
@uploading="handleImageUploading"
|
||||
/>
|
||||
<Editor
|
||||
v-if="!initOptions.inline && init"
|
||||
v-model="modelValue"
|
||||
:init="initOptions"
|
||||
:style="{ visibility: 'hidden', zIndex: 3000 }"
|
||||
:tinymce-script-src="tinymceScriptSrc"
|
||||
license-key="gpl"
|
||||
/>
|
||||
<slot v-else></slot>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
.tox.tox-silver-sink.tox-tinymce-aux {
|
||||
z-index: 2025; /* 由于 vben modal/drawer 的 zIndex 为 2000，需要调整 z-index（默认 1300）超过它，避免遮挡 */
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-tinymce {
|
||||
position: relative;
|
||||
line-height: normal;
|
||||
|
||||
:deep(.textarea) {
|
||||
z-index: -1;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* 隐藏右上角 tinymce upgrade 按钮 */
|
||||
:deep(.tox-promotion) {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
85
apps/web-tdesign/src/components/tinymce/helper.ts
Normal file
85
apps/web-tdesign/src/components/tinymce/helper.ts
Normal file
@@ -0,0 +1,85 @@
|
||||
const validEvents = new Set([
|
||||
'onActivate',
|
||||
'onAddUndo',
|
||||
'onBeforeAddUndo',
|
||||
'onBeforeExecCommand',
|
||||
'onBeforeGetContent',
|
||||
'onBeforePaste',
|
||||
'onBeforeRenderUI',
|
||||
'onBeforeSetContent',
|
||||
'onBlur',
|
||||
'onChange',
|
||||
'onClearUndos',
|
||||
'onClick',
|
||||
'onContextMenu',
|
||||
'onCopy',
|
||||
'onCut',
|
||||
'onDblclick',
|
||||
'onDeactivate',
|
||||
'onDirty',
|
||||
'onDrag',
|
||||
'onDragDrop',
|
||||
'onDragEnd',
|
||||
'onDragGesture',
|
||||
'onDragOver',
|
||||
'onDrop',
|
||||
'onExecCommand',
|
||||
'onFocus',
|
||||
'onFocusIn',
|
||||
'onFocusOut',
|
||||
'onGetContent',
|
||||
'onHide',
|
||||
'onInit',
|
||||
'onKeyDown',
|
||||
'onKeyPress',
|
||||
'onKeyUp',
|
||||
'onLoadContent',
|
||||
'onMouseDown',
|
||||
'onMouseEnter',
|
||||
'onMouseLeave',
|
||||
'onMouseMove',
|
||||
'onMouseOut',
|
||||
'onMouseOver',
|
||||
'onMouseUp',
|
||||
'onNodeChange',
|
||||
'onObjectResized',
|
||||
'onObjectResizeStart',
|
||||
'onObjectSelected',
|
||||
'onPaste',
|
||||
'onPostProcess',
|
||||
'onPostRender',
|
||||
'onPreProcess',
|
||||
'onProgressState',
|
||||
'onRedo',
|
||||
'onRemove',
|
||||
'onReset',
|
||||
'onSaveContent',
|
||||
'onSelectionChange',
|
||||
'onSetAttrib',
|
||||
'onSetContent',
|
||||
'onShow',
|
||||
'onSubmit',
|
||||
'onUndo',
|
||||
'onVisualAid',
|
||||
]);
|
||||
|
||||
const isValidKey = (key: string) => validEvents.has(key);
|
||||
|
||||
export const bindHandlers = (
|
||||
initEvent: Event,
|
||||
listeners: any,
|
||||
editor: any,
|
||||
): void => {
|
||||
Object.keys(listeners)
|
||||
.filter((element) => isValidKey(element))
|
||||
.forEach((key: string) => {
|
||||
const handler = listeners[key];
|
||||
if (typeof handler === 'function') {
|
||||
if (key === 'onInit') {
|
||||
handler(initEvent, editor);
|
||||
} else {
|
||||
editor.on(key.slice(2), (e: any) => handler(e, editor));
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
111
apps/web-tdesign/src/components/tinymce/img-upload.vue
Normal file
111
apps/web-tdesign/src/components/tinymce/img-upload.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<script lang="ts" setup>
|
||||
import type { RequestMethodResponse, UploadFile } from 'tdesign-vue-next';
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { Button, Upload } from 'tdesign-vue-next';
|
||||
|
||||
import { useUpload } from '#/components/upload/use-upload';
|
||||
|
||||
defineOptions({ name: 'TinymceImageUpload' });
|
||||
|
||||
const props = defineProps({
|
||||
disabled: {
|
||||
default: false,
|
||||
type: Boolean,
|
||||
},
|
||||
fullscreen: {
|
||||
// 图片上传，是否放到全屏的位置
|
||||
default: false,
|
||||
type: Boolean,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['uploading', 'done', 'error']);
|
||||
|
||||
const uploading = ref(false);
|
||||
|
||||
const getButtonProps = computed(() => {
|
||||
const { disabled } = props;
|
||||
return {
|
||||
disabled,
|
||||
};
|
||||
});
|
||||
|
||||
async function customRequest(
|
||||
info: UploadFile | UploadFile[],
|
||||
): Promise<RequestMethodResponse> {
|
||||
// 处理单个文件上传
|
||||
const uploadFile = Array.isArray(info) ? info[0] : info;
|
||||
|
||||
if (!uploadFile) {
|
||||
return {
|
||||
status: 'fail',
|
||||
error: 'No file provided',
|
||||
response: {},
|
||||
};
|
||||
}
|
||||
|
||||
// 1. emit 上传中
|
||||
const file = uploadFile.raw as File;
|
||||
const name = file?.name;
|
||||
if (!uploading.value) {
|
||||
emit('uploading', name);
|
||||
uploading.value = true;
|
||||
}
|
||||
|
||||
// 2. 执行上传
|
||||
const { httpRequest } = useUpload();
|
||||
try {
|
||||
const url = await httpRequest(file);
|
||||
emit('done', name, url);
|
||||
uploadFile.onSuccess?.(url);
|
||||
return {
|
||||
status: 'success',
|
||||
response: {
|
||||
url,
|
||||
},
|
||||
};
|
||||
} catch (error) {
|
||||
emit('error', name);
|
||||
uploadFile.onError?.(error);
|
||||
return {
|
||||
status: 'fail',
|
||||
error: error instanceof Error ? error.message : 'Upload failed',
|
||||
response: {},
|
||||
};
|
||||
} finally {
|
||||
uploading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div :class="[{ fullscreen }]" class="tinymce-image-upload">
|
||||
<Upload
|
||||
:show-upload-list="false"
|
||||
accept=".jpg,.jpeg,.gif,.png,.webp"
|
||||
multiple
|
||||
:request-method="customRequest"
|
||||
>
|
||||
<Button theme="primary" v-bind="{ ...getButtonProps }">
|
||||
{{ $t('ui.upload.imgUpload') }}
|
||||
</Button>
|
||||
</Upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tinymce-image-upload {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 10px;
|
||||
z-index: 20;
|
||||
|
||||
&.fullscreen {
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1
apps/web-tdesign/src/components/tinymce/index.ts
Normal file
1
apps/web-tdesign/src/components/tinymce/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as Tinymce } from './editor.vue';
|
||||
17
apps/web-tdesign/src/components/tinymce/tinymce.ts
Normal file
17
apps/web-tdesign/src/components/tinymce/tinymce.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
// Any plugins you want to setting has to be imported
|
||||
// Detail plugins list see https://www.tiny.cloud/docs/plugins/
|
||||
// Custom builds see https://www.tiny.cloud/download/custom-builds/
|
||||
// colorpicker/contextmenu/textcolor plugin is now built in to the core editor, please remove it from your editor configuration
|
||||
|
||||
export const plugins =
|
||||
'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help emoticons accordion';
|
||||
|
||||
// 和 vben2.0 不同，从 https://www.tiny.cloud/ 拷贝 Vue 部分，然后去掉 importword exportword exportpdf | math 部分，并额外增加最后一行（来自 vben2.0 差异的部分）
|
||||
export const toolbar =
|
||||
'undo redo | accordion accordionremove | \\\n' +
|
||||
' blocks fontfamily fontsize | bold italic underline strikethrough | \\\n' +
|
||||
' align numlist bullist | link image | table media | \\\n' +
|
||||
' lineheight outdent indent | forecolor backcolor removeformat | \\\n' +
|
||||
' charmap emoticons | code fullscreen preview | save print | \\\n' +
|
||||
' pagebreak anchor codesample | ltr rtl | \\\n' +
|
||||
' hr searchreplace alignleft aligncenter alignright blockquote subscript superscript';
|
||||
381
apps/web-tdesign/src/components/upload/file-upload.vue
Normal file
381
apps/web-tdesign/src/components/upload/file-upload.vue
Normal file
@@ -0,0 +1,381 @@
|
||||
<script lang="ts" setup>
|
||||
import type {
|
||||
RequestMethodResponse,
|
||||
UploadFile,
|
||||
UploadProps,
|
||||
} from 'tdesign-vue-next';
|
||||
|
||||
import type { FileUploadProps } from './typing';
|
||||
|
||||
import type { AxiosProgressEvent } from '#/api/infra/file';
|
||||
|
||||
import { computed, ref, toRefs, watch } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { $t } from '@vben/locales';
|
||||
import { isFunction, isNumber, isObject, isString } from '@vben/utils';
|
||||
|
||||
import { Button, Upload } from 'tdesign-vue-next';
|
||||
|
||||
import { message } from '#/adapter/tdesign';
|
||||
|
||||
import { checkFileType } from './helper';
|
||||
import { UploadResultStatus } from './typing';
|
||||
import { useUpload, useUploadType } from './use-upload';
|
||||
|
||||
defineOptions({ name: 'FileUpload', inheritAttrs: false });
|
||||
|
||||
const props = withDefaults(defineProps<FileUploadProps>(), {
|
||||
value: () => [],
|
||||
modelValue: undefined,
|
||||
directory: undefined,
|
||||
disabled: false,
|
||||
drag: false,
|
||||
helpText: '',
|
||||
maxSize: 2,
|
||||
maxNumber: 1,
|
||||
accept: () => [],
|
||||
multiple: false,
|
||||
api: undefined,
|
||||
resultField: '',
|
||||
showDescription: false,
|
||||
});
|
||||
const emit = defineEmits([
|
||||
'change',
|
||||
'update:value',
|
||||
'update:modelValue',
|
||||
'delete',
|
||||
'returnText',
|
||||
'preview',
|
||||
]);
|
||||
const { accept, helpText, maxNumber, maxSize } = toRefs(props);
|
||||
const isInnerOperate = ref<boolean>(false);
|
||||
const { getStringAccept } = useUploadType({
|
||||
acceptRef: accept,
|
||||
helpTextRef: helpText,
|
||||
maxNumberRef: maxNumber,
|
||||
maxSizeRef: maxSize,
|
||||
});
|
||||
|
||||
// 计算当前绑定的值，优先使用 modelValue
|
||||
const currentValue = computed(() => {
|
||||
return props.modelValue === undefined ? props.value : props.modelValue;
|
||||
});
|
||||
|
||||
// 判断是否使用 modelValue
|
||||
const isUsingModelValue = computed(() => {
|
||||
return props.modelValue !== undefined;
|
||||
});
|
||||
|
||||
const fileList = ref<UploadProps['files']>([]);
|
||||
const isLtMsg = ref<boolean>(true); // 文件大小错误提示
|
||||
const isActMsg = ref<boolean>(true); // 文件类型错误提示
|
||||
const isFirstRender = ref<boolean>(true); // 是否第一次渲染
|
||||
const uploadNumber = ref<number>(0); // 上传文件计数器
|
||||
const uploadList = ref<any[]>([]); // 临时上传列表
|
||||
|
||||
watch(
|
||||
currentValue,
|
||||
(v) => {
|
||||
if (isInnerOperate.value) {
|
||||
isInnerOperate.value = false;
|
||||
return;
|
||||
}
|
||||
let value: string[] = [];
|
||||
if (v) {
|
||||
if (Array.isArray(v)) {
|
||||
value = v;
|
||||
} else {
|
||||
value.push(v);
|
||||
}
|
||||
fileList.value = value.map((item, i) => {
|
||||
if (item && isString(item)) {
|
||||
return {
|
||||
uid: `${-i}`,
|
||||
name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
|
||||
status: UploadResultStatus.SUCCESS,
|
||||
url: item,
|
||||
};
|
||||
} else if (item && isObject(item)) {
|
||||
return item;
|
||||
}
|
||||
return null;
|
||||
}) as UploadProps['files'];
|
||||
}
|
||||
if (!isFirstRender.value) {
|
||||
emit('change', value);
|
||||
isFirstRender.value = false;
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
|
||||
async function handleRemove(file: UploadFile) {
|
||||
if (fileList.value) {
|
||||
const index = fileList.value.findIndex((item) => item.uid === file.uid);
|
||||
index !== -1 && fileList.value.splice(index, 1);
|
||||
const value = getValue();
|
||||
isInnerOperate.value = true;
|
||||
emit('update:value', value);
|
||||
emit('update:modelValue', value);
|
||||
emit('change', value);
|
||||
emit('delete', file);
|
||||
}
|
||||
}
|
||||
|
||||
// 处理文件预览
|
||||
function handlePreview(file: UploadFile) {
|
||||
emit('preview', file);
|
||||
}
|
||||
|
||||
// 处理文件数量超限
|
||||
function handleExceed() {
|
||||
message.error($t('ui.upload.maxNumber', [maxNumber.value]));
|
||||
}
|
||||
|
||||
// 处理上传错误
|
||||
function handleUploadError(error: any) {
|
||||
console.error('上传错误:', error);
|
||||
message.error('上传失败');
|
||||
// 上传失败时减少计数器
|
||||
uploadNumber.value = Math.max(0, uploadNumber.value - 1);
|
||||
}
|
||||
|
||||
async function beforeUpload(file: UploadFile) {
|
||||
const fileContent = await file.text();
|
||||
emit('returnText', fileContent);
|
||||
|
||||
// 检查文件数量限制
|
||||
if (
|
||||
isNumber(fileList.value!.length) &&
|
||||
fileList.value!.length >= props.maxNumber
|
||||
) {
|
||||
message.error($t('ui.upload.maxNumber', [props.maxNumber]));
|
||||
return Upload.LIST_IGNORE;
|
||||
}
|
||||
|
||||
const { maxSize, accept } = props;
|
||||
const isAct = checkFileType(file.raw!, accept);
|
||||
if (!isAct) {
|
||||
message.error($t('ui.upload.acceptUpload', [accept]));
|
||||
isActMsg.value = false;
|
||||
// 防止弹出多个错误提示
|
||||
setTimeout(() => (isActMsg.value = true), 1000);
|
||||
return Upload.LIST_IGNORE;
|
||||
}
|
||||
const isLt = file.size! / 1024 / 1024 > maxSize;
|
||||
if (isLt) {
|
||||
message.error($t('ui.upload.maxSizeMultiple', [maxSize]));
|
||||
isLtMsg.value = false;
|
||||
// 防止弹出多个错误提示
|
||||
setTimeout(() => (isLtMsg.value = true), 1000);
|
||||
return Upload.LIST_IGNORE;
|
||||
}
|
||||
|
||||
// 只有在验证通过后才增加计数器
|
||||
uploadNumber.value++;
|
||||
return true;
|
||||
}
|
||||
|
||||
async function customRequest(
|
||||
info: UploadFile | UploadFile[],
|
||||
): Promise<RequestMethodResponse> {
|
||||
// 处理单个文件上传
|
||||
const uploadFile = Array.isArray(info) ? info[0] : info;
|
||||
|
||||
if (!uploadFile) {
|
||||
return {
|
||||
status: 'fail' as const,
|
||||
error: 'No file provided',
|
||||
response: {},
|
||||
};
|
||||
}
|
||||
|
||||
let { api } = props;
|
||||
if (!api || !isFunction(api)) {
|
||||
api = useUpload(props.directory).httpRequest;
|
||||
}
|
||||
try {
|
||||
// 上传文件
|
||||
const progressEvent: AxiosProgressEvent = (e) => {
|
||||
const percent = Math.trunc((e.loaded / e.total!) * 100);
|
||||
uploadFile.onProgress?.({ percent });
|
||||
};
|
||||
const res = await api?.(uploadFile.raw!, progressEvent);
|
||||
|
||||
// 处理上传成功后的逻辑
|
||||
handleUploadSuccess(res!, uploadFile.raw as File);
|
||||
|
||||
uploadFile.onSuccess!(res);
|
||||
message.success($t('ui.upload.uploadSuccess'));
|
||||
|
||||
// 提取 URL，兼容不同的返回格式
|
||||
const fileUrl = (res as any)?.url || (res as any)?.data || res;
|
||||
|
||||
return {
|
||||
status: 'success' as const,
|
||||
response: {
|
||||
url: fileUrl,
|
||||
},
|
||||
};
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
uploadFile.onError!(error);
|
||||
handleUploadError(error);
|
||||
return {
|
||||
status: 'fail' as const,
|
||||
error: error instanceof Error ? error.message : 'Upload failed',
|
||||
response: {},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// 处理上传成功
|
||||
function handleUploadSuccess(res: any, file: File) {
|
||||
// 删除临时文件
|
||||
const index = fileList.value?.findIndex((item) => item.name === file.name);
|
||||
if (index !== -1) {
|
||||
fileList.value?.splice(index!, 1);
|
||||
}
|
||||
|
||||
// 添加到临时上传列表
|
||||
const fileUrl = res?.url || res?.data || res;
|
||||
uploadList.value.push({
|
||||
name: file.name,
|
||||
url: fileUrl,
|
||||
status: UploadResultStatus.SUCCESS,
|
||||
uid: file.name + Date.now(),
|
||||
});
|
||||
|
||||
// 检查是否所有文件都上传完成
|
||||
if (uploadList.value.length >= uploadNumber.value) {
|
||||
fileList.value?.push(...uploadList.value);
|
||||
uploadList.value = [];
|
||||
uploadNumber.value = 0;
|
||||
|
||||
// 更新值
|
||||
const value = getValue();
|
||||
isInnerOperate.value = true;
|
||||
emit('update:value', value);
|
||||
emit('update:modelValue', value);
|
||||
emit('change', value);
|
||||
}
|
||||
}
|
||||
|
||||
function getValue() {
|
||||
const list = (fileList.value || [])
|
||||
.filter((item) => item?.status === UploadResultStatus.SUCCESS)
|
||||
.map((item: any) => {
|
||||
if (item?.response && props?.resultField) {
|
||||
return item?.response;
|
||||
}
|
||||
return item?.url || item?.response?.url || item?.response;
|
||||
});
|
||||
|
||||
// 单个文件的情况，根据输入参数类型决定返回格式
|
||||
if (props.maxNumber === 1) {
|
||||
const singleValue = list.length > 0 ? list[0] : '';
|
||||
// 如果原始值是字符串或 modelValue 是字符串，返回字符串
|
||||
if (
|
||||
isString(props.value) ||
|
||||
(isUsingModelValue.value && isString(props.modelValue))
|
||||
) {
|
||||
return singleValue;
|
||||
}
|
||||
return singleValue;
|
||||
}
|
||||
|
||||
// 多文件情况，根据输入参数类型决定返回格式
|
||||
if (isUsingModelValue.value) {
|
||||
return Array.isArray(props.modelValue) ? list : list.join(',');
|
||||
}
|
||||
|
||||
return Array.isArray(props.value) ? list : list.join(',');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Upload
|
||||
v-bind="$attrs"
|
||||
v-model:file-list="fileList"
|
||||
:accept="getStringAccept"
|
||||
:before-upload="beforeUpload"
|
||||
:request-method="customRequest"
|
||||
:disabled="disabled"
|
||||
:max-count="maxNumber"
|
||||
:multiple="multiple"
|
||||
list-type="text"
|
||||
:progress="{ showInfo: true }"
|
||||
:show-upload-list="{
|
||||
showPreviewIcon: true,
|
||||
showRemoveIcon: true,
|
||||
showDownloadIcon: true,
|
||||
}"
|
||||
@remove="handleRemove"
|
||||
@preview="handlePreview"
|
||||
@reject="handleExceed"
|
||||
>
|
||||
<div v-if="drag" class="upload-drag-area">
|
||||
<p class="upload-drag-icon">
|
||||
<IconifyIcon icon="lucide:cloud-upload" />
|
||||
</p>
|
||||
<p class="upload-text">点击或拖拽文件到此区域上传</p>
|
||||
<p class="upload-hint">
|
||||
支持{{ accept.join('/') }}格式文件，不超过{{ maxSize }}MB
|
||||
</p>
|
||||
</div>
|
||||
<div v-else-if="fileList && fileList.length < maxNumber">
|
||||
<Button>
|
||||
<IconifyIcon icon="lucide:cloud-upload" />
|
||||
{{ $t('ui.upload.upload') }}
|
||||
</Button>
|
||||
</div>
|
||||
<div
|
||||
v-if="showDescription && !drag"
|
||||
class="mt-2 flex flex-wrap items-center"
|
||||
>
|
||||
请上传不超过
|
||||
<div class="text-primary mx-1 font-bold">{{ maxSize }}MB</div>
|
||||
的
|
||||
<div class="text-primary mx-1 font-bold">{{ accept.join('/') }}</div>
|
||||
格式文件
|
||||
</div>
|
||||
</Upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.upload-drag-area {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
background-color: var(--td-bg-color-container, #fafafa);
|
||||
border: 2px dashed var(--td-border-level-2-color, #d9d9d9);
|
||||
border-radius: var(--td-radius-default, 8px);
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.upload-drag-area:hover {
|
||||
border-color: var(--td-brand-color, #0052d9);
|
||||
}
|
||||
|
||||
.upload-drag-icon {
|
||||
margin-bottom: 16px;
|
||||
font-size: 48px;
|
||||
color: var(--td-text-color-placeholder, #d9d9d9);
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
margin-bottom: 8px;
|
||||
font-size: 16px;
|
||||
color: var(--td-text-color-secondary, #666);
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
font-size: 14px;
|
||||
color: var(--td-text-color-placeholder, #999);
|
||||
}
|
||||
</style>
|
||||
20
apps/web-tdesign/src/components/upload/helper.ts
Normal file
20
apps/web-tdesign/src/components/upload/helper.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
* 默认图片类型
|
||||
*/
|
||||
export const defaultImageAccepts = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
|
||||
|
||||
export function checkFileType(file: File, accepts: string[]) {
|
||||
if (!accepts || accepts.length === 0) {
|
||||
return true;
|
||||
}
|
||||
const newTypes = accepts.join('|');
|
||||
const reg = new RegExp(`${String.raw`\.(` + newTypes})$`, 'i');
|
||||
return reg.test(file.name);
|
||||
}
|
||||
|
||||
export function checkImgType(
|
||||
file: File,
|
||||
accepts: string[] = defaultImageAccepts,
|
||||
) {
|
||||
return checkFileType(file, accepts);
|
||||
}
|
||||
362
apps/web-tdesign/src/components/upload/image-upload.vue
Normal file
362
apps/web-tdesign/src/components/upload/image-upload.vue
Normal file
@@ -0,0 +1,362 @@
|
||||
<script lang="ts" setup>
|
||||
import type { UploadFile, UploadProps } from 'tdesign-vue-next';
|
||||
|
||||
import type { FileUploadProps } from './typing';
|
||||
|
||||
import type { AxiosProgressEvent } from '#/api/infra/file';
|
||||
|
||||
import { computed, ref, toRefs, watch } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { $t } from '@vben/locales';
|
||||
import { isFunction, isNumber, isObject, isString } from '@vben/utils';
|
||||
|
||||
import { Dialog, Upload } from 'tdesign-vue-next';
|
||||
|
||||
import { message } from '#/adapter/tdesign';
|
||||
|
||||
import { checkImgType, defaultImageAccepts } from './helper';
|
||||
import { UploadResultStatus } from './typing';
|
||||
import { useUpload, useUploadType } from './use-upload';
|
||||
|
||||
defineOptions({ name: 'ImageUpload', inheritAttrs: false });
|
||||
|
||||
const props = withDefaults(defineProps<FileUploadProps>(), {
|
||||
value: () => [],
|
||||
modelValue: undefined,
|
||||
directory: undefined,
|
||||
disabled: false,
|
||||
listType: 'picture-card',
|
||||
helpText: '',
|
||||
maxSize: 2,
|
||||
maxNumber: 1,
|
||||
accept: () => defaultImageAccepts,
|
||||
multiple: false,
|
||||
api: undefined,
|
||||
resultField: '',
|
||||
showDescription: true,
|
||||
});
|
||||
const emit = defineEmits([
|
||||
'change',
|
||||
'update:value',
|
||||
'update:modelValue',
|
||||
'delete',
|
||||
]);
|
||||
const { accept, helpText, maxNumber, maxSize } = toRefs(props);
|
||||
const isInnerOperate = ref<boolean>(false);
|
||||
const { getStringAccept } = useUploadType({
|
||||
acceptRef: accept,
|
||||
helpTextRef: helpText,
|
||||
maxNumberRef: maxNumber,
|
||||
maxSizeRef: maxSize,
|
||||
});
|
||||
|
||||
// 计算当前绑定的值，优先使用 modelValue
|
||||
const currentValue = computed(() => {
|
||||
return props.modelValue === undefined ? props.value : props.modelValue;
|
||||
});
|
||||
|
||||
// 判断是否使用 modelValue
|
||||
const isUsingModelValue = computed(() => {
|
||||
return props.modelValue !== undefined;
|
||||
});
|
||||
const previewOpen = ref<boolean>(false); // 是否展示预览
|
||||
const previewImage = ref<string>(''); // 预览图片
|
||||
const previewTitle = ref<string>(''); // 预览标题
|
||||
|
||||
const fileList = ref<UploadProps['files']>([]);
|
||||
const isLtMsg = ref<boolean>(true); // 文件大小错误提示
|
||||
const isActMsg = ref<boolean>(true); // 文件类型错误提示
|
||||
const isFirstRender = ref<boolean>(true); // 是否第一次渲染
|
||||
const uploadNumber = ref<number>(0); // 上传文件计数器
|
||||
const uploadList = ref<any[]>([]); // 临时上传列表
|
||||
|
||||
watch(
|
||||
currentValue,
|
||||
async (v) => {
|
||||
if (isInnerOperate.value) {
|
||||
isInnerOperate.value = false;
|
||||
return;
|
||||
}
|
||||
let value: string | string[] = [];
|
||||
if (v) {
|
||||
if (Array.isArray(v)) {
|
||||
value = v;
|
||||
} else {
|
||||
value.push(v);
|
||||
}
|
||||
fileList.value = value.map((item, i) => {
|
||||
if (item && isString(item)) {
|
||||
return {
|
||||
uid: `${-i}`,
|
||||
name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
|
||||
status: UploadResultStatus.SUCCESS,
|
||||
url: item,
|
||||
};
|
||||
} else if (item && isObject(item)) {
|
||||
return item;
|
||||
}
|
||||
return null;
|
||||
}) as UploadProps['files'];
|
||||
}
|
||||
if (!isFirstRender.value) {
|
||||
emit('change', value);
|
||||
isFirstRender.value = false;
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
|
||||
function getBase64<T extends ArrayBuffer | null | string>(file: File) {
|
||||
return new Promise<T>((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.addEventListener('load', () => {
|
||||
resolve(reader.result as T);
|
||||
});
|
||||
reader.addEventListener('error', (error) => reject(error));
|
||||
});
|
||||
}
|
||||
|
||||
async function handlePreview(file: UploadFile) {
|
||||
if (!file.url && !file.preview) {
|
||||
// TDesign 使用 raw 而不是 originFileObj
|
||||
file.preview = await getBase64<string>(file.raw!);
|
||||
}
|
||||
previewImage.value = file.url || file.preview || '';
|
||||
previewOpen.value = true;
|
||||
previewTitle.value =
|
||||
file.name ||
|
||||
previewImage.value.slice(
|
||||
Math.max(0, previewImage.value.lastIndexOf('/') + 1),
|
||||
);
|
||||
}
|
||||
|
||||
async function handleRemove(file: UploadFile) {
|
||||
if (fileList.value) {
|
||||
const index = fileList.value.findIndex((item) => item.uid === file.uid);
|
||||
index !== -1 && fileList.value.splice(index, 1);
|
||||
const value = getValue();
|
||||
isInnerOperate.value = true;
|
||||
emit('update:value', value);
|
||||
emit('update:modelValue', value);
|
||||
emit('change', value);
|
||||
emit('delete', file);
|
||||
}
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
previewOpen.value = false;
|
||||
previewTitle.value = '';
|
||||
}
|
||||
|
||||
async function beforeUpload(file: UploadFile) {
|
||||
// 检查文件数量限制
|
||||
if (
|
||||
isNumber(fileList.value!.length) &&
|
||||
fileList.value!.length >= props.maxNumber
|
||||
) {
|
||||
message.error($t('ui.upload.maxNumber', [props.maxNumber]));
|
||||
return Upload.LIST_IGNORE;
|
||||
}
|
||||
|
||||
const { maxSize, accept } = props;
|
||||
const isAct = checkImgType(file.raw!, accept);
|
||||
if (!isAct) {
|
||||
message.error($t('ui.upload.acceptUpload', [accept]));
|
||||
isActMsg.value = false;
|
||||
// 防止弹出多个错误提示
|
||||
setTimeout(() => (isActMsg.value = true), 1000);
|
||||
return Upload.LIST_IGNORE;
|
||||
}
|
||||
const isLt = file.size! / 1024 / 1024 > maxSize;
|
||||
if (isLt) {
|
||||
message.error($t('ui.upload.maxSizeMultiple', [maxSize]));
|
||||
isLtMsg.value = false;
|
||||
// 防止弹出多个错误提示
|
||||
setTimeout(() => (isLtMsg.value = true), 1000);
|
||||
return Upload.LIST_IGNORE;
|
||||
}
|
||||
|
||||
// 只有在验证通过后才增加计数器
|
||||
uploadNumber.value++;
|
||||
return true;
|
||||
}
|
||||
|
||||
async function customRequest(info: UploadFile | UploadFile[]) {
|
||||
// 处理单个文件上传
|
||||
const uploadFile = Array.isArray(info) ? info[0] : info;
|
||||
|
||||
if (!uploadFile) {
|
||||
return {
|
||||
status: 'fail' as const,
|
||||
error: 'No file provided',
|
||||
response: {},
|
||||
};
|
||||
}
|
||||
|
||||
let { api } = props;
|
||||
if (!api || !isFunction(api)) {
|
||||
api = useUpload(props.directory).httpRequest;
|
||||
}
|
||||
try {
|
||||
// 上传文件
|
||||
const progressEvent: AxiosProgressEvent = (e) => {
|
||||
const percent = Math.trunc((e.loaded / e.total!) * 100);
|
||||
uploadFile.onProgress!({ percent });
|
||||
};
|
||||
// TDesign 使用 raw 而不是 file
|
||||
const res = await api?.(uploadFile.raw as File, progressEvent);
|
||||
|
||||
// 处理上传成功后的逻辑
|
||||
handleUploadSuccess(res, uploadFile.raw as File);
|
||||
|
||||
uploadFile.onSuccess!(res);
|
||||
message.success($t('ui.upload.uploadSuccess'));
|
||||
|
||||
// 提取 URL，兼容不同的返回格式
|
||||
const fileUrl = (res as any)?.url || (res as any)?.data || res;
|
||||
|
||||
return {
|
||||
status: 'success' as const,
|
||||
response: {
|
||||
url: fileUrl,
|
||||
},
|
||||
};
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
uploadFile.onError!(error);
|
||||
handleUploadError(error);
|
||||
return {
|
||||
status: 'fail' as const,
|
||||
error: error instanceof Error ? error.message : 'Upload failed',
|
||||
response: {},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// 处理上传成功
|
||||
function handleUploadSuccess(res: any, file: File) {
|
||||
// 删除临时文件
|
||||
const index = fileList.value?.findIndex((item) => item.name === file.name);
|
||||
if (index !== -1) {
|
||||
fileList.value?.splice(index!, 1);
|
||||
}
|
||||
|
||||
// 添加到临时上传列表
|
||||
const fileUrl = res?.url || res?.data || res;
|
||||
uploadList.value.push({
|
||||
name: file.name,
|
||||
url: fileUrl,
|
||||
status: UploadResultStatus.SUCCESS,
|
||||
uid: file.name + Date.now(),
|
||||
});
|
||||
|
||||
// 检查是否所有文件都上传完成
|
||||
if (uploadList.value.length >= uploadNumber.value) {
|
||||
fileList.value?.push(...uploadList.value);
|
||||
uploadList.value = [];
|
||||
uploadNumber.value = 0;
|
||||
|
||||
// 更新值
|
||||
const value = getValue();
|
||||
isInnerOperate.value = true;
|
||||
emit('update:value', value);
|
||||
emit('update:modelValue', value);
|
||||
emit('change', value);
|
||||
}
|
||||
}
|
||||
|
||||
// 处理上传错误
|
||||
function handleUploadError(error: any) {
|
||||
console.error('上传错误:', error);
|
||||
// 上传失败时减少计数器
|
||||
uploadNumber.value = Math.max(0, uploadNumber.value - 1);
|
||||
}
|
||||
|
||||
function getValue() {
|
||||
const list = (fileList.value || [])
|
||||
.filter((item) => item?.status === UploadResultStatus.SUCCESS)
|
||||
.map((item: any) => {
|
||||
if (item?.response && props?.resultField) {
|
||||
return item?.response;
|
||||
}
|
||||
return item?.url || item?.response?.url || item?.response;
|
||||
});
|
||||
|
||||
// 单个文件的情况，根据输入参数类型决定返回格式
|
||||
if (props.maxNumber === 1) {
|
||||
const singleValue = list.length > 0 ? list[0] : '';
|
||||
// 如果原始值是字符串或 modelValue 是字符串，返回字符串
|
||||
if (
|
||||
isString(props.value) ||
|
||||
(isUsingModelValue.value && isString(props.modelValue))
|
||||
) {
|
||||
return singleValue;
|
||||
}
|
||||
return singleValue;
|
||||
}
|
||||
|
||||
// 多文件情况，根据输入参数类型决定返回格式
|
||||
if (isUsingModelValue.value) {
|
||||
return Array.isArray(props.modelValue) ? list : list.join(',');
|
||||
}
|
||||
|
||||
return Array.isArray(props.value) ? list : list.join(',');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Upload
|
||||
v-bind="$attrs"
|
||||
v-model:file-list="fileList"
|
||||
:accept="getStringAccept"
|
||||
:before-upload="beforeUpload"
|
||||
:request-method="customRequest"
|
||||
:disabled="disabled"
|
||||
:list-type="listType"
|
||||
:max-count="maxNumber"
|
||||
:multiple="multiple"
|
||||
:progress="{ showInfo: true }"
|
||||
@preview="handlePreview"
|
||||
@remove="handleRemove"
|
||||
>
|
||||
<div
|
||||
v-if="fileList && fileList.length < maxNumber"
|
||||
class="flex flex-col items-center justify-center"
|
||||
>
|
||||
<IconifyIcon icon="lucide:cloud-upload" />
|
||||
<div class="mt-2">{{ $t('ui.upload.imgUpload') }}</div>
|
||||
</div>
|
||||
</Upload>
|
||||
<div
|
||||
v-if="showDescription"
|
||||
class="mt-2 flex flex-wrap items-center text-sm"
|
||||
>
|
||||
请上传不超过
|
||||
<div class="text-primary mx-1 font-bold">{{ maxSize }}MB</div>
|
||||
的
|
||||
<div class="text-primary mx-1 font-bold">{{ accept.join('/') }}</div>
|
||||
格式文件
|
||||
</div>
|
||||
<Dialog
|
||||
:footer="false"
|
||||
:visible="previewOpen"
|
||||
:header="previewTitle"
|
||||
@close="handleCancel"
|
||||
>
|
||||
<img :src="previewImage" alt="" class="w-full" />
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* TDesign 上传组件样式 */
|
||||
:deep(.t-upload__card-item) {
|
||||
@apply flex items-center justify-center;
|
||||
}
|
||||
</style>
|
||||
3
apps/web-tdesign/src/components/upload/index.ts
Normal file
3
apps/web-tdesign/src/components/upload/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export { default as FileUpload } from './file-upload.vue';
|
||||
export { default as ImageUpload } from './image-upload.vue';
|
||||
export { default as InputUpload } from './input-upload.vue';
|
||||
74
apps/web-tdesign/src/components/upload/input-upload.vue
Normal file
74
apps/web-tdesign/src/components/upload/input-upload.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<script setup lang="ts">
|
||||
import type { InputProps, TextareaProps } from 'tdesign-vue-next';
|
||||
|
||||
import type { FileUploadProps } from './typing';
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import { Col, Input, Row, Textarea } from 'tdesign-vue-next';
|
||||
|
||||
import FileUpload from './file-upload.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
defaultValue?: number | string;
|
||||
fileUploadProps?: FileUploadProps;
|
||||
inputProps?: InputProps;
|
||||
inputType?: 'input' | 'textarea';
|
||||
modelValue?: number | string;
|
||||
textareaProps?: TextareaProps;
|
||||
}>();
|
||||
|
||||
const emits = defineEmits<{
|
||||
(e: 'change', payload: number | string): void;
|
||||
(e: 'update:value', payload: number | string): void;
|
||||
(e: 'update:modelValue', payload: number | string): void;
|
||||
}>();
|
||||
|
||||
const modelValue = useVModel(props, 'modelValue', emits, {
|
||||
defaultValue: props.defaultValue,
|
||||
passive: true,
|
||||
});
|
||||
|
||||
function handleReturnText(text: string) {
|
||||
modelValue.value = text;
|
||||
emits('change', modelValue.value);
|
||||
emits('update:value', modelValue.value);
|
||||
emits('update:modelValue', modelValue.value);
|
||||
}
|
||||
|
||||
const inputProps = computed(() => {
|
||||
return {
|
||||
...props.inputProps,
|
||||
value: modelValue.value,
|
||||
};
|
||||
});
|
||||
|
||||
const textareaProps = computed(() => {
|
||||
return {
|
||||
...props.textareaProps,
|
||||
value: modelValue.value,
|
||||
};
|
||||
});
|
||||
|
||||
const fileUploadProps = computed(() => {
|
||||
return {
|
||||
...props.fileUploadProps,
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Row>
|
||||
<Col :span="18">
|
||||
<Input readonly v-if="inputType === 'input'" v-bind="inputProps" />
|
||||
<Textarea readonly v-else :row="4" v-bind="textareaProps" />
|
||||
</Col>
|
||||
<Col :span="6">
|
||||
<FileUpload
|
||||
class="ml-4"
|
||||
v-bind="fileUploadProps"
|
||||
@return-text="handleReturnText"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</template>
|
||||
39
apps/web-tdesign/src/components/upload/typing.ts
Normal file
39
apps/web-tdesign/src/components/upload/typing.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import type { AxiosResponse } from '@vben/request';
|
||||
|
||||
import type { AxiosProgressEvent } from '#/api/infra/file';
|
||||
|
||||
export enum UploadResultStatus {
|
||||
ERROR = 'error',
|
||||
PROGRESS = 'progress',
|
||||
SUCCESS = 'success',
|
||||
WAITING = 'waiting',
|
||||
}
|
||||
|
||||
export type UploadListType = 'picture' | 'picture-card' | 'text';
|
||||
|
||||
export interface FileUploadProps {
|
||||
// 根据后缀，或者其他
|
||||
accept?: string[];
|
||||
api?: (
|
||||
file: File,
|
||||
onUploadProgress?: AxiosProgressEvent,
|
||||
) => Promise<AxiosResponse<any>>;
|
||||
// 上传的目录
|
||||
directory?: string;
|
||||
disabled?: boolean;
|
||||
drag?: boolean; // 是否支持拖拽上传
|
||||
helpText?: string;
|
||||
listType?: UploadListType;
|
||||
// 最大数量的文件，Infinity不限制
|
||||
maxNumber?: number;
|
||||
modelValue?: string | string[]; // v-model 支持
|
||||
// 文件最大多少MB
|
||||
maxSize?: number;
|
||||
// 是否支持多选
|
||||
multiple?: boolean;
|
||||
// support xxx.xxx.xx
|
||||
resultField?: string;
|
||||
// 是否显示下面的描述
|
||||
showDescription?: boolean;
|
||||
value?: string | string[];
|
||||
}
|
||||
168
apps/web-tdesign/src/components/upload/use-upload.ts
Normal file
168
apps/web-tdesign/src/components/upload/use-upload.ts
Normal file
@@ -0,0 +1,168 @@
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import type { AxiosProgressEvent, InfraFileApi } from '#/api/infra/file';
|
||||
|
||||
import { computed, unref } from 'vue';
|
||||
|
||||
import { useAppConfig } from '@vben/hooks';
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { createFile, getFilePresignedUrl, uploadFile } from '#/api/infra/file';
|
||||
import { baseRequestClient } from '#/api/request';
|
||||
|
||||
const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
|
||||
|
||||
/**
|
||||
* 上传类型
|
||||
*/
|
||||
enum UPLOAD_TYPE {
|
||||
// 客户端直接上传（只支持S3服务）
|
||||
CLIENT = 'client',
|
||||
// 客户端发送到后端上传
|
||||
SERVER = 'server',
|
||||
}
|
||||
|
||||
export function useUploadType({
|
||||
acceptRef,
|
||||
helpTextRef,
|
||||
maxNumberRef,
|
||||
maxSizeRef,
|
||||
}: {
|
||||
acceptRef: Ref<string[]>;
|
||||
helpTextRef: Ref<string>;
|
||||
maxNumberRef: Ref<number>;
|
||||
maxSizeRef: Ref<number>;
|
||||
}) {
|
||||
// 文件类型限制
|
||||
const getAccept = computed(() => {
|
||||
const accept = unref(acceptRef);
|
||||
if (accept && accept.length > 0) {
|
||||
return accept;
|
||||
}
|
||||
return [];
|
||||
});
|
||||
const getStringAccept = computed(() => {
|
||||
return unref(getAccept)
|
||||
.map((item) => {
|
||||
return item.indexOf('/') > 0 || item.startsWith('.')
|
||||
? item
|
||||
: `.${item}`;
|
||||
})
|
||||
.join(',');
|
||||
});
|
||||
|
||||
// 支持jpg、jpeg、png格式，不超过2M，最多可选择10张图片，。
|
||||
const getHelpText = computed(() => {
|
||||
const helpText = unref(helpTextRef);
|
||||
if (helpText) {
|
||||
return helpText;
|
||||
}
|
||||
const helpTexts: string[] = [];
|
||||
|
||||
const accept = unref(acceptRef);
|
||||
if (accept.length > 0) {
|
||||
helpTexts.push($t('ui.upload.accept', [accept.join(',')]));
|
||||
}
|
||||
|
||||
const maxSize = unref(maxSizeRef);
|
||||
if (maxSize) {
|
||||
helpTexts.push($t('ui.upload.maxSize', [maxSize]));
|
||||
}
|
||||
|
||||
const maxNumber = unref(maxNumberRef);
|
||||
if (maxNumber && maxNumber !== Infinity) {
|
||||
helpTexts.push($t('ui.upload.maxNumber', [maxNumber]));
|
||||
}
|
||||
return helpTexts.join('，');
|
||||
});
|
||||
return { getAccept, getStringAccept, getHelpText };
|
||||
}
|
||||
|
||||
// TODO @芋艿：目前保持和 admin-vue3 一致，后续可能重构
|
||||
export function useUpload(directory?: string) {
|
||||
// 后端上传地址
|
||||
const uploadUrl = getUploadUrl();
|
||||
// 是否使用前端直连上传
|
||||
const isClientUpload =
|
||||
UPLOAD_TYPE.CLIENT === import.meta.env.VITE_UPLOAD_TYPE;
|
||||
// 重写ElUpload上传方法
|
||||
async function httpRequest(
|
||||
file: File,
|
||||
onUploadProgress?: AxiosProgressEvent,
|
||||
) {
|
||||
// 模式一：前端上传
|
||||
if (isClientUpload) {
|
||||
// 1.1 生成文件名称
|
||||
const fileName = await generateFileName(file);
|
||||
// 1.2 获取文件预签名地址
|
||||
const presignedInfo = await getFilePresignedUrl(fileName, directory);
|
||||
// 1.3 上传文件
|
||||
return baseRequestClient
|
||||
.put(presignedInfo.uploadUrl, file, {
|
||||
headers: {
|
||||
'Content-Type': file.type,
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
// 1.4. 记录文件信息到后端（异步）
|
||||
createFile0(presignedInfo, file);
|
||||
// 通知成功，数据格式保持与后端上传的返回结果一致
|
||||
return { url: presignedInfo.url };
|
||||
});
|
||||
} else {
|
||||
// 模式二：后端上传
|
||||
return uploadFile({ file, directory }, onUploadProgress);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
uploadUrl,
|
||||
httpRequest,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 获得上传 URL
|
||||
*/
|
||||
export function getUploadUrl(): string {
|
||||
return `${apiURL}/infra/file/upload`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建文件信息
|
||||
*
|
||||
* @param vo 文件预签名信息
|
||||
* @param file 文件
|
||||
*/
|
||||
function createFile0(
|
||||
vo: InfraFileApi.FilePresignedUrlRespVO,
|
||||
file: File,
|
||||
): InfraFileApi.File {
|
||||
const fileVO = {
|
||||
configId: vo.configId,
|
||||
url: vo.url,
|
||||
path: vo.path,
|
||||
name: file.name,
|
||||
type: file.type,
|
||||
size: file.size,
|
||||
};
|
||||
createFile(fileVO);
|
||||
return fileVO;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成文件名称（使用算法SHA256）
|
||||
*
|
||||
* @param file 要上传的文件
|
||||
*/
|
||||
async function generateFileName(file: File) {
|
||||
// // 读取文件内容
|
||||
// const data = await file.arrayBuffer();
|
||||
// const wordArray = CryptoJS.lib.WordArray.create(data);
|
||||
// // 计算SHA256
|
||||
// const sha256 = CryptoJS.SHA256(wordArray).toString();
|
||||
// // 拼接后缀
|
||||
// const ext = file.name.slice(Math.max(0, file.name.lastIndexOf('.')));
|
||||
// return `${sha256}${ext}`;
|
||||
return file.name;
|
||||
}
|
||||
Reference in New Issue
Block a user