运营商选择

jsowell-ui/src/components/MapContainer/MapContainer.vue

@@ -81,8 +81,8 @@ export default {
         //     this.initMap(this.lat, this.lng);
         //   });
         // },
-        handleSearchResultClick(data) {
         // 在这里处理点击事件
+        handleSearchResultClick(data) {
             // console.log(data); // 你可以在控制台打印点击结果的数据
             let lat = data.entr_location.lat;
             let lng = data.entr_location.lng;

jsowell-ui/src/views/pile/merchant/index.vue

@@ -237,16 +237,22 @@
                     </el-col>
                 </el-row>
                 <el-row>
-
                     <el-row>
-                        <el-col span="12">
+                        <el-col :span="12">
                             <el-form-item label="地址" prop="address">
-                                <el-input v-model="form.address" maxlength="30" placeholder="请输入地址" />
+                                <el-input
+                                    v-model="form.address"
+                                    maxlength="30"
+                                    placeholder="请输入地址"
+                                />
                             </el-form-item>
                         </el-col>
 
                         <el-col :span="12">
-                            <el-form-item label="客服电话号码" prop="servicePhone">
+                            <el-form-item
+                                label="客服电话号码"
+                                prop="servicePhone"
+                            >
                                 <el-input
                                     v-model="form.servicePhone"
                                     maxlength="15"
@@ -255,12 +261,15 @@
                             </el-form-item>
                         </el-col>
                     </el-row>
-
                 </el-row>
                 <el-row>
                     <el-col :span="12">
-                        <el-form-item label="运营商等级" prop="merchantLevel">
+                        <el-form-item label="运营商等级">
-                            <el-select v-model="form.merchantLevel" placeholder="请选择运营商等级">
+                            <el-select
+                                v-model="form.merchantLevel"
+                                placeholder="请选择运营商等级"
+                                @change="grade"
+                            >
                                 <el-option
                                     v-for="item in options"
                                     :key="item.label"
@@ -270,9 +279,16 @@
                             </el-select>
                         </el-form-item>
                     </el-col>
-                    <el-col :span="12" v-if="form.merchantLevel === '2'">
+                    <el-col :span="12">
-                        <el-form-item label="上级运营商" prop="parentId">
+                        <el-form-item
-                            <el-select v-model="form.parentId" placeholder="请选择上级运营商">
+                            label="上级运营商"
+                            prop="parentId"
+                            v-if="form.merchantLevel === '2'"
+                        >
+                            <el-select
+                                v-model="form.parentId"
+                                placeholder="请选择上级运营商"
+                            >
                                 <el-option
                                     v-for="item in firstLevelMerchant"
                                     :key="item.merchantName"
@@ -282,9 +298,12 @@
                             </el-select>
                         </el-form-item>
                     </el-col>
-
+                    <el-col :span="12">
-                    <el-col :span="12" v-if="form.merchantLevel === '1'">
+                        <el-form-item
-                        <el-form-item label="小程序APPID" prop="appId">
+                            label="小程序APPID"
+                            prop="appId"
+                            v-if="form.merchantLevel === '1'"
+                        >
                             <el-input
                                 v-model="form.appId"
                                 maxlength="30"
@@ -352,7 +371,8 @@ import {
     getMerchant,
     delMerchant,
     addMerchant,
-    updateMerchant, queryFirstLevelMerchant,
+    updateMerchant,
+    queryFirstLevelMerchant,
 } from "@/api/pile/merchant";
 import { checkPermi } from "@/utils/permission";
 import { getToken } from "@/utils/auth";
@@ -400,13 +420,16 @@ export default {
                 servicePhone: null,
                 logoUrl: null,
             },
-            options: [{
+            options: [
-                value: '1',
+                {
-                label: '一级运营商'
+                    value: "1",
-            }, {
+                    label: "一级运营商",
-                value: '2',
+                },
-                label: '二级运营商'
+                {
-            }],
+                    value: "2",
+                    label: "二级运营商",
+                },
+            ],
             // 表单参数
             form: {},
             // 表单校验
@@ -462,6 +485,21 @@ export default {
                         trigger: "blur",
                     },
                 ],
+                appId: [
+                    {
+                        required: true,
+                        message: "请输入小程序APPID",
+                        trigger: "blur",
+                    },
+                ],
+                //   验证规则：
+                parentId: [
+                    {
+                        required: true,
+                        message: "请选择上级运营商",
+                        trigger: "change",
+                    },
+                ],
             },
         };
     },
@@ -544,6 +582,8 @@ export default {
                 updateBy: null,
                 updateTime: null,
                 delFlag: null,
+                parentId: null,
+                appId: null,
             };
             this.resetForm("form");
         },
@@ -581,6 +621,14 @@ export default {
                 this.title = "修改运营商信息";
             });
         },
+        // 选择运营商等级后清空
+        grade() {
+            if (this.form.merchantLevel === "1") {
+                this.form.parentId = null;
+            } else if (this.form.merchantLevel === "2") {
+                this.form.appId = null;
+            }
+        },
         /** 提交按钮 */
         submitForm() {
             console.log("this.form", this.form, this.form.logoUrl);
@@ -635,4 +683,7 @@ export default {
 ::v-deep .el-upload-list--picture .el-upload-list__item {
     width: 40%;
 }
+::v-deep .el-select > .el-input {
+    width: 280px;
+}
 </style>