|
|
@@ -160,10 +160,10 @@
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
<!-- 经营板块 -->
|
|
|
- <el-form-item label="经营板块" prop="">
|
|
|
- <el-radio-group v-model="formData.businessSection" disabled>
|
|
|
- <div v-for="section in businessSectionList" :key="section.dictId || section.value" class="businessSection-item">
|
|
|
- <el-radio :value="String(section.dictId)" :label="section.dictDetail">
|
|
|
+ <el-form-item label="经营板块" prop="businessSection">
|
|
|
+ <el-radio-group v-model="formData.businessSection" class="business-section-radio-group">
|
|
|
+ <div v-for="section in businessSectionList" :key="section.dictId" class="businessSection-item">
|
|
|
+ <el-radio :value="section.dictId" :label="section.dictDetail">
|
|
|
{{ section.dictDetail }}
|
|
|
</el-radio>
|
|
|
</div>
|
|
|
@@ -171,27 +171,13 @@
|
|
|
</el-form-item>
|
|
|
|
|
|
<!-- 经营种类 -->
|
|
|
- <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">
|
|
|
- <el-radio :value="String(type.dictId || type.value)" :label="type.dictDetail">
|
|
|
- {{ type.dictDetail }}
|
|
|
- </el-radio>
|
|
|
- </div>
|
|
|
- </el-radio-group>
|
|
|
+ <el-form-item label="经营种类" prop="businessTypeName">
|
|
|
+ <el-input v-model="formData.businessTypeName" placeholder="请输入经营种类" clearable maxlength="50" />
|
|
|
</el-form-item>
|
|
|
|
|
|
- <!-- 分类 -->
|
|
|
- <el-form-item label="分类" prop="" v-if="categoryTypeList.length > 0">
|
|
|
- <el-checkbox-group
|
|
|
- v-model="formData.businessClassifyList"
|
|
|
- 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" />
|
|
|
- </div>
|
|
|
- </el-checkbox-group>
|
|
|
+ <!-- 经营类目 -->
|
|
|
+ <el-form-item label="经营类目" prop="businessCategoryName">
|
|
|
+ <el-input v-model="formData.businessCategoryName" placeholder="请输入经营类目" clearable maxlength="50" />
|
|
|
</el-form-item>
|
|
|
|
|
|
<!-- 到期时间(只读) -->
|
|
|
@@ -230,15 +216,7 @@ import { ref, reactive, onMounted, watch, nextTick } from "vue";
|
|
|
import { ElMessage, ElNotification } from "element-plus";
|
|
|
import type { FormInstance, FormRules } from "element-plus";
|
|
|
import { Search, Lock } from "@element-plus/icons-vue";
|
|
|
-import {
|
|
|
- getBusinessSection,
|
|
|
- getBusinessSectionTypes,
|
|
|
- getThirdLevelList,
|
|
|
- getDistrict,
|
|
|
- getStoreDetail,
|
|
|
- saveStoreInfo,
|
|
|
- editStoreInfo
|
|
|
-} from "@/api/modules/storeDecoration";
|
|
|
+import { getDistrict, getStoreDetail, saveStoreInfo, editStoreInfo } from "@/api/modules/storeDecoration";
|
|
|
import { getInputPrompt } from "@/api/modules/newLoginApi";
|
|
|
import { useRoute } from "vue-router";
|
|
|
import { localGet } from "@/utils";
|
|
|
@@ -267,10 +245,10 @@ const formData = reactive({
|
|
|
storeAddress: "",
|
|
|
storeBlurb: "",
|
|
|
queryAddress: "",
|
|
|
- businessSection: "",
|
|
|
- businessTypes: "",
|
|
|
- businessTypesList: [] as string[],
|
|
|
- businessClassifyList: [] as string[],
|
|
|
+ businessSection: "" as number | "",
|
|
|
+ businessSectionName: "",
|
|
|
+ businessTypeName: "",
|
|
|
+ businessCategoryName: "",
|
|
|
expirationTime: "",
|
|
|
foodLicenceExpirationTime: "",
|
|
|
storePosition: "",
|
|
|
@@ -352,8 +330,8 @@ const rules = reactive<FormRules>({
|
|
|
storeBlurb: [{ required: true, message: "请输入门店简介", trigger: "blur" }],
|
|
|
queryAddress: [{ required: true, message: "请输入地址进行经纬度查询", trigger: "blur" }],
|
|
|
businessSection: [{ required: true, message: "请选择经营板块", trigger: "change" }],
|
|
|
- businessTypes: [{ required: true, message: "请选择经营种类(单选)", trigger: "change" }],
|
|
|
- businessTypesList: [{ required: true, message: "请选择经营种类", trigger: "change", type: "array" }]
|
|
|
+ businessTypeName: [{ required: true, message: "请输入经营种类", trigger: "blur" }],
|
|
|
+ businessCategoryName: [{ required: true, message: "请输入经营类目", trigger: "blur" }]
|
|
|
});
|
|
|
|
|
|
// 地区选项
|
|
|
@@ -361,46 +339,13 @@ const provinceOptions = ref<any[]>([]);
|
|
|
const cityOptions = ref<any[]>([]);
|
|
|
const districtOptions = ref<any[]>([]);
|
|
|
|
|
|
-// 经营板块列表(根据UI图静态数据)
|
|
|
+// 经营板块列表 - 固定三个选项:特色美食:1, 休闲娱乐:2, 生活服务:3
|
|
|
const businessSectionList = ref<any[]>([
|
|
|
- { id: "美食", name: "美食", value: "美食" },
|
|
|
- { id: "酒店/民宿", name: "酒店/民宿", value: "酒店/民宿" },
|
|
|
- { id: "KTV", name: "KTV", value: "KTV" },
|
|
|
- { id: "洗浴汗蒸", name: "洗浴汗蒸", value: "洗浴汗蒸" },
|
|
|
- { id: "按摩足疗", name: "按摩足疗", value: "按摩足疗" },
|
|
|
- { id: "丽人美发", name: "丽人美发", value: "丽人美发" },
|
|
|
- { id: "运动健身", name: "运动健身", value: "运动健身" },
|
|
|
- { id: "医美医疗", name: "医美医疗", value: "医美医疗" }
|
|
|
+ { dictId: 1, dictDetail: "特色美食" },
|
|
|
+ { dictId: 2, dictDetail: "休闲娱乐" },
|
|
|
+ { dictId: 3, dictDetail: "生活服务" }
|
|
|
]);
|
|
|
|
|
|
-// 经营种类列表(根据UI图静态数据)
|
|
|
-const businessTypeList = ref<any[]>([]);
|
|
|
-
|
|
|
-// 分类列表(独立的数据源)
|
|
|
-const categoryTypeList = ref<any[]>([]);
|
|
|
-
|
|
|
-// 经营板块对应的经营种类数据(根据UI图)
|
|
|
-const businessTypeMap: Record<string, any[]> = {
|
|
|
- 美食: [
|
|
|
- { id: "小吃快餐", name: "小吃快餐", value: "小吃快餐" },
|
|
|
- { id: "鱼鲜海鲜", name: "鱼鲜海鲜", value: "鱼鲜海鲜" },
|
|
|
- { id: "烧烤烤串", name: "烧烤烤串", value: "烧烤烤串" },
|
|
|
- { id: "自助餐", name: "自助餐", value: "自助餐" },
|
|
|
- { id: "面包蛋糕甜品", name: "面包蛋糕甜品", value: "面包蛋糕甜品" },
|
|
|
- { id: "水果生鲜", name: "水果生鲜", value: "水果生鲜" },
|
|
|
- { id: "火锅", name: "火锅", value: "火锅" },
|
|
|
- { id: "特色菜", name: "特色菜", value: "特色菜" },
|
|
|
- { id: "中餐", name: "中餐", value: "中餐" },
|
|
|
- { id: "西餐", name: "西餐", value: "西餐" },
|
|
|
- { id: "烤肉", name: "烤肉", value: "烤肉" },
|
|
|
- { id: "韩式料理", name: "韩式料理", value: "韩式料理" },
|
|
|
- { id: "地方菜系", name: "地方菜系", value: "地方菜系" },
|
|
|
- { id: "日式料理", name: "日式料理", value: "日式料理" },
|
|
|
- { id: "轻食", name: "轻食", value: "轻食" }
|
|
|
- ]
|
|
|
- // 其他经营板块的经营种类可以根据实际需求添加
|
|
|
-};
|
|
|
-
|
|
|
// 获取省份数据
|
|
|
const getProvinceData = async () => {
|
|
|
try {
|
|
|
@@ -468,8 +413,6 @@ const handleCityChange = async (cityCode: string) => {
|
|
|
console.error("获取区县数据失败:", error);
|
|
|
}
|
|
|
};
|
|
|
-const businessMap = new Map();
|
|
|
-
|
|
|
// 门店面积映射:字符串 -> 数字
|
|
|
const storeAreaMap: Record<string, number> = {
|
|
|
小于20平米: 1,
|
|
|
@@ -508,163 +451,6 @@ const businessStatusReverseMap: Record<number, string> = {
|
|
|
3: "永久关门"
|
|
|
};
|
|
|
|
|
|
-// 获取经营板块列表(使用静态数据,也可以从API获取后合并)
|
|
|
-const getBusinessSectionData = async () => {
|
|
|
- try {
|
|
|
- // 如果API有数据,可以合并或替换静态数据
|
|
|
- const { data } = await getBusinessSection();
|
|
|
- console.log(data, "---data--");
|
|
|
- if (data) {
|
|
|
- const dataAny = data as any;
|
|
|
- let apiData: any[] = [];
|
|
|
- // 处理不同的返回格式
|
|
|
- if (Array.isArray(dataAny)) {
|
|
|
- apiData = dataAny;
|
|
|
- } else if (dataAny.list && Array.isArray(dataAny.list)) {
|
|
|
- apiData = dataAny.list;
|
|
|
- } else if (dataAny.data && Array.isArray(dataAny.data)) {
|
|
|
- apiData = dataAny.data;
|
|
|
- }
|
|
|
- // 如果API返回了数据,可以选择使用API数据或合并
|
|
|
- // 这里保持使用静态数据,确保UI图的数据显示
|
|
|
- businessSectionList.value = apiData.length > 0 ? apiData : businessSectionList.value;
|
|
|
- businessSectionList.value.forEach(item => {
|
|
|
- businessMap.set(item.id, item);
|
|
|
- });
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.error("获取经营板块失败:", error);
|
|
|
- // 使用静态数据作为后备
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// 监听经营板块变化,获取对应的经营种类
|
|
|
-const handleBusinessSectionChange = async (sectionId: string, init?: boolean) => {
|
|
|
- if (!sectionId) {
|
|
|
- businessTypeList.value = [];
|
|
|
- formData.businessTypes = "";
|
|
|
- formData.businessTypesList = [];
|
|
|
- return;
|
|
|
- }
|
|
|
- try {
|
|
|
- const res = await getBusinessSectionTypes({ parentDictId: sectionId });
|
|
|
- console.log(res, "--data--datax");
|
|
|
-
|
|
|
- if (res && res.data) {
|
|
|
- const dataAny = res.data as any;
|
|
|
- // 处理不同的返回格式
|
|
|
- if (Array.isArray(dataAny)) {
|
|
|
- businessTypeList.value = dataAny;
|
|
|
- } else if (dataAny.data && Array.isArray(dataAny.data)) {
|
|
|
- businessTypeList.value = dataAny.data;
|
|
|
- } else if (dataAny.list && Array.isArray(dataAny.list)) {
|
|
|
- businessTypeList.value = dataAny.list;
|
|
|
- } else {
|
|
|
- businessTypeList.value = [];
|
|
|
- }
|
|
|
- } else {
|
|
|
- businessTypeList.value = [];
|
|
|
- }
|
|
|
- // 清空已选择的经营种类
|
|
|
- // if (!init) {
|
|
|
- // formData.businessTypesList = [];
|
|
|
- // }
|
|
|
- } catch (error: any) {
|
|
|
- // 忽略请求取消错误(这是正常的,当有重复请求时会被取消)
|
|
|
- if (error?.code === "ERR_CANCELED" || error?.name === "CanceledError") {
|
|
|
- console.log("请求被取消(可能是重复请求)");
|
|
|
- return;
|
|
|
- }
|
|
|
- console.error("获取经营种类失败:", error);
|
|
|
- businessTypeList.value = [];
|
|
|
- formData.businessTypesList = [];
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// 监听经营板块变化,获取对应的分类
|
|
|
-const handleCategoryChange = async (sectionId: string, init?: boolean) => {
|
|
|
- if (!sectionId) {
|
|
|
- categoryTypeList.value = [];
|
|
|
- formData.businessClassifyList = [];
|
|
|
- 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.businessClassifyList = [];
|
|
|
- // }
|
|
|
- } catch (error: any) {
|
|
|
- // 忽略请求取消错误(这是正常的,当有重复请求时会被取消)
|
|
|
- if (error?.code === "ERR_CANCELED" || error?.name === "CanceledError") {
|
|
|
- console.log("请求被取消(可能是重复请求)");
|
|
|
- return;
|
|
|
- }
|
|
|
- console.error("获取分类失败:", error);
|
|
|
- categoryTypeList.value = [];
|
|
|
- formData.businessClassifyList = [];
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// 根据经营种类ID获取对应的分类
|
|
|
-const handleCategoryChangeByType = async (typeId: string, init?: boolean) => {
|
|
|
- if (!typeId) {
|
|
|
- categoryTypeList.value = [];
|
|
|
- formData.businessClassifyList = [];
|
|
|
- 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.businessClassifyList = [];
|
|
|
- }
|
|
|
- } catch (error: any) {
|
|
|
- // 忽略请求取消错误(这是正常的,当有重复请求时会被取消)
|
|
|
- if (error?.code === "ERR_CANCELED" || error?.name === "CanceledError") {
|
|
|
- console.log("请求被取消(可能是重复请求)");
|
|
|
- return;
|
|
|
- }
|
|
|
- console.error("根据经营种类获取分类失败:", error);
|
|
|
- categoryTypeList.value = [];
|
|
|
- formData.businessClassifyList = [];
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
// 经纬度查询(用户手动触发)
|
|
|
// const handleLocationQuery = async () => {
|
|
|
// if (!formData.queryAddress) {
|
|
|
@@ -704,6 +490,9 @@ const handleSubmit = async () => {
|
|
|
// 映射营业状态为数字
|
|
|
const businessStatusNum = businessStatusMap[formData.businessStatus] ?? 0;
|
|
|
|
|
|
+ // 获取经营板块名称
|
|
|
+ const selectedSection = businessSectionList.value.find(item => item.dictId === formData.businessSection);
|
|
|
+
|
|
|
const submitData = {
|
|
|
id: formData.id ? Number(formData.id) : undefined,
|
|
|
isChain: formData.isChain,
|
|
|
@@ -721,8 +510,11 @@ const handleSubmit = async () => {
|
|
|
storePositionLongitude: formData.storePositionLongitude,
|
|
|
storePositionLatitude: formData.storePositionLatitude,
|
|
|
businessStatus: formData.businessStatus,
|
|
|
- businessTypes: formData.businessTypes ? [formData.businessTypes] : [],
|
|
|
- businessClassifyList: formData.businessClassifyList ?? []
|
|
|
+ // 经营板块相关参数(与移动端保持一致)
|
|
|
+ businessSection: formData.businessSection,
|
|
|
+ businessSectionName: selectedSection ? selectedSection.dictDetail : "",
|
|
|
+ businessTypeName: formData.businessTypeName,
|
|
|
+ businessCategoryName: formData.businessCategoryName
|
|
|
};
|
|
|
|
|
|
let result;
|
|
|
@@ -802,33 +594,13 @@ const getStoreDetailData = async () => {
|
|
|
console.log(formData, "----参数3");
|
|
|
// 设置经营板块和种类
|
|
|
if (storeData.businessSection) {
|
|
|
- const sectionId = String(storeData.businessSection);
|
|
|
- // 直接调用 handleBusinessSectionChange,因为 isLoadingDetail 会阻止 watch 触发
|
|
|
- await handleBusinessSectionChange(sectionId);
|
|
|
- // 调用 handleCategoryChange 获取分类数据
|
|
|
- await handleCategoryChange(sectionId);
|
|
|
- // 设置 businessSection(此时 watch 不会触发,因为 isLoadingDetail 为 true)
|
|
|
- formData.businessSection = sectionId;
|
|
|
- // 设置已选择的经营种类(单选)
|
|
|
- if (storeData.businessTypes) {
|
|
|
- const typeId = String(storeData.businessTypes[0]);
|
|
|
- formData.businessTypes = typeId;
|
|
|
- // 根据经营种类获取对应的分类
|
|
|
- await handleCategoryChangeByType(typeId, true);
|
|
|
- }
|
|
|
- // 设置已选择的经营种类(多选)
|
|
|
- if (storeData.businessTypesList) {
|
|
|
- formData.businessTypesList = Array.isArray(storeData.businessTypesList)
|
|
|
- ? storeData.businessTypesList
|
|
|
- : [storeData.businessTypesList];
|
|
|
- }
|
|
|
- // 设置已选择的分类
|
|
|
- if (storeData.businessClassifyList) {
|
|
|
- formData.businessClassifyList = Array.isArray(storeData.businessClassifyList)
|
|
|
- ? storeData.businessClassifyList
|
|
|
- : [storeData.businessClassifyList];
|
|
|
- }
|
|
|
+ formData.businessSection = storeData.businessSection;
|
|
|
+ formData.businessSectionName = storeData.businessSectionName ?? "";
|
|
|
}
|
|
|
+ formData.businessTypeName = storeData.businessTypeName ?? "";
|
|
|
+ // 如果 businessCategoryName 是 0,转换为空字符串
|
|
|
+ const categoryName = storeData.businessCategoryName;
|
|
|
+ formData.businessCategoryName = categoryName === 0 || categoryName === "0" ? "" : categoryName || "";
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error("获取店铺详情失败:", error);
|
|
|
@@ -837,7 +609,7 @@ const getStoreDetailData = async () => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-// 监听经营板块变化
|
|
|
+// 监听经营板块变化,更新经营板块名称
|
|
|
watch(
|
|
|
() => formData.businessSection,
|
|
|
newValue => {
|
|
|
@@ -846,41 +618,18 @@ watch(
|
|
|
return;
|
|
|
}
|
|
|
if (newValue) {
|
|
|
- console.log(newValue, "--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.businessClassifyList = [];
|
|
|
+ const selectedSection = businessSectionList.value.find(item => item.dictId === newValue);
|
|
|
+ formData.businessSectionName = selectedSection ? selectedSection.dictDetail : "";
|
|
|
+ // 当切换到生活服务时,如果经营类目是 0,清空它
|
|
|
+ if (newValue === 3 && formData.businessCategoryName === "0") {
|
|
|
+ formData.businessCategoryName = "";
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
);
|
|
|
|
|
|
onMounted(async () => {
|
|
|
await getProvinceData();
|
|
|
- await getBusinessSectionData();
|
|
|
- // 如果默认选中了经营板块,自动加载对应的经营种类和分类
|
|
|
- if (formData.businessSection) {
|
|
|
- await handleBusinessSectionChange(formData.businessSection, true);
|
|
|
- await handleCategoryChange(formData.businessSection, true);
|
|
|
- }
|
|
|
await getStoreDetailData();
|
|
|
});
|
|
|
</script>
|
|
|
@@ -958,7 +707,13 @@ onMounted(async () => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-.businessSection-item {
|
|
|
- width: 33%;
|
|
|
+
|
|
|
+// 经营板块单选按钮样式
|
|
|
+.business-section-radio-group {
|
|
|
+ display: flex;
|
|
|
+ gap: 40px;
|
|
|
+ .businessSection-item {
|
|
|
+ flex: 0 0 auto;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|