411 lines
16 KiB
Vue
411 lines
16 KiB
Vue
<template>
|
||
<ContentWrap>
|
||
<!-- 搜索工作栏 -->
|
||
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
|
||
<el-form-item label="大哥的用户id" prop="displayId">
|
||
<el-input v-model="queryParams.displayId" placeholder="请输入大哥的用户id" clearable @keyup.enter="handleQuery"
|
||
class="!w-240px" />
|
||
</el-form-item>
|
||
<!-- <el-form-item label="大哥的uid" prop="userIdStr">
|
||
<el-input v-model="queryParams.userIdStr" placeholder="请输入大哥的uid" clearable @keyup.enter="handleQuery"
|
||
class="!w-240px" />
|
||
</el-form-item>
|
||
<el-form-item label="大哥的用户昵称" prop="nickname">
|
||
<el-input v-model="queryParams.nickname" placeholder="请输入大哥的用户昵称" clearable @keyup.enter="handleQuery"
|
||
class="!w-240px" />
|
||
</el-form-item> -->
|
||
<el-form-item label="大哥的等级" prop="level">
|
||
<el-input v-model="queryParams.levelMin" :placeholder="t('newHosts.min')" clearable @keyup.enter="handleQuery"
|
||
class="!w-115px" />
|
||
<span>
|
||
-
|
||
</span>
|
||
<el-input v-model="queryParams.levelMax" :placeholder="t('newHosts.max')" clearable @keyup.enter="handleQuery"
|
||
class="!w-115px" />
|
||
</el-form-item>
|
||
<!-- <el-form-item label="大哥打赏的金币" prop="hostcoins">
|
||
<el-input v-model="queryParams.hostcoins" placeholder="请输入大哥打赏的金币" clearable @keyup.enter="handleQuery"
|
||
class="!w-240px" />
|
||
</el-form-item>
|
||
<el-form-item label="大哥的粉丝数" prop="followerCount">
|
||
<el-input v-model="queryParams.followerCount" placeholder="请输入大哥的粉丝数" clearable @keyup.enter="handleQuery"
|
||
class="!w-240px" />
|
||
</el-form-item>
|
||
<el-form-item label="大哥的关注数" prop="followingCount">
|
||
<el-input v-model="queryParams.followingCount" placeholder="请输入大哥的关注数" clearable @keyup.enter="handleQuery"
|
||
class="!w-240px" />
|
||
</el-form-item> -->
|
||
<el-form-item label="大哥所在的地区" prop="region">
|
||
<el-input v-model="queryParams.region" placeholder="请输入大哥所在的地区" clearable @keyup.enter="handleQuery"
|
||
class="!w-240px" />
|
||
</el-form-item>
|
||
<el-form-item label="大哥打赏的历史最高金币" prop="historicHighCoins">
|
||
<el-input v-model="queryParams.historicHighCoinsMin" :placeholder="t('newHosts.min')" clearable
|
||
@keyup.enter="handleQuery" class="!w-115px" />
|
||
<span>
|
||
-
|
||
</span>
|
||
<el-input v-model="queryParams.historicHighCoinsMax" :placeholder="t('newHosts.max')" clearable
|
||
@keyup.enter="handleQuery" class="!w-115px" />
|
||
</el-form-item>
|
||
<el-form-item label="大哥历史打赏金币总和" prop="totalGiftCoins">
|
||
<el-input v-model="queryParams.totalGiftCoinsMin" :placeholder="t('newHosts.min')" clearable
|
||
@keyup.enter="handleQuery" class="!w-115px" />
|
||
<span>
|
||
-
|
||
</span>
|
||
<el-input v-model="queryParams.totalGiftCoinsMax" :placeholder="t('newHosts.max')" clearable
|
||
@keyup.enter="handleQuery" class="!w-115px" />
|
||
</el-form-item>
|
||
<el-form-item label="大哥所在的直播间的主播id" prop="hostDisplayId">
|
||
<el-input v-model="queryParams.hostDisplayId" placeholder="请输入大哥所在的直播间的主播id" clearable
|
||
@keyup.enter="handleQuery" class="!w-240px" />
|
||
</el-form-item>
|
||
<!-- <el-form-item label="该数据所属的账号id" prop="userId">
|
||
<el-input v-model="queryParams.userId" placeholder="请输入该数据所属的账号id" clearable @keyup.enter="handleQuery"
|
||
class="!w-240px" />
|
||
</el-form-item> -->
|
||
<el-form-item label="创建时间" prop="createTime">
|
||
<el-date-picker v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
|
||
start-placeholder="开始日期" end-placeholder="结束日期"
|
||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-220px" />
|
||
</el-form-item>
|
||
<el-form-item label="是否洽谈" prop="operationStatus">
|
||
<el-select v-model="queryParams.operationStatus" placeholder="请选择是否洽谈" clearable class="!w-240px">
|
||
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.BIGBIOTHER_NEGOTIATION)" :key="dict.value"
|
||
:label="dict.label" :value="dict.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item :label="t('newHosts.allocationUser')" prop="allocationUser">
|
||
<el-select v-model="queryParams.userId" :placeholder="t('newHosts.placeAllocationUser')" clearable
|
||
class="!w-240px">
|
||
<el-option v-for="(user, index) in allocationUserList" :key="index" :label="user.label" :value="user.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button @click="handleQuery">
|
||
<Icon icon="ep:search" class="mr-5px" /> 搜索
|
||
</el-button>
|
||
<el-button @click="resetQuery">
|
||
<Icon icon="ep:refresh" class="mr-5px" /> 重置
|
||
</el-button>
|
||
<!-- <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['server:employee-big-brother:create']">
|
||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||
</el-button> -->
|
||
<el-button type="success" plain @click="handleExport" :loading="exportLoading"
|
||
v-hasPermi="['server:employee-big-brother:export']">
|
||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||
</el-button>
|
||
<el-button @click="dialogAllocation = true">
|
||
<Icon icon="ep:refresh" class="mr-5px" /> {{ t('newHosts.allocation') }}
|
||
</el-button>
|
||
<el-button @click="exportAi(1)">
|
||
<Icon icon="ep:copy-document" class="mr-5px" /> 批量复制大哥id
|
||
</el-button>
|
||
<el-button @click="exportAi(2)">
|
||
<Icon icon="ep:copy-document" class="mr-5px" /> 批量复制主播id
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</ContentWrap>
|
||
|
||
<!-- 列表 -->
|
||
<ContentWrap>
|
||
<el-table v-loading="loading" :data="list" :stripe="true" @selection-change="handleSelectionChange">
|
||
<el-table-column type="selection" width="55" />
|
||
<el-table-column label="大哥的用户id" align="center" prop="displayId">
|
||
<template #default="scope">
|
||
<div style="color: green; text-decoration: underline;" @click="openHtml(scope.row, scope.row.displayId)">
|
||
{{ scope.row.displayId }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="大哥的uid" align="center" prop="userIdStr" />
|
||
<el-table-column label="大哥的用户昵称" align="center" prop="nickname" />
|
||
<el-table-column label="大哥的等级" align="center" prop="level" />
|
||
<el-table-column label="大哥打赏的金币" align="center" prop="hostcoins" />
|
||
<el-table-column label="大哥的粉丝数" align="center" prop="followerCount" />
|
||
<el-table-column label="大哥的关注数" align="center" prop="followingCount" />
|
||
<el-table-column label="大哥所在的地区" align="center" prop="region" />
|
||
<el-table-column label="大哥打赏的历史最高金币" align="center" prop="historicHighCoins" />
|
||
<el-table-column label="大哥历史打赏金币总和" align="center" prop="totalGiftCoins" />
|
||
<el-table-column label="大哥所在的直播间的主播id" align="center" prop="hostDisplayId" />
|
||
<!-- <el-table-column label="该数据所属的账号id" align="center" prop="userId" /> -->
|
||
<el-table-column label="创建时间" align="center" prop="createTime" :formatter="dateFormatter" width="180px" />
|
||
<el-table-column label="是否洽谈" align="center" prop="operationStatus">
|
||
<template #default="scope">
|
||
<dict-tag :type="DICT_TYPE.BIGBIOTHER_NEGOTIATION" :value="scope.row.operationStatus" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column :label="$t('employee.action')" align="center" min-width="120px">
|
||
<template #default="scope">
|
||
<el-button link type="primary" @click="openForm('update', scope.row.id)">{{ $t('employee.edit') }}</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- 分页 -->
|
||
<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
|
||
@pagination="getList" />
|
||
</ContentWrap>
|
||
<el-dialog v-model="dialogAllocation" :title="t('newHosts.allocationUser')">
|
||
<!-- <div style="padding: 0px 0px 30px 0px ;">
|
||
<el-alert title="分配成功数量可能会小于选择数量，同id主播无法被重复分配" type="warning" />
|
||
</div> -->
|
||
|
||
<el-select v-model="allocationUser" :placeholder="t('newHosts.placeAllocationUser')" clearable>
|
||
<el-option v-for="(user, index) in allocationUserList" :key="index" :label="user.label" :value="user.value" />
|
||
</el-select>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="dialogAllocation = false">{{ t('newHosts.cancel') }}</el-button>
|
||
<el-button type="primary" @click="AllocationFun">
|
||
{{ t('newHosts.confirm') }}
|
||
</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
<!-- 表单弹窗：添加/修改 -->
|
||
<EmployeeBigBrotherForm ref="formRef" @success="getList" />
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { getIntDictOptions, DICT_TYPE, getStrDictOptions } from '@/utils/dict'
|
||
import { dateFormatter } from '@/utils/formatTime'
|
||
import download from '@/utils/download'
|
||
import { EmployeeBigBrotherApi, EmployeeBigBrotherVO } from '@/api/server/employeebigbrother'
|
||
import EmployeeBigBrotherForm from './EmployeeBigBrotherForm.vue'
|
||
import { getAllocation, getSimpleUserList } from '@/api/system/user'
|
||
import { useCache } from '@/hooks/web/useCache'
|
||
const { wsCache } = useCache()
|
||
|
||
/** 大哥数据员工业务 列表 */
|
||
defineOptions({ name: 'EmployeeBigBrother' })
|
||
|
||
const message = useMessage() // 消息弹窗
|
||
const { t } = useI18n() // 国际化
|
||
|
||
const loading = ref(true) // 列表的加载中
|
||
const list = ref<EmployeeBigBrotherVO[]>([]) // 列表的数据
|
||
const total = ref(0) // 列表的总页数
|
||
const queryParams = reactive({
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
displayId: undefined,
|
||
userIdStr: undefined,
|
||
nickname: undefined,
|
||
levelMin: undefined,
|
||
levelMax: undefined,
|
||
hostcoins: undefined,
|
||
followerCount: undefined,
|
||
followingCount: undefined,
|
||
region: undefined,
|
||
historicHighCoinsMin: undefined,
|
||
historicHighCoinsMax: undefined,
|
||
totalGiftCoinsMin: undefined,
|
||
totalGiftCoinsMax: undefined,
|
||
hostDisplayId: undefined,
|
||
userId: undefined,
|
||
createTime: [],
|
||
createTimeStart: '',
|
||
createTimeEnd: '',
|
||
operationStatus: undefined
|
||
})
|
||
const queryFormRef = ref() // 搜索的表单
|
||
const exportLoading = ref(false) // 导出的加载中
|
||
let selectBigList = ref([])
|
||
let allocationUser = ref('') //选中的分配用户
|
||
let allocationUserList = ref([
|
||
{
|
||
label: '分配用户1',
|
||
value: 1
|
||
}
|
||
]) //选中的分配用户
|
||
let dialogAllocation = ref(false) //分配弹窗
|
||
/** 查询列表 */
|
||
const getList = async () => {
|
||
loading.value = true
|
||
try {
|
||
queryParams.createTimeStart = queryParams.createTime?.[0]
|
||
queryParams.createTimeEnd = queryParams.createTime?.[1]
|
||
const data = await EmployeeBigBrotherApi.getMeangeEmployeeBigBrotherPage(queryParams)
|
||
list.value = data.list
|
||
total.value = data.total
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
/** 搜索按钮操作 */
|
||
const handleQuery = () => {
|
||
queryParams.pageNo = 1
|
||
getList()
|
||
}
|
||
|
||
/** 重置按钮操作 */
|
||
const resetQuery = () => {
|
||
queryParams.levelMin = undefined
|
||
queryParams.levelMax = undefined
|
||
queryParams.totalGiftCoinsMin = undefined
|
||
queryParams.totalGiftCoinsMax = undefined
|
||
queryParams.historicHighCoinsMin = undefined
|
||
queryParams.historicHighCoinsMax = undefined
|
||
|
||
queryFormRef.value.resetFields()
|
||
handleQuery()
|
||
}
|
||
|
||
/** 添加/修改操作 */
|
||
const formRef = ref()
|
||
const openForm = (type: string, id?: number) => {
|
||
formRef.value.open(type, id)
|
||
}
|
||
|
||
/** 删除按钮操作 */
|
||
const handleDelete = async (id: number) => {
|
||
try {
|
||
// 删除的二次确认
|
||
await message.delConfirm()
|
||
// 发起删除
|
||
await EmployeeBigBrotherApi.deleteEmployeeBigBrother(id)
|
||
message.success(t('common.delSuccess'))
|
||
// 刷新列表
|
||
await getList()
|
||
} catch { }
|
||
}
|
||
|
||
/** 导出按钮操作 */
|
||
const handleExport = async () => {
|
||
try {
|
||
// 导出的二次确认
|
||
await message.exportConfirm()
|
||
// 发起导出
|
||
exportLoading.value = true
|
||
const data = await EmployeeBigBrotherApi.exportEmployeeBigBrother(queryParams)
|
||
download.excel(data, '大哥数据员工业务.xls')
|
||
} catch {
|
||
} finally {
|
||
exportLoading.value = false
|
||
}
|
||
}
|
||
|
||
//分配按钮操作
|
||
const handleSelectionChange = (val) => {
|
||
|
||
selectBigList.value = val
|
||
console.log(selectBigList.value)
|
||
}
|
||
|
||
/** 查询员工 */
|
||
const getAllocationList = async () => {
|
||
loading.value = true
|
||
allocationUserList.value = []
|
||
try {
|
||
const data = await getSimpleUserList()
|
||
console.log('data', data)
|
||
data.forEach((item) => {
|
||
if (wsCache.get('user').user.id == item.id) {
|
||
|
||
} else {
|
||
allocationUserList.value.push({
|
||
label: item.nickname,
|
||
value: item.id
|
||
})
|
||
}
|
||
|
||
|
||
})
|
||
console.log(allocationUserList.value)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
function AllocationFun() {
|
||
console.log(allocationUser.value)
|
||
console.log(selectBigList.value)
|
||
if (allocationUser.value == undefined || selectBigList.value.length <= 0) {
|
||
message.error('请选择分配用户和主播')
|
||
return
|
||
}
|
||
let data = []
|
||
selectBigList.value.forEach(element => {
|
||
data.push({
|
||
id: element.id,
|
||
userId: allocationUser.value,
|
||
operationStatus: 0
|
||
})
|
||
})
|
||
|
||
EmployeeBigBrotherApi.batchUpdateBigBrother(data).then(res => {
|
||
console.log(res)
|
||
handleQuery()
|
||
message.success('分配成功')
|
||
})
|
||
|
||
dialogAllocation.value = false
|
||
}
|
||
|
||
function openHtml(item, id) {
|
||
let data = item
|
||
data.operationStatus = 1
|
||
EmployeeBigBrotherApi.updateEmployeeBigBrother({ id: data.id, userId: data.userId, displayId: data.displayId, operationStatus: 1 }).then(res => {
|
||
getList()
|
||
})
|
||
window.open(`https://www.tiktok.com/@${id}`)
|
||
|
||
}
|
||
|
||
function exportAi(type) {
|
||
if (selectBigList.value.length === 0) {
|
||
ElMessage.error('请选择主播')
|
||
return
|
||
}
|
||
let data = ''
|
||
if (type == 1) {
|
||
data = selectBigList.value.map(item => item.displayId).join('\n')
|
||
} else {
|
||
data = selectBigList.value.map(item => item.hostDisplayId).join('\n')
|
||
}
|
||
|
||
|
||
const copyToClipboard = async (text) => {
|
||
// 优先使用 Clipboard API
|
||
if (navigator.clipboard && window.isSecureContext) {
|
||
try {
|
||
await navigator.clipboard.writeText(text)
|
||
ElMessage.success('✅ 复制成功 ' + selectBigList.value.length + ' 条数据')
|
||
} catch (err) {
|
||
ElMessage.error('❌ 复制失败')
|
||
console.error(err)
|
||
}
|
||
} else {
|
||
// fallback 兼容方案
|
||
const textarea = document.createElement('textarea')
|
||
textarea.value = text
|
||
textarea.style.position = 'fixed' // 避免跳动
|
||
textarea.style.opacity = '0'
|
||
document.body.appendChild(textarea)
|
||
textarea.select()
|
||
try {
|
||
const result = document.execCommand('copy')
|
||
if (result) {
|
||
ElMessage.success('✅（兼容模式）复制成功 ' + selectBigList.value.length + ' 条数据')
|
||
} else {
|
||
ElMessage.error('❌（兼容模式）复制失败')
|
||
}
|
||
} catch (err) {
|
||
ElMessage.error('❌（兼容模式）复制异常')
|
||
console.error(err)
|
||
} finally {
|
||
document.body.removeChild(textarea)
|
||
}
|
||
}
|
||
}
|
||
|
||
copyToClipboard(data)
|
||
}
|
||
/** 初始化 **/
|
||
onMounted(() => {
|
||
getList()
|
||
getAllocationList();
|
||
})
|
||
</script> |