mfx/tkNewAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
没复习
2025-07-01 21:08:51 +08:00
commit 57aa9e21ed
1649 changed files with 242230 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
src/views/server/employeehosts/EmployeeHostsForm.vue Normal file
View File

@@ -0,0 +1,162 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
<!-- <el-form-item label="主播id" prop="hostsId">
<el-input v-model="formData.hostsId" placeholder="请输入主播id" />
</el-form-item>
<el-form-item label="用户 Id" prop="userId">
<el-input v-model="formData.userId" placeholder="请输入用户 Id" />
</el-form-item>
<el-form-item label="主播等级" prop="hostsLevel">
<el-input v-model="formData.hostsLevel" placeholder="请输入主播等级" />
</el-form-item>
<el-form-item label="主播金币" prop="hostsCoins">
<el-input v-model="formData.hostsCoins" placeholder="请输入主播金币" />
</el-form-item>
<el-form-item label="邀请类型" prop="invitationType">
<el-select v-model="formData.invitationType" placeholder="请选择邀请类型">
<el-option label="请选择字典生成" value="" />
</el-select>
</el-form-item>
<el-form-item label="在线人数" prop="onlineFans">
<el-input v-model="formData.onlineFans" placeholder="请输入在线人数" />
</el-form-item>
<el-form-item label="粉丝数量" prop="fans">
<el-input v-model="formData.fans" placeholder="请输入粉丝数量" />
</el-form-item>
<el-form-item label="关注数量" prop="fllowernum">
<el-input v-model="formData.fllowernum" placeholder="请输入关注数量" />
</el-form-item>
<el-form-item label="昨日金币" prop="yesterdayCoins">
<el-input v-model="formData.yesterdayCoins" placeholder="请输入昨日金币" />
</el-form-item>
<el-form-item label="主播国家" prop="country">
<el-input v-model="formData.country" placeholder="请输入主播国家" />
</el-form-item>
<el-form-item label="直播类型 " prop="hostsKind">
<el-input v-model="formData.hostsKind" placeholder="请输入直播类型 娱乐，游戏 " />
</el-form-item> -->
<el-form-item label="备注" prop="remake">
<el-input v-model="formData.remake" placeholder="请输入备注" />
</el-form-item>
<el-form-item label="操作状态" prop="operationStatus">
<el-select v-model="formData.operationStatus" placeholder="请选择状态" clearable class="!w-240px">
<el-option v-for="dict in getStrDictOptions(DICT_TYPE.OPERATION_STATE)" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { EmployeeHostsApi, EmployeeHostsVO } from '@/api/server/employeehosts'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
/** 员工分配主播 表单 */
defineOptions({ name: 'EmployeeHostsForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
id: undefined,
hostsId: undefined,
userId: undefined,
hostsLevel: undefined,
hostsCoins: undefined,
invitationType: undefined,
onlineFans: undefined,
fans: undefined,
fllowernum: undefined,
yesterdayCoins: undefined,
country: undefined,
hostsKind: undefined,
operationStatus: '',
remake: undefined
})
const formRules = reactive({
hostsId: [{ required: true, message: '主播id不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
let indexData = -1 // 当前修改的索引：新增时值为 -1
/** 打开弹窗 */
const open = async (type: string, id?: number, index?: number) => {
dialogVisible.value = true
if (index) {
indexData = index
}
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await EmployeeHostsApi.getEmployeeHosts(id)
getStrDictOptions(DICT_TYPE.OPERATION_STATE).forEach(item => {
if (item.value == formData.value.operationStatus) {
formData.value.operationStatus = item.label
}
})
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as EmployeeHostsVO
if (formType.value === 'create') {
await EmployeeHostsApi.createEmployeeHosts(data)
message.success(t('common.createSuccess'))
} else {
await EmployeeHostsApi.updateEmployeeHosts(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success', data, indexData)
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
hostsId: undefined,
userId: undefined,
hostsLevel: undefined,
hostsCoins: undefined,
invitationType: undefined,
onlineFans: undefined,
fans: undefined,
fllowernum: undefined,
yesterdayCoins: undefined,
country: undefined,
hostsKind: undefined,
operationStatus: '',
remake: undefined
}
formRef.value?.resetFields()
}
</script>

430
src/views/server/employeehosts/index.vue Normal file
View File

@@ -0,0 +1,430 @@
<template>
<transition name="fade">
<div v-show="isShowSearch">
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
<el-form-item :label="$t('employee.hostsId')" prop="hostsId">
<el-input v-model="queryParams.hostsId" :placeholder="$t('employee.placeHostId')" clearable
@keyup.enter="handleQuery" class="!w-240px" />
</el-form-item>
<el-form-item :label="$t('employee.hostsLevel')" prop="hostsLevel">
<el-select v-model="queryParams.hostsLevel" :placeholder="$t('employee.placeHostLevel')" clearable
class="!w-240px">
<el-option v-for="dict in getStrDictOptions(DICT_TYPE.HOST_LEVEL)" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('employee.hostsCoins')" prop="hostsCoins">
<el-input v-model="queryParams.hostsCoinsMin" :placeholder="$t('employee.min')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
<span>&nbsp;-&nbsp;</span>
<el-input v-model="queryParams.hostsCoinsMax" :placeholder="$t('employee.max')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
</el-form-item>
<el-form-item :label="$t('employee.onlineFans')" prop="onlineFans">
<el-input v-model="queryParams.onlineFansMin" :placeholder="$t('employee.min')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
<span>&nbsp;-&nbsp;</span>
<el-input v-model="queryParams.onlineFansMax" :placeholder="$t('employee.max')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
</el-form-item>
<el-form-item :label="$t('employee.fans')" prop="fans">
<el-input v-model="queryParams.fansMin" :placeholder="$t('employee.min')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
<span>&nbsp;-&nbsp;</span>
<el-input v-model="queryParams.fansMax" :placeholder="$t('employee.max')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
</el-form-item>
<el-form-item :label="$t('employee.fllowernum')" prop="fllowernum">
<el-input v-model="queryParams.fllowernumMin" :placeholder="$t('employee.min')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
<span>&nbsp;-&nbsp;</span>
<el-input v-model="queryParams.fllowernumMax" :placeholder="$t('employee.max')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
</el-form-item>
<el-form-item :label="$t('employee.hostsCountry')" prop="country">
<el-select v-model="queryParams.country" :placeholder="$t('employee.placeHostsCountry')" clearable
class="!w-240px">
<el-option v-for="dict in getStrDictOptions(DICT_TYPE.COUNTRY_GROUP)" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('employee.hostsKind')" prop="hostsKind">
<el-input v-model="queryParams.hostsKind" :placeholder="$t('employee.placeHostsKind')" clearable
@keyup.enter="handleQuery" class="!w-240px" />
</el-form-item>
<el-form-item :label="$t('employee.createTime')" prop="createTime">
<el-date-picker v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss" type="date"
class="!w-240px" />
</el-form-item>
<el-form-item :label="$t('employee.userId')" prop="userId">
<el-select v-model="queryParams.userId" :placeholder="$t('employee.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 :label="$t('employee.invitationType')" prop="invitationType">
<el-select v-model="queryParams.invitationType" :placeholder="$t('employee.placeInvitationType')" clearable
class="!w-240px">
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.HOSTS_INVITATION_TYPE)" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('employee.operationStatus')" prop="operationStatus">
<el-select v-model="queryParams.operationStatus" :placeholder="$t('employee.placeOperationStatus')"
clearable class="!w-240px">
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.OPERATION_STATE)" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" /> {{ $t('employee.search') }}
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" /> {{ $t('employee.reset') }}
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
</div>
</transition>
<div class="center-justify" style="margin-top: -15px;">
<el-button type="primary" @click="isShowSearch = !isShowSearch">{{ isShowSearch ? $t('employee.showSearch') :
$t('employee.hideSearch') }}</el-button>
</div>
<!-- 列表区域 -->
<ContentWrap>
<!-- ✅ PC 端使用 table -->
<el-table v-if="!isMobile" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column :label="$t('employee.hostsId')" align="center" prop="hostsId">
<template #default="scope">
<div style="color: green; text-decoration: underline;" @click="openHtml(scope.row, scope.row.hostsId)">
{{ scope.row.hostsId }}</div>
</template>
</el-table-column>
<el-table-column :label="$t('employee.hostsLevel')" align="center" prop="hostsLevel" />
<el-table-column :label="$t('employee.invitationType')" align="center" prop="invitationType">
<template #default="scope">
<dict-tag :type="DICT_TYPE.HOSTS_INVITATION_TYPE" :value="scope.row.invitationType" />
</template>
</el-table-column>
<el-table-column :label="$t('employee.hostsCoins')" align="center" prop="hostsCoins" />
<!-- <el-table-column :label="$t('employee.invitationType')" align="center" prop="invitationType" /> -->
<el-table-column :label="$t('employee.onlineFans')" align="center" prop="onlineFans" />
<el-table-column :label="$t('employee.fans')" align="center" prop="fans" />
<el-table-column :label="$t('employee.fllowernum')" align="center" prop="fllowernum" />
<el-table-column :label="$t('employee.yesterdayCoins')" align="center" prop="yesterdayCoins" />
<el-table-column :label="$t('employee.hostsCountry')" align="center" prop="country" />
<el-table-column :label="$t('employee.hostsKind')" align="center" prop="hostsKind" />
<el-table-column :label="$t('employee.remark')" align="center" prop="remake" />
<el-table-column :label="$t('employee.operationStatus')" align="center" prop="operationStatus">
<template #default="scope">
<dict-tag :type="DICT_TYPE.OPERATION_STATE" :value="scope.row.operationStatus" />
</template>
</el-table-column>
<el-table-column :label="$t('employee.createTime')" align="center" prop="createTime" :formatter="dateFormatter"
width="180px" />
<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>
<!-- ✅ 移动端使用卡片列表 -->
<div v-else v-infinite-scroll="loadList">
<div v-for="(item, index) in list" :key="index" class="mobile-card">
<div class="card-row" @click="openHtml(item, item.hostsId)" style="color:green;">
<b>{{ $t('employee.hostsId') }}：</b><span style=" text-decoration: underline;">{{ item.hostsId }}</span>
</div>
<!-- <div class="card-row"><b>{{ $t('employee.userId') }}：</b>{{ item.userId }}</div> -->
<div class="card-row"><b>{{ $t('employee.hostsLevel') }}：</b>{{ item.hostsLevel }}</div>
<div class="card-row"><b>{{ $t('employee.hostsCoins') }}：</b>{{ item.hostsCoins }}</div>
<div class="card-row"><b>{{ $t('employee.fans') }}：</b>{{ item.fans }}</div>
<div class="card-row"><b>{{ $t('employee.fllowernum') }}：</b>{{ item.fllowernum }}</div>
<div class="card-row"><b>{{ $t('employee.hostsCountry') }}：</b>{{ item.country }}</div>
<div class="card-row"><b>{{ $t('employee.hostsKind') }}：</b>{{ item.hostsKind }}</div>
<div class="card-row"><b>{{ $t('employee.remark') }}：</b>{{ item.remake }}</div>
<div class="card-row"><b>{{ $t('employee.operationStatus') }}：</b>
<dict-tag :type="DICT_TYPE.OPERATION_STATE" :value="item.operationStatus" />
</div>
<div class="card-row"><b>{{ $t('employee.createTime') }}：</b>{{ item.createTime }}</div>
<div class="card-row action-row">
<el-button link type="primary" @click="openForm('update', item.id, index)">{{ $t('employee.edit')
}}</el-button>
</div>
</div>
</div>
<!-- ✅ PC 显示分页，移动端隐藏 -->
<Pagination v-if="!isMobile" :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
@pagination="getList" />
</ContentWrap>
<!-- 表单弹窗 -->
<EmployeeHostsForm ref="formRef" @success="formSuccess" />
</template>
<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { EmployeeHostsApi, EmployeeHostsVO } from '@/api/server/employeehosts'
import EmployeeHostsForm from './EmployeeHostsForm.vue'
import { getAllocation } from '@/api/system/user'
import { useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache()
/** 员工分配主播 列表 */
defineOptions({ name: 'EmployeeHosts' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<EmployeeHostsVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
hostsId: undefined,
hostsLevel: undefined,
onlineFansMin: undefined,
onlineFansMax: undefined,
fansMin: undefined,
fansMax: undefined,
hostsCoinsMin: undefined,
hostsCoinsMax: undefined,
fllowernumMin: undefined,
fllowernumMax: undefined,
invitationType: undefined,
yesterdayCoins: undefined,
country: undefined,
hostsKind: undefined,
isAssigned: undefined,
createTime: [],
userId: undefined,
operationStatus: undefined,
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
let isShowSearch = ref(true) // 是否显示搜索
let allocationUserList = ref([
{
label: '分配用户1',
value: '1'
}
]) //选中的分配用户
/** 查询列表pc直接赋值 */
const getList = async () => {
loading.value = true
try {
const data = await EmployeeHostsApi.getEmployeeHostsPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 查询列表手机叠加赋值 */
const getListPhone = async () => {
loading.value = true
try {
const data = await EmployeeHostsApi.getEmployeeHostsPage(queryParams)
data.list.forEach(element => {
list.value.push(element)
});
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryParams.fansMin = undefined
queryParams.fansMax = undefined
queryParams.hostsCoinsMin = undefined
queryParams.hostsCoinsMax = undefined
queryParams.fllowernumMin = undefined
queryParams.fllowernumMax = undefined
queryParams.onlineFansMin = undefined
queryParams.onlineFansMax = undefined
queryParams.yesterdayCoins = undefined
queryParams.isAssigned = undefined
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number, index?: number) => {
formRef.value.open(type, id, index)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await EmployeeHostsApi.deleteEmployeeHosts(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch { }
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await EmployeeHostsApi.exportEmployeeHosts(queryParams)
download.excel(data, '员工分配主播.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 查询员工 */
const getAllocationList = async () => {
loading.value = true
allocationUserList.value = []
try {
const data = await getAllocation(wsCache.get('user').user.deptId)
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 openHtml(item, id) {
let data = item
data.operationStatus = 1
EmployeeHostsApi.updateEmployeeHosts(data).then(res => {
getList()
})
window.open(`https://www.tiktok.com/@${id}`)
}
const loadList = () => {
if (queryParams.pageNo < Math.ceil(total.value / queryParams.pageSize)) {
queryParams.pageNo++
getListPhone()
}
}
function formSuccess(data, index) {
if (isMobile.value) {
console.log(data, index)
list.value[index] = data
} else {
getList()
}
}
const isMobile = ref(window.innerWidth <= 768)
onMounted(() => {
getList()
getAllocationList()
//实时监听实际还是电脑
window.addEventListener('resize', () => {
if ((window.innerWidth <= 768) != isMobile.value) {
getList()
}
isMobile.value = window.innerWidth <= 768
})
})
// /** 初始化 **/
// onMounted(() => {
// getList()
// })
</script>
<style scoped>
.center-align {
display: flex;
justify-content: space-between;
}
.center-justify {
display: flex;
justify-content: space-around;
align-items: center;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
@media screen and (max-width: 768px) {
.mobile-card {
background: #fff;
margin: 12px;
padding: 12px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
font-size: 14px;
}
.card-row {
margin-bottom: 6px;
word-break: break-word;
}
.card-row b {
color: #555;
font-weight: 500;
margin-right: 4px;
}
.action-row {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 6px;
}
}
</style>

162
src/views/server/manageemployeehosts/EmployeeHostsForm.vue Normal file
View File

@@ -0,0 +1,162 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
<!-- <el-form-item label="主播id" prop="hostsId">
<el-input v-model="formData.hostsId" placeholder="请输入主播id" />
</el-form-item>
<el-form-item label="用户 Id" prop="userId">
<el-input v-model="formData.userId" placeholder="请输入用户 Id" />
</el-form-item>
<el-form-item label="主播等级" prop="hostsLevel">
<el-input v-model="formData.hostsLevel" placeholder="请输入主播等级" />
</el-form-item>
<el-form-item label="主播金币" prop="hostsCoins">
<el-input v-model="formData.hostsCoins" placeholder="请输入主播金币" />
</el-form-item>
<el-form-item label="邀请类型" prop="invitationType">
<el-select v-model="formData.invitationType" placeholder="请选择邀请类型">
<el-option label="请选择字典生成" value="" />
</el-select>
</el-form-item>
<el-form-item label="在线人数" prop="onlineFans">
<el-input v-model="formData.onlineFans" placeholder="请输入在线人数" />
</el-form-item>
<el-form-item label="粉丝数量" prop="fans">
<el-input v-model="formData.fans" placeholder="请输入粉丝数量" />
</el-form-item>
<el-form-item label="关注数量" prop="fllowernum">
<el-input v-model="formData.fllowernum" placeholder="请输入关注数量" />
</el-form-item>
<el-form-item label="昨日金币" prop="yesterdayCoins">
<el-input v-model="formData.yesterdayCoins" placeholder="请输入昨日金币" />
</el-form-item>
<el-form-item label="主播国家" prop="country">
<el-input v-model="formData.country" placeholder="请输入主播国家" />
</el-form-item>
<el-form-item label="直播类型 " prop="hostsKind">
<el-input v-model="formData.hostsKind" placeholder="请输入直播类型 娱乐，游戏 " />
</el-form-item> -->
<el-form-item label="备注" prop="remake">
<el-input v-model="formData.remake" placeholder="请输入备注" />
</el-form-item>
<el-form-item label="操作状态" prop="operationStatus">
<el-select v-model="formData.operationStatus" placeholder="请选择状态" clearable class="!w-240px">
<el-option v-for="dict in getStrDictOptions(DICT_TYPE.OPERATION_STATE)" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { EmployeeHostsApi, EmployeeHostsVO } from '@/api/server/employeehosts'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
/** 员工分配主播 表单 */
defineOptions({ name: 'EmployeeHostsForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
id: undefined,
hostsId: undefined,
userId: undefined,
hostsLevel: undefined,
hostsCoins: undefined,
invitationType: undefined,
onlineFans: undefined,
fans: undefined,
fllowernum: undefined,
yesterdayCoins: undefined,
country: undefined,
hostsKind: undefined,
operationStatus: '',
remake: undefined
})
const formRules = reactive({
hostsId: [{ required: true, message: '主播id不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
let indexData = -1 // 当前修改的索引：新增时值为 -1
/** 打开弹窗 */
const open = async (type: string, id?: number, index?: number) => {
dialogVisible.value = true
if (index) {
indexData = index
}
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await EmployeeHostsApi.getEmployeeHosts(id)
getStrDictOptions(DICT_TYPE.OPERATION_STATE).forEach(item => {
if (item.value == formData.value.operationStatus) {
formData.value.operationStatus = item.label
}
})
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as EmployeeHostsVO
if (formType.value === 'create') {
await EmployeeHostsApi.createEmployeeHosts(data)
message.success(t('common.createSuccess'))
} else {
await EmployeeHostsApi.updateEmployeeHosts(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success', data, indexData)
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
hostsId: undefined,
userId: undefined,
hostsLevel: undefined,
hostsCoins: undefined,
invitationType: undefined,
onlineFans: undefined,
fans: undefined,
fllowernum: undefined,
yesterdayCoins: undefined,
country: undefined,
hostsKind: undefined,
operationStatus: '',
remake: undefined
}
formRef.value?.resetFields()
}
</script>

443
src/views/server/manageemployeehosts/index.vue Normal file
View File

@@ -0,0 +1,443 @@
<template>
<transition name="fade">
<div v-show="isShowSearch">
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
<el-form-item :label="$t('employee.hostsId')" prop="hostsId">
<el-input v-model="queryParams.hostsId" :placeholder="$t('employee.placeHostId')" clearable
@keyup.enter="handleQuery" class="!w-240px" />
</el-form-item>
<el-form-item :label="$t('employee.hostsLevel')" prop="hostsLevel">
<el-select v-model="queryParams.hostsLevel" :placeholder="$t('employee.placeHostLevel')" clearable
class="!w-240px">
<el-option v-for="dict in getStrDictOptions(DICT_TYPE.HOST_LEVEL)" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('employee.hostsCoins')" prop="hostsCoins">
<el-input v-model="queryParams.hostsCoinsMin" :placeholder="$t('employee.min')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
<span>&nbsp;-&nbsp;</span>
<el-input v-model="queryParams.hostsCoinsMax" :placeholder="$t('employee.max')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
</el-form-item>
<el-form-item :label="$t('employee.onlineFans')" prop="onlineFans">
<el-input v-model="queryParams.onlineFansMin" :placeholder="$t('employee.min')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
<span>&nbsp;-&nbsp;</span>
<el-input v-model="queryParams.onlineFansMax" :placeholder="$t('employee.max')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
</el-form-item>
<el-form-item :label="$t('employee.fans')" prop="fans">
<el-input v-model="queryParams.fansMin" :placeholder="$t('employee.min')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
<span>&nbsp;-&nbsp;</span>
<el-input v-model="queryParams.fansMax" :placeholder="$t('employee.max')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
</el-form-item>
<el-form-item :label="$t('employee.fllowernum')" prop="fllowernum">
<el-input v-model="queryParams.fllowernumMin" :placeholder="$t('employee.min')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
<span>&nbsp;-&nbsp;</span>
<el-input v-model="queryParams.fllowernumMax" :placeholder="$t('employee.max')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
</el-form-item>
<el-form-item :label="$t('employee.hostsCountry')" prop="country">
<el-select v-model="queryParams.country" :placeholder="$t('employee.placeHostsCountry')" clearable
class="!w-240px">
<el-option v-for="dict in getStrDictOptions(DICT_TYPE.COUNTRY_GROUP)" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('employee.hostsKind')" prop="hostsKind">
<el-input v-model="queryParams.hostsKind" :placeholder="$t('employee.placeHostsKind')" clearable
@keyup.enter="handleQuery" class="!w-240px" />
</el-form-item>
<el-form-item :label="$t('employee.createTime')" prop="createTime">
<el-date-picker v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss" type="date"
class="!w-240px" />
</el-form-item>
<el-form-item :label="$t('employee.userId')" prop="userId">
<el-select v-model="queryParams.userId" :placeholder="$t('employee.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 :label="$t('employee.invitationType')" prop="invitationType">
<el-select v-model="queryParams.invitationType" :placeholder="$t('employee.placeInvitationType')" clearable
class="!w-240px">
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.HOSTS_INVITATION_TYPE)" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('employee.operationStatus')" prop="operationStatus">
<el-select v-model="queryParams.operationStatus" :placeholder="$t('employee.placeOperationStatus')"
clearable class="!w-240px">
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.OPERATION_STATE)" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" /> {{ $t('employee.search') }}
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" /> {{ $t('employee.reset') }}
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
</div>
</transition>
<div class="center-justify" style="margin-top: -15px;">
<el-button type="primary" @click="isShowSearch = !isShowSearch">{{ isShowSearch ? $t('employee.showSearch') :
$t('employee.hideSearch') }}</el-button>
</div>
<!-- 列表区域 -->
<ContentWrap>
<!-- ✅ PC 端使用 table -->
<el-table v-if="!isMobile" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column :label="$t('employee.hostsId')" align="center" prop="hostsId">
<template #default="scope">
<div style="color: green; text-decoration: underline;" @click="openHtml(scope.row, scope.row.hostsId)">
{{ scope.row.hostsId }}</div>
</template>
</el-table-column>
<el-table-column :label="$t('employee.hostsLevel')" align="center" prop="hostsLevel" />
<el-table-column :label="$t('employee.invitationType')" align="center" prop="invitationType">
<template #default="scope">
<dict-tag :type="DICT_TYPE.HOSTS_INVITATION_TYPE" :value="scope.row.invitationType" />
</template>
</el-table-column>
<el-table-column :label="$t('employee.hostsCoins')" align="center" prop="hostsCoins" />
<!-- <el-table-column :label="$t('employee.invitationType')" align="center" prop="invitationType" /> -->
<el-table-column :label="$t('employee.onlineFans')" align="center" prop="onlineFans" />
<el-table-column :label="$t('employee.fans')" align="center" prop="fans" />
<el-table-column :label="$t('employee.fllowernum')" align="center" prop="fllowernum" />
<el-table-column :label="$t('employee.yesterdayCoins')" align="center" prop="yesterdayCoins" />
<el-table-column :label="$t('employee.hostsCountry')" align="center" prop="country" />
<el-table-column :label="$t('employee.hostsKind')" align="center" prop="hostsKind" />
<el-table-column :label="$t('employee.remark')" align="center" prop="remake" />
<el-table-column :label="$t('employee.operationStatus')" align="center" prop="operationStatus">
<template #default="scope">
<dict-tag :type="DICT_TYPE.OPERATION_STATE" :value="scope.row.operationStatus" />
</template>
</el-table-column>
<el-table-column :label="$t('employee.createTime')" align="center" prop="createTime" :formatter="dateFormatter"
width="180px" />
<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>
<!-- ✅ 移动端使用卡片列表 -->
<div v-else v-infinite-scroll="loadList">
<div v-for="(item, index) in list" :key="index" class="mobile-card">
<div class="card-row" @click="openHtml(item, item.hostsId)" style="color:green;">
<b>{{ $t('employee.hostsId') }}：</b><span style=" text-decoration: underline;">{{ item.hostsId }}</span>
</div>
<!-- <div class="card-row"><b>{{ $t('employee.userId') }}：</b>{{ item.userId }}</div> -->
<div class="card-row"><b>{{ $t('employee.hostsLevel') }}：</b>{{ item.hostsLevel }}</div>
<div class="card-row"><b>{{ $t('employee.hostsCoins') }}：</b>{{ item.hostsCoins }}</div>
<div class="card-row"><b>{{ $t('employee.fans') }}：</b>{{ item.fans }}</div>
<div class="card-row"><b>{{ $t('employee.fllowernum') }}：</b>{{ item.fllowernum }}</div>
<div class="card-row"><b>{{ $t('employee.hostsCountry') }}：</b>{{ item.country }}</div>
<div class="card-row"><b>{{ $t('employee.hostsKind') }}：</b>{{ item.hostsKind }}</div>
<div class="card-row"><b>{{ $t('employee.remark') }}：</b>{{ item.remake }}</div>
<div class="card-row"><b>{{ $t('employee.operationStatus') }}：</b>
<dict-tag :type="DICT_TYPE.OPERATION_STATE" :value="item.operationStatus" />
</div>
<div class="card-row"><b>{{ $t('employee.createTime') }}：</b>{{ formatTimestamp(item.createTime) }}</div>
<div class="card-row action-row">
<el-button link type="primary" @click="openForm('update', item.id, index)">{{ $t('employee.edit')
}}</el-button>
</div>
</div>
</div>
<!-- ✅ PC 显示分页，移动端隐藏 -->
<Pagination v-if="!isMobile" :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
@pagination="getList" />
</ContentWrap>
<!-- 表单弹窗 -->
<EmployeeHostsForm ref="formRef" @success="formSuccess" />
</template>
<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { EmployeeHostsApi, EmployeeHostsVO } from '@/api/server/employeehosts'
import EmployeeHostsForm from './EmployeeHostsForm.vue'
import { getAllocation, getSimpleUserList } from '@/api/system/user'
import { useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache()
/** 员工分配主播 列表 */
defineOptions({ name: 'EmployeeHosts' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<EmployeeHostsVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
hostsId: undefined,
hostsLevel: undefined,
onlineFansMin: undefined,
onlineFansMax: undefined,
fansMin: undefined,
fansMax: undefined,
hostsCoinsMin: undefined,
hostsCoinsMax: undefined,
fllowernumMin: undefined,
fllowernumMax: undefined,
invitationType: undefined,
yesterdayCoins: undefined,
country: undefined,
hostsKind: undefined,
isAssigned: undefined,
createTime: [],
userId: undefined,
operationStatus: undefined,
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
let isShowSearch = ref(true) // 是否显示搜索
let allocationUserList = ref([
{
label: '分配用户1',
value: '1'
}
]) //选中的分配用户
/** 查询列表pc直接赋值 */
const getList = async () => {
loading.value = true
try {
const data = await EmployeeHostsApi.getMeangeEmployeeHostsPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 查询列表手机叠加赋值 */
const getListPhone = async () => {
loading.value = true
try {
const data = await EmployeeHostsApi.getMeangeEmployeeHostsPage(queryParams)
data.list.forEach(element => {
list.value.push(element)
});
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryParams.fansMin = undefined
queryParams.fansMax = undefined
queryParams.hostsCoinsMin = undefined
queryParams.hostsCoinsMax = undefined
queryParams.fllowernumMin = undefined
queryParams.fllowernumMax = undefined
queryParams.onlineFansMin = undefined
queryParams.onlineFansMax = undefined
queryParams.yesterdayCoins = undefined
queryParams.isAssigned = undefined
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number, index?: number) => {
formRef.value.open(type, id, index)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await EmployeeHostsApi.deleteEmployeeHosts(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch { }
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await EmployeeHostsApi.exportEmployeeHosts(queryParams)
download.excel(data, '员工分配主播.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 查询员工 */
const getAllocationList = async () => {
loading.value = true
allocationUserList.value = []
try {
const data = await getSimpleUserList(wsCache.get('user').user.deptId)
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 openHtml(item, id) {
let data = item
data.operationStatus = 1
EmployeeHostsApi.updateEmployeeHosts(data).then(res => {
getList()
})
window.open(`https://www.tiktok.com/@${id}`)
}
const loadList = () => {
if (queryParams.pageNo < Math.ceil(total.value / queryParams.pageSize)) {
queryParams.pageNo++
getListPhone()
}
}
function formSuccess(data, index) {
if (isMobile.value) {
console.log(data, index)
list.value[index] = data
} else {
getList()
}
}
function formatTimestamp(milliseconds) {
const date = new Date(milliseconds); // 直接使用毫秒级时间戳
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
const isMobile = ref(window.innerWidth <= 768)
onMounted(() => {
getList()
getAllocationList()
//实时监听实际还是电脑
window.addEventListener('resize', () => {
if ((window.innerWidth <= 768) != isMobile.value) {
getList()
}
isMobile.value = window.innerWidth <= 768
})
})
// /** 初始化 **/
// onMounted(() => {
// getList()
// })
</script>
<style scoped>
.center-align {
display: flex;
justify-content: space-between;
}
.center-justify {
display: flex;
justify-content: space-around;
align-items: center;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
@media screen and (max-width: 768px) {
.mobile-card {
background: #fff;
margin: 12px;
padding: 12px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
font-size: 14px;
}
.card-row {
margin-bottom: 6px;
word-break: break-word;
}
.card-row b {
color: #555;
font-weight: 500;
margin-right: 4px;
}
.action-row {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 6px;
}
}
</style>

147
src/views/server/newhosts/NewHostsForm.vue Normal file
View File

@@ -0,0 +1,147 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
<el-form-item label="主播id" prop="hostsId">
<el-input v-model="formData.hostsId" placeholder="请输入主播id" />
</el-form-item>
<el-form-item label="主播等级" prop="hostsLevel">
<el-input v-model="formData.hostsLevel" placeholder="请输入主播等级" />
</el-form-item>
<el-form-item label="主播金币" prop="hostsCoins">
<el-input v-model="formData.hostsCoins" placeholder="请输入主播金币" />
</el-form-item>
<el-form-item label="邀请类型" prop="invitationType">
<el-select v-model="formData.invitationType" placeholder="请选择邀请类型">
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.HOSTS_INVITATION_TYPE)" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="在线人数" prop="onlineFans">
<el-input v-model="formData.onlineFans" placeholder="请输入在线人数" />
</el-form-item>
<el-form-item label="粉丝数量" prop="fans">
<el-input v-model="formData.fans" placeholder="请输入粉丝数量" />
</el-form-item>
<el-form-item label="关注数量" prop="fllowernum">
<el-input v-model="formData.fllowernum" placeholder="请输入关注数量" />
</el-form-item>
<el-form-item label="昨日金币" prop="yesterdayCoins">
<el-input v-model="formData.yesterdayCoins" placeholder="请输入昨日金币" />
</el-form-item>
<el-form-item label="主播国家" prop="country">
<el-input v-model="formData.country" placeholder="请输入主播国家" />
</el-form-item>
<el-form-item label="直播类型 " prop="hostsKind">
<el-input v-model="formData.hostsKind" placeholder="请输入直播类型 娱乐，游戏 " />
</el-form-item>
<el-form-item label="分配情况" prop="isAssigned">
<el-select v-model="formData.isAssigned" placeholder="请选择是否已经分配给员工">
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.INT_TRUE_FLASE)" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="用户 Id" prop="userId">
<el-input v-model="formData.userId" placeholder="请输入用户 Id" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { NewHostsApi, NewHostsVO } from '@/api/server/newhosts'
/** 主播数据管理 表单 */
defineOptions({ name: 'NewHostsForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
id: undefined,
hostsId: undefined,
hostsLevel: undefined,
hostsCoins: undefined,
invitationType: undefined,
onlineFans: undefined,
fans: undefined,
fllowernum: undefined,
yesterdayCoins: undefined,
country: undefined,
hostsKind: undefined,
isAssigned: undefined,
userId: undefined
})
const formRules = reactive({
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await NewHostsApi.getNewHosts(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as NewHostsVO
if (formType.value === 'create') {
await NewHostsApi.createNewHosts(data)
message.success(t('common.createSuccess'))
} else {
await NewHostsApi.updateNewHosts(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
hostsId: undefined,
hostsLevel: undefined,
hostsCoins: undefined,
invitationType: undefined,
onlineFans: undefined,
fans: undefined,
fllowernum: undefined,
yesterdayCoins: undefined,
country: undefined,
hostsKind: undefined,
isAssigned: undefined,
userId: undefined
}
formRef.value?.resetFields()
}
</script>

395
src/views/server/newhosts/index.vue Normal file
View File

@@ -0,0 +1,395 @@
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
<el-form-item :label="t('newHosts.hostsId')" prop="hostsId">
<el-input v-model="queryParams.hostsId" :placeholder="t('newHosts.placeHostId')" clearable
@keyup.enter="handleQuery" class="!w-240px" />
</el-form-item>
<el-form-item :label="t('newHosts.hostsLevel')" prop="hostsLevel">
<el-select v-model="queryParams.hostsLevel" :placeholder="t('newHosts.placeHostLevel')" clearable
class="!w-240px">
<el-option v-for="dict in getStrDictOptions(DICT_TYPE.HOST_LEVEL)" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item :label="t('newHosts.hostsCoins')" prop="hostsCoins">
<el-input v-model="queryParams.hostsCoinsMin" :placeholder="t('newHosts.min')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
<span>
&nbsp;-&nbsp;
</span>
<el-input v-model="queryParams.hostsCoinsMax" :placeholder="t('newHosts.max')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
</el-form-item>
<el-form-item :label="t('newHosts.onlineFans')" prop="onlineFans">
<el-input v-model="queryParams.onlineFansMin" :placeholder="t('newHosts.min')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
<span>
&nbsp;-&nbsp;
</span>
<el-input v-model="queryParams.onlineFansMax" :placeholder="t('newHosts.max')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
</el-form-item>
<el-form-item :label="t('newHosts.fans')" prop="fans">
<el-input v-model="queryParams.fansMin" :placeholder="t('newHosts.min')" clearable @keyup.enter="handleQuery"
class="!w-115px" />
<span>
&nbsp;-&nbsp;
</span>
<el-input v-model="queryParams.fansMax" :placeholder="t('newHosts.max')" clearable @keyup.enter="handleQuery"
class="!w-115px" />
</el-form-item>
<el-form-item :label="t('newHosts.fllowernum')" prop="fllowernum">
<el-input v-model="queryParams.fllowernumMin" :placeholder="t('newHosts.min')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
<span>
&nbsp;-&nbsp;
</span>
<el-input v-model="queryParams.fllowernumMax" :placeholder="t('newHosts.max')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
</el-form-item>
<!-- <el-form-item label="昨日金币" prop="yesterdayCoins">
<el-input
v-model="queryParams.yesterdayCoins"
placeholder="最小值"
clearable
@keyup.enter="handleQuery"
class="!w-115px"
/>
<span>
&nbsp;-&nbsp;
</span>
<el-input
v-model="queryParams.yesterdayCoins"
placeholder="最大值"
clearable
@keyup.enter="handleQuery"
class="!w-115px"
/>
</el-form-item> -->
<el-form-item :label="t('newHosts.hostsCountry')" prop="country">
<el-select v-model="queryParams.country" :placeholder="t('newHosts.placeHostsCountry')" clearable
class="!w-240px">
<el-option v-for="dict in getStrDictOptions(DICT_TYPE.COUNTRY_GROUP)" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item :label="t('newHosts.hostsKind')" prop="hostsKind">
<el-input v-model="queryParams.hostsKind" :placeholder="t('newHosts.placeHostsKind')" clearable
@keyup.enter="handleQuery" class="!w-240px" />
</el-form-item>
<el-form-item :label="t('newHosts.isAssigned')" prop="isAssigned">
<el-select v-model="queryParams.isAssigned" :placeholder="t('newHosts.placeIsAssigned')" clearable
class="!w-240px">
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.INT_TRUE_FLASE)" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item :label="t('newHosts.createTime')" prop="createTime">
<el-date-picker v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss" type="date"
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="t('newHosts.invitationType')" prop="invitationType">
<el-select v-model="queryParams.invitationType" :placeholder="t('newHosts.placeInvitationType')" clearable
class="!w-240px">
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.HOSTS_INVITATION_TYPE)" :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" /> {{ t('newHosts.search') }}
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" /> {{ t('newHosts.reset') }}
</el-button>
<!-- <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['server:new-hosts:create']">
<Icon icon="ep:plus" class="mr-5px" /> {{ t('newHosts.newAdd') }}
</el-button> -->
<el-button type="success" plain @click="handleExport" :loading="exportLoading"
v-hasPermi="['server:new-hosts:export']">
<Icon icon="ep:download" class="mr-5px" /> {{ t('newHosts.export') }}
</el-button>
<el-button @click="dialogAllocation = true">
<Icon icon="ep:refresh" class="mr-5px" /> {{ t('newHosts.allocation') }}
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column :label="t('newHosts.hostsId')" align="center" prop="hostsId" />
<el-table-column :label="t('newHosts.hostsLevel')" sortable align="center" prop="hostsLevel" />
<el-table-column :label="t('newHosts.hostsCoins')" sortable align="center" prop="hostsCoins" />
<el-table-column :label="t('newHosts.invitationType')" align="center" prop="invitationType">
<template #default="scope">
<dict-tag :type="DICT_TYPE.HOSTS_INVITATION_TYPE" :value="scope.row.invitationType" />
</template>
</el-table-column>
<el-table-column :label="t('newHosts.onlineFans')" sortable align="center" prop="onlineFans" />
<el-table-column :label="t('newHosts.fans')" sortable align="center" prop="fans" />
<el-table-column :label="t('newHosts.fllowernum')" sortable align="center" prop="fllowernum" />
<el-table-column :label="t('newHosts.yesterdayCoins')" sortable align="center" prop="yesterdayCoins" />
<el-table-column :label="t('newHosts.hostsCountry')" align="center" prop="country" />
<el-table-column :label="t('newHosts.hostsKind')" align="center" prop="hostsKind" />
<el-table-column :label="t('newHosts.isAssigned')" align="center" prop="isAssigned">
<template #default="scope">
<dict-tag :type="DICT_TYPE.INT_TRUE_FLASE" :value="scope.row.isAssigned" />
</template>
</el-table-column>
<el-table-column :label="t('newHosts.createTime')" align="center" prop="createTime" :formatter="dateFormatter"
width="180px" />
<!-- <el-table-column label="员工 Id" align="center" prop="userId" /> -->
<el-table-column :label="t('newHosts.operate')" align="center" min-width="120px">
<template #default="scope">
<!-- <el-button link type="primary" @click="openForm('update', scope.row.id)"
v-hasPermi="['server:new-hosts:update']">
{{ t('newHosts.edit') }}
</el-button> -->
<el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['server:new-hosts:delete']">
{{ t('newHosts.delete') }}
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination :total="total" :page-sizes="[10, 20, 30, 50, 100, 500, 1000]" 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>
<!-- 表单弹窗：添加/修改 -->
<NewHostsForm 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 { NewHostsApi, NewHostsVO } from '@/api/server/newhosts'
import { getAllocation, getSimpleUserList } from '@/api/system/user'
import NewHostsForm from './NewHostsForm.vue'
import { useCache } from '@/hooks/web/useCache'
import { func } from 'vue-types'
const { wsCache } = useCache()
/** 主播数据管理 列表 */
defineOptions({ name: 'NewHosts' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<NewHostsVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
hostsId: undefined,
hostsLevel: undefined,
onlineFansMin: undefined,
onlineFansMax: undefined,
fansMin: undefined,
fansMax: undefined,
hostsCoinsMin: undefined,
hostsCoinsMax: undefined,
fllowernumMin: undefined,
fllowernumMax: undefined,
invitationType: undefined,
yesterdayCoins: undefined,
country: undefined,
hostsKind: undefined,
isAssigned: undefined,
createTime: [],
userId: undefined,
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
let dialogAllocation = ref(false)//分配弹窗
let selectHostList = ref([{
userId: '',
isAssigned: 0,
}]) //选中的主播列表
let allocationUser = ref('') //选中的分配用户
let allocationUserList = ref([
{
label: '分配用户1',
value: 1
}
]) //选中的分配用户
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
console.log('queryParams', queryParams)
const data = await NewHostsApi.getNewHostsPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 查询员工 */
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
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryParams.fansMin = undefined
queryParams.fansMax = undefined
queryParams.hostsCoinsMin = undefined
queryParams.hostsCoinsMax = undefined
queryParams.fllowernumMin = undefined
queryParams.fllowernumMax = undefined
queryParams.onlineFansMin = undefined
queryParams.onlineFansMax = undefined
queryParams.yesterdayCoins = undefined
queryParams.isAssigned = 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 NewHostsApi.deleteNewHosts(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch { }
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await NewHostsApi.exportNewHosts(queryParams)
download.excel(data, '主播数据管理.xls')
} catch {
} finally {
exportLoading.value = false
}
}
//分配按钮操作
const handleSelectionChange = (val) => {
selectHostList.value = val
console.log(selectHostList.value)
}
//分配确认
function AllocationFun() {
if (selectHostList.value.length == 0) {
message.error('请选择要分配的主播')
return
}
if (allocationUser.value == '') {
message.error('请选择分配用户')
return
}
selectHostList.value.forEach((item) => {
item.userId = allocationUser.value;
item.isAssigned = 1;
})
console.log('数组', selectHostList.value)
NewHostsApi.Allocation(selectHostList.value).then((res) => {
message.success(`分配${selectHostList.value.length}个，成功${res}个`)
dialogAllocation.value = false
getList()
})
}
/** 初始化 **/
onMounted(() => {
getList()
getAllocationList();
})
</script>

395
src/views/server/newhosts/test.vue Normal file
View File

@@ -0,0 +1,395 @@
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
<el-form-item :label="t('newHosts.hostsId')" prop="hostsId">
<el-input v-model="queryParams.hostsId" :placeholder="t('newHosts.placeHostId')" clearable
@keyup.enter="handleQuery" class="!w-240px" />
</el-form-item>
<el-form-item :label="t('newHosts.hostsLevel')" prop="hostsLevel">
<el-select v-model="queryParams.hostsLevel" :placeholder="t('newHosts.placeHostLevel')" clearable
class="!w-240px">
<el-option v-for="dict in getStrDictOptions(DICT_TYPE.HOST_LEVEL)" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item :label="t('newHosts.hostsCoins')" prop="hostsCoins">
<el-input v-model="queryParams.hostsCoinsMin" :placeholder="t('newHosts.min')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
<span>
&nbsp;-&nbsp;
</span>
<el-input v-model="queryParams.hostsCoinsMax" :placeholder="t('newHosts.max')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
</el-form-item>
<el-form-item :label="t('newHosts.onlineFans')" prop="onlineFans">
<el-input v-model="queryParams.onlineFansMin" :placeholder="t('newHosts.min')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
<span>
&nbsp;-&nbsp;
</span>
<el-input v-model="queryParams.onlineFansMax" :placeholder="t('newHosts.max')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
</el-form-item>
<el-form-item :label="t('newHosts.fans')" prop="fans">
<el-input v-model="queryParams.fansMin" :placeholder="t('newHosts.min')" clearable @keyup.enter="handleQuery"
class="!w-115px" />
<span>
&nbsp;-&nbsp;
</span>
<el-input v-model="queryParams.fansMax" :placeholder="t('newHosts.max')" clearable @keyup.enter="handleQuery"
class="!w-115px" />
</el-form-item>
<el-form-item :label="t('newHosts.fllowernum')" prop="fllowernum">
<el-input v-model="queryParams.fllowernumMin" :placeholder="t('newHosts.min')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
<span>
&nbsp;-&nbsp;
</span>
<el-input v-model="queryParams.fllowernumMax" :placeholder="t('newHosts.max')" clearable
@keyup.enter="handleQuery" class="!w-115px" />
</el-form-item>
<!-- <el-form-item label="昨日金币" prop="yesterdayCoins">
<el-input
v-model="queryParams.yesterdayCoins"
placeholder="最小值"
clearable
@keyup.enter="handleQuery"
class="!w-115px"
/>
<span>
&nbsp;-&nbsp;
</span>
<el-input
v-model="queryParams.yesterdayCoins"
placeholder="最大值"
clearable
@keyup.enter="handleQuery"
class="!w-115px"
/>
</el-form-item> -->
<el-form-item :label="t('newHosts.hostsCountry')" prop="country">
<el-select v-model="queryParams.country" :placeholder="t('newHosts.placeHostsCountry')" clearable
class="!w-240px">
<el-option v-for="dict in getStrDictOptions(DICT_TYPE.COUNTRY_GROUP)" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item :label="t('newHosts.hostsKind')" prop="hostsKind">
<el-input v-model="queryParams.hostsKind" :placeholder="t('newHosts.placeHostsKind')" clearable
@keyup.enter="handleQuery" class="!w-240px" />
</el-form-item>
<el-form-item :label="t('newHosts.isAssigned')" prop="isAssigned">
<el-select v-model="queryParams.isAssigned" :placeholder="t('newHosts.placeIsAssigned')" clearable
class="!w-240px">
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.INT_TRUE_FLASE)" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item :label="t('newHosts.createTime')" prop="createTime">
<el-date-picker v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss" type="date"
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="t('newHosts.invitationType')" prop="invitationType">
<el-select v-model="queryParams.invitationType" :placeholder="t('newHosts.placeInvitationType')" clearable
class="!w-240px">
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.HOSTS_INVITATION_TYPE)" :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" /> {{ t('newHosts.search') }}
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" /> {{ t('newHosts.reset') }}
</el-button>
<!-- <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['server:new-hosts:create']">
<Icon icon="ep:plus" class="mr-5px" /> {{ t('newHosts.newAdd') }}
</el-button> -->
<el-button type="success" plain @click="handleExport" :loading="exportLoading"
v-hasPermi="['server:new-hosts:export']">
<Icon icon="ep:download" class="mr-5px" /> {{ t('newHosts.export') }}
</el-button>
<el-button @click="dialogAllocation = true">
<Icon icon="ep:refresh" class="mr-5px" /> {{ t('newHosts.allocation') }}
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column :label="t('newHosts.hostsId')" align="center" prop="hostsId" />
<el-table-column :label="t('newHosts.hostsLevel')" sortable align="center" prop="hostsLevel" />
<el-table-column :label="t('newHosts.hostsCoins')" sortable align="center" prop="hostsCoins" />
<el-table-column :label="t('newHosts.invitationType')" align="center" prop="invitationType">
<template #default="scope">
<dict-tag :type="DICT_TYPE.HOSTS_INVITATION_TYPE" :value="scope.row.invitationType" />
</template>
</el-table-column>
<el-table-column :label="t('newHosts.onlineFans')" sortable align="center" prop="onlineFans" />
<el-table-column :label="t('newHosts.fans')" sortable align="center" prop="fans" />
<el-table-column :label="t('newHosts.fllowernum')" sortable align="center" prop="fllowernum" />
<el-table-column :label="t('newHosts.yesterdayCoins')" sortable align="center" prop="yesterdayCoins" />
<el-table-column :label="t('newHosts.hostsCountry')" align="center" prop="country" />
<el-table-column :label="t('newHosts.hostsKind')" align="center" prop="hostsKind" />
<el-table-column :label="t('newHosts.isAssigned')" align="center" prop="isAssigned">
<template #default="scope">
<dict-tag :type="DICT_TYPE.INT_TRUE_FLASE" :value="scope.row.isAssigned" />
</template>
</el-table-column>
<el-table-column :label="t('newHosts.createTime')" align="center" prop="createTime" :formatter="dateFormatter"
width="180px" />
<!-- <el-table-column label="员工 Id" align="center" prop="userId" /> -->
<el-table-column :label="t('newHosts.operate')" align="center" min-width="120px">
<template #default="scope">
<!-- <el-button link type="primary" @click="openForm('update', scope.row.id)"
v-hasPermi="['server:new-hosts:update']">
{{ t('newHosts.edit') }}
</el-button> -->
<el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['server:new-hosts:delete']">
{{ t('newHosts.delete') }}
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination :total="total" :page-sizes="[10, 20, 30, 50, 100, 500, 1000]" 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>
<!-- 表单弹窗：添加/修改 -->
<NewHostsForm 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 { NewHostsApi, NewHostsVO } from '@/api/server/newhosts'
import { getAllocation, getSimpleUserList } from '@/api/system/user'
import NewHostsForm from './NewHostsForm.vue'
import { useCache } from '@/hooks/web/useCache'
import { func } from 'vue-types'
const { wsCache } = useCache()
/** 主播数据管理 列表 */
defineOptions({ name: 'NewHosts' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<NewHostsVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
hostsId: undefined,
hostsLevel: undefined,
onlineFansMin: undefined,
onlineFansMax: undefined,
fansMin: undefined,
fansMax: undefined,
hostsCoinsMin: undefined,
hostsCoinsMax: undefined,
fllowernumMin: undefined,
fllowernumMax: undefined,
invitationType: undefined,
yesterdayCoins: undefined,
country: undefined,
hostsKind: undefined,
isAssigned: undefined,
createTime: [],
userId: undefined,
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
let dialogAllocation = ref(false)//分配弹窗
let selectHostList = ref([{
userId: '',
isAssigned: 0,
}]) //选中的主播列表
let allocationUser = ref('') //选中的分配用户
let allocationUserList = ref([
{
label: '分配用户1',
value: '1'
}
]) //选中的分配用户
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
console.log('queryParams', queryParams)
const data = await NewHostsApi.getNewHostsPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 查询员工 */
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
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryParams.fansMin = undefined
queryParams.fansMax = undefined
queryParams.hostsCoinsMin = undefined
queryParams.hostsCoinsMax = undefined
queryParams.fllowernumMin = undefined
queryParams.fllowernumMax = undefined
queryParams.onlineFansMin = undefined
queryParams.onlineFansMax = undefined
queryParams.yesterdayCoins = undefined
queryParams.isAssigned = 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 NewHostsApi.deleteNewHosts(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch { }
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await NewHostsApi.exportNewHosts(queryParams)
download.excel(data, '主播数据管理.xls')
} catch {
} finally {
exportLoading.value = false
}
}
//分配按钮操作
const handleSelectionChange = (val) => {
selectHostList.value = val
console.log(selectHostList.value)
}
//分配确认
function AllocationFun() {
if (selectHostList.value.length == 0) {
message.error('请选择要分配的主播')
return
}
if (allocationUser.value == '') {
message.error('请选择分配用户')
return
}
selectHostList.value.forEach((item) => {
item.userId = allocationUser.value;
item.isAssigned = 1;
})
console.log('数组', selectHostList.value)
NewHostsApi.Allocation(selectHostList.value).then((res) => {
message.success(`分配${selectHostList.value.length}个，成功${res}个`)
dialogAllocation.value = false
getList()
})
}
/** 初始化 **/
onMounted(() => {
getList()
getAllocationList();
})
</script>