Merge branch 'feature/point'

src/pages/Groupmeal/Point/components/pointDialog.vue

@@ -24,7 +24,25 @@
                     <el-input class="dialog-input" v-model="addForm.phone"></el-input>
                 </el-form-item>
                 <el-form-item label="商圈" class="form_item" prop="business_circle_id">
-                    <el-select v-model="addForm.business_circle_id" placeholder="请选择商圈">
+                    <!-- <el-select v-model="addForm.business_circle_id" placeholder="请选择商圈">
+                        <el-option
+                            :label="item.business_circle_name"
+                            :value="item.business_circle_id"
+                            :key="item.business_circle_id"
+                            v-for="item in businessCircleList"
+                        ></el-option>
+                    </el-select> -->
+
+                    <el-select
+                        v-model="addForm.business_circle_id"
+                        filterable
+                        remote
+                        clearable
+                        reserve-keyword
+                        placeholder="请选择商圈"
+                        :remote-method="remoteMethod"
+                        :loading="loading"
+                    >
                         <el-option
                             :label="item.business_circle_name"
                             :value="item.business_circle_id"
@@ -58,11 +76,12 @@
     </div>
 </template>
 <script>
-    import { reactive, toRefs, watch, ref } from "vue";
+    import { reactive, toRefs, watch, ref, onMounted } from "vue";
     import myMap from "../../../Activity/releaseProduc/components/myMap";
     import ActivityService from "@/service/Activity/index";
     import { ElMessage } from "element-plus";
     import dayjs from "dayjs";
+    import { getTagList, getBusinessCircleList } from "@/service/point";
 
     let checkphone = (rule, value, callback) => {
         let myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
@@ -88,12 +107,12 @@
                     return [];
                 },
             },
-            businessCircleList: {
-                type: Array,
-                default() {
-                    return [];
-                },
-            },
+            // businessCircleList: {
+            //     type: Array,
+            //     default() {
+            //         return [];
+            //     },
+            // },
         },
         components: { myMap },
         setup(props, { emit }) {
@@ -127,6 +146,8 @@
                     phone: [{ validator: checkphone, trigger: "blur" }],
                     business_circle_id: [{ required: true, message: "请选择商圈", trigger: ["blur", "change"] }],
                 },
+                loading: false,
+                businessCircleList: [],
             });
 
             const addFormRef = ref(null);
@@ -202,6 +223,34 @@
                 dataMap.addForm.latitude = mapInfo.lat;
             };
 
+            const remoteMethod = async (query) => {
+                if (query !== "") {
+                    dataMap.loading = true;
+                    const { list } = await getBusinessCircleList({ business_circle_name: query });
+                    console.log("商圈商圈列表", list);
+                    dataMap.loading = false;
+                    dataMap.businessCircleList = list;
+                } else {
+                    onGetBusinessCircleList();
+                }
+            };
+
+            // 获取 商圈商圈列表
+            const onGetBusinessCircleList = async () => {
+                try {
+                    const { list } = await getBusinessCircleList();
+                    console.log("商圈商圈列表", list);
+                    dataMap.businessCircleList = list;
+                } catch (e) {
+                    console.log(e);
+                    ElMessage.error("获取商圈列表失败");
+                }
+            };
+
+            onMounted(async () => {
+                onGetBusinessCircleList();
+            });
+
             return {
                 ...toRefs(dataMap),
                 obSubmit,
@@ -209,6 +258,7 @@
                 addFormRef,
                 closeFormDialog,
                 getMapInfo,
+                remoteMethod,
             };
         },
     };
@@ -271,5 +321,8 @@
         :deep(.el-input__inner) {
             min-width: 300px !important;
         }
+        :deep(.el-form-item__content) {
+            text-align: left !important;
+        }
     }
 </style>

src/pages/Groupmeal/Point/components/search.vue

@@ -20,7 +20,25 @@
                 <el-input v-model="searchForm.keywords" placeholder="请输入自提点名称" clearable></el-input>
             </el-form-item>
             <el-form-item label="商圈：">
-                <el-select v-model="searchForm.business_circle_ids" placeholder="请选择商圈" clearable multiple>
+                <!-- <el-select v-model="searchForm.business_circle_ids" placeholder="请选择商圈" clearable multiple>
+                    <el-option
+                        :label="item.business_circle_name"
+                        :value="item.business_circle_id"
+                        :key="item.business_circle_id"
+                        v-for="item in businessCircleList"
+                    ></el-option>
+                </el-select> -->
+
+                <el-select
+                    v-model="searchForm.business_circle_ids"
+                    filterable
+                    remote
+                    clearable
+                    reserve-keyword
+                    placeholder="请选择商圈"
+                    :remote-method="remoteMethod"
+                    :loading="loading"
+                >
                     <el-option
                         :label="item.business_circle_name"
                         :value="item.business_circle_id"
@@ -143,12 +161,25 @@
                 onGetBusinessCircleList();
             });
 
+            const remoteMethod = async (query) => {
+                if (query !== "") {
+                    dataMap.loading = true;
+                    const { list } = await getBusinessCircleList({ business_circle_name: query });
+                    console.log("商圈商圈列表", list);
+                    dataMap.loading = false;
+                    dataMap.businessCircleList = list;
+                } else {
+                    onGetBusinessCircleList();
+                }
+            };
+
             return {
                 ...toRefs(dataMap),
                 onTagStatus,
                 onSearch,
                 onGetBusinessCircleList,
                 onGetTagList,
+                remoteMethod,
             };
         },
     };

src/pages/Groupmeal/Point/index.vue

@@ -54,7 +54,6 @@
                 :dialogVisible="pointDialogVisible"
                 @closeDialog="pointDialogVisible = false"
                 :tagList="tagList"
-                :businessCircleList="businessCircleList"
                 @onGetTakePlaceList="onGetTakePlaceList"
             />