|
|
@@ -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>
|
