update AIChart, customer followup, media selector
This commit is contained in:
Timi
@@ -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>
|
||||
Reference in New Issue
Block a user