优化添加店铺选择主账号

src/views/shop/components/addShop.vue

@@ -5,8 +5,20 @@
                 <el-form-item label="店铺名称" prop="shopName">
                     <el-input v-model="form.shopName" placeholder="请输入门店名称"></el-input>
                 </el-form-item>
-                <el-form-item label="主店账号" prop="mainId">
+                <el-form-item label="店铺类型">
-                    <el-input v-model="form.mainId" placeholder="请输入主店账号"></el-input>
+                    <el-radio-group v-model="form.type">
+                        <el-radio-button label="only">单店</el-radio-button>
+                        <el-radio-button label="chain">连锁店</el-radio-button>
+                        <el-radio-button label="join">加盟店</el-radio-button>
+                    </el-radio-group>
+                    <div class="tips">请谨慎修改！！！</div>
+                </el-form-item>
+                <el-form-item label="主店账号" prop="mainId" v-if="form.type != 'only'">
+                    <el-select v-model="form.mainId" placeholder="请选择主店铺" filterable remote reserve-keyword
+                        :remote-method="getTableData" :loading="shopListLoading">
+                        <el-option v-for="item in shopList" :label="`ID:${item.id} - 名称：${item.shopName}`" :value="item.id"
+                            :key="item.id"></el-option>
+                    </el-select>
                 </el-form-item>
                 <el-form-item label="连锁店扩展店名">
                     <el-input v-model="form.chainName" placeholder="请输入连锁店扩展店名"></el-input>
@@ -26,14 +38,6 @@
                     </el-radio-group>
                     <div class="tips">请谨慎修改！！！</div>
                 </el-form-item>
-                <el-form-item label="店铺类型">
-                    <el-radio-group v-model="form.type">
-                        <el-radio-button label="only">单店</el-radio-button>
-                        <el-radio-button label="chain">连锁店</el-radio-button>
-                        <el-radio-button label="join">加盟店</el-radio-button>
-                    </el-radio-group>
-                    <div class="tips">请谨慎修改！！！</div>
-                </el-form-item>
                 <el-form-item label="管理方式" v-if="form.type != 'only'">
                     <el-radio-group v-model="form.tube_type">
                         <el-radio-button label="0">不可直接管理</el-radio-button>
@@ -54,7 +58,7 @@
                 <el-form-item label="登录账号" prop="account">
                     <el-input v-model="form.account" placeholder="请输入登录账号"></el-input>
                 </el-form-item>
-                <el-form-item label="登录密码" prop="password">
+                <el-form-item label="登录密码" prop="password" v-if="!form.id">
                     <el-input type="password" show-password v-model="form.password" placeholder="请输入登录密码"></el-input>
                 </el-form-item>
                 <el-form-item label="联系电话">
@@ -153,7 +157,7 @@
 import { getToken } from '@/utils/auth'
 import { mapGetters } from 'vuex'
 import crudQiNiu from '@/api/tools/qiniu'
-import { tbShopInfoPost, geocode } from '@/api/shop'
+import { tbShopInfoPost, geocode, tbShopInfo } from '@/api/shop'
 export default {
     computed: {
         ...mapGetters([
@@ -259,13 +263,32 @@ export default {
             amapOptions: {
                 center: [108.946465, 34.347984],
                 position: []
-            }
+            },
+            shopListLoading: false,
+            shopList: []
         }
     },
     mounted() {
         this.resetForm = { ...this.form }
     },
     methods: {
+        // 获取商家列表
+        async getTableData(query = '') {
+            this.shopListLoading = true
+            try {
+                const res = await tbShopInfo({
+                    page: 0,
+                    size: 100,
+                    shopName: query,
+                    type: 'only'
+                })
+                this.shopListLoading = false
+                this.shopList = res.content
+            } catch (error) {
+                this.shopListLoading = false
+                console.log(error)
+            }
+        },
         onSearchResult(res) {
             this.locationSearchList = res
             this.amapOptions.center = [res[0].lng, res[0].lat]
@@ -348,6 +371,8 @@ export default {
             }
         },
         show(obj) {
+            this.getTableData()
+
             this.dialogVisible = true
             if (obj && obj.id) {
                 this.form = { ...obj }