Kaynağa Gözat

feat(store): 更新商铺装修信息接口与经营分类功能

- 修改经营板块和经营种类接口地址,使用新的业务分类接口
- 新增获取第三级分类接口方法 getThirdLevelList
- 更新娱乐许可证到期时间显示逻辑,为空时展示 "--"
- 优化经营种类选择器,从复选框改为单选框并增加分类选择功能
- 添加分类数据监听逻辑,支持根据经营板块和经营种类联动加载
- 完善表单提交字段,新增 businessTypes 和 businessClassify 参数
- 调整样式细节,增加提示文字右边距以优化布局显示效果
congxuesong 2 hafta önce
ebeveyn
işleme
9ef676dc56

+ 6 - 2
src/api/modules/storeDecoration.ts

@@ -9,14 +9,18 @@ import httpApi from "@/api/indexApi";
 
 //获取商铺经营板块列表
 export const getBusinessSection = () => {
-  return httpApi.get(`/alienStorePlatform/storePlatformRenovation/getBusinessSection`, {}, { loading: false });
+  return httpApi.get(`/alienStorePlatform/businessSection/getFirstLevelList`, {}, { loading: false });
 };
 
 //获取商铺经营种类列表
 export const getBusinessSectionTypes = params => {
-  return httpApi.get(`/alienStorePlatform/storePlatformRenovation/getBusinessSectionTypes`, params, { loading: false });
+  return httpApi.get(`/alienStorePlatform/businessSection/getSecondLevelList`, params, { loading: false });
 };
 
+//获取商铺经营分类
+export const getThirdLevelList = params => {
+  return httpApi.get(`/alienStorePlatform/businessSection/getThirdLevelList`, params, { loading: false });
+};
 //所在地区
 export const getDistrict = (params?: any) => {
   return httpApi.get(`/alienStore/gaode/getDistrict`, params, { loading: false });

+ 3 - 2
src/views/licenseManagement/entertainmentLicense.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="card content-box">
     <div class="content-section">
-      <div class="tip-text">娱乐经营许可证到期时间:{{ entertainmentLicenseExpireTime }}</div>
+      <div class="tip-text">娱乐经营许可证到期时间:{{ entertainmentLicenseExpireTime || "--" }}</div>
       <div class="action-buttons">
         <el-button type="primary" @click="handleReplace"> 更换 </el-button>
         <el-button type="primary" @click="handleViewChangeRecord"> 查看变更记录 </el-button>
@@ -180,7 +180,7 @@ const initData = async () => {
   const res: any = await getEntertainmentBusinessLicense(params);
   if (res.code == 200) {
     licenseImage.value = res.data[0].imgUrl;
-    entertainmentLicenseExpireTime.value = res.data[0].expireTime || 11;
+    entertainmentLicenseExpireTime.value = res.data[0].expireTime;
   }
 };
 
@@ -607,6 +607,7 @@ const getStatusText = (status: string) => {
   margin-bottom: 50px;
 }
 .tip-text {
+  margin-right: 450px;
   font-size: 18px;
   color: var(--el-text-color-regular);
 }

+ 148 - 6
src/views/storeDecoration/basicStoreInformation/index.vue

@@ -171,9 +171,20 @@
           </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">
+                <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" />
               </div>
             </el-checkbox-group>
@@ -218,6 +229,7 @@ import { Search, Lock } from "@element-plus/icons-vue";
 import {
   getBusinessSection,
   getBusinessSectionTypes,
+  getThirdLevelList,
   getDistrict,
   getStoreDetail,
   saveStoreInfo,
@@ -252,7 +264,9 @@ const formData = reactive({
   storeBlurb: "",
   queryAddress: "",
   businessSection: "",
+  businessTypes: "",
   businessTypesList: [] as string[],
+  businessClassify: [] as string[],
   expirationTime: "",
   foodLicenceExpirationTime: "",
   storePosition: "",
@@ -334,6 +348,7 @@ 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" }]
 });
 
@@ -357,6 +372,9 @@ const businessSectionList = ref<any[]>([
 // 经营种类列表(根据UI图静态数据)
 const businessTypeList = ref<any[]>([]);
 
+// 分类列表(独立的数据源)
+const categoryTypeList = ref<any[]>([]);
+
 // 经营板块对应的经营种类数据(根据UI图)
 const businessTypeMap: Record<string, any[]> = {
   美食: [
@@ -520,11 +538,12 @@ const getBusinessSectionData = async () => {
 const handleBusinessSectionChange = async (sectionId: string, init?: boolean) => {
   if (!sectionId) {
     businessTypeList.value = [];
+    formData.businessTypes = "";
     formData.businessTypesList = [];
     return;
   }
   try {
-    const res = await getBusinessSectionTypes({ parentId: sectionId });
+    const res = await getBusinessSectionTypes({ parentDictId: sectionId });
     console.log(res, "--data--datax");
 
     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 () => {
 //   if (!formData.queryAddress) {
@@ -613,7 +716,9 @@ const handleSubmit = async () => {
         storePosition: formData.storePosition,
         storePositionLongitude: formData.storePositionLongitude,
         storePositionLatitude: formData.storePositionLatitude,
-        businessStatus: formData.businessStatus
+        businessStatus: formData.businessStatus,
+        businessTypes: formData.businessTypes ?? "",
+        businessClassify: formData.businessClassify ?? []
       };
 
       let result;
@@ -696,14 +801,29 @@ const getStoreDetailData = async () => {
         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);
+          formData.businessTypes = typeId;
+          // 根据经营种类获取对应的分类
+          await handleCategoryChangeByType(typeId, true);
+        }
+        // 设置已选择的经营种类(多选)
         if (storeData.businessTypesList) {
           formData.businessTypesList = Array.isArray(storeData.businessTypesList)
             ? storeData.businessTypesList
             : [storeData.businessTypesList];
         }
+        // 设置已选择的分类
+        if (storeData.businessClassify) {
+          formData.businessClassify = Array.isArray(storeData.businessClassify)
+            ? storeData.businessClassify
+            : [storeData.businessClassify];
+        }
       }
     }
   } catch (error) {
@@ -724,6 +844,27 @@ watch(
     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.businessClassify = [];
     }
   }
 );
@@ -731,9 +872,10 @@ watch(
 onMounted(async () => {
   await getProvinceData();
   await getBusinessSectionData();
-  // 如果默认选中了经营板块,自动加载对应的经营种类
+  // 如果默认选中了经营板块,自动加载对应的经营种类和分类
   if (formData.businessSection) {
     await handleBusinessSectionChange(formData.businessSection, true);
+    await handleCategoryChange(formData.businessSection, true);
   }
   await getStoreDetailData();
 });