update AIChart, customer followup, media selector
This commit is contained in:
Timi
@@ -0,0 +1,44 @@
|
||||
import { axios } from "timi-web-api";
|
||||
import type { PageResult } from "timi-web-api";
|
||||
import type {
|
||||
FollowUpReminder,
|
||||
FollowUpReminderPage,
|
||||
FollowUpReminderPayload
|
||||
} from "@/types/FollowUpReminder";
|
||||
|
||||
const BASE_URI = "/gao/customer/follow-up-reminder";
|
||||
|
||||
/** 客户跟进提醒接口。 */
|
||||
const FollowUpReminderAPI = {
|
||||
async list(page: FollowUpReminderPage): Promise<PageResult<FollowUpReminder>> {
|
||||
return await axios.post(`${BASE_URI}/list`, page);
|
||||
},
|
||||
|
||||
async detail(id: string): Promise<FollowUpReminder> {
|
||||
return await axios.post(`${BASE_URI}/detail`, undefined, {
|
||||
params: { id }
|
||||
});
|
||||
},
|
||||
|
||||
async create(payload: FollowUpReminderPayload): Promise<string> {
|
||||
return await axios.post(`${BASE_URI}/create`, payload);
|
||||
},
|
||||
|
||||
async update(payload: FollowUpReminderPayload): Promise<void> {
|
||||
return await axios.post(`${BASE_URI}/update`, payload);
|
||||
},
|
||||
|
||||
async complete(id: string): Promise<void> {
|
||||
return await axios.post(`${BASE_URI}/complete`, undefined, {
|
||||
params: { id }
|
||||
});
|
||||
},
|
||||
|
||||
async remove(id: string): Promise<void> {
|
||||
return await axios.post(`${BASE_URI}/delete`, undefined, {
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default FollowUpReminderAPI;
|
||||
@@ -79,12 +79,19 @@ html.theme-dark body {
|
||||
text-overflow: unset;
|
||||
}
|
||||
|
||||
.t-cell__title {
|
||||
.t-cell {
|
||||
|
||||
.t-cell__title-text {
|
||||
min-width: unset;
|
||||
white-space: nowrap;
|
||||
text-overflow: unset;
|
||||
.t-cell__title {
|
||||
|
||||
.t-cell__title-text {
|
||||
min-width: unset;
|
||||
white-space: nowrap;
|
||||
text-overflow: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.t-cell__description {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -128,10 +135,10 @@ html.theme-dark body {
|
||||
border-radius: .875rem !important;
|
||||
|
||||
&.fallback {
|
||||
color: #2563EB;
|
||||
color: #FFF;
|
||||
display: flex;
|
||||
font-size: 1.25rem;
|
||||
background: #DBEAFE;
|
||||
background: var(--td-brand-color);
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
justify-content: center;
|
||||
|
||||
@@ -70,6 +70,7 @@ type SelectionMode = "single" | "multiple";
|
||||
|
||||
interface Props {
|
||||
enableScan?: boolean;
|
||||
initialKeyword?: string;
|
||||
modelValue: string | string[];
|
||||
visible: boolean;
|
||||
selectionMode?: SelectionMode;
|
||||
@@ -78,6 +79,7 @@ interface Props {
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
enableScan: true,
|
||||
initialKeyword: "",
|
||||
selectionMode: "single",
|
||||
storeId: ""
|
||||
});
|
||||
@@ -289,6 +291,7 @@ watch(() => props.visible, async (value) => {
|
||||
return;
|
||||
}
|
||||
syncDraftSelection();
|
||||
keyword.value = props.initialKeyword;
|
||||
await reloadCustomers();
|
||||
});
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<div class="content">
|
||||
<div v-text="confirmText" />
|
||||
<div v-if="canUpdate" class="photo-part">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
title="核销照片（可选）"
|
||||
:model-value="photoList"
|
||||
v-model:photo-items="photoItemList"
|
||||
@@ -18,7 +18,9 @@
|
||||
:loading="isPhotoUploading"
|
||||
:show-remove="false"
|
||||
:show-viewer-actions="false"
|
||||
@add="capturePhoto"
|
||||
@add="selectPhotoFile"
|
||||
@capture-photo="capturePhoto"
|
||||
@capture-video="captureVideo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -27,15 +29,31 @@
|
||||
ref="photoInputRef"
|
||||
class="file-input"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
accept="*/*"
|
||||
multiple
|
||||
@change="handlePhotoSelected"
|
||||
>
|
||||
<input
|
||||
ref="photoCameraInputRef"
|
||||
class="file-input"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
capture="environment"
|
||||
@change="handlePhotoSelected"
|
||||
>
|
||||
<input
|
||||
ref="videoInputRef"
|
||||
class="file-input"
|
||||
type="file"
|
||||
accept="video/*"
|
||||
capture="environment"
|
||||
@change="handlePhotoSelected"
|
||||
>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { AttachmentAPI, type Attachment } from "timi-web-api";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import type { EventRecord } from "@/types/EventRecord";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import { getAttachmentReadURL } from "@/utils/attachment";
|
||||
@@ -65,6 +83,8 @@ const emit = defineEmits<{
|
||||
}>();
|
||||
|
||||
const photoInputRef = ref<HTMLInputElement>();
|
||||
const photoCameraInputRef = ref<HTMLInputElement>();
|
||||
const videoInputRef = ref<HTMLInputElement>();
|
||||
const photoItemList = ref<PhotoItem[]>([]);
|
||||
const isPhotoUploading = ref(false);
|
||||
const isSubmitting = ref(false);
|
||||
@@ -87,15 +107,24 @@ function buildPhotoItemList(attachmentList?: Attachment[]): PhotoItem[] {
|
||||
.map(item => ({
|
||||
attachment: item,
|
||||
attachType: item.attachType || "PHOTO",
|
||||
mimeType: item.mimeType,
|
||||
previewUrl: getAttachmentReadURL(item.id || ""),
|
||||
url: getAttachmentReadURL(item.id || "", 90)
|
||||
}));
|
||||
}
|
||||
|
||||
function capturePhoto(): void {
|
||||
photoCameraInputRef.value?.click();
|
||||
}
|
||||
|
||||
function selectPhotoFile(): void {
|
||||
photoInputRef.value?.click();
|
||||
}
|
||||
|
||||
function captureVideo(): void {
|
||||
videoInputRef.value?.click();
|
||||
}
|
||||
|
||||
async function handlePhotoSelected(event: Event): Promise<void> {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const fileList = Array.from(input.files || []);
|
||||
@@ -107,12 +136,13 @@ async function handlePhotoSelected(event: Event): Promise<void> {
|
||||
try {
|
||||
const compressedFileList = await compressUploadImageList(fileList);
|
||||
const tempFileList = await AttachmentAPI.upload(compressedFileList);
|
||||
for (const item of tempFileList) {
|
||||
for (const [index, item] of tempFileList.entries()) {
|
||||
if (!item.id) {
|
||||
continue;
|
||||
}
|
||||
photoItemList.value.push({
|
||||
attachType: "PHOTO",
|
||||
mimeType: fileList[index]?.type,
|
||||
tempFileId: item.id,
|
||||
url: AttachmentAPI.getTempReadURL(item.id)
|
||||
});
|
||||
|
||||
@@ -1,569 +0,0 @@
|
||||
<template>
|
||||
<div v-bind="$attrs" class="photo-scroller">
|
||||
<div class="t-form__label" :class="{ required }">
|
||||
<slot name="title">
|
||||
<span v-text="title" />
|
||||
</slot>
|
||||
</div>
|
||||
<div class="photo-shell" :class="{ 'without-add': !showAdd }">
|
||||
<div class="items">
|
||||
<div v-if="!displayPhotoList.length" class="empty" v-text="emptyText" />
|
||||
<div
|
||||
v-for="(item, index) in displayPhotoList"
|
||||
:key="`${item.url}-${item.attachType}-${index}`"
|
||||
class="item"
|
||||
>
|
||||
<t-button variant="text" class="preview-trigger" @click="openPhotoViewer(index)">
|
||||
<t-image
|
||||
class="image"
|
||||
:src="item.url"
|
||||
:alt="getAttachTypeText(item.attachType)"
|
||||
fit="cover"
|
||||
/>
|
||||
</t-button>
|
||||
<div
|
||||
v-if="showTypeLabel"
|
||||
class="type-label white glass-black clip-text"
|
||||
v-text="getAttachTypeText(item.attachType)"
|
||||
/>
|
||||
<t-button
|
||||
v-if="showRemove && hasRemovablePhotos"
|
||||
theme="danger"
|
||||
class="remove"
|
||||
shape="circle"
|
||||
size="extra-small"
|
||||
@click="removePhoto(index)"
|
||||
>
|
||||
<t-icon name="close" size="1rem" />
|
||||
</t-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showAdd" class="add-trigger">
|
||||
<t-button
|
||||
v-if="addActionList.length === 1"
|
||||
theme="primary"
|
||||
variant="dashed"
|
||||
class="add"
|
||||
:loading="isBusy"
|
||||
:disabled="isBusy"
|
||||
@click="handleAddAction(addActionList[0])"
|
||||
>
|
||||
<span v-text="addActionList[0].text" />
|
||||
</t-button>
|
||||
<t-popover
|
||||
v-else
|
||||
v-model:visible="addPopoverVisible"
|
||||
placement="left"
|
||||
theme="light"
|
||||
>
|
||||
<t-button
|
||||
class="add"
|
||||
theme="primary"
|
||||
variant="dashed"
|
||||
:loading="isBusy"
|
||||
:disabled="isBusy"
|
||||
>
|
||||
<span v-text="addText" />
|
||||
</t-button>
|
||||
<template #content>
|
||||
<div class="add-actions">
|
||||
<t-button
|
||||
v-for="(action, index) in addActionList"
|
||||
:key="`${action.emit}-${index}`"
|
||||
variant="text"
|
||||
:theme="action.theme"
|
||||
class="add-action"
|
||||
:disabled="isBusy"
|
||||
@click="handleAddAction(action)"
|
||||
>
|
||||
<template #icon v-if="action.icon">
|
||||
<t-icon :name="action.icon" />
|
||||
</template>
|
||||
<span v-text="action.text" />
|
||||
</t-button>
|
||||
</div>
|
||||
</template>
|
||||
</t-popover>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
v-if="props.upload"
|
||||
ref="fileInput"
|
||||
class="file-input"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
multiple
|
||||
@change="handleFileChange"
|
||||
/>
|
||||
</div>
|
||||
<t-image-viewer
|
||||
v-model:visible="photoViewerVisible"
|
||||
:images="photoViewerImages"
|
||||
show-index
|
||||
@close="photoActionVisible = false"
|
||||
@index-change="handlePhotoViewerIndexChange"
|
||||
>
|
||||
<template #delete-btn>
|
||||
<div v-if="showViewerActions" class="viewer-action" @click.stop>
|
||||
<t-popover
|
||||
v-model:visible="photoActionVisible"
|
||||
placement="bottom"
|
||||
theme="light"
|
||||
:show-arrow="false"
|
||||
>
|
||||
<t-button class="white" variant="text">
|
||||
<t-icon name="ellipsis" />
|
||||
</t-button>
|
||||
<template #content>
|
||||
<div class="actions" @click.stop>
|
||||
<div class="title">修改类型</div>
|
||||
<div class="type">
|
||||
<t-button
|
||||
class="button"
|
||||
v-for="item in attachTypeOptions"
|
||||
:key="item.value"
|
||||
:theme="item.value === currentPhotoItem?.attachType ? 'primary' : 'default'"
|
||||
variant="text"
|
||||
size="extra-small"
|
||||
:disabled="isSubmitting"
|
||||
@click="changePhotoType(item.value)"
|
||||
>
|
||||
<span v-text="item.text" />
|
||||
</t-button>
|
||||
</div>
|
||||
<t-divider />
|
||||
<t-button
|
||||
class="button delete-action"
|
||||
theme="danger"
|
||||
size="extra-small"
|
||||
variant="text"
|
||||
:disabled="isSubmitting"
|
||||
@click="removeCurrentPhoto"
|
||||
>
|
||||
<template #icon>
|
||||
<t-icon name="delete" />
|
||||
</template>
|
||||
删除
|
||||
</t-button>
|
||||
</div>
|
||||
</template>
|
||||
</t-popover>
|
||||
</div>
|
||||
</template>
|
||||
</t-image-viewer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ButtonProps } from "tdesign-mobile-vue";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import { Message } from "@/utils/message";
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false
|
||||
});
|
||||
|
||||
interface Props {
|
||||
addActions?: readonly AddAction[];
|
||||
addText?: string;
|
||||
editMode?: boolean;
|
||||
emptyText?: string;
|
||||
fallbackImage?: string;
|
||||
loading?: boolean;
|
||||
modelValue: string[];
|
||||
photoItems?: readonly PhotoItem[];
|
||||
required?: boolean;
|
||||
upload?: (fileList: File[]) => Promise<PhotoItem[]>;
|
||||
showViewerActions?: boolean;
|
||||
showAdd?: boolean;
|
||||
showRemove?: boolean;
|
||||
showTypeLabel?: boolean;
|
||||
submit?: (photoItems: PhotoItem[]) => Promise<void>;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
type AddAction = {
|
||||
icon?: string;
|
||||
emit: string;
|
||||
text: string;
|
||||
theme?: ButtonProps["theme"];
|
||||
};
|
||||
|
||||
type ViewerPhotoItem = PhotoItem & {
|
||||
sourceIndex: number;
|
||||
};
|
||||
|
||||
const ATTACH_TYPE_TEXT_MAP: Record<string, string> = {
|
||||
ADDITIONAL: "附加照片",
|
||||
PHOTO: "照片",
|
||||
POINT_CARD: "积分卡",
|
||||
OTHER: "其他文件"
|
||||
};
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
addActions: () => [],
|
||||
title: "照片列表",
|
||||
addText: "拍照",
|
||||
editMode: false,
|
||||
emptyText: "暂无照片",
|
||||
loading: false,
|
||||
required: false,
|
||||
showAdd: true,
|
||||
showRemove: true,
|
||||
showTypeLabel: true,
|
||||
showViewerActions: true
|
||||
});
|
||||
|
||||
type Emits = {
|
||||
(event: string): void;
|
||||
(event: "update:modelValue", value: string[]): void;
|
||||
(event: "update:photoItems", value: PhotoItem[]): void;
|
||||
};
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const photoViewerVisible = ref(false);
|
||||
const photoViewerImages = ref<string[]>([]);
|
||||
const photoViewerItems = ref<ViewerPhotoItem[]>([]);
|
||||
const photoViewerIndex = ref(0);
|
||||
const photoActionVisible = ref(false);
|
||||
const isSubmitting = ref(false);
|
||||
const isUploading = ref(false);
|
||||
const addPopoverVisible = ref(false);
|
||||
const fileInput = ref<HTMLInputElement>();
|
||||
const addActionList = computed<readonly AddAction[]>(() => props.addActions.length ? props.addActions : [{
|
||||
emit: "add",
|
||||
text: props.addText,
|
||||
theme: "default"
|
||||
}]);
|
||||
const isBusy = computed(() => props.loading || isSubmitting.value || isUploading.value);
|
||||
const displayPhotoList = computed<PhotoItem[]>(() => {
|
||||
if (props.photoItems?.length) {
|
||||
return props.photoItems.map(normalizePhotoItem);
|
||||
}
|
||||
if (props.modelValue.length) {
|
||||
return props.modelValue.map(url => ({ url, attachType: "PHOTO" }));
|
||||
}
|
||||
|
||||
return props.fallbackImage ? [{ url: props.fallbackImage, attachType: "PHOTO" }] : [];
|
||||
});
|
||||
const hasRemovablePhotos = computed(() => !!props.photoItems?.length || !!props.modelValue.length);
|
||||
const attachTypeOptions = [
|
||||
{ text: "照片", value: "PHOTO" },
|
||||
{ text: "积分卡", value: "POINT_CARD" },
|
||||
{ text: "其他文件", value: "OTHER" }
|
||||
] as const;
|
||||
const currentPhotoItem = computed(() => photoViewerItems.value[photoViewerIndex.value]);
|
||||
|
||||
function getAttachTypeText(attachType?: string): string {
|
||||
return ATTACH_TYPE_TEXT_MAP[attachType || "PHOTO"] || "其他文件";
|
||||
}
|
||||
|
||||
function handleAddAction(action?: AddAction): void {
|
||||
if (!action) {
|
||||
return;
|
||||
}
|
||||
addPopoverVisible.value = false;
|
||||
if (action.emit === "add" && props.upload) {
|
||||
fileInput.value?.click();
|
||||
return;
|
||||
}
|
||||
emit(action.emit);
|
||||
}
|
||||
|
||||
async function handleFileChange(event: Event): Promise<void> {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const fileList = Array.from(input.files || []);
|
||||
if (!fileList.length || !props.upload) {
|
||||
return;
|
||||
}
|
||||
|
||||
isUploading.value = true;
|
||||
try {
|
||||
const uploadedPhotoItems = await props.upload(fileList);
|
||||
if (!uploadedPhotoItems.length) {
|
||||
return;
|
||||
}
|
||||
const nextPhotoItems = [...displayPhotoList.value, ...uploadedPhotoItems];
|
||||
emit("update:photoItems", nextPhotoItems);
|
||||
emit("update:modelValue", nextPhotoItems.map(item => item.url));
|
||||
} catch {
|
||||
Message.error("照片上传失败");
|
||||
} finally {
|
||||
isUploading.value = false;
|
||||
input.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
async function removePhoto(index: number): Promise<void> {
|
||||
if (index < 0 || displayPhotoList.value.length <= index) {
|
||||
return;
|
||||
}
|
||||
|
||||
await applyPhotoItems(displayPhotoList.value.filter((_, itemIndex) => itemIndex !== index));
|
||||
}
|
||||
|
||||
function openPhotoViewer(index: number): void {
|
||||
const viewerItems = displayPhotoList.value.map((item, sourceIndex) => ({ item, sourceIndex }));
|
||||
const rotatedItems = [...viewerItems.slice(index), ...viewerItems.slice(0, index)];
|
||||
photoViewerItems.value = rotatedItems.map(({ item, sourceIndex }) => ({ ...item, sourceIndex }));
|
||||
photoViewerImages.value = photoViewerItems.value.map(item => item.previewUrl || item.url);
|
||||
photoViewerIndex.value = 0;
|
||||
photoActionVisible.value = false;
|
||||
photoViewerVisible.value = true;
|
||||
}
|
||||
|
||||
function handlePhotoViewerIndexChange(index: number): void {
|
||||
photoViewerIndex.value = index;
|
||||
photoActionVisible.value = false;
|
||||
}
|
||||
|
||||
async function changePhotoType(attachType: string): Promise<void> {
|
||||
const currentItem = currentPhotoItem.value;
|
||||
if (!currentItem || currentItem.attachType === attachType) {
|
||||
photoActionVisible.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const nextPhotoItems = displayPhotoList.value.map((item, index) => index === currentItem.sourceIndex ? {
|
||||
...item,
|
||||
attachType
|
||||
} : item);
|
||||
await applyPhotoItems(nextPhotoItems);
|
||||
}
|
||||
|
||||
async function removeCurrentPhoto(): Promise<void> {
|
||||
const currentItem = currentPhotoItem.value;
|
||||
if (!currentItem) {
|
||||
return;
|
||||
}
|
||||
|
||||
await applyPhotoItems(displayPhotoList.value.filter((_, index) => index !== currentItem.sourceIndex));
|
||||
}
|
||||
|
||||
async function applyPhotoItems(nextPhotoItems: PhotoItem[]): Promise<void> {
|
||||
if (isSubmitting.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!props.editMode && !props.submit) {
|
||||
Message.warning("展示模式未配置照片保存方法");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!props.editMode) {
|
||||
isSubmitting.value = true;
|
||||
try {
|
||||
await props.submit!(nextPhotoItems);
|
||||
} catch {
|
||||
Message.error("照片修改失败");
|
||||
return;
|
||||
} finally {
|
||||
isSubmitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
emit("update:photoItems", nextPhotoItems);
|
||||
emit("update:modelValue", nextPhotoItems.map(item => item.url));
|
||||
photoActionVisible.value = false;
|
||||
photoViewerVisible.value = false;
|
||||
}
|
||||
|
||||
function normalizePhotoItem(item: PhotoItem): PhotoItem {
|
||||
return {
|
||||
...item,
|
||||
attachType: item.attachType || item.attachment?.attachType || "PHOTO"
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.photo-scroller {
|
||||
gap: .375rem;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
|
||||
.file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.photo-shell {
|
||||
display: grid;
|
||||
gap: .75rem;
|
||||
grid-template-columns: minmax(0, 1fr) 5.5rem;
|
||||
align-items: start;
|
||||
|
||||
&.without-add {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.items {
|
||||
gap: .75rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: thin;
|
||||
|
||||
.empty {
|
||||
width: 100%;
|
||||
color: #52607a;
|
||||
display: flex;
|
||||
padding: 1rem 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f8fbff;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 5.5rem;
|
||||
height: 5.5rem;
|
||||
flex: 0 0 5.5rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
|
||||
.preview-trigger {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
|
||||
.image {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.type-label {
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
padding: .125rem .5rem;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
font-size: .875rem;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.remove {
|
||||
top: .375rem;
|
||||
right: .375rem;
|
||||
position: absolute;
|
||||
|
||||
:deep(.t-button__content) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.t-form__label {
|
||||
&.required::before {
|
||||
color: var(--td-error-color, #e34d59);
|
||||
content: "*";
|
||||
margin-right: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.add-trigger {
|
||||
--td-popover-padding: 0 .5rem;
|
||||
width: 5.5rem;
|
||||
height: 5.5rem;
|
||||
|
||||
:deep(.t-popover__content) {
|
||||
border-radius: .875rem;
|
||||
}
|
||||
|
||||
.add {
|
||||
--td-button-border-radius: .875rem;
|
||||
|
||||
width: 5.5rem;
|
||||
height: 5.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.add-actions {
|
||||
gap: .25rem;
|
||||
display: grid;
|
||||
padding: .5rem 0;
|
||||
|
||||
.add-action {
|
||||
--td-button-medium-height: 32px;
|
||||
--td-button-medium-padding-horizontal: 10px;
|
||||
|
||||
gap: .5rem;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
font-weight: unset;
|
||||
justify-content: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.viewer-action {
|
||||
color: #fff;
|
||||
margin-left: -1rem;
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
min-width: 8rem;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
padding: 0 .75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.type {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
flex-direction: column;
|
||||
|
||||
.button {
|
||||
text-indent: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
justify-content: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.photo-scroller {
|
||||
.field-title,
|
||||
.photo-empty {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.photo-empty {
|
||||
color: #e2e8f0;
|
||||
background: rgba(15, 23, 42, .72);
|
||||
border-color: rgba(148, 163, 184, .16);
|
||||
}
|
||||
|
||||
.add {
|
||||
background: rgba(37, 99, 235, .16);
|
||||
border-color: rgba(96, 165, 250, .28);
|
||||
|
||||
span {
|
||||
color: #93c5fd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<div v-bind="$attrs" class="media-selector">
|
||||
<div class="t-form__label" :class="{ required }">
|
||||
<slot name="title">
|
||||
<span v-text="title" />
|
||||
</slot>
|
||||
</div>
|
||||
<div class="photo-shell" :class="{ 'without-add': !showAdd }">
|
||||
<div class="items">
|
||||
<div v-if="!displayMediaList.length" class="empty" v-text="emptyText" />
|
||||
<media-selector-item
|
||||
v-for="(item, index) in displayMediaList"
|
||||
:key="`${item.url}-${item.attachType}-${index}`"
|
||||
:item="item"
|
||||
:removable="hasRemovablePhotos"
|
||||
:show-remove="showRemove === true"
|
||||
:show-type-label="showTypeLabel === true"
|
||||
@preview="openMediaViewer(index)"
|
||||
@remove="removePhoto(index)"
|
||||
/>
|
||||
</div>
|
||||
<media-selector-add
|
||||
v-if="showAdd"
|
||||
:add-actions="props.addActions ?? []"
|
||||
:add-text="props.addText ?? '选择文件'"
|
||||
:busy="isBusy"
|
||||
:upload-enabled="!!props.upload"
|
||||
@add="emit('add')"
|
||||
@capture-photo="emit('capture-photo')"
|
||||
@capture-video="emit('capture-video')"
|
||||
@file-change="handleFileChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<media-selector-viewer
|
||||
v-model:visible="photoViewerVisible"
|
||||
:images="photoViewerImages"
|
||||
:items="photoViewerItems"
|
||||
:show-actions="showViewerActions === true"
|
||||
:submitting="isSubmitting"
|
||||
@change-type="changePhotoType"
|
||||
@remove="removePhotoBySourceIndex"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import MediaSelectorAdd from "./MediaSelectorAdd.vue";
|
||||
import MediaSelectorItem from "./MediaSelectorItem.vue";
|
||||
import MediaSelectorViewer from "./MediaSelectorViewer.vue";
|
||||
import type { MediaSelectorAddAction, MediaSelectorViewerItem } from "./types";
|
||||
import { getMediaPreviewURL, normalizePhotoItem } from "./utils";
|
||||
import type { PhotoItem } from "@/types/Photo.ts";
|
||||
import { Message } from "@/utils/message.ts";
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false
|
||||
});
|
||||
|
||||
interface Props {
|
||||
addActions?: readonly MediaSelectorAddAction[];
|
||||
addText?: string;
|
||||
editMode?: boolean;
|
||||
emptyText?: string;
|
||||
fallbackImage?: string;
|
||||
loading?: boolean;
|
||||
modelValue: string[];
|
||||
photoItems?: readonly PhotoItem[];
|
||||
required?: boolean;
|
||||
upload?: (fileList: File[]) => Promise<PhotoItem[]>;
|
||||
showViewerActions?: boolean;
|
||||
showAdd?: boolean;
|
||||
showRemove?: boolean;
|
||||
showTypeLabel?: boolean;
|
||||
submit?: (photoItems: PhotoItem[]) => Promise<void>;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
addActions: () => [],
|
||||
title: "媒体列表",
|
||||
addText: "选择文件",
|
||||
editMode: false,
|
||||
emptyText: "暂无照片",
|
||||
loading: false,
|
||||
required: false,
|
||||
showAdd: true,
|
||||
showRemove: true,
|
||||
showTypeLabel: true,
|
||||
showViewerActions: true
|
||||
});
|
||||
|
||||
type Emits = {
|
||||
(event: string): void;
|
||||
(event: "update:modelValue", value: string[]): void;
|
||||
(event: "update:photoItems", value: PhotoItem[]): void;
|
||||
};
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const photoViewerVisible = ref(false);
|
||||
const photoViewerImages = ref<string[]>([]);
|
||||
const photoViewerItems = ref<MediaSelectorViewerItem[]>([]);
|
||||
const isSubmitting = ref(false);
|
||||
const isUploading = ref(false);
|
||||
const isBusy = computed(() => props.loading || isSubmitting.value || isUploading.value);
|
||||
|
||||
const displayMediaList = computed<PhotoItem[]>(() => {
|
||||
if (props.photoItems?.length) {
|
||||
return props.photoItems.map(normalizePhotoItem);
|
||||
}
|
||||
if (props.modelValue.length) {
|
||||
return props.modelValue.map(url => ({ url, attachType: "PHOTO" }));
|
||||
}
|
||||
|
||||
return props.fallbackImage ? [{ url: props.fallbackImage, attachType: "PHOTO" }] : [];
|
||||
});
|
||||
const hasRemovablePhotos = computed(() => !!props.photoItems?.length || !!props.modelValue.length);
|
||||
|
||||
async function handleFileChange(event: Event): Promise<void> {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const fileList = Array.from(input.files || []);
|
||||
if (!fileList.length || !props.upload) {
|
||||
return;
|
||||
}
|
||||
|
||||
isUploading.value = true;
|
||||
try {
|
||||
const uploadedPhotoItems = await props.upload(fileList);
|
||||
if (!uploadedPhotoItems.length) {
|
||||
return;
|
||||
}
|
||||
const nextPhotoItems = [...displayMediaList.value, ...uploadedPhotoItems.map((item, index) => ({
|
||||
...item,
|
||||
mimeType: item.mimeType || item.attachment?.mimeType || fileList[index]?.type
|
||||
}))];
|
||||
emit("update:photoItems", nextPhotoItems);
|
||||
emit("update:modelValue", nextPhotoItems.map(item => item.url));
|
||||
} catch {
|
||||
Message.error("媒体上传失败");
|
||||
} finally {
|
||||
isUploading.value = false;
|
||||
input.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
async function removePhoto(index: number): Promise<void> {
|
||||
if (index < 0 || displayMediaList.value.length <= index) {
|
||||
return;
|
||||
}
|
||||
|
||||
await applyPhotoItems(displayMediaList.value.filter((_, itemIndex) => itemIndex !== index));
|
||||
}
|
||||
|
||||
function openMediaViewer(index: number): void {
|
||||
openPhotoViewer(index);
|
||||
}
|
||||
|
||||
function openPhotoViewer(index: number): void {
|
||||
const viewerItems = displayMediaList.value.map((item, sourceIndex) => ({ item, sourceIndex }));
|
||||
const imageIndex = viewerItems.findIndex(({ sourceIndex }) => sourceIndex === index);
|
||||
if (imageIndex < 0) {
|
||||
return;
|
||||
}
|
||||
const rotatedItems = [...viewerItems.slice(imageIndex), ...viewerItems.slice(0, imageIndex)];
|
||||
photoViewerItems.value = rotatedItems.map(({ item, sourceIndex }) => ({ ...item, sourceIndex }));
|
||||
photoViewerImages.value = photoViewerItems.value.map(getMediaPreviewURL);
|
||||
photoViewerVisible.value = true;
|
||||
}
|
||||
|
||||
async function changePhotoType(sourceIndex: number, attachType: string): Promise<void> {
|
||||
const currentItem = displayMediaList.value[sourceIndex];
|
||||
if (!currentItem || currentItem.attachType === attachType) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextPhotoItems = displayMediaList.value.map((item, index) => index === sourceIndex ? {
|
||||
...item,
|
||||
attachType
|
||||
} : item);
|
||||
await applyPhotoItems(nextPhotoItems);
|
||||
}
|
||||
|
||||
async function removePhotoBySourceIndex(sourceIndex: number): Promise<void> {
|
||||
if (!displayMediaList.value[sourceIndex]) {
|
||||
return;
|
||||
}
|
||||
|
||||
await applyPhotoItems(displayMediaList.value.filter((_, index) => index !== sourceIndex));
|
||||
}
|
||||
|
||||
async function applyPhotoItems(nextPhotoItems: PhotoItem[]): Promise<void> {
|
||||
if (isSubmitting.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!props.editMode && !props.submit) {
|
||||
Message.warning("展示模式未配置媒体保存方法");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!props.editMode) {
|
||||
isSubmitting.value = true;
|
||||
try {
|
||||
await props.submit!(nextPhotoItems);
|
||||
} catch {
|
||||
Message.error("媒体修改失败");
|
||||
return;
|
||||
} finally {
|
||||
isSubmitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
emit("update:photoItems", nextPhotoItems);
|
||||
emit("update:modelValue", nextPhotoItems.map(item => item.url));
|
||||
photoViewerVisible.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.media-selector {
|
||||
gap: .375rem;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
|
||||
.photo-shell {
|
||||
display: grid;
|
||||
gap: .75rem;
|
||||
grid-template-columns: minmax(0, 1fr) 5.5rem;
|
||||
align-items: start;
|
||||
|
||||
&.without-add {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.items {
|
||||
gap: .75rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: thin;
|
||||
|
||||
.empty {
|
||||
width: 100%;
|
||||
color: #52607a;
|
||||
display: flex;
|
||||
padding: 1rem 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f8fbff;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.t-form__label {
|
||||
&.required::before {
|
||||
color: var(--td-error-color, #e34d59);
|
||||
content: "*";
|
||||
margin-right: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.media-selector .empty {
|
||||
color: #e2e8f0;
|
||||
background: rgba(15, 23, 42, .72);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div class="add-trigger">
|
||||
<t-popover
|
||||
v-model:visible="capturePopoverVisible"
|
||||
placement="left"
|
||||
theme="light"
|
||||
>
|
||||
<t-button
|
||||
class="capture"
|
||||
theme="primary"
|
||||
variant="dashed"
|
||||
:loading="busy"
|
||||
:disabled="busy"
|
||||
>
|
||||
<template #icon>
|
||||
<t-icon name="camera" />
|
||||
</template>
|
||||
拍摄
|
||||
</t-button>
|
||||
<template #content>
|
||||
<div class="add-actions">
|
||||
<t-button
|
||||
v-for="(action, index) in captureActionList"
|
||||
:key="`${action.emit}-${index}`"
|
||||
variant="text"
|
||||
:theme="action.theme"
|
||||
class="add-action"
|
||||
:disabled="busy"
|
||||
@click="handleCaptureAction(action)"
|
||||
>
|
||||
<template #icon v-if="action.icon">
|
||||
<t-icon :name="action.icon" />
|
||||
</template>
|
||||
<span v-text="action.text" />
|
||||
</t-button>
|
||||
</div>
|
||||
</template>
|
||||
</t-popover>
|
||||
<t-button
|
||||
class="file"
|
||||
theme="primary"
|
||||
variant="dashed"
|
||||
:loading="busy"
|
||||
:disabled="busy"
|
||||
@click="handleFileAction"
|
||||
>
|
||||
<template #icon>
|
||||
<t-icon name="file-attachment" />
|
||||
</template>
|
||||
<span v-text="addText" />
|
||||
</t-button>
|
||||
</div>
|
||||
<input
|
||||
v-if="uploadEnabled"
|
||||
ref="fileInput"
|
||||
class="file-input"
|
||||
type="file"
|
||||
accept="*/*"
|
||||
multiple
|
||||
@change="handleFileChange"
|
||||
/>
|
||||
<input
|
||||
v-if="uploadEnabled"
|
||||
ref="photoFileInput"
|
||||
class="file-input"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
capture="environment"
|
||||
@change="handleFileChange"
|
||||
/>
|
||||
<input
|
||||
v-if="uploadEnabled"
|
||||
ref="videoFileInput"
|
||||
class="file-input"
|
||||
type="file"
|
||||
accept="video/*"
|
||||
capture="environment"
|
||||
@change="handleFileChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { MediaSelectorAddAction } from "./types";
|
||||
|
||||
interface Props {
|
||||
addActions: readonly MediaSelectorAddAction[];
|
||||
addText: string;
|
||||
busy: boolean;
|
||||
uploadEnabled: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<{
|
||||
(event: "add"): void;
|
||||
(event: "capture-photo"): void;
|
||||
(event: "capture-video"): void;
|
||||
(event: "file-change", value: Event): void;
|
||||
}>();
|
||||
const emitExternal = (event: string): void => {
|
||||
(emit as unknown as (eventName: string) => void)(event);
|
||||
};
|
||||
|
||||
const capturePopoverVisible = ref(false);
|
||||
const fileInput = ref<HTMLInputElement>();
|
||||
const photoFileInput = ref<HTMLInputElement>();
|
||||
const videoFileInput = ref<HTMLInputElement>();
|
||||
const captureActionList = computed<readonly MediaSelectorAddAction[]>(() => [{
|
||||
icon: "camera",
|
||||
emit: "capture-photo",
|
||||
text: "拍照片",
|
||||
theme: "primary"
|
||||
}, {
|
||||
icon: "video-camera-1",
|
||||
emit: "capture-video",
|
||||
text: "录视频",
|
||||
theme: "primary"
|
||||
}, ...props.addActions]);
|
||||
|
||||
function handleFileAction(): void {
|
||||
capturePopoverVisible.value = false;
|
||||
if (props.uploadEnabled) {
|
||||
fileInput.value?.click();
|
||||
return;
|
||||
}
|
||||
emit("add");
|
||||
}
|
||||
|
||||
function handleCaptureAction(action: MediaSelectorAddAction): void {
|
||||
capturePopoverVisible.value = false;
|
||||
if (action.emit === "capture-photo" && props.uploadEnabled) {
|
||||
photoFileInput.value?.click();
|
||||
return;
|
||||
}
|
||||
if (action.emit === "capture-video" && props.uploadEnabled) {
|
||||
videoFileInput.value?.click();
|
||||
return;
|
||||
}
|
||||
emitExternal(action.emit);
|
||||
}
|
||||
|
||||
function handleFileChange(event: Event): void {
|
||||
emit("file-change", event);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.add-trigger {
|
||||
--td-popover-padding: 0 .5rem;
|
||||
gap: .375rem;
|
||||
width: 5.5rem;
|
||||
height: 5.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
:deep(.t-popover__content) {
|
||||
border-radius: .875rem;
|
||||
}
|
||||
|
||||
.capture,
|
||||
.file {
|
||||
--td-button-border-radius: .875rem;
|
||||
|
||||
width: 5.5rem;
|
||||
height: 2.5625rem;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.add-actions {
|
||||
gap: .25rem;
|
||||
display: grid;
|
||||
padding: .5rem 0;
|
||||
|
||||
.add-action {
|
||||
--td-button-medium-height: 32px;
|
||||
--td-button-medium-padding-horizontal: 10px;
|
||||
|
||||
gap: .5rem;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
font-weight: unset;
|
||||
justify-content: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.capture,
|
||||
.file {
|
||||
background: rgba(37, 99, 235, .16);
|
||||
border-color: rgba(96, 165, 250, .28);
|
||||
|
||||
span {
|
||||
color: #93c5fd;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="item">
|
||||
<t-button variant="text" class="preview-trigger" @click="emit('preview')">
|
||||
<div v-if="isVideoItem(item)" class="video-thumbnail">
|
||||
<t-image
|
||||
v-if="getMediaThumbnailURL(item)"
|
||||
class="image"
|
||||
:src="getMediaThumbnailURL(item)"
|
||||
:alt="getAttachTypeText(item.attachType)"
|
||||
fit="cover"
|
||||
/>
|
||||
<video
|
||||
v-else
|
||||
:src="getMediaPreviewURL(item)"
|
||||
muted
|
||||
playsinline
|
||||
preload="metadata"
|
||||
/>
|
||||
<span class="video-play" aria-hidden="true">▶</span>
|
||||
</div>
|
||||
<t-image
|
||||
v-else
|
||||
class="image"
|
||||
:src="item.url"
|
||||
:alt="getAttachTypeText(item.attachType)"
|
||||
fit="cover"
|
||||
/>
|
||||
</t-button>
|
||||
<div
|
||||
v-if="showTypeLabel"
|
||||
class="type-label white glass-black clip-text"
|
||||
v-text="getAttachTypeText(item.attachType)"
|
||||
/>
|
||||
<t-button
|
||||
v-if="showRemove && removable"
|
||||
theme="danger"
|
||||
class="remove"
|
||||
shape="circle"
|
||||
size="extra-small"
|
||||
@click="emit('remove')"
|
||||
>
|
||||
<t-icon name="close" size="1rem" />
|
||||
</t-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PhotoItem } from "@/types/Photo.ts";
|
||||
import {
|
||||
getAttachTypeText,
|
||||
getMediaPreviewURL,
|
||||
getMediaThumbnailURL,
|
||||
isVideoItem
|
||||
} from "./utils";
|
||||
|
||||
interface Props {
|
||||
item: PhotoItem;
|
||||
removable: boolean;
|
||||
showRemove: boolean;
|
||||
showTypeLabel: boolean;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
const emit = defineEmits<{
|
||||
preview: [];
|
||||
remove: [];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.item {
|
||||
width: 5.5rem;
|
||||
height: 5.5rem;
|
||||
flex: 0 0 5.5rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
|
||||
.preview-trigger {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
|
||||
.image {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.video-thumbnail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background: #0f172a;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.video-play {
|
||||
inset: 50% auto auto 50%;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
font-size: 1.125rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(15, 23, 42, .68);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.type-label {
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
padding: .125rem .5rem;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
font-size: .875rem;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.remove {
|
||||
top: .375rem;
|
||||
right: .375rem;
|
||||
position: absolute;
|
||||
|
||||
:deep(.t-button__content) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,235 @@
|
||||
<template>
|
||||
<t-image-viewer
|
||||
v-model:visible="viewerVisible"
|
||||
:images="images"
|
||||
show-index
|
||||
@close="handleClose"
|
||||
@index-change="handleIndexChange"
|
||||
>
|
||||
<template #image="params">
|
||||
<div
|
||||
v-if="isVideoViewerItem(params.index)"
|
||||
:class="[params.className, 'viewer-video-wrap']"
|
||||
:style="params.style"
|
||||
@click.stop
|
||||
@pointerdown.stop
|
||||
@pointermove.stop
|
||||
@pointerup.stop
|
||||
@touchstart.stop
|
||||
@touchmove.stop
|
||||
@touchend.stop
|
||||
>
|
||||
<video
|
||||
:src="getViewerMediaURL(params.index)"
|
||||
class="viewer-video"
|
||||
controls
|
||||
playsinline
|
||||
preload="metadata"
|
||||
@loadedmetadata="handleViewerVideoLoaded($event, params)"
|
||||
@transitionstart="params.onTransitionstart"
|
||||
@transitionend="params.onTransitionend"
|
||||
/>
|
||||
</div>
|
||||
<img
|
||||
v-else
|
||||
:src="params.src"
|
||||
:class="params.className"
|
||||
:style="params.style"
|
||||
:alt="getViewerAlt(params.index)"
|
||||
@load="params.onLoad"
|
||||
@transitionstart="params.onTransitionstart"
|
||||
@transitionend="params.onTransitionend"
|
||||
/>
|
||||
</template>
|
||||
<template #delete-btn>
|
||||
<div v-if="showActions" class="viewer-action" @click.stop>
|
||||
<t-popover
|
||||
v-model:visible="photoActionVisible"
|
||||
placement="bottom"
|
||||
theme="light"
|
||||
:show-arrow="false"
|
||||
>
|
||||
<t-button class="white" variant="text">
|
||||
<t-icon name="ellipsis" />
|
||||
</t-button>
|
||||
<template #content>
|
||||
<div class="actions" @click.stop>
|
||||
<div class="title">修改类型</div>
|
||||
<div class="type">
|
||||
<t-button
|
||||
v-for="item in attachTypeOptions"
|
||||
:key="item.value"
|
||||
:theme="item.value === currentPhotoItem?.attachType ? 'primary' : 'default'"
|
||||
variant="text"
|
||||
size="extra-small"
|
||||
:disabled="submitting"
|
||||
@click="changePhotoType(item.value)"
|
||||
>
|
||||
<span v-text="item.text" />
|
||||
</t-button>
|
||||
</div>
|
||||
<t-divider />
|
||||
<t-button
|
||||
class="button delete-action"
|
||||
theme="danger"
|
||||
size="extra-small"
|
||||
variant="text"
|
||||
:disabled="submitting"
|
||||
@click="removeCurrentPhoto"
|
||||
>
|
||||
<template #icon>
|
||||
<t-icon name="delete" />
|
||||
</template>
|
||||
删除
|
||||
</t-button>
|
||||
</div>
|
||||
</template>
|
||||
</t-popover>
|
||||
</div>
|
||||
</template>
|
||||
</t-image-viewer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ImageSlotParams } from "tdesign-mobile-vue";
|
||||
import type { MediaSelectorViewerItem } from "./types";
|
||||
import { getAttachTypeText, getMediaPreviewURL, isVideoItem } from "./utils";
|
||||
|
||||
interface Props {
|
||||
images: string[];
|
||||
items: readonly MediaSelectorViewerItem[];
|
||||
showActions: boolean;
|
||||
submitting: boolean;
|
||||
visible: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<{
|
||||
(event: "update:visible", value: boolean): void;
|
||||
(event: "change-type", sourceIndex: number, attachType: string): void;
|
||||
(event: "remove", sourceIndex: number): void;
|
||||
}>();
|
||||
|
||||
const viewerVisible = computed({
|
||||
get: () => props.visible,
|
||||
set: value => emit("update:visible", value)
|
||||
});
|
||||
const viewerIndex = ref(0);
|
||||
const photoActionVisible = ref(false);
|
||||
const attachTypeOptions = [
|
||||
{ text: "照片", value: "PHOTO" },
|
||||
{ text: "积分卡", value: "POINT_CARD" },
|
||||
{ text: "其他文件", value: "OTHER" }
|
||||
] as const;
|
||||
const currentPhotoItem = computed(() => props.items[viewerIndex.value]);
|
||||
|
||||
watch(() => props.visible, value => {
|
||||
if (value) {
|
||||
viewerIndex.value = 0;
|
||||
photoActionVisible.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
function handleClose(): void {
|
||||
photoActionVisible.value = false;
|
||||
emit("update:visible", false);
|
||||
}
|
||||
|
||||
function handleIndexChange(index: number): void {
|
||||
viewerIndex.value = index;
|
||||
photoActionVisible.value = false;
|
||||
}
|
||||
|
||||
function isVideoViewerItem(index?: number): boolean {
|
||||
const item = getViewerItem(index);
|
||||
return !!item && isVideoItem(item);
|
||||
}
|
||||
|
||||
function getViewerItem(index?: number): MediaSelectorViewerItem | undefined {
|
||||
return index === undefined ? undefined : props.items[index];
|
||||
}
|
||||
|
||||
function getViewerMediaURL(index?: number): string {
|
||||
const item = getViewerItem(index);
|
||||
return item ? getMediaPreviewURL(item) : "";
|
||||
}
|
||||
|
||||
function getViewerAlt(index?: number): string {
|
||||
return getAttachTypeText(getViewerItem(index)?.attachType);
|
||||
}
|
||||
|
||||
function handleViewerVideoLoaded(event: Event, params: ImageSlotParams): void {
|
||||
const video = event.currentTarget as HTMLVideoElement;
|
||||
if (video.videoHeight > 0) {
|
||||
video.height = video.videoHeight;
|
||||
}
|
||||
params.onLoad?.(event);
|
||||
}
|
||||
|
||||
function changePhotoType(attachType: string): void {
|
||||
const currentItem = currentPhotoItem.value;
|
||||
photoActionVisible.value = false;
|
||||
if (!currentItem || currentItem.attachType === attachType) {
|
||||
return;
|
||||
}
|
||||
emit("change-type", currentItem.sourceIndex, attachType);
|
||||
}
|
||||
|
||||
function removeCurrentPhoto(): void {
|
||||
const currentItem = currentPhotoItem.value;
|
||||
photoActionVisible.value = false;
|
||||
if (currentItem) {
|
||||
emit("remove", currentItem.sourceIndex);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.viewer-action {
|
||||
color: #fff;
|
||||
margin-left: -1rem;
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
min-width: 8rem;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
padding: 0 .75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.type {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
flex-direction: column;
|
||||
|
||||
.button {
|
||||
text-indent: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
justify-content: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.viewer-video-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.viewer-video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
background: #0f172a;
|
||||
object-fit: contain;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
import type { ButtonProps } from "tdesign-mobile-vue";
|
||||
import type { PhotoItem } from "@/types/Photo.ts";
|
||||
|
||||
export type MediaSelectorAddAction = {
|
||||
icon?: string;
|
||||
emit: string;
|
||||
text: string;
|
||||
theme?: ButtonProps["theme"];
|
||||
};
|
||||
|
||||
export type MediaSelectorViewerItem = PhotoItem & {
|
||||
sourceIndex: number;
|
||||
};
|
||||
@@ -0,0 +1,55 @@
|
||||
import type { PhotoItem } from "@/types/Photo.ts";
|
||||
import { getAttachmentReadURL } from "@/utils/attachment.ts";
|
||||
|
||||
const ATTACH_TYPE_TEXT_MAP: Record<string, string> = {
|
||||
ADDITIONAL: "附加照片",
|
||||
PHOTO: "照片",
|
||||
POINT_CARD: "积分卡",
|
||||
OTHER: "其他文件"
|
||||
};
|
||||
|
||||
/** 缩略图宽度查询串，地址中出现即表示已带缩略图参数 */
|
||||
const THUMBNAIL_WIDTH_QUERY = "thumbWidth=";
|
||||
|
||||
/** 缩略图兜底尺寸（像素），用于地址未带缩略图参数但可定位附件的场景 */
|
||||
const FALLBACK_THUMBNAIL_SIZE = 128;
|
||||
|
||||
export function getAttachTypeText(attachType?: string): string {
|
||||
return ATTACH_TYPE_TEXT_MAP[attachType || "PHOTO"] || "其他文件";
|
||||
}
|
||||
|
||||
export function getMediaPreviewURL(item: PhotoItem): string {
|
||||
return item.previewUrl || item.url;
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析媒体缩略图地址。
|
||||
*
|
||||
* 后端读附件接口只要带缩略图参数，视频附件同样返回该视频的缩略帧，
|
||||
* 因此视频在列表中统一按图片渲染；临时上传文件没有缩略图，返回空字符串由调用方降级。
|
||||
*/
|
||||
export function getMediaThumbnailURL(item: PhotoItem): string {
|
||||
if (item.url.includes(THUMBNAIL_WIDTH_QUERY)) {
|
||||
return item.url;
|
||||
}
|
||||
|
||||
const attachmentId = item.attachment?.id;
|
||||
return attachmentId ? getAttachmentReadURL(attachmentId, FALLBACK_THUMBNAIL_SIZE) : "";
|
||||
}
|
||||
|
||||
export function isVideoItem(item: PhotoItem): boolean {
|
||||
const mimeType = (item.mimeType || item.attachment?.mimeType || "").toLowerCase();
|
||||
if (mimeType.startsWith("video/")) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return /\.(avi|m4v|mkv|mov|mp4|mpeg|mpg|ogv|webm|wmv)(?:$|[?#])/i.test(item.url);
|
||||
}
|
||||
|
||||
export function normalizePhotoItem(item: PhotoItem): PhotoItem {
|
||||
return {
|
||||
...item,
|
||||
attachType: item.attachType || item.attachment?.attachType || "PHOTO",
|
||||
mimeType: item.mimeType || item.attachment?.mimeType
|
||||
};
|
||||
}
|
||||
@@ -1,696 +0,0 @@
|
||||
import { computed, onUnmounted, shallowRef, toValue, watch, type MaybeRefOrGetter } from "vue";
|
||||
import { useUserStore } from "timi-web-api/store";
|
||||
import {
|
||||
chat,
|
||||
ensureChatResponse,
|
||||
GaoAiHttpError,
|
||||
GaoAiStreamError,
|
||||
parseSseData,
|
||||
readConversation as readConversationApi,
|
||||
readSseStream,
|
||||
type GaoAiConversationMessage,
|
||||
type GaoAiConversationReadResponse,
|
||||
type GaoAiStreamEvent
|
||||
} from "@/api/GaoAiAPI";
|
||||
|
||||
export type AiMessageRole = "user" | "assistant";
|
||||
|
||||
export interface AiCitation {
|
||||
source?: string;
|
||||
dataDomain?: string;
|
||||
timeRange?: string;
|
||||
caliber?: string;
|
||||
generatedAt?: string;
|
||||
}
|
||||
|
||||
export interface AiThinking {
|
||||
id: number;
|
||||
content: string;
|
||||
}
|
||||
|
||||
export interface AiChatMessage {
|
||||
id: number;
|
||||
role: AiMessageRole;
|
||||
content: string;
|
||||
thinkingList: AiThinking[];
|
||||
citationList: AiCitation[];
|
||||
createdAt: number;
|
||||
statusText?: string;
|
||||
duration?: number;
|
||||
}
|
||||
|
||||
export interface UseAiChatOptions {
|
||||
sessionKey: MaybeRefOrGetter<string>;
|
||||
storeId?: MaybeRefOrGetter<string | undefined>;
|
||||
scrollToBottom?: () => Promise<void>;
|
||||
}
|
||||
|
||||
const conversationExpiredText = "AI 会话不存在或已过期";
|
||||
const thinkOpenMarkers = ["<thinking>", "<think>"];
|
||||
const thinkCloseMarkers = ["</thinking>", "</think>"];
|
||||
|
||||
interface AssistantResponseState {
|
||||
rawText: string;
|
||||
eventThinkingList: AiThinking[];
|
||||
taggedThinkingList: AiThinking[];
|
||||
}
|
||||
|
||||
/** 管理门店智能助手的会话、流式消息和取消操作。 */
|
||||
export function useAiChat(options: UseAiChatOptions) {
|
||||
const userStore = useUserStore();
|
||||
const messages = shallowRef<AiChatMessage[]>([]);
|
||||
const conversationId = shallowRef("");
|
||||
const isGenerating = shallowRef(false);
|
||||
const isLoadingConversation = shallowRef(false);
|
||||
const activeToolStatus = shallowRef("");
|
||||
const lastError = shallowRef("");
|
||||
const lastQuestion = shallowRef("");
|
||||
const canRetry = computed(() => !!lastError.value && !!lastQuestion.value && !isGenerating.value && !isLoadingConversation.value);
|
||||
let activeController: AbortController | undefined;
|
||||
let messageSequence = 0;
|
||||
const responseStateMap = new Map<number, AssistantResponseState>();
|
||||
|
||||
async function sendMessage(message: string): Promise<void> {
|
||||
const normalizedMessage = message.trim();
|
||||
if (!normalizedMessage || isGenerating.value || isLoadingConversation.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const userMessage: AiChatMessage = {
|
||||
id: nextMessageId(),
|
||||
role: "user",
|
||||
content: normalizedMessage,
|
||||
thinkingList: [],
|
||||
citationList: [],
|
||||
createdAt: Date.now()
|
||||
};
|
||||
const assistantMessage: AiChatMessage = {
|
||||
id: nextMessageId(),
|
||||
role: "assistant",
|
||||
content: "",
|
||||
thinkingList: [],
|
||||
citationList: [],
|
||||
createdAt: Date.now()
|
||||
};
|
||||
messages.value = [...messages.value, userMessage, assistantMessage];
|
||||
lastQuestion.value = normalizedMessage;
|
||||
lastError.value = "";
|
||||
isGenerating.value = true;
|
||||
activeToolStatus.value = "";
|
||||
const controller = new AbortController();
|
||||
activeController = controller;
|
||||
let hasRetriedExpiredConversation = false;
|
||||
|
||||
try {
|
||||
while (true) {
|
||||
resetAssistantMessage(assistantMessage.id);
|
||||
try {
|
||||
await readChatStream(normalizedMessage, assistantMessage.id, controller);
|
||||
break;
|
||||
} catch (error) {
|
||||
if (
|
||||
!hasRetriedExpiredConversation
|
||||
&& !!conversationId.value
|
||||
&& isExpiredConversationError(error)
|
||||
) {
|
||||
hasRetriedExpiredConversation = true;
|
||||
conversationId.value = "";
|
||||
continue;
|
||||
}
|
||||
handleChatError(error, assistantMessage.id, controller.signal.aborted);
|
||||
break;
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
if (activeController === controller) {
|
||||
activeController = undefined;
|
||||
}
|
||||
isGenerating.value = false;
|
||||
activeToolStatus.value = "";
|
||||
responseStateMap.delete(assistantMessage.id);
|
||||
await scrollToBottom();
|
||||
}
|
||||
}
|
||||
|
||||
function stopGeneration(): void {
|
||||
if (!isGenerating.value) {
|
||||
return;
|
||||
}
|
||||
activeController?.abort();
|
||||
activeToolStatus.value = "";
|
||||
const assistantMessage = [...messages.value].reverse().find(item => item.role === "assistant");
|
||||
if (assistantMessage) {
|
||||
updateMessage(assistantMessage.id, { statusText: "已停止生成，可重新提问" });
|
||||
}
|
||||
}
|
||||
|
||||
function resetConversation(): void {
|
||||
activeController?.abort();
|
||||
activeController = undefined;
|
||||
messages.value = [];
|
||||
responseStateMap.clear();
|
||||
conversationId.value = "";
|
||||
isGenerating.value = false;
|
||||
activeToolStatus.value = "";
|
||||
lastError.value = "";
|
||||
lastQuestion.value = "";
|
||||
}
|
||||
|
||||
/**
|
||||
* 读取历史会话并转换成当前聊天页面使用的消息模型。
|
||||
*
|
||||
* @param id 历史会话 ID
|
||||
*/
|
||||
async function loadConversation(id: string): Promise<void> {
|
||||
const normalizedId = id.trim();
|
||||
if (!normalizedId || isGenerating.value || isLoadingConversation.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
isLoadingConversation.value = true;
|
||||
messages.value = [];
|
||||
responseStateMap.clear();
|
||||
conversationId.value = normalizedId;
|
||||
lastError.value = "";
|
||||
lastQuestion.value = "";
|
||||
try {
|
||||
const result = await readConversationHistory(normalizedId);
|
||||
if (conversationId.value !== normalizedId) {
|
||||
return;
|
||||
}
|
||||
messages.value = mapConversationMessages(result);
|
||||
lastQuestion.value = [...messages.value].reverse().find(item => item.role === "user")?.content || "";
|
||||
await scrollToBottom();
|
||||
} catch (error) {
|
||||
if (conversationId.value === normalizedId) {
|
||||
resetConversation();
|
||||
}
|
||||
throw error;
|
||||
} finally {
|
||||
isLoadingConversation.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function readConversationHistory(id: string): Promise<GaoAiConversationReadResponse> {
|
||||
const messageList: GaoAiConversationMessage[] = [];
|
||||
let firstId: string | undefined;
|
||||
let result: GaoAiConversationReadResponse = {};
|
||||
|
||||
while (true) {
|
||||
result = await readConversationApi({
|
||||
conversationId: id,
|
||||
firstId,
|
||||
limit: 100
|
||||
});
|
||||
const currentList = Array.isArray(result.data) ? result.data : [];
|
||||
messageList.push(...currentList);
|
||||
if (result["has_more"] !== true || !currentList.length) {
|
||||
break;
|
||||
}
|
||||
const nextFirstId = currentList[0]?.id;
|
||||
if (!nextFirstId || nextFirstId === firstId) {
|
||||
break;
|
||||
}
|
||||
firstId = nextFirstId;
|
||||
}
|
||||
|
||||
return {
|
||||
...result,
|
||||
data: messageList
|
||||
};
|
||||
}
|
||||
|
||||
async function retryLastMessage(): Promise<void> {
|
||||
if (canRetry.value) {
|
||||
await sendMessage(lastQuestion.value);
|
||||
}
|
||||
}
|
||||
|
||||
async function readChatStream(message: string, assistantId: number, controller: AbortController): Promise<void> {
|
||||
const storeId = options.storeId ? toValue(options.storeId) : undefined;
|
||||
const request = {
|
||||
message,
|
||||
...(conversationId.value ? { conversationId: conversationId.value } : {}),
|
||||
...(storeId ? { storeId } : {})
|
||||
};
|
||||
const response = await chat(request, userStore.token, controller.signal);
|
||||
await ensureChatResponse(response);
|
||||
let hasDoneEvent = false;
|
||||
await readSseStream(response, async (event) => {
|
||||
hasDoneEvent = await handleStreamEvent(event, assistantId, hasDoneEvent);
|
||||
await options.scrollToBottom?.();
|
||||
});
|
||||
if (!hasDoneEvent && !controller.signal.aborted) {
|
||||
throw new GaoAiStreamError("智能助手连接中断，请重试", "DIFY_STREAM_ERROR");
|
||||
}
|
||||
}
|
||||
|
||||
async function handleStreamEvent(event: GaoAiStreamEvent, assistantId: number, hasDoneEvent: boolean): Promise<boolean> {
|
||||
const payload = parseSseData(event.data);
|
||||
switch (event.event) {
|
||||
case "think":
|
||||
case "thinking":
|
||||
appendAssistantThinking(assistantId, extractThinkingText(payload));
|
||||
return hasDoneEvent;
|
||||
case "agent_thought":
|
||||
appendAssistantThinking(assistantId, extractThinkingText(payload), true);
|
||||
return hasDoneEvent;
|
||||
case "message":
|
||||
appendAssistantResponse(assistantId, extractText(payload));
|
||||
return hasDoneEvent;
|
||||
case "tool_status":
|
||||
{
|
||||
activeToolStatus.value = formatToolStatus(payload);
|
||||
}
|
||||
return hasDoneEvent;
|
||||
case "citation":
|
||||
appendCitation(assistantId, normalizeCitation(payload));
|
||||
return hasDoneEvent;
|
||||
case "done":
|
||||
applyDonePayload(assistantId, payload);
|
||||
return true;
|
||||
case "error":
|
||||
throw createStreamError(payload);
|
||||
default:
|
||||
return hasDoneEvent;
|
||||
}
|
||||
}
|
||||
|
||||
function applyDonePayload(assistantId: number, payload: unknown): void {
|
||||
if (!isRecord(payload)) {
|
||||
return;
|
||||
}
|
||||
const nextConversationId = getString(payload.conversationId);
|
||||
if (nextConversationId) {
|
||||
conversationId.value = nextConversationId;
|
||||
}
|
||||
const duration = getNumber(payload.duration);
|
||||
updateMessage(assistantId, {
|
||||
createdAt: Date.now(),
|
||||
duration: duration === undefined ? undefined : duration
|
||||
});
|
||||
}
|
||||
|
||||
function appendAssistantResponse(assistantId: number, text: string): void {
|
||||
if (!text) {
|
||||
return;
|
||||
}
|
||||
const state = getAssistantResponseState(assistantId);
|
||||
state.rawText = mergeResponseText(state.rawText, text);
|
||||
const parsedResponse = parseAssistantResponse(state.rawText);
|
||||
state.taggedThinkingList = parsedResponse.thinkingList.map((content, index) => ({
|
||||
id: state.taggedThinkingList[index]?.id || nextThinkingId(),
|
||||
content
|
||||
}));
|
||||
updateMessage(assistantId, {
|
||||
content: parsedResponse.answer,
|
||||
thinkingList: [...state.eventThinkingList, ...state.taggedThinkingList],
|
||||
statusText: undefined
|
||||
});
|
||||
}
|
||||
|
||||
function getAssistantResponseState(assistantId: number): AssistantResponseState {
|
||||
const currentState = responseStateMap.get(assistantId);
|
||||
if (currentState) {
|
||||
return currentState;
|
||||
}
|
||||
const nextState: AssistantResponseState = {
|
||||
rawText: "",
|
||||
eventThinkingList: [],
|
||||
taggedThinkingList: []
|
||||
};
|
||||
responseStateMap.set(assistantId, nextState);
|
||||
return nextState;
|
||||
}
|
||||
|
||||
function appendAssistantThinking(assistantId: number, text: string, createSegment = false): void {
|
||||
if (!text) {
|
||||
return;
|
||||
}
|
||||
const state = getAssistantResponseState(assistantId);
|
||||
const thinkingList = [...state.eventThinkingList];
|
||||
const lastThinking = thinkingList[thinkingList.length - 1];
|
||||
if (createSegment || !lastThinking) {
|
||||
thinkingList.push({ id: nextThinkingId(), content: text });
|
||||
} else {
|
||||
thinkingList[thinkingList.length - 1] = {
|
||||
...lastThinking,
|
||||
content: lastThinking.content + text
|
||||
};
|
||||
}
|
||||
state.eventThinkingList = thinkingList;
|
||||
updateMessage(assistantId, {
|
||||
thinkingList: [...state.eventThinkingList, ...state.taggedThinkingList],
|
||||
statusText: undefined
|
||||
});
|
||||
}
|
||||
|
||||
function appendCitation(assistantId: number, citation?: AiCitation): void {
|
||||
if (!citation) {
|
||||
return;
|
||||
}
|
||||
const message = messages.value.find(item => item.id === assistantId);
|
||||
if (!message) {
|
||||
return;
|
||||
}
|
||||
updateMessage(assistantId, { citationList: [...message.citationList, citation] });
|
||||
}
|
||||
|
||||
function updateMessage(id: number, patch: Partial<AiChatMessage>): void {
|
||||
messages.value = messages.value.map(item => item.id === id ? { ...item, ...patch } : item);
|
||||
}
|
||||
|
||||
function resetAssistantMessage(id: number): void {
|
||||
responseStateMap.delete(id);
|
||||
updateMessage(id, {
|
||||
content: "",
|
||||
thinkingList: [],
|
||||
citationList: [],
|
||||
statusText: undefined,
|
||||
duration: undefined,
|
||||
createdAt: Date.now()
|
||||
});
|
||||
}
|
||||
|
||||
function handleChatError(error: unknown, assistantId: number, isAborted: boolean): void {
|
||||
if (isAborted) {
|
||||
return;
|
||||
}
|
||||
const message = getChatErrorMessage(error);
|
||||
lastError.value = message;
|
||||
updateMessage(assistantId, { statusText: message });
|
||||
}
|
||||
|
||||
function clearMessages(): void {
|
||||
messages.value = [];
|
||||
responseStateMap.clear();
|
||||
}
|
||||
|
||||
function nextMessageId(): number {
|
||||
messageSequence += 1;
|
||||
return messageSequence;
|
||||
}
|
||||
|
||||
let thinkingSequence = 0;
|
||||
|
||||
function nextThinkingId(): number {
|
||||
thinkingSequence += 1;
|
||||
return thinkingSequence;
|
||||
}
|
||||
|
||||
function mapConversationMessages(response: GaoAiConversationReadResponse): AiChatMessage[] {
|
||||
const sourceList = Array.isArray(response.data) ? response.data : [];
|
||||
const orderedList = sourceList
|
||||
.map((item, index) => ({
|
||||
item,
|
||||
index,
|
||||
timestamp: getTimestamp(item["created_at"])
|
||||
}))
|
||||
.sort((left, right) => left.timestamp - right.timestamp || left.index - right.index)
|
||||
.map(item => item.item);
|
||||
const messageList: AiChatMessage[] = [];
|
||||
|
||||
for (const item of orderedList) {
|
||||
const createdAt = getTimestamp(item["created_at"]);
|
||||
const query = getRawString(item.query);
|
||||
const answer = getRawString(item.answer);
|
||||
if (query) {
|
||||
messageList.push({
|
||||
id: nextMessageId(),
|
||||
role: "user",
|
||||
content: query,
|
||||
thinkingList: [],
|
||||
citationList: [],
|
||||
createdAt
|
||||
});
|
||||
}
|
||||
if (answer || isFailedConversationMessage(item)) {
|
||||
const parsedAnswer = parseAssistantResponse(answer);
|
||||
messageList.push({
|
||||
id: nextMessageId(),
|
||||
role: "assistant",
|
||||
content: parsedAnswer.answer,
|
||||
thinkingList: parsedAnswer.thinkingList.map(content => ({
|
||||
id: nextThinkingId(),
|
||||
content
|
||||
})),
|
||||
citationList: [],
|
||||
createdAt,
|
||||
statusText: isFailedConversationMessage(item) ? "本次回答生成失败" : undefined
|
||||
});
|
||||
}
|
||||
}
|
||||
return messageList;
|
||||
}
|
||||
|
||||
async function scrollToBottom(): Promise<void> {
|
||||
await options.scrollToBottom?.();
|
||||
}
|
||||
|
||||
watch(() => toValue(options.sessionKey), () => {
|
||||
resetConversation();
|
||||
}, { flush: "sync" });
|
||||
|
||||
onUnmounted(() => {
|
||||
activeController?.abort();
|
||||
clearMessages();
|
||||
});
|
||||
|
||||
return {
|
||||
messages,
|
||||
conversationId: computed(() => conversationId.value),
|
||||
isGenerating,
|
||||
isLoadingConversation,
|
||||
activeToolStatus,
|
||||
lastError,
|
||||
canRetry,
|
||||
sendMessage,
|
||||
loadConversation,
|
||||
stopGeneration,
|
||||
resetConversation,
|
||||
retryLastMessage
|
||||
};
|
||||
}
|
||||
|
||||
function isExpiredConversationError(error: unknown): boolean {
|
||||
if (error instanceof GaoAiHttpError || error instanceof GaoAiStreamError) {
|
||||
return error.message.includes(conversationExpiredText)
|
||||
|| error.code?.toLowerCase().includes("session") === true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function extractText(payload: unknown): string {
|
||||
if (typeof payload === "string") {
|
||||
return payload === "[DONE]" ? "" : payload;
|
||||
}
|
||||
if (!isRecord(payload)) {
|
||||
return "";
|
||||
}
|
||||
return getRawString(payload.answer) || getRawString(payload.text) || getRawString(payload.content) || "";
|
||||
}
|
||||
|
||||
function mergeResponseText(currentText: string, nextText: string): string {
|
||||
if (currentText && nextText.startsWith(currentText)) {
|
||||
return nextText;
|
||||
}
|
||||
return currentText + nextText;
|
||||
}
|
||||
|
||||
function parseAssistantResponse(value: string): { answer: string; thinkingList: string[] } {
|
||||
let answer = "";
|
||||
let thinking = "";
|
||||
let mode: "answer" | "thinking" = "answer";
|
||||
let cursor = 0;
|
||||
const thinkingList: string[] = [];
|
||||
|
||||
while (cursor < value.length) {
|
||||
const marker = findMarker(value.slice(cursor), [...thinkOpenMarkers, ...thinkCloseMarkers]);
|
||||
if (!marker) {
|
||||
const rest = value.slice(cursor);
|
||||
if (mode === "thinking") {
|
||||
thinking += rest;
|
||||
} else {
|
||||
answer += rest;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
const content = value.slice(cursor, cursor + marker.index);
|
||||
if (mode === "thinking") {
|
||||
thinking += content;
|
||||
if (thinking) {
|
||||
thinkingList.push(thinking);
|
||||
}
|
||||
thinking = "";
|
||||
mode = "answer";
|
||||
} else if (isThinkOpenMarker(marker.value)) {
|
||||
answer += content;
|
||||
mode = "thinking";
|
||||
} else {
|
||||
if (content) {
|
||||
thinkingList.push(content);
|
||||
}
|
||||
mode = "answer";
|
||||
}
|
||||
cursor += marker.index + marker.value.length;
|
||||
}
|
||||
|
||||
if (mode === "thinking" && thinking) {
|
||||
thinkingList.push(thinking);
|
||||
}
|
||||
|
||||
return { answer, thinkingList };
|
||||
}
|
||||
|
||||
function findMarker(value: string, markerList: string[]): { index: number; value: string } | undefined {
|
||||
const lowerValue = value.toLowerCase();
|
||||
return markerList.reduce<{ index: number; value: string } | undefined>((current, marker) => {
|
||||
const index = lowerValue.indexOf(marker.toLowerCase());
|
||||
if (index < 0 || (current && current.index <= index)) {
|
||||
return current;
|
||||
}
|
||||
return { index, value: marker };
|
||||
}, undefined);
|
||||
}
|
||||
|
||||
function isThinkOpenMarker(value: string): boolean {
|
||||
return thinkOpenMarkers.some(marker => marker.toLowerCase() === value.toLowerCase());
|
||||
}
|
||||
|
||||
function extractThinkingText(payload: unknown): string {
|
||||
if (typeof payload === "string") {
|
||||
return payload === "[DONE]" ? "" : payload;
|
||||
}
|
||||
if (!isRecord(payload)) {
|
||||
return "";
|
||||
}
|
||||
return getRawString(payload.thought)
|
||||
|| getRawString(payload.thinking)
|
||||
|| getRawString(payload.reasoning)
|
||||
|| getRawString(payload.observation)
|
||||
|| getRawString(payload.text)
|
||||
|| getRawString(payload.content)
|
||||
|| "";
|
||||
}
|
||||
|
||||
function formatToolStatus(payload: unknown): string {
|
||||
if (!isRecord(payload)) {
|
||||
return "正在查询实时业务数据…";
|
||||
}
|
||||
const status = getString(payload.status);
|
||||
return status === "finished" ? "实时业务数据查询完成" : "正在查询实时业务数据…";
|
||||
}
|
||||
|
||||
function normalizeCitation(payload: unknown): AiCitation | undefined {
|
||||
if (typeof payload === "string") {
|
||||
return payload ? { source: payload } : undefined;
|
||||
}
|
||||
if (!isRecord(payload)) {
|
||||
return undefined;
|
||||
}
|
||||
const citation: AiCitation = {
|
||||
source: getString(payload.source),
|
||||
dataDomain: getString(payload.dataDomain) || getString(payload.domain),
|
||||
timeRange: getString(payload.timeRange) || formatScope(payload.scope),
|
||||
caliber: getString(payload.caliber) || getString(payload.metric),
|
||||
generatedAt: getDisplayText(payload.generatedAt) || getDisplayText(payload.generated_at)
|
||||
};
|
||||
return Object.values(citation).some(Boolean) ? citation : undefined;
|
||||
}
|
||||
|
||||
function createStreamError(payload: unknown): GaoAiStreamError {
|
||||
if (!isRecord(payload)) {
|
||||
return new GaoAiStreamError("智能助手查询失败，请稍后重试", "DIFY_ERROR");
|
||||
}
|
||||
return new GaoAiStreamError(
|
||||
getString(payload.message) || "智能助手查询失败，请稍后重试",
|
||||
getString(payload.code)
|
||||
);
|
||||
}
|
||||
|
||||
function getChatErrorMessage(error: unknown): string {
|
||||
if (error instanceof GaoAiHttpError) {
|
||||
if (error.status === 401) {
|
||||
return error.message.includes("会话") ? error.message : "登录已过期，请重新登录";
|
||||
}
|
||||
if (error.status === 403) {
|
||||
return "当前账号无权使用门店智能助手";
|
||||
}
|
||||
if (error.status === 429) {
|
||||
return "请求过于频繁，请稍后再试";
|
||||
}
|
||||
return error.message;
|
||||
}
|
||||
if (error instanceof GaoAiStreamError) {
|
||||
if (error.code === "DIFY_TIMEOUT") {
|
||||
return "数据查询超时，请缩小时间范围后重试";
|
||||
}
|
||||
return error.message;
|
||||
}
|
||||
if (error instanceof DOMException && error.name === "AbortError") {
|
||||
return "已停止生成，可重新提问";
|
||||
}
|
||||
if (error instanceof TypeError) {
|
||||
return "连接中断，可重新提问";
|
||||
}
|
||||
return "智能助手暂时不可用，请稍后重试";
|
||||
}
|
||||
|
||||
function isRecord(value: unknown): value is Record<string, unknown> {
|
||||
return typeof value === "object" && value !== null;
|
||||
}
|
||||
|
||||
function getString(value: unknown): string | undefined {
|
||||
return typeof value === "string" && value.trim() ? value.trim() : undefined;
|
||||
}
|
||||
|
||||
function getRawString(value: unknown): string {
|
||||
return typeof value === "string" ? value : "";
|
||||
}
|
||||
|
||||
function getDisplayText(value: unknown): string | undefined {
|
||||
const text = getString(value);
|
||||
if (text) {
|
||||
return text;
|
||||
}
|
||||
const timestamp = getNumber(value);
|
||||
if (timestamp === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
const milliseconds = timestamp < 100000000000 ? timestamp * 1000 : timestamp;
|
||||
return new Date(milliseconds).toLocaleString("zh-CN", { hour12: false });
|
||||
}
|
||||
|
||||
function formatScope(value: unknown): string | undefined {
|
||||
const text = getString(value);
|
||||
if (text) {
|
||||
return text;
|
||||
}
|
||||
if (!isRecord(value)) {
|
||||
return undefined;
|
||||
}
|
||||
const beginAt = getDisplayText(value.beginAt) || getDisplayText(value.begin);
|
||||
const endAt = getDisplayText(value.endAt) || getDisplayText(value.end);
|
||||
if (beginAt && endAt) {
|
||||
return `${beginAt} 至 ${endAt}`;
|
||||
}
|
||||
return beginAt || endAt;
|
||||
}
|
||||
|
||||
function getNumber(value: unknown): number | undefined {
|
||||
return typeof value === "number" && Number.isFinite(value) ? value : undefined;
|
||||
}
|
||||
|
||||
function getTimestamp(value: number | string | undefined): number {
|
||||
const timestamp = typeof value === "number" ? value : Number(value);
|
||||
if (!Number.isFinite(timestamp) || timestamp <= 0) {
|
||||
return Date.now();
|
||||
}
|
||||
return timestamp < 100000000000 ? timestamp * 1000 : timestamp;
|
||||
}
|
||||
|
||||
function isFailedConversationMessage(message: GaoAiConversationMessage): boolean {
|
||||
const status = getString(message.status)?.toLowerCase();
|
||||
return status === "error" || status === "failed" || status === "failure";
|
||||
}
|
||||
@@ -1,135 +0,0 @@
|
||||
<template>
|
||||
<div class="composer">
|
||||
<div v-if="lastError" class="error-bar">
|
||||
<span class="error-text" v-text="lastError" />
|
||||
<t-button v-if="canRetry" variant="text" size="small" content="重试" @click="emit('retry')" />
|
||||
</div>
|
||||
<t-form class="input-wrap glass-white" @submit="submitMessage">
|
||||
<t-input
|
||||
v-model="draft"
|
||||
class="input"
|
||||
borderless
|
||||
:disabled="isGenerating || props.disabled"
|
||||
:maxlength="256"
|
||||
placeholder="问问小糕怎么个事…"
|
||||
/>
|
||||
<t-button
|
||||
v-if="isGenerating"
|
||||
class="send"
|
||||
type="button"
|
||||
size="small"
|
||||
theme="danger"
|
||||
content="停止"
|
||||
@click="emit('stop')"
|
||||
/>
|
||||
<t-button
|
||||
v-else
|
||||
class="send"
|
||||
type="submit"
|
||||
size="small"
|
||||
theme="primary"
|
||||
content="发送"
|
||||
/>
|
||||
</t-form>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
defineOptions({
|
||||
name: "AiChatComposer"
|
||||
});
|
||||
|
||||
interface Props {
|
||||
isGenerating: boolean;
|
||||
lastError: string;
|
||||
canRetry: boolean;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const draft = defineModel<string>({ required: true });
|
||||
const emit = defineEmits<{
|
||||
send: [message: string];
|
||||
stop: [];
|
||||
retry: [];
|
||||
}>();
|
||||
|
||||
function submitMessage(): void {
|
||||
if (props.disabled) {
|
||||
return;
|
||||
}
|
||||
const message = draft.value.trim();
|
||||
if (!message) {
|
||||
return;
|
||||
}
|
||||
draft.value = "";
|
||||
emit("send", message);
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.composer {
|
||||
width: 100%;
|
||||
|
||||
.error-bar {
|
||||
gap: .375rem;
|
||||
display: flex;
|
||||
padding: .5rem .75rem;
|
||||
border-radius: .75rem;
|
||||
color: #b42318;
|
||||
font-size: .75rem;
|
||||
background: #fef3f2;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.error-text {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.t-button {
|
||||
color: #b42318;
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
--td-input-bg-color: transparent;
|
||||
--td-button-border-radius: 1rem;
|
||||
|
||||
gap: .5rem;
|
||||
border: 1px solid var(--td-component-border);
|
||||
margin: .5rem 0 0 0;
|
||||
display: flex;
|
||||
padding: .25rem .25rem .25rem .75rem;
|
||||
box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .12);
|
||||
align-items: center;
|
||||
border-radius: 1.25rem;
|
||||
|
||||
.input {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.send {
|
||||
width: 4rem;
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.error-bar {
|
||||
color: #fda29b;
|
||||
background: rgba(180, 35, 24, .18);
|
||||
|
||||
.t-button {
|
||||
color: #fda29b;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,402 +0,0 @@
|
||||
<template>
|
||||
<div ref="messageList" class="message-list" role="log" aria-live="polite">
|
||||
<div v-if="!props.messages.length" class="welcome">
|
||||
<div class="welcome-icon"><t-icon name="robot-2" size="2rem" /></div>
|
||||
<h3>今天想了解什么？</h3>
|
||||
<p>我会根据当前门店的实时业务数据回答经营问题。</p>
|
||||
<div class="quick-list">
|
||||
<t-button
|
||||
v-for="question in props.quickQuestionList"
|
||||
:key="question"
|
||||
class="quick-question"
|
||||
variant="outline"
|
||||
size="small"
|
||||
@click="emit('selectQuestion', question)"
|
||||
>
|
||||
<span v-text="question" />
|
||||
</t-button>
|
||||
</div>
|
||||
<t-button
|
||||
v-if="props.quickQuestionList.length"
|
||||
class="refresh-button"
|
||||
variant="text"
|
||||
size="small"
|
||||
:disabled="isRefreshingQuestions"
|
||||
@click="handleRefreshQuestions"
|
||||
>
|
||||
<template #icon>
|
||||
<t-icon name="refresh" class="refresh-icon" :class="{ refreshing: isRefreshingQuestions }" />
|
||||
</template>
|
||||
<span>换一批</span>
|
||||
</t-button>
|
||||
</div>
|
||||
|
||||
<article
|
||||
v-for="message in props.messages"
|
||||
:key="message.id"
|
||||
class="message-row"
|
||||
:class="message.role"
|
||||
>
|
||||
<div class="message-header">
|
||||
<div class="avatar">
|
||||
<t-icon :name="message.role === 'assistant' ? 'robot-2' : 'user'" />
|
||||
</div>
|
||||
<div class="role-name" v-text="message.role === 'assistant' ? 'AI 小糕' : '店长'" />
|
||||
</div>
|
||||
<div class="message-main">
|
||||
<div class="bubble" :class="message.role">
|
||||
<template v-if="message.role === 'assistant'">
|
||||
<ai-chat-thinking
|
||||
v-for="thinking in message.thinkingList"
|
||||
:key="thinking.id"
|
||||
:content="thinking.content"
|
||||
:is-generating="props.isGenerating && thinking.id === message.thinkingList[message.thinkingList.length - 1]?.id"
|
||||
/>
|
||||
</template>
|
||||
<div v-if="message.content && message.role === 'assistant'" class="content markdown-content">
|
||||
<markdown-view :content="message.content" />
|
||||
</div>
|
||||
<div v-else-if="message.content" class="content" v-text="message.content" />
|
||||
<div v-else-if="message.role === 'assistant' && props.isGenerating" class="typing">
|
||||
<span /><span /><span />
|
||||
</div>
|
||||
<div v-if="message.role === 'assistant' && message.citationList.length" class="citation-list">
|
||||
<div
|
||||
v-for="(citation, index) in message.citationList"
|
||||
:key="`${message.id}-${index}`"
|
||||
class="citation"
|
||||
>
|
||||
<span class="citation-label">数据来源</span>
|
||||
<span v-text="getCitationText(citation)" />
|
||||
<span v-if="citation.generatedAt" class="citation-time" v-text="`生成时间：${citation.generatedAt}`" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="message.role === 'assistant' && (message.statusText || (!props.isGenerating && message.content))" class="message-status" v-text="getMessageStatus(message)" />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { MarkdownView, Toolkit } from "timi-web";
|
||||
import type { AiChatMessage } from "@/composables/useAiChat";
|
||||
import AiChatThinking from "@/pages/ai/components/AiChatThinking.vue";
|
||||
|
||||
defineOptions({
|
||||
name: "AiChatMessageList"
|
||||
});
|
||||
|
||||
interface Props {
|
||||
messages: AiChatMessage[];
|
||||
isGenerating: boolean;
|
||||
quickQuestionList: readonly string[];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<{
|
||||
selectQuestion: [question: string];
|
||||
refreshQuestions: [];
|
||||
}>();
|
||||
|
||||
const messageListRef = useTemplateRef<HTMLElement>("messageList");
|
||||
const isRefreshingQuestions = ref(false);
|
||||
|
||||
async function handleRefreshQuestions(): Promise<void> {
|
||||
if (isRefreshingQuestions.value) {
|
||||
return;
|
||||
}
|
||||
isRefreshingQuestions.value = true;
|
||||
emit("refreshQuestions");
|
||||
await Toolkit.sleep(300);
|
||||
isRefreshingQuestions.value = false;
|
||||
}
|
||||
|
||||
async function scrollToBottom(): Promise<void> {
|
||||
await nextTick();
|
||||
const element = messageListRef.value;
|
||||
if (element) {
|
||||
element.scrollTop = element.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
function getMessageStatus(message: AiChatMessage): string {
|
||||
if (message.statusText) {
|
||||
return message.statusText;
|
||||
}
|
||||
const timeText = `生成时间：${formatDateTime(message.createdAt)}`;
|
||||
if (message.duration !== undefined) {
|
||||
return `${timeText} · 查询耗时：${formatDuration(message.duration)}`;
|
||||
}
|
||||
return timeText;
|
||||
}
|
||||
|
||||
function getCitationText(citation: AiChatMessage["citationList"][number]): string {
|
||||
const textList = [
|
||||
citation.dataDomain ? `数据域：${citation.dataDomain}` : "",
|
||||
citation.timeRange ? `统计范围：${citation.timeRange}` : "",
|
||||
citation.caliber ? `统计口径：${citation.caliber}` : "",
|
||||
citation.source ? `来源：${citation.source}` : ""
|
||||
].filter(Boolean);
|
||||
return textList.join(" · ");
|
||||
}
|
||||
|
||||
function formatDateTime(timestamp: number): string {
|
||||
return new Date(timestamp).toLocaleString("zh-CN", { hour12: false });
|
||||
}
|
||||
|
||||
function formatDuration(duration: number): string {
|
||||
if (duration < 1000) {
|
||||
return `${duration} 毫秒`;
|
||||
}
|
||||
return `${(duration / 1000).toFixed(1)} 秒`;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
scrollToBottom
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.message-list {
|
||||
gap: 1rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: .5rem 1rem calc(6rem + env(safe-area-inset-bottom, 0px));
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
flex-direction: column;
|
||||
|
||||
.welcome {
|
||||
margin: auto 0;
|
||||
text-align: center;
|
||||
|
||||
.welcome-icon {
|
||||
color: #0f766e;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin: 0 auto 1rem;
|
||||
border-radius: 1.25rem;
|
||||
display: flex;
|
||||
background: #ccfbf1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--td-text-color-secondary);
|
||||
margin: .5rem auto 1rem;
|
||||
font-size: .8125rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.quick-list {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.quick-question {
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
|
||||
:deep(.t-button__content) {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
margin-top: .75rem;
|
||||
|
||||
.refresh-icon.refreshing {
|
||||
animation: refresh-once .3s var(--tui-bezier);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-row {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
|
||||
&.user {
|
||||
.message-header {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.role-name {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.message-header {
|
||||
gap: .5rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
flex: none;
|
||||
color: #0f766e;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
background: #ccfbf1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.user .avatar {
|
||||
color: #2563eb;
|
||||
background: #dbeafe;
|
||||
}
|
||||
|
||||
.message-main {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
&.user .message-main {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.role-name {
|
||||
color: var(--td-text-color-secondary);
|
||||
margin: 0;
|
||||
font-size: .6875rem;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
color: var(--td-text-color-primary);
|
||||
width: 100%;
|
||||
padding: .75rem;
|
||||
border-radius: .25rem 1rem 1rem 1rem;
|
||||
background: var(--ai-bubble);
|
||||
text-align: left;
|
||||
box-shadow: 0 .25rem 1rem rgba(15, 23, 42, .05);
|
||||
|
||||
.thinking + .thinking {
|
||||
margin-top: .75rem;
|
||||
}
|
||||
|
||||
&.user {
|
||||
color: white;
|
||||
border-radius: 1rem .25rem 1rem 1rem;
|
||||
background: #0f766e;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: .875rem;
|
||||
line-height: 1.65;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.markdown-content {
|
||||
white-space: normal;
|
||||
|
||||
:deep(.tui-markdown-view) {
|
||||
width: auto;
|
||||
font-size: .875rem;
|
||||
line-height: 1.65;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.typing {
|
||||
gap: .25rem;
|
||||
display: flex;
|
||||
padding: .25rem .125rem;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
width: .375rem;
|
||||
height: .375rem;
|
||||
border-radius: 50%;
|
||||
background: #0f766e;
|
||||
animation: typing 1.2s infinite ease-in-out;
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: .16s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: .32s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.citation-list {
|
||||
gap: .375rem;
|
||||
margin-top: .75rem;
|
||||
padding-top: .625rem;
|
||||
display: flex;
|
||||
border-top: 1px solid var(--td-component-border);
|
||||
flex-direction: column;
|
||||
|
||||
.citation {
|
||||
color: var(--td-text-color-secondary);
|
||||
display: flex;
|
||||
font-size: .6875rem;
|
||||
line-height: 1.4;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.citation-label {
|
||||
color: #0f766e;
|
||||
margin-right: .25rem;
|
||||
}
|
||||
|
||||
.citation-time {
|
||||
width: 100%;
|
||||
margin-top: .125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.message-status {
|
||||
color: var(--td-text-color-secondary);
|
||||
margin-top: .5rem;
|
||||
font-size: .6875rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
0%, 60%, 100% {
|
||||
opacity: .35;
|
||||
transform: translateY(0);
|
||||
}
|
||||
30% {
|
||||
opacity: 1;
|
||||
transform: translateY(-.1875rem);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes refresh-once {
|
||||
from {
|
||||
transform: rotate(0);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,30 +1,63 @@
|
||||
<template>
|
||||
<section class="ai-chat-panel" :aria-label="`${props.storeName || '当前门店'}经营助手`">
|
||||
<ai-chat-message-list
|
||||
ref="messageList"
|
||||
:messages="messages"
|
||||
:is-generating="isGenerating"
|
||||
:quick-question-list="aiQuickQuestionList"
|
||||
@select-question="submitMessage"
|
||||
@refresh-questions="refreshQuickQuestions"
|
||||
/>
|
||||
<div class="bottom-area">
|
||||
<div v-if="activeToolStatus" class="tool-status">
|
||||
<t-icon name="loading" size="1rem" />
|
||||
<span v-text="activeToolStatus" />
|
||||
<shared-ai-chat-panel
|
||||
ref="messageList"
|
||||
class="shared-panel"
|
||||
:messages="messages"
|
||||
:is-generating="isGenerating"
|
||||
:is-loading="isLoadingConversation"
|
||||
:active-tool-status="activeToolStatus"
|
||||
:last-error="lastError"
|
||||
:can-retry="canRetry"
|
||||
:aria-label="`${props.storeName || '当前会话'}经营助手`"
|
||||
:role-names="{ assistant: 'AI 小糕', user: '店长' }"
|
||||
:placeholder="'问问小糕怎么个事…'"
|
||||
:format-message-status="formatMessageStatus"
|
||||
@send="submitMessage"
|
||||
@stop="stopGeneration"
|
||||
@retry="retryLastMessage"
|
||||
>
|
||||
<template #welcome>
|
||||
<div class="welcome">
|
||||
<div class="welcome-icon"><t-icon name="robot-2" size="2rem" /></div>
|
||||
<h3>今天想了解什么？</h3>
|
||||
<p>我会根据当前门店的实时业务数据回答经营问题。</p>
|
||||
<div class="quick-list">
|
||||
<t-button
|
||||
v-for="question in aiQuickQuestionList"
|
||||
:key="question"
|
||||
class="quick-question"
|
||||
variant="outline"
|
||||
size="small"
|
||||
@click="submitMessage(question)"
|
||||
>
|
||||
<span v-text="question" />
|
||||
</t-button>
|
||||
</div>
|
||||
<t-button
|
||||
v-if="aiQuickQuestionList.length"
|
||||
class="refresh-button"
|
||||
variant="text"
|
||||
size="small"
|
||||
:disabled="isRefreshingQuestions"
|
||||
@click="refreshQuickQuestions"
|
||||
>
|
||||
<template #icon>
|
||||
<t-icon name="refresh" class="refresh-icon" :class="{ refreshing: isRefreshingQuestions }" />
|
||||
</template>
|
||||
<span>换一批</span>
|
||||
</t-button>
|
||||
</div>
|
||||
<ai-chat-composer
|
||||
v-model="draft"
|
||||
:is-generating="isGenerating"
|
||||
:disabled="isLoadingConversation"
|
||||
:last-error="lastError"
|
||||
:can-retry="canRetry"
|
||||
@send="submitMessage"
|
||||
@stop="stopGeneration"
|
||||
@retry="retryLastMessage"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<template #citation="{ citation }">
|
||||
<div class="citation">
|
||||
<span class="citation-label">数据来源</span>
|
||||
<span v-text="formatCitation(citation)" />
|
||||
<span v-if="citation.generatedAt" class="citation-time">
|
||||
<span v-text="`生成时间：${citation.generatedAt}`" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</shared-ai-chat-panel>
|
||||
<ai-conversation-list
|
||||
v-model:visible="conversationVisible"
|
||||
:active-conversation-id="conversationId"
|
||||
@@ -34,16 +67,29 @@
|
||||
@delete="handleConversationDelete"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useAiChat } from "@/composables/useAiChat";
|
||||
import type { GaoAiConversation } from "@/api/GaoAiAPI";
|
||||
import AiChatComposer from "@/pages/ai/components/AiChatComposer.vue";
|
||||
import {
|
||||
AiChatHttpError,
|
||||
AiChatPanel as SharedAiChatPanel,
|
||||
AiChatStreamError,
|
||||
parseAssistantResponse,
|
||||
useAiChat,
|
||||
type AiChatCitationFormatter,
|
||||
type AiChatMessage,
|
||||
type AiChatMessageStatusFormatter
|
||||
} from "timi-tdesign-mobile";
|
||||
import type { GaoAiConversation, GaoAiConversationMessage, GaoAiConversationReadResponse } from "@/api/GaoAiAPI";
|
||||
import {
|
||||
chat,
|
||||
readConversation as readConversationApi
|
||||
} from "@/api/GaoAiAPI";
|
||||
import AiConversationList from "@/pages/ai/components/AiConversationList.vue";
|
||||
import AiChatMessageList from "@/pages/ai/components/AiChatMessageList.vue";
|
||||
import { aiQuickQuestionList, loadAiQuickQuestions, refreshAiQuickQuestions } from "@/pages/ai/aiChatQuestions";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { Message } from "@/utils/message";
|
||||
import { useUserStore } from "timi-web-api/store";
|
||||
|
||||
defineOptions({
|
||||
name: "AiChatPanel"
|
||||
@@ -56,14 +102,15 @@ interface Props {
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const userStore = useUserStore();
|
||||
const navBarStore = useNavBarStore();
|
||||
type MessageListExpose = {
|
||||
scrollToBottom: () => Promise<void>;
|
||||
};
|
||||
|
||||
const messageListRef = useTemplateRef<MessageListExpose>("messageList");
|
||||
const draft = shallowRef("");
|
||||
const conversationVisible = ref(false);
|
||||
const isRefreshingQuestions = ref(false);
|
||||
const {
|
||||
messages,
|
||||
conversationId,
|
||||
@@ -77,12 +124,40 @@ const {
|
||||
stopGeneration,
|
||||
retryLastMessage,
|
||||
resetConversation
|
||||
} = useAiChat({
|
||||
} = useAiChat<GaoAiConversationReadResponse, { storeId?: string }>({
|
||||
sessionKey: () => props.sessionKey,
|
||||
storeId: () => props.storeId,
|
||||
scrollToBottom
|
||||
context: () => ({ storeId: props.storeId }),
|
||||
request: async ({ message, conversationId: activeConversationId, context, signal }) => await chat({
|
||||
message,
|
||||
...(activeConversationId ? { conversationId: activeConversationId } : {}),
|
||||
...(context?.storeId ? { storeId: context.storeId } : {})
|
||||
}, userStore.token, signal),
|
||||
readConversation: async conversationIdValue => await readConversationHistory(conversationIdValue),
|
||||
mapConversationMessages,
|
||||
scrollToBottom,
|
||||
isConversationExpired,
|
||||
getErrorMessage: error => getAiErrorMessage(error)
|
||||
});
|
||||
const isBusy = computed(() => isGenerating.value || isLoadingConversation.value);
|
||||
const formatCitation: AiChatCitationFormatter = citation => [
|
||||
citation.dataDomain ? `数据域：${citation.dataDomain}` : "",
|
||||
citation.timeRange ? `统计范围：${citation.timeRange}` : "",
|
||||
citation.caliber ? `统计口径：${citation.caliber}` : "",
|
||||
citation.source ? `来源：${citation.source}` : ""
|
||||
].filter(Boolean).join(" · ");
|
||||
const formatMessageStatus: AiChatMessageStatusFormatter = message => {
|
||||
if (message.statusText) {
|
||||
return message.statusText;
|
||||
}
|
||||
const timeText = `生成时间：${new Date(message.createdAt).toLocaleString("zh-CN", { hour12: false })}`;
|
||||
if (message.duration !== undefined) {
|
||||
const durationText = message.duration < 1000
|
||||
? `${message.duration} 毫秒`
|
||||
: `${(message.duration / 1000).toFixed(1)} 秒`;
|
||||
return `${timeText} · 查询耗时：${durationText}`;
|
||||
}
|
||||
return timeText;
|
||||
};
|
||||
|
||||
async function submitMessage(message: string): Promise<void> {
|
||||
await sendMessage(message);
|
||||
@@ -111,14 +186,144 @@ function handleConversationDelete(deletedConversationId: string): void {
|
||||
}
|
||||
}
|
||||
|
||||
function refreshQuickQuestions(): void {
|
||||
async function refreshQuickQuestions(): Promise<void> {
|
||||
if (isRefreshingQuestions.value) {
|
||||
return;
|
||||
}
|
||||
isRefreshingQuestions.value = true;
|
||||
refreshAiQuickQuestions();
|
||||
await new Promise<void>(resolve => setTimeout(resolve, 300));
|
||||
isRefreshingQuestions.value = false;
|
||||
}
|
||||
|
||||
async function scrollToBottom(): Promise<void> {
|
||||
await messageListRef.value?.scrollToBottom();
|
||||
}
|
||||
|
||||
async function readConversationHistory(id: string): Promise<GaoAiConversationReadResponse> {
|
||||
const messageList: GaoAiConversationMessage[] = [];
|
||||
let firstId: string | undefined;
|
||||
let result: GaoAiConversationReadResponse = {};
|
||||
|
||||
while (true) {
|
||||
result = await readConversationApi({
|
||||
conversationId: id,
|
||||
firstId,
|
||||
limit: 100
|
||||
});
|
||||
const currentList = Array.isArray(result.data) ? result.data : [];
|
||||
messageList.push(...currentList);
|
||||
if (result["has_more"] !== true || !currentList.length) {
|
||||
break;
|
||||
}
|
||||
const nextFirstId = currentList[0]?.id;
|
||||
if (!nextFirstId || nextFirstId === firstId) {
|
||||
break;
|
||||
}
|
||||
firstId = nextFirstId;
|
||||
}
|
||||
|
||||
return {
|
||||
...result,
|
||||
data: messageList
|
||||
};
|
||||
}
|
||||
|
||||
function mapConversationMessages(response: GaoAiConversationReadResponse): AiChatMessage[] {
|
||||
const sourceList = Array.isArray(response.data) ? response.data : [];
|
||||
return sourceList
|
||||
.map((item, index) => ({
|
||||
item,
|
||||
index,
|
||||
timestamp: getTimestamp(item["created_at"])
|
||||
}))
|
||||
.sort((left, right) => left.timestamp - right.timestamp || left.index - right.index)
|
||||
.flatMap(({ item, index }) => {
|
||||
const messageList: AiChatMessage[] = [];
|
||||
const createdAt = getTimestamp(item["created_at"]);
|
||||
const query = getRawString(item.query);
|
||||
const answer = getRawString(item.answer);
|
||||
if (query) {
|
||||
messageList.push(createHistoryMessage(index * 2 + 1, "user", query, createdAt));
|
||||
}
|
||||
if (answer || isFailedConversationMessage(item)) {
|
||||
const parsedAnswer = parseAssistantResponse(answer);
|
||||
messageList.push({
|
||||
...createHistoryMessage(index * 2 + 2, "assistant", parsedAnswer.answer, createdAt),
|
||||
thinkingList: parsedAnswer.thinkingList.map((content, index) => ({
|
||||
id: index + 1,
|
||||
content
|
||||
})),
|
||||
statusText: isFailedConversationMessage(item) ? "本次回答生成失败" : undefined
|
||||
});
|
||||
}
|
||||
return messageList;
|
||||
});
|
||||
}
|
||||
|
||||
function createHistoryMessage(
|
||||
id: number,
|
||||
role: AiChatMessage["role"],
|
||||
content: string,
|
||||
createdAt: number
|
||||
): AiChatMessage {
|
||||
return {
|
||||
id,
|
||||
role,
|
||||
content,
|
||||
thinkingList: [],
|
||||
citationList: [],
|
||||
createdAt
|
||||
};
|
||||
}
|
||||
|
||||
function isConversationExpired(error: unknown): boolean {
|
||||
if (error instanceof AiChatHttpError || error instanceof AiChatStreamError) {
|
||||
return error.message.includes("AI 会话不存在或已过期")
|
||||
|| error.code?.toLowerCase().includes("session") === true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function getAiErrorMessage(error: unknown): string {
|
||||
if (error instanceof AiChatHttpError) {
|
||||
if (error.status === 401) {
|
||||
return error.message.includes("会话") ? error.message : "登录已过期，请重新登录";
|
||||
}
|
||||
if (error.status === 403) {
|
||||
return "当前账号无权使用门店智能助手";
|
||||
}
|
||||
if (error.status === 429) {
|
||||
return "请求过于频繁，请稍后再试";
|
||||
}
|
||||
return error.message;
|
||||
}
|
||||
if (error instanceof AiChatStreamError) {
|
||||
if (error.code === "DIFY_TIMEOUT") {
|
||||
return "数据查询超时，请缩小时间范围后重试";
|
||||
}
|
||||
return error.message;
|
||||
}
|
||||
return getErrorMessage(error, "智能助手暂时不可用，请稍后重试");
|
||||
}
|
||||
|
||||
function getTimestamp(value: number | string | undefined): number {
|
||||
const timestamp = typeof value === "number" ? value : Number(value);
|
||||
if (!Number.isFinite(timestamp) || timestamp <= 0) {
|
||||
return Date.now();
|
||||
}
|
||||
return timestamp < 100000000000 ? timestamp * 1000 : timestamp;
|
||||
}
|
||||
|
||||
function getRawString(value: unknown): string {
|
||||
return typeof value === "string" ? value : "";
|
||||
}
|
||||
|
||||
function isFailedConversationMessage(message: GaoAiConversationMessage): boolean {
|
||||
const status = typeof message.status === "string" ? message.status.toLowerCase() : "";
|
||||
return status === "error" || status === "failed" || status === "failure";
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
navBarStore.clearRight();
|
||||
navBarStore.setRightText("历史", "var(--td-brand-color)", openConversationList);
|
||||
@@ -129,60 +334,97 @@ watch(isBusy, value => navBarStore.setRightDisabled(value));
|
||||
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.ai-chat-panel {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
background: var(--ai-background);
|
||||
padding-top: var(--app-nav-height);
|
||||
flex-direction: column;
|
||||
.shared-panel {
|
||||
:deep(.ai-chat-panel) {
|
||||
padding-top: var(--app-nav-height);
|
||||
}
|
||||
|
||||
.bottom-area {
|
||||
inset: auto 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
|
||||
width: auto;
|
||||
margin: 0 auto;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
max-width: 40rem;
|
||||
:deep(.welcome) {
|
||||
margin: auto 0;
|
||||
text-align: center;
|
||||
|
||||
.tool-status {
|
||||
gap: .375rem;
|
||||
margin-bottom: .5rem;
|
||||
.welcome-icon {
|
||||
color: #0f766e;
|
||||
padding: .5rem .75rem;
|
||||
border-radius: .75rem;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin: 0 auto 1rem;
|
||||
border-radius: 1.25rem;
|
||||
display: flex;
|
||||
font-size: .75rem;
|
||||
background: var(--ai-soft);
|
||||
background: #ccfbf1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.t-icon {
|
||||
animation: rotate 1s linear infinite;
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--td-text-color-secondary);
|
||||
margin: .5rem auto 1rem;
|
||||
font-size: .8125rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.quick-list {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.quick-question {
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
|
||||
:deep(.t-button__content) {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
margin-top: .75rem;
|
||||
|
||||
.refresh-icon.refreshing {
|
||||
animation: refresh-once .3s var(--td-animation-easing-standard);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.citation) {
|
||||
color: var(--td-text-color-secondary);
|
||||
display: flex;
|
||||
font-size: .6875rem;
|
||||
line-height: 1.4;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
:deep(.citation-label) {
|
||||
color: #0f766e;
|
||||
margin-right: .25rem;
|
||||
}
|
||||
|
||||
:deep(.citation-time) {
|
||||
width: 100%;
|
||||
margin-top: .125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
@keyframes refresh-once {
|
||||
from {
|
||||
transform: rotate(0);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
:global(:root) {
|
||||
--ai-background: rgba(255, 255, 255, .98);
|
||||
--ai-bubble: #f5f6f8;
|
||||
--ai-input: white;
|
||||
--ai-soft: #f0fdfa;
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
--ai-background: rgba(15, 23, 42, .98);
|
||||
--ai-bubble: #1e293b;
|
||||
--ai-input: #111827;
|
||||
--ai-soft: rgba(20, 184, 166, .12);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<section class="thinking" aria-label="Agent think">
|
||||
<div class="thinking-header">
|
||||
<span>小糕正在思考...</span>
|
||||
</div>
|
||||
<div
|
||||
ref="thinkingContent"
|
||||
class="thinking-content"
|
||||
role="log"
|
||||
aria-live="polite"
|
||||
>
|
||||
<span v-text="props.content" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
content: string;
|
||||
isGenerating: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const thinkingContentRef = useTemplateRef<HTMLElement>("thinkingContent");
|
||||
|
||||
// ---------- 自动滚动 ----------
|
||||
|
||||
async function scrollToBottom(): Promise<void> {
|
||||
await nextTick();
|
||||
|
||||
const element = thinkingContentRef.value;
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
element.scrollTop = element.scrollHeight;
|
||||
}
|
||||
|
||||
watch(
|
||||
[() => props.content, () => props.isGenerating],
|
||||
async ([content, isGenerating]) => {
|
||||
if (content && isGenerating) {
|
||||
await scrollToBottom();
|
||||
}
|
||||
},
|
||||
{ deep: true, flush: "post" }
|
||||
);
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.thinking {
|
||||
gap: .5rem;
|
||||
height: clamp(2rem, 24vh, 10rem);
|
||||
display: flex;
|
||||
padding: .625rem .75rem;
|
||||
border: 1px solid var(--td-component-border);
|
||||
border-radius: .75rem;
|
||||
background: var(--ai-background);
|
||||
flex-direction: column;
|
||||
min-height: 2rem;
|
||||
max-height: 10rem;
|
||||
overflow: hidden;
|
||||
|
||||
.thinking-header {
|
||||
gap: .375rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--td-text-color-secondary);
|
||||
font-size: .75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.thinking-content {
|
||||
flex: 1;
|
||||
padding-right: .25rem;
|
||||
color: var(--td-text-color-secondary);
|
||||
font-size: .75rem;
|
||||
line-height: 1.5;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -235,7 +235,7 @@ function formatConversationTime(conversation: GaoAiConversation): number {
|
||||
const value = conversation["updated_at"] || conversation["created_at"];
|
||||
const timestamp = typeof value === "number" ? value : Number(value);
|
||||
if (!Number.isFinite(timestamp) || timestamp <= 0) {
|
||||
return "时间未知";
|
||||
return -1;
|
||||
}
|
||||
return timestamp < 100000000000 ? timestamp * 1000 : timestamp;
|
||||
}
|
||||
|
||||
@@ -34,8 +34,8 @@
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<card-container v-entrance-transition="140">
|
||||
<photo-scroller
|
||||
class="photo-scroller"
|
||||
<media-selector
|
||||
class="media-selector"
|
||||
:model-value="photoList"
|
||||
:photo-items="photoItemList"
|
||||
:show-viewer-actions="canUpdateCustomer"
|
||||
@@ -98,6 +98,9 @@
|
||||
<t-cell-group theme="card">
|
||||
<t-cell title="邀请客户" :note="inviteeCountText" arrow @click="toInviteeList" />
|
||||
</t-cell-group>
|
||||
<t-cell-group v-if="canReadFollowUpReminder" title="客户跟进" theme="card">
|
||||
<t-cell title="跟进提醒" note="查看客户提醒" arrow @click="toFollowUpReminderList" />
|
||||
</t-cell-group>
|
||||
<t-button
|
||||
v-can="permissionCodes.customer.delete"
|
||||
class="delete-action"
|
||||
@@ -142,7 +145,7 @@ import TagAPI from "@/api/TagAPI";
|
||||
import BodyAreaSelector from "@/components/BodyAreaSelector.vue";
|
||||
import CustomerRemoveDialog from "@/pages/customer/component/CustomerRemoveDialog.vue";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import TagSelector from "@/components/TagSelector.vue";
|
||||
import CustomerTagCard from "@/pages/customer/component/CustomerTagCard.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
@@ -177,6 +180,7 @@ const canReadSalesOrder = computed(() => userStore.hasPermissions(permissionCode
|
||||
const canReadTag = computed(() => userStore.hasPermissions(corePermissionCodes.tag.read));
|
||||
const canApplyTag = computed(() => userStore.hasPermissions(corePermissionCodes.tag.apply));
|
||||
const canUpdateCustomer = computed(() => userStore.hasPermissions(permissionCodes.customer.update));
|
||||
const canReadFollowUpReminder = computed(() => userStore.hasPermissions(permissionCodes.customerFollowUpReminder.read));
|
||||
|
||||
// ---------- 资料 ----------
|
||||
|
||||
@@ -389,6 +393,16 @@ async function toInviteeList(): Promise<void> {
|
||||
await router.push(`/management/customers/${customer.value.id}/invitees`);
|
||||
}
|
||||
|
||||
async function toFollowUpReminderList(): Promise<void> {
|
||||
if (!customer.value?.id || !canReadFollowUpReminder.value) {
|
||||
return;
|
||||
}
|
||||
await router.push({
|
||||
name: "CustomerFollowUpReminderList",
|
||||
query: { customerId: customer.value.id }
|
||||
});
|
||||
}
|
||||
|
||||
async function toEventRecordList(): Promise<void> {
|
||||
if (!canReadEventRecord.value || !customer.value?.id) {
|
||||
return;
|
||||
@@ -531,7 +545,7 @@ onUnmounted(() => navBarStore.clearRight());
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.photo-scroller) {
|
||||
:deep(.media-selector) {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
</t-form-item>
|
||||
<t-form-item label-width="0">
|
||||
<div class="photo">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
v-model="photoList"
|
||||
v-model:photo-items="photoItemList"
|
||||
:edit-mode="true"
|
||||
@@ -80,8 +80,10 @@
|
||||
:show-viewer-actions="!isCustomerBound"
|
||||
:add-actions="photoAddActions"
|
||||
:loading="isPhotoUploading"
|
||||
@add-photo="openPhotoPicker('PHOTO')"
|
||||
@add-point-card="openPhotoPicker('POINT_CARD')"
|
||||
@add="openPhotoPicker('OTHER')"
|
||||
@capture-photo="capturePhoto"
|
||||
@capture-video="captureVideo"
|
||||
@add-point-card="capturePointCard"
|
||||
@add-other="openPhotoPicker('OTHER')"
|
||||
/>
|
||||
<div class="tips orange" v-if="!hasCustomerDeletePermission">当前账户权限编辑客户需要上传照片和积分卡</div>
|
||||
@@ -176,7 +178,23 @@
|
||||
ref="photoInputRef"
|
||||
class="file-input"
|
||||
type="file"
|
||||
accept="*/*"
|
||||
@change="handlePhotoSelected"
|
||||
>
|
||||
<input
|
||||
ref="photoCameraInputRef"
|
||||
class="file-input"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
capture="environment"
|
||||
@change="handlePhotoSelected"
|
||||
>
|
||||
<input
|
||||
ref="videoInputRef"
|
||||
class="file-input"
|
||||
type="file"
|
||||
accept="video/*"
|
||||
capture="environment"
|
||||
@change="handlePhotoSelected"
|
||||
>
|
||||
<customer-selector
|
||||
@@ -213,7 +231,7 @@ import BodyAreaSelector from "@/components/BodyAreaSelector.vue";
|
||||
import CodeScanner from "@/components/CodeScanner.vue";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import TagSelector from "@/components/TagSelector.vue";
|
||||
import CustomerTagCard from "@/pages/customer/component/CustomerTagCard.vue";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
@@ -442,6 +460,30 @@ function openPhotoPicker(target: CustomerAttachmentType): void {
|
||||
photoInputRef.value?.click();
|
||||
}
|
||||
|
||||
function capturePhoto(): void {
|
||||
if (isCustomerBound.value) {
|
||||
return;
|
||||
}
|
||||
photoPickerTarget.value = "PHOTO";
|
||||
photoCameraInputRef.value?.click();
|
||||
}
|
||||
|
||||
function capturePointCard(): void {
|
||||
if (isCustomerBound.value) {
|
||||
return;
|
||||
}
|
||||
photoPickerTarget.value = "POINT_CARD";
|
||||
photoCameraInputRef.value?.click();
|
||||
}
|
||||
|
||||
function captureVideo(): void {
|
||||
if (isCustomerBound.value) {
|
||||
return;
|
||||
}
|
||||
photoPickerTarget.value = "OTHER";
|
||||
videoInputRef.value?.click();
|
||||
}
|
||||
|
||||
watch(isCustomerBound, (value) => {
|
||||
navBarStore.setRightDisabled(value);
|
||||
if (!value) {
|
||||
@@ -485,6 +527,7 @@ async function loadDetail() {
|
||||
.map(item => ({
|
||||
attachment: item,
|
||||
attachType: normalizeAttachmentType(item.attachType),
|
||||
mimeType: item.mimeType,
|
||||
previewUrl: getAttachmentReadURL(item.id || ""),
|
||||
url: getAttachmentReadURL(item.id || "", 90)
|
||||
}));
|
||||
@@ -531,24 +574,14 @@ watch(() => formData.birthdate, (value) => {
|
||||
// ---------- 照片 ----------
|
||||
|
||||
const photoInputRef = ref<HTMLInputElement>();
|
||||
const photoCameraInputRef = ref<HTMLInputElement>();
|
||||
const videoInputRef = ref<HTMLInputElement>();
|
||||
const photoAddActions = [
|
||||
{
|
||||
icon: "user-avatar",
|
||||
text: "拍照片",
|
||||
emit: "add-photo",
|
||||
theme: "primary"
|
||||
},
|
||||
{
|
||||
icon: "cardmembership",
|
||||
text: "拍积分卡",
|
||||
emit: "add-point-card",
|
||||
theme: "primary"
|
||||
},
|
||||
{
|
||||
icon: "file-attachment",
|
||||
text: "其他文件",
|
||||
emit: "add-other",
|
||||
theme: "default"
|
||||
}
|
||||
] as const;
|
||||
const photoPickerTarget = ref<CustomerAttachmentType>("PHOTO");
|
||||
@@ -602,6 +635,7 @@ async function handlePhotoSelected(event: Event): Promise<void> {
|
||||
if (tempFile?.id) {
|
||||
photoItemList.value.push({
|
||||
attachType: photoPickerTarget.value,
|
||||
mimeType: file.type,
|
||||
tempFileId: tempFile.id,
|
||||
url: AttachmentAPI.getTempReadURL(tempFile.id)
|
||||
});
|
||||
|
||||
@@ -65,7 +65,7 @@
|
||||
核销登记记录
|
||||
</t-button>
|
||||
<div v-if="record" class="photo-wrapper" v-entrance-transition="350">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
:model-value="recordPhotoList"
|
||||
:photo-items="recordPhotoItemList"
|
||||
:show-viewer-actions="canUpdateRecord"
|
||||
@@ -105,7 +105,7 @@ import CardContainer from "@/components/CardContainer.vue";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import EventOptionSelector from "@/components/EventOptionSelector.vue";
|
||||
import EventRecordVerifyDialog from "@/components/EventRecordVerifyDialog.vue";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { EventRecord } from "@/types/EventRecord";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
|
||||
@@ -110,14 +110,16 @@
|
||||
</t-form-item>
|
||||
|
||||
<div class="photo-part">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
title="登记事件照片"
|
||||
:required="selectedRequiredPhotoEventList.length > 0"
|
||||
v-model="photoList"
|
||||
v-model:photo-items="photoItemList"
|
||||
:edit-mode="true"
|
||||
:loading="isPhotoUploading"
|
||||
@add="capturePhoto"
|
||||
@add="selectPhotoFile"
|
||||
@capture-photo="capturePhoto"
|
||||
@capture-video="captureVideo"
|
||||
/>
|
||||
</div>
|
||||
</t-form>
|
||||
@@ -170,10 +172,26 @@
|
||||
ref="recordPhotoInputRef"
|
||||
class="file-input"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
accept="*/*"
|
||||
multiple
|
||||
@change="handleRecordPhotoSelected"
|
||||
>
|
||||
<input
|
||||
ref="recordPhotoCameraInputRef"
|
||||
class="file-input"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
capture="environment"
|
||||
@change="handleRecordPhotoSelected"
|
||||
>
|
||||
<input
|
||||
ref="videoInputRef"
|
||||
class="file-input"
|
||||
type="file"
|
||||
accept="video/*"
|
||||
capture="environment"
|
||||
@change="handleRecordPhotoSelected"
|
||||
>
|
||||
</div>
|
||||
<t-popup v-model="registeredAtPickerVisible" placement="bottom">
|
||||
<t-date-time-picker
|
||||
@@ -201,7 +219,7 @@ import CustomerList from "@/components/CustomerList.vue";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import EventOptionSelector from "@/components/EventOptionSelector.vue";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import EventSelector from "@/components/EventSelector.vue";
|
||||
import { useEventRecordPhoto } from "@/pages/event/component/useEventRecordPhoto";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
@@ -476,10 +494,14 @@ function validateNumberValueList(): boolean {
|
||||
|
||||
const {
|
||||
recordPhotoInputRef,
|
||||
recordPhotoCameraInputRef,
|
||||
videoInputRef,
|
||||
photoItemList,
|
||||
isPhotoUploading,
|
||||
photoList,
|
||||
capturePhoto,
|
||||
selectPhotoFile,
|
||||
captureVideo,
|
||||
handleRecordPhotoSelected,
|
||||
setExistingPhotoList,
|
||||
buildTempFileIdList,
|
||||
|
||||
@@ -6,6 +6,8 @@ import { compressUploadImageList } from "@/utils/imageCompression";
|
||||
|
||||
export function useEventRecordPhoto() {
|
||||
const recordPhotoInputRef = ref<HTMLInputElement>();
|
||||
const recordPhotoCameraInputRef = ref<HTMLInputElement>();
|
||||
const videoInputRef = ref<HTMLInputElement>();
|
||||
const photoItemList = ref<PhotoItem[]>([]);
|
||||
const isPhotoUploading = ref(false);
|
||||
const photoList = computed<string[]>({
|
||||
@@ -19,9 +21,17 @@ export function useEventRecordPhoto() {
|
||||
});
|
||||
|
||||
function capturePhoto(): void {
|
||||
recordPhotoCameraInputRef.value?.click();
|
||||
}
|
||||
|
||||
function selectPhotoFile(): void {
|
||||
recordPhotoInputRef.value?.click();
|
||||
}
|
||||
|
||||
function captureVideo(): void {
|
||||
videoInputRef.value?.click();
|
||||
}
|
||||
|
||||
async function handleRecordPhotoSelected(event: Event): Promise<void> {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const fileList = Array.from(input.files || []);
|
||||
@@ -32,11 +42,12 @@ export function useEventRecordPhoto() {
|
||||
try {
|
||||
const compressedFileList = await compressUploadImageList(fileList);
|
||||
const tempFileList = await AttachmentAPI.upload(compressedFileList);
|
||||
for (const item of tempFileList) {
|
||||
for (const [index, item] of tempFileList.entries()) {
|
||||
if (!item.id) {
|
||||
continue;
|
||||
}
|
||||
photoItemList.value.push({
|
||||
mimeType: fileList[index]?.type,
|
||||
tempFileId: item.id,
|
||||
url: AttachmentAPI.getTempReadURL(item.id)
|
||||
});
|
||||
@@ -53,6 +64,7 @@ export function useEventRecordPhoto() {
|
||||
.filter(item => !!item.id)
|
||||
.map(item => ({
|
||||
attachment: item,
|
||||
mimeType: item.mimeType,
|
||||
previewUrl: getAttachmentReadURL(item.id || ""),
|
||||
url: getAttachmentReadURL(item.id || "", 90)
|
||||
}));
|
||||
@@ -80,10 +92,14 @@ export function useEventRecordPhoto() {
|
||||
|
||||
return {
|
||||
recordPhotoInputRef,
|
||||
recordPhotoCameraInputRef,
|
||||
videoInputRef,
|
||||
photoItemList,
|
||||
isPhotoUploading,
|
||||
photoList,
|
||||
capturePhoto,
|
||||
selectPhotoFile,
|
||||
captureVideo,
|
||||
handleRecordPhotoSelected,
|
||||
setExistingPhotoList,
|
||||
buildTempFileIdList,
|
||||
|
||||
@@ -0,0 +1,377 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.customerFollowUpReminder.read" class="follow-up-reminder-detail">
|
||||
<t-empty v-if="!detail" :description="isLoading ? '正在加载跟进提醒' : '跟进提醒不存在'" />
|
||||
<template v-else>
|
||||
<customer-profile-card
|
||||
class="customer"
|
||||
:customer="detail.customer"
|
||||
v-entrance-transition
|
||||
@click="toCustomer"
|
||||
/>
|
||||
<t-cell-group title="提醒信息" theme="card" v-entrance-transition="70">
|
||||
<t-cell title="业务状态">
|
||||
<template #note>
|
||||
<t-tag size="small" :theme="getStatusTheme(detail.status)" :content="getStatusText(detail.status)" />
|
||||
</template>
|
||||
</t-cell>
|
||||
<t-cell title="负责人" :note="getResponsibleName(detail)" />
|
||||
<t-cell title="提醒时间" :note="detail.remindAt ? Time.toDateTime(detail.remindAt) : '-'" />
|
||||
<t-cell title="创建时间">
|
||||
<template #note>
|
||||
<pass-time-label :timestamp="detail.createdAt" underline />
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<t-cell-group title="跟进内容" theme="card" v-entrance-transition="140">
|
||||
<div class="content bg-white" v-text="detail.content || '未填写跟进内容'" />
|
||||
<div class="media-wrap bg-white">
|
||||
<media-selector
|
||||
:model-value="attachmentUrlList"
|
||||
:photo-items="attachmentItemList"
|
||||
:show-add="false"
|
||||
:show-remove="false"
|
||||
:show-viewer-actions="false"
|
||||
empty-text="暂无附件"
|
||||
title="附件"
|
||||
/>
|
||||
</div>
|
||||
</t-cell-group>
|
||||
<t-cell-group title="通知方式" theme="card" v-entrance-transition="210">
|
||||
<t-cell v-if="hasChannel('INTERNAL')" title="站内通知">
|
||||
<template #note>
|
||||
<t-tag
|
||||
size="small"
|
||||
variant="outline"
|
||||
:theme="internalNotifyStatus ? getNotifyStatusTheme(internalNotifyStatus.status) : 'primary'"
|
||||
:content="internalNotifyStatus ? getNotifyStatusText(internalNotifyStatus.status) : '已配置'"
|
||||
/>
|
||||
</template>
|
||||
</t-cell>
|
||||
<t-cell v-if="hasChannel('SMS')" title="短信通知">
|
||||
<template #note>
|
||||
<t-tag
|
||||
size="small"
|
||||
theme="primary"
|
||||
variant="outline"
|
||||
:content="detail.smsNotifyDetailId ? '已进入当天批次' : '等待当天 08:00 批次'"
|
||||
/>
|
||||
</template>
|
||||
</t-cell>
|
||||
<t-cell v-if="!detail.notifyChannelList?.length" title="通知方式" note="不发送通知" />
|
||||
<div class="tips gray bg-white" v-text="'站内通知在提醒时间后生效；短信按提醒日期在 08:00 聚合发送。通知状态仅作辅助展示，不代表跟进提醒业务状态。'" />
|
||||
</t-cell-group>
|
||||
<div class="actions" v-entrance-transition="350">
|
||||
<t-button
|
||||
v-if="canComplete && detail.status === 'PENDING'"
|
||||
theme="primary"
|
||||
:disabled="isOperating"
|
||||
:loading="isCompleting"
|
||||
@click="confirmComplete"
|
||||
>完成跟进</t-button>
|
||||
<t-button
|
||||
v-if="canDelete"
|
||||
theme="danger"
|
||||
:loading="isDeleting"
|
||||
:disabled="isOperating"
|
||||
@click="confirmDelete"
|
||||
>删除提醒</t-button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DialogPlugin } from "tdesign-mobile-vue";
|
||||
import { NotifyAPI, type NotifyDetail, useUserStore } from "timi-web-api";
|
||||
import { PassTimeLabel, Time } from "timi-web";
|
||||
import { Message } from "@/utils/message";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import FollowUpReminderAPI from "@/api/FollowUpReminderAPI";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { FollowUpReminder, FollowUpReminderNotifyChannel, FollowUpReminderStatus } from "@/types/FollowUpReminder";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import { getAttachmentReadURL } from "@/utils/attachment";
|
||||
import { corePermissionCodes, permissionCodes } from "@/utils/permission";
|
||||
|
||||
type NotifyTagTheme = "default" | "success" | "warning" | "primary" | "danger";
|
||||
|
||||
defineOptions({
|
||||
name: "FollowUpReminderDetail"
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const detail = ref<FollowUpReminder>();
|
||||
const isLoading = ref(false);
|
||||
const isCompleting = ref(false);
|
||||
const isDeleting = ref(false);
|
||||
const internalNotifyStatus = ref<NotifyDetail>();
|
||||
let loadToken = 0;
|
||||
|
||||
const canUpdate = computed(() => detail.value?.status === "PENDING"
|
||||
&& userStore.hasPermissions(permissionCodes.customerFollowUpReminder.update));
|
||||
const canComplete = computed(() => userStore.hasPermissions(permissionCodes.customerFollowUpReminder.complete));
|
||||
const canDelete = computed(() => userStore.hasPermissions(permissionCodes.customerFollowUpReminder.delete));
|
||||
const isOperating = computed(() => isCompleting.value || isDeleting.value);
|
||||
const attachmentItemList = computed<PhotoItem[]>(() => (detail.value?.attachmentList || [])
|
||||
.filter(item => !!item.id)
|
||||
.map(item => ({
|
||||
attachment: item,
|
||||
attachType: item.attachType || "PHOTO",
|
||||
mimeType: item.mimeType,
|
||||
previewUrl: getAttachmentReadURL(item.id || ""),
|
||||
url: getAttachmentReadURL(item.id || "", 90)
|
||||
})));
|
||||
const attachmentUrlList = computed(() => attachmentItemList.value.map(item => item.url));
|
||||
|
||||
function hasChannel(channel: FollowUpReminderNotifyChannel): boolean {
|
||||
const item = detail.value;
|
||||
if (!item) {
|
||||
return false;
|
||||
}
|
||||
return item.notifyChannelList?.includes(channel)
|
||||
|| (channel === "INTERNAL" && item.internalNotifyEnabled === true)
|
||||
|| (channel === "SMS" && item.smsNotifyEnabled === true)
|
||||
|| false;
|
||||
}
|
||||
|
||||
function getResponsibleName(item: FollowUpReminder): string {
|
||||
return item.responsibleUser?.nick || item.responsibleUser?.name || item.responsibleUserId || "未命名负责人";
|
||||
}
|
||||
|
||||
function getStatusText(status?: FollowUpReminderStatus): string {
|
||||
return status === "COMPLETED" ? "已完成" : "待完成";
|
||||
}
|
||||
|
||||
function getStatusTheme(status?: FollowUpReminderStatus): "success" | "warning" {
|
||||
return status === "COMPLETED" ? "success" : "warning";
|
||||
}
|
||||
|
||||
function getNotifyStatusText(status?: NotifyDetail["status"]): string {
|
||||
const map: Record<NonNullable<NotifyDetail["status"]>, string> = {
|
||||
WAITING: "等待生效",
|
||||
REMINDED: "已生效",
|
||||
TIMEOUT: "已超时",
|
||||
CANCEL: "已取消",
|
||||
FAIL: "发送失败"
|
||||
};
|
||||
return status ? map[status] : "状态未知";
|
||||
}
|
||||
|
||||
function getNotifyStatusTheme(status?: NotifyDetail["status"]): NotifyTagTheme {
|
||||
if (status === "REMINDED") {
|
||||
return "success";
|
||||
}
|
||||
if (status === "FAIL" || status === "TIMEOUT") {
|
||||
return "danger";
|
||||
}
|
||||
if (status === "WAITING") {
|
||||
return "warning";
|
||||
}
|
||||
return "primary";
|
||||
}
|
||||
|
||||
async function loadDetail(): Promise<void> {
|
||||
const token = loadToken + 1;
|
||||
loadToken = token;
|
||||
detail.value = undefined;
|
||||
internalNotifyStatus.value = undefined;
|
||||
navBarStore.clearRight();
|
||||
const id = String(route.params.id || "");
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const result = await FollowUpReminderAPI.detail(id);
|
||||
if (token !== loadToken) {
|
||||
return;
|
||||
}
|
||||
detail.value = result;
|
||||
setEditAction();
|
||||
await loadInternalNotifyStatus(result, token);
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "跟进提醒详情加载失败"));
|
||||
} finally {
|
||||
if (token === loadToken) {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setEditAction(): void {
|
||||
if (canUpdate.value) {
|
||||
navBarStore.setRightText("编辑", "var(--td-brand-color)", toEdit);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadInternalNotifyStatus(item: FollowUpReminder, token: number): Promise<void> {
|
||||
if (!item.internalNotifyDetailId || !userStore.hasPermissions(corePermissionCodes.notify.read)) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const result = await NotifyAPI.internalDetail(item.internalNotifyDetailId);
|
||||
if (token === loadToken) {
|
||||
internalNotifyStatus.value = result;
|
||||
}
|
||||
} catch {
|
||||
// 站内通知详情只对当前接收用户开放，无法读取时不影响提醒详情。
|
||||
}
|
||||
}
|
||||
|
||||
async function toCustomer(): Promise<void> {
|
||||
if (detail.value?.customerId) {
|
||||
await router.push({
|
||||
name: "CustomerDetail",
|
||||
params: { id: detail.value.customerId },
|
||||
query: { transitionDepth: String(getCurrentRouteDepth() + 1) }
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function getCurrentRouteDepth(): number {
|
||||
const transitionDepth = Array.isArray(route.query.transitionDepth)
|
||||
? route.query.transitionDepth[0]
|
||||
: route.query.transitionDepth;
|
||||
const depth = Number(transitionDepth);
|
||||
if (transitionDepth && Number.isInteger(depth) && 0 <= depth && depth <= 20) {
|
||||
return depth;
|
||||
}
|
||||
return Number(route.meta.depth ?? 0);
|
||||
}
|
||||
|
||||
async function toEdit(): Promise<void> {
|
||||
if (detail.value?.id && canUpdate.value) {
|
||||
await router.push({ name: "CustomerFollowUpReminderEdit", params: { id: detail.value.id } });
|
||||
}
|
||||
}
|
||||
|
||||
function confirmComplete(): void {
|
||||
if (!detail.value?.id || !canComplete.value || detail.value.status !== "PENDING" || isOperating.value) {
|
||||
return;
|
||||
}
|
||||
const dialog = DialogPlugin.confirm({
|
||||
title: "完成跟进提醒",
|
||||
content: "完成后不能重新打开，确定完成此跟进提醒吗？",
|
||||
cancelBtn: "取消",
|
||||
confirmBtn: "完成",
|
||||
onCancel() {
|
||||
dialog.destroy();
|
||||
},
|
||||
onConfirm: async () => {
|
||||
dialog.destroy();
|
||||
await complete(detail.value?.id || "");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function complete(id: string): Promise<void> {
|
||||
isCompleting.value = true;
|
||||
try {
|
||||
await FollowUpReminderAPI.complete(id);
|
||||
Message.success("跟进提醒已完成");
|
||||
await loadDetail();
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "跟进提醒完成失败"));
|
||||
} finally {
|
||||
isCompleting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function confirmDelete(): void {
|
||||
if (!detail.value?.id || !canDelete.value || isOperating.value) {
|
||||
return;
|
||||
}
|
||||
const dialog = DialogPlugin.confirm({
|
||||
title: "删除跟进提醒",
|
||||
content: "删除后列表中将不再显示，确定删除这条跟进提醒吗？",
|
||||
cancelBtn: "取消",
|
||||
confirmBtn: "删除",
|
||||
onCancel() {
|
||||
dialog.destroy();
|
||||
},
|
||||
onConfirm: async () => {
|
||||
dialog.destroy();
|
||||
await remove(detail.value?.id || "");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function remove(id: string): Promise<void> {
|
||||
isDeleting.value = true;
|
||||
navBarStore.clearRight();
|
||||
try {
|
||||
await FollowUpReminderAPI.remove(id);
|
||||
Message.success("跟进提醒已删除");
|
||||
await router.replace({ name: "CustomerFollowUpReminderList" });
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "跟进提醒删除失败"));
|
||||
setEditAction();
|
||||
} finally {
|
||||
isDeleting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => route.params.id, async () => {
|
||||
await loadDetail();
|
||||
}, { immediate: true });
|
||||
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.follow-up-reminder-detail {
|
||||
gap: 1rem;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.customer {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1rem;
|
||||
line-height: 1.7;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.media-wrap {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.tips {
|
||||
padding: 1rem;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
--td-button-border-radius: 1rem;
|
||||
|
||||
gap: .5rem;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
|
||||
.t-button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.follow-up-reminder-detail {
|
||||
.content,
|
||||
.attachment-wrapper {
|
||||
background: rgba(30, 41, 59, .9);
|
||||
border-color: rgba(148, 163, 184, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,645 @@
|
||||
<template>
|
||||
<div v-can="pageAccess" class="follow-up-reminder-edit">
|
||||
<t-form class="form" label-width="6rem">
|
||||
<t-form-item label="客户" content-align="right" required-mark>
|
||||
<div class="customer-picker">
|
||||
<span v-if="!selectedCustomer" class="picker-text" v-text="'请选择客户'" />
|
||||
<t-button
|
||||
theme="primary"
|
||||
size="extra-small"
|
||||
content="选择"
|
||||
@click="customerSelectorVisible = true"
|
||||
/>
|
||||
</div>
|
||||
</t-form-item>
|
||||
<t-form-item v-if="selectedCustomer" label-width="0">
|
||||
<customer-profile-card class="customer-profile" :customer="selectedCustomer" />
|
||||
</t-form-item>
|
||||
<t-form-item
|
||||
label="负责人"
|
||||
content-align="right"
|
||||
required-mark
|
||||
arrow
|
||||
@click="responsibleSelectorVisible = true"
|
||||
>
|
||||
<span v-text="selectedResponsibleName" />
|
||||
</t-form-item>
|
||||
<t-form-item label="跟进内容" required-mark>
|
||||
<t-textarea
|
||||
v-model="formModel.content"
|
||||
class="textarea"
|
||||
:autosize="{ minRows: 1, maxRows: 8 }"
|
||||
maxlength="1000"
|
||||
borderless
|
||||
placeholder="请输入跟进内容"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label-width="0">
|
||||
<media-selector
|
||||
:model-value="photoUrlList"
|
||||
v-model:photo-items="photoItems"
|
||||
:upload="uploadReminderPhotoList"
|
||||
:edit-mode="true"
|
||||
:loading="isSaving || isUploading"
|
||||
add-text="选择照片"
|
||||
:show-type-label="false"
|
||||
title="附件照片"
|
||||
/>
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
<t-form class="form">
|
||||
<t-form-item class="remind-at" label="提醒时间" content-align="right" required-mark>
|
||||
<span class="picker-text" v-text="formModel.remindAtText || '请选择提醒时间'" />
|
||||
</t-form-item>
|
||||
<t-form-item label-width="0" content-align="right">
|
||||
<t-radio-group
|
||||
v-model="selectedRemindAtPreset"
|
||||
@change="handleRemindAtPresetChange"
|
||||
>
|
||||
<t-radio :block="false" borderless value="tomorrow">明天</t-radio>
|
||||
<t-radio :block="false" borderless value="afterTomorrow">后天</t-radio>
|
||||
<t-radio :block="false" borderless value="custom">指定时间</t-radio>
|
||||
</t-radio-group>
|
||||
</t-form-item>
|
||||
<t-form-item label="站内通知" content-align="right">
|
||||
<t-switch
|
||||
size="small"
|
||||
:model-value="hasChannel('INTERNAL')"
|
||||
borderless
|
||||
@change="value => setChannel('INTERNAL', value === true)"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label="短信通知" content-align="right">
|
||||
<t-switch
|
||||
size="small"
|
||||
:model-value="hasChannel('SMS')"
|
||||
:disabled="!canSelectSms"
|
||||
borderless
|
||||
@change="value => setChannel('SMS', value === true)"
|
||||
/>
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
<div class="tips red"
|
||||
v-text="'提醒时间精确到分钟，不能早于当前时间。短信会在提醒日期 08:00 聚合发送，不会在你选择的精确时间发送。'" />
|
||||
<customer-selector
|
||||
v-model="formModel.customerId"
|
||||
v-model:visible="customerSelectorVisible"
|
||||
:store-id="customerPickerStoreId"
|
||||
@change="handleCustomerChange"
|
||||
/>
|
||||
<managed-user-selector
|
||||
v-model="formModel.responsibleUserId"
|
||||
v-model:visible="responsibleSelectorVisible"
|
||||
:store-id="responsiblePickerStoreId"
|
||||
@change="handleResponsibleChange"
|
||||
/>
|
||||
<t-popup v-model="remindAtPickerVisible" placement="bottom">
|
||||
<t-date-time-picker
|
||||
v-if="remindAtPickerVisible"
|
||||
v-model="remindAtDraftText"
|
||||
:start="minimumDateTimeText"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
:mode="['date', 'minute']"
|
||||
title="提醒时间"
|
||||
@cancel="cancelRemindAtPicker"
|
||||
@confirm="confirmRemindAt"
|
||||
/>
|
||||
</t-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Time } from "timi-web";
|
||||
import { AttachmentAPI, type User, useUserStore } from "timi-web-api";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import { Message } from "@/utils/message";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import FollowUpReminderAPI from "@/api/FollowUpReminderAPI";
|
||||
import CustomerAPI from "@/api/CustomerAPI";
|
||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import ManagedUserSelector from "@/pages/followUpReminder/component/ManagedUserSelector.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
import type { ManagedUser } from "@/types/ManagedUser";
|
||||
import type {
|
||||
FollowUpReminder,
|
||||
FollowUpReminderAttachment,
|
||||
FollowUpReminderNotifyChannel,
|
||||
FollowUpReminderPayload
|
||||
} from "@/types/FollowUpReminder";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import { compressUploadImageList } from "@/utils/imageCompression";
|
||||
import { getAttachmentReadURL } from "@/utils/attachment";
|
||||
import { parseDateTime } from "@/utils/date";
|
||||
import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({
|
||||
name: "FollowUpReminderEdit"
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const currentStoreStore = useCurrentStoreStore();
|
||||
const navBarStore = useNavBarStore();
|
||||
|
||||
const routeId = computed(() => String(route.params.id || ""));
|
||||
const isEditMode = computed(() => !!routeId.value);
|
||||
const pageAccess = computed(() => isEditMode.value
|
||||
? permissionCodes.customerFollowUpReminder.update
|
||||
: permissionCodes.customerFollowUpReminder.create);
|
||||
|
||||
// ---------- 表单 ----------
|
||||
|
||||
const isSaving = ref(false);
|
||||
const formModel = reactive({
|
||||
id: "",
|
||||
storeId: "",
|
||||
customerId: "",
|
||||
responsibleUserId: "",
|
||||
content: "",
|
||||
remindAtText: "",
|
||||
notifyChannelList: [] as FollowUpReminderNotifyChannel[]
|
||||
});
|
||||
const selectedCustomer = ref<Customer>();
|
||||
const selectedResponsible = ref<ManagedUser>();
|
||||
const photoItems = ref<PhotoItem[]>([]);
|
||||
const photoUrlList = computed(() => photoItems.value.map(item => item.previewUrl || item.url));
|
||||
const customerSelectorVisible = ref(false);
|
||||
const responsibleSelectorVisible = ref(false);
|
||||
const customerPickerStoreId = computed(() => formModel.storeId || currentStoreStore.currentStoreId);
|
||||
const responsiblePickerStoreId = computed(() => selectedCustomer.value?.storeId || customerPickerStoreId.value);
|
||||
const currentUserId = computed(() => userStore.loginUser.user?.id || userStore.loginUser.id || "");
|
||||
const selectedResponsibleName = computed(() => {
|
||||
if (!selectedResponsible.value) {
|
||||
return "请选择负责人";
|
||||
}
|
||||
if (selectedResponsible.value.userId === currentUserId.value) {
|
||||
return "本人";
|
||||
}
|
||||
return getResponsibleName(selectedResponsible.value);
|
||||
});
|
||||
|
||||
// ---------- 通知方式 ----------
|
||||
|
||||
const hasSmsChannel = computed(() => hasChannel("SMS"));
|
||||
const isTodayReminder = computed(() => {
|
||||
const remindAt = parseRemindAt();
|
||||
if (!remindAt) {
|
||||
return false;
|
||||
}
|
||||
return Time.formatDate(new Date(remindAt)) === Time.formatDate(new Date(Time.now()));
|
||||
});
|
||||
const isBeforeSmsCutoff = computed(() => {
|
||||
const now = new Date(Time.now());
|
||||
return now.getHours() < 8;
|
||||
});
|
||||
const canSelectSms = computed(() => isResponsiblePhoneValid(selectedResponsible.value)
|
||||
&& (!isTodayReminder.value || isBeforeSmsCutoff.value));
|
||||
const smsRuleText = computed(() => {
|
||||
if (!selectedResponsible.value) {
|
||||
return "短信通知要求负责人有有效的已验证手机号。";
|
||||
}
|
||||
if (!isResponsiblePhoneValid(selectedResponsible.value)) {
|
||||
return "当前负责人没有有效的已验证手机号，短信通知不可用。";
|
||||
}
|
||||
if (isTodayReminder.value && !isBeforeSmsCutoff.value) {
|
||||
return "今天 08:00 后创建今天的提醒不能选择短信通知。";
|
||||
}
|
||||
return "短信将在提醒日期 08:00 聚合发送，允许与站内通知同时选择。";
|
||||
});
|
||||
|
||||
function hasChannel(channel: FollowUpReminderNotifyChannel): boolean {
|
||||
return formModel.notifyChannelList.includes(channel);
|
||||
}
|
||||
|
||||
function setChannel(channel: FollowUpReminderNotifyChannel, checked: boolean): void {
|
||||
if (channel === "SMS" && checked && !canSelectSms.value) {
|
||||
Message.warning(smsRuleText.value);
|
||||
return;
|
||||
}
|
||||
const channelSet = new Set(formModel.notifyChannelList);
|
||||
if (checked) {
|
||||
channelSet.add(channel);
|
||||
} else {
|
||||
channelSet.delete(channel);
|
||||
}
|
||||
formModel.notifyChannelList = Array.from(channelSet);
|
||||
}
|
||||
|
||||
function isResponsiblePhoneValid(item?: ManagedUser): boolean {
|
||||
const phone = item?.user?.phoneNo;
|
||||
return Boolean(phone && item?.user?.phoneNoVerified && /^1\d{10}$/.test(phone));
|
||||
}
|
||||
|
||||
function getResponsibleName(item: ManagedUser): string {
|
||||
return item.user?.nick || item.user?.name || item.userId || "未命名负责人";
|
||||
}
|
||||
|
||||
// ---------- 客户和负责人 ----------
|
||||
|
||||
async function handleCustomerChange(customerId: string): Promise<void> {
|
||||
formModel.customerId = customerId;
|
||||
selectedCustomer.value = customerId ? await loadCustomer(customerId) : undefined;
|
||||
formModel.storeId = selectedCustomer.value?.storeId || currentStoreStore.currentStoreId;
|
||||
if (selectedResponsible.value && selectedResponsible.value.storeId !== formModel.storeId) {
|
||||
formModel.responsibleUserId = "";
|
||||
selectedResponsible.value = undefined;
|
||||
setChannel("SMS", false);
|
||||
}
|
||||
}
|
||||
|
||||
function handleResponsibleChange(item: ManagedUser): void {
|
||||
selectedResponsible.value = item;
|
||||
formModel.responsibleUserId = item.userId || "";
|
||||
if (isResponsiblePhoneValid(item) && canSelectSms.value) {
|
||||
setChannel("SMS", true);
|
||||
}
|
||||
}
|
||||
|
||||
function selectCurrentUser(): void {
|
||||
if (!currentUserId.value) {
|
||||
Message.warning("当前登录用户信息不可用");
|
||||
return;
|
||||
}
|
||||
handleResponsibleChange({
|
||||
storeId: responsiblePickerStoreId.value,
|
||||
userId: currentUserId.value,
|
||||
enabled: true,
|
||||
user: userStore.loginUser.user as Partial<User> | undefined
|
||||
});
|
||||
}
|
||||
|
||||
async function loadCustomer(customerId: string): Promise<Customer | undefined> {
|
||||
try {
|
||||
return await CustomerAPI.detail(customerId);
|
||||
} catch {
|
||||
Message.warning("客户详情加载失败");
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 时间 ----------
|
||||
|
||||
type RemindAtPreset = "tomorrow" | "afterTomorrow" | "custom";
|
||||
|
||||
const selectedRemindAtPreset = ref<RemindAtPreset>("tomorrow");
|
||||
const remindAtPickerVisible = ref(false);
|
||||
const remindAtDraftText = ref("");
|
||||
const minimumDateTimeText = computed(() => {
|
||||
const date = new Date(Time.now());
|
||||
date.setSeconds(0, 0);
|
||||
date.setMinutes(date.getMinutes() + 1);
|
||||
return Time.formatDateTime(date);
|
||||
});
|
||||
|
||||
function getQuickRemindAt(dayOffset: number): string {
|
||||
const date = new Date(Time.now());
|
||||
date.setSeconds(0, 0);
|
||||
date.setDate(date.getDate() + dayOffset);
|
||||
return Time.formatDateTime(date);
|
||||
}
|
||||
|
||||
function getQuickRemindDate(dayOffset: number): string {
|
||||
const date = new Date(Time.now());
|
||||
date.setDate(date.getDate() + dayOffset);
|
||||
return Time.formatDate(date);
|
||||
}
|
||||
|
||||
function getRemindAtPreset(value: string): RemindAtPreset {
|
||||
const remindAt = Time.toTimestamp(parseDateTime(value, false));
|
||||
if (!remindAt) {
|
||||
return "tomorrow";
|
||||
}
|
||||
const remindDate = Time.formatDate(new Date(remindAt));
|
||||
if (remindDate === getQuickRemindDate(1)) {
|
||||
return "tomorrow";
|
||||
}
|
||||
if (remindDate === getQuickRemindDate(2)) {
|
||||
return "afterTomorrow";
|
||||
}
|
||||
return "custom";
|
||||
}
|
||||
|
||||
function selectRemindAtPreset(preset: RemindAtPreset): void {
|
||||
selectedRemindAtPreset.value = preset;
|
||||
if (preset === "custom") {
|
||||
openRemindAtPicker();
|
||||
return;
|
||||
}
|
||||
formModel.remindAtText = getQuickRemindAt(preset === "tomorrow" ? 1 : 2);
|
||||
}
|
||||
|
||||
function handleRemindAtPresetChange(value: string | number | boolean): void {
|
||||
if (value !== "tomorrow" && value !== "afterTomorrow" && value !== "custom") {
|
||||
return;
|
||||
}
|
||||
selectRemindAtPreset(value);
|
||||
}
|
||||
|
||||
function openRemindAtPicker(): void {
|
||||
remindAtDraftText.value = formModel.remindAtText || minimumDateTimeText.value;
|
||||
remindAtPickerVisible.value = true;
|
||||
}
|
||||
|
||||
function cancelRemindAtPicker(): void {
|
||||
remindAtPickerVisible.value = false;
|
||||
selectedRemindAtPreset.value = getRemindAtPreset(formModel.remindAtText);
|
||||
}
|
||||
|
||||
function confirmRemindAt(value?: string | number): void {
|
||||
formModel.remindAtText = String(value || remindAtDraftText.value);
|
||||
selectedRemindAtPreset.value = "custom";
|
||||
remindAtPickerVisible.value = false;
|
||||
}
|
||||
|
||||
function parseRemindAt(): number | undefined {
|
||||
if (!formModel.remindAtText) {
|
||||
return undefined;
|
||||
}
|
||||
return Time.toTimestamp(parseDateTime(formModel.remindAtText, false));
|
||||
}
|
||||
|
||||
// ---------- 附件 ----------
|
||||
|
||||
const isUploading = ref(false);
|
||||
|
||||
async function uploadReminderPhotoList(fileList: File[]): Promise<PhotoItem[]> {
|
||||
isUploading.value = true;
|
||||
try {
|
||||
const tempFileList = await AttachmentAPI.upload(await compressUploadImageList(fileList));
|
||||
return tempFileList.flatMap((item, index) => {
|
||||
if (!item.id) {
|
||||
return [];
|
||||
}
|
||||
return [
|
||||
{
|
||||
attachment: {
|
||||
tempFileId: item.id,
|
||||
mimeType: fileList[index]?.type,
|
||||
name: fileList[index]?.name,
|
||||
title: fileList[index] ? getFileTitle(fileList[index].name) : undefined
|
||||
},
|
||||
tempFileId: item.id,
|
||||
attachType: "PHOTO",
|
||||
mimeType: fileList[index]?.type,
|
||||
url: AttachmentAPI.getTempReadURL(item.id || "")
|
||||
}
|
||||
];
|
||||
});
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "附件上传失败"));
|
||||
return [];
|
||||
} finally {
|
||||
isUploading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function getFileTitle(name: string): string {
|
||||
return name.replace(/\.[^.]+$/, "");
|
||||
}
|
||||
|
||||
function getAttachmentURL(item: FollowUpReminderAttachment): string {
|
||||
if (item.id) {
|
||||
return getAttachmentReadURL(item.id);
|
||||
}
|
||||
if (item.tempFileId) {
|
||||
return AttachmentAPI.getTempReadURL(item.tempFileId);
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
function toPhotoItems(items: readonly FollowUpReminderAttachment[]): PhotoItem[] {
|
||||
const result: PhotoItem[] = [];
|
||||
for (const item of items) {
|
||||
const url = getAttachmentURL(item);
|
||||
if (!url) {
|
||||
continue;
|
||||
}
|
||||
result.push({
|
||||
attachment: item,
|
||||
tempFileId: item.tempFileId,
|
||||
attachType: item.attachType || "PHOTO",
|
||||
url
|
||||
});
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function toAttachmentList(items: readonly PhotoItem[]): FollowUpReminderAttachment[] {
|
||||
return items.map(item => ({
|
||||
...(item.attachment || {}),
|
||||
tempFileId: item.tempFileId || item.attachment?.tempFileId,
|
||||
attachType: item.attachType || item.attachment?.attachType || "PHOTO"
|
||||
})).filter(item => !!item.id || !!item.tempFileId);
|
||||
}
|
||||
|
||||
// ---------- 加载和保存 ----------
|
||||
|
||||
async function loadStoreScope(): Promise<void> {
|
||||
if (userStore.hasRoles(gaoRoleCodes.globalManager)) {
|
||||
await currentStoreStore.loadStoreList();
|
||||
formModel.storeId = currentStoreStore.currentStoreId;
|
||||
return;
|
||||
}
|
||||
const store = await currentStoreStore.loadLoginStore();
|
||||
formModel.storeId = store?.id || "";
|
||||
}
|
||||
|
||||
async function loadForm(): Promise<void> {
|
||||
await loadStoreScope();
|
||||
if (!routeId.value) {
|
||||
formModel.notifyChannelList = ["INTERNAL"];
|
||||
const queryCustomerId = String(route.query.customerId || "");
|
||||
if (queryCustomerId) {
|
||||
await handleCustomerChange(queryCustomerId);
|
||||
}
|
||||
selectCurrentUser();
|
||||
formModel.remindAtText = getQuickRemindAt(1);
|
||||
selectedRemindAtPreset.value = "tomorrow";
|
||||
return;
|
||||
}
|
||||
|
||||
const current = await FollowUpReminderAPI.detail(routeId.value);
|
||||
if (current.status !== "PENDING") {
|
||||
Message.warning("已完成的跟进提醒不能修改");
|
||||
await router.replace({ name: "CustomerFollowUpReminderDetail", params: { id: routeId.value } });
|
||||
return;
|
||||
}
|
||||
applyReminder(current);
|
||||
}
|
||||
|
||||
function applyReminder(current: FollowUpReminder): void {
|
||||
Object.assign(formModel, {
|
||||
id: current.id || "",
|
||||
storeId: current.storeId || "",
|
||||
customerId: current.customerId || "",
|
||||
responsibleUserId: current.responsibleUserId || "",
|
||||
content: current.content || "",
|
||||
remindAtText: current.remindAt ? Time.formatDateTime(new Date(current.remindAt)) : minimumDateTimeText.value,
|
||||
notifyChannelList: current.notifyChannelList || buildChannelList(current)
|
||||
});
|
||||
selectedCustomer.value = current.customer;
|
||||
selectedResponsible.value = current.responsibleUserId
|
||||
? {
|
||||
storeId: current.storeId,
|
||||
userId: current.responsibleUserId,
|
||||
enabled: true,
|
||||
user: current.responsibleUser as Partial<User> | undefined
|
||||
}
|
||||
: undefined;
|
||||
photoItems.value = toPhotoItems(current.attachmentList || []);
|
||||
selectedRemindAtPreset.value = getRemindAtPreset(formModel.remindAtText);
|
||||
}
|
||||
|
||||
function buildChannelList(item: FollowUpReminder): FollowUpReminderNotifyChannel[] {
|
||||
const result: FollowUpReminderNotifyChannel[] = [];
|
||||
if (item.internalNotifyEnabled) {
|
||||
result.push("INTERNAL");
|
||||
}
|
||||
if (item.smsNotifyEnabled) {
|
||||
result.push("SMS");
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function validateForm(remindAt?: number): boolean {
|
||||
if (!formModel.customerId || !selectedCustomer.value?.id) {
|
||||
Message.warning("请选择客户");
|
||||
return false;
|
||||
}
|
||||
if (!formModel.responsibleUserId || !selectedResponsible.value?.userId) {
|
||||
Message.warning("请选择负责人");
|
||||
return false;
|
||||
}
|
||||
if (!formModel.content.trim()) {
|
||||
Message.warning("请填写跟进内容");
|
||||
return false;
|
||||
}
|
||||
if (!remindAt || !(0 === remindAt % 60000) || !(Time.now() < remindAt)) {
|
||||
Message.warning("请选择晚于当前时间的分钟提醒时间");
|
||||
return false;
|
||||
}
|
||||
if (hasSmsChannel.value && !canSelectSms.value) {
|
||||
Message.warning(smsRuleText.value);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
async function save(): Promise<void> {
|
||||
if (isSaving.value || isUploading.value) {
|
||||
return;
|
||||
}
|
||||
const remindAt = parseRemindAt();
|
||||
if (!validateForm(remindAt)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const payload: FollowUpReminderPayload = {
|
||||
id: formModel.id || undefined,
|
||||
storeId: formModel.storeId || undefined,
|
||||
customerId: formModel.customerId,
|
||||
responsibleUserId: formModel.responsibleUserId,
|
||||
content: formModel.content.trim(),
|
||||
remindAt: remindAt as number,
|
||||
notifyChannelList: [...formModel.notifyChannelList],
|
||||
attachmentList: toAttachmentList(photoItems.value)
|
||||
};
|
||||
|
||||
isSaving.value = true;
|
||||
try {
|
||||
let id = formModel.id;
|
||||
if (isEditMode.value) {
|
||||
await FollowUpReminderAPI.update(payload);
|
||||
} else {
|
||||
id = await FollowUpReminderAPI.create(payload);
|
||||
}
|
||||
Message.success("跟进提醒已保存");
|
||||
await router.replace({ name: "CustomerFollowUpReminderDetail", params: { id } });
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "跟进提醒保存失败"));
|
||||
} finally {
|
||||
isSaving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
navBarStore.setRightText(isEditMode.value ? "保存" : "提交", "var(--td-brand-color)", save);
|
||||
try {
|
||||
await loadForm();
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "跟进提醒加载失败"));
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.follow-up-reminder-edit {
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 4rem;
|
||||
flex-direction: column;
|
||||
|
||||
.form {
|
||||
border-radius: 1rem;
|
||||
|
||||
.customer-picker {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.customer-profile {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.responsible-picker {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.remind-at {
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: var(--td-error-color);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin: 0 2rem;
|
||||
font-size: .875rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.follow-up-reminder-edit {
|
||||
.form {
|
||||
.picker-text {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
background: rgba(15, 23, 42, .72);
|
||||
border-color: rgba(148, 163, 184, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,869 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.customerFollowUpReminder.read" class="follow-up-reminder-list">
|
||||
<div class="filter bg-white">
|
||||
<t-input
|
||||
v-model="customerSearchKeyword"
|
||||
class="customer"
|
||||
type="search"
|
||||
borderless
|
||||
placeholder="输入客户编码、姓名或拼音"
|
||||
@enter="applyCustomerSearch"
|
||||
@clear="clearCustomer"
|
||||
>
|
||||
<template #suffix-icon>
|
||||
<t-button
|
||||
size="extra-small"
|
||||
theme="primary"
|
||||
variant="outline"
|
||||
content="选择客户"
|
||||
@click.stop="customerSelectorVisible = true"
|
||||
/>
|
||||
</template>
|
||||
</t-input>
|
||||
<t-dropdown-menu ref="dropdownMenuRef" class="menus">
|
||||
<t-dropdown-item
|
||||
v-model="statusFilter"
|
||||
:label="statusFilterLabel"
|
||||
:options="statusOptions"
|
||||
@change="handleStatusChange"
|
||||
/>
|
||||
<t-dropdown-item
|
||||
v-model="dateFilterType"
|
||||
:label="dateFilterLabel"
|
||||
:options="dateOptions"
|
||||
@change="handleDateFilterChange"
|
||||
/>
|
||||
<t-dropdown-item
|
||||
:label="selectedResponsibleName"
|
||||
:options="[]"
|
||||
@open="openResponsibleSelector"
|
||||
/>
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<t-pull-down-refresh
|
||||
class="list-wrap"
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="refresh"
|
||||
@scrolltolower="fetch"
|
||||
>
|
||||
<t-cell-group class="summary" theme="card">
|
||||
<t-cell title="提醒数量" :note="`共 ${pageResult.total} 条`" />
|
||||
<t-cell v-if="dateFilterType !== 'all'" title="提醒时间" :note="dateFilterLabel" />
|
||||
<t-cell v-if="selectedCustomer || selectedResponsibleId" title="筛选条件">
|
||||
<template #note>
|
||||
<div class="selected-filter">
|
||||
<t-tag
|
||||
v-if="selectedCustomer"
|
||||
theme="primary"
|
||||
variant="light-outline"
|
||||
:content="`客户：${selectedCustomer.name || selectedCustomer.code || '未命名'}`"
|
||||
/>
|
||||
<t-tag
|
||||
v-if="selectedResponsibleId"
|
||||
theme="primary"
|
||||
variant="light-outline"
|
||||
:content="`负责人：${selectedResponsibleName}`"
|
||||
/>
|
||||
<t-button size="extra-small" variant="text" @click="clearFilters">清空筛选</t-button>
|
||||
</div>
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<t-cell-group v-if="pageResult.list.length" class="items fix-last-cell-line empty-cell-title-margin" theme="card">
|
||||
<t-swipe-cell
|
||||
v-for="(item, index) in pageResult.list"
|
||||
:key="item.id || index"
|
||||
class="item"
|
||||
>
|
||||
<t-cell
|
||||
v-entrance-transition="index * 30"
|
||||
class="cell"
|
||||
arrow
|
||||
@click="toDetail(item)"
|
||||
>
|
||||
<template #leftIcon>
|
||||
<t-image
|
||||
v-if="getCustomerPhotoURL(item.customer, 64)"
|
||||
:src="getCustomerPhotoURL(item.customer, 64)"
|
||||
:alt="getCustomerName(item)"
|
||||
fit="cover"
|
||||
class="avatar"
|
||||
/>
|
||||
<div v-else class="avatar fallback" v-text="getCustomerName(item).slice(0, 1)" />
|
||||
</template>
|
||||
<template #title>
|
||||
<div class="title">
|
||||
<div class="name-channel">
|
||||
<span class="text-bold" v-text="getCustomerName(item)" />
|
||||
<t-tag
|
||||
v-if="item.notifyChannelList?.includes('INTERNAL')"
|
||||
size="small"
|
||||
theme="primary"
|
||||
variant="outline"
|
||||
content="站内信"
|
||||
/>
|
||||
<t-tag
|
||||
v-if="item.notifyChannelList?.includes('SMS')"
|
||||
size="small"
|
||||
theme="warning"
|
||||
variant="outline"
|
||||
content="短信"
|
||||
/>
|
||||
</div>
|
||||
<t-tag size="small" :theme="getStatusTheme(item.status)" :content="getStatusText(item.status)" />
|
||||
</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="description">
|
||||
<div class="content clip-text" v-text="getContentSummary(item.content)" />
|
||||
<div class="time-responsible">
|
||||
<span
|
||||
class="remind-time"
|
||||
:class="getReminderTimeClass(item)"
|
||||
v-text="getReminderTimeText(item.remindAt)"
|
||||
/>
|
||||
<span v-text="`负责人：${getResponsibleName(item)}`" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</t-cell>
|
||||
<template #right>
|
||||
<div class="swipe-actions">
|
||||
<t-button
|
||||
v-if="canComplete && item.status === 'PENDING'"
|
||||
class="complete swipe-cell-button"
|
||||
variant="text"
|
||||
:loading="operatingId === item.id && operatingType === 'complete'"
|
||||
@click.stop="confirmComplete(item)"
|
||||
>完成</t-button>
|
||||
<t-button
|
||||
v-if="canDelete"
|
||||
class="delete swipe-cell-button"
|
||||
variant="text"
|
||||
:loading="operatingId === item.id && operatingType === 'delete'"
|
||||
@click.stop="confirmDelete(item)"
|
||||
>删除</t-button>
|
||||
</div>
|
||||
</template>
|
||||
</t-swipe-cell>
|
||||
</t-cell-group>
|
||||
<div class="center-tips" v-text="isLoading ? '正在加载提醒' : pageResult.list.length ? (isNoMore ? '已经到底了' : '上拉加载更多') : '暂无跟进提醒'" />
|
||||
</t-pull-down-refresh>
|
||||
<customer-selector
|
||||
v-model="selectedCustomerId"
|
||||
v-model:visible="customerSelectorVisible"
|
||||
:initial-keyword="customerSearchKeyword"
|
||||
:store-id="currentStoreStore.currentStoreId"
|
||||
:enable-scan="true"
|
||||
@change="handleCustomerSelected"
|
||||
/>
|
||||
<managed-user-selector
|
||||
v-model="selectedResponsibleId"
|
||||
v-model:visible="responsibleSelectorVisible"
|
||||
:store-id="currentStoreStore.currentStoreId"
|
||||
@change="handleResponsibleSelected"
|
||||
/>
|
||||
<t-popup v-model="startVisible" placement="bottom">
|
||||
<t-date-time-picker
|
||||
v-if="startVisible"
|
||||
v-model="startDraft"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
:mode="['date', 'minute']"
|
||||
title="提醒开始时间"
|
||||
@cancel="startVisible = false"
|
||||
@confirm="confirmStart"
|
||||
/>
|
||||
</t-popup>
|
||||
<t-popup v-model="endVisible" placement="bottom">
|
||||
<t-date-time-picker
|
||||
v-if="endVisible"
|
||||
v-model="endDraft"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
:mode="['date', 'minute']"
|
||||
title="提醒结束时间"
|
||||
@cancel="endVisible = false"
|
||||
@confirm="confirmEnd"
|
||||
/>
|
||||
</t-popup>
|
||||
</div>
|
||||
<nav-bar-action-menu v-if="canCreate" :actions="actionList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DialogPlugin, type DropdownValue } from "tdesign-mobile-vue";
|
||||
import { Time } from "timi-web";
|
||||
import { type PageResult, useUserStore } from "timi-web-api";
|
||||
import { Message } from "@/utils/message";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import FollowUpReminderAPI from "@/api/FollowUpReminderAPI";
|
||||
import CustomerAPI from "@/api/CustomerAPI";
|
||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import ManagedUserSelector from "@/pages/followUpReminder/component/ManagedUserSelector.vue";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
import type { ManagedUser } from "@/types/ManagedUser";
|
||||
import type {
|
||||
FollowUpReminder,
|
||||
FollowUpReminderPage,
|
||||
FollowUpReminderStatus
|
||||
} from "@/types/FollowUpReminder";
|
||||
import { getCustomerPhotoURL } from "@/utils/customer";
|
||||
import { parseDateTime } from "@/utils/date";
|
||||
import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
|
||||
|
||||
type DateFilterType = "all" | "today" | "next7" | "custom";
|
||||
|
||||
defineOptions({
|
||||
name: "FollowUpReminderList"
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const userStore = useUserStore();
|
||||
const currentStoreStore = useCurrentStoreStore();
|
||||
const navBarStore = useNavBarStore();
|
||||
|
||||
const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
|
||||
const canCreate = computed(() => userStore.hasPermissions(permissionCodes.customerFollowUpReminder.create));
|
||||
const canComplete = computed(() => userStore.hasPermissions(permissionCodes.customerFollowUpReminder.complete));
|
||||
const canDelete = computed(() => userStore.hasPermissions(permissionCodes.customerFollowUpReminder.delete));
|
||||
|
||||
// ---------- 筛选 ----------
|
||||
|
||||
const statusFilter = ref<"" | FollowUpReminderStatus>("");
|
||||
const statusOptions = [
|
||||
{ label: "全部状态", value: "" },
|
||||
{ label: "待完成", value: "PENDING" },
|
||||
{ label: "已完成", value: "COMPLETED" }
|
||||
];
|
||||
const statusFilterLabel = computed(() => statusOptions.find(item => item.value === statusFilter.value)?.label || "全部状态");
|
||||
const dateFilterType = ref<DateFilterType>("all");
|
||||
const dateRange = ref<[string, string]>(["", ""]);
|
||||
const dateOptions = [
|
||||
{ label: "全部时间", value: "all" },
|
||||
{ label: "今天", value: "today" },
|
||||
{ label: "未来 7 天", value: "next7" },
|
||||
{ label: "自定义范围", value: "custom" }
|
||||
];
|
||||
const dateFilterLabel = computed(() => {
|
||||
if (dateFilterType.value === "custom" && dateRange.value[0]) {
|
||||
return `${dateRange.value[0]} 至 ${dateRange.value[1]}`;
|
||||
}
|
||||
return dateOptions.find(item => item.value === dateFilterType.value)?.label || "全部时间";
|
||||
});
|
||||
const selectedCustomerId = ref("");
|
||||
const selectedCustomer = ref<Customer>();
|
||||
const customerSearchKeyword = ref("");
|
||||
const customerSelectorVisible = ref(false);
|
||||
const selectedResponsibleId = ref("");
|
||||
const selectedResponsible = ref<ManagedUser>();
|
||||
const responsibleSelectorVisible = ref(false);
|
||||
const dropdownMenuRef = ref<{ collapseMenu: () => void }>();
|
||||
const selectedResponsibleName = computed(() => selectedResponsible.value
|
||||
? getManagedUserName(selectedResponsible.value)
|
||||
: "全部负责人");
|
||||
const startVisible = ref(false);
|
||||
const endVisible = ref(false);
|
||||
const startDraft = ref("");
|
||||
const endDraft = ref("");
|
||||
|
||||
const actionList = computed(() => [{
|
||||
action: toCreate,
|
||||
icon: "add",
|
||||
key: "create",
|
||||
text: "新增跟进提醒",
|
||||
theme: "primary" as const
|
||||
}]);
|
||||
|
||||
async function handleStatusChange(value: DropdownValue): Promise<void> {
|
||||
if (Array.isArray(value)) {
|
||||
return;
|
||||
}
|
||||
statusFilter.value = String(value) as "" | FollowUpReminderStatus;
|
||||
await refresh();
|
||||
}
|
||||
|
||||
async function handleDateFilterChange(value: DropdownValue): Promise<void> {
|
||||
if (Array.isArray(value)) {
|
||||
return;
|
||||
}
|
||||
dateFilterType.value = String(value) as DateFilterType;
|
||||
if (dateFilterType.value === "custom") {
|
||||
openStartDate();
|
||||
return;
|
||||
}
|
||||
dateRange.value = buildPresetDateRange(dateFilterType.value);
|
||||
await refresh();
|
||||
}
|
||||
|
||||
function openStartDate(): void {
|
||||
startDraft.value = dateRange.value[0] || `${Time.formatDate(new Date())} 00:00`;
|
||||
startVisible.value = true;
|
||||
}
|
||||
|
||||
function openEndDate(): void {
|
||||
endDraft.value = dateRange.value[1] || `${Time.formatDate(new Date())} 23:59`;
|
||||
endVisible.value = true;
|
||||
}
|
||||
|
||||
function confirmStart(value?: string | number): void {
|
||||
startVisible.value = false;
|
||||
dateRange.value = [String(value || startDraft.value), dateRange.value[1]];
|
||||
openEndDate();
|
||||
}
|
||||
|
||||
async function confirmEnd(value?: string | number): Promise<void> {
|
||||
endVisible.value = false;
|
||||
dateRange.value = [dateRange.value[0], String(value || endDraft.value)];
|
||||
if (dateRange.value[1] < dateRange.value[0]) {
|
||||
dateRange.value = [dateRange.value[1], dateRange.value[0]];
|
||||
}
|
||||
await refresh();
|
||||
}
|
||||
|
||||
function buildPresetDateRange(type: DateFilterType): [string, string] {
|
||||
const begin = new Date();
|
||||
begin.setHours(0, 0, 0, 0);
|
||||
const end = new Date(begin);
|
||||
if (type === "next7") {
|
||||
end.setDate(end.getDate() + 6);
|
||||
}
|
||||
end.setHours(23, 59, 0, 0);
|
||||
return type === "all" ? ["", ""] : [Time.formatDateTime(begin), Time.formatDateTime(end)];
|
||||
}
|
||||
|
||||
async function handleCustomerSelected(id: string): Promise<void> {
|
||||
selectedCustomerId.value = id;
|
||||
selectedCustomer.value = id ? await loadCustomer(id) : undefined;
|
||||
customerSearchKeyword.value = getCustomerSearchKeyword(selectedCustomer.value);
|
||||
await refresh();
|
||||
}
|
||||
|
||||
async function applyCustomerSearch(): Promise<void> {
|
||||
const keyword = customerSearchKeyword.value.trim();
|
||||
if (!keyword) {
|
||||
await clearCustomer();
|
||||
return;
|
||||
}
|
||||
if (keyword === getCustomerSearchKeyword(selectedCustomer.value)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await CustomerAPI.list({
|
||||
index: 0,
|
||||
size: 20,
|
||||
storeId: currentStoreStore.currentStoreId || undefined,
|
||||
keyword
|
||||
});
|
||||
const customer = result.list?.[0];
|
||||
if (!customer?.id) {
|
||||
Message.warning("未找到匹配客户");
|
||||
return;
|
||||
}
|
||||
if (1 < (result.total || 0)) {
|
||||
Message.warning("匹配到多个客户，请点击选择客户");
|
||||
customerSelectorVisible.value = true;
|
||||
return;
|
||||
}
|
||||
selectedCustomerId.value = customer.id;
|
||||
selectedCustomer.value = customer;
|
||||
customerSearchKeyword.value = getCustomerSearchKeyword(customer);
|
||||
await refresh();
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "客户信息加载失败"));
|
||||
}
|
||||
}
|
||||
|
||||
function getCustomerSearchKeyword(customer?: Customer): string {
|
||||
return customer?.name?.trim() || customer?.code?.trim() || "";
|
||||
}
|
||||
|
||||
async function clearCustomer(): Promise<void> {
|
||||
selectedCustomerId.value = "";
|
||||
selectedCustomer.value = undefined;
|
||||
customerSearchKeyword.value = "";
|
||||
await refresh();
|
||||
}
|
||||
|
||||
async function handleResponsibleSelected(item: ManagedUser): Promise<void> {
|
||||
selectedResponsible.value = item;
|
||||
await refresh();
|
||||
}
|
||||
|
||||
function openResponsibleSelector(): void {
|
||||
dropdownMenuRef.value?.collapseMenu();
|
||||
responsibleSelectorVisible.value = true;
|
||||
}
|
||||
|
||||
async function clearFilters(): Promise<void> {
|
||||
statusFilter.value = "";
|
||||
dateFilterType.value = "all";
|
||||
dateRange.value = ["", ""];
|
||||
selectedCustomerId.value = "";
|
||||
selectedCustomer.value = undefined;
|
||||
customerSearchKeyword.value = "";
|
||||
selectedResponsibleId.value = "";
|
||||
selectedResponsible.value = undefined;
|
||||
await refresh();
|
||||
}
|
||||
|
||||
// ---------- 列表 ----------
|
||||
|
||||
const isRefreshing = ref(false);
|
||||
const isLoading = ref(false);
|
||||
const isNoMore = ref(false);
|
||||
const pageResult = reactive<PageResult<FollowUpReminder>>({
|
||||
total: 0,
|
||||
list: []
|
||||
});
|
||||
const page = reactive<FollowUpReminderPage>({
|
||||
index: 0,
|
||||
size: 16
|
||||
});
|
||||
let fetchTask: Promise<void> | undefined;
|
||||
|
||||
async function fetch(): Promise<void> {
|
||||
if (isNoMore.value) {
|
||||
return;
|
||||
}
|
||||
if (fetchTask) {
|
||||
await fetchTask;
|
||||
return;
|
||||
}
|
||||
|
||||
const task = (async () => {
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const [beginRemindAt, endRemindAt] = buildDateTimestampRange();
|
||||
const result = await FollowUpReminderAPI.list({
|
||||
...page,
|
||||
storeId: currentStoreStore.currentStoreId || undefined,
|
||||
customerId: selectedCustomerId.value || undefined,
|
||||
responsibleUserId: selectedResponsibleId.value || undefined,
|
||||
status: statusFilter.value || undefined,
|
||||
beginRemindAt,
|
||||
endRemindAt
|
||||
});
|
||||
const list = result.list || [];
|
||||
pageResult.total = result.total || 0;
|
||||
pageResult.list = pageResult.list.concat(list);
|
||||
page.index += 1;
|
||||
isNoMore.value = list.length < page.size || pageResult.list.length >= pageResult.total;
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
})();
|
||||
fetchTask = task;
|
||||
try {
|
||||
await task;
|
||||
} finally {
|
||||
if (fetchTask === task) {
|
||||
fetchTask = undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function refresh(): Promise<void> {
|
||||
if (fetchTask) {
|
||||
await fetchTask;
|
||||
}
|
||||
isRefreshing.value = true;
|
||||
try {
|
||||
page.index = 0;
|
||||
pageResult.total = 0;
|
||||
pageResult.list = [];
|
||||
isNoMore.value = false;
|
||||
await fetch();
|
||||
} finally {
|
||||
isRefreshing.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function buildDateTimestampRange(): [number | undefined, number | undefined] {
|
||||
return [
|
||||
dateRange.value[0] ? Time.toTimestamp(parseDateTime(dateRange.value[0], false)) : undefined,
|
||||
dateRange.value[1] ? Time.toTimestamp(parseDateTime(dateRange.value[1], true)) : undefined
|
||||
];
|
||||
}
|
||||
|
||||
async function loadCustomer(id: string): Promise<Customer | undefined> {
|
||||
try {
|
||||
return await CustomerAPI.detail(id);
|
||||
} catch {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadStoreScope(): Promise<void> {
|
||||
if (isGlobalManager.value) {
|
||||
await currentStoreStore.loadStoreList();
|
||||
return;
|
||||
}
|
||||
await currentStoreStore.loadLoginStore();
|
||||
}
|
||||
|
||||
// ---------- 展示 ----------
|
||||
|
||||
function getCustomerName(item: FollowUpReminder): string {
|
||||
return item.customer?.name || item.customer?.code || item.customerId || "未命名客户";
|
||||
}
|
||||
|
||||
function getManagedUserName(item: ManagedUser): string {
|
||||
return item.user?.nick || item.user?.name || item.userId || "未命名负责人";
|
||||
}
|
||||
|
||||
function getResponsibleName(item: FollowUpReminder): string {
|
||||
return item.responsibleUser?.nick || item.responsibleUser?.name || item.responsibleUserId || "未命名负责人";
|
||||
}
|
||||
|
||||
function getReminderTimeText(remindAt?: number): string {
|
||||
return remindAt ? Time.toDateTime(remindAt) : "-";
|
||||
}
|
||||
|
||||
function getReminderTimeClass(item: FollowUpReminder): "near" | "soon" | "later" | "normal" {
|
||||
if (item.status === "COMPLETED" || !item.remindAt) {
|
||||
return "normal";
|
||||
}
|
||||
const distance = item.remindAt - Time.now();
|
||||
if (distance < 24 * 60 * 60 * 1000) {
|
||||
return "near";
|
||||
}
|
||||
if (distance < 3 * 24 * 60 * 60 * 1000) {
|
||||
return "soon";
|
||||
}
|
||||
return "later";
|
||||
}
|
||||
|
||||
function getContentSummary(content?: string): string {
|
||||
const text = content?.trim() || "未填写跟进内容";
|
||||
return 60 < text.length ? `${text.slice(0, 60)}...` : text;
|
||||
}
|
||||
|
||||
function getStatusText(status?: FollowUpReminderStatus): string {
|
||||
return status === "COMPLETED" ? "已完成" : "待完成";
|
||||
}
|
||||
|
||||
function getStatusTheme(status?: FollowUpReminderStatus): "success" | "warning" {
|
||||
return status === "COMPLETED" ? "success" : "warning";
|
||||
}
|
||||
|
||||
// ---------- 操作 ----------
|
||||
|
||||
const operatingId = ref("");
|
||||
const operatingType = ref<"complete" | "delete">();
|
||||
|
||||
function confirmComplete(item: FollowUpReminder): void {
|
||||
if (!item.id || !canComplete.value || item.status !== "PENDING" || operatingId.value) {
|
||||
return;
|
||||
}
|
||||
const dialog = DialogPlugin.confirm({
|
||||
title: "完成跟进提醒",
|
||||
content: "完成后不能重新打开，确定完成此跟进提醒吗？",
|
||||
cancelBtn: "取消",
|
||||
confirmBtn: "完成",
|
||||
onCancel() {
|
||||
dialog.destroy();
|
||||
},
|
||||
onConfirm: async () => {
|
||||
dialog.destroy();
|
||||
await complete(item.id || "");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function complete(id: string): Promise<void> {
|
||||
operatingId.value = id;
|
||||
operatingType.value = "complete";
|
||||
try {
|
||||
await FollowUpReminderAPI.complete(id);
|
||||
const item = pageResult.list.find(current => current.id === id);
|
||||
if (item) {
|
||||
item.status = "COMPLETED";
|
||||
}
|
||||
Message.success("跟进提醒已完成");
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "跟进提醒完成失败"));
|
||||
} finally {
|
||||
operatingId.value = "";
|
||||
operatingType.value = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
function confirmDelete(item: FollowUpReminder): void {
|
||||
if (!item.id || !canDelete.value || operatingId.value) {
|
||||
return;
|
||||
}
|
||||
const dialog = DialogPlugin.confirm({
|
||||
title: "删除跟进提醒",
|
||||
content: "删除后列表中将不再显示，确定删除这条跟进提醒吗？",
|
||||
cancelBtn: "取消",
|
||||
confirmBtn: "删除",
|
||||
onCancel() {
|
||||
dialog.destroy();
|
||||
},
|
||||
onConfirm: async () => {
|
||||
dialog.destroy();
|
||||
await remove(item.id || "");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function remove(id: string): Promise<void> {
|
||||
operatingId.value = id;
|
||||
operatingType.value = "delete";
|
||||
try {
|
||||
await FollowUpReminderAPI.remove(id);
|
||||
pageResult.list = pageResult.list.filter(item => item.id !== id);
|
||||
pageResult.total = Math.max(0, pageResult.total - 1);
|
||||
Message.success("跟进提醒已删除");
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "跟进提醒删除失败"));
|
||||
} finally {
|
||||
operatingId.value = "";
|
||||
operatingType.value = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 导航和生命周期 ----------
|
||||
|
||||
async function toCreate(): Promise<void> {
|
||||
await router.push({
|
||||
name: "CustomerFollowUpReminderCreate",
|
||||
query: selectedCustomerId.value ? { customerId: selectedCustomerId.value } : undefined
|
||||
});
|
||||
}
|
||||
|
||||
async function toDetail(item: FollowUpReminder): Promise<void> {
|
||||
if (item.id) {
|
||||
await router.push({ name: "CustomerFollowUpReminderDetail", params: { id: item.id } });
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
navBarStore.setCustomRightVisible(canCreate.value);
|
||||
try {
|
||||
await loadStoreScope();
|
||||
const queryCustomerId = String(route.query.customerId || "");
|
||||
if (queryCustomerId) {
|
||||
selectedCustomerId.value = queryCustomerId;
|
||||
selectedCustomer.value = await loadCustomer(queryCustomerId);
|
||||
customerSearchKeyword.value = getCustomerSearchKeyword(selectedCustomer.value);
|
||||
}
|
||||
await fetch();
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "跟进提醒列表加载失败"));
|
||||
}
|
||||
});
|
||||
|
||||
watch(() => route.query.customerId, async value => {
|
||||
const id = String(value || "");
|
||||
if (id === selectedCustomerId.value) {
|
||||
return;
|
||||
}
|
||||
selectedCustomerId.value = id;
|
||||
selectedCustomer.value = id ? await loadCustomer(id) : undefined;
|
||||
customerSearchKeyword.value = getCustomerSearchKeyword(selectedCustomer.value);
|
||||
await refresh();
|
||||
});
|
||||
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.follow-up-reminder-list {
|
||||
padding: var(--app-nav-height) 0 1rem;
|
||||
|
||||
.filter {
|
||||
top: var(--app-nav-height);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
padding: .75rem 1rem;
|
||||
position: sticky;
|
||||
background: #f5f5f8;
|
||||
box-shadow: var(--td-shadow-1);
|
||||
flex-direction: column;
|
||||
|
||||
.customer {
|
||||
--td-button-border-radius: .75rem;
|
||||
--td-input-vertical-padding: .25rem 1rem;
|
||||
|
||||
width: 100%;
|
||||
border: 1px solid var(--td-component-border);
|
||||
background: var(--td-bg-color-container);
|
||||
padding-right: .3rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.menus {
|
||||
--td-spacer-1: 6px;
|
||||
|
||||
width: 100%;
|
||||
border: 1px solid rgba(148, 163, 184, .18);
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
margin-top: -1rem;
|
||||
background: #fff;
|
||||
border-top: none;
|
||||
padding-top: .8rem;
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.selected-filter {
|
||||
gap: .5rem;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
align-items: center;
|
||||
|
||||
:deep(.t-tag) {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.t-button {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.list-wrap {
|
||||
padding: 1rem 0;
|
||||
|
||||
.summary {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.items {
|
||||
|
||||
.item {
|
||||
|
||||
.cell {
|
||||
padding: 10px;
|
||||
min-width: 0;
|
||||
|
||||
:deep(.t-cell__title),
|
||||
:deep(.t-cell__title-text) {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
gap: .5rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
font-size: .875rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.name-channel {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
|
||||
> .text-bold {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: .75rem;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
line-height: 1.25;
|
||||
|
||||
.remind-time {
|
||||
font-weight: 600;
|
||||
|
||||
&.near {
|
||||
color: var(--td-error-color);
|
||||
}
|
||||
|
||||
&.soon {
|
||||
color: var(--td-warning-color);
|
||||
}
|
||||
|
||||
&.later {
|
||||
color: var(--td-success-color);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
color: var(--td-text-color-secondary);
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.time-responsible {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swipe-actions {
|
||||
--td-button-border-radius: 0;
|
||||
|
||||
.complete {
|
||||
color: #fff;
|
||||
background: var(--td-success-color);
|
||||
}
|
||||
|
||||
.delete {
|
||||
color: #fff;
|
||||
background: var(--td-error-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.follow-up-reminder-list {
|
||||
.filter {
|
||||
background: #10161f;
|
||||
}
|
||||
|
||||
.filter .menus {
|
||||
background: #172033;
|
||||
}
|
||||
|
||||
.summary,
|
||||
.items .item,
|
||||
.items .cell {
|
||||
color: #e2e8f0;
|
||||
background: rgba(30, 41, 59, .9);
|
||||
border-color: rgba(148, 163, 184, .16);
|
||||
}
|
||||
|
||||
.description .content {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<bottom-popup
|
||||
v-model="popupVisible"
|
||||
:title="title"
|
||||
height="80vh"
|
||||
left-button-text="关闭"
|
||||
right-button-text=""
|
||||
@left-button-click="close"
|
||||
>
|
||||
<div class="managed-user-selector">
|
||||
<div class="search-wrap">
|
||||
<t-input
|
||||
v-model.trim="keyword"
|
||||
class="search"
|
||||
borderless
|
||||
clearable
|
||||
placeholder="搜索姓名、昵称或手机号"
|
||||
/>
|
||||
</div>
|
||||
<t-cell-group v-if="filteredUserList.length" class="list">
|
||||
<t-cell
|
||||
v-for="item in filteredUserList"
|
||||
:key="item.id || item.userId"
|
||||
class="item"
|
||||
:class="{ selected: item.userId === modelValue }"
|
||||
:title="getUserName(item)"
|
||||
:description="getUserDescription(item)"
|
||||
@click="select(item)"
|
||||
>
|
||||
<template #leftIcon>
|
||||
<t-image
|
||||
:src="buildUserAvatar(item)"
|
||||
:alt="getUserName(item)"
|
||||
fit="cover"
|
||||
class="avatar"
|
||||
/>
|
||||
</template>
|
||||
<template #rightIcon>
|
||||
<t-icon v-if="item.userId === modelValue" name="check" class="selected-icon" />
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<div v-else class="center-tips" v-text="loading ? '正在加载负责人' : '暂无可选负责人'" />
|
||||
</div>
|
||||
</bottom-popup>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { BottomPopup } from "timi-tdesign-mobile";
|
||||
import { UserAPI } from "timi-web-api";
|
||||
import ManagedUserAPI from "@/api/ManagedUserAPI";
|
||||
import { buildFallbackAvatar } from "@/utils/avatar";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { Message } from "@/utils/message";
|
||||
import type { ManagedUser } from "@/types/ManagedUser";
|
||||
|
||||
interface Props {
|
||||
modelValue: string;
|
||||
visible: boolean;
|
||||
storeId?: string;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
storeId: "",
|
||||
title: "选择负责人"
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
"update:modelValue": [value: string];
|
||||
"update:visible": [value: boolean];
|
||||
change: [value: ManagedUser];
|
||||
}>();
|
||||
|
||||
const popupVisible = computed({
|
||||
get: () => props.visible,
|
||||
set: value => emit("update:visible", value)
|
||||
});
|
||||
const keyword = ref("");
|
||||
const loading = ref(false);
|
||||
const userList = ref<ManagedUser[]>([]);
|
||||
|
||||
const filteredUserList = computed(() => {
|
||||
const normalizedKeyword = keyword.value.toLowerCase();
|
||||
return userList.value.filter(item => {
|
||||
const user = item.user;
|
||||
return !normalizedKeyword || [item.userId, user?.name, user?.nick, user?.phoneNo]
|
||||
.some(value => Boolean(value?.toLowerCase().includes(normalizedKeyword)));
|
||||
});
|
||||
});
|
||||
|
||||
function getUserName(item: ManagedUser): string {
|
||||
return item.user?.nick || item.user?.name || item.userId || "未命名用户";
|
||||
}
|
||||
|
||||
function getUserDescription(item: ManagedUser): string {
|
||||
const phone = item.user?.phoneNo || "未填写手机号";
|
||||
const verified = item.user?.phoneNoVerified ? "已验证" : "未验证";
|
||||
return `${phone} · ${verified}`;
|
||||
}
|
||||
|
||||
function buildUserAvatar(item: ManagedUser): string {
|
||||
return UserAPI.getAvatarURL(item.user) || buildFallbackAvatar(getUserName(item), "#0f766e");
|
||||
}
|
||||
|
||||
async function loadUsers(): Promise<void> {
|
||||
loading.value = true;
|
||||
try {
|
||||
const result = await ManagedUserAPI.list({
|
||||
index: 0,
|
||||
size: 1000,
|
||||
equalsExample: {
|
||||
storeId: props.storeId || undefined,
|
||||
enabled: true
|
||||
}
|
||||
}, {
|
||||
storeId: props.storeId || undefined
|
||||
});
|
||||
userList.value = result.list || [];
|
||||
} catch (error) {
|
||||
userList.value = [];
|
||||
Message.error(getErrorMessage(error, "负责人列表加载失败"));
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function select(item: ManagedUser): void {
|
||||
if (!item.userId) {
|
||||
return;
|
||||
}
|
||||
emit("update:modelValue", item.userId);
|
||||
emit("change", item);
|
||||
emit("update:visible", false);
|
||||
}
|
||||
|
||||
function close(): void {
|
||||
emit("update:visible", false);
|
||||
}
|
||||
|
||||
watch(() => props.visible, async value => {
|
||||
if (!value) {
|
||||
keyword.value = "";
|
||||
return;
|
||||
}
|
||||
await loadUsers();
|
||||
});
|
||||
|
||||
watch(() => props.storeId, async () => {
|
||||
if (props.visible) {
|
||||
await loadUsers();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.managed-user-selector {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background: var(--td-bg-color-page, #f5f5f8);
|
||||
|
||||
.search-wrap {
|
||||
padding: .75rem 1rem;
|
||||
background: var(--td-bg-color-container, #fff);
|
||||
}
|
||||
|
||||
.search {
|
||||
--td-input-vertical-padding: 8px 14px;
|
||||
|
||||
border: 1px solid var(--td-component-border);
|
||||
border-radius: .75rem;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: .25rem 1rem;
|
||||
|
||||
&.selected {
|
||||
background: color-mix(in srgb, var(--td-brand-color) 8%, var(--td-bg-color-container, #fff));
|
||||
}
|
||||
|
||||
.avatar {
|
||||
flex: none;
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.selected-icon {
|
||||
color: var(--td-brand-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.avatar .t-image__img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.managed-user-selector {
|
||||
background: #10161f;
|
||||
|
||||
.search-wrap,
|
||||
.item {
|
||||
background: rgba(30, 41, 59, .9);
|
||||
}
|
||||
|
||||
.item.selected {
|
||||
background: rgba(37, 99, 235, .2);
|
||||
}
|
||||
|
||||
.search {
|
||||
background: rgba(15, 23, 42, .72);
|
||||
border-color: rgba(148, 163, 184, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -102,7 +102,7 @@
|
||||
<t-textarea v-model="remark" borderless autosize maxlength="500" />
|
||||
</t-form-item>
|
||||
<t-form-item label-width="0">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
v-if="order"
|
||||
:model-value="photoUrlList"
|
||||
v-model:photo-items="photoItems"
|
||||
@@ -126,7 +126,7 @@
|
||||
import SalesOrderAPI from "@/api/SalesOrderAPI";
|
||||
import FulfillmentAPI from "@/api/FulfillmentAPI";
|
||||
import ProductAPI from "@/api/ProductAPI";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
|
||||
import ProductStockPreview from "@/components/ProductStockPreview.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<t-cell v-if="fulfillment.remark" title="备注" :note="fulfillment.remark" />
|
||||
</t-cell-group>
|
||||
<div class="photos" v-entrance-transition="35">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
:model-value="fulfillmentPhotoURLList"
|
||||
:photo-items="fulfillmentPhotoItems"
|
||||
:show-add="false"
|
||||
@@ -121,7 +121,7 @@
|
||||
<t-switch v-model="returnedToStore" />
|
||||
</t-form-item>
|
||||
<t-form-item label-width="0">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
:model-value="photoUrlList"
|
||||
v-model:photo-items="photoItems"
|
||||
:upload="uploadPhotoList"
|
||||
@@ -141,7 +141,7 @@ import { PassTimeLabel } from "timi-web";
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import FulfillmentAPI from "@/api/FulfillmentAPI";
|
||||
import SalesOrderAPI from "@/api/SalesOrderAPI";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { OrderFulfillment, OrderFulfillmentItem } from "@/types/Fulfillment";
|
||||
|
||||
@@ -75,14 +75,16 @@
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
<div v-if="showRecordPhotoInput" class="input-form photo-form content-margin">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
title="登记事件照片"
|
||||
:required="selectedRequiredPhotoEventList.length > 0"
|
||||
v-model="recordPhotoList"
|
||||
v-model:photo-items="recordPhotoItemList"
|
||||
:edit-mode="true"
|
||||
:loading="recordPhotoUploading"
|
||||
@add="capturePhoto"
|
||||
@add="selectPhotoFile"
|
||||
@capture-photo="capturePhoto"
|
||||
@capture-video="captureVideo"
|
||||
/>
|
||||
</div>
|
||||
<t-cell-group
|
||||
@@ -115,10 +117,26 @@
|
||||
ref="recordPhotoInputRef"
|
||||
class="file-input"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
accept="*/*"
|
||||
multiple
|
||||
@change="handleRecordPhotoSelected"
|
||||
>
|
||||
<input
|
||||
ref="recordPhotoCameraInputRef"
|
||||
class="file-input"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
capture="environment"
|
||||
@change="handleRecordPhotoSelected"
|
||||
>
|
||||
<input
|
||||
ref="videoInputRef"
|
||||
class="file-input"
|
||||
type="file"
|
||||
accept="video/*"
|
||||
capture="environment"
|
||||
@change="handleRecordPhotoSelected"
|
||||
>
|
||||
</div>
|
||||
<bottom-popup
|
||||
v-model="eventPopupVisible"
|
||||
@@ -153,7 +171,7 @@ import EventRecordAPI from "@/api/EventRecordAPI";
|
||||
import CodeScanner from "@/components/CodeScanner.vue";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import EventOptionSelector from "@/components/EventOptionSelector.vue";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import { useSettingStore } from "@/store/settingStore";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
import type { EventItem, EventOptionSelectionMap } from "@/types/EventItem";
|
||||
@@ -386,6 +404,8 @@ function validateNumberValueList(): boolean {
|
||||
// ---------- 照片 ----------
|
||||
|
||||
const recordPhotoInputRef = ref<HTMLInputElement>();
|
||||
const recordPhotoCameraInputRef = ref<HTMLInputElement>();
|
||||
const videoInputRef = ref<HTMLInputElement>();
|
||||
const recordPhotoItemList = ref<PhotoItem[]>([]);
|
||||
const recordPhotoUploading = ref(false);
|
||||
const showRecordPhotoInput = computed(() => selectedRequiredPhotoEventList.value.length > 0 || recordPhotoItemList.value.length > 0);
|
||||
@@ -400,9 +420,17 @@ const recordPhotoList = computed<string[]>({
|
||||
});
|
||||
|
||||
function capturePhoto(): void {
|
||||
recordPhotoCameraInputRef.value?.click();
|
||||
}
|
||||
|
||||
function selectPhotoFile(): void {
|
||||
recordPhotoInputRef.value?.click();
|
||||
}
|
||||
|
||||
function captureVideo(): void {
|
||||
videoInputRef.value?.click();
|
||||
}
|
||||
|
||||
async function handleRecordPhotoSelected(event: Event): Promise<void> {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const fileList = Array.from(input.files || []);
|
||||
@@ -413,13 +441,14 @@ async function handleRecordPhotoSelected(event: Event): Promise<void> {
|
||||
try {
|
||||
const compressedFileList = await compressUploadImageList(fileList);
|
||||
const tempFileList = await AttachmentAPI.upload(compressedFileList);
|
||||
for (const item of tempFileList) {
|
||||
for (const [index, item] of tempFileList.entries()) {
|
||||
if (!item.id) {
|
||||
continue;
|
||||
}
|
||||
recordPhotoItemList.value.push({
|
||||
tempFileId: item.id,
|
||||
attachType: "PHOTO",
|
||||
mimeType: fileList[index]?.type,
|
||||
url: AttachmentAPI.getTempReadURL(item.id)
|
||||
});
|
||||
}
|
||||
|
||||
@@ -209,7 +209,7 @@
|
||||
</div>
|
||||
</t-form-item>
|
||||
<t-form-item v-if="(paymentVerified && parsedPaymentAmount) || (receiveFullPayment && parsedSaleAmount)" label-width="0">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
:model-value="paymentPhotoUrlList"
|
||||
v-model:photo-items="paymentPhotoItems"
|
||||
:upload="uploadPhotoList"
|
||||
@@ -218,7 +218,7 @@
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item v-if="fulfillAll" label-width="0">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
:model-value="fulfillmentPhotoUrlList"
|
||||
v-model:photo-items="fulfillmentPhotoItems"
|
||||
:upload="uploadPhotoList"
|
||||
@@ -235,7 +235,7 @@
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label-width="0">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
:model-value="photoUrlList"
|
||||
v-model:photo-items="photoItems"
|
||||
:upload="uploadPhotoList"
|
||||
@@ -339,7 +339,7 @@ import CodeScanner from "@/components/CodeScanner.vue";
|
||||
import CustomerList from "@/components/CustomerList.vue";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import ProductStockPreview from "@/components/ProductStockPreview.vue";
|
||||
import { usePackagePurchase } from "@/pages/package/usePackagePurchase";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
</t-form-item>
|
||||
</template>
|
||||
<div class="photo-wrap">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
v-model="photoUrls"
|
||||
v-model:photo-items="photos"
|
||||
:upload="uploadPhotoList"
|
||||
@@ -114,7 +114,7 @@ import PointAPI from "@/api/PointAPI";
|
||||
import CodeScanner from "@/components/CodeScanner.vue";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import { useSettingStore } from "@/store/settingStore";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<t-cell title="兑换时间" :note="timeText(item.redeemedAt)" />
|
||||
<t-cell v-if="item.remark" title="备注" :note="item.remark" />
|
||||
<div class="photo-wrap bg-white">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
:model-value="attachmentUrls"
|
||||
:show-add="false"
|
||||
:show-remove="false"
|
||||
@@ -62,7 +62,7 @@
|
||||
<t-textarea v-model.trim="returnRemark" maxlength="500" autosize />
|
||||
</t-form-item>
|
||||
<t-form-item label-width="0">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
v-model="returnPhotoUrls"
|
||||
v-model:photo-items="returnPhotos"
|
||||
:upload="uploadPhotoList"
|
||||
@@ -82,7 +82,7 @@ import { AttachmentAPI, useUserStore } from "timi-web-api";
|
||||
import CustomerAPI from "@/api/CustomerAPI";
|
||||
import PointAPI from "@/api/PointAPI";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import type { PointRedemption, PointRedemptionReturn, PointRedemptionStatus } from "@/types/Point";
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<t-cell title="状态" :note="getProductStatusText(product.status)" />
|
||||
<t-cell title="备注" :note="Text.display(product.remark)"></t-cell>
|
||||
<t-cell>
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
:model-value="attachmentUrlList"
|
||||
:photo-items="attachmentItemList"
|
||||
title="附件列表"
|
||||
@@ -118,7 +118,7 @@
|
||||
<t-cell v-if="selectedSku.stockEnabled" title="最低库存" :note="`${getProductQuantityText(selectedSku.minStockQuantity)} 基础单位`" />
|
||||
<t-cell v-if="selectedSku.remark" title="备注" :note="Text.display(selectedSku.remark)" />
|
||||
</t-cell-group>
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
v-if="skuPhotoItemList.length"
|
||||
:model-value="skuPhotoUrlList"
|
||||
:photo-items="skuPhotoItemList"
|
||||
@@ -154,7 +154,7 @@ import { BottomPopup } from "timi-tdesign-mobile";
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import ProductAPI from "@/api/ProductAPI";
|
||||
import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import ProductProfile from "@/pages/product/component/ProductProfile.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { NavBarAction } from "@/types/NavBarAction";
|
||||
@@ -435,7 +435,7 @@ onUnmounted(() => navBarStore.clearRight());
|
||||
margin: 0 0 .75rem;
|
||||
}
|
||||
|
||||
:deep(.photo-scroller) {
|
||||
:deep(.media-selector) {
|
||||
margin: 0 .75rem .75rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<t-textarea v-model="form.remark" borderless maxlength="255" autosize placeholder="可填写产品说明" />
|
||||
</t-form-item>
|
||||
<t-form-item label-width="0">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
v-model="attachmentUrlList"
|
||||
v-model:photo-items="attachmentItemList"
|
||||
title="产品公共图片及附件"
|
||||
@@ -31,7 +31,9 @@
|
||||
:loading="isAttachmentUploading"
|
||||
:show-viewer-actions="false"
|
||||
:add-actions="attachmentAddActions"
|
||||
@add-photo="openAttachmentPicker('PHOTO')"
|
||||
@add="openAttachmentPicker('OTHER')"
|
||||
@capture-photo="capturePhoto"
|
||||
@capture-video="captureVideo"
|
||||
@add-other="openAttachmentPicker('OTHER')"
|
||||
/>
|
||||
</t-form-item>
|
||||
@@ -197,7 +199,9 @@
|
||||
>
|
||||
<t-color-picker v-if="coverColorPickerVisible" v-model="coverColorDraft" format="HEX" type="multiple" :swatch-colors="colorSwatchList" @palette-bar-change="updateCoverColorDraftFromPalette" />
|
||||
</bottom-popup>
|
||||
<input ref="attachmentInputRef" class="file-input" type="file" accept="image/*" @change="handleAttachmentSelected" />
|
||||
<input ref="attachmentInputRef" class="file-input" type="file" accept="*/*" @change="handleAttachmentSelected" />
|
||||
<input ref="photoInputRef" class="file-input" type="file" accept="image/*" capture="environment" @change="handleAttachmentSelected" />
|
||||
<input ref="videoInputRef" class="file-input" type="file" accept="video/*" capture="environment" @change="handleAttachmentSelected" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -206,7 +210,7 @@ import { BottomPopup } from "timi-tdesign-mobile";
|
||||
import { DialogPlugin, type ColorObject } from "tdesign-mobile-vue";
|
||||
import { type Attachment, AttachmentAPI, useUserStore } from "timi-web-api";
|
||||
import ProductAPI from "@/api/ProductAPI";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import ProductSkuEditor from "@/pages/product/component/ProductSkuEditor.vue";
|
||||
import ProductSkuUnitEditor from "@/pages/product/component/ProductSkuUnitEditor.vue";
|
||||
import ProductSkuUnitBatchEditor from "@/pages/product/component/ProductSkuUnitBatchEditor.vue";
|
||||
@@ -252,6 +256,8 @@ const typePickerVisible = ref(false);
|
||||
const categoryPickerVisible = ref(false);
|
||||
const statusPickerVisible = ref(false);
|
||||
const attachmentInputRef = ref<HTMLInputElement>();
|
||||
const photoInputRef = ref<HTMLInputElement>();
|
||||
const videoInputRef = ref<HTMLInputElement>();
|
||||
const attachmentPickerTarget = ref<ProductAttachmentType>("PHOTO");
|
||||
const isAttachmentUploading = ref(false);
|
||||
const coverColorPickerVisible = ref(false);
|
||||
@@ -269,7 +275,6 @@ const statusOptions = [{ label: "启用", value: "ACTIVE" }, { label: "停用",
|
||||
const colorSwatchList = ["#2F88FF", "#0EA5E9", "#10B981", "#22C55E", "#F59E0B", "#F97316", "#EF4444", "#EC4899", "#8B5CF6", "#64748B"];
|
||||
const selectedCategoryName = computed(() => categoryList.value.find(item => item.id === form.categoryId)?.name || "不设置分类");
|
||||
const attachmentAddActions = [
|
||||
{ icon: "camera", text: "产品图片", emit: "add-photo", theme: "primary" },
|
||||
{ icon: "file-attachment", text: "其他文件", emit: "add-other", theme: "default" }
|
||||
] as const;
|
||||
const attachmentItemList = ref<ProductAttachmentItem[]>([]);
|
||||
@@ -552,6 +557,16 @@ function openAttachmentPicker(target: ProductAttachmentType): void {
|
||||
attachmentInputRef.value?.click();
|
||||
}
|
||||
|
||||
function capturePhoto(): void {
|
||||
attachmentPickerTarget.value = "PHOTO";
|
||||
photoInputRef.value?.click();
|
||||
}
|
||||
|
||||
function captureVideo(): void {
|
||||
attachmentPickerTarget.value = "OTHER";
|
||||
videoInputRef.value?.click();
|
||||
}
|
||||
|
||||
function openCoverColorPicker(): void {
|
||||
coverColorDraft.value = solidColorCoverColor.value || DEFAULT_COVER_COLOR;
|
||||
coverColorPickerVisible.value = true;
|
||||
@@ -628,7 +643,7 @@ async function handleAttachmentSelected(event: Event): Promise<void> {
|
||||
try {
|
||||
const tempFile = (await AttachmentAPI.upload(await compressUploadImage(file)))[0];
|
||||
if (tempFile?.id) {
|
||||
attachmentItemList.value.push({ attachType: attachmentPickerTarget.value, tempFileId: tempFile.id, url: AttachmentAPI.getTempReadURL(tempFile.id) });
|
||||
attachmentItemList.value.push({ attachType: attachmentPickerTarget.value, mimeType: file.type, tempFileId: tempFile.id, url: AttachmentAPI.getTempReadURL(tempFile.id) });
|
||||
}
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "产品附件上传失败"));
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
</div>
|
||||
</t-form-item>
|
||||
<t-form-item label-width="0">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
:model-value="photoUrlList"
|
||||
v-model:photo-items="photoItems"
|
||||
:upload="uploadPhotoList"
|
||||
@@ -99,7 +99,7 @@ import { watch } from "vue";
|
||||
import { BottomPopup } from "timi-tdesign-mobile";
|
||||
import { Time } from "timi-web";
|
||||
import ProductAPI from "@/api/ProductAPI";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import type {
|
||||
Product,
|
||||
ProductSku,
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
<span></span>
|
||||
</template>
|
||||
<template #description>
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
:model-value="photoURLList"
|
||||
:photo-items="photoItemList"
|
||||
:show-add="false"
|
||||
@@ -119,7 +119,7 @@
|
||||
<t-textarea v-model="revokeRemark" borderless autosize maxlength="500" placeholder="请输入冲正备注" />
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
:model-value="revokePhotoUrlList"
|
||||
v-model:photo-items="revokePhotoItems"
|
||||
:upload="uploadPhotoList"
|
||||
@@ -137,7 +137,7 @@ import { BottomPopup } from "timi-tdesign-mobile";
|
||||
import { PassTimeLabel } from "timi-web";
|
||||
import { useUserStore, type Attachment } from "timi-web-api";
|
||||
import ProductAPI from "@/api/ProductAPI";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
|
||||
@@ -106,7 +106,7 @@
|
||||
<t-input v-model.trim="sku.remark" borderless maxlength="255" placeholder="选填" />
|
||||
</t-form-item>
|
||||
<div class="photo-wrap">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
:model-value="photoUrlList"
|
||||
v-model:photo-items="sku.photoItemList"
|
||||
title="SKU 图片（选填）"
|
||||
@@ -147,7 +147,7 @@
|
||||
import { BottomPopup } from "timi-tdesign-mobile";
|
||||
import type { ProductType } from "@/types/Product";
|
||||
import type { ProductSkuForm, ProductSpecForm, ProductSkuUnitForm } from "@/types/ProductEditor";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import { formatProductAmount, getProductSkuSpecEntries, parseProductAmount } from "@/utils/product";
|
||||
import { uploadPhotoList } from "@/utils/photo";
|
||||
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
@click="toSalesOrder"
|
||||
/>
|
||||
<div class="photo-wrap bg-white">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
:model-value="photoURLList"
|
||||
:photo-items="photoItems"
|
||||
title="业务照片"
|
||||
@@ -124,7 +124,7 @@ import { DialogPlugin } from "tdesign-mobile-vue";
|
||||
import { PassTimeLabel, Text } from "timi-web";
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import SalesOrderAPI from "@/api/SalesOrderAPI";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { FundRecord, FundRecordStatus } from "@/types/SalesOrder";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
/>
|
||||
</t-form-item>
|
||||
<div class="photo-wrap">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
v-if="record"
|
||||
:model-value="photoUrlList"
|
||||
v-model:photo-items="photoItems"
|
||||
@@ -87,7 +87,7 @@
|
||||
import { Time } from "timi-web";
|
||||
import { useUserStore, type Attachment } from "timi-web-api";
|
||||
import SalesOrderAPI from "@/api/SalesOrderAPI";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { FundRecord } from "@/types/SalesOrder";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
|
||||
@@ -175,7 +175,7 @@
|
||||
</div>
|
||||
</t-form-item>
|
||||
<t-form-item v-if="(paymentVerified && paymentAmount) || (receiveFullPayment && totalAmount)" label-width="0">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
:model-value="paymentPhotoUrlList"
|
||||
v-model:photo-items="paymentPhotoItems"
|
||||
:upload="uploadPhotoList"
|
||||
@@ -184,7 +184,7 @@
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item v-if="fulfillAll" label-width="0">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
:model-value="fulfillmentPhotoUrlList"
|
||||
v-model:photo-items="fulfillmentPhotoItems"
|
||||
:upload="uploadPhotoList"
|
||||
@@ -196,7 +196,7 @@
|
||||
<t-textarea v-model="remark" class="textarea" borderless autosize maxlength="500" placeholder="记录本单需要注意的内容" />
|
||||
</t-form-item>
|
||||
<div class="photo-part">
|
||||
<photo-scroller :model-value="photoUrlList" v-model:photo-items="photoItems" :upload="uploadPhotoList" :edit-mode="true" title="订单照片（选填）" />
|
||||
<media-selector :model-value="photoUrlList" v-model:photo-items="photoItems" :upload="uploadPhotoList" :edit-mode="true" title="订单照片（选填）" />
|
||||
</div>
|
||||
</t-form>
|
||||
<div class="submit-wrap glass-white bg-white">
|
||||
@@ -232,7 +232,7 @@ import SalesOrderAPI from "@/api/SalesOrderAPI";
|
||||
import CodeScanner from "@/components/CodeScanner.vue";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import ProductStockPreview from "@/components/ProductStockPreview.vue";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
import type { Product, ProductSku, ProductSkuUnit } from "@/types/Product";
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
</t-form-item>
|
||||
<t-form-item label-width="0">
|
||||
<div class="photo-wrap">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
:model-value="photoURLList"
|
||||
v-model:photo-items="photoItems"
|
||||
:edit-mode="isEditing"
|
||||
@@ -225,7 +225,7 @@ import { type Attachment, useUserStore } from "timi-web-api";
|
||||
import FulfillmentAPI from "@/api/FulfillmentAPI";
|
||||
import SalesOrderAPI from "@/api/SalesOrderAPI";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { GaoSalesOrderItem, GaoSalesPaymentStatus, SalesOrder } from "@/types/SalesOrder";
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label-width="0">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
v-if="order"
|
||||
:model-value="photoUrlList"
|
||||
v-model:photo-items="photoItems"
|
||||
@@ -94,7 +94,7 @@
|
||||
<script setup lang="ts">
|
||||
import { useUserStore, type Attachment } from "timi-web-api";
|
||||
import { Time } from "timi-web";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import SalesOrderAPI from "@/api/SalesOrderAPI";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { SalesOrder } from "@/types/SalesOrder";
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label-width="0">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
v-if="order"
|
||||
:model-value="photoUrlList"
|
||||
v-model:photo-items="photoItems"
|
||||
@@ -116,7 +116,7 @@
|
||||
<script setup lang="ts">
|
||||
import { Time } from "timi-web";
|
||||
import { useUserStore, type Attachment } from "timi-web-api";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import SalesOrderAPI from "@/api/SalesOrderAPI";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { SalesOrder } from "@/types/SalesOrder";
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
/>
|
||||
</header>
|
||||
<div v-if="additionalPhotoItemList.length" class="additional-photos-wrapper">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
:model-value="additionalPhotoList"
|
||||
:photo-items="additionalPhotoItemList"
|
||||
:show-add="false"
|
||||
@@ -71,7 +71,7 @@ import { DialogPlugin } from "tdesign-mobile-vue";
|
||||
import { PassTimeLabel } from "timi-web";
|
||||
import { UserAPI, type Attachment, useUserStore } from "timi-web-api";
|
||||
import StoreDiaryAPI from "@/api/StoreDiaryAPI";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { StoreDiary } from "@/types/StoreDiary";
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
/>
|
||||
</t-form-item>
|
||||
<section class="photo-wrapper" v-entrance-transition="140">
|
||||
<photo-scroller
|
||||
<media-selector
|
||||
v-model="photoList"
|
||||
v-model:photo-items="photoItemList"
|
||||
title="附加照片"
|
||||
@@ -28,15 +28,33 @@
|
||||
:show-type-label="false"
|
||||
:show-viewer-actions="false"
|
||||
@add="openPhotoPicker"
|
||||
@capture-photo="capturePhoto"
|
||||
@capture-video="captureVideo"
|
||||
/>
|
||||
<input
|
||||
ref="photoInputRef"
|
||||
class="file-input"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
accept="*/*"
|
||||
multiple
|
||||
@change="handlePhotoSelected"
|
||||
>
|
||||
<input
|
||||
ref="photoCameraInputRef"
|
||||
class="file-input"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
capture="environment"
|
||||
@change="handlePhotoSelected"
|
||||
>
|
||||
<input
|
||||
ref="videoInputRef"
|
||||
class="file-input"
|
||||
type="file"
|
||||
accept="video/*"
|
||||
capture="environment"
|
||||
@change="handlePhotoSelected"
|
||||
>
|
||||
</section>
|
||||
<section class="editor-wrapper" v-entrance-transition="70">
|
||||
<article-editor
|
||||
@@ -63,7 +81,7 @@ import {
|
||||
} from "timi-tdesign-mobile";
|
||||
import { AttachmentAPI, type Attachment, useUserStore } from "timi-web-api";
|
||||
import StoreDiaryAPI from "@/api/StoreDiaryAPI";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { StoreDiary } from "@/types/StoreDiary";
|
||||
@@ -132,6 +150,8 @@ function getCreateTitle(): string {
|
||||
// ---------- 附加照片 ----------
|
||||
|
||||
const photoInputRef = ref<HTMLInputElement>();
|
||||
const photoCameraInputRef = ref<HTMLInputElement>();
|
||||
const videoInputRef = ref<HTMLInputElement>();
|
||||
const photoItemList = ref<PhotoItem[]>([]);
|
||||
const isPhotoUploading = ref(false);
|
||||
const photoList = computed<string[]>({
|
||||
@@ -146,6 +166,14 @@ function openPhotoPicker(): void {
|
||||
photoInputRef.value?.click();
|
||||
}
|
||||
|
||||
function capturePhoto(): void {
|
||||
photoCameraInputRef.value?.click();
|
||||
}
|
||||
|
||||
function captureVideo(): void {
|
||||
videoInputRef.value?.click();
|
||||
}
|
||||
|
||||
async function handlePhotoSelected(event: Event): Promise<void> {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const fileList = Array.from(input.files || []);
|
||||
@@ -156,11 +184,12 @@ async function handlePhotoSelected(event: Event): Promise<void> {
|
||||
isPhotoUploading.value = true;
|
||||
try {
|
||||
const tempFileList = await AttachmentAPI.upload(await compressUploadImageList(fileList));
|
||||
for (const tempFile of tempFileList) {
|
||||
for (const [index, tempFile] of tempFileList.entries()) {
|
||||
if (!tempFile.id) {
|
||||
continue;
|
||||
}
|
||||
photoItemList.value.push({
|
||||
mimeType: fileList[index]?.type,
|
||||
tempFileId: tempFile.id,
|
||||
attachType: "ADDITIONAL",
|
||||
url: AttachmentAPI.getTempReadURL(tempFile.id)
|
||||
@@ -182,6 +211,7 @@ function buildPhotoItemList(attachmentList?: StoreDiary["attachmentList"]): Phot
|
||||
return [{
|
||||
attachment: item as Partial<Attachment>,
|
||||
attachType: "ADDITIONAL",
|
||||
mimeType: typeof item.mimeType === "string" ? item.mimeType : undefined,
|
||||
previewUrl: getAttachmentReadURL(item.id),
|
||||
url: getAttachmentReadURL(item.id, 90)
|
||||
}];
|
||||
|
||||
@@ -75,7 +75,7 @@ const chartOption = computed<EChartsOption>(() => ({
|
||||
type: "bar",
|
||||
barMaxWidth: 24,
|
||||
itemStyle: {
|
||||
color: "#0f766e",
|
||||
color: "#0f766e"
|
||||
},
|
||||
data: ageDataList.value.map(item => item[1])
|
||||
}
|
||||
|
||||
@@ -60,7 +60,7 @@ const menuGroupList = computed<MenuGroup[]>(() => [
|
||||
visible: userStore.hasPermissions(permissionCodes.productCategory.read)
|
||||
},
|
||||
{
|
||||
icon: "layers",
|
||||
icon: "control-platform",
|
||||
path: "/management/products",
|
||||
title: "产品库",
|
||||
visible: userStore.hasPermissions(permissionCodes.product.read)
|
||||
|
||||
@@ -130,6 +130,12 @@ const menuGroupList = computed<MenuGroup[]>(() => [
|
||||
title: "客户管理",
|
||||
visible: userStore.hasPermissions(permissionCodes.customer.read)
|
||||
},
|
||||
{
|
||||
icon: "user-marked",
|
||||
path: "/management/customer-follow-up-reminders",
|
||||
title: "客户跟进提醒",
|
||||
visible: userStore.hasPermissions(permissionCodes.customerFollowUpReminder.read)
|
||||
},
|
||||
{
|
||||
icon: "git-merge",
|
||||
path: "/management/customer-invite-relation",
|
||||
|
||||
@@ -11,6 +11,7 @@ import registrationRoutes from "@/router/routes/registrationRoutes";
|
||||
import tabRoutes from "@/router/routes/tabRoutes";
|
||||
import userRoutes from "@/router/routes/userRoutes";
|
||||
import notifyRoutes from "@/router/routes/notifyRoutes";
|
||||
import followUpReminderRoutes from "@/router/routes/followUpReminderRoutes";
|
||||
import productRoutes from "@/router/routes/productRoutes";
|
||||
import salesOrderRoutes from "@/router/routes/salesOrderRoutes";
|
||||
import fulfillmentRoutes from "@/router/routes/fulfillmentRoutes";
|
||||
@@ -31,6 +32,7 @@ const detailRoutes = [
|
||||
...chartRoutes,
|
||||
...managementAccountRoutes,
|
||||
...notifyRoutes,
|
||||
...followUpReminderRoutes,
|
||||
...productRoutes,
|
||||
...salesOrderRoutes,
|
||||
...fulfillmentRoutes
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
import type { RouteRecordRaw } from "vue-router";
|
||||
|
||||
const followUpReminderRoutes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: "/management/customer-follow-up-reminders",
|
||||
name: "CustomerFollowUpReminderList",
|
||||
component: () => import("@/pages/followUpReminder/FollowUpReminderList.vue"),
|
||||
meta: {
|
||||
depth: 3,
|
||||
navBarVisible: true,
|
||||
navBarCanBack: true,
|
||||
navBarTitle: "客户跟进提醒",
|
||||
tabBarVisible: false,
|
||||
bodyBackground: "#F5F5F8",
|
||||
darkBodyBackground: "#10161f"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/management/customer-follow-up-reminders/create",
|
||||
name: "CustomerFollowUpReminderCreate",
|
||||
component: () => import("@/pages/followUpReminder/FollowUpReminderEdit.vue"),
|
||||
meta: {
|
||||
depth: 4,
|
||||
navBarVisible: true,
|
||||
navBarCanBack: true,
|
||||
navBarTitle: "新增跟进提醒",
|
||||
tabBarVisible: false,
|
||||
bodyBackground: "#F5F5F8",
|
||||
darkBodyBackground: "#10161f"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/management/customer-follow-up-reminders/:id",
|
||||
name: "CustomerFollowUpReminderDetail",
|
||||
component: () => import("@/pages/followUpReminder/FollowUpReminderDetail.vue"),
|
||||
meta: {
|
||||
depth: 4,
|
||||
navBarVisible: true,
|
||||
navBarCanBack: true,
|
||||
navBarTitle: "跟进提醒详情",
|
||||
tabBarVisible: false,
|
||||
bodyBackground: "#F5F5F8",
|
||||
darkBodyBackground: "#10161f"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/management/customer-follow-up-reminders/:id/edit",
|
||||
name: "CustomerFollowUpReminderEdit",
|
||||
component: () => import("@/pages/followUpReminder/FollowUpReminderEdit.vue"),
|
||||
meta: {
|
||||
depth: 5,
|
||||
navBarVisible: true,
|
||||
navBarCanBack: true,
|
||||
navBarTitle: "编辑跟进提醒",
|
||||
tabBarVisible: false,
|
||||
bodyBackground: "#F5F5F8",
|
||||
darkBodyBackground: "#10161f"
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
export default followUpReminderRoutes;
|
||||
@@ -1,5 +1,6 @@
|
||||
import type { Attachment, Model, User } from "timi-web-api";
|
||||
import type { EventRecord } from "@/types/EventRecord.ts";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import type { TagApply } from "@/types/Tag";
|
||||
|
||||
export type CustomerGender = "MALE" | "FEMALE";
|
||||
@@ -39,12 +40,9 @@ export type Customer = {
|
||||
|
||||
export type CustomerAttachmentType = "PHOTO" | "POINT_CARD" | "OTHER";
|
||||
|
||||
export type EditableCustomerPhoto = {
|
||||
attachment?: Attachment;
|
||||
/** 客户编辑页的媒体项：复用通用媒体项，仅收窄附件类型 */
|
||||
export type EditableCustomerPhoto = PhotoItem & {
|
||||
attachType: CustomerAttachmentType;
|
||||
previewUrl?: string;
|
||||
tempFileId?: string;
|
||||
url: string;
|
||||
};
|
||||
|
||||
export type CustomerTrendStatReq = {
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
import type { Attachment, Model, User } from "timi-web-api";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
|
||||
/** 客户跟进提醒业务状态。 */
|
||||
export type FollowUpReminderStatus = "PENDING" | "COMPLETED";
|
||||
|
||||
/** 客户跟进提醒通知方式。 */
|
||||
export type FollowUpReminderNotifyChannel = "INTERNAL" | "SMS";
|
||||
|
||||
/** 跟进提醒附件请求项。 */
|
||||
export type FollowUpReminderAttachment = Partial<Attachment> & {
|
||||
name?: string;
|
||||
title?: string;
|
||||
};
|
||||
|
||||
/** 客户跟进提醒。 */
|
||||
export type FollowUpReminder = {
|
||||
storeId?: string;
|
||||
customerId?: string;
|
||||
responsibleUserId?: string;
|
||||
content?: string;
|
||||
remindAt?: number;
|
||||
status?: FollowUpReminderStatus;
|
||||
internalNotifyEnabled?: boolean;
|
||||
smsNotifyEnabled?: boolean;
|
||||
internalNotifyDetailId?: string;
|
||||
smsNotifyDetailId?: string;
|
||||
completedBy?: string;
|
||||
completedAt?: number;
|
||||
createdBy?: string;
|
||||
updatedBy?: string;
|
||||
notifyChannelList?: FollowUpReminderNotifyChannel[];
|
||||
customer?: Customer;
|
||||
responsibleUser?: Partial<User>;
|
||||
attachmentList?: FollowUpReminderAttachment[];
|
||||
} & Model;
|
||||
|
||||
/** 客户跟进提醒列表查询参数。 */
|
||||
export type FollowUpReminderPage = {
|
||||
index: number;
|
||||
size: number;
|
||||
storeId?: string;
|
||||
customerId?: string;
|
||||
responsibleUserId?: string;
|
||||
status?: FollowUpReminderStatus;
|
||||
beginRemindAt?: number;
|
||||
endRemindAt?: number;
|
||||
};
|
||||
|
||||
/** 客户跟进提醒创建或修改请求。 */
|
||||
export type FollowUpReminderPayload = {
|
||||
id?: string;
|
||||
storeId?: string;
|
||||
customerId: string;
|
||||
responsibleUserId: string;
|
||||
content: string;
|
||||
remindAt: number;
|
||||
notifyChannelList: FollowUpReminderNotifyChannel[];
|
||||
attachmentList: FollowUpReminderAttachment[];
|
||||
};
|
||||
+4
-1
@@ -1,10 +1,13 @@
|
||||
import type { Attachment } from "timi-web-api";
|
||||
|
||||
/** 照片滚动组件使用的附件展示项。 */
|
||||
/** 媒体选择组件使用的附件展示项。 */
|
||||
export type PhotoItem = {
|
||||
attachment?: Partial<Attachment>;
|
||||
attachType?: string;
|
||||
mimeType?: string;
|
||||
/** 原图地址（预览、播放用），缺省时回退 url */
|
||||
previewUrl?: string;
|
||||
tempFileId?: string;
|
||||
/** 列表缩略图地址；视频附件也填缩略图，临时上传文件填原文件地址 */
|
||||
url: string;
|
||||
};
|
||||
|
||||
@@ -21,6 +21,10 @@ function normalizeUploadImageFile(source: File, compressed: Blob): File {
|
||||
* 压缩上传图片，统一限制到 300 KB。
|
||||
*/
|
||||
export async function compressUploadImage(file: File): Promise<File> {
|
||||
if (!file.type.startsWith("image/")) {
|
||||
return file;
|
||||
}
|
||||
|
||||
const compressedFile = await imageCompression(file, {
|
||||
maxSizeMB: PHOTO_MAX_SIZE_MB,
|
||||
maxWidthOrHeight: PHOTO_MAX_WIDTH_OR_HEIGHT,
|
||||
|
||||
@@ -19,6 +19,13 @@ export const permissionCodes = {
|
||||
update: "GAO:CUSTOMER:UPDATE",
|
||||
delete: "GAO:CUSTOMER:DELETE"
|
||||
},
|
||||
customerFollowUpReminder: {
|
||||
create: "GAO:CUSTOMER_FOLLOW_UP_REMINDER:CREATE",
|
||||
read: "GAO:CUSTOMER_FOLLOW_UP_REMINDER:READ",
|
||||
update: "GAO:CUSTOMER_FOLLOW_UP_REMINDER:UPDATE",
|
||||
delete: "GAO:CUSTOMER_FOLLOW_UP_REMINDER:DELETE",
|
||||
complete: "GAO:CUSTOMER_FOLLOW_UP_REMINDER:COMPLETE"
|
||||
},
|
||||
event: {
|
||||
create: "GAO:EVENT:CREATE",
|
||||
read: "GAO:EVENT:READ",
|
||||
@@ -178,6 +185,11 @@ export const gaoStoreScopePermissionCodes = [
|
||||
permissionCodes.customer.export,
|
||||
permissionCodes.customer.update,
|
||||
permissionCodes.customer.delete,
|
||||
permissionCodes.customerFollowUpReminder.create,
|
||||
permissionCodes.customerFollowUpReminder.read,
|
||||
permissionCodes.customerFollowUpReminder.update,
|
||||
permissionCodes.customerFollowUpReminder.delete,
|
||||
permissionCodes.customerFollowUpReminder.complete,
|
||||
permissionCodes.storeDiary.create,
|
||||
permissionCodes.storeDiary.read,
|
||||
permissionCodes.storeDiary.update,
|
||||
|
||||
+13
-5
@@ -2,14 +2,22 @@ import { AttachmentAPI } from "timi-web-api";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import { compressUploadImageList } from "@/utils/imageCompression";
|
||||
|
||||
/** 压缩并上传照片，返回可直接交给照片滚动组件展示的临时附件。 */
|
||||
/** 压缩图片、直传视频，返回可直接交给媒体选择组件展示的临时附件。 */
|
||||
export async function uploadPhotoList(fileList: File[]): Promise<PhotoItem[]> {
|
||||
const tempFileList = await AttachmentAPI.upload(await compressUploadImageList(fileList));
|
||||
return tempFileList
|
||||
.filter(item => !!item.id)
|
||||
.map(item => ({
|
||||
return tempFileList.flatMap((item, index) => {
|
||||
if (!item.id) {
|
||||
return [];
|
||||
}
|
||||
return [{
|
||||
attachment: {
|
||||
mimeType: fileList[index]?.type,
|
||||
name: fileList[index]?.name
|
||||
},
|
||||
tempFileId: item.id,
|
||||
attachType: "PHOTO",
|
||||
mimeType: fileList[index]?.type,
|
||||
url: AttachmentAPI.getTempReadURL(item.id || "")
|
||||
}));
|
||||
}];
|
||||
});
|
||||
}
|
||||
|
||||
+2
-2
@@ -19,10 +19,10 @@
|
||||
"../timi-web-api/src/*"
|
||||
],
|
||||
"timi-tdesign-mobile": [
|
||||
"../timi-tdesign-mobile/dist/timi-tdesign-mobile/src/index.d.ts"
|
||||
"../timi-tdesign-mobile/src/index.ts"
|
||||
],
|
||||
"timi-tdesign-mobile/*": [
|
||||
"../timi-tdesign-mobile/dist/timi-tdesign-mobile/src/*"
|
||||
"../timi-tdesign-mobile/src/*"
|
||||
],
|
||||
"vue": [
|
||||
"node_modules/vue"
|
||||
|
||||
Reference in New Issue
Block a user