pxl/tk-page-Fan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bate版本提交

Browse Source
This commit is contained in:
没复习
2025-04-14 21:52:19 +08:00
parent 0bbe30bc7e
commit 6a6dabeca1
15 changed files with 466 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

357
src/views/hosts/hostsList.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="main">
<div class="hostList">
<div>
<div style="display: flex;">
<el-select v-model="searchForm.country" placeholder="选择国家" size="large" style="width: 240px">
<el-select v-model="searchForm.country" filterable placeholder="选择国家" size="large" style="width: 240px">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div></div>
@@ -12,17 +12,23 @@
<el-button class="serch-button" style="margin-left: 50px;" type="primary" @click="serch">查询</el-button>
<el-button class="put-button" :disabled="tableData.length == 0" type="primary"
@click="exportList">导出Excel数据</el-button>
<el-button v-if="userInfo.userType == 3" class="put-button" type="primary"
@click="dialogFormVisible = true">分配给指定员工</el-button>
<el-button @click="filterdialogVisible = true" style="width: 50px;" class="put-button" type="primary"><img
style="height: 30px;" src="@/assets/filter.png"></el-button>
</div>
<div class="hostTable center-justify">
<el-table :data="tableData" stripe v-loading="loading" height="500">
<el-table-column fixed prop="hostId" label="主播id" width="200">
<el-table ref="multipleTableRef" :data="tableData" stripe v-loading="loading" height="500"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="35" />
<el-table-column fixed prop="hostId" label="主播id" width="160">
<template #default="scope">
<div class="hostIdText" @click="openHTML(scope.row.hostId)"> {{ scope.row.hostId }}</div>
</template>
</el-table-column>
<el-table-column prop="hostName" label="主播名字" min-width="200">
<el-table-column prop="hostName" label="主播名字" min-width="160">
<template #default="scope">
{{ scope.row.hostName }}
</template>
@@ -68,6 +74,36 @@
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="120">
<template #default="scope">
<el-popover placement="top-start" :width="200" trigger="hover" :content="scope.row.comment">
<template #reference>
<el-button @click="openComment(scope.row)" link type="primary" size="small">维护情况</el-button>
</template>
</el-popover>
<select @change="handleSelectChange($event, scope.row)" v-model="scope.row.useable" class="m-2"
placeholder="Select" size="small" style="width: 70px">
<option label="未转化" value="N" />
<option label="已转化" value="Y" />
</select>
<el-dialog :modal="false" v-model="commentVisible" title="维护情况" align-center>
<el-input maxlength="80" v-model="commentInfo" placeholder="请输入维护情况" clearable show-word-limit />
<template #footer>
<span class="dialog-footer">
<el-button @click="commentVisible = false">取消</el-button>
<el-button type="primary" @click="uphostcomment()">
提交
</el-button>
</span>
</template>
</el-dialog>
</template>
</el-table-column>
<!-- <el-table-column label="操作">
<template #default="scope">
<div style="display: flex; align-items: center">
@@ -83,29 +119,116 @@
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</div>
<el-dialog v-model="dialogFormVisible" title="分配主播" align-center>
<el-select v-model="staffValue" filterable placeholder="Select" style="width: 240px">
<el-option v-for="item in staffOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="allocation">
分配
</el-button>
</span>
</template>
</el-dialog>
<el-dialog v-model="filterdialogVisible" width="800px">
<el-row :gutter="20">
<el-col :span="8">
<label>选择筛选条件</label>
<el-select v-model="searchForm.dataType" filterable placeholder="筛选条件" style="width: 240px">
<el-option v-for="item in filterOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-col>
<el-col :span="8">
<div v-if="!(searchForm.dataType == 'InvitationType')"><label>最小值</label></div>
<div v-else><label>普票/金票</label></div>
<el-input v-show="!(searchForm.dataType == 'InvitationType')" type="number" v-model="searchForm.dataStart"
placeholder="请输入最小值" />
<el-select v-show="(searchForm.dataType == 'InvitationType')" v-model="searchForm.dataStart" filterable
placeholder="请选择" style="width: 240px">
<el-option v-for="item in [{ label: '普票', value: '1' }, { label: '金票', value: '2' }]" :key="item.value"
:label="item.label" :value="item.value" />
</el-select>
</el-col>
<el-col :span="8">
<div v-show="!(searchForm.dataType == 'InvitationType')"><label>最大值</label></div>
<el-input v-show="!(searchForm.dataType == 'InvitationType')" type="number" v-model="searchForm.dataEnd"
placeholder="请输入最大值" />
</el-col>
</el-row>
<template #footer>
<span class="dialog-footer">
<!-- <el-button @click="filterdialogVisible = false">取消</el-button> -->
<el-button type="primary" @click="filterdialogVisible = false">
确认
</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
// import { getToken, setToken, removeToken } from '@/utils/storage'
import { tkhostdata, dicts, tkhostdetail, exporthosts, downList } from '@/api/account';
import { tkhostdata, dicts, tkhostdetail, downList, getStaffList, managerhosts, upholdinfo, getCountryinfo } from '@/api/account';
import { usePythonBridge, } from '@/utils/pythonBridge'
import { getUser } from '@/utils/storage'
import { ref, reactive, onMounted } from 'vue';
import EChartsComponent from '@/components/EChartsComponent.vue';
import { ElMessage, ElMessageBox } from 'element-plus'
const loading = ref(false)
//py方法
const { givePyAnchorId } = usePythonBridge();
const { givePyAnchorId, exportToExcel } = usePythonBridge();
let num = ref(0)
//账号信息
const userInfo = ref(getUser())
//主播列表DOM
const multipleTableRef = ref(null)
let labelList = ref([])
const tableData = ref([])
//选择国家
const searchForm = ref({
country: '',
time: ''
time: new Date().toISOString().split('T')[0].replace(/-/g, ''),
dataType: '',
dataStart: '',
dataEnd: '',
})
//员工选择列表
let staffOptions = ref([])
//筛选条件选择列表
let filterOptions = ref([])
//选择的员工
let staffValue = ref('')
//选择的主播列表
let selectHostList = ref([])
//分配弹窗是否弹出
let dialogFormVisible = ref(false)
//备注弹窗是否弹出
let commentVisible = ref(false)
//筛选弹窗是否弹出
let filterdialogVisible = ref(false)
//备注信息
let commentInfo = ref('')
//备注信息主播
let commentHost = ref('')
//分页
let pageSize = ref(10)
let page = ref(1)
@@ -114,27 +237,15 @@ let total = ref(0)
const isPopoverVisible = reactive({})
const options = [
{
value: '日本',
label: '日本',
},
{
value: '美国',
label: '美国',
},
{
value: '荷兰',
label: '荷兰',
},
{
value: '澳大利亚',
label: '澳大利亚',
}
]
let options = ref([])
onMounted(() => {
//获取字典
getdictionary()
//获取下级员工
getStaff();
//获取国家
getCountry();
})
function serch() {
@@ -143,66 +254,131 @@ function serch() {
}
function exportList() {
downList('export/hostsinfo',
{
searchTime: searchForm.value.time,
region: searchForm.value.country,
pageSize: pageSize.value,
page: page.value,
userId: getUser().userId,
userType: getUser().userType
}
);
// exporthosts({
// searchTime: searchForm.value.time,
// region: searchForm.value.country,
// pageSize: pageSize.value,
// page: page.value,
// userId: getUser().userId,
// userType: getUser().userType
// }).then(res => {
// const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
// const url = window.URL.createObjectURL(blob);
// const a = document.createElement('a');
// a.href = url;
// a.download = 'table-data.xlsx'; // 下载的文件名
// document.body.appendChild(a);
// a.click();
// a.remove();
// window.URL.revokeObjectURL(url);
// })
if (searchForm.value.dataType == 'InvitationType') {
searchForm.value.dataEnd = searchForm.value.dataStart
}
exportToExcel({
searchTime: searchForm.value.time,
region: searchForm.value.country,
dataType: searchForm.value.dataType == '' ? null : searchForm.value.dataType,
dataStart: searchForm.value.dataStart == '' ? null : searchForm.value.dataStart,
dataEnd: searchForm.value.dataEnd == '' ? null : searchForm.value.dataEnd,
pageSize: pageSize.value,
page: page.value,
userId: userInfo.value.userId,
userType: userInfo.value.userType
})
// //浏览器导出方法
// downList('export/hostsinfo',
// {
// searchTime: searchForm.value.time,
// region: searchForm.value.country,
// pageSize: pageSize.value,
// page: page.value,
// userId: userInfo.value.userId,
// userType: userInfo.value.userType
// }
// );
}
//分页每页条数
function handleSizeChange(val) {
console.log(`${val} items per page`)
getlist();
}
//分页页数
function handleCurrentChange(val) {
console.log(`current page: ${val}`)
getlist();
}
//选择行
function handleSelectionChange(data) {
console.log(data)
data.forEach(item => {
selectHostList.value.push(item.hostId)
})
// multipleTableRef.value = data
// console.log(multipleTableRef.value)
}
//获取主播列表
const getlist = () => {
if (searchForm.value.dataType == 'InvitationType') {
searchForm.value.dataEnd = searchForm.value.dataStart
}
loading.value = true
console.log(searchForm.value)
tkhostdata({
searchTime: searchForm.value.time,
region: searchForm.value.country,
dataType: searchForm.value.dataType == '' ? null : searchForm.value.dataType,
dataStart: searchForm.value.dataStart == '' ? null : searchForm.value.dataStart,
dataEnd: searchForm.value.dataEnd == '' ? null : searchForm.value.dataEnd,
pageSize: pageSize.value,
page: page.value,
userId: getUser().userId,
userType: getUser().userType
userId: userInfo.value.userId,
userType: userInfo.value.userType
}).then(res => {
loading.value = false
total.value = res.total
tableData.value = []
res.records.forEach(item => {
if (item.infoMap.InvitationType == '1') {
item.infoMap.InvitationType = '普票'
} else if (item.infoMap.InvitationType == '2') {
item.infoMap.InvitationType = '金票'
}
console.log(item.infoMap)
item = { ...item, ...item.infoMap }
tableData.value.push(item)
})
})
}
function openComment(data) {
console.log(data)
commentInfo.value = data.comment
commentHost.value = data.hostId
commentVisible.value = true
}
//修改主播维护状态
function handleSelectChange(event, data) {
upholdinfo({
"hostId": data.hostId,
"userId": userInfo.value.userId,
"tenantId": userInfo.value.tenantId,
// "comment": "我已经尽力维护，但是失败了",
"useable": event.target.value
}).then(res => {
console.log(res)
})
}
//更改主播维护备注
function uphostcomment() {
upholdinfo({
"hostId": commentHost.value,
"userId": userInfo.value.userId,
"tenantId": userInfo.value.tenantId,
"comment": commentInfo.value,
}).then(res => {
console.log(res)
serch()
commentVisible.value = false
})
}
//获取字典
const getdictionary = () => {
dicts({
@@ -214,10 +390,62 @@ const getdictionary = () => {
// labelList.value = res.records
labelList.value = res
console.log(labelList.value)
labelList.value.forEach(item => {
filterOptions.value.push({
value: item.paramCode,
label: item.paramCodeMeaning
})
})
})
}
//获取国家
function getCountry() {
getCountryinfo({}).then(res => {
console.log(res)
res.forEach(item => {
options.value.push({ value: item.countryGroupName, label: item.countryGroupName })
})
console.log(options.value)
})
}
//获取下级员工
const getStaff = () => {
getStaffList({
userId: userInfo.value.userId,
userType: userInfo.value.userType,
activeYn: userInfo.value.activeYn,
tenantId: userInfo.value.tenantId,
}).then(res => {
console.log(res)
res.forEach(item => {
staffOptions.value.push({
value: item.userId,
label: item.userName
})
})
})
}
//分配主播给员工
function allocation() {
managerhosts({
"manaId": userInfo.value.userId,
"userId": staffValue.value,
"tenantId": userInfo.value.tenantId,
"hostIds": selectHostList.value
}).then(res => {
if (res) {
dialogFormVisible.value = false
}
})
}
//获取主播信息
const getTkhostdetail = (id) => {
tkhostdetail({
@@ -254,12 +482,18 @@ function openHTML(id) {
</script>
<style lang="less">
.main {
.hostList {
box-sizing: border-box;
// height: 100vh;
width: 100%;
padding: 40px;
/* 页面无法选中 */
// -webkit-user-select: none;
// -moz-user-select: none;
// -ms-user-select: none;
// user-select: none;
.hostTable {
width: 100%;
padding: 40px 0;
@@ -289,6 +523,13 @@ function openHTML(id) {
}
}
.el-dialog {
--el-dialog-font-line-height: 50px;
--el-dialog-width: 600px;
--el-dialog-border-radius: 8px;
}
.center-line {
display: flex;
flex-direction: column;
@@ -319,7 +560,7 @@ function openHTML(id) {
::v-deep(.el-input__wrapper) {
background-color: #F2FAF9;
border: 1px solid #B7CEC5;
height: 48px;
height: 44px;
}
::v-deep(.el-select__wrapper) {