feat: 企微助手 - 群活码 - 详情&复制交互逻辑&接口联调

project/src/components/assembly/screen/customerService.vue

@@ -157,6 +157,16 @@ export default {
 
   },
   methods: {
+    // 执行一遍组件的created方法(拓展组件 群活码详情用)
+    handleCreatedFn() {
+      if (this.userList.length == 0) {
+        this.init()
+      } else {
+        this.selectUser = JSON.parse(JSON.stringify(this.final_result));
+        this.changeSelect()
+        this.afferent_init()
+      }
+    },
     afferent_init () {//从外面传入
       let selectUser = [];
       if (this.afferent_users && this.afferent_users.length > 0) {

project/src/components/groupCode/createGroupCode.vue

@@ -153,6 +153,7 @@ import dialogGroup from './components/dialogGroup.vue'
 import chatGroupOptions from './components/chatGroupOptions.vue'
 import selfCustomerservice from '@/components/assembly/screen/customerService.vue'
 import Sortable from 'sortablejs'
+import _lodash from 'lodash'
 
 export default {
   name: "createGroupCode",
@@ -173,14 +174,18 @@ export default {
         is_limit: 0, // 渠道群管理（是否设置群上限）
         user_list: [], // 客服（生效成员） 数组回显 'a,b' => ['a', 'b']
         leading_words: '', // 引导话术
-      }
+      },
+      rule_id: this.$route.query.id || '', // 群活码id
+      detailFromApi: Object.freeze({}), // 后端返回的详情完整数据
     }
   },
   computed: {
+    // 当前操作是否为"编辑"
     isEdit() {
       const { id = '', type = '' } = this.$route.query
       return id && type === 'edit'
     },
+    // 当前操作是否为"复制"
     isCopy() {
       const { id = '', type = '' } = this.$route.query
       return id && type === 'copy'
@@ -189,12 +194,74 @@ export default {
   created() {
     // 获取分组列表
     this.handleGetGroupOptions()
+    console.log('isEdit => ', this.isEdit)
+    console.log('isCopy => ', this.isCopy)
+    // 编辑、复制 => 获取群活码详情
+    if (this.isEdit || this.isCopy) {
+      this.handleGetDetail()
+    }
   },
   mounted() {
     // 表格行拖拽
 	  this.handleRowDrop()
   },
   methods: {
+    // 获取群活码详情数据
+    async handleGetDetail() {
+      console.log('handleGetDetail => ')
+      try {
+        this.loading = true
+        const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.groupCode_ruleDetail, {
+          params: { rule_id: this.rule_id }
+        })
+        if (res && res.errno == 0) {
+          const { rst = {} } = res
+          // 备份接口数据
+          this.detailFromApi = Object.freeze(_lodash.cloneDeep(rst))
+          // 回显数据
+          this.setGroupFormData(rst)
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+          this.$router.go(-1)
+        }
+      } catch (error) {
+        console.log('error => ', error)
+        this.loading = false
+      } finally {
+        // this.loading = false
+      }
+    },
+    // 回显详情数据
+    async setGroupFormData(detail) {
+      try {
+        // 基础属性回显
+        const keys = ['name', 'group_id', 'chat_id_list', 'join_type', 'is_limit', 'leading_words']
+        keys.forEach(k => {
+          this.groupForm[k] = detail[k]
+        })
+
+        // 回显生效成员
+        this.groupForm.user_list = detail.user_list.split(',')
+        await this.$nextTick()
+        this.$refs.selfKefu && this.$refs.selfKefu.handleCreatedFn()
+
+        // 回显群聊列表"群名称"
+        const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.groupCode_chatGroupList, {
+          params: { keyword: '' }
+        })
+        if (res && res.errno == 0 && Array.isArray(res.rst)) {
+          detail.chat_id_list.forEach((item, idx) => {
+            const isFound = res.rst.find(chat => chat.chat_id === item.chat_id)
+            if (isFound) detail.chat_id_list[idx].name = isFound.name
+          })
+          this.groupForm.chat_id_list = [...detail.chat_id_list]
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      } finally {
+        this.loading = false
+      }
+    },
     // 注册表格行拖拽事件
     handleRowDrop() {
       const tbody = document.querySelector('.el-table__body-wrapper tbody')
@@ -272,6 +339,13 @@ export default {
     handleGetParams() {
       const url = `${this.URL.BASEURL}${this.URL[this.isEdit ? 'groupCode_editRule' : 'groupCode_setRule']}`
       const { name, group_id, join_type, is_limit, user_list, leading_words, chat_id_list } = this.groupForm
+
+      // 删除后端返回的 sort 属性
+      const chatIdList = chat_id_list.map(c => {
+        delete c.sort
+        return {...c}
+      })
+
       const params = {
         name,
         group_id,
@@ -279,7 +353,7 @@ export default {
         is_limit,
         user_list: user_list.join(','),
         leading_words,
-        chat_id_list: JSON.stringify(chat_id_list),
+        chat_id_list: JSON.stringify(chatIdList),
       }
 
       return { url, params }

project/src/components/groupCode/index.vue

@@ -192,11 +192,17 @@ export default {
     },
     // 编辑
     editCode(id){
-      this.$router.push({path:'/createChannelCode',query: {id:id}})
+      this.$router.push({
+        path: '/createGroupCode',
+        query: { id, type: 'edit' }
+      })
     },
     // 复制
     copyCode(id){
-      this.$router.push({path:'/createChannelCode',query: {id:id,type:'copy'}})
+      this.$router.push({
+        path: '/createGroupCode',
+        query: { id, type: 'copy' }
+      })
     },
     // 下载
     downloadIamge(imgsrc, imgname){