feat: 授权管理 - 分配账号

project/src/assets/config/interface_api.js

@@ -476,6 +476,9 @@ var api = {
   orderPercent_list: '/api/order/getShareInProportionConf', // 分成比例配置 - 配置列表
   orderPercent_setConf: '/api/order/setShareInProportionConf', // 分成比例配置 - 编辑
 
+  authority_bindUser: '/api/admin/corpBindMultipleUser', // 授权管理 - 批量分配账号
+  authority_getBindUser: '/api/admin/getCorpBindUserList', // 授权管理 - 获取已分配结果
+
 };
 
 export { api };

project/src/components/manage/authorityManage.vue

@@ -28,6 +28,7 @@
               <div class="corpName">{{item.corp_name?item.corp_name:item.corp_full_name?item.corp_full_name:item.corp_full_name}}</div>
               <div class="created_at">{{item.created_at}}</div>
               <button class="refresh_button" @click="resetCorp(item)">同步</button>
+              <button class="refresh_button w-75" @click="onClickBindAccount(item)">分配账号</button>
             </div>
           </div>
         </div>
@@ -45,13 +46,26 @@
     <el-dialog title="企微授权" :visible.sync="authorizeFalg" width="400px" center>
       <authorize></authorize>
     </el-dialog>
+
+    <!-- 分配账号 -->
+    <bindAccountDialog
+      :dialogVisible="bindAccountVisible"
+      :id="currentId"
+      @confirm="onConfirmBindAccount"
+      @cancel="onCancelBindAccount"
+    />
   </div>
 </template>
 <script>
 import authorize from './authorize.vue'
 import selfInput from '@/components/assembly/screen/input.vue'
+import bindAccountDialog from './bindAccountDialog.vue'
 export default {
-  components: { selfInput, authorize },
+  components: {
+    selfInput,
+    authorize,
+    bindAccountDialog,
+  },
   data () {
     return {
       type: 1,
@@ -66,7 +80,10 @@ export default {
       gzhData: [],
       bindTsFlag: false,
       tsFalg: false,
-      tsData: {}
+      tsData: {},
+
+      bindAccountVisible: false,
+      currentId: '',
     }
   },
   created () {
@@ -201,6 +218,19 @@ export default {
         this.init(val)
       }
     },
+
+    // 监听点击“分配账号”
+    onClickBindAccount(corp) {
+      this.currentId = corp.id
+      this.bindAccountVisible = true
+    },
+    onConfirmBindAccount() {
+      this.init()
+      this.bindAccountVisible = false
+    },
+    onCancelBindAccount() {
+      this.bindAccountVisible = false
+    },
   }
 }
 </script>
