timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix store business day

Browse Source
This commit is contained in:
Timi
2026-08-07 14:40:35 +08:00
parent fab3cd8891
commit 1b1121f052
9 changed files with 871 additions and 525 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/StoreAPI.ts
+5 -1
View File
@@ -22,6 +22,10 @@ async function update(store: Store): Promise<void> {
await axios.post(`${STORE_BASE_URI}/update`, store);
}
async function sort(idList: string[]): Promise<void> {
await axios.post(`${STORE_BASE_URI}/sort`, idList);
}
async function remove(id: string): Promise<void> {
await axios.post(`${STORE_BASE_URI}/delete`, undefined, {
params: { id }
@@ -73,6 +77,7 @@ export default {
detail,
create,
update,
sort,
remove,
exportXSSF,
businessDayList,
@@ -82,4 +87,3 @@ export default {
updateBusinessDay,
removeBusinessDay
};
src/pages/management/CustomerList.vue
+1 -1
View File
@@ -11,7 +11,7 @@
</div>
<section class="total">
<span class="gray">客户总数：</span>
<span class="bold" v-text="pageResult.total" />
<span class="text-bold" v-text="pageResult.total" />
</section>
<t-pull-down-refresh
v-model="isRefreshing"
src/pages/management/StoreBusinessDayCalendar.vue
+437
View File
@@ -0,0 +1,437 @@
<template>
<div
v-if="store"
v-can="permissionCodes.store.read"
class="store-business-day-calendar"
>
<header class="summary bg-white">
<header class="header">
<div class="text-bold" v-text="store.name" />
<t-tag variant="outline" :content="store.code" />
</header>
<div class="address gray">
<span>地址：</span>
<span v-text="store.address" />
</div>
</header>
<div class="calendar-card">
<t-calendar
:key="calendarRenderKey"
class="calendar"
:value="selectedCalendarDate"
:min-date="calendarMinDate"
:max-date="calendarMaxDate"
:format="calendarFormat"
switch-mode="month"
:use-popup="false"
@panel-change="handlePanelChange"
@select="selectCalendarDate"
/>
<div v-if="isCalendarLoading" class="loading" v-text="'正在加载当月营业日'" />
<div v-else-if="!businessDayList.length" class="empty" v-text="'当月暂无营业日配置，点击日期即可新增'" />
</div>
</div>
<t-popup v-model="editorVisible" placement="bottom">
<div class="editor">
<div class="header">
<div class="text-bold" v-text="editingId ? '编辑营业日' : '新增营业日'" />
<div v-text="formModel.dateText" />
</div>
<t-form label-align="left">
<t-form-item label="状态">
<t-radio-group v-model="formModel.openStatus" variant="default-filled">
<t-radio :block="false" borderless value="OPEN">营业</t-radio>
<t-radio :block="false" borderless value="CLOSED">休息</t-radio>
</t-radio-group>
</t-form-item>
<t-form-item
class="reason"
:class="{ 'is-hidden': formModel.openStatus !== 'CLOSED' }"
label="原因"
>
<t-input
v-model.trim="formModel.reason"
:disabled="formModel.openStatus !== 'CLOSED'"
placeholder="休息原因或备注"
borderless
/>
</t-form-item>
</t-form>
<span class="hint orange">切换营业或休息可能影响连续登记统计，系统重排营业日事件序列可能需要较长时间。</span>
<div class="actions">
<t-button
v-if="editingId"
v-can="permissionCodes.store.delete"
class="action"
theme="danger"
variant="outline"
:loading="isDeleting"
@click="confirmRemoveDay"
>删除</t-button>
<t-button
v-can="savePermissionCode"
class="action"
theme="primary"
:loading="isSaving"
@click="saveDay"
>保存</t-button>
</div>
</div>
</t-popup>
</template>
<script setup lang="ts">
import { DialogPlugin, Toast, type CalendarProps, type TDate } from "tdesign-mobile-vue";
import StoreAPI from "@/api/StoreAPI";
import type { Store, StoreBusinessDay, StoreBusinessDayOpenStatus } from "@/types/Store";
import { permissionCodes } from "@/utils/permission";
defineOptions({
name: "StoreBusinessDayCalendar"
});
const route = useRoute();
const storeId = computed(() => String(route.params.id || ""));
// ---------- 门店信息 ----------
const store = ref<Store>();
// ---------- 日历数据 ----------
const today = new Date();
const calendarMinDate = new Date(today.getFullYear() - 2, 0, 1);
const calendarMaxDate = new Date(today.getFullYear() + 2, 11, 31);
const selectedCalendarDate = ref<Date>(today);
const calendarMonth = reactive({
year: today.getFullYear(),
month: today.getMonth() + 1
});
const businessDayList = ref<StoreBusinessDay[]>([]);
const isCalendarLoading = ref(false);
const calendarRenderKey = ref(0);
let calendarRequestId = 0;
const businessDayMap = computed(() => new Map(
businessDayList.value
.filter(item => item.dateValue)
.map(item => [item.dateValue as number, item])
));
const calendarFormat = computed<NonNullable<CalendarProps["format"]>>(() => {
const dayMap = businessDayMap.value;
return (dateItem: TDate) => {
const day = dayMap.get(toDateValue(dateItem.date));
if (!day) {
return dateItem;
}
return {
...dateItem,
className: `business-day-${day.openStatus!.toLowerCase()}`,
suffix: day.openStatus === "OPEN" ? "营" : "休"
};
};
});
async function loadCalendar(year: number, month: number): Promise<void> {
const requestId = ++calendarRequestId;
isCalendarLoading.value = true;
try {
const beginDate = new Date(year, month - 1, 1);
const endDate = new Date(year, month, 0);
const result = await StoreAPI.businessDayCalendar(storeId.value, toDateValue(beginDate), toDateValue(endDate));
if (requestId === calendarRequestId) {
businessDayList.value = result || [];
calendarRenderKey.value += 1;
}
} finally {
if (requestId === calendarRequestId) {
isCalendarLoading.value = false;
}
}
}
async function handlePanelChange(context: { year: number; month: number }): Promise<void> {
if (context.year === calendarMonth.year && context.month === calendarMonth.month) {
return;
}
calendarMonth.year = context.year;
calendarMonth.month = context.month;
selectedCalendarDate.value = new Date(context.year, context.month - 1, 1);
try {
await loadCalendar(context.year, context.month);
} catch {
Toast.error("营业日加载失败");
}
}
// ---------- 编辑 ----------
const editorVisible = ref(false);
const isSaving = ref(false);
const isDeleting = ref(false);
const editingId = ref("");
const formModel = reactive({
dateText: "",
openStatus: "OPEN" as StoreBusinessDayOpenStatus,
reason: "正常休息"
});
const savePermissionCode = computed(() => editingId.value ? permissionCodes.store.update : permissionCodes.store.create);
function openDayEditor(day?: StoreBusinessDay, dateValue = toDateValue(new Date())): void {
editingId.value = day?.id || "";
Object.assign(formModel, {
dateText: formatDateValue(day?.dateValue || dateValue),
openStatus: day?.openStatus || "OPEN",
reason: day ? day.reason : "正常休息"
});
editorVisible.value = true;
}
function selectCalendarDate(date: Date): void {
selectedCalendarDate.value = date;
const dateValue = toDateValue(date);
openDayEditor(businessDayMap.value.get(dateValue), dateValue);
}
async function saveDay(): Promise<void> {
if (!validateDay() || isSaving.value) {
return;
}
isSaving.value = true;
try {
const day: StoreBusinessDay = {
id: editingId.value || undefined,
storeId: storeId.value,
dateValue: parseDateValue(formModel.dateText),
openStatus: formModel.openStatus,
reason: formModel.openStatus === "CLOSED" ? formModel.reason || undefined : undefined
};
if (editingId.value) {
await StoreAPI.updateBusinessDay(day);
} else {
await StoreAPI.createBusinessDay(day);
}
Toast.success("营业日已保存");
editorVisible.value = false;
await loadCalendar(calendarMonth.year, calendarMonth.month);
} catch {
Toast.error("营业日保存失败");
} finally {
isSaving.value = false;
}
}
function validateDay(): boolean {
if (!formModel.dateText) {
Toast.warning("请选择日期");
return false;
}
return true;
}
// ---------- 删除 ----------
function confirmRemoveDay(): void {
if (!editingId.value || isDeleting.value) {
return;
}
const dayId = editingId.value;
const dialog = DialogPlugin.confirm({
title: "删除营业日",
content: `确定删除 ${formModel.dateText} 的营业日配置吗？已有登记记录的营业日系统会拒绝删除`,
cancelBtn: "取消",
confirmBtn: "删除",
onCancel() {
dialog.destroy();
},
async onConfirm() {
dialog.destroy();
await removeDay(dayId);
}
});
}
async function removeDay(id: string): Promise<void> {
isDeleting.value = true;
try {
await StoreAPI.removeBusinessDay(id);
Toast.success("营业日已删除");
editorVisible.value = false;
await loadCalendar(calendarMonth.year, calendarMonth.month);
} catch {
Toast.error("营业日删除失败");
} finally {
isDeleting.value = false;
}
}
// ---------- 日期 ----------
function formatDateValue(value?: number): string {
if (!value) {
return "";
}
const text = String(value);
return `${text.slice(0, 4)}-${text.slice(4, 6)}-${text.slice(6, 8)}`;
}
function parseDateValue(text: string): number {
return Number(text.replaceAll("-", ""));
}
function toDateValue(date: Date): number {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
return Number(`${year}${month}${day}`);
}
onMounted(async () => {
try {
const [currentStore] = await Promise.all([
StoreAPI.detail(storeId.value),
loadCalendar(calendarMonth.year, calendarMonth.month)
]);
store.value = currentStore;
} catch {
Toast.error("营业日数据加载失败");
}
});
</script>
<style scoped lang="less">
.store-business-day-calendar {
gap: .75rem;
display: grid;
padding: calc(var(--app-nav-height) + 1rem) 1rem 6rem;
.summary {
gap: .75rem;
display: flex;
padding: .75rem;
border-radius: .75rem;
flex-direction: column;
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
.address {
font-size: .875rem;
}
}
.legend {
gap: .375rem;
display: flex;
flex: none;
}
.calendar-card {
:deep(.t-calendar-header) {
padding-top: 8px;
}
:deep(.t-calendar) {
z-index: 1;
overflow: hidden;
border-radius: .75rem;
&__title {
display: none;
}
&__months {
height: unset;
}
&__dates-item {
height: 40px;
align-items: unset;
&.business-day-open {
--td-calendar-item-suffix-color: var(--td-brand-color);
}
&.business-day-closed .t-calendar__dates-item-suffix {
--td-calendar-item-suffix-color: var(--td-error-color);
}
}
}
:deep(.business-day-open),
:deep(.business-day-closed) {
font-weight: 700;
}
:deep(.business-day-closed .t-calendar__dates-item-suffix) {
}
}
.loading,
.empty {
color: #52607a;
padding: .75rem 1rem;
font-size: .8125rem;
text-align: center;
}
}
.editor {
gap: .75rem;
display: flex;
padding: 1rem;
flex-direction: column;
.header {
display: flex;
justify-content: space-between;
}
.reason.is-hidden {
visibility: hidden;
}
.hint {
text-indent: 2em;
}
.actions {
gap: .75rem;
display: flex;
.action {
flex: 1;
}
}
}
:global(html.theme-dark) {
.store-business-day-calendar {
.summary,
.calendar-card,
.editor {
background: #1e293b;
}
.summary span,
.loading,
.empty,
.editor .hint {
color: #94a3b8;
}
.summary strong,
.editor h3 {
color: #e2e8f0;
}
}
}
</style>
src/pages/management/StoreBusinessDayList.vue
-406
View File
@@ -1,406 +0,0 @@
<template>
<div v-can="permissionCodes.store.read" class="business-day-list">
<header class="summary">
<div>
<strong v-text="storeName" />
<span v-text="storeCodeText" />
</div>
<t-tag theme="default" variant="outline" content="无记录表示未配置" />
</header>
<t-pull-down-refresh
v-model="isRefreshing"
:refresh-timeout="30000"
@refresh="refresh"
@scrolltolower="fetch"
>
<div v-for="item in pageResult.list" :key="item.id" class="item">
<div class="content" @click="openDayEditor(item)">
<div class="header">
<span class="date" v-text="formatDateValue(item.dateValue)" />
<t-tag size="small" :theme="getBusinessDayStatusTheme(item.openStatus)" variant="outline" :content="getBusinessDayStatusText(item.openStatus)" />
</div>
<span class="meta" v-text="item.openStatus === 'OPEN' ? `营业日序号：${item.businessDayNo || '-'}` : `原因：${item.reason || '-'}`" />
</div>
<t-button v-can="permissionCodes.store.delete" class="delete" shape="circle" theme="danger" variant="text" @click="confirmRemoveDay(item)">
<t-icon name="delete" />
</t-button>
</div>
<div v-if="!pageResult.list.length" class="empty-block" v-text="isLoading ? '正在加载营业日' : '暂无已配置营业日'" />
<div v-if="pageResult.list.length" class="load-state" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" />
</t-pull-down-refresh>
<t-button v-can="permissionCodes.store.create" class="add" theme="primary" @click="openDayEditor()">
<template #icon>
<t-icon name="add" />
</template>
新增营业日
</t-button>
<t-popup v-model="editorVisible" placement="bottom">
<div class="editor">
<h3 v-text="editingId ? '编辑营业日' : '新增营业日'" />
<t-form label-align="left">
<t-form-item label="日期">
<button class="picker-btn" type="button" @click="openDatePicker">
<span v-text="formModel.dateText || '选择日期'" />
<t-icon name="calendar" />
</button>
</t-form-item>
<t-form-item label="状态">
<t-radio-group v-model="formModel.openStatus" variant="default-filled">
<t-radio :block="false" borderless value="OPEN">营业</t-radio>
<t-radio :block="false" borderless value="CLOSED">休息</t-radio>
</t-radio-group>
</t-form-item>
<t-form-item label="原因">
<t-input v-model.trim="formModel.reason" placeholder="休息原因或备注" borderless />
</t-form-item>
</t-form>
<p class="hint">切换营业或休息可能影响连续登记统计，营业日序号由后端自动维护。</p>
<t-button v-can="savePermissionCode" theme="primary" block :loading="isSaving" @click="saveDay">保存</t-button>
</div>
</t-popup>
<t-popup v-model="datePickerVisible" placement="bottom">
<t-date-time-picker
v-if="datePickerVisible"
v-model="datePickerDraft"
:mode="['date']"
format="YYYY-MM-DD"
title="营业日期"
@cancel="datePickerVisible = false"
@confirm="confirmDatePicker"
/>
</t-popup>
</div>
</template>
<script setup lang="ts">
import { DialogPlugin, Toast } from "tdesign-mobile-vue";
import { type Page, type PageResult } from "timi-web";
import StoreAPI from "@/api/StoreAPI";
import type { Store, StoreBusinessDay, StoreBusinessDayOpenStatus } from "@/types/Store";
import { permissionCodes } from "@/utils/permission";
import { getBusinessDayStatusText, getBusinessDayStatusTheme } from "@/utils/store";
defineOptions({
name: "StoreBusinessDayList"
});
const route = useRoute();
const storeId = computed(() => String(route.params.id || ""));
// ---------- 门店信息 ----------
const store = ref<Store>();
const storeName = computed(() => store.value?.name || "门店");
const storeCodeText = computed(() => `编码：${store.value?.code || "-"}`);
// ---------- 列表数据 ----------
const isRefreshing = ref(false);
const isLoading = ref(false);
const isNoMore = ref(false);
const page = reactive<Page<StoreBusinessDay>>({
index: 0,
size: 20,
equalsExample: {
storeId: storeId.value
},
orderMap: {
dateValue: "DESC"
}
});
const pageResult = reactive<PageResult<StoreBusinessDay>>({
total: 0,
list: []
});
async function refresh(): Promise<void> {
isRefreshing.value = true;
try {
page.index = 0;
page.equalsExample = {
storeId: storeId.value
};
pageResult.total = 0;
pageResult.list = [];
isNoMore.value = false;
await fetch();
} finally {
isRefreshing.value = false;
}
}
async function fetch(): Promise<void> {
if (isLoading.value || isNoMore.value) {
return;
}
isLoading.value = true;
try {
const result = await StoreAPI.businessDayList(page);
pageResult.total = result.total || 0;
pageResult.list = pageResult.list.concat(result.list || []);
page.index += 1;
isNoMore.value = pageResult.list.length >= pageResult.total || (result.list || []).length < page.size;
} finally {
isLoading.value = false;
}
}
// ---------- 编辑 ----------
const editorVisible = ref(false);
const datePickerVisible = ref(false);
const datePickerDraft = ref("");
const isSaving = ref(false);
const editingId = ref("");
const formModel = reactive({
dateText: "",
openStatus: "OPEN" as StoreBusinessDayOpenStatus,
reason: ""
});
const savePermissionCode = computed(() => editingId.value ? permissionCodes.store.update : permissionCodes.store.create);
function openDayEditor(day?: StoreBusinessDay): void {
editingId.value = day?.id || "";
Object.assign(formModel, {
dateText: day?.dateValue ? formatDateValue(day.dateValue) : formatDateValue(toDateValue(new Date())),
openStatus: day?.openStatus || "OPEN",
reason: day?.reason || ""
});
editorVisible.value = true;
}
function openDatePicker(): void {
datePickerDraft.value = formModel.dateText;
datePickerVisible.value = true;
}
function confirmDatePicker(): void {
formModel.dateText = datePickerDraft.value;
datePickerVisible.value = false;
}
async function saveDay(): Promise<void> {
if (!validateDay()) {
return;
}
isSaving.value = true;
try {
const day: StoreBusinessDay = {
id: editingId.value || undefined,
storeId: storeId.value,
dateValue: parseDateValue(formModel.dateText),
openStatus: formModel.openStatus,
reason: formModel.reason || undefined
};
if (editingId.value) {
await StoreAPI.updateBusinessDay(day);
} else {
await StoreAPI.createBusinessDay(day);
}
Toast.success("营业日已保存");
editorVisible.value = false;
await refresh();
} finally {
isSaving.value = false;
}
}
function validateDay(): boolean {
if (!formModel.dateText) {
Toast.warning("请选择日期");
return false;
}
return true;
}
// ---------- 删除 ----------
async function confirmRemoveDay(day: StoreBusinessDay): Promise<void> {
if (!day.id) {
return;
}
const dayId = day.id;
const dialog = DialogPlugin.confirm({
title: "删除营业日",
content: `确定删除 ${formatDateValue(day.dateValue)} 的营业日配置吗？已有登记记录的营业日后端会拒绝删除。`,
cancelBtn: "取消",
confirmBtn: "删除",
onCancel() {
dialog.destroy();
},
async onConfirm() {
dialog.destroy();
await removeDay(dayId);
}
});
}
async function removeDay(id: string): Promise<void> {
await StoreAPI.removeBusinessDay(id);
Toast.success("营业日已删除");
await refresh();
}
// ---------- 日期 ----------
function formatDateValue(value?: number): string {
if (!value) {
return "";
}
const text = String(value);
return `${text.slice(0, 4)}-${text.slice(4, 6)}-${text.slice(6, 8)}`;
}
function parseDateValue(text: string): number {
return Number(text.replaceAll("-", ""));
}
function toDateValue(date: Date): number {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
return Number(`${year}${month}${day}`);
}
onMounted(async () => {
try {
store.value = await StoreAPI.detail(storeId.value);
await fetch();
} catch {
Toast.error("营业日数据加载失败");
}
});
</script>
<style scoped lang="less">
.business-day-list {
gap: .75rem;
display: grid;
padding: calc(var(--app-nav-height) + 1rem) 1rem 6rem 1rem;
.summary {
display: flex;
padding: .75rem;
align-items: center;
background: #fff;
border-radius: .75rem;
justify-content: space-between;
div {
gap: .25rem;
display: flex;
flex-direction: column;
}
span {
color: #52607a;
font-size: .8125rem;
}
}
.item {
gap: .5rem;
display: flex;
padding: .75rem;
align-items: center;
border: 1px solid var(--td-border-level-1-color);
background: #fff;
border-radius: .75rem;
.content {
gap: .375rem;
flex: 1;
display: flex;
min-width: 0;
flex-direction: column;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
.date {
font-size: 1rem;
font-weight: 700;
}
.meta {
color: #52607a;
font-size: .875rem;
}
.delete {
flex: none;
}
}
.add {
left: 1rem;
right: 1rem;
bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
position: fixed;
}
.editor {
gap: .75rem;
display: flex;
padding: 1rem;
background: #fff;
flex-direction: column;
h3 {
margin: 0;
font-size: 1.125rem;
}
.hint {
margin: 0;
color: #52607a;
font-size: .8125rem;
line-height: 1.6;
}
}
.picker-btn {
gap: .5rem;
width: 100%;
border: 0;
display: flex;
padding: 0;
color: inherit;
background: transparent;
align-items: center;
justify-content: space-between;
font: inherit;
}
}
:global(html.theme-dark) {
.business-day-list {
.summary,
.item,
.editor {
background: #1e293b;
}
.summary span,
.item .meta,
.editor .hint {
color: #94a3b8;
}
.date,
.summary strong,
.editor h3 {
color: #e2e8f0;
}
}
}
</style>
src/pages/management/StoreEdit.vue
+35 -74
View File
@@ -7,11 +7,8 @@
<t-form-item label="名称">
<t-input v-model.trim="formModel.name" placeholder="门店名称" borderless />
</t-form-item>
<t-form-item label="状态">
<button class="picker-btn" type="button" @click="openStatusPicker">
<span v-text="getStoreStatusText(formModel.status)" />
<t-icon name="chevron-right" />
</button>
<t-form-item label="启用" content-align="right">
<t-switch v-model="formModel.status" :custom-value="['ACTIVE', 'INACTIVE']" />
</t-form-item>
<t-form-item label="电话">
<t-input v-model.trim="formModel.telephone" type="tel" placeholder="联系电话" borderless />
@@ -19,29 +16,29 @@
<t-form-item label="地址">
<t-input v-model.trim="formModel.address" placeholder="门店地址" borderless />
</t-form-item>
<t-form-item label="排序">
<t-input v-model.trim="formModel.sortText" type="number" placeholder="排序值" borderless />
</t-form-item>
<t-form-item label="备注">
<t-textarea v-model.trim="formModel.remark" class="textarea" placeholder="备注" autosize borderless />
</t-form-item>
</t-form>
<div v-if="!isCreateMode" class="links">
<t-cell-group v-if="!isCreateMode" theme="card">
<t-cell title="营业日管理" note="配置营业或休息日期" arrow hover @click="router.push(`/management/stores/${routeId}/business-days`)" />
</div>
</t-cell-group>
<div class="actions">
<t-button v-if="!isCreateMode" v-can="permissionCodes.store.delete" theme="danger" :loading="isRemoving" @click="confirmRemoveStore">删除</t-button>
<t-button theme="primary" :loading="isSaving" @click="saveStore">保存</t-button>
<t-button
v-if="!isCreateMode"
v-can="permissionCodes.store.delete"
class="action"
theme="danger"
:loading="isRemoving"
@click="confirmRemoveStore"
>删除</t-button>
<t-button
class="action"
theme="primary"
:loading="isSaving"
@click="saveStore"
>保存</t-button>
</div>
<t-popup v-model="statusPickerVisible" placement="bottom">
<t-picker
v-model="statusPickerDraft"
:columns="statusPickerColumns"
title="门店状态"
@cancel="statusPickerVisible = false"
@confirm="confirmStatusPicker"
/>
</t-popup>
</div>
</template>
@@ -50,9 +47,6 @@ import { DialogPlugin, Toast } from "tdesign-mobile-vue";
import StoreAPI from "@/api/StoreAPI";
import type { Store, StoreStatus } from "@/types/Store";
import { permissionCodes } from "@/utils/permission";
import { getStoreStatusText } from "@/utils/store";
type PickerValue = string | number;
defineOptions({
name: "StoreEdit"
@@ -78,31 +72,9 @@ const formModel = reactive({
status: "ACTIVE" as StoreStatus,
telephone: "",
address: "",
remark: "",
sortText: "0"
remark: ""
});
// ---------- 状态选择 ----------
const statusPickerVisible = ref(false);
const statusPickerDraft = ref<PickerValue[]>(["ACTIVE"]);
const statusPickerColumns = [
[
{ label: "启用", value: "ACTIVE" },
{ label: "停用", value: "INACTIVE" }
]
];
function openStatusPicker(): void {
statusPickerDraft.value = [formModel.status];
statusPickerVisible.value = true;
}
function confirmStatusPicker(): void {
const nextStatus = String(statusPickerDraft.value[0] || "ACTIVE") as StoreStatus;
formModel.status = nextStatus;
statusPickerVisible.value = false;
}
const sortValue = ref(0);
// ---------- 页面数据 ----------
@@ -119,9 +91,9 @@ async function fillForm(): Promise<void> {
status: current.status || "ACTIVE",
telephone: current.telephone || "",
address: current.address || "",
remark: current.remark || "",
sortText: String(current.sort ?? 0)
remark: current.remark || ""
});
sortValue.value = current.sort ?? 0;
}
// ---------- 保存 ----------
@@ -141,14 +113,15 @@ async function saveStore(): Promise<void> {
telephone: formModel.telephone || undefined,
address: formModel.address || undefined,
remark: formModel.remark || undefined,
sort: Number(formModel.sortText || 0)
sort: sortValue.value
};
const savedId = isCreateMode.value ? await StoreAPI.create(store) : formModel.id;
if (!isCreateMode.value) {
if (isCreateMode.value) {
await StoreAPI.create(store);
} else {
await StoreAPI.update(store);
}
Toast.success("门店已保存");
await router.replace(`/management/stores/${savedId}`);
await router.replace("/management/stores");
} finally {
isSaving.value = false;
}
@@ -163,10 +136,6 @@ function validateForm(): boolean {
Toast.warning("请填写门店名称");
return false;
}
if (Number.isNaN(Number(formModel.sortText || 0))) {
Toast.warning("排序值必须是数字");
return false;
}
return true;
}
@@ -216,7 +185,10 @@ onMounted(async () => {
<style scoped lang="less">
.store-edit {
gap: 1rem;
padding: calc(var(--app-nav-height) + 1rem) 0 6rem 0;
display: flex;
flex-direction: column;
.form {
border-radius: .75rem;
@@ -226,19 +198,6 @@ onMounted(async () => {
width: 100%;
}
.picker-btn {
gap: .5rem;
width: 100%;
border: 0;
display: flex;
padding: 0;
color: inherit;
background: transparent;
align-items: center;
justify-content: space-between;
font: inherit;
}
.links {
margin: 1rem 0;
}
@@ -248,10 +207,12 @@ onMounted(async () => {
left: 1rem;
right: 1rem;
bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
display: grid;
display: flex;
position: fixed;
grid-template-columns: 1fr 1fr;
.action {
flex: 1;
}
}
}
</style>
src/pages/management/StoreList.vue
+41 -40
View File
@@ -6,20 +6,30 @@
@refresh="refresh"
@scrolltolower="fetch"
>
<div v-for="item in pageResult.list" :key="item.id" class="item" @click="toEdit(item)">
<div class="content">
<div class="header">
<span class="name" v-text="item.name || '未命名门店'" />
<t-tag size="small" :theme="getStoreStatusTheme(item.status)" variant="outline" :content="getStoreStatusText(item.status)" />
</div>
<span class="meta" v-text="`编码：${item.code || '-'}`" />
<span class="meta" v-text="item.telephone ? `电话：${item.telephone}` : '电话：-'" />
<span class="meta" v-text="item.address ? `地址：${item.address}` : '地址：-'" />
</div>
<t-icon name="chevron-right" size="1.25rem" />
</div>
<t-cell-group theme="card">
<t-cell
class="item"
v-for="item in pageResult.list"
:key="item.id"
arrow
@click="toEdit(item)"
>
<template #title>
<div class="header">
<div class="text-bold" v-text="item.name || '未命名门店'"></div>
<t-tag size="small" :theme="getStoreStatusTheme(item.status)" variant="outline" :content="getStoreStatusText(item.status)" />
</div>
</template>
<template #description>
<div class="description">
<span class="gray" v-text="item.telephone ? `电话：${item.telephone}` : '电话：-'" />
<span class="gray" v-text="item.address ? `地址：${item.address}` : '地址：-'" />
</div>
</template>
</t-cell>
</t-cell-group>
<div v-if="!pageResult.list.length" class="empty-block" v-text="isLoading ? '正在加载门店' : '暂无门店'" />
<div v-if="pageResult.list.length" class="load-state" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" />
<div v-if="pageResult.list.length" class="load-state" v-text="isNoMore ? '已加载全部门店' : '上拉加载更多'" />
</t-pull-down-refresh>
<div class="actions">
<t-button v-can="permissionCodes.store.export" theme="default" :loading="isExporting" @click="exportExcel">
@@ -40,8 +50,9 @@
<script setup lang="ts">
import { Toast } from "tdesign-mobile-vue";
import { Time, Toolkit, type Page, type PageResult } from "timi-web";
import { Time, Toolkit, type Page, type PageResult, useUserStore } from "timi-web";
import StoreAPI from "@/api/StoreAPI";
import { useNavBarStore } from "@/store/navBarStore";
import type { Store } from "@/types/Store";
import { permissionCodes } from "@/utils/permission";
import { getStoreStatusText, getStoreStatusTheme } from "@/utils/store";
@@ -51,6 +62,8 @@ defineOptions({
});
const router = useRouter();
const navBarStore = useNavBarStore();
const userStore = useUserStore();
// ---------- 列表数据 ----------
@@ -132,52 +145,41 @@ async function toEdit(item: Store): Promise<void> {
}
onMounted(async () => {
navBarStore.clearRight();
if (userStore.hasPermissions(permissionCodes.store.update)) {
navBarStore.setRightText("排序", "var(--td-brand-color)", () => {
router.push("/management/stores/sort");
});
}
try {
await fetch();
} catch {
Toast.error("门店列表加载失败");
}
});
onUnmounted(() => {
navBarStore.clearRight();
});
</script>
<style scoped lang="less">
.store-list {
gap: .75rem;
display: grid;
padding: calc(var(--app-nav-height) + 1rem) 1rem 6rem 1rem;
padding: calc(var(--app-nav-height) + 1rem) 0 6rem 0;
.item {
gap: .75rem;
display: flex;
padding: .75rem;
align-items: center;
border: 1px solid var(--td-border-level-1-color);
background: #fff;
border-radius: .75rem;
.content {
gap: .375rem;
flex: 1;
display: flex;
min-width: 0;
flex-direction: column;
}
.header {
gap: .5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.name {
font-size: 1rem;
font-weight: 700;
}
.meta {
color: #52607a;
font-size: .875rem;
.description {
display: flex;
flex-direction: column;
}
}
@@ -208,4 +210,3 @@ onMounted(async () => {
}
}
</style>
src/pages/management/StoreSort.vue
+327
View File
@@ -0,0 +1,327 @@
<template>
<div v-can="permissionCodes.store.update" class="store-sort">
<div class="tip" v-text="'按住右侧拖动手柄调整门店顺序，保存后生效'" />
<div ref="sortListRef" class="items">
<t-cell-group v-if="storeList.length" theme="card">
<t-cell
v-for="(item, index) in storeList"
:key="item.id"
class="cell"
:title="item.name || '未命名门店'"
:description="`编码：${item.code || '-'}`"
:class="{ dragging: draggingIndex === index }"
>
<template #note>
<t-tag :theme="getStatusTheme(item.status)" variant="outline" :content="getStatusText(item.status)" />
</template>
<template #rightIcon>
<t-icon
class="handle"
role="button"
name="move"
aria-label="拖动排序"
@pointerdown.stop="startDrag($event, index)"
@pointermove.stop="moveDrag"
@pointerup.stop="finishDrag"
@pointercancel.stop="finishDrag"
@lostpointercapture.stop="finishDrag"
@touchstart.stop="startTouchDrag($event, index)"
@touchmove.stop="moveTouchDrag"
@touchend.stop="finishTouchDrag"
@touchcancel.stop="finishTouchDrag"
/>
</template>
</t-cell>
</t-cell-group>
<div v-else class="empty-block" v-text="isLoading ? '正在加载门店' : '暂无门店'" />
</div>
<t-button
class="save"
theme="primary"
:loading="isSaving"
:disabled="!sortDirty || isSaving || isLoading"
@click="saveSort"
>
保存排序
</t-button>
</div>
</template>
<script setup lang="ts">
import { Toast, type TagProps } from "tdesign-mobile-vue";
import StoreAPI from "@/api/StoreAPI";
import { useNavBarStore } from "@/store/navBarStore";
import type { Store, StoreStatus } from "@/types/Store";
import { permissionCodes } from "@/utils/permission";
defineOptions({
name: "StoreSort"
});
const navBarStore = useNavBarStore();
// ---------- 列表数据 ----------
const storeList = ref<Store[]>([]);
const sortListRef = ref<HTMLElement>();
const isLoading = ref(false);
const isSaving = ref(false);
const sortDirty = ref(false);
// ---------- 拖拽状态 ----------
const draggingIndex = ref(-1);
let pointerId: number | undefined;
let pointerStartY = 0;
let pointerMoved = false;
let pointerTarget: HTMLElement | undefined;
let dragInputType: "pointer" | "touch" | undefined;
// ---------- 展示文案 ----------
function getStatusText(status?: StoreStatus): string {
return status === "ACTIVE" ? "启用" : "停用";
}
function getStatusTheme(status?: StoreStatus): TagProps["theme"] {
return status === "ACTIVE" ? "primary" : "default";
}
// ---------- 拖拽排序 ----------
function resolveDropIndex(clientY: number): number {
const elements = sortListRef.value?.querySelectorAll<HTMLElement>(".cell");
if (!elements?.length) {
return -1;
}
for (let index = 0; index < elements.length; index++) {
const rect = elements[index].getBoundingClientRect();
if (clientY < rect.top + rect.height / 2) {
return index;
}
}
return elements.length - 1;
}
function beginDrag(index: number, clientY: number, target: EventTarget | null): void {
pointerStartY = clientY;
pointerMoved = false;
draggingIndex.value = index;
pointerTarget = target instanceof HTMLElement ? target : undefined;
}
function moveDragAt(clientY: number): void {
if (0 > draggingIndex.value) {
return;
}
if (!pointerMoved && 8 > Math.abs(clientY - pointerStartY)) {
return;
}
pointerMoved = true;
const targetIndex = resolveDropIndex(clientY);
if (0 > targetIndex || targetIndex === draggingIndex.value) {
return;
}
const [item] = storeList.value.splice(draggingIndex.value, 1);
storeList.value.splice(targetIndex, 0, item);
draggingIndex.value = targetIndex;
sortDirty.value = true;
}
function finishDragState(): void {
if (pointerMoved) {
sortDirty.value = true;
}
pointerId = undefined;
pointerTarget = undefined;
dragInputType = undefined;
draggingIndex.value = -1;
}
function startDrag(event: PointerEvent, index: number): void {
if (isSaving.value || isLoading.value || dragInputType || !event.isPrimary || event.button !== 0) {
return;
}
event.preventDefault();
pointerId = event.pointerId;
dragInputType = "pointer";
beginDrag(index, event.clientY, event.currentTarget);
pointerTarget?.setPointerCapture(event.pointerId);
}
function moveDrag(event: PointerEvent): void {
if (dragInputType !== "pointer" || pointerId !== event.pointerId || 0 > draggingIndex.value) {
return;
}
event.preventDefault();
moveDragAt(event.clientY);
}
function finishDrag(event: PointerEvent): void {
if (dragInputType !== "pointer" || pointerId !== event.pointerId) {
return;
}
if (pointerTarget?.hasPointerCapture(event.pointerId)) {
pointerTarget.releasePointerCapture(event.pointerId);
}
finishDragState();
}
function startTouchDrag(event: TouchEvent, index: number): void {
if (isSaving.value || isLoading.value || dragInputType || event.touches.length !== 1) {
return;
}
event.preventDefault();
const touch = event.touches[0];
pointerId = touch.identifier;
dragInputType = "touch";
beginDrag(index, touch.clientY, event.currentTarget);
}
function moveTouchDrag(event: TouchEvent): void {
if (dragInputType !== "touch" || pointerId === undefined || 0 > draggingIndex.value || event.touches.length !== 1) {
return;
}
event.preventDefault();
moveDragAt(event.touches[0].clientY);
}
function finishTouchDrag(event: TouchEvent): void {
if (dragInputType !== "touch" || pointerId === undefined) {
return;
}
const touch = event.changedTouches[0];
if (touch && touch.identifier !== pointerId) {
return;
}
finishDragState();
}
// ---------- 保存 ----------
async function saveSort(): Promise<void> {
if (!sortDirty.value || isSaving.value) {
return;
}
isSaving.value = true;
try {
const idList = storeList.value
.map(item => item.id)
.filter((id): id is string => Boolean(id));
await StoreAPI.sort(idList);
storeList.value.forEach((item, index) => {
item.sort = index;
});
sortDirty.value = false;
Toast.success("门店排序已保存");
} catch {
Toast.error("门店排序保存失败");
} finally {
isSaving.value = false;
}
}
// ---------- 页面数据 ----------
async function loadData(): Promise<void> {
isLoading.value = true;
try {
const result = await StoreAPI.list({
index: 0,
size: 100,
orderMap: {
sort: "ASC",
createdAt: "DESC"
}
});
storeList.value = result.list || [];
sortDirty.value = false;
} finally {
isLoading.value = false;
}
}
onMounted(async () => {
navBarStore.clearRight();
try {
await loadData();
} catch {
Toast.error("门店加载失败");
}
});
onUnmounted(() => {
navBarStore.clearRight();
});
</script>
<style scoped lang="less">
.store-sort {
padding: calc(var(--app-nav-height) + 1rem) 0 6rem;
.tip {
color: #52607a;
padding: 0 1rem .75rem;
font-size: .8125rem;
}
.items {
.cell {
position: relative;
&.dragging {
z-index: 1;
box-shadow: 0 .5rem 1rem rgba(15, 23, 42, .16);
}
.handle {
color: #52607a;
cursor: grab;
}
&.dragging,
&.dragging * {
touch-action: none;
}
}
}
.empty-block {
color: #52607a;
padding: 2rem 1rem;
text-align: center;
}
.save {
left: 1rem;
right: 1rem;
bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
position: fixed;
}
}
:global(html.theme-dark) {
.store-sort {
.tip,
.empty-block,
.handle {
color: #94a3b8;
}
.cell.dragging {
box-shadow: 0 .5rem 1rem rgba(2, 6, 23, .28);
}
}
}
</style>
src/router/routes/managementRoutes.ts
+18 -3
View File
@@ -3,9 +3,10 @@ import ManagementSettings from "@/pages/management/ManagementSettings.vue";
import ManagementProfile from "@/pages/management/ManagementProfile.vue";
import ManagementPassword from "@/pages/management/ManagementPassword.vue";
import ManagementQrCode from "@/pages/management/ManagementQrCode.vue";
import StoreBusinessDayList from "@/pages/management/StoreBusinessDayList.vue";
import StoreBusinessDayCalendar from "@/pages/management/StoreBusinessDayCalendar.vue";
import StoreEdit from "@/pages/management/StoreEdit.vue";
import StoreList from "@/pages/management/StoreList.vue";
import StoreSort from "@/pages/management/StoreSort.vue";
export const storeRoutes: RouteRecordRaw[] = [
{
@@ -36,6 +37,20 @@ export const storeRoutes: RouteRecordRaw[] = [
darkBodyBackground: "#10161f"
}
},
{
path: "/management/stores/sort",
name: "StoreSort",
component: StoreSort,
meta: {
depth: 4,
navBarVisible: true,
navBarCanBack: true,
navBarTitle: "门店排序",
tabBarVisible: false,
bodyBackground: "#F5F5F8",
darkBodyBackground: "#10161f"
}
},
{
path: "/management/stores/:id",
name: "StoreEdit",
@@ -52,8 +67,8 @@ export const storeRoutes: RouteRecordRaw[] = [
},
{
path: "/management/stores/:id/business-days",
name: "StoreBusinessDayList",
component: StoreBusinessDayList,
name: "StoreBusinessDayCalendar",
component: StoreBusinessDayCalendar,
meta: {
depth: 5,
navBarVisible: true,
src/styles/global.less
+7
View File
@@ -37,3 +37,10 @@ html.theme-dark body {
.t-form__label {
color: #555;
}
.load-state {
color: var(--tui-gray);
padding: .75rem;
text-align: center;
font-size: .875rem;
}