gao-customer-h5/src/pages/user/UserEdit.vue

<template>
	<div v-can="savePermissionCode" class="user-edit">
		<t-form class="form" label-align="left">
			<t-form-item label="姓名">
				<t-input v-model.trim="formModel.name" placeholder="姓名" borderless />
			</t-form-item>
			<t-form-item v-if="isCreateMode" label="手机号">
				<t-input v-model.trim="formModel.mobile" type="tel" placeholder="手机号" borderless />
			</t-form-item>
			<t-form-item v-if="isCreateMode" label="密码">
				<t-input v-model.trim="formModel.password" type="password" placeholder="密码" borderless />
			</t-form-item>
			<t-form-item v-if="isGlobalManager" label="门店" arrow @click="openStorePicker">
				<div class="picker-text" v-text="selectedStoreName" />
			</t-form-item>
		</t-form>
	</div>
	<t-popup v-model="storePickerVisible" placement="bottom">
		<t-picker
			v-model="storePickerDraft"
			:columns="storePickerColumns"
			title="选择门店"
			@cancel="storePickerVisible = false"
			@confirm="confirmStorePicker"
		/>
	</t-popup>
</template>

<script setup lang="ts">
import { Message } from "@/utils/message";
import { useUserStore } from "timi-web-api";
import ManagedUserAPI from "@/api/ManagedUserAPI";
import { useCurrentStoreStore } from "@/store/currentStoreStore";
import { useNavBarStore } from "@/store/navBarStore";
import type { ManagedUser } from "@/types/ManagedUser";
import { gaoRoleCodes, permissionCodes } from "@/utils/permission";

type PickerValue = string | number;

defineOptions({
	name: "UserEdit"
});

const route = useRoute();
const router = useRouter();
const navBarStore = useNavBarStore();
const userStore = useUserStore();
const currentStoreStore = useCurrentStoreStore();

const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));

// ---------- 表单 ----------

const currentManagedUser = ref<ManagedUser>();
const isSaving = ref(false);
const formModel = reactive({
	id: "",
	userId: "",
	storeId: "",
	name: "",
	mobile: "",
	password: ""
});
const isCreateMode = computed(() => !String(route.params.id || ""));
const savePermissionCode = computed(() => isCreateMode.value ? permissionCodes.user.create : permissionCodes.user.update);

// ---------- 门店选择 ----------

const storePickerVisible = ref(false);
const storePickerDraft = ref<PickerValue[]>([]);
const storePickerColumns = computed(() => [
	currentStoreStore.storeList.map(item => ({
		label: item.name || item.code || "未命名门店",
		value: item.id || ""
	})).filter(item => item.value)
]);
const selectedStoreName = computed(() => {
	const store = currentStoreStore.storeList.find(item => item.id === formModel.storeId);
	return store?.name || store?.code || "请选择门店";
});

function openStorePicker(): void {
	if (!currentStoreStore.storeList.length) {
		Message.warning("暂无可选门店");
		return;
	}

	storePickerDraft.value = [formModel.storeId];
	storePickerVisible.value = true;
}

function confirmStorePicker(): void {
	const storeId = String(storePickerDraft.value[0] || "");
	if (!storeId) {
		return;
	}

	formModel.storeId = storeId;
	storePickerVisible.value = false;
}

// ---------- 页面数据 ----------

async function prepareStoreScope(): Promise<void> {
	if (isGlobalManager.value) {
		await currentStoreStore.loadStoreList();
		const queryStoreId = String(route.query.storeId || "");
		formModel.storeId = currentStoreStore.storeList.some(item => item.id === queryStoreId)
			? queryStoreId
			: currentStoreStore.currentStoreId;
		return;
	}

	const store = await currentStoreStore.loadLoginStore();
	formModel.storeId = store?.id || "";
}

async function fillForm(): Promise<void> {
	await prepareStoreScope();
	const routeId = String(route.params.id || "");
	if (routeId) {
		const current = await ManagedUserAPI.detail(routeId);
		currentManagedUser.value = current;
		Object.assign(formModel, {
			id: current.id,
			userId: current.userId || "",
			storeId: current.storeId || formModel.storeId,
			name: current.user?.nick || current.user?.name || "",
			mobile: current.user?.phoneNo || "",
			password: ""
		});
		return;
	}

	Object.assign(formModel, {
		id: "",
		userId: "",
		storeId: formModel.storeId,
		name: "",
		mobile: "",
		password: ""
	});
}

// ---------- 保存 ----------

async function saveUser(): Promise<void> {
	if (!validateForm()) {
		return;
	}

	isSaving.value = true;
	try {
		const formData: ManagedUser = {
			id: formModel.id || undefined,
			userId: formModel.userId || undefined,
			storeId: formModel.storeId || undefined,
			enabled: currentManagedUser.value?.enabled ?? true,
			remark: currentManagedUser.value?.remark || "",
			user: {
				id: formModel.userId || undefined,
				name: formModel.name,
				nick: formModel.name,
				phoneNo: formModel.mobile || undefined,
				password: isCreateMode.value ? formModel.password : undefined
			}
		};
		let saved: ManagedUser;
		if (isCreateMode.value) {
			saved = await ManagedUserAPI.create(formData);
		} else {
			saved = await ManagedUserAPI.update(formData);
			if (isGlobalManager.value && currentManagedUser.value?.storeId !== formModel.storeId) {
				await ManagedUserAPI.transferStore({
					id: formModel.id || undefined,
					storeId: formModel.storeId || undefined
				});
			}
		}
		Message.success("用户已保存");
		const detailPath = `/management/users/${saved.id || formModel.id}`;
		if (isCreateMode.value) {
			await router.replace(detailPath);
		} else {
			await router.push(detailPath);
		}
	} finally {
		isSaving.value = false;
	}
}

function validateForm(): boolean {
	if (!formModel.name) {
		Message.warning("请填写姓名");
		return false;
	}
	if (!formModel.storeId) {
		Message.warning("请选择门店");
		return false;
	}
	if (isCreateMode.value && !formModel.password) {
		Message.warning("请填写密码");
		return false;
	}
	return true;
}

onMounted(async () => {
	if (userStore.hasPermissions(savePermissionCode.value)) {
		navBarStore.setRightText("保存", "var(--td-brand-color)", saveUser);
	}
	try {
		await fillForm();
	} catch {
		Message.error("用户数据加载失败");
	}
});

onUnmounted(() => navBarStore.clearRight());
</script>

<style scoped lang="less">
.user-edit {
	padding: calc(var(--app-nav-height) + 1rem) 0 4rem 0;

	.form {
		border-radius: 1rem;
	}

	.picker-text {
		color: var(--td-text-color-primary);
	}

}

:global(html.theme-dark) {
	.user-edit {
		:deep(.form-item .t-form__label) {
			color: #94a3b8;
		}
	}
}
</style>