@@ -270,6 +300,9 @@ export default {
       font-size: 15px;
       border: none;
       margin-top: 10px;
+      &.w-75 {
+        width: 75px;
+      }
     }
     .corpName {
       color: #44546b;

project/src/components/manage/bindAccountDialog.vue

@@ -0,0 +1,259 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :before-close="handleCancel"
+    class="bindAccount-dialog"
+    :title="title"
+    width="550px"
+    :close-on-click-modal="false"
+  >
+    <div class="form-wrap" v-loading="loading">
+      <div class="form-item flex-start">
+        <span class="lable required">账号</span>
+        <div class="account-wrap">
+          <el-select
+            v-model="form.user_id_list"
+            size="small" placeholder="请选择账号"
+            clearable filterable multiple collapse-tags
+            @change="onChangeUserIdList"
+          >
+            <el-option v-for="item in accountOptions" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+          <div class="user-wrap" v-if="form.user_info_list && form.user_info_list.length">
+            <el-tag
+              class="user-item-wrap"
+              v-for="(user, userIdx) in form.user_info_list"
+              :key="user.id"
+              closable
+              disable-transitions
+              @close="onCloseUserTag(userIdx)"
+            >
+              {{ user.name }}
+            </el-tag>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button size="mini" @click="handleCancel">取 消</el-button>
+      <el-button size="mini" type="primary" @click="handleConfirm" :disabled="loading">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "bindAccountDialog",
+  props: {
+    // 控制弹框是否显示
+    dialogVisible: {
+      type: Boolean,
+      default: () => false
+    },
+    id: {
+      type: Number | String,
+      default: () => '',
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      accountOptions: [], // ADQ投放账号选项
+      allAccountInfo: [],
+      form: {
+        user_id_list: [],
+        user_info_list: [],
+      }
+
+    }
+  },
+  computed: {
+    title() {
+      return `分配账号`
+    },
+  },
+  watch: {
+    dialogVisible(isShow) {
+      if (isShow) {
+        // 获取账号选项列表
+        this.handleGetOptions()
+        // 获取表单数据
+        this.handleGetFormData()
+      }
+    },
+  },
+  methods: {
+    // 获取账号选项列表
+    async handleGetOptions() {
+      const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.manager_list, {
+        params: {
+          page: 1,
+          page_size: 500
+        }
+      })
+      if (res && res.errno == 0) {
+        this.accountOptions = res.rst.data
+      } else if (res.errno != 4002) {
+        this.$message.warning(res.err)
+      }
+    },
+    async handleConfirm() {
+      try {
+        // 表单校验
+        await this.handleFormValidate()
+        const url = `${this.URL.BASEURL}${this.URL.authority_bindUser}`
+        const params = {
+          id: this.id,
+          user_id_list: JSON.stringify(this.form.user_id_list),
+        }
+        this.loading = true
+        const { data: res = {} } = await this.$axios.post(url, params)
+        if (res && res.errno == 0) {
+          this.$message.success('操作成功')
+          this.handleClearFormData()
+          this.$emit('confirm')
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err || '操作失败')
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    handleCancel() {
+      this.handleClearFormData()
+      this.$emit('cancel')
+    },
+    // 执行表单校验
+    handleFormValidate() {
+      return new Promise((resolve, reject) => {
+        if (!this.form.user_id_list || !this.form.user_id_list.length) {
+          this.$message.warning('请选择账号')
+          reject('表单校验未通过')
+        } else {
+          resolve('表单校验通过')
+        }
+      })
+    },
+    // 获取表单数据
+    async handleGetFormData() {
+      try {
+        // 表单校验
+        const url = `${this.URL.BASEURL}${this.URL.authority_getBindUser}`
+        const params = { id: this.id }
+        this.loading = true
+        const { data: res = {} } = await this.$axios.get(url, { params })
+        if (res && res.errno == 0) {
+          this.form.user_id_list = res.rst.map(user => user.user_id)
+          this.form.user_info_list = res.rst.map(user => ({
+            id: user.user_id,
+            name: user.user_name,
+          }))
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err || '操作失败')
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    // 清空弹框表单数据
+    handleClearFormData() {
+      this.form.user_id_list = []
+      this.handleGetUserInfoList([])
+    },
+    onCloseUserTag(idx) {
+      const currentId = this.form.user_info_list[idx].id
+      const userIdIdx = this.form.user_id_list.findIndex(id => id === currentId)
+      this.form.user_id_list.splice(userIdIdx, 1)
+      this.form.user_info_list.splice(idx, 1)
+    },
+    onChangeUserIdList(val) {
+      this.form.user_id_list = [...val]
+      this.handleGetUserInfoList(val)
+    },
+    handleGetUserInfoList(user_id_list) {
+      if (!user_id_list || !user_id_list.length) {
+        this.form.user_info_list = []
+        return false
+      }
+      this.allAccountInfo = [...this.form.user_info_list, ...this.accountOptions]
+      const user_info_list = []
+      user_id_list.forEach(userId => {
+        const accountInfo = this.allAccountInfo.find(account => account.id === userId)
+        if (accountInfo) user_info_list.push(accountInfo)
+      })
+      this.form.user_info_list = [...user_info_list]
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.bindAccount-dialog {
+  .form-wrap {
+    padding: 0 20px 0 10px;
+    min-height: 100px;
+    .form-item {
+      display: flex;
+      align-items: center;
+      margin-top: 16px;
+      &.flex-start {
+        align-items: flex-start;
+        .lable {
+          margin-top: 6px;
+        }
+      }
+      &:first-child {
+        margin-top: 0;
+      }
+      .lable {
+        width: 60px;
+        font-weight: 500;
+        flex-shrink: 0;
+
+        &.required {
+          position: relative;
+          &::before {
+            position: absolute;
+            left: -8px;
+            top: 0;
+            content: "*";
+            color: #f56c6c;
+          }
+        }
+      }
+      /deep/ .el-select {
+        width: 100%;
+      }
+
+      .account-wrap {
+        flex: 1;
+        .user-wrap {
+          box-sizing: border-box;
+          width: 100%;
+          background-color: rgb(247, 247, 247);
+          margin-top: 10px;
+          padding: 10px 10px 0 10px;
+          display: flex;
+          align-items: center;
+          flex-wrap: wrap;
+          .user-item-wrap {
+            margin: 0 14px 10px 0;
+          }
+        }
+      }
+    }
+    .form-tips {
+      margin: 5px 0 0 80px;
+      font-size: 13px;
+      color: #999;
+    }
+  }
+  .dialog-footer {
+    text-align: center;
+  }
+}
+</style>