多选修改
This commit is contained in:
zhx
parent
aa0988af6b
commit
045a8af46f
@ -1,19 +1,13 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, h, useAttrs } from 'vue';
|
||||
import { computed, watch } from 'vue';
|
||||
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
|
||||
import { Select } from 'antdv-next';
|
||||
|
||||
import {
|
||||
SYS_ORIGIN_OPTIONS,
|
||||
getDisplayableSysOriginOptions,
|
||||
getDisplayableSysOrigins,
|
||||
isHiddenSysOrigin,
|
||||
} from '#/views/system/shared';
|
||||
|
||||
import SysOriginIcon from './sys-origin-icon.vue';
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
name: 'SysOriginSelect',
|
||||
@ -38,129 +32,43 @@ const emit = defineEmits<{
|
||||
(event: 'update:value', value: SelectValue): void;
|
||||
}>();
|
||||
|
||||
const attrs = useAttrs();
|
||||
const accessStore = useAccessStore();
|
||||
|
||||
const fallbackOptions = computed(() => {
|
||||
const options = getDisplayableSysOrigins(accessStore.accessCodes || []);
|
||||
return (options.length > 0 ? options : getDisplayableSysOriginOptions(SYS_ORIGIN_OPTIONS)) as AppOriginOption[];
|
||||
return (options.length > 0 ? options : SYS_ORIGIN_OPTIONS) as AppOriginOption[];
|
||||
});
|
||||
|
||||
const normalizedOptions = computed(() =>
|
||||
getDisplayableSysOriginOptions(props.options?.length ? props.options : fallbackOptions.value).map(
|
||||
(item) => {
|
||||
const value = String(item.value ?? '');
|
||||
const label = String(item.label ?? ('name' in item ? item.name : '') ?? value);
|
||||
return {
|
||||
...item,
|
||||
icon: String(item.icon || value).toLowerCase(),
|
||||
label: label || value,
|
||||
value,
|
||||
};
|
||||
},
|
||||
),
|
||||
const rawOptions = computed(() =>
|
||||
props.options?.length ? props.options : fallbackOptions.value,
|
||||
);
|
||||
|
||||
const optionMap = computed(
|
||||
() => new Map(normalizedOptions.value.map((item) => [String(item.value), item])),
|
||||
const hiddenDefaultValue = computed(() =>
|
||||
String(rawOptions.value[0]?.value ?? SYS_ORIGIN_OPTIONS[0]?.value ?? 'LIKEI'),
|
||||
);
|
||||
|
||||
const displayValue = computed<SelectValue>(() => {
|
||||
if (Array.isArray(props.value)) {
|
||||
return props.value.filter((item) => !isHiddenSysOrigin(item));
|
||||
}
|
||||
return isHiddenSysOrigin(props.value) ? undefined : props.value;
|
||||
});
|
||||
|
||||
const selectAttrs = computed(() => {
|
||||
const nextAttrs = { ...attrs } as Record<string, any>;
|
||||
delete nextAttrs.options;
|
||||
delete nextAttrs.value;
|
||||
delete nextAttrs.onChange;
|
||||
delete nextAttrs['onUpdate:value'];
|
||||
delete nextAttrs.labelRender;
|
||||
delete nextAttrs.optionRender;
|
||||
delete nextAttrs.optionLabelProp;
|
||||
delete nextAttrs.optionFilterProp;
|
||||
return nextAttrs;
|
||||
});
|
||||
|
||||
function renderContent(option?: Record<string, any> | null) {
|
||||
if (!option || isHiddenSysOrigin(option.value ?? option.label ?? option.name)) {
|
||||
return null;
|
||||
}
|
||||
const label = String(option.label || option.name || option.value || '-');
|
||||
const code = String(option.icon || option.value || label);
|
||||
return h('span', { class: 'sys-origin-select__content' }, [
|
||||
h(SysOriginIcon, {
|
||||
code,
|
||||
label,
|
||||
size: 18,
|
||||
}),
|
||||
h('span', { class: 'sys-origin-select__text' }, label),
|
||||
]);
|
||||
}
|
||||
|
||||
function resolveOption(option?: Record<string, any> | null): null | Record<string, any> {
|
||||
if (!option) {
|
||||
return null;
|
||||
}
|
||||
const nextOption = option.option || option.data || option.originOption || option.item;
|
||||
if (nextOption && nextOption !== option) {
|
||||
return resolveOption(nextOption);
|
||||
}
|
||||
if (option.value !== undefined) {
|
||||
return optionMap.value.get(String(option.value)) || option;
|
||||
}
|
||||
return option;
|
||||
}
|
||||
|
||||
function renderOption(option: Record<string, any>) {
|
||||
return renderContent(resolveOption(option));
|
||||
}
|
||||
|
||||
function renderLabel(item: Record<string, any>) {
|
||||
if (isHiddenSysOrigin(item?.value ?? item?.label)) {
|
||||
return null;
|
||||
}
|
||||
return renderContent(
|
||||
resolveOption(item) || {
|
||||
icon: item?.value,
|
||||
label: item?.label || item?.value || '',
|
||||
value: item?.value || '',
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
function handleChange(value: SelectValue, option: any) {
|
||||
emit('update:value', value);
|
||||
emit('change', value, option);
|
||||
}
|
||||
watch(
|
||||
() => [props.value, hiddenDefaultValue.value] as const,
|
||||
([value, defaultValue]) => {
|
||||
if (Array.isArray(value) || value !== undefined && value !== null && value !== '') {
|
||||
return;
|
||||
}
|
||||
if (!defaultValue) {
|
||||
return;
|
||||
}
|
||||
emit('update:value', defaultValue);
|
||||
emit('change', defaultValue, rawOptions.value[0] || null);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Select
|
||||
v-bind="selectAttrs"
|
||||
:value="displayValue"
|
||||
:options="normalizedOptions"
|
||||
option-filter-prop="label"
|
||||
option-label-prop="label"
|
||||
:label-render="renderLabel"
|
||||
:option-render="renderOption"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<span class="sys-origin-select--hidden" aria-hidden="true" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sys-origin-select__content {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sys-origin-select__text {
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
.sys-origin-select--hidden {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,13 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
import {
|
||||
computed,
|
||||
defineComponent,
|
||||
nextTick,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
onUpdated,
|
||||
ref,
|
||||
} from 'vue';
|
||||
|
||||
import { Pagination, Table } from 'antdv-next';
|
||||
|
||||
@ -11,32 +19,59 @@ const props = withDefaults(
|
||||
columns: Array<Record<string, any>>;
|
||||
current: number;
|
||||
dataSource: Array<Record<string, any>>;
|
||||
hasMore?: boolean;
|
||||
infinite?: boolean;
|
||||
loading?: boolean;
|
||||
loadMoreText?: string;
|
||||
pageSize: number;
|
||||
plain?: boolean;
|
||||
rowKey?: string;
|
||||
rowSelection?: Record<string, any>;
|
||||
scrollX?: number | string;
|
||||
showPager?: boolean;
|
||||
showSizeChanger?: boolean;
|
||||
summaryText?: string;
|
||||
total: number;
|
||||
}>(),
|
||||
{
|
||||
autoHeight: false,
|
||||
hasMore: false,
|
||||
infinite: false,
|
||||
loadMoreText: '下滑加载下一页',
|
||||
loading: false,
|
||||
plain: false,
|
||||
rowKey: 'id',
|
||||
scrollX: 1000,
|
||||
showPager: true,
|
||||
showSizeChanger: true,
|
||||
},
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
loadMore: [];
|
||||
pageChange: [page: number, pageSize: number];
|
||||
}>();
|
||||
|
||||
const RenderNode = defineComponent({
|
||||
name: 'AdminConfigTableRenderNode',
|
||||
props: {
|
||||
node: {
|
||||
default: null,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
return () => props.node as any;
|
||||
},
|
||||
});
|
||||
|
||||
const tableAreaRef = ref<HTMLDivElement | null>(null);
|
||||
const pagerRef = ref<HTMLDivElement | null>(null);
|
||||
const summaryRef = ref<HTMLDivElement | null>(null);
|
||||
const tableScrollY = ref(320);
|
||||
let tableResizeObserver: null | ResizeObserver = null;
|
||||
let tableBodyElement: HTMLElement | null = null;
|
||||
let loadMoreLocked = false;
|
||||
|
||||
const tableScroll = computed(() => {
|
||||
const scroll: Record<string, any> = { x: props.scrollX };
|
||||
@ -46,6 +81,19 @@ const tableScroll = computed(() => {
|
||||
return scroll;
|
||||
});
|
||||
|
||||
const infiniteStatusText = computed(() => {
|
||||
if (!props.infinite) {
|
||||
return '';
|
||||
}
|
||||
if (props.loading && props.dataSource.length > 0) {
|
||||
return '加载中...';
|
||||
}
|
||||
if (props.hasMore) {
|
||||
return props.loadMoreText;
|
||||
}
|
||||
return props.dataSource.length > 0 ? '已加载全部' : '';
|
||||
});
|
||||
|
||||
function stringifyCellValue(value: any) {
|
||||
if (value === undefined || value === null || value === '') {
|
||||
return '-';
|
||||
@ -68,6 +116,10 @@ function getColumnValue(record: Record<string, any>, column: Record<string, any>
|
||||
return record?.[String(dataIndex)];
|
||||
}
|
||||
|
||||
function isVNodeLike(value: any) {
|
||||
return Boolean(value && typeof value === 'object' && value.__v_isVNode);
|
||||
}
|
||||
|
||||
function updateTableScrollY() {
|
||||
if (!props.autoHeight) {
|
||||
return;
|
||||
@ -85,9 +137,45 @@ function updateTableScrollY() {
|
||||
);
|
||||
}
|
||||
|
||||
function emitLoadMore() {
|
||||
if (loadMoreLocked) {
|
||||
return;
|
||||
}
|
||||
loadMoreLocked = true;
|
||||
emit('loadMore');
|
||||
window.setTimeout(() => {
|
||||
loadMoreLocked = false;
|
||||
}, 300);
|
||||
}
|
||||
|
||||
function handleTableBodyScroll(event: Event) {
|
||||
if (!props.infinite || props.loading || !props.hasMore) {
|
||||
return;
|
||||
}
|
||||
const target = event.currentTarget as HTMLElement;
|
||||
const distanceToBottom =
|
||||
target.scrollHeight - target.scrollTop - target.clientHeight;
|
||||
if (distanceToBottom <= 80) {
|
||||
emitLoadMore();
|
||||
}
|
||||
}
|
||||
|
||||
function bindTableBodyScroll() {
|
||||
const nextBody = props.infinite
|
||||
? (tableAreaRef.value?.querySelector('.ant-table-body') as HTMLElement | null)
|
||||
: null;
|
||||
if (nextBody === tableBodyElement) {
|
||||
return;
|
||||
}
|
||||
tableBodyElement?.removeEventListener('scroll', handleTableBodyScroll);
|
||||
tableBodyElement = nextBody;
|
||||
tableBodyElement?.addEventListener('scroll', handleTableBodyScroll);
|
||||
}
|
||||
|
||||
async function refreshTableScroll() {
|
||||
await nextTick();
|
||||
updateTableScrollY();
|
||||
bindTableBodyScroll();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
@ -104,10 +192,18 @@ onMounted(async () => {
|
||||
if (pagerRef.value) {
|
||||
tableResizeObserver.observe(pagerRef.value);
|
||||
}
|
||||
if (summaryRef.value) {
|
||||
tableResizeObserver.observe(summaryRef.value);
|
||||
}
|
||||
window.addEventListener('resize', updateTableScrollY);
|
||||
});
|
||||
|
||||
onUpdated(() => {
|
||||
void refreshTableScroll();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
tableBodyElement?.removeEventListener('scroll', handleTableBodyScroll);
|
||||
tableResizeObserver?.disconnect();
|
||||
window.removeEventListener('resize', updateTableScrollY);
|
||||
});
|
||||
@ -118,6 +214,10 @@ onBeforeUnmount(() => {
|
||||
class="admin-config-table-card"
|
||||
:class="{ 'admin-config-table-card--plain': plain }"
|
||||
>
|
||||
<div v-if="summaryText" ref="summaryRef" class="admin-config-table-summary">
|
||||
{{ summaryText }}
|
||||
</div>
|
||||
|
||||
<div ref="tableAreaRef" class="admin-config-table-area">
|
||||
<Table
|
||||
class="admin-config-table"
|
||||
@ -126,22 +226,32 @@ onBeforeUnmount(() => {
|
||||
:loading="loading"
|
||||
:pagination="false"
|
||||
:row-key="rowKey"
|
||||
:row-selection="rowSelection"
|
||||
:scroll="tableScroll"
|
||||
>
|
||||
<template #headerCell="slotProps">
|
||||
<slot name="headerCell" v-bind="slotProps">
|
||||
<RenderNode
|
||||
v-if="isVNodeLike(slotProps.column?.title)"
|
||||
:node="slotProps.column.title"
|
||||
/>
|
||||
<slot v-else name="headerCell" v-bind="slotProps">
|
||||
{{ slotProps.column.title }}
|
||||
</slot>
|
||||
</template>
|
||||
<template #bodyCell="slotProps">
|
||||
<slot name="bodyCell" v-bind="slotProps">
|
||||
<RenderNode v-if="isVNodeLike(slotProps.text)" :node="slotProps.text" />
|
||||
<slot v-else name="bodyCell" v-bind="slotProps">
|
||||
{{ stringifyCellValue(getColumnValue(slotProps.record, slotProps.column)) }}
|
||||
</slot>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<div ref="pagerRef" class="admin-config-table-pager">
|
||||
<div v-if="infiniteStatusText" class="admin-config-table-load-status">
|
||||
{{ infiniteStatusText }}
|
||||
</div>
|
||||
|
||||
<div v-if="showPager" ref="pagerRef" class="admin-config-table-pager">
|
||||
<Pagination
|
||||
:current="current"
|
||||
:page-size="pageSize"
|
||||
@ -178,6 +288,15 @@ onBeforeUnmount(() => {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.admin-config-table-summary {
|
||||
border-bottom: 1px solid rgb(237 240 244);
|
||||
color: rgb(71 84 103);
|
||||
flex: 0 0 auto;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.admin-config-table {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@ -258,6 +377,16 @@ onBeforeUnmount(() => {
|
||||
background: rgb(250 252 255);
|
||||
}
|
||||
|
||||
.admin-config-table-load-status {
|
||||
border-top: 1px solid rgb(237 240 244);
|
||||
color: rgb(100 116 139);
|
||||
flex: 0 0 auto;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
padding: 8px 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.admin-config-table-pager {
|
||||
border-top: 1px solid rgb(237 240 244);
|
||||
display: flex;
|
||||
|
||||
@ -21,7 +21,10 @@ import { getAccessImgUrl, simpleUploadFile } from '#/api/legacy/oss';
|
||||
import { regionConfigTable } from '#/api/legacy/system';
|
||||
import { normalizeResourceCode } from '#/views/_shared/resource-code';
|
||||
|
||||
import { GIFT_CONFIG_TAB_OPTIONS } from '../constants';
|
||||
import {
|
||||
GIFT_CONFIG_TAB_OPTIONS,
|
||||
GIFT_SPECIAL_OPTIONS,
|
||||
} from '../constants';
|
||||
|
||||
type AssetKind = 'cover' | 'source';
|
||||
type RowStatus = 'error' | 'ready' | 'saved' | 'saving' | 'uploading';
|
||||
@ -72,9 +75,12 @@ const emit = defineEmits<{
|
||||
success: [];
|
||||
}>();
|
||||
|
||||
const DEFAULT_GIFT_SPECIAL_LIST = ['MUSIC', 'ANIMATION'];
|
||||
|
||||
const batchForm = reactive({
|
||||
giftTab: 'ORDINARY',
|
||||
regionList: [] as Array<number | string>,
|
||||
specialList: [...DEFAULT_GIFT_SPECIAL_LIST],
|
||||
sysOrigin: '',
|
||||
});
|
||||
|
||||
@ -97,6 +103,13 @@ const giftTabOptions = GIFT_CONFIG_TAB_OPTIONS.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.value as any,
|
||||
}));
|
||||
const defaultSpecialText = computed(() =>
|
||||
GIFT_SPECIAL_OPTIONS.filter((item) =>
|
||||
DEFAULT_GIFT_SPECIAL_LIST.includes(item.value),
|
||||
)
|
||||
.map((item) => item.name)
|
||||
.join(' + '),
|
||||
);
|
||||
const regionOptions = computed(() =>
|
||||
regions.value.map((item) => ({
|
||||
label: String(item.regionName || item.name || item.id || '-'),
|
||||
@ -176,6 +189,7 @@ function resetBatch() {
|
||||
String(props.initialSysOrigin || props.sysOriginOptions[0]?.value || 'LIKEI');
|
||||
batchForm.giftTab = 'ORDINARY';
|
||||
batchForm.regionList = [];
|
||||
batchForm.specialList = [...DEFAULT_GIFT_SPECIAL_LIST];
|
||||
rows.value = [];
|
||||
selectedRowKeys.value = [];
|
||||
activeRowKey.value = '';
|
||||
@ -669,7 +683,7 @@ function buildPayload(row: BatchGiftRow) {
|
||||
giftTab: batchForm.giftTab,
|
||||
regionList: [...batchForm.regionList],
|
||||
sort: Number(row.sort || 0),
|
||||
specialList: [],
|
||||
specialList: [...batchForm.specialList],
|
||||
standardId: '',
|
||||
sysOrigin: batchForm.sysOrigin,
|
||||
type: 'GOLD',
|
||||
@ -759,6 +773,7 @@ async function submitBatch() {
|
||||
/>
|
||||
</div>
|
||||
<div class="common-meta">收费类型：金币</div>
|
||||
<div class="common-meta">特效：{{ defaultSpecialText }}</div>
|
||||
</div>
|
||||
|
||||
<div class="batch-workspace">
|
||||
|
||||
@ -14,7 +14,6 @@ import {
|
||||
Space,
|
||||
Spin,
|
||||
Switch,
|
||||
TextArea,
|
||||
} from 'antdv-next';
|
||||
|
||||
import {
|
||||
@ -313,151 +312,157 @@ async function handleSubmit() {
|
||||
:open="open"
|
||||
:title="title"
|
||||
destroy-on-close
|
||||
width="980"
|
||||
root-class="gift-form-drawer-root"
|
||||
width="1120"
|
||||
:styles="{
|
||||
body: { padding: '0', overflow: 'hidden' },
|
||||
footer: { padding: '10px 16px' },
|
||||
}"
|
||||
@close="emit('close')"
|
||||
>
|
||||
<Spin :spinning="loading">
|
||||
<Form layout="vertical">
|
||||
<div class="grid">
|
||||
<FormItem label="平台">
|
||||
<Input :value="form.sysOrigin" disabled />
|
||||
</FormItem>
|
||||
<FormItem label="区域">
|
||||
<Space direction="vertical" style="width: 100%">
|
||||
<Button size="small" @click="toggleAllRegions">
|
||||
{{ form.regionList.length === regions.length ? '取消全选' : '全选' }}
|
||||
<Spin :spinning="loading" wrapper-class-name="gift-editor-spin">
|
||||
<div class="gift-editor">
|
||||
<aside class="media-panel">
|
||||
<div class="media-block">
|
||||
<div class="media-head">
|
||||
<span>封面</span>
|
||||
<span class="required-mark">必填</span>
|
||||
</div>
|
||||
<Image
|
||||
v-if="previewCover"
|
||||
:src="previewCover"
|
||||
class="preview-image"
|
||||
/>
|
||||
<div v-else class="preview-image preview-image--empty">未上传</div>
|
||||
<div class="media-actions">
|
||||
<Button :loading="coverUploading" size="small" @click="openCoverUpload">
|
||||
上传封面
|
||||
</Button>
|
||||
<Button
|
||||
v-if="form.giftPhoto"
|
||||
danger
|
||||
size="small"
|
||||
@click="form.giftPhoto = ''"
|
||||
>
|
||||
清空
|
||||
</Button>
|
||||
<Select
|
||||
v-model:value="form.regionList"
|
||||
:options="regionOptions"
|
||||
mode="multiple"
|
||||
option-label-prop="label"
|
||||
placeholder="请选择区域"
|
||||
show-search
|
||||
style="width: 100%"
|
||||
/>
|
||||
</Space>
|
||||
</FormItem>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<FormItem label="名称">
|
||||
<Input v-model:value="form.giftName" />
|
||||
</FormItem>
|
||||
<FormItem label="Code">
|
||||
<Input v-model:value="form.giftCode" />
|
||||
</FormItem>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<FormItem label="金币">
|
||||
<Input v-model:value="form.giftCandy" :disabled="form.type === 'FREE'" />
|
||||
</FormItem>
|
||||
<FormItem label="积分">
|
||||
<Input v-model:value="form.giftIntegral" :disabled="form.type === 'FREE'" />
|
||||
</FormItem>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<FormItem label="礼物类型">
|
||||
<Select
|
||||
v-model:value="form.giftTab"
|
||||
:options="giftTabOptions"
|
||||
option-label-prop="label"
|
||||
placeholder="请选择礼物类型"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="收费类型">
|
||||
<Select
|
||||
v-model:value="form.type"
|
||||
:options="chargeTypeOptions"
|
||||
option-label-prop="label"
|
||||
placeholder="请选择收费类型"
|
||||
/>
|
||||
</FormItem>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<FormItem label="特效">
|
||||
<Select
|
||||
v-model:value="form.specialList"
|
||||
:options="specialOptions"
|
||||
mode="multiple"
|
||||
option-label-prop="label"
|
||||
placeholder="请选择特效"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="排序">
|
||||
<Input v-model:value="form.sort" />
|
||||
</FormItem>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<FormItem label="封面">
|
||||
<div class="upload-field">
|
||||
<Image
|
||||
v-if="previewCover"
|
||||
:src="previewCover"
|
||||
class="preview-image"
|
||||
/>
|
||||
<div v-else class="preview-image preview-image--empty">未上传</div>
|
||||
<Space>
|
||||
<Button :loading="coverUploading" @click="openCoverUpload">上传封面</Button>
|
||||
<Button v-if="form.giftPhoto" danger @click="form.giftPhoto = ''">清空</Button>
|
||||
</Space>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="资源">
|
||||
<div class="upload-field">
|
||||
<div class="source-value">{{ previewSource || '未上传' }}</div>
|
||||
<Space>
|
||||
<Button :loading="sourceUploading" @click="openSourceUpload">上传资源</Button>
|
||||
<Button
|
||||
v-if="form.giftSourceUrl"
|
||||
danger
|
||||
@click="form.giftSourceUrl = ''"
|
||||
>
|
||||
清空
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<div class="media-block">
|
||||
<div class="media-head">
|
||||
<span>资源</span>
|
||||
<span class="optional-mark">可选</span>
|
||||
</div>
|
||||
</FormItem>
|
||||
</div>
|
||||
<div class="source-value">{{ previewSource || '未上传' }}</div>
|
||||
<div class="media-actions">
|
||||
<Button :loading="sourceUploading" size="small" @click="openSourceUpload">
|
||||
上传资源
|
||||
</Button>
|
||||
<Button
|
||||
v-if="form.giftSourceUrl"
|
||||
danger
|
||||
size="small"
|
||||
@click="form.giftSourceUrl = ''"
|
||||
>
|
||||
清空
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="grid">
|
||||
<FormItem label="有效期">
|
||||
<DatePicker
|
||||
v-model:value="form.expiredTime"
|
||||
style="width: 100%"
|
||||
value-format="x"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem v-if="form.giftTab === 'EXCLUSIVE'" label="归属人账号">
|
||||
<Input v-model:value="form.account" />
|
||||
</FormItem>
|
||||
</div>
|
||||
<main class="editor-panel">
|
||||
<Form class="editor-form" layout="vertical">
|
||||
<div class="section-title">基础信息</div>
|
||||
<div class="form-grid">
|
||||
<FormItem label="礼物类型">
|
||||
<Select
|
||||
v-model:value="form.giftTab"
|
||||
:options="giftTabOptions"
|
||||
option-label-prop="label"
|
||||
placeholder="请选择礼物类型"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="收费类型">
|
||||
<Select
|
||||
v-model:value="form.type"
|
||||
:options="chargeTypeOptions"
|
||||
option-label-prop="label"
|
||||
placeholder="请选择收费类型"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="排序">
|
||||
<Input v-model:value="form.sort" />
|
||||
</FormItem>
|
||||
<FormItem class="span-2" label="名称">
|
||||
<Input v-model:value="form.giftName" />
|
||||
</FormItem>
|
||||
<FormItem label="Code">
|
||||
<Input v-model:value="form.giftCode" />
|
||||
</FormItem>
|
||||
<FormItem label="有效期">
|
||||
<DatePicker
|
||||
v-model:value="form.expiredTime"
|
||||
style="width: 100%"
|
||||
value-format="x"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="金币">
|
||||
<Input v-model:value="form.giftCandy" :disabled="form.type === 'FREE'" />
|
||||
</FormItem>
|
||||
<FormItem label="积分">
|
||||
<Input v-model:value="form.giftIntegral" :disabled="form.type === 'FREE'" />
|
||||
</FormItem>
|
||||
</div>
|
||||
|
||||
<div class="grid" v-if="isLuckyOrMagic">
|
||||
<FormItem label="幸运规格">
|
||||
<Select
|
||||
v-model:value="form.standardId"
|
||||
:options="standardSelectOptions"
|
||||
option-label-prop="label"
|
||||
placeholder="请选择幸运规格"
|
||||
/>
|
||||
</FormItem>
|
||||
</div>
|
||||
|
||||
<div class="grid" v-if="form.giftTab === 'CP'">
|
||||
<FormItem label="是否告白礼物">
|
||||
<Switch v-model:checked="form.explanationGift" />
|
||||
</FormItem>
|
||||
</div>
|
||||
|
||||
<FormItem label="备注">
|
||||
<TextArea :value="previewSource" :rows="2" disabled />
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div class="section-title section-title--spaced">范围与效果</div>
|
||||
<div class="form-grid">
|
||||
<FormItem class="span-3" label="区域">
|
||||
<div class="inline-field">
|
||||
<Select
|
||||
v-model:value="form.regionList"
|
||||
:max-tag-count="4"
|
||||
:options="regionOptions"
|
||||
class="compact-multiple-select"
|
||||
mode="multiple"
|
||||
option-label-prop="label"
|
||||
placeholder="请选择区域"
|
||||
show-search
|
||||
/>
|
||||
<Button size="small" @click="toggleAllRegions">
|
||||
{{ form.regionList.length === regions.length ? '取消全选' : '全选' }}
|
||||
</Button>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem class="span-3" label="特效">
|
||||
<Select
|
||||
v-model:value="form.specialList"
|
||||
:max-tag-count="4"
|
||||
:options="specialOptions"
|
||||
class="compact-multiple-select"
|
||||
mode="multiple"
|
||||
option-label-prop="label"
|
||||
placeholder="请选择特效"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem v-if="form.giftTab === 'EXCLUSIVE'" label="归属人账号">
|
||||
<Input v-model:value="form.account" />
|
||||
</FormItem>
|
||||
<FormItem v-if="isLuckyOrMagic" label="幸运规格">
|
||||
<Select
|
||||
v-model:value="form.standardId"
|
||||
:options="standardSelectOptions"
|
||||
option-label-prop="label"
|
||||
placeholder="请选择幸运规格"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem v-if="form.giftTab === 'CP'" label="告白礼物">
|
||||
<Switch v-model:checked="form.explanationGift" />
|
||||
</FormItem>
|
||||
</div>
|
||||
</Form>
|
||||
</main>
|
||||
</div>
|
||||
</Spin>
|
||||
|
||||
<input
|
||||
@ -476,7 +481,7 @@ async function handleSubmit() {
|
||||
/>
|
||||
|
||||
<template #footer>
|
||||
<Space>
|
||||
<Space class="drawer-footer-actions">
|
||||
<Button @click="emit('close')">取消</Button>
|
||||
<Button :loading="saving" type="primary" @click="handleSubmit">
|
||||
保存
|
||||
@ -487,22 +492,72 @@ async function handleSubmit() {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.grid {
|
||||
.gift-editor {
|
||||
background: #f6f8fb;
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
grid-template-columns: 260px minmax(0, 1fr);
|
||||
height: calc(100vh - 106px);
|
||||
min-height: 0;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.upload-field {
|
||||
.media-panel,
|
||||
.editor-panel {
|
||||
background: #fff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.media-panel {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
align-content: start;
|
||||
gap: 12px;
|
||||
overflow: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.media-block {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.media-head {
|
||||
align-items: center;
|
||||
color: #111827;
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.required-mark,
|
||||
.optional-mark {
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.required-mark {
|
||||
background: #fff1f2;
|
||||
color: #e11d48;
|
||||
}
|
||||
|
||||
.optional-mark {
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
border-radius: 16px;
|
||||
height: 120px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #eef2f7;
|
||||
border-radius: 8px;
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
width: 120px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.preview-image--empty,
|
||||
@ -510,17 +565,104 @@ async function handleSubmit() {
|
||||
align-items: center;
|
||||
background: #f8fafc;
|
||||
border: 1px dashed #cbd5e1;
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
color: #94a3b8;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
min-height: 72px;
|
||||
padding: 12px;
|
||||
padding: 10px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.media-actions,
|
||||
.drawer-footer-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.editor-panel {
|
||||
overflow: auto;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.editor-form :deep(.ant-form-item) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.editor-form :deep(.ant-form-item-label) {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.editor-form :deep(.ant-form-item-label > label) {
|
||||
color: #475569;
|
||||
font-size: 12px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.editor-form :deep(.ant-input),
|
||||
.editor-form :deep(.ant-picker),
|
||||
.editor-form :deep(.ant-select-selector) {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: #111827;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.section-title--spaced {
|
||||
border-top: 1px solid #eef2f7;
|
||||
margin-top: 4px;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
column-gap: 12px;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.span-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.span-3 {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.inline-field {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.compact-multiple-select :deep(.ant-select-selection-overflow) {
|
||||
flex-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.compact-multiple-select :deep(.ant-select-selection-item) {
|
||||
max-width: 140px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.grid {
|
||||
.gift-editor {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.span-2,
|
||||
.span-3 {
|
||||
grid-column: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user