商户详情添加查看绑定信息的弹窗

src/api/enterprise.js

@@ -4,6 +4,7 @@ let api = {
   getEnterpriseList: '/wx-enterprise-list', // 获取企业管理列表
   getEnterpriseDetail: '/enterprise-detail', // 获取企业详情
   refreshEnterpriseInfo: '/setting/wx-enterprise-info-flush', // 刷新企业信息
+  storeRangeDetail: '/store-range-detail', // 查询绑定信息
 }
 
 export default getFetch(api, '/hb-manage-operation-web');

src/views/enterprise/enterprise-detail.vue

@@ -49,7 +49,7 @@
         <template slot-scope="{ row }">
           <!-- 0 全部 1部分分组 2 部分门店 -->
           <span v-if="row.bindStoreMode == 0">所有门店</span>
-          <el-button type="text" v-else>
+          <el-button type="text" v-else @click="getBindDetail(row, 0)">
             {{ row.bindCount }}{{ row.bindStoreMode == 1 ? '个分组' : row.bindStoreMode == 2 ? '家门店' : '' }}
           </el-button>
         </template>
@@ -58,19 +58,28 @@
         <template slot-scope="{ row }">
           <!-- 0 全部 1部分分组 2 部分门店 -->
           <span v-if="row.shareStoreMode == 0">所有门店</span>
-          <el-button type="text" v-else>
+          <el-button type="text" v-else @click="getBindDetail(row, 1)">
             {{ row.shareCount }}{{ row.shareStoreMode == 1 ? '个分组' : row.shareStoreMode == 2 ? '家门店' : '' }}
           </el-button>
         </template>
       </el-table-column>
     </el-table>
+    <el-dialog :visible.sync="bindInfo.show" title="门店授权范围" width="600px">
+      <el-form label-width="140px">
+        <el-form-item label="门店绑定授权范围">
+          <el-select style="width: 392px" disabled multiple :value="bindInfo.selected">
+            <el-option v-for="el in bindInfo.data" :key="el.id" :value="el.id" :label="el.name"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import api from '@/api/enterprise.js';
 
-const { getEnterpriseDetail, refreshEnterpriseInfo } = api;
+const { getEnterpriseDetail, refreshEnterpriseInfo, storeRangeDetail } = api;
 
 export default {
   name: 'enterprise-detail',
@@ -82,6 +91,11 @@ export default {
       ],
       enterpriseId: '',
       enterpriseDetail: {},
+      bindInfo: {
+        show: false,
+        data: [],
+        selected: []
+      }
     }
   },
   created() {
@@ -101,6 +115,17 @@ export default {
     },
     onRefresh() {
       refreshEnterpriseInfo().then(this.getEnterpriseDetail);
+    },
+    getBindDetail(storeData, type) {
+      const params = {
+        enterpriseId: storeData.enterpriseId,
+        operationType: type, // 0 门店绑定 1门店分享
+      }
+      this.bindInfo.show = true;
+      storeRangeDetail(params).then(res => {
+        this.bindInfo.data = res.result || [];
+        this.bindInfo.selected = this.bindInfo.data.map(el => el.id);
+      })
     }
   }
 }