Skip to content

C
company_app
提交 166643d7 作者: 施汉文
操作

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

上级 963caaf8
正在显示 包含 1237 行增加 和 1447 行删除
src/styles/index.scss
...@@ -852,3 +852,8 @@ li { ...@@ -852,3 +852,8 @@ li {
.el-input__icon{ .el-input__icon{
line-height: 1; line-height: 1;
} }
//弹框内容超出显示滚动
.el-message-box__message {
max-height: 500px !important;
overflow-y: auto !important;
}
\ No newline at end of file
src/views/components/bindGameAccount/addUser.vue
<template> <template>
<el-drawer <el-drawer title="新增关联账号" :visible="show" size="360px" :append-to-body="true" @close="close">
title="新增关联账号" <div class="content">
:visible="show" <el-form ref="form" :model="form" label-position="top" :rules="rules" label-width="120px">
size="360px" <div class="inputContent">
:append-to-body="true" <el-form-item label="请输入w账号" prop="username">
@close="close" <el-input v-model.trim="form.username" placeholder="请输入w账号" class="input-with-select">
> </el-input>
<div class="content"> </el-form-item>
<el-form <el-form-item label="请输入主游戏名" prop="main_game_id">
ref="form" <el-select v-model="form.main_game_id" filterable remote clearable reserve-keyword placeholder="请输入主游戏名"
:model="form" style="width: 100%;" :remote-method="remoteMethod" :loading="loading" @focus="gameNameList = optionsList">
label-position="top" <el-option v-for="item in gameNameList" :key="item.value" :label="item.label" :value="item.value">
:rules="rules" </el-option>
label-width="120px" </el-select>
> </el-form-item>
<div class="inputContent"> <el-form-item label="请输入区服" prop="server_info">
<el-form-item <el-select v-model.trim="form.server_info" filterable remote :disabled="form.main_game_id == ''" clearable
label="请输入w账号" style="width: 100%;" reserve-keyword placeholder="请先选择主游戏" :remote-method="remoteMethodServer"
prop="username" :loading="loading">
> <el-option v-for="item in serverNameList" :key="item.id" :label="item.label" :value="item.value">
<el-input </el-option>
v-model.trim="form.username" </el-select>
placeholder="请输入w账号" </el-form-item>
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-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item>
label="请输入主游戏名" <el-button type="primary" size="small" @click="onSubmit">搜索</el-button>
prop="main_game_id" </el-form-item>
> </div>
<el-select </el-form>
v-model="form.main_game_id" <div class="table account_table">
filterable <div class="bind-account-title">
remote 账号列表
clearable </div>
reserve-keyword <userTable :list="tableList" @checkedTag="checkedTag" />
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-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-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
size="small"
@click="onSubmit"
>搜索</el-button>
</el-form-item>
</div>
</el-form>
<div class="table account_table">
<div class="bind-account-title">
账号列表
</div>
<userTable
:list="tableList"
@checkedTag="checkedTag"
/>
</div>
<!-- <div class="line"></div> w92865226508-->
<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>
</div>
<div class="item rowFlex columnCenter"><span class="label">获客渠道</span>
<p class="text">{{ userDetails.channel_name }}</p>
</div>
<div class="item rowFlex columnCenter"><span class="label">注册渠道</span>
<p class="text">{{ userDetails.register_channel_name }}</p>
</div>
<div class="item rowFlex columnCenter"><span class="label">运营渠道</span>
<p class="text">{{ userDetails.operator_channel_name }}</p>
</div>
<div class="item rowFlex columnCenter"><span class="label">注册游戏</span>
<p class="text">{{ userDetails.reg_game_name }}</p>
</div>
<div class="item rowFlex columnCenter"><span class="label">主游戏</span>
<p class="text">{{ userDetails.main_game_name }}</p>
</div>
<div class="item rowFlex columnCenter"><span class="label">真实姓名</span>
<p class="text">{{ userDetails.real_name }}</p>
</div>
<div class="item rowFlex columnCenter"><span class="label">手机号</span>
<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>
</div>
<div class="item rowFlex columnCenter"><span class="label">注册时间</span>
<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>
</div>
<div class="item rowFlex columnCenter"><span class="label">充值金额</span>
<p class="text">{{ userDetails.recharge_total }}</p>
</div>
<div class="item rowFlex columnCenter"><span class="label">是否添加微信</span>
<p class="text">{{ userDetails.wechat_add_status_text }}</p>
</div>
</div>
</div> </div>
<page <!-- <div class="line"></div> w92865226508-->
class="pageInfo" <div v-if="userDetails.username" class="account_select_userInfo">
:page-info="pageInfo" <div class="bind-account-title" style="margin-top: 20px;">
@requestNextPage="requestNextPage" 账号详情
/> </div>
<span class="dialog-footer rowFlex"> <div class="item rowFlex columnCenter"><span class="label">账号</span>
<el-button <p class="text">{{ userDetails.username }}</p> <span v-if="userDetails.account_type == 2"
class="btn" class="account_type">内</span>
type="primary" </div>
size="small" <div class="item rowFlex columnCenter"><span class="label">获客渠道</span>
:disabled="!userDetails.id" <p class="text">{{ userDetails.channel_name }}</p>
@click="confirmSubmit" </div>
>确 定</el-button> <div class="item rowFlex columnCenter"><span class="label">注册渠道</span>
<el-button <p class="text">{{ userDetails.register_channel_name }}</p>
class="btn" </div>
size="small" <div class="item rowFlex columnCenter"><span class="label">运营渠道</span>
@click="close" <p class="text">{{ userDetails.operator_channel_name }}</p>
>取 消</el-button> </div>
</span> <div class="item rowFlex columnCenter"><span class="label">注册游戏</span>
</el-drawer> <p class="text">{{ userDetails.reg_game_name }}</p>
</template> </div>
<div class="item rowFlex columnCenter"><span class="label">主游戏</span>
<script type="text/javascript"> <p class="text">{{ userDetails.main_game_name }}</p>
</div>
<div class="item rowFlex columnCenter"><span class="label">真实姓名</span>
<p class="text">{{ userDetails.real_name }}</p>
</div>
<div class="item rowFlex columnCenter"><span class="label">手机号</span>
<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>
</div>
<div class="item rowFlex columnCenter"><span class="label">注册时间</span>
<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>
</div>
<div class="item rowFlex columnCenter"><span class="label">充值金额</span>
<p class="text">{{ userDetails.recharge_total }}</p>
</div>
<div class="item rowFlex columnCenter"><span class="label">是否添加微信</span>
<p class="text">{{ userDetails.wechat_add_status_text }}</p>
</div>
</div>
</div>
<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>
</span>
</el-drawer>
</template>
<script type="text/javascript">
import moment from 'moment' import moment from 'moment'
import userTable from './userTable.vue' import userTable from './userTable.vue'
import { getRoleHoLo, memberView, selectSearch } from '@/api/game' import { getRoleHoLo, memberView, selectSearch } from '@/api/game'
...@@ -418,119 +332,131 @@ ...@@ -418,119 +332,131 @@
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-drawer { ::v-deep .el-drawer {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
} }
.bind-account-title{
font-size: 16px; .bind-account-title {
font-family: PingFangSC-Regular, PingFang SC; font-size: 16px;
font-weight: 600; font-family: PingFangSC-Regular, PingFang SC;
color: #333333; font-weight: 600;
text-align: left; color: #333333;
margin-bottom: 10px; text-align: left;
margin-bottom: 10px;
}
.content {
width: 100%;
height: 100%;
overflow: auto;
padding-bottom: 200px;
padding: 0 10px;
.inputContent {
width: 100%;
} }
.content {
.info {
width: 100%; width: 100%;
height: 100%; margin-top: 30px;
overflow: auto; overflow: auto;
padding-bottom: 200px;
padding: 0 10px; .table {
.inputContent {
width: 100%;
}
.info {
width: 100%; width: 100%;
margin-top: 30px; min-width: 500px;
overflow: auto;
.table {
width: 100%;
min-width: 500px;
}
}
.line {
position: absolute;
left: 55%;
top: 12%;
transform: translate(-55%, 0);
width: 1px;
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;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
text-align: left;
margin-right: 20px;
}
.text {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
word-wrap: break-word;
}
}
} }
}
.account_table{
width: 100%;
height: auto;
overflow: auto;
}
.account_type {
color: #f56c6c;
font-weight: bold;
margin-left: 5px;
background: #f7eded;
padding: 2px 5px;
border-radius: 3px;
} }
.pageInfo {
width: calc(100% - 20px); .line {
height: 82px;
position: absolute; position: absolute;
right: 20px; left: 55%;
bottom: 60px; top: 12%;
background: #fff; transform: translate(-55%, 0);
width: 1px;
height: 70%;
border-right: 1px dashed #e0e0e0;
} }
.dialog-footer {
width: calc(100% - 20px); .account_select_userInfo {
position: absolute; width: 100%;
right: 20px; height: auto;
bottom: 0; padding-left: 20px;
padding-top: 20px; margin-top: -20px;
padding-bottom: 20px; margin-bottom: 150px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
justify-content: flex-end; .item {
background: #fff; width: 100%;
z-index: 10; margin-top: 20px;
.btn {
width: 84px; .label {
height: 32px; width: 30%;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
text-align: left;
margin-right: 20px;
}
.text {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
word-wrap: break-word;
}
} }
} }
</style>
<style> }
::v-deep .el-select-dropdown {
min-width: 210px !important; .account_table {
width: 100%;
height: auto;
overflow: auto;
}
.account_type {
color: #f56c6c;
font-weight: bold;
margin-left: 5px;
background: #f7eded;
padding: 2px 5px;
border-radius: 3px;
}
.pageInfo {
width: calc(100% - 20px);
height: 82px;
position: absolute;
right: 20px;
bottom: 60px;
background: #fff;
}
.dialog-footer {
width: calc(100% - 20px);
position: absolute;
right: 20px;
bottom: 0;
padding-top: 20px;
padding-bottom: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
justify-content: flex-end;
background: #fff;
z-index: 10;
.btn {
width: 84px;
height: 32px;
} }
</style> }
</style>
<style>
\ No newline at end of file ::v-deep .el-select-dropdown {
min-width: 210px !important;
}
</style>
\ No newline at end of file
src/views/components/order/searchUser.vue
<template> <template>
<el-select <el-select v-model="resulte" v-loadmore="loadMoreList" filterable remote :disabled="disabled"
v-model="resulte" :remote-method="remoteMethod" :placeholder="placeholder" :clearable='false' reserve-keyword :loading="loading"
v-loadmore="loadMoreList" @change="selectChange">
filterable <el-option v-for="(item, index) in searchUserOption" :key="index" :value="item?.role_id || item.id"
remote :label="item.role_name" style="height:50px;">
:disabled="disabled" <div class="rowFlex columnCenter selectItem">
:remote-method="remoteMethod" <!-- 没有头像 -->
:placeholder="placeholder" <!-- <el-image v-if="item.avata" fit="fill" :src="item.avatar" class="tableImage "></el-image> -->
:clearable='false' <div class="infoSpan columnFlex rowCenter">
reserve-keyword <p class="hidden">
:loading="loading" {{ item.role_name && item.role_name != '' ? item.game_name + ' - ' + item.server_name + ' -
@change="selectChange" '+item.role_name:'' }}
> </p>
<el-option <p class="rowFlex columnCenter">角色名：<label class="hidden" style="max-width:120px;">
v-for="(item,index) in searchUserOption" {{ item.role_name }}
:key="index" </label>
:value="item.role_id || item.id" </p>
: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>
</div>
</div> </div>
</el-option> </div>
</el-select> </el-option>
</template> </el-select>
<script> </template>
<script>
import { roleList } from '@/api/game' import { roleList } from '@/api/game'
import { mapState } from 'vuex' import { mapState } from 'vuex'
export default { export default {
...@@ -127,29 +118,34 @@ ...@@ -127,29 +118,34 @@
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.selectItem{ .selectItem {
height: 50px; height: 50px;
} }
.infoSpan{
font-size: 12px; .infoSpan {
font-family: PingFangSC-Regular, PingFang SC; font-size: 12px;
font-weight: 400; font-family: PingFangSC-Regular, PingFang SC;
max-width: 250px; font-weight: 400;
height: 50px; max-width: 250px;
p{ height: 50px;
font-size:12px;max-width:100%;
line-height: 20px; p {
} font-size: 12px;
span{ max-width: 100%;
color:#FFA81D; line-height: 20px;
} }
}
.tableImage{ span {
width:30px;height:30px; color: #FFA81D;
border-radius: 30px; }
margin-right: 10px; }
}
</style> .tableImage {
width: 30px;
\ No newline at end of file height: 30px;
border-radius: 30px;
margin-right: 10px;
}
</style>
\ No newline at end of file
src/views/components/roleInfo/report.vue
<template> <template>
<div class="reportList"> <div class="reportList">
<el-form <el-form ref="taskForm" :model="reportForm" class="taskForm" label-position="top" label-width="85px">
ref="taskForm" <el-form-item label="角色名称">
:model="reportForm" <el-input v-model="reportForm.role_name" clearable placeholder="请输入角色名称" @change="filterChange">
class="taskForm" </el-input>
label-position="top" </el-form-item>
label-width="85px" <el-form-item label="审批状态">
> <el-select v-model="reportForm.approval_status" style="width:100%;" clearable placeholder="请选择审批状态"
<el-form-item label="角色名称"> @change="filterChange">
<el-input <el-option v-for="item in approvalList" :key="item.value" :label="item.label" :value="item.value">
v-model="reportForm.role_name" </el-option>
clearable </el-select>
placeholder="请输入角色名称" </el-form-item>
@change="filterChange" <el-form-item label="申请方式">
> <el-select v-model="reportForm.register_type" style="width:100%;" clearable placeholder="请选择申请方式"
</el-input> @change="filterChange">
</el-form-item> <el-option v-for="item in register_type_list" :key="item.value" :label="item.label" :value="item.value">
<el-form-item label="审批状态"> </el-option>
<el-select </el-select>
v-model="reportForm.approval_status" </el-form-item>
style="width:100%;" </el-form>
clearable <div v-infinite-scroll="paperScroll" :infinite-scroll-disabled="!isMoreRecord" :infinite-scroll-immediate="false"
placeholder="请选择审批状态" class="mailListScroll">
@change="filterChange" <!-- 举报申请 -->
> <div class="scrollMain" v-if="reportList.length > 0">
<el-option <div v-for="(item, index) in reportList" :key="index" class="reportContent" @click="reportProcess(item, index)">
v-for="item in approvalList" <div class="reportItem rowFlex spaceBetween columnCenter">
:key="item.value" <div class="reportItemLeft">
:label="item.label" <p><span class="label">角色名称:</span><span class="value">{{ item.role_name }}</span></p>
:value="item.value" <p>
> <span class="label">累计充值:</span><span class="value">{{ formatNumber(item.recharge_total_amount) }}
</el-option> 元</span>
</el-select> </p>
</el-form-item> <p>
<el-form-item label="申请方式"> <span class="label">近一周充值:</span><span class="value">{{ formatNumber(item.recharge_week_amount)
<el-select }}元</span>
v-model="reportForm.register_type" </p>
style="width:100%;" <p><span class="label">违规操作:</span><span class="value">{{ item.violation_type_text }}</span></p>
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 class="scrollMain" v-if="reportList.length > 0">
<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>
<p>
<span class="label">累计充值:</span><span class="value">{{ formatNumber(item.recharge_total_amount) }}
元</span>
</p>
<p>
<span class="label">近一周充值:</span><span class="value">{{ formatNumber(item.recharge_week_amount)
}}元</span>
</p>
<p><span class="label">违规操作:</span><span class="value">{{ item.violation_type_text }}</span></p>
</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 && reportForm.register_type == 2 && (item.customer_id == userInfo.id)"
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"
/>
</div>
</div> </div>
<!-- 审批进度 --> <div class="reportItemRight columnFlex columnCenter">
<el-collapse-transition> <!-- 撤销 当item.create_user_id == zq_user_id 的时候才可以撤销 只能撤销自己提交的审批 -->
<div <el-button v-if="item.approval_status == 1 && (item.create_user_id == cser_id)" type="primary" size="mini"
v-if="item.showStep" @click.stop="handleReport(item)">撤销</el-button>
class="reportProcessList" <!-- 审批 只有待审批状态可以并且申请方式是玩家登记的时候才有这个 -->
> <el-button
<el-steps v-if="item.approval_status == 1 && reportForm.register_type == 2 && (item.customer_id == userInfo.id)"
direction="vertical" type="primary" size="mini" @click.stop="resubmitReportApproval(item)">审批</el-button>
:active="item.current" <!-- 重新提交 -->
finish-status="success" <el-button v-else-if="item.approval_status == 4" type="primary" size="mini"
> @click.stop="resubmitReport(item)">重新提交</el-button>
<el-step <img v-if="item.approval_status == 1" :src="shenpi1" class="icon" />
v-for="(items, indexs) in item.reportProcessList" <img v-else-if="item.approval_status == 2" :src="shenpi2" class="icon" />
:key="'trans_item_' + indexs" <img v-else-if="item.approval_status == 3" :src="shenpi3" class="icon" />
:title="items.node_name" <img v-else-if="item.approval_status == 4" :src="shenpi4" class="icon" />
> <img v-else-if="item.approval_status == 5" :src="shenpi5" class="icon" />
<template slot="description"> </div>
<div </div>
v-if="items" <!-- 审批进度 -->
class="trans-follow-1 card-style" <el-collapse-transition>
> <div v-if="item.showStep" class="reportProcessList">
<div class="follow-item"> <el-steps direction="vertical" :active="item.current" finish-status="success">
<span class="follow-info-label label-font"> <el-step v-for="(items, indexs) in item.reportProcessList" :key="'trans_item_' + indexs"
{{ items.node_sort !== '0' ? '审批人:' : '登记人:' }} :title="items.node_name">
</span> <template slot="description">
<span class="info-value value-font"> <div v-if="items" class="trans-follow-1 card-style">
{{ Array.isArray(items.user_name) ? items.user_name[0] : items.user_name }} <div class="follow-item">
</span> <span class="follow-info-label label-font">
<el-tooltip {{ items.node_sort !== '0' ? '审批人:' : '登记人:' }}
v-if="Array.isArray(items.user_name) && items.user_name.length > 1" </span>
class="item" <span class="info-value value-font">
effect="dark" {{ Array.isArray(items.user_name) ? items.user_name[0] : items.user_name }}
:content="items.user_name.slice(1).join('、')" </span>
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"> <span class="info-value value-font info-value-color">
{{ `+${items.user_name.length - 1}` }} {{ `+${items.user_name.length - 1}` }}
</span>
</el-tooltip>
</div>
<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>
</div>
<div class="follow-item">
<span class="follow-info-label label-font">
{{ items.node_sort !== '0' || items.node_name === '系统' ? '审批时间:' : '登记时间:' }}
</span>
<span class="info-value value-font">
{{ 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"
>
<span class="follow-info-label label-font">
驳回原因:
</span>
<span class="info-value value-font">
{{ items.extra_attribution.remark }}
</span>
</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"
>
<span class="follow-info-label label-font">
处理结果:
</span> </span>
<span class="info-value value-font"> </el-tooltip>
{{ items.extra_attribution.banned_text }} </div>
<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>
</div>
<div class="follow-item">
<span class="follow-info-label label-font">
{{ items.node_sort !== '0' || items.node_name === '系统' ? '审批时间:' : '登记时间:' }}
</span>
<span class="info-value value-font">
{{ 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">
<span class="follow-info-label label-font">
驳回原因:
</span>
<span class="info-value value-font">
{{ items.extra_attribution.remark }}
</span>
</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">
<span class="follow-info-label label-font">
处理结果:
</span>
<span class="info-value value-font">
{{ items.extra_attribution.banned_text }}
</span>
</div>
<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)">
<i class="el-icon-view"></i>
点击查看大图
</span> </span>
</div> </div>
<div <div class="remark-value"
v-if="items.node_sort === '0' && items.node_name !== '系统'" v-html="formatImg(items.extra_attribution && items.extra_attribution.remark ? items.extra_attribution.remark : '')">
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)"
>
<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> </div>
</div> </div>
</template> </div>
</el-step> </template>
</el-steps> </el-step>
</div> </el-steps>
</el-collapse-transition> </div>
</div> </el-collapse-transition>
</div>
<div v-else class="noContent">
<noContent />
</div> </div>
</div> </div>
<el-dialog <div v-else class="noContent">
:visible.sync="dialogRemarkVisible" <noContent />
append-to-body </div>
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"
/>
<!-- 审批 -->
<approvalTask
v-if="isApproval"
:show.sync="isApproval"
:report-info="reportInfo"
@updateReportList="filterChange"
/>
</div> </div>
</template> <el-dialog :visible.sync="dialogRemarkVisible" append-to-body title="查看大图" custom-class="remake-dialog">
<script> <div class="remake-box">
<div v-html="dialogRemake"></div>
</div>
</el-dialog>
<!-- 重新提交 -->
<resubmitReport v-if="showResubmitReport" :report-info="reportInfo" :show.sync="showResubmitReport"
@updateReportList="filterChange" />
<!-- 审批 -->
<approvalTask v-if="isApproval" :show.sync="isApproval" :report-info="reportInfo"
@updateReportList="filterChange" />
</div>
</template>
<script>
import { searchcondition, reportIndex, reportCancel, reportProcess } from '@/api/game' import { searchcondition, reportIndex, reportCancel, reportProcess } from '@/api/game'
import { mapState, mapMutations } from 'vuex' import { mapState, mapMutations } from 'vuex'
import { removeDp, formatNumber,debounce } from '@/utils/index' import { removeDp, formatNumber,debounce } from '@/utils/index'
...@@ -493,7 +375,7 @@ ...@@ -493,7 +375,7 @@
} else { } else {
this.reportList = removeDp(this.reportList, res.data.data, 'id') this.reportList = removeDp(this.reportList, res.data.data, 'id')
} }
if (this.reportList.length > 0) { if (this.reportList?.length > 0) {
this.reportList.map((item) => { this.reportList.map((item) => {
item.showStep = false item.showStep = false
item.current = 0 item.current = 0
...@@ -502,12 +384,12 @@ ...@@ -502,12 +384,12 @@
} else { } else {
this.reportList = [] this.reportList = []
} }
if (res.data.data.length < 20) { if (res.data.data?.length < 20) {
this.isMoreRecord = false this.isMoreRecord = false
} else { } else {
this.isMoreRecord = true this.isMoreRecord = true
} }
if (res.data.data.length < 20) { if (res.data.data?.length < 20) {
this.isMoreRecord = false this.isMoreRecord = false
} else { } else {
this.isMoreRecord = true this.isMoreRecord = true
...@@ -516,423 +398,426 @@ ...@@ -516,423 +398,426 @@
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.reportList { .reportList {
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
.taskForm {
::v-deep .el-form-item {
margin-bottom: 10px;
}
}
// 会话筛选
.filterChat {
width: 100%; width: 100%;
height: 100%; margin-top: 20px;
overflow-y: auto;
overflow-x: hidden; ::v-deep .el-button {
.taskForm { margin-left: 6px;
::v-deep .el-form-item { margin-right: 0 !important;
margin-bottom: 10px;
}
} }
// 会话筛选 .btnListScroll {
.filterChat { margin-bottom: 10px;
}
.chatIcon {
font-size: 20px;
margin-left: 5px;
margin-top: 10px;
cursor: pointer;
}
.itemActive {
background: #e1fff0;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #3491FA;
border: none;
}
.btnList {
width: 100%; width: 100%;
margin-top: 20px; margin-bottom: 10px;
overflow: auto;
::v-deep .el-button {
margin-left: 6px; .btnItem {
margin-right: 0 !important; border: none;
} background: #eef0f4;
.btnListScroll {
margin-bottom: 10px;
}
.chatIcon {
font-size: 20px;
margin-left: 5px;
margin-top: 10px;
cursor: pointer;
}
.itemActive {
background: #e1fff0;
font-size: 12px; font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #3491FA ; color: #6e7073;
border: none;
}
.btnList {
width: 100%;
margin-bottom: 10px;
overflow: auto;
.btnItem {
border: none;
background: #eef0f4;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #6e7073;
}
} }
} }
}
.mailListScroll {
.mailListScroll {
width: 100%;
height: auto;
.scrollMain {
width: 100%; width: 100%;
height: auto; height: auto;
.scrollMain { margin-bottom: 40px;
width: 100%;
height: auto; .reportContent {
margin-bottom: 40px; width: calc(100% - 10px);
.reportContent { }
width: calc(100% - 10px);
} //举报申请
.reportItem {
//举报申请 padding: 10px;
.reportItem { background: #f7f8fa;
padding: 10px; margin-bottom: 10px;
background: #f7f8fa; position: relative;
margin-bottom: 10px; cursor: pointer;
position: relative; color: #333333;
cursor: pointer; font-size: 14px;
color: #333333; font-weight: 500;
font-size: 14px;
font-weight: 500; p {
line-height: 25px;
p {
line-height: 25px;
}
.reportItemLeft {
width: 100%;
.label {
font-weight: 400;
font-size: 14px;
color: #86909c;
line-height: 20px;
margin-right: 10px;
}
.value {
font-weight: 400;
font-size: 14px;
color: #333333;
line-height: 20px;
text-align: left;
}
}
.reportItemRight {
height: 100%;
.icon {
font-size: 50px;
}
}
} }
.chatListItem { .reportItemLeft {
width: 100%; width: 100%;
height: 68px;
padding: 3px 10px; .label {
position: relative; font-weight: 400;
cursor: pointer;
color: #333333;
font-size: 14px;
font-weight: 500;
.left {
color: #333333;
font-size: 14px; font-size: 14px;
font-weight: 500; color: #86909c;
line-height: 20px;
margin-right: 10px;
} }
.info, .value {
.top {
font-size: 14px;
font-weight: 400; font-weight: 400;
}
.bottom {
font-size: 14px; font-size: 14px;
color: #999999; color: #333333;
line-height: 20px;
text-align: left;
} }
}
.right {
font-size: 12px; .reportItemRight {
font-weight: 400; height: 100%;
.icon {
font-size: 50px;
} }
} }
} }
.chatListItemActive { .chatListItem {
background: #e4fff1 !important; width: 100%;
} height: 68px;
padding: 3px 10px;
.chatListItem:hover { position: relative;
background: #e4fff1 !important; cursor: pointer;
color: #333333;
font-size: 14px;
font-weight: 500;
.left {
color: #333333;
font-size: 14px;
font-weight: 500;
}
.info,
.top {
font-size: 14px;
font-weight: 400;
}
.bottom {
font-size: 14px;
color: #999999;
}
.right {
font-size: 12px;
font-weight: 400;
}
} }
} }
}
.chatListItemActive {
// 掌游的样式 background: #e4fff1 !important;
::v-deep.el-step .el-step__line {
width: 1px;
}
::v-deep .el-step > .is-success {
color: #3491FA ;
border-color: #3491FA ;
.el-step__line {
background-color: #e5e6eb;
} }
}
.chatListItem:hover {
::v-deep .el-step__main > .is-success { background: #e4fff1 !important;
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 .el-step__line {
width: 1px;
.form-item-btn { }
margin: 0 0 0 20px;
} ::v-deep .el-step>.is-success {
color: #3491FA;
.audit-label { border-color: #3491FA;
font-size: 14px;
font-weight: 800; .el-step__line {
margin: 0 0 10px 0; background-color: #e5e6eb;
} }
}
.remark-label {
color: #949fb0; ::v-deep .el-step__main>.is-success {
font-size: 14px; color: #3491FA;
}
::v-deep .el-step>.is-process {
color: #3491FA;
border-color: #3491FA;
.el-step__line {
background-color: #e5e6eb;
} }
}
.preview-btn {
cursor: pointer; ::v-deep .el-step__main>.is-process {
font-size: 14px; color: #3491FA;
color: #3491FA ; }
margin: 0 0 0 10px;
.form-item-btn {
i { margin: 0 0 0 20px;
margin: 0 5px 0 0; }
}
.audit-label {
font-size: 14px;
font-weight: 800;
margin: 0 0 10px 0;
}
.remark-label {
color: #949fb0;
font-size: 14px;
}
.preview-btn {
cursor: pointer;
font-size: 14px;
color: #3491FA;
margin: 0 0 0 10px;
i {
margin: 0 5px 0 0;
} }
}
.remark-value {
min-height: 100px; .remark-value {
margin: 10px 0 0 40px; min-height: 100px;
padding: 6px 12px; margin: 10px 0 0 40px;
border: 1px solid #d9d9d9; padding: 6px 12px;
border-radius: 4px; border: 1px solid #d9d9d9;
cursor: not-allowed; border-radius: 4px;
color: #333; cursor: not-allowed;
} color: #333;
}
.flex-box {
display: flex; .flex-box {
display: flex;
.remark-lebel {
width: 50px; .remark-lebel {
text-align: right;
}
}
.refund-flow-drawer {
position: fixed;
top: 0;
right: 700px;
}
.btm-btn-box {
position: fixed;
bottom: 20px;
width: 560px;
height: 32px;
}
.audit-state {
width: 50px; width: 50px;
height: 50px; text-align: right;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 100;
.audit-state-stamp {
font-size: 50px;
}
} }
}
.info-item {
width: 45%; .refund-flow-drawer {
display: flex; position: fixed;
height: 18px; top: 0;
margin: 0 0 12px 0; right: 700px;
}
.btm-btn-box {
position: fixed;
bottom: 20px;
width: 560px;
height: 32px;
}
.audit-state {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 100;
.audit-state-stamp {
font-size: 50px;
} }
}
.info-item-pic {
width: 100%; .info-item {
min-height: 96px; width: 45%;
max-height: 192px; display: flex;
height: 18px;
margin: 0 0 12px 0;
}
.info-item-pic {
width: 100%;
min-height: 96px;
max-height: 192px;
display: flex;
.img-list {
width: 464px;
display: flex; display: flex;
flex-wrap: wrap;
.img-list {
width: 464px; &-item {
display: flex; width: 80px;
flex-wrap: wrap; height: 80px;
border-radius: 4px;
&-item { overflow: hidden;
margin: 0 10px 10px 0;
position: relative;
.preview-pic {
width: 80px; width: 80px;
height: 80px; height: 80px;
border-radius: 4px; background: rgba(0, 0, 0, 0.5);
overflow: hidden; position: absolute;
margin: 0 10px 10px 0; top: 0;
position: relative; left: 0;
z-index: -1;
.preview-pic { text-align: center;
width: 80px; line-height: 80px;
height: 80px;
background: rgba(0, 0, 0, 0.5); .preview-icon {
position: absolute; font-size: 16px;
top: 0; color: #fff;
left: 0; cursor: pointer;
z-index: -1;
text-align: center;
line-height: 80px;
.preview-icon {
font-size: 16px;
color: #fff;
cursor: pointer;
}
}
.screenshot {
object-fit: center;
width: 80px;
height: 80px;
}
&:hover > .preview-pic {
z-index: 100;
} }
} }
.screenshot {
object-fit: center;
width: 80px;
height: 80px;
}
&:hover>.preview-pic {
z-index: 100;
}
} }
} }
}
.flex-btn {
display: flex; .flex-btn {
justify-content: space-between; display: flex;
} justify-content: space-between;
}
.info-label {
// width: 90px; .info-label {
// text-align: right; // width: 90px;
display: block; // text-align: right;
margin: 0 10px 0 0; display: block;
font-size: 14px; margin: 0 10px 0 0;
color: #949fb0; font-size: 14px;
} color: #949fb0;
}
.info-value {
display: block; .info-value {
font-size: 14px; display: block;
color: #333; font-size: 14px;
} color: #333;
}
.card-style {
background: #f2f2f7; .card-style {
border-radius: 4px; background: #f2f2f7;
} border-radius: 4px;
}
.trans-follow-1 {
width: 300px; .trans-follow-1 {
min-height: fit-content; width: 300px;
margin: 6px 0 12px 0; min-height: fit-content;
padding: 12px 12px 2px 12px; margin: 6px 0 12px 0;
position: relative; padding: 12px 12px 2px 12px;
position: relative;
.collapse-btn {
position: absolute; .collapse-btn {
top: 20px; position: absolute;
right: 15px; top: 20px;
} right: 15px;
.follow-item-remark {
width: 100%;
line-height: 20px;
margin: 0 0 12px 0;
}
.info-value-color {
color: #3491FA ;
margin-left: 5px;
}
} }
.follow-item { .follow-item-remark {
min-height: 20px; width: 100%;
line-height: 20px; line-height: 20px;
margin: 0 0 12px 0; margin: 0 0 12px 0;
display: flex;
.label-left {
width: 90px;
text-align: right;
}
} }
.left-label { .info-value-color {
width: 60px; color: #3491FA;
} margin-left: 5px;
.follow-info-label {
white-space: nowrap;
text-align: left;
margin: 0 10px 0 0;
} }
}
.info-value {
font-size: 14px; .follow-item {
color: #333; min-height: 20px;
} line-height: 20px;
margin: 0 0 12px 0;
.label-font { display: flex;
font-size: 14px;
color: #949fb0; .label-left {
width: 90px;
text-align: right;
} }
}
.info-item-remark {
width: 100%; .left-label {
padding: 0 0 12px 0; width: 60px;
line-height: 20px; }
.info-label { .follow-info-label {
display: block; white-space: nowrap;
} text-align: left;
margin: 0 10px 0 0;
.info-value { }
display: block;
width: 440px; .info-value {
} font-size: 14px;
color: #333;
}
.label-font {
font-size: 14px;
color: #949fb0;
}
.info-item-remark {
width: 100%;
padding: 0 0 12px 0;
line-height: 20px;
.info-label {
display: block;
} }
.reportProcessList { .info-value {
margin-bottom: 20px; display: block;
margin-top: 20px; width: 440px;
} }
</style> }
\ No newline at end of file
.reportProcessList {
margin-bottom: 20px;
margin-top: 20px;
}
</style>
\ No newline at end of file
src/views/components/taskList/uesrTask.vue
<template> <template>
<div class="task-info-container columnFlex"> <div class="task-info-container columnFlex">
<!-- <div class="detailsTitle rowFlex spaceBetween columnCenter"> <!-- <div class="detailsTitle rowFlex spaceBetween columnCenter">
<p>任务记录</p> <p>任务记录</p>
</div> --> </div> -->
<div class="account-task-container-content" v-scroll="requestOrderList"> <div class="account-task-container-content" v-scroll="requestOrderList">
<!-- 运营任务 和 用户任务 --> <!-- 运营任务 和 用户任务 -->
<div <div class="orderDetailsScroll" v-loading="loading">
class="orderDetailsScroll" <div v-if="orderList.length > 0">
v-loading="loading" <div v-for="(item, index) in orderList" :key="index" class="orderDetails">
> <div class="orderDetailsList">
<div v-if="orderList.length > 0"> <el-collapse v-model="collapseValue" @change="handleChange(item, $event)">
<div <el-collapse-item :name="item?.order_id || '--'">
v-for="(item, index) in orderList" <template slot="title">
:key="index" <div class="orderDetailsTitle">
class="orderDetails" <div class="money rowFlex spaceBetween">
> <p class="text">{{ item.role_name }} - {{ item.server_name }} - ￥{{ item.recharge_total }}</p>
<div class="orderDetailsList"> <div class="btns">
<el-collapse <span style="color: #0988f2">{{taskTypeList.find((items) => items.value == item.plan_type) &&
v-model="collapseValue" taskTypeList.find((items) => items.value == item.plan_type).label ? taskTypeList.find((items)
@change="handleChange(item,$event)" => items.value == item.plan_type).label:'' }}</span>
> <span v-if="item.status_name" class="btn"
<el-collapse-item :name="item.order_id || '--'"> :class="[item.status_name == '待跟进' ? 'noSend' : '', item.status_name == '已跟进' ? 'sended' : '', item.status_name == '已完成' ? 'sended' : '', item.status_name == '跟进中' ? 'noSend' : '']">{{
<template slot="title"> item.status_name }}</span>
<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>
</div>
</div> </div>
</div> </div>
</template>
<div class="editLayer">
<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="待维护日期:"
>
<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-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-select>
</el-form-item>
<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>
</div>
</el-form-item>
</el-form>
</div> </div>
</template>
<div <div class="editLayer">
v-for="(remark, indexs) in item.remarks" <el-form :model="webForm" label-width="100px">
:key="indexs" <el-form-item label="跟进客服:">
class="item rowFlex columnCenter spaceBetween" <p class="text" style="margin-left: 10px;">{{ item.tracer_name || '--' }}</p>
> </el-form-item>
<div <el-form-item label="待维护日期:">
class="rowFlex spaceBetween remarkItem" <p class="text" style="margin-left: 10px;">{{ item.assignment_time }}</p>
style="width: 100%;" </el-form-item>
> <!-- 新增异常原因筛选 当 plan_type==5 5:为大R异跟进异常时 新增异常原因筛选 -->
<span <el-form-item v-if="taskInfo.plan_type && taskInfo.plan_type == 5" label="异常原因"
style="margin-left: 40px;color: #999999;" prop="abnormal_types">
>备注:</span> <el-select v-model="webForm.abnormal_types" placeholder="请选择" multiple
<div class="remarkTxext rowFlex remark flex1"> style="margin-left: 10px;" collapse-tags>
<textEditor <el-option v-for="item in errorTypeList" :key="item.value" :label="item.label"
:remark.sync="remark.remark" :value="item.value">
:domid="'taskRemark' + indexs" </el-option>
style="width: 100%;" </el-select>
:contenteditable="!Boolean(remark.id)" </el-form-item>
@resultReamrk="resultReamrk" <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;">
<div class="noDisturb">
<el-checkbox v-model="webForm.no_trouble" class="noDisturb rowFlex " :true-label="1"
:false-label="0">免打扰(勾选后该用户不会再被分配任务)</el-checkbox>
</div> </div>
<i </el-form-item>
v-if="indexs == 0" </el-form>
class="el-icon-circle-plus-outline remarkHandle" </div>
type="primary"
@click="addRemark(index)" <div v-for="(remark, indexs) in item.remarks" :key="indexs"
></i> class="item rowFlex columnCenter spaceBetween">
<i <div class="rowFlex spaceBetween remarkItem" style="width: 100%;">
v-else-if="indexs != 0 && !remark.id" <span style="margin-left: 40px;color: #999999;">备注:</span>
class="el-icon-remove-outline remarkHandle" <div class="remarkTxext rowFlex remark flex1">
type="primary" <textEditor :remark.sync="remark.remark" :domid="'taskRemark' + indexs" style="width: 100%;"
@click="removeRemark(index, indexs)" :contenteditable="!Boolean(remark.id)" @resultReamrk="resultReamrk" />
></i>
</div> </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>
</div> </div>
<div </div>
class="btns rowFlex allCenter" <div class="btns rowFlex allCenter" style="margin-top: 20px">
style="margin-top: 20px" <el-button :disabled="item.status == 3" :loading="remarkLoading"
> @click="saveRemak(item, index)">保存</el-button>
<el-button <el-button type="primary" :disabled="item.status == 3" :loading="taskLoading"
:disabled="item.status==3" @click="completeTask(item, index)">保存并完成任务</el-button>
:loading="remarkLoading" </div>
@click="saveRemak(item, index)" </el-collapse-item>
>保存</el-button> </el-collapse>
<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> </div>
<div </div>
v-else-if="!loading && orderList.length == 0" <div v-else-if="!loading && orderList.length == 0" style="margin-top: 100px;"
style="margin-top: 100px;" class="noContent rowFlex allCenter">
class="noContent rowFlex allCenter" <noContent />
>
<noContent />
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </div>
<script> </template>
<script>
import { taskTrack, taskRecord, logsSave, searchcondition } from '@/api/game' import { taskTrack, taskRecord, logsSave, searchcondition } from '@/api/game'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import textEditor from '@/components/textEditor.vue' import textEditor from '@/components/textEditor.vue'
...@@ -444,323 +362,375 @@ ...@@ -444,323 +362,375 @@
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.task-info-container { .task-info-container {
width: 100%;
height: 100%;
background: #fff;
position: relative;
overflow: hidden;
::v-deep .el-form-item__content {
line-height: 32px;
}
.detailsTitle {
width: 100%;
padding: 0 10px;
height: 60px;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
border-bottom: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
p {
color: #333333;
}
}
.account-task-container-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #fff; overflow: auto;
position: relative; overflow-x: hidden;
overflow: hidden; padding: 20px 0;
::v-deep .el-form-item__content{ padding-top: 0px;
line-height: 32px;
.contentItem {
position: relative;
.title {
position: absolute;
left: 10px;
top: 14px;
font-size: 14px;
color: #999999;
}
} }
.detailsTitle {
.taskItem {
width: 100%; width: 100%;
padding: 0 10px; height: auto;
height: 60px; font-size: 14px;
font-size: 18px; font-weight: 400;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333; color: #333333;
border-bottom: 1px solid #ebeef5; transition: all 0.5s;
border-left: 1px solid #ebeef5; position: relative;
p {
color: #333333; div {
width: 100%;
margin-bottom: 5px;
} }
}
.account-task-container-content { .remark {
width: 100%; ::v-deep .el-textarea__inner {
height: 100%; height: 80px;
overflow: auto;
overflow-x: hidden;
padding: 20px 0;
padding-top: 0px;
.contentItem {
position: relative;
.title {
position: absolute;
left: 10px;
top: 14px;
font-size: 14px;
color: #999999;
} }
} }
.taskItem {
width: 100%; .tableImage {
height: auto; width: 40px;
font-size: 14px; height: 40px;
font-weight: 400; border-radius: 6px;
margin-right: 10px;
}
.label {
color: #999999;
}
.text {
color: #333333; color: #333333;
transition: all 0.5s; margin-left: 10px;
position: relative; word-break: break-all;
div { max-width: 75%;
width: 100%; }
margin-bottom: 5px;
} .icon {
.remark { display: none;
::v-deep .el-textarea__inner { position: absolute;
height: 80px; right: 0;
} top: 12px;
} }
.tableImage {
width: 40px; .dianFail {
height: 40px; display: inline-block;
border-radius: 6px; width: 8px;
margin-right: 10px; height: 8px;
} background: #f45454;
.label { border-radius: 5px;
color: #999999; }
}
.text { .dian {
display: inline-block;
width: 8px;
height: 8px;
background: #00bf8a;
border-radius: 5px;
}
.dian2 {
display: inline-block;
width: 8px;
height: 8px;
background: #ff9d02;
border-radius: 5px;
}
}
.orderMoney {
width: calc(100% + 40px);
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; 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;
height: 8px;
background: #f45454;
border-radius: 5px;
} }
.dian {
display: inline-block; p {
width: 8px; font-size: 22px;
height: 8px; color: #00bf8a;
background: #00bf8a;
border-radius: 5px;
}
.dian2 {
display: inline-block;
width: 8px;
height: 8px;
background: #ff9d02;
border-radius: 5px;
} }
} }
}
.orderMoney {
width: calc(100% + 40px); .filterList {
height: 80px; margin-bottom: 10px;
// margin-left: -20px;
padding: 10px 0; .filterListInput {
.orderMoneyItem { width: 60%;
width: 50%; margin-left: 15px;
text-align: center; margin-bottom: 10px;
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 {
.filterListDate {
width: 150px;
margin-bottom: 10px; 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%; ::v-deep .search-item .item-label {
margin-right: 20px;
} }
.orderDetails { }
width: 100%;
height: auto; .orderDetailsScroll {
margin-top: 20px; width: 100%;
position: relative; }
.bridgeMain {
.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;
font-weight: 400;
color: #ff9d02;
transform: rotate(48deg);
z-index: 100;
position: absolute; position: absolute;
top: 0px; right: -6px;
right: 0px; top: 10px;
width: 50px; width: 50px;
height: 50px; text-align: center;
.text { }
font-size: 8px;
.bridge {
font-size: 50px;
position: absolute;
top: 0;
right: 0;
}
}
.orderDetailsTitle {
width: 100%;
background: #f9faff;
.money {
width: 100%;
height: auto;
.btns {
margin-right: 20px;
}
.btn {
background: #fff;
border-radius: 4px;
padding: 2px 5px;
font-size: 12px;
border: 1px solid rgba(0, 0, 0, 0.15);
color: #333333;
cursor: pointer;
}
.btnnot {
background: #ffdddd;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #ff9d02; color: #f56c6c;
transform: rotate(48deg); border: none;
z-index: 100;
position: absolute;
right: -6px;
top: 10px;
width: 50px;
text-align: center;
} }
.bridge {
font-size: 50px; .btnsuccess {
position: absolute; background: #e1fff0;
top: 0; font-family: PingFangSC-Regular, PingFang SC;
right: 0; font-weight: 400;
color: #00bf8a;
border: none;
} }
}
.sended {
.orderDetailsTitle { padding: 0 8px;
width: 100%; height: 20px;
background: #f9faff; line-height: 20px;
.money { background: #e1fff0;
width: 100%; border-radius: 4px;
height: auto; font-size: 12px;
.btns { font-family: PingFangSC-Regular, PingFang SC;
margin-right: 20px; font-weight: 400;
} color: #00bf8a;
.btn {
background: #fff;
border-radius: 4px;
padding: 2px 5px;
font-size: 12px;
border: 1px solid rgba(0, 0, 0, 0.15);
color: #333333;
cursor: pointer;
}
.btnnot {
background: #ffdddd;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f56c6c;
border: none;
}
.btnsuccess {
background: #e1fff0;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #00bf8a;
border: none;
}
.sended {
padding: 0 8px;
height: 20px;
line-height: 20px;
background: #e1fff0;
border-radius: 4px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #00bf8a;
}
.noSend {
padding: 0 8px;
height: 20px;
line-height: 20px;
background: #fffae0;
border-radius: 4px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffa81d;
}
} }
.text {
font-size: 14px; .noSend {
padding: 0 8px;
height: 20px;
line-height: 20px;
background: #fffae0;
border-radius: 4px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #333333; color: #ffa81d;
max-width: 200px;
overflow: hidden;
white-space: nowrap; /* 防止文字换行 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
} }
} }
.orderDetailsList {
width: 100%; .text {
height: auto; font-size: 14px;
background: #ffffff; font-family: PingFangSC-Regular, PingFang SC;
border: 1px solid #ebeef5; font-weight: 400;
position: relative; color: #333333;
.titleFix { max-width: 200px;
position: absolute; overflow: hidden;
left: 10px; white-space: nowrap;
top: 20px; /* 防止文字换行 */
color: #999999; text-overflow: ellipsis;
} /* 超出部分显示省略号 */
}
}
.orderDetailsList {
width: 100%;
height: auto;
background: #ffffff;
border: 1px solid #ebeef5;
position: relative;
.titleFix {
position: absolute;
left: 10px;
top: 20px;
color: #999999;
} }
} }
} }
.remarkHandle { }
font-size: 20px;
color: #0ac358; .remarkHandle {
cursor: pointer; font-size: 20px;
margin-right: 5px; color: #0ac358;
position:absolute; cursor: pointer;
right: 0; margin-right: 5px;
top: 0; position: absolute;
} right: 0;
::v-deep .el-tabs__item { top: 0;
line-height: 26px; }
font-size: 16px;
font-weight: 500; ::v-deep .el-tabs__item {
} line-height: 26px;
.remarkTxext{ font-size: 16px;
width: calc(100% - 120px); font-weight: 500;
margin-left: 10px; }
.remarkTxext {
width: calc(100% - 120px);
margin-left: 10px;
}
.remarkItem {
margin-left: 40px;
position: relative;
}
::v-deep .el-collapse {
border: none;
}
::v-deep .el-collapse-item__header {
width: 100%;
color: #333333;
font-size: 14px;
font-weight: 400;
padding: 0 5px;
/* 单行显示省略号 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
::v-deep .el-collapse-item__arrow {
position: absolute;
right: 5px;
}
::v-deep .el-collapse-item__content {
padding: 10px;
}
.editLayer {
padding: 10px 0;
.noDisturb {
display: flex;
align-items: center;
margin-top: 4px;
} }
.remarkItem{
margin-left: 40px; ::v-deep .el-form-item__label {
position: relative; font-weight: normal;
color: #999999;
padding-right: 8px;
} }
::v-deep .el-collapse {
border: none; ::v-deep .el-form-item {
margin-bottom: 14px;
} }
::v-deep .el-collapse-item__header {
::v-deep .el-select,
::v-deep .el-checkbox {
width: 100%; width: 100%;
color: #333333;
font-size: 14px;
font-weight: 400;
padding: 0 5px;
/* 单行显示省略号 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
::v-deep .el-collapse-item__arrow {
position: absolute;
right: 5px;
}
::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 {
width: 100%;
}
} }
} }
}
</style> </style>
\ No newline at end of file
\ No newline at end of file
src/views/newLogin.vue
...@@ -2,14 +2,15 @@ ...@@ -2,14 +2,15 @@
<template> <template>
<div class="loginContent"> <div class="loginContent">
<div class="loginContentContainer"> <div class="loginContentContainer">
<p class="loginContentTitle">选择客服:</p> <p class="loginContentTitle">选择客服:</p>
<div class="loginContentInput rowFlex alignCenter"> <div class="loginContentInput rowFlex alignCenter">
<el-select v-model="cser_user_id" filterable placeholder="请选择客服"> <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"
</el-option> :value="item.zq_user_id">
</el-select> </el-option>
<el-button type="primary" style="margin-left: 10px;" size="small" @click="loginConfirm">点击登录</el-button> </el-select>
</div> <el-button type="primary" style="margin-left: 10px;" size="small" @click="loginConfirm">点击登录</el-button>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -112,6 +113,10 @@ export default { ...@@ -112,6 +113,10 @@ export default {
}, },
loginConfirm(){ loginConfirm(){
const cser_user = this.userList.find(item => item.zq_user_id === this.cser_user_id) 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}】`, '提示', { this.$confirm(`确认登录上线吗，上线后所有会话都会归属到客服【${cser_user.name}】`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
...@@ -294,12 +299,14 @@ export default { ...@@ -294,12 +299,14 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.loginContentTitle{
font-size: 14px; .loginContentTitle {
line-height: 32px; font-size: 14px;
margin-right: 10px; line-height: 32px;
text-align: left; margin-right: 10px;
text-align: left;
} }
.qr-contain { .qr-contain {
margin: 0 auto; margin: 0 auto;
/* margin-top: 20px; */ /* margin-top: 20px; */
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论