feat: 账号管理 - 新建账号&编辑账号&关联账号回显逻辑

project/src/components/manage/roleManage.vue

@@ -85,7 +85,7 @@
           <div class="name">选择主体:</div>
           <div class="ipt">
             <el-select class="select-cls" style="width: 100%" size="small" v-model="corp_ids" :disabled="is_super_admin == 1" multiple
-              placeholder="请选择">
+              placeholder="请选择" filterable>
               <el-option v-for="item in corpList" :key="item.id" :label="item.corp_name" :value="item.id">
               </el-option>
             </el-select>
@@ -95,7 +95,7 @@
           <div class="name">选择角色:</div>
           <div class="ipt">
             <el-select class="select-cls" style="width: 100%" size="small" v-model="role_ids" :disabled="is_super_admin == 1" multiple
-              placeholder="请选择">
+              placeholder="请选择" filterable>
               <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id">
               </el-option>
             </el-select>
@@ -271,6 +271,10 @@ export default {
         corp_id: this.corp_ids,
         is_promoter: this.is_promoter ? 1 : 0,
 
+        is_all_adq: this.is_all_adq ? 1 : 0,
+        adq_account: this.is_all_adq ? '' : (this.adq_account.map(account => account.id).join(',') || ''), // 如果全选则不需要传账号列表
+        is_all_mp: this.is_all_mp ? 1 : 0,
+        mp_account: this.is_all_mp ? '' : (this.mp_account.map(account => account.id).join(',') || ''), // 如果全选则不需要传账号列表
         can_export: this.can_export ? 1 : 0,
       }).then((res) => {
         var res = res.data
@@ -304,6 +308,10 @@ export default {
         id: this.id,
         is_promoter: this.is_promoter ? 1 : 0,
 
+        is_all_adq: this.is_all_adq ? 1 : 0,
+        adq_account: this.is_all_adq ? '' : (this.adq_account.map(account => account.id).join(',') || ''), // 如果全选则不需要传账号列表
+        is_all_mp: this.is_all_mp ? 1 : 0,
+        mp_account: this.is_all_mp ? '' : (this.mp_account.map(account => account.id).join(',') || ''), // 如果全选则不需要传账号列表
         can_export: this.can_export ? 1 : 0,
       }).then((res) => {
         var res = res.data
@@ -340,6 +348,8 @@ export default {
           // this.is_super_admin=res.rst.is_super_admin
           this.role_ids = res.rst.role_id
           this.corp_ids = res.rst.corp_id
+
+          this.handleGetAccountData(res.rst) // 回显关联账号相关数据
         } else {
           this.$message({
             message: res.err,
@@ -393,6 +403,90 @@ export default {
       console.log('this.mp_account => ', this.mp_account)
       console.log('this.is_all_mp => ', this.is_all_mp)
     },
+    // 编辑账号 - 回显关联账号相关数据
+    async handleGetAccountData(detailData) {
+      console.log('detailData => ', detailData)
+      const { is_all_adq, is_all_mp, can_export, adq_account, mp_account } = detailData
+      this.is_all_adq = is_all_adq == 1 ? true : false
+      this.is_all_mp = is_all_mp == 1 ? true : false
+      this.can_export = can_export == 1 ? true : false
+      this.adq_account = []
+      this.mp_account = []
+
+      // 回显 ADQ账号
+      const allAdqAccount = await this.handleGetAdqAccount()
+      if (this.is_all_adq) { // 全选 => 回显全部账号
+        this.adq_account = [...allAdqAccount]
+      } else if (adq_account) { // 接口中有值 => 回显接口中的账号
+        this.adq_account = adq_account.split(',').map(account => ({ id: account, name: account })) // adq账号 id 和 name取值相同
+      }
+
+      // 回显 MP账号
+      const allMpAccount = await this.handleGetMpAccount()
+      if (this.is_all_mp) { // 全选 => 回显全部账号
+        this.mp_account = [...allMpAccount]
+      } else if (mp_account) { // 接口中有值 => 回显接口中的账号
+        const _temp = mp_account.split(',').map(account => ({ id: account, name: '' }))
+        // 回显mp账号名称
+        _temp.forEach(item => {
+          const isFound = allMpAccount.find(account => item.id === account.id)
+          if (isFound) item.name = isFound.name
+        })
+        this.mp_account = [..._temp]
+      }
+      console.log('this.adq_account => ', this.adq_account)
+      console.log('this.mp_account => ', this.mp_account)
+    },
+    // 获取全部ADQ账号
+    handleGetAdqAccount() {
+      return new Promise(async (resolve, reject) => {
+        try {
+          this.dialogLoading = true
+          const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.adqAccount_list, {
+            params: { is_select: 1 }
+          })
+          if (res && res.errno == 0) {
+            const allAdqAccount = res.rst.map(item => ({
+              id: item.account_id,
+              name: item.account_id,
+            }))
+            resolve(allAdqAccount)
+          } else if (res.errno != 4002) {
+            this.$message.warning(res.err)
+            reject(res.err)
+          }
+        } catch (error) {
+          console.log('error => ', error)
+        } finally {
+          this.dialogLoading = false
+        }
+      })
+    },
+    // 获取全部MP账号
+    handleGetMpAccount() {
+      return new Promise(async (resolve, reject) => {
+        try {
+          this.dialogLoading = true
+          const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.pitcher_wxAccountList, {
+            params: { is_select: 1 }
+          })
+          if (res && res.errno == 0) {
+            const allMpAccount = res.rst.map(item => ({
+              id: item.wechat_account_id,
+              name: item.account_name,
+            }))
+            resolve(allMpAccount)
+          } else if (res.errno != 4002) {
+            this.$message.warning(res.err)
+            reject(res.err)
+          }
+        } catch (error) {
+          console.log('error => ', error)
+        } finally {
+          this.dialogLoading = false
+        }
+      })
+    },
   }
 }
 </script>