Skip to content

C
company_app
提交 6f2c25cf 作者: 毛细亚
操作

更新代码

上级 590fdf30
正在显示 包含 1363 行增加 和 232 行删除
src/api/works.js
...@@ -242,4 +242,12 @@ export function clearTaskUnReadData(data) { ...@@ -242,4 +242,12 @@ export function clearTaskUnReadData(data) {
method: 'post', method: 'post',
data data
}) })
}
// w账号绑定客户列表
export function memberBindExternalUser(data) {
return request({
url: returnApi('/cser_receipt/memberBindExternalUser'),
method: 'post',
data
})
} }
\ No newline at end of file
src/components/dialog.vue 0 → 100644
<template>
<el-drawer
:lock-scroll="true"
:title="title"
:visible="show"
:size="width"
:append-to-body="true"
@close="close"
>
<div class="layerConent">
<slot></slot>
<span class="dialog-footer rowFlex">
<el-button
class="btn"
type="primary"
@click="submit"
>确 定</el-button>
<el-button
class="btn"
@click="close"
>取 消</el-button>
</span>
</div>
</el-drawer>
</template>
<script type="text/javascript">
export default {
name: 'Layer',
props: ['show', 'width', 'title'],
data() {
return {
}
},
watch: {
show(newVal, oldVal) {
if (newVal) {
console.log('显示弹窗')
}
}
},
mounted() {
},
methods: {
close() {
this.$emit('update:show', false)
},
submit() {
this.$emit('confirm')
}
}
}
</script>
<style lang="scss" scoped>
// ::v-deep .el-drawer {
// height: 100%;
// overflow: 100%;
// overflow-x: hidden;
// over
// }
.layerConent{
width: 100%;
height: 100%;
overflow: auto;
padding-bottom: 100px;
padding-right: 20px;
}
.dialog-footer {
width: 100%;
height: auto;
position: absolute;
right: 0px;
bottom: 0px;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
justify-content: flex-end;
background: #fff;
.btn {
width: 84px;
height: 32px;
}
}
</style>
\ No newline at end of file
src/directive/scroll/scroll.js
...@@ -63,14 +63,15 @@ function createScrollHandler(el, binding, vnode) { ...@@ -63,14 +63,15 @@ function createScrollHandler(el, binding, vnode) {
// 检查是否禁用 // 检查是否禁用
if (options && options.disabled) return; if (options && options.disabled) return;
if(el && el.__infinite_scroll_container){
const scrollContainer = el.__infinite_scroll_container; const scrollContainer = el.__infinite_scroll_container;
const isBottom = isScrollBottom(scrollContainer, el, options.distance); const isBottom = isScrollBottom(scrollContainer, el, options.distance);
if (isBottom) {
if (isBottom) { // 调用加载函数
// 调用加载函数 options.loadMore();
options.loadMore(); }
} }
}; };
} }
......
src/views/components/taskList/taskDetails.vue 0 → 100644
<template>
<div>
<el-drawer
:lock-scroll="true"
title="玩家申诉"
:visible="show"
size="300px"
:append-to-body="true"
@close="close"
>
<!-- 我的任务 -->
<div class="contet" v-loading="loading">
<div class="title">当前任务</div>
<div class="taskInfo rowFlex flexWarp columnCenter">
<div
v-for="(item, index) in detailsList"
:key="index"
class="taskInfoItem rowFlex"
>
<div
v-if="
item.value != 'plan_type' &&
item.value != 'target' &&
item.value != 'finished_event' &&
item.value != 'username'
"
class="rowFlex"
>
<div class="label">{{ item.label }}</div>
<div
v-if="item.type == 'money'"
class="value"
>
<p>
<span>￥</span><span>{{ assionInfo[item.value] || 0 }}</span>
</p>
</div>
<div
v-else
class="value"
>
<span v-if="assionInfo[item.value]">{{
assionInfo[item.value] || ""
}}</span>
</div>
</div>
<div
v-else-if="item.value == 'plan_type'"
class="rowFlex"
>
<div class="label">{{ item.label }}</div>
<div class="value">
<span style="color: #0787f2">{{
taskTypeList.find((k) => k.value == assionInfo[item.value])
? taskTypeList.find((k) => k.value == assionInfo[item.value])
.label
: ""
}}</span>
</div>
</div>
<div
v-else-if="item.value == 'target'"
class="rowFlex"
>
<div class="label">{{ item.label }}</div>
<div class="value">
<span
v-if="assionInfo.target"
style="color: #0787f2"
>{{
assionInfo.target.first && assionInfo.target.first.is_finished
? "已完成"
: "未完成"
}}</span>
</div>
</div>
<div
v-else-if="item.value == 'finished_event'"
class="rowFlex"
>
<div class="label">{{ item.label }}</div>
<div
v-if="assionInfo.finished_event"
class="value"
>
<span
v-for="(item, index) in assionInfo.finished_event"
:key="index"
>
{{ item }}
</span>
</div>
</div>
<!-- w 账号 -->
<div
v-else-if="item.value == 'username'"
class="rowFlex"
>
<div class="label">{{ item.label }}</div>
<div
v-if="assionInfo.username && assionInfo.username.length > 0"
class="value"
>
<div
v-if="assionInfo.username.length <= 1"
class="rowFlex"
>
<div
v-for="(items, indexs) in assionInfo.username"
:key="indexs"
class="rowFlex userInfoStyle"
>
<p
class="textHidden rowFlex userAlias"
style="max-width:150px;"
>{{ items }}</p>
</div>
</div>
<el-popover
v-else
placement="top"
trigger="click"
>
<div style="max-width: 400px">
<p
v-for="(items, indexs) in assionInfo.username"
:key="indexs"
class="rowFlex columnCenter userInfoStyle"
style="margin-bottom: 10px"
>
<span
class="textHidden"
style="max-width:150px;"
>{{ items }}</span>
</p>
</div>
<el-button
slot="reference"
type="text"
size="medium"
style="margin-top: -10px"
>{{ assionInfo.username.length }}个</el-button>
</el-popover>
</div>
</div>
</div>
</div>
<div class="contentInfo">
<div class="contentInfoItem rowFlex">
<div class="label">跟进状态</div>
<div
v-if="assionInfo.status == 1"
class="noSend"
>待跟进</div>
<div
v-else-if="assionInfo.status == 2"
class="noSend"
>跟进中</div>
<div
v-else-if="assionInfo.status == 3"
class="sended"
>已跟进</div>
</div>
<div v-if="remarks.remarks" class="remarks rowFlex flexWarp">
<div
v-for="(item, index) in remarks.remarks"
:key="index"
>
<div class="contentInfoItem rowFlex">
<div class="label">跟进时间</div>
<div class="value">{{ item.update_time }}</div>
</div>
<div class="contentInfoItem rowFlex">
<div class="label">备注</div>
<div class="value">
<div
class="remarkContent"
v-html="item.remark"
></div>
</div>
</div>
</div>
</div>
<!-- 发起会话 -->
<!-- 新增判断逻辑 根据 taskDetails 中的is_bind 判断 1:显示发起会话按钮 0:不显示发起会话按钮 -->
<div
v-if="kfhList && kfhList.length > 0 && assionInfo.status_name !== '已完成'"
class="kfhList rowFlex columnCenter flexWarp"
>
<div
v-for="(item, index) in kfhList"
:key="index"
class="sessionUserList rowFlex flexWarp "
>
<div style="margin-bottom: 20px" class="sessionUser">
<div class="kfhItem rowFlex spaceBetween">
<div class="left rowFlex columnCenter">
<el-image
:src="item.user.avatar"
class="image"
></el-image>
<div class="name">{{ item.user.alias }}</div>
</div>
<el-button
class="right"
type="primary"
@click="requestSession(item)"
>发起会话</el-button>
</div>
<div class="wxUserInfo columnFlex">
<p>
<span>用户备注:</span>
<label style="word-break: break-all;">{{
item.external_user.remark || item.external_user.name
}}</label>
</p>
<p v-if="false">最近接待时间:{{ item.username }}</p>
</div>
</div>
</div>
</div>
<el-button
v-if="kfhList.length == 0 && taskDetails.status != 3 && !is_finished"
type="primary"
style="margin-top: 20px"
@click="showLayer = true"
>完成任务</el-button>
</div>
</div>
</el-drawer>
<layer
:show.sync="showLayer"
title="填写跟进结果"
width="400px"
@confirm="onConfirm"
>
<div class="editLayer">
<el-form
ref="ruleForm"
:model="webForm"
:rules="webFormRule"
label-width="100px"
>
<!-- 新增异常原因筛选 当 plan_type==5 5:为大R异跟进异常时 新增异常原因筛选 -->
<el-form-item
v-if="taskDetails.plan_type==5"
label="异常原因"
prop="abnormal_types"
>
<el-select
v-model="webForm.abnormal_types"
style="width: 90%"
placeholder="请选择"
multiple
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"
style="width: 90%"
placeholder="请选择"
>
<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
label="备注:"
prop="remark"
>
<el-input
v-model="webForm.remark"
type="textarea"
style="width: 90%; height: 150px"
placeholder="备注请填写异常原因和异常类型，并列举后续维护策略/难以维护的原因"
></el-input>
</el-form-item>
</el-form>
</div>
</layer>
<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>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import {
taskRecord,
searchcondition,
memberOrder,
RoleTodayOrder,
taskDetails,
taskTrack,
reportProcess,
appealProcess,
gamerReportProcess
} from '@/api/game'
import { memberBindExternalUser } from '@/api/works'
import layer from '@/components/dialog.vue'
export default {
computed: {
...mapState('game', ['taskDetails']),
...mapState('user', ['userInfo'])
},
components: {
layer
},
props: ['show', 'taskDetails'],
data() {
return {
memberView: {},
is_finished: false,
loading: false,
remarks: [],
kfhList: {},
traceList: [],
taskTypeList: [],
errorTypeList: [],
approvalProcessList: [],
assionInfo: {},
current: 0,
showLayer: false,
dialogRemarkVisible: false,
dialogRemake: '',
webForm: {
trace_result: '',
remark: '',
abnormal_types: []
},
approvalProcessActive: 1,
webFormRule: {
remark: [{ required: true, message: '请输入备注', trigger: 'blur' }],
trace_result: [
{ required: true, message: '请选择跟进结果', trigger: 'change' }
],
abnormal_types: [
{ required: true, message: '请选择异常原因', trigger: 'change' }
]
},
detailsList: [
{ label: '游戏名称', value: 'main_game_name' },
{ label: '计划名称', value: 'plan_name' },
{ label: 'CP角色ID', value: 'cp_role_id' },
{ label: '角色名称', value: 'role_name' },
{ label: '区服', value: 'server_name' },
{ label: '任务类型', value: 'plan_type' },
{ label: 'W账号', value: 'username' },
{ label: '角色充值金额', value: 'recharge_total', type: 'money' },
{ label: '用户累充金额', value: 'member_recharge', type: 'money' },
{ label: '今日充值金额', value: 'today_amount', type: 'money' },
{ label: '跟进人', value: 'tracer_name' },
{ label: '举报人角色', value: 'report_role_name' },
{ label: '米大师支付', value: 'm_pay_amount', type: 'money' },
{ label: 'H5支付', value: 'h5_pay_amount', type: 'money' },
{ label: 'IOS支付', value: 'ios_pay_amount', type: 'money' },
{ label: '待维护时间', value: 'assignment_time' },
{ label: '最近充值时间', value: 'last_pay_time' },
{ label: '最近登录时间', value: 'last_login_time' },
{ label: '任务截止时间', value: 'deadline_time' },
{ label: '任务状态', value: 'status_name' },
{ label: '目标完成状态', value: 'target' },
{ label: '马甲包', value: 'game_name' },
{ label: '完成事件', value: 'finished_event' },
{ label: '目标客服号', value: 'target_service_name' }
],
reprotDetails: [
{ label: '主游戏', value: 'main_game_name' },
{ label: '马甲包', value: 'game_name' },
{ label: '账号', value: 'username' },
{ label: '审批状态', value: 'approval_status_text' },
{ label: 'CP角色ID', value: 'cp_role_id' },
{ label: '角色名称', value: 'role_name' },
{ label: '区服', value: 'server_name' },
{ label: '登记人', value: 'create_user' }
],
// 举报人信息
userReportDetails: [
{ label: '主游戏', value: 'main_game_name' },
{ label: '马甲包', value: 'game_name' },
{ label: '账号', value: 'report_username' },
{ label: '区服', value: 'report_server_name' },
{ label: 'CP角色ID', value: 'report_cp_role_id' },
{ label: '角色名称', value: 'report_role_name' },
{ label: '举报人角色累计充值金额', value: 'report_recharge_total_amount', type: 'money' },
{ label: '举报人角色近一周充值', value: 'report_recharge_week_amount', type: 'money' },
{ label: '登记时间', value: 'create_time' },
{ label: '与被举报人关系', value: 'report_relationship_text' }, // 只有 type =4 的时候 玩家举报才有
{ label: '审批状态', value: 'approval_status_text' },
{ label: '登记人', value: 'create_user' }
],
// 被举报人信息
userCanReportDetails: [
{ label: '主游戏', value: 'main_game_name' },
{ label: '马甲包', value: 'game_name' },
{ label: '账号', value: 'username' },
{ label: '区服', value: 'server_name' },
{ label: 'CP角色ID', value: 'cp_role_id' },
{ label: '角色名称', value: 'role_name' },
{ label: '累计充值金额', value: 'recharge_total_amount', type: 'money' },
{ label: '近一周充值金额', value: 'recharge_week_amount', type: 'money' },
{ label: '违规操作类型', value: 'violation_type_text' }
]
}
},
watch: {
taskDetails(newVal, oldVal) {
if (newVal.member_id) {
this.requestInit()
}
}
},
created() {
this.assionInfo = this.taskDetails
},
mounted() {
if (this.taskDetails.id) {
this.requestInit()
}
},
methods: {
...mapMutations('game', ['set_taskDetails', 'set_task_session_member_id']),
requestInit() {
this.current = 0
this.is_finished = false
this.assionInfo = this.taskDetails
this.taskRecord()
this.memberOrder()
this.requestTaskDetails()
this.searchTrackList()
// 只有状态是 5 的时候 才请求
if (this.taskDetails.plan_type == 5) {
this.searchconditionError()
}
},
close() {
this.$emit('update:show', false)
},
searchconditionError() {
const data = {
type: 'dictionaries',
table_name: 'zs_operator_task',
field_name: 'abnormal_type'
}
searchcondition(data).then((res) => {
this.errorTypeList = res.data.data
})
},
searchcondition() {
const data = {
type: 'dictionaries',
table_name: 'zs_operator_plan',
field_name: 'plan_type'
}
searchcondition(data).then((res) => {
this.taskTypeList = res.data.data
})
},
async reportProcess() {
this.current = 0
const res = await reportProcess({ id: this.taskDetails.id })
this.approvalProcessList = res.data.data
res.data.data.map((item) => {
if (item.approval_result !== '0' && item.approval_result !== '2') {
this.current += 1
}
})
},
// 玩家申诉
async appealProcess() {
this.current = 0
const res = await appealProcess({ id: this.taskDetails.id })
this.approvalProcessList = res.data.data
res.data.data.map((item) => {
if (item.approval_result !== '0' && item.approval_result !== '2') {
this.current += 1
}
})
},
// 玩家举报进度
async gamerReportProcess() {
this.current = 0
const res = await gamerReportProcess({ id: this.taskDetails.id })
this.approvalProcessList = res.data.data
res.data.data.map((item) => {
if (item.approval_result !== '0' && item.approval_result !== '2') {
this.current += 1
}
})
},
searchTrackList() {
const data = {
type: 'dictionaries',
table_name: 'zs_operator_task',
field_name: 'trace_result'
}
searchcondition(data).then((res) => {
this.traceList = res.data.data
})
},
// 完成任务
submitForm() {
const data = {
id: this.taskDetails.id,
trace_result: this.webForm.trace_result,
create_user: this.userInfo.username,
remark: this.webForm.remark,
abnormal_types: this.webForm.abnormal_types,
create_department: this.userInfo.department_name
}
taskTrack(data).then((res) => {
if (res.status_code == 1) {
this.$message.success(res.msg)
this.webForm = {
trace_result: '',
remark: '',
abnormal_types: []
}
this.is_finished = true
this.showLayer = false
}
})
},
onConfirm() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.submitForm()
} else {
console.log('error submit!!')
}
})
},
requestTaskDetails() {
const data = {
id: this.taskDetails.id
}
taskDetails(data).then((res) => {
this.assionInfo = { ...res.data, ...this.assionInfo }
this.memberBindExternalUser()
if (this.assionInfo && this.assionInfo.username && this.assionInfo.username.indexOf('\n') !== -1) {
this.assionInfo.username = this.assionInfo.username.split('\n')
} else {
this.assionInfo.username = [this.assionInfo.username]
}
})
},
// 玩家举报发起会话 成功发起会话后 直接选中角色信息举报记录tab 其中搜索条件 审批记录为待审批 申请方式为玩家登记
reportRequestSession(item) {
// 复用之前的发起会话逻辑
const data = {
userid: item.userid,
user_name: item.user.name,
user_avatar: item.user.avatar,
external_userid: item.external_userid,
external_user_name: item.external_user.name,
external_user_avatar: item.external_user.avatar,
corp_id: item.corp_id
}
// 为了给掌游记录答问比 发起会话的时候需要记录任务的 id 然后会在会话列表中 返回任务 ID 在和用户聊天的时候 每次都把 任务的信息 通过 webscoket 发送给后端
item.task_id = data.task_id = this.taskDetails.id
item.task_type = data.task_type = this.taskDetails.plan_type
launchSession(data).then((res) => {
// 随机取一个 member_id
let member_list = []
if (this.assionInfo.members?.length > 0) {
member_list = this.assionInfo.members.map((item) => item.member_id)
} else {
member_list = [this.assionInfo.member_id]
}
if (member_list.length > 0) {
const index = Math.floor(Math.random(0, 1) * member_list.length)
this.set_task_session_member_id(member_list[index])
const itemData = this.$clone(item)
itemData.session_id = res.data.session_id
this.$emit('taskSession', itemData, 'report')
}
})
},
requestSession(item) {
const data = {
userid: item.userid,
user_name: item.user.name,
user_avatar: item.user.avatar,
external_userid: item.external_userid,
external_user_name: item.external_user.name,
external_user_avatar: item.external_user.avatar,
corp_id: item.corp_id
}
// 为了给掌游记录答问比 发起会话的时候需要记录任务的 id 然后会在会话列表中 返回任务 ID 在和用户聊天的时候 每次都把 任务的信息 通过 webscoket 发送给后端 通过 task_type 召回任务发送的时候 需要在工作台发送游戏渠道的时候 显示 一键发送渠道链接
item.task_id = data.task_id = this.taskDetails.id
item.task_type = data.task_type = this.taskDetails.plan_type
// this.taskDetails.plan_type == 7 ? data.task_id = this.taskDetails.id : ''
launchSession(data).then((res) => {
// 随机取一个 member_id
let member_list = []
if (this.assionInfo.members?.length > 0) {
member_list = this.assionInfo.members.map((item) => item.member_id)
} else {
member_list = [this.assionInfo.member_id]
}
if (member_list.length > 0) {
const index = Math.floor(Math.random(0, 1) * member_list.length)
this.set_task_session_member_id(member_list[index])
}
const itemData = this.$clone(item)
itemData.session_id = res.data.session_id
// this.taskDetails.plan_type == 7 ? itemData.task_id = this.taskDetails.id : ''
this.$emit('taskSession', itemData)
})
},
async memberOrder() {
let res = {}
if (!this.taskDetails.cp_role_id || this.taskDetails.cp_role_id == '') {
res = await memberOrder({ member_id: this.taskDetails.member_id })
} else {
res = await RoleTodayOrder({ role_id: this.taskDetails.role_id })
}
this.todayOrder = res.data[0]
this.assionInfo = { ...this.assionInfo, ...this.todayOrder }
},
async taskRecord() {
const res = await taskRecord({ task_id: this.taskDetails.id })
console.log(res.data.data, 'res.data.data')
this.remarks = res.data.data[0]
},
async memberBindExternalUser() {
let member_list = []
if (this.taskTypeSelect == 4) { // 玩家举报
if (this.assionInfo.members?.length > 0) {
member_list = this.assionInfo.members.map((item) => item.report_member_id)
} else {
member_list = [this.assionInfo.report_member_id]
}
} else {
if (this.assionInfo.members?.length > 0) {
member_list = this.assionInfo.members.map((item) => item.member_id)
} else {
member_list = [this.assionInfo.member_id]
}
}
this.loading = true
if (member_list.length === 0) {
return false
}
try {
const res = await memberBindExternalUser({
member_id: member_list.toString(),
is_bind: this.assionInfo.is_bind
})
this.kfhList = res.data
this.loading = false
} catch (error) {
this.loading = false
}
}
}
}
</script>
<style lang="scss" scoped>
.contet {
height: 100%;
background: #fff;
padding: 20px;
height: 100%;
overflow: auto;
.title {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
margin-bottom: 10px;
}
.taskInfo {
height: auto;
background: #f7f8fa;
border-radius: 4px;
padding-bottom: 3px;
padding-top: 10px;
position: relative;
.icon {
font-size: 52px;
}
.approval_status {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
.taskInfoItem {
width: 250px;
margin-bottom: 5px;
.label {
width: 100px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #99a3b4;
text-align: right;
margin-right: 10px;
}
.value {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
text-align: left;
}
}
}
.remarks {
margin-top: 20px;
}
.contentInfo {
margin-top: 20px;
.contentInfoItem {
margin-right: 40px;
margin-top: 10px;
.label {
width: 60px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #99a3b4;
text-align: right;
margin-right: 10px;
}
.remarkContent {
width: 200px;
height: auto;
::v-deep img {
max-width: 200px;
}
}
.value {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
text-align: left;
}
}
}
.kfhList {
width: 100%;
height: auto;
margin-top: 22px;
.sessionUserList{
}
.sessionUser{
width: 350px;
height: auto;
background: #F8F8F8;
border-radius: 4px;
margin-right: 20px;
padding: 10px;
}
.wxUserInfo {
span{
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: #949FB0;
}
}
.kfhItem {
width: 330px;
background: #f8f8f8;
border-radius: 4px;
margin-right: 20px;
margin-bottom: 5px;
.left {
.image {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 10px;
}
.name {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
}
}
}
.approvalProcessList {
margin-bottom: 20px;
margin-top: 20px;
}
// 掌游的样式
::v-deep.el-step .el-step__line {
width: 1px;
}
::v-deep .el-step > .is-success {
color: #00bf8a;
border-color: #00bf8a;
.el-step__line {
background-color: #e5e6eb;
}
}
::v-deep .el-step__main > .is-success {
color: #00bf8a;
}
::v-deep .el-step > .is-process {
color: #00bf8a;
border-color: #00bf8a;
.el-step__line {
background-color: #e5e6eb;
}
}
::v-deep .el-step__main > .is-process {
color: #00bf8a;
}
.form-item-btn {
margin: 0 0 0 20px;
}
.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: #00bf8a;
margin: 0 0 0 10px;
i {
margin: 0 5px 0 0;
}
}
.remark-value {
width: 480px;
min-height: 100px;
margin: 10px 0 0 40px;
padding: 6px 12px;
border: 1px solid #d9d9d9;
border-radius: 4px;
cursor: not-allowed;
color: #333;
}
.flex-box {
display: flex;
.remark-lebel {
width: 50px;
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;
height: 50px;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 100;
.audit-state-stamp {
font-size: 50px;
}
}
.info-item {
width: 45%;
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;
flex-wrap: wrap;
&-item {
width: 80px;
height: 80px;
border-radius: 4px;
overflow: hidden;
margin: 0 10px 10px 0;
position: relative;
.preview-pic {
width: 80px;
height: 80px;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
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;
}
}
}
}
.flex-btn {
display: flex;
justify-content: space-between;
}
.info-label {
// width: 90px;
// text-align: right;
display: block;
margin: 0 10px 0 0;
font-size: 14px;
color: #949fb0;
}
.info-value {
display: block;
font-size: 14px;
color: #333;
}
.card-style {
background: #f2f2f7;
border-radius: 4px;
}
.trans-follow-1 {
width: 548px;
min-height: fit-content;
margin: 6px 0 12px 0;
padding: 12px 12px 0;
display: flex;
flex-wrap: wrap;
position: relative;
.collapse-btn {
position: absolute;
top: 20px;
right: 15px;
}
.follow-item-remark {
width: 100%;
line-height: 20px;
margin: 0 0 12px 0;
}
.info-value-color {
color: #00bf8a;
margin-left: 5px;
}
}
.follow-item {
width: 50%;
height: 20px;
line-height: 20px;
margin: 0 0 12px 0;
display: flex;
.label-left {
width: 90px;
text-align: right;
}
}
.left-label {
width: 60px;
}
.follow-info-label {
width: fit-content;
text-align: left;
display: inline-block;
margin: 0 10px 0 0;
}
.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;
}
.info-value {
display: block;
width: 440px;
}
}
}
.editLayer {
::v-deep .el-textarea__inner {
height: 150px;
}
}
</style>
\ No newline at end of file
src/views/components/taskList/uesrTask.vue
...@@ -3,10 +3,11 @@ ...@@ -3,10 +3,11 @@
<!-- <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" v-loading="loading"> <div class="account-task-container-content" v-scroll="requestOrderList">
<!-- 运营任务 和 用户任务 --> <!-- 运营任务 和 用户任务 -->
<div <div
class="orderDetailsScroll" class="orderDetailsScroll"
v-loading="loading"
> >
<div v-if="orderList.length > 0"> <div v-if="orderList.length > 0">
<div <div
...@@ -35,22 +36,21 @@ ...@@ -35,22 +36,21 @@
</div> </div>
</div> </div>
</template> </template>
<div class="taskItem rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">跟进客服</span>
<p class="text">{{ item.tracer_name }}</p>
</div>
</div>
<div class="taskItem rowFlex columnCenter spaceBetween">
<div class="rowFlex">
<span class="label">待维护日期</span>
<p class="text">{{ item.assignment_time }}</p>
</div>
</div>
<div class="editLayer"> <div class="editLayer">
<el-form <el-form
:model="webForm" :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异跟进异常时 新增异常原因筛选 --> <!-- 新增异常原因筛选 当 plan_type==5 5:为大R异跟进异常时 新增异常原因筛选 -->
<el-form-item <el-form-item
v-if="taskInfo.plan_type && taskInfo.plan_type==5" v-if="taskInfo.plan_type && taskInfo.plan_type==5"
...@@ -61,6 +61,7 @@ ...@@ -61,6 +61,7 @@
v-model="webForm.abnormal_types" v-model="webForm.abnormal_types"
placeholder="请选择" placeholder="请选择"
multiple multiple
style="margin-left: 10px;"
collapse-tags collapse-tags
> >
<el-option <el-option
...@@ -79,6 +80,7 @@ ...@@ -79,6 +80,7 @@
<el-select <el-select
v-model="webForm.trace_result" v-model="webForm.trace_result"
placeholder="请选择" placeholder="请选择"
style="margin-left: 10px;"
> >
<el-option <el-option
v-for="item in traceList" v-for="item in traceList"
...@@ -91,15 +93,17 @@ ...@@ -91,15 +93,17 @@
<el-form-item <el-form-item
v-if="activeType == 'user_task'" v-if="activeType == 'user_task'"
label="免打扰:" label="免打扰:"
label-width="80px"
prop="no_trouble" prop="no_trouble"
style="margin-left: 10px;"
> >
<div class="noDisturb">
<el-checkbox <el-checkbox
v-model="webForm.no_trouble" v-model="webForm.no_trouble"
class="noDisturb rowFlex allCenter" class="noDisturb rowFlex "
:true-label="1" :true-label="1"
:false-label="0" :false-label="0"
>免打扰(勾选后该用户不会再被分配任务)</el-checkbox> >免打扰(勾选后该用户不会再被分配任务)</el-checkbox>
</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -110,17 +114,17 @@ ...@@ -110,17 +114,17 @@
class="item rowFlex columnCenter spaceBetween" class="item rowFlex columnCenter spaceBetween"
> >
<div <div
class="rowFlex spaceBetween" class="rowFlex spaceBetween remarkItem"
style="width: 100%;" style="width: 100%;"
> >
<span <span
class="label" style="margin-left: 40px;color: #999999;"
style="width: 50px"
>备注:</span> >备注:</span>
<div class="text rowFlex remark flex1"> <div class="remarkTxext rowFlex remark flex1">
<textEditor <textEditor
:remark.sync="remark.remark" :remark.sync="remark.remark"
:domid="'taskRemark' + indexs" :domid="'taskRemark' + indexs"
style="width: 100%;"
:contenteditable="!Boolean(remark.id)" :contenteditable="!Boolean(remark.id)"
@resultReamrk="resultReamrk" @resultReamrk="resultReamrk"
/> />
...@@ -169,6 +173,8 @@ ...@@ -169,6 +173,8 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 任务详情 -->
<taskDetails v-if="showTaskDetails" :taskDetails="taskDetails" />
</div> </div>
</template> </template>
<script> <script>
...@@ -176,13 +182,16 @@ ...@@ -176,13 +182,16 @@
import { mapState } from 'vuex' import { mapState } from 'vuex'
import textEditor from '@/components/textEditor.vue' import textEditor from '@/components/textEditor.vue'
import noContent from '@/components/noContent.vue' import noContent from '@/components/noContent.vue'
import taskDetails from './taskDetails.vue'
export default { export default {
components: { components: {
textEditor, textEditor,
noContent noContent,
taskDetails
}, },
data() { data() {
return { return {
showTaskDetails: false,
isloadMore: true, isloadMore: true,
loading: false, loading: false,
collapseValue: ['1'], collapseValue: ['1'],
...@@ -446,6 +455,9 @@ ...@@ -446,6 +455,9 @@
background: #fff; background: #fff;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
::v-deep .el-form-item__content{
line-height: 32px;
}
.detailsTitle { .detailsTitle {
width: 100%; width: 100%;
padding: 0 10px; padding: 0 10px;
...@@ -706,7 +718,14 @@ ...@@ -706,7 +718,14 @@
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
} }
.remarkTxext{
width: calc(100% - 120px);
margin-left: 10px;
}
.remarkItem{
margin-left: 40px;
position: relative;
}
::v-deep .el-collapse { ::v-deep .el-collapse {
border: none; border: none;
} }
...@@ -728,19 +747,25 @@ ...@@ -728,19 +747,25 @@
padding: 10px; padding: 10px;
} }
.editLayer { .editLayer {
.noDisturb{ padding: 10px 0;
// 换行 .noDisturb {
white-space: wrap; display: flex;
} align-items: center;
::v-deep .el-form-item__label{ margin-top: 4px;
font-weight: normal; }
color: #999999; ::v-deep .el-form-item__label {
} font-weight: normal;
::v-deep .el-form-item--small.el-form-item{ color: #999999;
margin-bottom: 10px; 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
src/views/taskRecord.vue
...@@ -459,30 +459,18 @@ export default { ...@@ -459,30 +459,18 @@ export default {
margin-left: 2px; margin-left: 2px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
.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 { .account-task-container-content {
width: 100%; width: 100%;
height: calc(100% - 60px); height: 100%;
padding: 20px 10px; padding: 20px 10px 0;
padding-top: 0px;
.tabSelect { .tabSelect {
width: 100%; width: 100%;
height: 60px; height: 60px;
border-bottom: 1px solid #ebeef5; border-bottom: 1px solid #ebeef5;
cursor: pointer; cursor: pointer;
.tabSelectItem { .tabSelectItem {
font-size: 18px; font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
...@@ -492,167 +480,37 @@ export default { ...@@ -492,167 +480,37 @@ export default {
line-height: 47px; line-height: 47px;
cursor: pointer; cursor: pointer;
} }
.tabSelectItemActive { .tabSelectItemActive {
color: #409EFF; color: #409EFF;
border-bottom: 2px solid #409EFF; border-bottom: 2px solid #409EFF;
} }
} }
.contentItem {
position: relative;
.title {
position: absolute;
left: 10px;
top: 14px;
font-size: 14px;
color: #999999;
}
}
.item {
width: 100%;
height: auto;
font-size: 14px;
font-weight: 400;
color: #333333;
transition: all 0.5s;
position: relative;
cursor: pointer;
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;
height: 8px;
background: #f45454;
border-radius: 5px;
}
.dian {
display: inline-block;
width: 8px;
height: 8px;
background: #409EFF;
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;
}
p {
font-size: 22px;
color: #409EFF;
}
}
}
.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 { .orderDetailsScroll {
width: 100%; width: 100%;
height: calc(100% - 20px); height: calc(100% - 80px);
overflow: auto; overflow: auto;
overflow-x: hidden; overflow-x: hidden;
} }
.orderDetails { .orderDetails {
width: 100%; width: 100%;
height: auto;
margin-top: 20px; margin-top: 20px;
position: relative; 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;
right: -6px;
top: 10px;
width: 50px;
text-align: center;
}
.bridge {
font-size: 50px;
position: absolute;
top: 0;
right: 0;
}
}
.orderDetailsTitle { .orderDetailsTitle {
width: 100%; width: 100%;
background: #f9faff; background: #f9faff;
.money { .money {
width: 100%; width: 100%;
height: auto;
padding-left: 10px; padding-left: 10px;
.btns { .btns {
padding-right: 40px; padding-right: 40px;
} }
.btn { .btn {
background: #fff; background: #fff;
border-radius: 4px; border-radius: 4px;
...@@ -663,20 +521,7 @@ export default { ...@@ -663,20 +521,7 @@ export default {
color: #333333; color: #333333;
cursor: pointer; 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: #409EFF;
border: none;
}
.sended { .sended {
padding: 0 8px; padding: 0 8px;
height: 20px; height: 20px;
...@@ -688,6 +533,7 @@ export default { ...@@ -688,6 +533,7 @@ export default {
font-weight: 400; font-weight: 400;
color: #409EFF; color: #409EFF;
} }
.noSend { .noSend {
padding: 0 8px; padding: 0 8px;
height: 20px; height: 20px;
...@@ -700,6 +546,7 @@ export default { ...@@ -700,6 +546,7 @@ export default {
color: #ffa81d; color: #ffa81d;
} }
} }
.text { .text {
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
...@@ -707,53 +554,105 @@ export default { ...@@ -707,53 +554,105 @@ export default {
color: #333333; color: #333333;
max-width: 200px; max-width: 200px;
overflow: hidden; overflow: hidden;
white-space: nowrap; /* 防止文字换行 */ white-space: nowrap;
text-overflow: ellipsis; /* 超出部分显示省略号 */ text-overflow: ellipsis;
} }
} }
.orderDetailsList { .orderDetailsList {
width: 100%; width: 100%;
height: auto;
background: #ffffff; background: #ffffff;
border: 1px solid #ebeef5; border: 1px solid #ebeef5;
position: relative; position: relative;
.titleFix { }
position: absolute; }
left: 10px;
top: 20px; .item {
color: #999999; width: 100%;
font-size: 14px;
font-weight: 400;
color: #333333;
position: relative;
.remark {
::v-deep .el-textarea__inner {
height: 80px;
} }
} }
.label {
color: #999999;
}
.text {
color: #333333;
margin-left: 10px;
word-break: break-all;
max-width: 75%;
}
} }
} }
.remarkHandle { .remarkHandle {
font-size: 20px; font-size: 20px;
color: #0ac358; color: #0ac358;
cursor: pointer; cursor: pointer;
margin-right: 5px; margin-right: 5px;
position:absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
} }
::v-deep .el-tabs__item {
line-height: 26px;
font-size: 16px;
font-weight: 500;
}
.editLayer { .editLayer {
margin-left: -20px; padding: 10px 0;
.noDisturb{
// 换行 .noDisturb {
white-space: wrap; display: flex;
align-items: center;
flex-wrap: wrap;
}
::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 {
width: 100%;
max-width: 90%;
}
::v-deep .el-checkbox {
width: 100%;
}
} }
::v-deep .el-form-item__label{
font-weight: normal; ::v-deep .el-collapse {
color: #999999; border: none;
} }
::v-deep .el-form-item--small.el-form-item{
margin-bottom: 10px; ::v-deep .el-collapse-item__header {
width: 100%;
color: #333333;
font-size: 14px;
font-weight: 400;
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;
}
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论