提交 166643d7 作者: 施汉文

🐞 fix: 修改了弹框滚动,以及一些线上报错问题

上级 963caaf8
......@@ -852,3 +852,8 @@ li {
.el-input__icon{
line-height: 1;
}
//弹框内容超出显示滚动
.el-message-box__message {
max-height: 500px !important;
overflow-y: auto !important;
}
\ No newline at end of file
<template>
<el-drawer
title="新增关联账号"
:visible="show"
size="360px"
:append-to-body="true"
@close="close"
>
<el-drawer title="新增关联账号" :visible="show" size="360px" :append-to-body="true" @close="close">
<div class="content">
<el-form
ref="form"
:model="form"
label-position="top"
:rules="rules"
label-width="120px"
>
<el-form ref="form" :model="form" label-position="top" :rules="rules" label-width="120px">
<div class="inputContent">
<el-form-item
label="请输入w账号"
prop="username"
>
<el-input
v-model.trim="form.username"
placeholder="请输入w账号"
class="input-with-select"
>
<el-form-item label="请输入w账号" prop="username">
<el-input v-model.trim="form.username" placeholder="请输入w账号" class="input-with-select">
</el-input>
</el-form-item>
<el-form-item
label="请输入主游戏名"
prop="main_game_id"
>
<el-select
v-model="form.main_game_id"
filterable
remote
clearable
reserve-keyword
placeholder="请输入主游戏名"
style="width: 100%;"
:remote-method="remoteMethod"
:loading="loading"
@focus="gameNameList=optionsList"
>
<el-option
v-for="item in gameNameList"
:key="item.value"
:label="item.label"
:value="item.value"
>
<el-form-item label="请输入主游戏名" prop="main_game_id">
<el-select v-model="form.main_game_id" filterable remote clearable reserve-keyword placeholder="请输入主游戏名"
style="width: 100%;" :remote-method="remoteMethod" :loading="loading" @focus="gameNameList = optionsList">
<el-option v-for="item in gameNameList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="请输入区服"
prop="server_info"
>
<el-select
v-model.trim="form.server_info"
filterable
remote
:disabled="form.main_game_id==''"
clearable
style="width: 100%;"
reserve-keyword
placeholder="请先选择主游戏"
:remote-method="remoteMethodServer"
:loading="loading"
>
<el-option
v-for="item in serverNameList"
:key="item.id"
:label="item.label"
:value="item.value"
>
<el-form-item label="请输入区服" prop="server_info">
<el-select v-model.trim="form.server_info" filterable remote :disabled="form.main_game_id == ''" clearable
style="width: 100%;" reserve-keyword placeholder="请先选择主游戏" :remote-method="remoteMethodServer"
:loading="loading">
<el-option v-for="item in serverNameList" :key="item.id" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="请输入角色名"
prop="role_name"
>
<el-input
v-model.trim="form.role_name"
placeholder="请输入角色"
class="input-with-select"
>
<el-form-item label="请输入角色名" prop="role_name">
<el-input v-model.trim="form.role_name" placeholder="请输入角色" class="input-with-select">
</el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
size="small"
@click="onSubmit"
>搜索</el-button>
<el-button type="primary" size="small" @click="onSubmit">搜索</el-button>
</el-form-item>
</div>
</el-form>
......@@ -100,24 +35,16 @@
<div class="bind-account-title">
账号列表
</div>
<userTable
:list="tableList"
@checkedTag="checkedTag"
/>
<userTable :list="tableList" @checkedTag="checkedTag" />
</div>
<!-- <div class="line"></div> w92865226508-->
<div
v-if="userDetails.username"
class="account_select_userInfo"
>
<div v-if="userDetails.username" class="account_select_userInfo">
<div class="bind-account-title" style="margin-top: 20px;">
账号详情
</div>
<div class="item rowFlex columnCenter"><span class="label">账号</span>
<p class="text">{{ userDetails.username }}</p> <span
v-if="userDetails.account_type==2"
class="account_type"
></span>
<p class="text">{{ userDetails.username }}</p> <span v-if="userDetails.account_type == 2"
class="account_type"></span>
</div>
<div class="item rowFlex columnCenter"><span class="label">获客渠道</span>
<p class="text">{{ userDetails.channel_name }}</p>
......@@ -141,10 +68,10 @@
<p class="text">{{ userDetails.mobile }}</p>
</div>
<div class="item rowFlex columnCenter"><span class="label">染色时间</span>
<p class="text">{{ moment( userDetails.seq_time * 1000).format('YYYY-MM-DD') }}</p>
<p class="text">{{ moment(userDetails.seq_time * 1000).format('YYYY-MM-DD') }}</p>
</div>
<div class="item rowFlex columnCenter"><span class="label">注册时间</span>
<p class="text">{{ moment( userDetails.reg_time * 1000).format('YYYY-MM-DD') }}</p>
<p class="text">{{ moment(userDetails.reg_time * 1000).format('YYYY-MM-DD') }}</p>
</div>
<div class="item rowFlex columnCenter"><span class="label">登录系统</span>
<p class="text">{{ userDetails.last_login_os }}</p>
......@@ -157,29 +84,16 @@
</div>
</div>
</div>
<page
class="pageInfo"
:page-info="pageInfo"
@requestNextPage="requestNextPage"
/>
<page class="pageInfo" :page-info="pageInfo" @requestNextPage="requestNextPage" />
<span class="dialog-footer rowFlex">
<el-button
class="btn"
type="primary"
size="small"
:disabled="!userDetails.id"
@click="confirmSubmit"
>确 定</el-button>
<el-button
class="btn"
size="small"
@click="close"
>取 消</el-button>
<el-button class="btn" type="primary" size="small" :disabled="!userDetails.id" @click="confirmSubmit">
</el-button>
<el-button class="btn" size="small" @click="close">取 消</el-button>
</span>
</el-drawer>
</template>
</template>
<script type="text/javascript">
<script type="text/javascript">
import moment from 'moment'
import userTable from './userTable.vue'
import { getRoleHoLo, memberView, selectSearch } from '@/api/game'
......@@ -419,32 +333,37 @@
}
</script>
<style lang="scss" scoped>
::v-deep .el-drawer {
<style lang="scss" scoped>
::v-deep .el-drawer {
height: 100%;
overflow: auto;
}
.bind-account-title{
}
.bind-account-title {
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 600;
color: #333333;
text-align: left;
margin-bottom: 10px;
}
.content {
}
.content {
width: 100%;
height: 100%;
overflow: auto;
padding-bottom: 200px;
padding: 0 10px;
.inputContent {
width: 100%;
}
.info {
width: 100%;
margin-top: 30px;
overflow: auto;
.table {
width: 100%;
min-width: 500px;
......@@ -460,15 +379,18 @@
height: 70%;
border-right: 1px dashed #e0e0e0;
}
.account_select_userInfo {
width: 100%;
height: auto;
padding-left: 20px;
margin-top: -20px;
margin-bottom: 150px;
.item {
width: 100%;
margin-top: 20px;
.label {
width: 30%;
font-size: 14px;
......@@ -478,6 +400,7 @@
text-align: left;
margin-right: 20px;
}
.text {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -488,29 +411,33 @@
}
}
}
.account_table{
}
.account_table {
width: 100%;
height: auto;
overflow: auto;
}
.account_type {
}
.account_type {
color: #f56c6c;
font-weight: bold;
margin-left: 5px;
background: #f7eded;
padding: 2px 5px;
border-radius: 3px;
}
.pageInfo {
}
.pageInfo {
width: calc(100% - 20px);
height: 82px;
position: absolute;
right: 20px;
bottom: 60px;
background: #fff;
}
.dialog-footer {
}
.dialog-footer {
width: calc(100% - 20px);
position: absolute;
right: 20px;
......@@ -521,16 +448,15 @@
justify-content: flex-end;
background: #fff;
z-index: 10;
.btn {
width: 84px;
height: 32px;
}
}
</style>
<style>
::v-deep .el-select-dropdown {
}
</style>
<style>
::v-deep .el-select-dropdown {
min-width: 210px !important;
}
</style>
\ No newline at end of file
}
</style>
\ No newline at end of file
<template>
<el-select
v-model="resulte"
v-loadmore="loadMoreList"
filterable
remote
:disabled="disabled"
:remote-method="remoteMethod"
:placeholder="placeholder"
:clearable='false'
reserve-keyword
:loading="loading"
@change="selectChange"
>
<el-option
v-for="(item,index) in searchUserOption"
:key="index"
:value="item.role_id || item.id"
:label="item.role_name"
style="height:50px;"
>
<el-select v-model="resulte" v-loadmore="loadMoreList" filterable remote :disabled="disabled"
:remote-method="remoteMethod" :placeholder="placeholder" :clearable='false' reserve-keyword :loading="loading"
@change="selectChange">
<el-option v-for="(item, index) in searchUserOption" :key="index" :value="item?.role_id || item.id"
:label="item.role_name" style="height:50px;">
<div class="rowFlex columnCenter selectItem">
<!-- 没有头像 -->
<!-- <el-image v-if="item.avata" fit="fill" :src="item.avatar" class="tableImage "></el-image> -->
<div class="infoSpan columnFlex rowCenter">
<p class="hidden">{{ item.role_name &&item.role_name!=''?item.game_name+' - '+item.server_name+' - '+item.role_name:'' }}</p>
<p class="rowFlex columnCenter">角色名:<label class="hidden" style="max-width:120px;">{{ item.role_name }}</label></p>
<p class="hidden">
{{ item.role_name && item.role_name != '' ? item.game_name + ' - ' + item.server_name + ' -
'+item.role_name:'' }}
</p>
<p class="rowFlex columnCenter">角色名:<label class="hidden" style="max-width:120px;">
{{ item.role_name }}
</label>
</p>
</div>
</div>
</el-option>
</el-select>
</template>
<script>
</template>
<script>
import { roleList } from '@/api/game'
import { mapState } from 'vuex'
export default {
......@@ -128,28 +119,33 @@
}
</script>
<style lang="scss" scoped>
.selectItem{
<style lang="scss" scoped>
.selectItem {
height: 50px;
}
.infoSpan{
}
.infoSpan {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
max-width: 250px;
height: 50px;
p{
font-size:12px;max-width:100%;
p {
font-size: 12px;
max-width: 100%;
line-height: 20px;
}
span{
color:#FFA81D;
}
span {
color: #FFA81D;
}
.tableImage{
width:30px;height:30px;
}
.tableImage {
width: 30px;
height: 30px;
border-radius: 30px;
margin-right: 10px;
}
</style>
\ No newline at end of file
}
</style>
\ No newline at end of file
<template>
<div class="reportList">
<el-form
ref="taskForm"
:model="reportForm"
class="taskForm"
label-position="top"
label-width="85px"
>
<el-form ref="taskForm" :model="reportForm" class="taskForm" label-position="top" label-width="85px">
<el-form-item label="角色名称">
<el-input
v-model="reportForm.role_name"
clearable
placeholder="请输入角色名称"
@change="filterChange"
>
<el-input v-model="reportForm.role_name" clearable placeholder="请输入角色名称" @change="filterChange">
</el-input>
</el-form-item>
<el-form-item label="审批状态">
<el-select
v-model="reportForm.approval_status"
style="width:100%;"
clearable
placeholder="请选择审批状态"
@change="filterChange"
>
<el-option
v-for="item in approvalList"
:key="item.value"
:label="item.label"
:value="item.value"
>
<el-select v-model="reportForm.approval_status" style="width:100%;" clearable placeholder="请选择审批状态"
@change="filterChange">
<el-option v-for="item in approvalList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="申请方式">
<el-select
v-model="reportForm.register_type"
style="width:100%;"
clearable
placeholder="请选择申请方式"
@change="filterChange"
>
<el-option
v-for="item in register_type_list"
:key="item.value"
:label="item.label"
:value="item.value"
>
<el-select v-model="reportForm.register_type" style="width:100%;" clearable placeholder="请选择申请方式"
@change="filterChange">
<el-option v-for="item in register_type_list" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div
v-infinite-scroll="paperScroll"
:infinite-scroll-disabled="!isMoreRecord"
:infinite-scroll-immediate="false"
class="mailListScroll"
>
<div v-infinite-scroll="paperScroll" :infinite-scroll-disabled="!isMoreRecord" :infinite-scroll-immediate="false"
class="mailListScroll">
<!-- 举报申请 -->
<div class="scrollMain" v-if="reportList.length > 0">
<div
v-for="(item, index) in reportList"
:key="index"
class="reportContent"
@click="reportProcess(item, index)"
>
<div v-for="(item, index) in reportList" :key="index" class="reportContent" @click="reportProcess(item, index)">
<div class="reportItem rowFlex spaceBetween columnCenter">
<div class="reportItemLeft">
<p><span class="label">角色名称:</span><span class="value">{{ item.role_name }}</span></p>
......@@ -80,74 +40,30 @@
</div>
<div class="reportItemRight columnFlex columnCenter">
<!-- 撤销 当item.create_user_id == zq_user_id 的时候才可以撤销 只能撤销自己提交的审批 -->
<el-button
v-if="item.approval_status == 1 && (item.create_user_id == cser_id)"
type="primary"
size="mini"
@click.stop="handleReport(item)"
>撤销</el-button>
<el-button v-if="item.approval_status == 1 && (item.create_user_id == cser_id)" type="primary" size="mini"
@click.stop="handleReport(item)">撤销</el-button>
<!-- 审批 只有待审批状态可以并且申请方式是玩家登记的时候才有这个 -->
<el-button
v-if="item.approval_status == 1 && reportForm.register_type == 2 && (item.customer_id == userInfo.id)"
type="primary"
size="mini"
@click.stop="resubmitReportApproval(item)"
>审批</el-button>
type="primary" size="mini" @click.stop="resubmitReportApproval(item)">审批</el-button>
<!-- 重新提交 -->
<el-button
v-else-if="item.approval_status == 4"
type="primary"
size="mini"
@click.stop="resubmitReport(item)"
>重新提交</el-button>
<img
v-if="item.approval_status == 1"
:src="shenpi1"
class="icon"
/>
<img
v-else-if="item.approval_status == 2"
:src="shenpi2"
class="icon"
/>
<img
v-else-if="item.approval_status == 3"
:src="shenpi3"
class="icon"
/>
<img
v-else-if="item.approval_status == 4"
:src="shenpi4"
class="icon"
/>
<img
v-else-if="item.approval_status == 5"
:src="shenpi5"
class="icon"
/>
<el-button v-else-if="item.approval_status == 4" type="primary" size="mini"
@click.stop="resubmitReport(item)">重新提交</el-button>
<img v-if="item.approval_status == 1" :src="shenpi1" class="icon" />
<img v-else-if="item.approval_status == 2" :src="shenpi2" class="icon" />
<img v-else-if="item.approval_status == 3" :src="shenpi3" class="icon" />
<img v-else-if="item.approval_status == 4" :src="shenpi4" class="icon" />
<img v-else-if="item.approval_status == 5" :src="shenpi5" class="icon" />
</div>
</div>
<!-- 审批进度 -->
<el-collapse-transition>
<div
v-if="item.showStep"
class="reportProcessList"
>
<el-steps
direction="vertical"
:active="item.current"
finish-status="success"
>
<el-step
v-for="(items, indexs) in item.reportProcessList"
:key="'trans_item_' + indexs"
:title="items.node_name"
>
<div v-if="item.showStep" class="reportProcessList">
<el-steps direction="vertical" :active="item.current" finish-status="success">
<el-step v-for="(items, indexs) in item.reportProcessList" :key="'trans_item_' + indexs"
:title="items.node_name">
<template slot="description">
<div
v-if="items"
class="trans-follow-1 card-style"
>
<div v-if="items" class="trans-follow-1 card-style">
<div class="follow-item">
<span class="follow-info-label label-font">
{{ items.node_sort !== '0' ? '审批人:' : '登记人:' }}
......@@ -155,32 +71,21 @@
<span class="info-value value-font">
{{ Array.isArray(items.user_name) ? items.user_name[0] : items.user_name }}
</span>
<el-tooltip
v-if="Array.isArray(items.user_name) && items.user_name.length > 1"
class="item"
effect="dark"
:content="items.user_name.slice(1).join('、')"
placement="top"
>
<el-tooltip v-if="Array.isArray(items.user_name) && items.user_name.length > 1" class="item"
effect="dark" :content="items.user_name.slice(1).join('、')" placement="top">
<span class="info-value value-font info-value-color">
{{ `+${items.user_name.length - 1}` }}
</span>
</el-tooltip>
</div>
<div
v-if="items.node_sort !== '0' || items.node_name === '系统'"
class="follow-item"
>
<div v-if="items.node_sort !== '0' || items.node_name === '系统'" class="follow-item">
<span class="follow-info-label label-font">
审批结果:
</span>
<span
class="info-value value-font"
:class="[items.current < indexs? '' : switchStateTag(items.approval_result)]"
>
{{ items.current < indexs ? '' : items.approval_result_text }}
</span>
<span class="info-value value-font"
:class="[items.current < indexs ? '' : switchStateTag(items.approval_result)]">
{{ items.current < indexs ? '' : items.approval_result_text }} </span>
</div>
<div class="follow-item">
<span class="follow-info-label label-font">
......@@ -190,10 +95,8 @@
{{ items.node_sort === '0' ? items.create_time : items.update_time }}
</span>
</div>
<div
v-if="(items.node_sort !== '0' || items.node_name === '系统') && items.approval_result==='2'"
class="follow-item"
>
<div v-if="(items.node_sort !== '0' || items.node_name === '系统') && items.approval_result === '2'"
class="follow-item">
<span class="follow-info-label label-font">
驳回原因:
</span>
......@@ -203,9 +106,8 @@
</div>
<div
v-if="items.node_sort === item.reportProcessList[item.reportProcessList.length - 1 ].node_sort+ '' && items.approval_result === '1' && items.node_sort !== '0'"
class="follow-item-remark follow-item"
>
v-if="items.node_sort === item.reportProcessList[item.reportProcessList.length - 1].node_sort + '' && items.approval_result === '1' && items.node_sort !== '0'"
class="follow-item-remark follow-item">
<span class="follow-info-label label-font">
处理结果:
</span>
......@@ -213,24 +115,17 @@
{{ items.extra_attribution.banned_text }}
</span>
</div>
<div
v-if="items.node_sort === '0' && items.node_name !== '系统'"
class="info-item-remark"
>
<div v-if="items.node_sort === '0' && items.node_name !== '系统'" class="info-item-remark">
<div style="display: flex;">
<span class="info-label remark-label">详情:</span>
<span
class="preview-btn"
@click.stop="previewRemark(items.extra_attribution.remark)"
>
<span class="preview-btn" @click.stop="previewRemark(items.extra_attribution.remark)">
<i class="el-icon-view"></i>
点击查看大图
</span>
</div>
<div
class="remark-value"
v-html="formatImg(items.extra_attribution && items.extra_attribution.remark ? items.extra_attribution.remark : '')"
></div>
<div class="remark-value"
v-html="formatImg(items.extra_attribution && items.extra_attribution.remark ? items.extra_attribution.remark : '')">
</div>
</div>
</div>
</template>
......@@ -244,33 +139,20 @@
<noContent />
</div>
</div>
<el-dialog
:visible.sync="dialogRemarkVisible"
append-to-body
title="查看大图"
custom-class="remake-dialog"
>
<el-dialog :visible.sync="dialogRemarkVisible" append-to-body title="查看大图" custom-class="remake-dialog">
<div class="remake-box">
<div v-html="dialogRemake"></div>
</div>
</el-dialog>
<!-- 重新提交 -->
<resubmitReport
v-if="showResubmitReport"
:report-info="reportInfo"
:show.sync="showResubmitReport"
@updateReportList="filterChange"
/>
<resubmitReport v-if="showResubmitReport" :report-info="reportInfo" :show.sync="showResubmitReport"
@updateReportList="filterChange" />
<!-- 审批 -->
<approvalTask
v-if="isApproval"
:show.sync="isApproval"
:report-info="reportInfo"
@updateReportList="filterChange"
/>
<approvalTask v-if="isApproval" :show.sync="isApproval" :report-info="reportInfo"
@updateReportList="filterChange" />
</div>
</template>
<script>
</template>
<script>
import { searchcondition, reportIndex, reportCancel, reportProcess } from '@/api/game'
import { mapState, mapMutations } from 'vuex'
import { removeDp, formatNumber,debounce } from '@/utils/index'
......@@ -493,7 +375,7 @@
} else {
this.reportList = removeDp(this.reportList, res.data.data, 'id')
}
if (this.reportList.length > 0) {
if (this.reportList?.length > 0) {
this.reportList.map((item) => {
item.showStep = false
item.current = 0
......@@ -502,12 +384,12 @@
} else {
this.reportList = []
}
if (res.data.data.length < 20) {
if (res.data.data?.length < 20) {
this.isMoreRecord = false
} else {
this.isMoreRecord = true
}
if (res.data.data.length < 20) {
if (res.data.data?.length < 20) {
this.isMoreRecord = false
} else {
this.isMoreRecord = true
......@@ -517,12 +399,13 @@
}
</script>
<style lang="scss" scoped>
.reportList {
<style lang="scss" scoped>
.reportList {
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
.taskForm {
::v-deep .el-form-item {
margin-bottom: 10px;
......@@ -555,7 +438,7 @@
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #3491FA ;
color: #3491FA;
border: none;
}
......@@ -578,10 +461,12 @@
.mailListScroll {
width: 100%;
height: auto;
.scrollMain {
width: 100%;
height: auto;
margin-bottom: 40px;
.reportContent {
width: calc(100% - 10px);
}
......@@ -672,66 +557,66 @@
background: #e4fff1 !important;
}
}
}
}
// 掌游的样式
::v-deep.el-step .el-step__line {
// 掌游的样式
::v-deep.el-step .el-step__line {
width: 1px;
}
}
::v-deep .el-step > .is-success {
color: #3491FA ;
border-color: #3491FA ;
::v-deep .el-step>.is-success {
color: #3491FA;
border-color: #3491FA;
.el-step__line {
background-color: #e5e6eb;
}
}
}
::v-deep .el-step__main > .is-success {
color: #3491FA ;
}
::v-deep .el-step__main>.is-success {
color: #3491FA;
}
::v-deep .el-step > .is-process {
color: #3491FA ;
border-color: #3491FA ;
::v-deep .el-step>.is-process {
color: #3491FA;
border-color: #3491FA;
.el-step__line {
background-color: #e5e6eb;
}
}
}
::v-deep .el-step__main > .is-process {
color: #3491FA ;
}
::v-deep .el-step__main>.is-process {
color: #3491FA;
}
.form-item-btn {
.form-item-btn {
margin: 0 0 0 20px;
}
}
.audit-label {
.audit-label {
font-size: 14px;
font-weight: 800;
margin: 0 0 10px 0;
}
}
.remark-label {
.remark-label {
color: #949fb0;
font-size: 14px;
}
}
.preview-btn {
.preview-btn {
cursor: pointer;
font-size: 14px;
color: #3491FA ;
color: #3491FA;
margin: 0 0 0 10px;
i {
margin: 0 5px 0 0;
}
}
}
.remark-value {
.remark-value {
min-height: 100px;
margin: 10px 0 0 40px;
padding: 6px 12px;
......@@ -739,31 +624,31 @@
border-radius: 4px;
cursor: not-allowed;
color: #333;
}
}
.flex-box {
.flex-box {
display: flex;
.remark-lebel {
width: 50px;
text-align: right;
}
}
}
.refund-flow-drawer {
.refund-flow-drawer {
position: fixed;
top: 0;
right: 700px;
}
}
.btm-btn-box {
.btm-btn-box {
position: fixed;
bottom: 20px;
width: 560px;
height: 32px;
}
}
.audit-state {
.audit-state {
width: 50px;
height: 50px;
position: absolute;
......@@ -775,16 +660,16 @@
.audit-state-stamp {
font-size: 50px;
}
}
}
.info-item {
.info-item {
width: 45%;
display: flex;
height: 18px;
margin: 0 0 12px 0;
}
}
.info-item-pic {
.info-item-pic {
width: 100%;
min-height: 96px;
max-height: 192px;
......@@ -827,39 +712,39 @@
height: 80px;
}
&:hover > .preview-pic {
&:hover>.preview-pic {
z-index: 100;
}
}
}
}
}
.flex-btn {
.flex-btn {
display: flex;
justify-content: space-between;
}
}
.info-label {
.info-label {
// width: 90px;
// text-align: right;
display: block;
margin: 0 10px 0 0;
font-size: 14px;
color: #949fb0;
}
}
.info-value {
.info-value {
display: block;
font-size: 14px;
color: #333;
}
}
.card-style {
.card-style {
background: #f2f2f7;
border-radius: 4px;
}
}
.trans-follow-1 {
.trans-follow-1 {
width: 300px;
min-height: fit-content;
margin: 6px 0 12px 0;
......@@ -879,12 +764,12 @@
}
.info-value-color {
color: #3491FA ;
color: #3491FA;
margin-left: 5px;
}
}
}
.follow-item {
.follow-item {
min-height: 20px;
line-height: 20px;
margin: 0 0 12px 0;
......@@ -894,29 +779,29 @@
width: 90px;
text-align: right;
}
}
}
.left-label {
.left-label {
width: 60px;
}
}
.follow-info-label {
.follow-info-label {
white-space: nowrap;
text-align: left;
margin: 0 10px 0 0;
}
}
.info-value {
.info-value {
font-size: 14px;
color: #333;
}
}
.label-font {
.label-font {
font-size: 14px;
color: #949fb0;
}
}
.info-item-remark {
.info-item-remark {
width: 100%;
padding: 0 0 12px 0;
line-height: 20px;
......@@ -929,10 +814,10 @@
display: block;
width: 440px;
}
}
}
.reportProcessList {
.reportProcessList {
margin-bottom: 20px;
margin-top: 20px;
}
</style>
\ No newline at end of file
}
</style>
\ No newline at end of file
......@@ -5,178 +5,96 @@
</div> -->
<div class="account-task-container-content" v-scroll="requestOrderList">
<!-- 运营任务 和 用户任务 -->
<div
class="orderDetailsScroll"
v-loading="loading"
>
<div class="orderDetailsScroll" v-loading="loading">
<div v-if="orderList.length > 0">
<div
v-for="(item, index) in orderList"
:key="index"
class="orderDetails"
>
<div v-for="(item, index) in orderList" :key="index" class="orderDetails">
<div class="orderDetailsList">
<el-collapse
v-model="collapseValue"
@change="handleChange(item,$event)"
>
<el-collapse-item :name="item.order_id || '--'">
<el-collapse v-model="collapseValue" @change="handleChange(item, $event)">
<el-collapse-item :name="item?.order_id || '--'">
<template slot="title">
<div class="orderDetailsTitle">
<div class="money rowFlex spaceBetween">
<p class="text">{{ item.role_name }} - {{ item.server_name }} - ¥{{ item.recharge_total }}</p>
<div class="btns">
<span style="color: #0988f2">{{ taskTypeList.find((items) => items.value == item.plan_type) && taskTypeList.find((items) => items.value == item.plan_type).label?taskTypeList.find((items) => items.value == item.plan_type).label:'' }}</span>
<span
v-if="item.status_name"
class="btn"
:class="[item.status_name == '待跟进' ? 'noSend' : '', item.status_name == '已跟进' ? 'sended' : '', item.status_name == '已完成' ? 'sended' : '', item.status_name == '跟进中' ? 'noSend' : '']"
>{{ item.status_name }}</span>
<span style="color: #0988f2">{{taskTypeList.find((items) => items.value == item.plan_type) &&
taskTypeList.find((items) => items.value == item.plan_type).label ? taskTypeList.find((items)
=> items.value == item.plan_type).label:'' }}</span>
<span v-if="item.status_name" class="btn"
:class="[item.status_name == '待跟进' ? 'noSend' : '', item.status_name == '已跟进' ? 'sended' : '', item.status_name == '已完成' ? 'sended' : '', item.status_name == '跟进中' ? 'noSend' : '']">{{
item.status_name }}</span>
</div>
</div>
</div>
</template>
<div class="editLayer">
<el-form
:model="webForm"
label-width="100px"
>
<el-form-item
label="跟进客服:"
>
<el-form :model="webForm" label-width="100px">
<el-form-item label="跟进客服:">
<p class="text" style="margin-left: 10px;">{{ item.tracer_name || '--' }}</p>
</el-form-item>
<el-form-item
label="待维护日期:"
>
<el-form-item label="待维护日期:">
<p class="text" style="margin-left: 10px;">{{ item.assignment_time }}</p>
</el-form-item>
<!-- 新增异常原因筛选 当 plan_type==5 5:为大R异跟进异常时 新增异常原因筛选 -->
<el-form-item
v-if="taskInfo.plan_type && taskInfo.plan_type==5"
label="异常原因"
prop="abnormal_types"
>
<el-select
v-model="webForm.abnormal_types"
placeholder="请选择"
multiple
style="margin-left: 10px;"
collapse-tags
>
<el-option
v-for="item in errorTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
>
<el-form-item v-if="taskInfo.plan_type && taskInfo.plan_type == 5" label="异常原因"
prop="abnormal_types">
<el-select v-model="webForm.abnormal_types" placeholder="请选择" multiple
style="margin-left: 10px;" collapse-tags>
<el-option v-for="item in errorTypeList" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="跟进结果:"
prop="trace_result"
>
<el-select
v-model="webForm.trace_result"
placeholder="请选择"
style="margin-left: 10px;"
>
<el-option
v-for="item in traceList"
:key="item.value"
:label="item.label"
:value="item.value"
> </el-option>
<el-form-item label="跟进结果:" prop="trace_result">
<el-select v-model="webForm.trace_result" placeholder="请选择" style="margin-left: 10px;">
<el-option v-for="item in traceList" :key="item.value" :label="item.label"
:value="item.value"> </el-option>
</el-select>
</el-form-item>
<el-form-item
v-if="activeType == 'user_task'"
label="免打扰:"
prop="no_trouble"
style="margin-left: 10px;"
>
<el-form-item v-if="activeType == 'user_task'" label="免打扰:" prop="no_trouble"
style="margin-left: 10px;">
<div class="noDisturb">
<el-checkbox
v-model="webForm.no_trouble"
class="noDisturb rowFlex "
:true-label="1"
:false-label="0"
>免打扰(勾选后该用户不会再被分配任务)</el-checkbox>
<el-checkbox v-model="webForm.no_trouble" class="noDisturb rowFlex " :true-label="1"
:false-label="0">免打扰(勾选后该用户不会再被分配任务)</el-checkbox>
</div>
</el-form-item>
</el-form>
</div>
<div
v-for="(remark, indexs) in item.remarks"
:key="indexs"
class="item rowFlex columnCenter spaceBetween"
>
<div
class="rowFlex spaceBetween remarkItem"
style="width: 100%;"
>
<span
style="margin-left: 40px;color: #999999;"
>备注:</span>
<div v-for="(remark, indexs) in item.remarks" :key="indexs"
class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex spaceBetween remarkItem" style="width: 100%;">
<span style="margin-left: 40px;color: #999999;">备注:</span>
<div class="remarkTxext rowFlex remark flex1">
<textEditor
:remark.sync="remark.remark"
:domid="'taskRemark' + indexs"
style="width: 100%;"
:contenteditable="!Boolean(remark.id)"
@resultReamrk="resultReamrk"
/>
<textEditor :remark.sync="remark.remark" :domid="'taskRemark' + indexs" style="width: 100%;"
:contenteditable="!Boolean(remark.id)" @resultReamrk="resultReamrk" />
</div>
<i
v-if="indexs == 0"
class="el-icon-circle-plus-outline remarkHandle"
type="primary"
@click="addRemark(index)"
></i>
<i
v-else-if="indexs != 0 && !remark.id"
class="el-icon-remove-outline remarkHandle"
type="primary"
@click="removeRemark(index, indexs)"
></i>
<i v-if="indexs == 0" class="el-icon-circle-plus-outline remarkHandle" type="primary"
@click="addRemark(index)"></i>
<i v-else-if="indexs != 0 && !remark.id" class="el-icon-remove-outline remarkHandle"
type="primary" @click="removeRemark(index, indexs)"></i>
</div>
</div>
<div
class="btns rowFlex allCenter"
style="margin-top: 20px"
>
<el-button
:disabled="item.status==3"
:loading="remarkLoading"
@click="saveRemak(item, index)"
>保存</el-button>
<el-button
type="primary"
:disabled="item.status==3"
:loading="taskLoading"
@click="completeTask(item, index)"
>保存并完成任务</el-button>
<div class="btns rowFlex allCenter" style="margin-top: 20px">
<el-button :disabled="item.status == 3" :loading="remarkLoading"
@click="saveRemak(item, index)">保存</el-button>
<el-button type="primary" :disabled="item.status == 3" :loading="taskLoading"
@click="completeTask(item, index)">保存并完成任务</el-button>
</div>
</el-collapse-item>
</el-collapse>
</div>
</div>
</div>
<div
v-else-if="!loading && orderList.length == 0"
style="margin-top: 100px;"
class="noContent rowFlex allCenter"
>
<div v-else-if="!loading && orderList.length == 0" style="margin-top: 100px;"
class="noContent rowFlex allCenter">
<noContent />
</div>
</div>
</div>
</div>
</template>
<script>
</template>
<script>
import { taskTrack, taskRecord, logsSave, searchcondition } from '@/api/game'
import { mapState } from 'vuex'
import textEditor from '@/components/textEditor.vue'
......@@ -444,16 +362,18 @@
}
}
</script>
<style lang="scss" scoped>
.task-info-container {
<style lang="scss" scoped>
.task-info-container {
width: 100%;
height: 100%;
background: #fff;
position: relative;
overflow: hidden;
::v-deep .el-form-item__content{
::v-deep .el-form-item__content {
line-height: 32px;
}
.detailsTitle {
width: 100%;
padding: 0 10px;
......@@ -464,10 +384,12 @@
color: #333333;
border-bottom: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
p {
color: #333333;
}
}
.account-task-container-content {
width: 100%;
height: 100%;
......@@ -475,8 +397,10 @@
overflow-x: hidden;
padding: 20px 0;
padding-top: 0px;
.contentItem {
position: relative;
.title {
position: absolute;
left: 10px;
......@@ -485,6 +409,7 @@
color: #999999;
}
}
.taskItem {
width: 100%;
height: auto;
......@@ -493,36 +418,43 @@
color: #333333;
transition: all 0.5s;
position: relative;
div {
width: 100%;
margin-bottom: 5px;
}
.remark {
::v-deep .el-textarea__inner {
height: 80px;
}
}
.tableImage {
width: 40px;
height: 40px;
border-radius: 6px;
margin-right: 10px;
}
.label {
color: #999999;
}
.text {
color: #333333;
margin-left: 10px;
word-break: break-all;
max-width: 75%;
}
.icon {
display: none;
position: absolute;
right: 0;
top: 12px;
}
.dianFail {
display: inline-block;
width: 8px;
......@@ -530,6 +462,7 @@
background: #f45454;
border-radius: 5px;
}
.dian {
display: inline-block;
width: 8px;
......@@ -537,6 +470,7 @@
background: #00bf8a;
border-radius: 5px;
}
.dian2 {
display: inline-block;
width: 8px;
......@@ -551,51 +485,62 @@
height: 80px;
// margin-left: -20px;
padding: 10px 0;
.orderMoneyItem {
width: 50%;
text-align: center;
margin-top: 5px;
span {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
p {
font-size: 22px;
color: #00bf8a;
}
}
}
.filterList {
margin-bottom: 10px;
.filterListInput {
width: 60%;
margin-left: 15px;
margin-bottom: 10px;
}
.filterListDate {
width: 150px;
margin-bottom: 10px;
}
::v-deep .search-item .item-label {
margin-right: 20px;
}
}
.orderDetailsScroll {
width: 100%;
}
.orderDetails {
width: 100%;
height: auto;
margin-top: 20px;
position: relative;
.bridgeMain {
position: absolute;
top: 0px;
right: 0px;
width: 50px;
height: 50px;
.text {
font-size: 8px;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -609,6 +554,7 @@
width: 50px;
text-align: center;
}
.bridge {
font-size: 50px;
position: absolute;
......@@ -620,12 +566,15 @@
.orderDetailsTitle {
width: 100%;
background: #f9faff;
.money {
width: 100%;
height: auto;
.btns {
margin-right: 20px;
}
.btn {
background: #fff;
border-radius: 4px;
......@@ -635,6 +584,7 @@
color: #333333;
cursor: pointer;
}
.btnnot {
background: #ffdddd;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -642,6 +592,7 @@
color: #f56c6c;
border: none;
}
.btnsuccess {
background: #e1fff0;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -649,6 +600,7 @@
color: #00bf8a;
border: none;
}
.sended {
padding: 0 8px;
height: 20px;
......@@ -660,6 +612,7 @@
font-weight: 400;
color: #00bf8a;
}
.noSend {
padding: 0 8px;
height: 20px;
......@@ -672,6 +625,7 @@
color: #ffa81d;
}
}
.text {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -679,16 +633,20 @@
color: #333333;
max-width: 200px;
overflow: hidden;
white-space: nowrap; /* 防止文字换行 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
white-space: nowrap;
/* 防止文字换行 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
}
}
.orderDetailsList {
width: 100%;
height: auto;
background: #ffffff;
border: 1px solid #ebeef5;
position: relative;
.titleFix {
position: absolute;
left: 10px;
......@@ -698,31 +656,37 @@
}
}
}
.remarkHandle {
font-size: 20px;
color: #0ac358;
cursor: pointer;
margin-right: 5px;
position:absolute;
position: absolute;
right: 0;
top: 0;
}
::v-deep .el-tabs__item {
line-height: 26px;
font-size: 16px;
font-weight: 500;
}
.remarkTxext{
.remarkTxext {
width: calc(100% - 120px);
margin-left: 10px;
}
.remarkItem{
.remarkItem {
margin-left: 40px;
position: relative;
}
::v-deep .el-collapse {
border: none;
}
::v-deep .el-collapse-item__header {
width: 100%;
color: #333333;
......@@ -734,33 +698,39 @@
text-overflow: ellipsis;
white-space: nowrap;
}
::v-deep .el-collapse-item__arrow {
position: absolute;
right: 5px;
}
::v-deep .el-collapse-item__content{
::v-deep .el-collapse-item__content {
padding: 10px;
}
.editLayer {
padding: 10px 0;
.noDisturb {
display: flex;
align-items: center;
margin-top: 4px;
}
::v-deep .el-form-item__label {
font-weight: normal;
color: #999999;
padding-right: 8px;
}
::v-deep .el-form-item {
margin-bottom: 14px;
}
::v-deep .el-select, ::v-deep .el-checkbox {
::v-deep .el-select,
::v-deep .el-checkbox {
width: 100%;
}
}
}
</style>
\ No newline at end of file
}
</style>
\ No newline at end of file
......@@ -5,7 +5,8 @@
<p class="loginContentTitle">选择客服:</p>
<div class="loginContentInput rowFlex alignCenter">
<el-select v-model="cser_user_id" filterable placeholder="请选择客服">
<el-option v-for="item in userList" :key="item.zq_user_id" clearable :label="item.name" :value="item.zq_user_id">
<el-option v-for="item in userList" :key="item.zq_user_id" clearable :label="item.name"
:value="item.zq_user_id">
</el-option>
</el-select>
<el-button type="primary" style="margin-left: 10px;" size="small" @click="loginConfirm">点击登录</el-button>
......@@ -112,6 +113,10 @@ export default {
},
loginConfirm(){
const cser_user = this.userList.find(item => item.zq_user_id === this.cser_user_id)
if (!cser_user) {
this.$message.error('请选择客服')
return
}
this.$confirm(`确认登录上线吗,上线后所有会话都会归属到客服【${cser_user.name}】`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
......@@ -294,12 +299,14 @@ export default {
align-items: center;
justify-content: center;
}
.loginContentTitle{
.loginContentTitle {
font-size: 14px;
line-height: 32px;
margin-right: 10px;
text-align: left;
}
.qr-contain {
margin: 0 auto;
/* margin-top: 20px; */
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论