|
|
@@ -5,6 +5,7 @@ import type { PaginationProps } from "@pureadmin/table";
|
|
|
import { deviceDetection } from "@pureadmin/utils";
|
|
|
import { AmapWithSearch } from "@/components/AmapWithSearch";
|
|
|
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
|
|
+import { regionData, CodeToText, TextToCode } from "@/utils/chinaArea";
|
|
|
import {
|
|
|
getShopList,
|
|
|
createShop,
|
|
|
@@ -21,7 +22,7 @@ import {
|
|
|
} from "@/api/shop";
|
|
|
import { getAllRoles } from "@/api/role";
|
|
|
import { getAdminList } from "@/api/admin";
|
|
|
-import { type Ref, ref, toRaw, reactive, onMounted } from "vue";
|
|
|
+import { type Ref, ref, toRaw, reactive, onMounted, computed } from "vue";
|
|
|
import {
|
|
|
ElForm,
|
|
|
ElInput,
|
|
|
@@ -239,6 +240,68 @@ export function useShop(tableRef: Ref) {
|
|
|
status: 1
|
|
|
});
|
|
|
|
|
|
+ // 省市区联动选择器
|
|
|
+ const selectedProvince = ref("");
|
|
|
+ const selectedCity = ref("");
|
|
|
+ const selectedDistrict = ref("");
|
|
|
+
|
|
|
+ // 省份列表
|
|
|
+ const provinceOptions = computed(() => regionData);
|
|
|
+
|
|
|
+ // 城市列表（根据省份联动）
|
|
|
+ const cityOptions = computed(() => {
|
|
|
+ const province = regionData.find((p: any) => p.value === selectedProvince.value);
|
|
|
+ return province?.children || [];
|
|
|
+ });
|
|
|
+
|
|
|
+ // 区县列表（根据城市联动）
|
|
|
+ const districtOptions = computed(() => {
|
|
|
+ const province = regionData.find((p: any) => p.value === selectedProvince.value);
|
|
|
+ const city = province?.children?.find((c: any) => c.value === selectedCity.value);
|
|
|
+ return city?.children || [];
|
|
|
+ });
|
|
|
+
|
|
|
+ // 详细地址的详细部分（不含省市区前缀）
|
|
|
+ const addressDetail = ref("");
|
|
|
+
|
|
|
+ // 更新详细地址前缀
|
|
|
+ function updateAddressPrefix() {
|
|
|
+ const provinceText = shopForm.province || "";
|
|
|
+ const cityText = shopForm.city || "";
|
|
|
+ const districtText = shopForm.district || "";
|
|
|
+ const prefix = provinceText + cityText + districtText;
|
|
|
+
|
|
|
+ // 更新详细地址：前缀 + 用户输入的详细部分
|
|
|
+ shopForm.address = prefix + addressDetail.value;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 省份变化时，清空城市和区县
|
|
|
+ function handleProvinceChange(val: string) {
|
|
|
+ selectedCity.value = "";
|
|
|
+ selectedDistrict.value = "";
|
|
|
+ shopForm.province = CodeToText[val] || "";
|
|
|
+ shopForm.city = "";
|
|
|
+ shopForm.district = "";
|
|
|
+ addressDetail.value = "";
|
|
|
+ updateAddressPrefix();
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 城市变化时，清空区县
|
|
|
+ function handleCityChange(val: string) {
|
|
|
+ selectedDistrict.value = "";
|
|
|
+ shopForm.city = CodeToText[val] || "";
|
|
|
+ shopForm.district = "";
|
|
|
+ updateAddressPrefix();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 区县变化时
|
|
|
+ function handleDistrictChange(val: string) {
|
|
|
+ shopForm.district = CodeToText[val] || "";
|
|
|
+ updateAddressPrefix();
|
|
|
+ }
|
|
|
+
|
|
|
// 打开新增/编辑弹窗
|
|
|
function openDialog(title = "新增", row?: ShopItem) {
|
|
|
Object.assign(shopForm, {
|
|
|
@@ -255,120 +318,220 @@ export function useShop(tableRef: Ref) {
|
|
|
status: row?.status ?? 1
|
|
|
});
|
|
|
|
|
|
+
|
|
|
+ // 初始化省市区选择器
|
|
|
+ if (row?.province) {
|
|
|
+ selectedProvince.value = TextToCode[row.province]?.code || "";
|
|
|
+ } else {
|
|
|
+ selectedProvince.value = "";
|
|
|
+ }
|
|
|
+ if (row?.city && selectedProvince.value) {
|
|
|
+ selectedCity.value = TextToCode[row.province]?.[row.city]?.code || "";
|
|
|
+ } else {
|
|
|
+ selectedCity.value = "";
|
|
|
+ }
|
|
|
+ if (row?.district && selectedCity.value) {
|
|
|
+ selectedDistrict.value = TextToCode[row.province]?.[row.city]?.[row.district]?.code || "";
|
|
|
+ } else {
|
|
|
+ selectedDistrict.value = "";
|
|
|
+ }
|
|
|
+
|
|
|
+ // 从地址中提取详细部分（去除省市区前缀）
|
|
|
+ if (row?.address) {
|
|
|
+ const prefix = (row.province || "") + (row.city || "") + (row.district || "");
|
|
|
+ addressDetail.value = row.address.startsWith(prefix)
|
|
|
+ ? row.address.substring(prefix.length)
|
|
|
+ : row.address;
|
|
|
+ } else {
|
|
|
+ addressDetail.value = "";
|
|
|
+ }
|
|
|
+
|
|
|
addDialog({
|
|
|
title: `${title}门店`,
|
|
|
- width: "60%",
|
|
|
+ width: "900px",
|
|
|
draggable: true,
|
|
|
fullscreen: deviceDetection(),
|
|
|
closeOnClickModal: false,
|
|
|
+ center: true,
|
|
|
contentRenderer: () => (
|
|
|
- <div>
|
|
|
- <ElForm ref={ruleFormRef} model={shopForm} label-width="100px">
|
|
|
- <ElFormItem
|
|
|
- label="门店名称"
|
|
|
- prop="name"
|
|
|
- rules={[{ required: true, message: "请输入门店名称", trigger: "blur" }]}
|
|
|
- >
|
|
|
- <ElInput v-model={shopForm.name} placeholder="请输入门店名称" clearable />
|
|
|
- </ElFormItem>
|
|
|
- <ElFormItem label="省份" prop="province">
|
|
|
- <ElInput v-model={shopForm.province} placeholder="请输入省份" clearable />
|
|
|
- </ElFormItem>
|
|
|
- <ElFormItem label="城市" prop="city">
|
|
|
- <ElInput v-model={shopForm.city} placeholder="请输入城市" clearable />
|
|
|
- </ElFormItem>
|
|
|
- <ElFormItem label="区县" prop="district">
|
|
|
- <ElInput v-model={shopForm.district} placeholder="请输入区县" clearable />
|
|
|
- </ElFormItem>
|
|
|
+ <div class="p-6">
|
|
|
+ <ElForm ref={ruleFormRef} model={shopForm} label-width="90px" size="default">
|
|
|
+ <div class="grid grid-cols-2 gap-x-8 gap-y-2">
|
|
|
+ <ElFormItem
|
|
|
+ label="门店名称"
|
|
|
+ prop="name"
|
|
|
+ rules={[{ required: true, message: "请输入门店名称", trigger: "blur" }]}
|
|
|
+ >
|
|
|
+ <ElInput v-model={shopForm.name} placeholder="请输入门店名称" clearable />
|
|
|
+ </ElFormItem>
|
|
|
+ <ElFormItem label="状态" prop="status">
|
|
|
+ <ElRadioGroup v-model={shopForm.status}>
|
|
|
+ <ElRadioButton value={1}>营业中</ElRadioButton>
|
|
|
+ <ElRadioButton value={0}>已停业</ElRadioButton>
|
|
|
+ </ElRadioGroup>
|
|
|
+ </ElFormItem>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="grid grid-cols-3 gap-x-4 gap-y-2">
|
|
|
+ <ElFormItem label="省份" prop="province">
|
|
|
+ <ElSelect
|
|
|
+ v-model={selectedProvince.value}
|
|
|
+ placeholder="请选择省份"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ onChange={handleProvinceChange}
|
|
|
+ >
|
|
|
+ {provinceOptions.value.map((item: any) => (
|
|
|
+ <ElOption key={item.value} label={item.label} value={item.value} />
|
|
|
+ ))}
|
|
|
+ </ElSelect>
|
|
|
+ </ElFormItem>
|
|
|
+ <ElFormItem label="城市" prop="city">
|
|
|
+ <ElSelect
|
|
|
+ v-model={selectedCity.value}
|
|
|
+ placeholder="请选择城市"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ disabled={!selectedProvince.value}
|
|
|
+ onChange={handleCityChange}
|
|
|
+ >
|
|
|
+ {cityOptions.value.map((item: any) => (
|
|
|
+ <ElOption key={item.value} label={item.label} value={item.value} />
|
|
|
+ ))}
|
|
|
+ </ElSelect>
|
|
|
+ </ElFormItem>
|
|
|
+ <ElFormItem label="区县" prop="district">
|
|
|
+ <ElSelect
|
|
|
+ v-model={selectedDistrict.value}
|
|
|
+ placeholder="请选择区县"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ disabled={!selectedCity.value}
|
|
|
+ onChange={handleDistrictChange}
|
|
|
+ >
|
|
|
+ {districtOptions.value.map((item: any) => (
|
|
|
+ <ElOption key={item.value} label={item.label} value={item.value} />
|
|
|
+ ))}
|
|
|
+ </ElSelect>
|
|
|
+ </ElFormItem>
|
|
|
+ </div>
|
|
|
+
|
|
|
<ElFormItem
|
|
|
label="详细地址"
|
|
|
prop="address"
|
|
|
rules={[{ required: true, message: "请输入详细地址", trigger: "blur" }]}
|
|
|
>
|
|
|
- <ElInput v-model={shopForm.address} placeholder="请输入详细地址" clearable />
|
|
|
- </ElFormItem>
|
|
|
- <ElFormItem label="联系人" prop="contactName">
|
|
|
- <ElInput v-model={shopForm.contactName} placeholder="请输入联系人" clearable />
|
|
|
- </ElFormItem>
|
|
|
- <ElFormItem label="联系电话" prop="contactPhone">
|
|
|
- <ElInput v-model={shopForm.contactPhone} placeholder="请输入联系电话" clearable />
|
|
|
- </ElFormItem>
|
|
|
- <ElFormItem label="营业时间" prop="businessHours">
|
|
|
- <ElInput v-model={shopForm.businessHours} placeholder="如: 08:00-22:00" clearable />
|
|
|
- </ElFormItem>
|
|
|
- <ElFormItem label="状态" prop="status">
|
|
|
- <ElRadioGroup v-model={shopForm.status}>
|
|
|
- <ElRadioButton value={1}>营业中</ElRadioButton>
|
|
|
- <ElRadioButton value={0}>已停业</ElRadioButton>
|
|
|
- </ElRadioGroup>
|
|
|
- </ElFormItem>
|
|
|
- </ElForm>
|
|
|
- <div class="mt-4">
|
|
|
- <div class="text-sm font-medium mb-2">门店位置</div>
|
|
|
- <div class="grid grid-cols-2 gap-4 mb-4">
|
|
|
- <ElFormItem label="经度" prop="longitude" class="flex-1">
|
|
|
- <ElInput
|
|
|
- v-model={shopForm.longitude}
|
|
|
- placeholder="请输入经度"
|
|
|
- clearable
|
|
|
- onChange={(val: any) => handleLngLatChange("longitude", val)}
|
|
|
+ <div class="flex items-center gap-2 w-full">
|
|
|
+ <ElInput
|
|
|
+ value={shopForm.province + shopForm.city + shopForm.district}
|
|
|
+ placeholder="省市区"
|
|
|
+ readonly
|
|
|
+ class="w-[180px]!"
|
|
|
+ style="flex-shrink: 0"
|
|
|
/>
|
|
|
- </ElFormItem>
|
|
|
- <ElFormItem label="纬度" prop="latitude" class="flex-1">
|
|
|
- <ElInput
|
|
|
- v-model={shopForm.latitude}
|
|
|
- placeholder="请输入纬度"
|
|
|
- clearable
|
|
|
- onChange={(val: any) => handleLngLatChange("latitude", val)}
|
|
|
+ <ElInput
|
|
|
+ v-model={addressDetail.value}
|
|
|
+ placeholder="请输入详细地址（如：xx路xx号）"
|
|
|
+ clearable
|
|
|
+ class="flex-1"
|
|
|
+ onInput={() => updateAddressPrefix()}
|
|
|
/>
|
|
|
+ </div>
|
|
|
+ </ElFormItem>
|
|
|
+
|
|
|
+ <div class="grid grid-cols-3 gap-x-4 gap-y-2">
|
|
|
+ <ElFormItem label="联系人" prop="contactName">
|
|
|
+ <ElInput v-model={shopForm.contactName} placeholder="请输入联系人" clearable />
|
|
|
+ </ElFormItem>
|
|
|
+ <ElFormItem label="联系电话" prop="contactPhone">
|
|
|
+ <ElInput v-model={shopForm.contactPhone} placeholder="请输入联系电话" clearable />
|
|
|
+ </ElFormItem>
|
|
|
+ <ElFormItem label="营业时间" prop="businessHours">
|
|
|
+ <ElInput v-model={shopForm.businessHours} placeholder="如: 08:00-22:00" clearable />
|
|
|
</ElFormItem>
|
|
|
</div>
|
|
|
- <AmapWithSearch
|
|
|
- longitude={Number(shopForm.longitude) || undefined}
|
|
|
- latitude={Number(shopForm.latitude) || undefined}
|
|
|
- height="350px"
|
|
|
- zoom={15}
|
|
|
- enableClickMark={true}
|
|
|
- showSearch={true}
|
|
|
- securityJsCode="bcfcaa8d8ef22452d4cf6d3892646262"
|
|
|
- onUpdate:longitude={(val: number) => (shopForm.longitude = String(val))}
|
|
|
- onUpdate:latitude={(val: number) => (shopForm.latitude = String(val))}
|
|
|
- onMarkerMoved={(lng: number, lat: number) => {
|
|
|
- shopForm.longitude = String(lng);
|
|
|
- shopForm.latitude = String(lat);
|
|
|
- }}
|
|
|
- />
|
|
|
- <div class="text-xs text-gray-500 mt-2">
|
|
|
- <span>提示：</span>可以通过地址搜索快速定位，也可以点击地图或拖动标记点来精确选择门店位置
|
|
|
+
|
|
|
+ <div class="border-t border-gray-200 pt-4 mt-4">
|
|
|
+ <div class="flex items-center gap-2 mb-4">
|
|
|
+ <div class="w-1 h-4 bg-primary rounded"></div>
|
|
|
+ <span class="text-sm font-medium text-gray-700">门店位置</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="grid grid-cols-2 gap-x-8 gap-y-2 mb-4">
|
|
|
+ <ElFormItem label="经度" prop="longitude">
|
|
|
+ <ElInput
|
|
|
+ v-model={shopForm.longitude}
|
|
|
+ placeholder="请输入经度"
|
|
|
+ clearable
|
|
|
+ onChange={(val: any) => handleLngLatChange("longitude", val)}
|
|
|
+ />
|
|
|
+ </ElFormItem>
|
|
|
+ <ElFormItem label="纬度" prop="latitude">
|
|
|
+ <ElInput
|
|
|
+ v-model={shopForm.latitude}
|
|
|
+ placeholder="请输入纬度"
|
|
|
+ clearable
|
|
|
+ onChange={(val: any) => handleLngLatChange("latitude", val)}
|
|
|
+ />
|
|
|
+ </ElFormItem>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <AmapWithSearch
|
|
|
+ longitude={Number(shopForm.longitude) || undefined}
|
|
|
+ latitude={Number(shopForm.latitude) || undefined}
|
|
|
+ height="280px"
|
|
|
+ zoom={15}
|
|
|
+ enableClickMark={true}
|
|
|
+ showSearch={true}
|
|
|
+ securityJsCode="bcfcaa8d8ef22452d4cf6d3892646262"
|
|
|
+ onUpdate:longitude={(val: number) => (shopForm.longitude = String(val))}
|
|
|
+ onUpdate:latitude={(val: number) => (shopForm.latitude = String(val))}
|
|
|
+ onMarkerMoved={(lng: number, lat: number) => {
|
|
|
+ shopForm.longitude = String(lng);
|
|
|
+ shopForm.latitude = String(lat);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <div class="text-xs text-gray-500 mt-2 flex items-center gap-1">
|
|
|
+ <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
|
|
|
+ <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
|
|
|
+ </svg>
|
|
|
+ <span>可以通过地址搜索快速定位，也可以点击地图或拖动标记点来精确选择门店位置</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </ElForm>
|
|
|
</div>
|
|
|
),
|
|
|
- beforeSure: async (done) => {
|
|
|
+ beforeSure: async (done, { closeLoading }) => {
|
|
|
const valid = await ruleFormRef.value.validate().catch(() => false);
|
|
|
- if (!valid) return;
|
|
|
+ if (!valid) {
|
|
|
+ closeLoading();
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
try {
|
|
|
if (title === "新增") {
|
|
|
const res = await createShop(toRaw(shopForm));
|
|
|
- if (res.code === 0) {
|
|
|
+ if (res.code === 0 || res.code === 200) {
|
|
|
message(`新增门店 ${shopForm.name} 成功`, { type: "success" });
|
|
|
done();
|
|
|
onSearch();
|
|
|
} else {
|
|
|
+ closeLoading();
|
|
|
message(res.message || "新增失败", { type: "error" });
|
|
|
}
|
|
|
} else {
|
|
|
const res = await updateShop(row.id, toRaw(shopForm));
|
|
|
- if (res.code === 0) {
|
|
|
+ if (res.code === 0 || res.code === 200) {
|
|
|
message(`修改门店 ${shopForm.name} 成功`, { type: "success" });
|
|
|
done();
|
|
|
onSearch();
|
|
|
} else {
|
|
|
+ closeLoading();
|
|
|
message(res.message || "修改失败", { type: "error" });
|
|
|
}
|
|
|
}
|
|
|
} catch (error) {
|
|
|
+ closeLoading();
|
|
|
message("操作失败", { type: "error" });
|
|
|
}
|
|
|
}
|
|
|
@@ -379,7 +542,7 @@ export function useShop(tableRef: Ref) {
|
|
|
async function handleDelete(row: ShopItem) {
|
|
|
try {
|
|
|
const res = await deleteShop(row.id);
|
|
|
- if (res.code === 0) {
|
|
|
+ if (res.code === 0 || res.code === 200) {
|
|
|
message(`已成功删除门店 ${row.name}`, { type: "success" });
|
|
|
onSearch();
|
|
|
} else {
|
|
|
@@ -389,21 +552,21 @@ export function useShop(tableRef: Ref) {
|
|
|
message("删除失败", { type: "error" });
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 切换门店状态
|
|
|
async function handleToggleStatus(row: ShopItem) {
|
|
|
const newStatus = row.status === 1 ? 0 : 1;
|
|
|
const actionText = newStatus === 1 ? "营业" : "停业";
|
|
|
-
|
|
|
+
|
|
|
try {
|
|
|
- await ElMessageBox.confirm(`确认要${actionText}门店 ${row.name} 吗?`, "系统提示", {
|
|
|
+ await ElMessageBox.confirm(`确认要${actionText}门店 ${row.name} 吗？`, "系统提示", {
|
|
|
confirmButtonText: "确定",
|
|
|
cancelButtonText: "取消",
|
|
|
type: "warning"
|
|
|
});
|
|
|
-
|
|
|
+
|
|
|
const res = await toggleShopStatus(row.id, { status: newStatus });
|
|
|
- if (res.code === 0) {
|
|
|
+ if (res.code === 0 || res.code === 200) {
|
|
|
row.status = newStatus;
|
|
|
message(`已${actionText}门店 ${row.name}`, { type: "success" });
|
|
|
} else {
|
|
|
@@ -443,7 +606,7 @@ export function useShop(tableRef: Ref) {
|
|
|
/>
|
|
|
</div>
|
|
|
),
|
|
|
- beforeSure: async (done) => {
|
|
|
+ beforeSure: async (done, { closeLoading }) => {
|
|
|
try {
|
|
|
// 先解除所有关联
|
|
|
for (const device of linkedDevices) {
|
|
|
@@ -461,6 +624,7 @@ export function useShop(tableRef: Ref) {
|
|
|
done();
|
|
|
onSearch();
|
|
|
} catch (error) {
|
|
|
+ closeLoading();
|
|
|
message("操作失败", { type: "error" });
|
|
|
}
|
|
|
}
|
|
|
@@ -495,7 +659,7 @@ export function useShop(tableRef: Ref) {
|
|
|
/>
|
|
|
</div>
|
|
|
),
|
|
|
- beforeSure: async (done) => {
|
|
|
+ beforeSure: async (done, { closeLoading }) => {
|
|
|
try {
|
|
|
// 先移除所有补货员
|
|
|
for (const r of currentReplenishers) {
|
|
|
@@ -509,6 +673,7 @@ export function useShop(tableRef: Ref) {
|
|
|
done();
|
|
|
onSearch();
|
|
|
} catch (error) {
|
|
|
+ closeLoading();
|
|
|
message("操作失败", { type: "error" });
|
|
|
}
|
|
|
}
|
skyline