代码提交

src/api/his/friendship.js

@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+// 查询当前销售 IM 好友绑定关系列表
+export function listImFriendshipBind(query) {
+  return request({
+    url: '/his/friendship/bindList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询可绑定用户列表
+export function listBindUser(query) {
+  return request({
+    url: '/his/friendship/bindUserList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询可绑定外部联系人列表
+export function listBindExternalContact(query) {
+  return request({
+    url: '/his/friendship/bindExternalContactList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 添加用户和销售 IM 好友
+export function addUserAndSaleFriend(data) {
+  return request({
+    url: '/his/friendship/addUserAndSaleFriend',
+    method: 'post',
+    data: data
+  })
+}

src/views/app/imAddFriend/index.vue

@@ -0,0 +1,456 @@
+<template>
+  <div class="app-container">
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="绑定关系列表" name="list">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
+          <el-form-item label="用户ID" prop="userId">
+            <el-input
+              v-model="queryParams.userId"
+              placeholder="请输入用户ID"
+              clearable
+              size="small"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="用户昵称" prop="userNickName">
+            <el-input
+              v-model="queryParams.userNickName"
+              placeholder="请输入用户昵称"
+              clearable
+              size="small"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="销售公司ID" prop="companyId">
+            <el-input
+              v-model="queryParams.companyId"
+              placeholder="请输入销售公司ID"
+              clearable
+              size="small"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="销售公司名称" prop="companyName">
+            <el-input
+              v-model="queryParams.companyName"
+              placeholder="请输入销售公司名称"
+              clearable
+              size="small"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="销售ID" prop="companyUserId">
+            <el-input
+              v-model="queryParams.companyUserId"
+              placeholder="请输入销售ID"
+              clearable
+              size="small"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="销售名称" prop="companyUserNickName">
+            <el-input
+              v-model="queryParams.companyUserNickName"
+              placeholder="请输入销售名称"
+              clearable
+              size="small"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-row :gutter="10" class="mb8">
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <el-table border v-loading="loading" :data="bindList">
+          <el-table-column label="用户ID" align="center" prop="userId" width="100" />
+          <el-table-column label="用户昵称" align="center" prop="userNickName" min-width="120" show-overflow-tooltip />
+          <el-table-column label="用户头像" align="center" width="90">
+            <template slot-scope="scope">
+              <el-popover placement="right" trigger="hover" v-if="scope.row.userAvatar">
+                <img slot="reference" :src="scope.row.userAvatar" width="50" height="50" style="border-radius: 4px;">
+                <img :src="scope.row.userAvatar" style="max-width: 120px;">
+              </el-popover>
+              <span v-else>-</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="销售公司ID" align="center" prop="companyId" width="110" />
+          <el-table-column label="销售公司名称" align="center" prop="companyName" min-width="140" show-overflow-tooltip />
+          <el-table-column label="销售ID" align="center" prop="companyUserId" width="100" />
+          <el-table-column label="销售名称" align="center" prop="companyUserNickName" min-width="120" show-overflow-tooltip />
+          <el-table-column label="绑定时间" align="center" prop="createTime" width="160" />
+        </el-table>
+
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </el-tab-pane>
+
+      <el-tab-pane label="手动绑定好友" name="bind">
+        <el-form label-width="100px" size="small">
+          <el-form-item label="绑定类型">
+            <el-radio-group v-model="bindForm.addType" @change="handleAddTypeChange">
+              <el-radio :label="1">手动发课添加好友</el-radio>
+              <el-radio :label="2">自动发课添加好友</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-form>
+
+        <el-divider content-position="left">选择用户</el-divider>
+        <el-form :inline="true" size="small" class="mb8">
+          <el-form-item label="用户ID">
+            <el-input v-model="userQuery.userId" placeholder="请输入用户ID" clearable style="width: 160px" />
+          </el-form-item>
+<!--          <el-form-item label="用户昵称">-->
+<!--            <el-input v-model="userQuery.userNickName" placeholder="请输入用户昵称" clearable style="width: 160px" />-->
+<!--          </el-form-item>-->
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="searchBindUser">查询</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-table
+          ref="userTable"
+          border
+          v-loading="userLoading"
+          :data="userList"
+          @selection-change="handleUserSelectionChange"
+        >
+          <el-table-column
+            type="selection"
+            width="55"
+            align="center"
+          />
+          <el-table-column label="用户ID" align="center" prop="userId" width="100" />
+          <el-table-column label="用户昵称" align="center" prop="nickName" min-width="120" show-overflow-tooltip />
+          <el-table-column label="用户头像" align="center" width="90">
+            <template slot-scope="scope">
+              <el-popover placement="right" trigger="hover" v-if="scope.row.avatar">
+                <img slot="reference" :src="scope.row.avatar" width="50" height="50" style="border-radius: 4px;">
+                <img :src="scope.row.avatar" style="max-width: 120px;">
+              </el-popover>
+              <span v-else>-</span>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="userTotal > 0"
+          :total="userTotal"
+          :page.sync="userQuery.pageNum"
+          :limit.sync="userQuery.pageSize"
+          @pagination="searchBindUser"
+        />
+
+        <div v-if="bindForm.addType === 1 && selectedUsers.length" class="selected-tip">
+          已选用户：{{ selectedUsers.map(item => resolveRowUserId(item)).join('、') }}
+        </div>
+        <div v-if="bindForm.addType === 2 && selectedUser" class="selected-tip">
+          已选用户：{{ resolveRowUserId(selectedUser) }}
+        </div>
+
+        <template v-if="bindForm.addType === 2">
+          <el-divider content-position="left">选择外部联系人</el-divider>
+          <el-form :inline="true" size="small" class="mb8">
+            <el-form-item label="联系人ID">
+              <el-input v-model="externalQuery.id" placeholder="请输入联系人ID" clearable style="width: 140px" />
+            </el-form-item>
+            <el-form-item label="联系人昵称">
+              <el-input v-model="externalQuery.name" placeholder="请输入联系人昵称" clearable style="width: 140px" />
+            </el-form-item>
+            <el-form-item label="销售公司">
+              <el-input v-model="externalQuery.companyName" placeholder="请输入销售公司名称" clearable style="width: 140px" />
+            </el-form-item>
+            <el-form-item label="所属销售">
+              <el-input v-model="externalQuery.companyUserNickName" placeholder="请输入销售名称" clearable style="width: 140px" />
+            </el-form-item>
+            <el-form-item label="企业微信">
+              <el-input v-model="externalQuery.corpName" placeholder="请输入企业微信名称" clearable style="width: 140px" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="searchExternalContact">查询</el-button>
+            </el-form-item>
+          </el-form>
+
+          <el-table
+            ref="externalTable"
+            border
+            v-loading="externalLoading"
+            :data="externalList"
+            @selection-change="handleExternalSelectionChange"
+          >
+            <el-table-column
+              type="selection"
+              width="55"
+              align="center"
+            />
+            <el-table-column label="联系人ID" align="center" prop="id" width="100" />
+            <el-table-column label="联系人昵称" align="center" prop="name" min-width="110" show-overflow-tooltip />
+            <el-table-column label="销售公司" align="center" prop="companyName" min-width="120" show-overflow-tooltip />
+            <el-table-column label="所属销售" align="center" prop="companyUserNickName" min-width="100" show-overflow-tooltip />
+            <el-table-column label="企业微信" align="center" prop="corpName" min-width="120" show-overflow-tooltip />
+            <el-table-column label="外部用户ID" align="center" prop="externalUserId" min-width="130" show-overflow-tooltip />
+            <el-table-column label="头像" align="center" width="90">
+              <template slot-scope="scope">
+                <el-popover placement="right" trigger="hover" v-if="scope.row.avatar">
+                  <img slot="reference" :src="scope.row.avatar" width="50" height="50" style="border-radius: 4px;">
+                  <img :src="scope.row.avatar" style="max-width: 120px;">
+                </el-popover>
+                <span v-else>-</span>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <pagination
+            v-show="externalTotal > 0"
+            :total="externalTotal"
+            :page.sync="externalQuery.pageNum"
+            :limit.sync="externalQuery.pageSize"
+            @pagination="searchExternalContact"
+          />
+          <div v-if="selectedExternal" class="selected-tip">
+            已选外部联系人：{{ resolveRowExternalId(selectedExternal) }}
+          </div>
+        </template>
+
+        <div class="bind-action">
+          <el-button type="primary" :loading="submitLoading" @click="submitBind">提交绑定</el-button>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import {
+  listImFriendshipBind,
+  listBindUser,
+  listBindExternalContact,
+  addUserAndSaleFriend
+} from '@/api/his/friendship'
+
+export default {
+  name: 'ImAddFriend',
+  data() {
+    return {
+      activeTab: 'list',
+      loading: true,
+      showSearch: true,
+      total: 0,
+      bindList: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        userId: null,
+        userNickName: null,
+        companyId: null,
+        companyName: null,
+        companyUserId: null,
+        companyUserNickName: null
+      },
+      bindForm: {
+        addType: 1
+      },
+      userLoading: false,
+      userList: [],
+      userTotal: 0,
+      userQuery: {
+        pageNum: 1,
+        pageSize: 10,
+        userId: null,
+        userNickName: null
+      },
+      selectedUsers: [],
+      selectedUser: null,
+      externalLoading: false,
+      externalList: [],
+      externalTotal: 0,
+      externalQuery: {
+        pageNum: 1,
+        pageSize: 10,
+        id: null,
+        name: null,
+        companyName: null,
+        companyUserNickName: null,
+        corpName: null
+      },
+      selectedExternal: null,
+      submitLoading: false
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.loading = true
+      listImFriendshipBind(this.queryParams).then(response => {
+        this.bindList = response.rows
+        this.total = response.total
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    resetQuery() {
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    handleAddTypeChange() {
+      this.selectedUsers = []
+      this.selectedUser = null
+      this.selectedExternal = null
+      this.userList = []
+      this.externalList = []
+      this.$nextTick(() => {
+        if (this.$refs.userTable) {
+          this.$refs.userTable.clearSelection()
+        }
+        if (this.$refs.externalTable) {
+          this.$refs.externalTable.clearSelection()
+        }
+      })
+    },
+    resolveRowUserId(row) {
+      if (!row) {
+        return null
+      }
+      return row.userId != null ? row.userId : row.user_id
+    },
+    resolveRowExternalId(row) {
+      if (!row) {
+        return null
+      }
+      return row.id != null ? row.id : row.externalContactId
+    },
+    handleUserSelectionChange(selection) {
+      if (Number(this.bindForm.addType) === 1) {
+        this.selectedUsers = selection
+        return
+      }
+      if (selection.length > 1) {
+        const lastRow = selection[selection.length - 1]
+        this.$nextTick(() => {
+          this.$refs.userTable.clearSelection()
+          this.$refs.userTable.toggleRowSelection(lastRow, true)
+        })
+        this.selectedUser = lastRow
+        return
+      }
+      this.selectedUser = selection.length ? selection[0] : null
+    },
+    handleExternalSelectionChange(selection) {
+      if (selection.length > 1) {
+        const lastRow = selection[selection.length - 1]
+        this.$nextTick(() => {
+          this.$refs.externalTable.clearSelection()
+          this.$refs.externalTable.toggleRowSelection(lastRow, true)
+        })
+        this.selectedExternal = lastRow
+        return
+      }
+      this.selectedExternal = selection.length ? selection[0] : null
+    },
+    searchBindUser() {
+      if (!this.userQuery.userId && !this.userQuery.userNickName) {
+        this.$message.warning('请至少输入用户ID或用户昵称')
+        return
+      }
+      this.userLoading = true
+      listBindUser({
+        ...this.userQuery,
+        addType: this.bindForm.addType
+      }).then(response => {
+        this.userList = response.rows || []
+        this.userTotal = response.total || 0
+        this.userLoading = false
+      }).catch(() => {
+        this.userLoading = false
+      })
+    },
+    searchExternalContact() {
+      const q = this.externalQuery
+      if (!q.id && !q.name && !q.companyName && !q.companyUserNickName && !q.corpName) {
+        this.$message.warning('请至少输入一个查询条件')
+        return
+      }
+      this.externalLoading = true
+      listBindExternalContact(this.externalQuery).then(response => {
+        this.externalList = response.rows || []
+        this.externalTotal = response.total || 0
+        this.externalLoading = false
+      }).catch(() => {
+        this.externalLoading = false
+      })
+    },
+    submitBind() {
+      if (Number(this.bindForm.addType) === 1) {
+        if (!this.selectedUsers.length) {
+          this.$message.warning('请选择要绑定的用户')
+          return
+        }
+        this.submitLoading = true
+        addUserAndSaleFriend({
+          addType: 1,
+          userIds: this.selectedUsers.map(item => this.resolveRowUserId(item))
+        }).then(res => {
+          this.$message.success(res.msg || '操作成功')
+          this.handleAddTypeChange()
+          this.activeTab = 'list'
+          this.getList()
+        }).finally(() => {
+          this.submitLoading = false
+        })
+      } else {
+        const userId = this.resolveRowUserId(this.selectedUser)
+        const externalId = this.resolveRowExternalId(this.selectedExternal)
+        if (userId == null || userId === '') {
+          this.$message.warning('请选择一个用户')
+          return
+        }
+        if (externalId == null || externalId === '') {
+          this.$message.warning('请选择一个外部联系人')
+          return
+        }
+        this.submitLoading = true
+        addUserAndSaleFriend({
+          addType: 2,
+          userIds: [Number(userId)],
+          externalUserId: Number(externalId)
+        }).then(res => {
+          this.$message.success(res.msg || '操作成功')
+          this.handleAddTypeChange()
+          this.activeTab = 'list'
+          this.getList()
+        }).finally(() => {
+          this.submitLoading = false
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.selected-tip {
+  margin-top: 12px;
+  color: #606266;
+  font-size: 13px;
+}
+.bind-action {
+  margin-top: 20px;
+}
+</style>