|
@@ -171,9 +171,20 @@
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<!-- 经营种类 -->
|
|
<!-- 经营种类 -->
|
|
|
- <el-form-item label="经营种类" prop="">
|
|
|
|
|
- <el-checkbox-group v-model="formData.businessTypesList" disabled style="display: flex; flex-wrap: wrap; width: 100%">
|
|
|
|
|
|
|
+ <el-form-item label="经营种类" prop="" v-if="businessTypeList.length > 0">
|
|
|
|
|
+ <el-radio-group v-model="formData.businessTypes" disabled style="display: flex; flex-wrap: wrap; width: 100%">
|
|
|
<div class="businessSection-item" v-for="type in businessTypeList" :key="type.id || type.value">
|
|
<div class="businessSection-item" v-for="type in businessTypeList" :key="type.id || type.value">
|
|
|
|
|
+ <el-radio :value="String(type.dictId || type.value)" :label="type.dictDetail">
|
|
|
|
|
+ {{ type.dictDetail }}
|
|
|
|
|
+ </el-radio>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-radio-group>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 分类 -->
|
|
|
|
|
+ <el-form-item label="分类" prop="" v-if="categoryTypeList.length > 0">
|
|
|
|
|
+ <el-checkbox-group v-model="formData.businessClassify" disabled style="display: flex; flex-wrap: wrap; width: 100%">
|
|
|
|
|
+ <div class="businessSection-item" v-for="type in categoryTypeList" :key="type.id || type.value">
|
|
|
<el-checkbox :value="type.dictId || type.value" :label="type.dictDetail" />
|
|
<el-checkbox :value="type.dictId || type.value" :label="type.dictDetail" />
|
|
|
</div>
|
|
</div>
|
|
|
</el-checkbox-group>
|
|
</el-checkbox-group>
|
|
@@ -218,6 +229,7 @@ import { Search, Lock } from "@element-plus/icons-vue";
|
|
|
import {
|
|
import {
|
|
|
getBusinessSection,
|
|
getBusinessSection,
|
|
|
getBusinessSectionTypes,
|
|
getBusinessSectionTypes,
|
|
|
|
|
+ getThirdLevelList,
|
|
|
getDistrict,
|
|
getDistrict,
|
|
|
getStoreDetail,
|
|
getStoreDetail,
|
|
|
saveStoreInfo,
|
|
saveStoreInfo,
|
|
@@ -252,7 +264,9 @@ const formData = reactive({
|
|
|
storeBlurb: "",
|
|
storeBlurb: "",
|
|
|
queryAddress: "",
|
|
queryAddress: "",
|
|
|
businessSection: "",
|
|
businessSection: "",
|
|
|
|
|
+ businessTypes: "",
|
|
|
businessTypesList: [] as string[],
|
|
businessTypesList: [] as string[],
|
|
|
|
|
+ businessClassify: [] as string[],
|
|
|
expirationTime: "",
|
|
expirationTime: "",
|
|
|
foodLicenceExpirationTime: "",
|
|
foodLicenceExpirationTime: "",
|
|
|
storePosition: "",
|
|
storePosition: "",
|
|
@@ -334,6 +348,7 @@ const rules = reactive<FormRules>({
|
|
|
storeBlurb: [{ required: true, message: "请输入门店简介", trigger: "blur" }],
|
|
storeBlurb: [{ required: true, message: "请输入门店简介", trigger: "blur" }],
|
|
|
queryAddress: [{ required: true, message: "请输入地址进行经纬度查询", trigger: "blur" }],
|
|
queryAddress: [{ required: true, message: "请输入地址进行经纬度查询", trigger: "blur" }],
|
|
|
businessSection: [{ required: true, message: "请选择经营板块", trigger: "change" }],
|
|
businessSection: [{ required: true, message: "请选择经营板块", trigger: "change" }],
|
|
|
|
|
+ businessTypes: [{ required: true, message: "请选择经营种类(单选)", trigger: "change" }],
|
|
|
businessTypesList: [{ required: true, message: "请选择经营种类", trigger: "change", type: "array" }]
|
|
businessTypesList: [{ required: true, message: "请选择经营种类", trigger: "change", type: "array" }]
|
|
|
});
|
|
});
|
|
|
|
|
|
|
@@ -357,6 +372,9 @@ const businessSectionList = ref<any[]>([
|
|
|
// 经营种类列表(根据UI图静态数据)
|
|
// 经营种类列表(根据UI图静态数据)
|
|
|
const businessTypeList = ref<any[]>([]);
|
|
const businessTypeList = ref<any[]>([]);
|
|
|
|
|
|
|
|
|
|
+// 分类列表(独立的数据源)
|
|
|
|
|
+const categoryTypeList = ref<any[]>([]);
|
|
|
|
|
+
|
|
|
// 经营板块对应的经营种类数据(根据UI图)
|
|
// 经营板块对应的经营种类数据(根据UI图)
|
|
|
const businessTypeMap: Record<string, any[]> = {
|
|
const businessTypeMap: Record<string, any[]> = {
|
|
|
美食: [
|
|
美食: [
|
|
@@ -520,11 +538,12 @@ const getBusinessSectionData = async () => {
|
|
|
const handleBusinessSectionChange = async (sectionId: string, init?: boolean) => {
|
|
const handleBusinessSectionChange = async (sectionId: string, init?: boolean) => {
|
|
|
if (!sectionId) {
|
|
if (!sectionId) {
|
|
|
businessTypeList.value = [];
|
|
businessTypeList.value = [];
|
|
|
|
|
+ formData.businessTypes = "";
|
|
|
formData.businessTypesList = [];
|
|
formData.businessTypesList = [];
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
try {
|
|
try {
|
|
|
- const res = await getBusinessSectionTypes({ parentId: sectionId });
|
|
|
|
|
|
|
+ const res = await getBusinessSectionTypes({ parentDictId: sectionId });
|
|
|
console.log(res, "--data--datax");
|
|
console.log(res, "--data--datax");
|
|
|
|
|
|
|
|
if (res && res.data) {
|
|
if (res && res.data) {
|
|
@@ -558,6 +577,90 @@ const handleBusinessSectionChange = async (sectionId: string, init?: boolean) =>
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
+// 监听经营板块变化,获取对应的分类
|
|
|
|
|
+const handleCategoryChange = async (sectionId: string, init?: boolean) => {
|
|
|
|
|
+ if (!sectionId) {
|
|
|
|
|
+ categoryTypeList.value = [];
|
|
|
|
|
+ formData.businessClassify = [];
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ try {
|
|
|
|
|
+ const res = await getThirdLevelList({ parentDictId: sectionId });
|
|
|
|
|
+ console.log(res, "--category--data");
|
|
|
|
|
+
|
|
|
|
|
+ if (res && res.data) {
|
|
|
|
|
+ const dataAny = res.data as any;
|
|
|
|
|
+ // 处理不同的返回格式
|
|
|
|
|
+ if (Array.isArray(dataAny)) {
|
|
|
|
|
+ categoryTypeList.value = dataAny;
|
|
|
|
|
+ } else if (dataAny.data && Array.isArray(dataAny.data)) {
|
|
|
|
|
+ categoryTypeList.value = dataAny.data;
|
|
|
|
|
+ } else if (dataAny.list && Array.isArray(dataAny.list)) {
|
|
|
|
|
+ categoryTypeList.value = dataAny.list;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ categoryTypeList.value = [];
|
|
|
|
|
+ }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ categoryTypeList.value = [];
|
|
|
|
|
+ }
|
|
|
|
|
+ // 清空已选择的分类
|
|
|
|
|
+ // if (!init) {
|
|
|
|
|
+ // formData.businessClassify = [];
|
|
|
|
|
+ // }
|
|
|
|
|
+ } catch (error: any) {
|
|
|
|
|
+ // 忽略请求取消错误(这是正常的,当有重复请求时会被取消)
|
|
|
|
|
+ if (error?.code === "ERR_CANCELED" || error?.name === "CanceledError") {
|
|
|
|
|
+ console.log("请求被取消(可能是重复请求)");
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ console.error("获取分类失败:", error);
|
|
|
|
|
+ categoryTypeList.value = [];
|
|
|
|
|
+ formData.businessClassify = [];
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+// 根据经营种类ID获取对应的分类
|
|
|
|
|
+const handleCategoryChangeByType = async (typeId: string, init?: boolean) => {
|
|
|
|
|
+ if (!typeId) {
|
|
|
|
|
+ categoryTypeList.value = [];
|
|
|
|
|
+ formData.businessClassify = [];
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ try {
|
|
|
|
|
+ const res = await getThirdLevelList({ parentDictId: typeId });
|
|
|
|
|
+ console.log(res, "--categoryByType--data");
|
|
|
|
|
+
|
|
|
|
|
+ if (res && res.data) {
|
|
|
|
|
+ const dataAny = res.data as any;
|
|
|
|
|
+ // 处理不同的返回格式
|
|
|
|
|
+ if (Array.isArray(dataAny)) {
|
|
|
|
|
+ categoryTypeList.value = dataAny;
|
|
|
|
|
+ } else if (dataAny.data && Array.isArray(dataAny.data)) {
|
|
|
|
|
+ categoryTypeList.value = dataAny.data;
|
|
|
|
|
+ } else if (dataAny.list && Array.isArray(dataAny.list)) {
|
|
|
|
|
+ categoryTypeList.value = dataAny.list;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ categoryTypeList.value = [];
|
|
|
|
|
+ }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ categoryTypeList.value = [];
|
|
|
|
|
+ }
|
|
|
|
|
+ // 清空已选择的分类(如果不是初始化)
|
|
|
|
|
+ if (!init) {
|
|
|
|
|
+ formData.businessClassify = [];
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (error: any) {
|
|
|
|
|
+ // 忽略请求取消错误(这是正常的,当有重复请求时会被取消)
|
|
|
|
|
+ if (error?.code === "ERR_CANCELED" || error?.name === "CanceledError") {
|
|
|
|
|
+ console.log("请求被取消(可能是重复请求)");
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ console.error("根据经营种类获取分类失败:", error);
|
|
|
|
|
+ categoryTypeList.value = [];
|
|
|
|
|
+ formData.businessClassify = [];
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
// 经纬度查询(用户手动触发)
|
|
// 经纬度查询(用户手动触发)
|
|
|
// const handleLocationQuery = async () => {
|
|
// const handleLocationQuery = async () => {
|
|
|
// if (!formData.queryAddress) {
|
|
// if (!formData.queryAddress) {
|
|
@@ -613,7 +716,9 @@ const handleSubmit = async () => {
|
|
|
storePosition: formData.storePosition,
|
|
storePosition: formData.storePosition,
|
|
|
storePositionLongitude: formData.storePositionLongitude,
|
|
storePositionLongitude: formData.storePositionLongitude,
|
|
|
storePositionLatitude: formData.storePositionLatitude,
|
|
storePositionLatitude: formData.storePositionLatitude,
|
|
|
- businessStatus: formData.businessStatus
|
|
|
|
|
|
|
+ businessStatus: formData.businessStatus,
|
|
|
|
|
+ businessTypes: formData.businessTypes ?? "",
|
|
|
|
|
+ businessClassify: formData.businessClassify ?? []
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
let result;
|
|
let result;
|
|
@@ -696,14 +801,29 @@ const getStoreDetailData = async () => {
|
|
|
const sectionId = String(storeData.businessSection);
|
|
const sectionId = String(storeData.businessSection);
|
|
|
// 直接调用 handleBusinessSectionChange,因为 isLoadingDetail 会阻止 watch 触发
|
|
// 直接调用 handleBusinessSectionChange,因为 isLoadingDetail 会阻止 watch 触发
|
|
|
await handleBusinessSectionChange(sectionId);
|
|
await handleBusinessSectionChange(sectionId);
|
|
|
|
|
+ // 调用 handleCategoryChange 获取分类数据
|
|
|
|
|
+ await handleCategoryChange(sectionId);
|
|
|
// 设置 businessSection(此时 watch 不会触发,因为 isLoadingDetail 为 true)
|
|
// 设置 businessSection(此时 watch 不会触发,因为 isLoadingDetail 为 true)
|
|
|
formData.businessSection = sectionId;
|
|
formData.businessSection = sectionId;
|
|
|
- // 设置已选择的经营种类
|
|
|
|
|
|
|
+ // 设置已选择的经营种类(单选)
|
|
|
|
|
+ if (storeData.businessTypes) {
|
|
|
|
|
+ const typeId = String(storeData.businessTypes);
|
|
|
|
|
+ formData.businessTypes = typeId;
|
|
|
|
|
+ // 根据经营种类获取对应的分类
|
|
|
|
|
+ await handleCategoryChangeByType(typeId, true);
|
|
|
|
|
+ }
|
|
|
|
|
+ // 设置已选择的经营种类(多选)
|
|
|
if (storeData.businessTypesList) {
|
|
if (storeData.businessTypesList) {
|
|
|
formData.businessTypesList = Array.isArray(storeData.businessTypesList)
|
|
formData.businessTypesList = Array.isArray(storeData.businessTypesList)
|
|
|
? storeData.businessTypesList
|
|
? storeData.businessTypesList
|
|
|
: [storeData.businessTypesList];
|
|
: [storeData.businessTypesList];
|
|
|
}
|
|
}
|
|
|
|
|
+ // 设置已选择的分类
|
|
|
|
|
+ if (storeData.businessClassify) {
|
|
|
|
|
+ formData.businessClassify = Array.isArray(storeData.businessClassify)
|
|
|
|
|
+ ? storeData.businessClassify
|
|
|
|
|
+ : [storeData.businessClassify];
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
} catch (error) {
|
|
} catch (error) {
|
|
@@ -724,6 +844,27 @@ watch(
|
|
|
if (newValue) {
|
|
if (newValue) {
|
|
|
console.log(newValue, "--newValue");
|
|
console.log(newValue, "--newValue");
|
|
|
handleBusinessSectionChange(newValue);
|
|
handleBusinessSectionChange(newValue);
|
|
|
|
|
+ handleCategoryChange(newValue);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+);
|
|
|
|
|
+
|
|
|
|
|
+// 监听经营种类变化,获取对应的分类
|
|
|
|
|
+watch(
|
|
|
|
|
+ () => formData.businessTypes,
|
|
|
|
|
+ newValue => {
|
|
|
|
|
+ // 如果正在加载详情数据,不触发 watch(避免重复请求)
|
|
|
|
|
+ if (isLoadingDetail.value) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ if (newValue) {
|
|
|
|
|
+ console.log(newValue, "--businessTypes--newValue");
|
|
|
|
|
+ // 根据经营种类的ID获取对应的分类
|
|
|
|
|
+ handleCategoryChangeByType(newValue);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // 如果清空了经营种类,清空分类
|
|
|
|
|
+ categoryTypeList.value = [];
|
|
|
|
|
+ formData.businessClassify = [];
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
);
|
|
);
|
|
@@ -731,9 +872,10 @@ watch(
|
|
|
onMounted(async () => {
|
|
onMounted(async () => {
|
|
|
await getProvinceData();
|
|
await getProvinceData();
|
|
|
await getBusinessSectionData();
|
|
await getBusinessSectionData();
|
|
|
- // 如果默认选中了经营板块,自动加载对应的经营种类
|
|
|
|
|
|
|
+ // 如果默认选中了经营板块,自动加载对应的经营种类和分类
|
|
|
if (formData.businessSection) {
|
|
if (formData.businessSection) {
|
|
|
await handleBusinessSectionChange(formData.businessSection, true);
|
|
await handleBusinessSectionChange(formData.businessSection, true);
|
|
|
|
|
+ await handleCategoryChange(formData.businessSection, true);
|
|
|
}
|
|
}
|
|
|
await getStoreDetailData();
|
|
await getStoreDetailData();
|
|
|
});
|
|
});
|