refactor file tree
This commit is contained in:
Timi
@@ -0,0 +1,244 @@
|
||||
<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>
|
||||
<t-button class="save" theme="primary" :loading="isSaving" @click="saveUser">保存</t-button>
|
||||
</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 { Toast } from "tdesign-mobile-vue";
|
||||
import { useUserStore } from "timi-web";
|
||||
import ManagedUserAPI from "@/api/ManagedUserAPI";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
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 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) {
|
||||
Toast.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
|
||||
});
|
||||
}
|
||||
}
|
||||
Toast.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) {
|
||||
Toast.warning("请填写姓名");
|
||||
return false;
|
||||
}
|
||||
if (!formModel.storeId) {
|
||||
Toast.warning("请选择门店");
|
||||
return false;
|
||||
}
|
||||
if (isCreateMode.value && !formModel.password) {
|
||||
Toast.warning("请填写密码");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
await fillForm();
|
||||
} catch {
|
||||
Toast.error("用户数据加载失败");
|
||||
}
|
||||
});
|
||||
</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);
|
||||
}
|
||||
|
||||
.save {
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.user-edit {
|
||||
:deep(.form-item .t-form__label) {
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user