feat: 企微助手 - 成员管理 - 信息绑定(adq回传)

project/src/assets/config/interface_api.js

@@ -22,6 +22,7 @@ var api = {
   logout: "/api/loginOut",
   userList: "/api/user/userList",
   memberList: "/api/user/users",
+  bindUserActionSetId: "/api/user/bindUserActionSetId",
   addWayList: "/api/customer/addWayList",
   tagList: "/api/tag/tagList",
   addTag: "/api/tag/addTag",

project/src/components/manage/dialog/memberInfoBind.vue

@@ -9,14 +9,16 @@
     <div class="form-wrap" v-loading="loading">
       <div class="form-item">
         <span class="lable required">所属类型</span>
-        <el-select v-model="form.type" size="small" placeholder="请选择成员所属类型">
+        <span>ADQ</span><!-- 写死为ADQ -->
+        <!-- <el-select v-model="form.type" size="small" placeholder="请选择成员所属类型">
           <el-option v-for="t in typeOptions" :key="t.value" :label="t.label" :value="t.value" />
-        </el-select>
+        </el-select> -->
       </div>
       <div class="form-item">
-        <span class="lable required">数据源ID</span>
-        <el-input v-model="form.sourceId" size="small" placeholder="请输入数据源ID" />
+        <span class="lable">数据源ID</span>
+        <el-input v-model="form.user_action_set_id" size="small" placeholder="请输入数据源ID" clearable />
       </div>
+      <div class="form-tips">可传空，此时会将原来设置的数据源置空</div>
     </div>
     <div slot="footer" class="dialog-footer">
       <el-button size="mini" @click="handleCancel">取 消</el-button>
@@ -39,21 +41,29 @@ export default {
       type: Boolean,
       default: () => false
     },
+    // 成员信息
+    userInfo: {
+      type: Object,
+      default: () => ({
+        user_action_set_id: '',
+        user_id: '',
+      })
+    },
   },
   data() {
     return {
       loading: false,
       typeOptions: Object.freeze(typeOptions),
       form: {
-        type: '',
-        sourceId: '',
+        user_action_set_id: '',
+        user_id: '',
       }
     }
   },
   watch: {
-    // 弹框展示时初始化数据
+    // 弹框展示时获取表单数据
     dialogVisible(isShow) {
-      isShow && this.handleInit()
+      isShow && this.handleGetFormData()
     },
   },
   methods: {
@@ -61,11 +71,12 @@ export default {
       try {
         // 表单校验
         await this.handleFormValidate()
-        this.loading = true
         const params = { ...this.form }
-        const { data: res } = await this.$axios.post(`${this.URL.BASEURL}${this.URL.xxx}`, params)
+        this.loading = true
+        const { data: res = {} } = await this.$axios.post(`${this.URL.BASEURL}${this.URL.bindUserActionSetId}`, params)
         if (res && res.errno == 0) {
           this.$message.success('操作成功')
+          this.handleClearFormData()
           this.$emit('confirm')
         } else if (res.errno != 4002) {
           this.$message.warning(res.err || '操作失败')
@@ -77,26 +88,33 @@ export default {
       }
     },
     handleCancel() {
+      this.handleClearFormData()
       this.$emit('cancel')
     },
     // 执行表单校验
     handleFormValidate() {
       return new Promise((resolve, reject) => {
-        if (!this.form.type) {
-          this.$message.warning('请选择成员所属类型')
-          reject('表单校验未通过')
-        } else if (!this.form.sourceId) {
-          this.$message.warning('请输入数据源ID')
-          reject('表单校验未通过')
-        } else {
-          resolve('表单校验通过')
-        }
+        // if (!this.form.user_action_set_id) {
+        //   this.$message.warning('请输入数据源ID')
+        //   reject('表单校验未通过')
+        // } else {
+        //   resolve('表单校验通过')
+        // }
+
+        // 此版本无必填项
+        resolve('表单校验通过')
       })
     },
-    // 初始化弹框表单数据
-    handleInit() {
-      this.form.type = ''
-      this.form.sourceId = ''
+    // 获取弹框表单数据
+    handleGetFormData() {
+      const { user_action_set_id = '', user_id = '' } = this.userInfo
+      this.form.user_action_set_id = user_action_set_id
+      this.form.user_id = user_id
+    },
+    // 清空弹框表单数据
+    handleClearFormData() {
+      this.form.user_action_set_id = ''
+      this.form.user_id = ''
     },
   },
 };
@@ -105,6 +123,7 @@ export default {
 <style lang="scss" scoped>
 .bind-dialog {
   .form-wrap {
+    padding: 0 10px;
     .form-item {
       display: flex;
       align-items: center;
@@ -117,16 +136,26 @@ export default {
         font-weight: 500;
         flex-shrink: 0;
 
-        &.required::before {
-          content: "*";
-          color: #f56c6c;
-          margin-right: 4px;
+        &.required {
+          position: relative;
+          &::before {
+            position: absolute;
+            left: -8px;
+            top: 0;
+            content: "*";
+            color: #f56c6c;
+          }
         }
       }
       .el-select {
         width: 100%;
       }
     }
+    .form-tips {
+      margin: 5px 0 0 80px;
+      font-size: 13px;
+      color: #999;
+    }
   }
   .dialog-footer {
     text-align: center;

project/src/components/manage/memberManage.vue

@@ -55,16 +55,20 @@
               </div>
             </template>
           </el-table-column>
-          <!-- TODO: 新增"所属类型"&"信息绑定" => 待联调 -->
-          <!-- <el-table-column label="所属类型" align="center">
+          <el-table-column label="所属类型" align="center">
             <template slot-scope="{row}">
-              <span>ADQ(mock)</span>
+              <span>{{ getOrderTypeDesc(row.order_type) }}</span>
             </template>
-          </el-table-column> -->
+          </el-table-column>
+          <el-table-column label="数据源ID" align="center">
+            <template slot-scope="{row}">
+              <span>{{ row.user_action_set_id || '-' }}</span>
+            </template>
+          </el-table-column>
           <el-table-column label="操作" align="center" min-width="80">
             <template slot-scope="scope">
               <span class="c-00B38A pointer" @click="detailEvent(scope.row)">详情</span>
-              <!-- <span class="c-00B38A pointer ml-6" @click="onClickInfoBind(scope.row)">信息绑定</span> -->
+              <span class="c-00B38A pointer ml-6" @click="onClickInfoBind(scope.row)">信息绑定</span>
             </template>
           </el-table-column>
 
@@ -125,6 +129,7 @@
     <!-- S 信息绑定 - 弹框 -->
     <member-info-bind
       :dialogVisible="infoBindDialogVisible"
+      :userInfo="currentBindInfo"
       @cancel="handleInfoBindCancel"
       @confirm="handleInfoBindConfirm"
     />
@@ -136,6 +141,13 @@
 import selfinput from '../assembly/screen/input.vue'
 import userDetail from './userDetail/index.vue'
 import memberInfoBind from './dialog/memberInfoBind.vue'
+import { orderTypeOptions } from '@/assets/js/staticTypes'
+
+const orderTypeDesc = new Map([
+  [String(orderTypeOptions.MP), 'MP'],
+  [String(orderTypeOptions.ADQ), 'ADQ'],
+])
+
 export default {
   name: 'memberManage',
   components: {
@@ -161,7 +173,9 @@ export default {
       // standbyList:[],
       // standbyVal:'',
       // visible:false,
+
       infoBindDialogVisible: false, // 控制“信息绑定”弹框显示
+      currentBindInfo: {}, // 当前需要绑定的成员信息
     }
   },
   created () {
@@ -242,12 +256,13 @@ export default {
       this.init(1, this.keyword)
     },
 
-    onClickInfoBind(currentMember) {
-      console.log('onClickInfoBind currentMember => ', currentMember)
+    onClickInfoBind({ user_id = '', user_action_set_id = '' }) {
+      this.currentBindInfo = { user_id, user_action_set_id }
       this.infoBindDialogVisible = true
     },
     // 执行信息绑定 => 取消
     handleInfoBindCancel() {
+      this.currentBindInfo = {}
       this.infoBindDialogVisible = false
     },
     // 执行信息绑定 => 发送
@@ -255,6 +270,9 @@ export default {
       this.infoBindDialogVisible = false
       this.init(undefined, this.keyword)
     },
+    getOrderTypeDesc(type) {
+      return orderTypeDesc.get(String(type)) || '-'
+    },
   }
 }
 </script>