<template>
|
<view class="dca" v-if="info">
|
<view class="dca_head">
|
<text>任务{{returnStatus(info.status)}}</text>
|
<text>工单号：{{info.code}}</text>
|
</view>
|
<u-gap height="5" bgColor="#EFEFEF"></u-gap>
|
<view class="dca_list">
|
<view class="dca_list_item">
|
<view class="dca_list_item_label">不符合内容</view>
|
<view class="dca_list_item_value">{{info.problemTitle}}</view>
|
</view>
|
<view class="dca_list_item">
|
<view class="dca_list_item_label">不符合原因</view>
|
<view class="dca_list_item_value">{{info.eventInfo}}</view>
|
</view>
|
<view class="dca_list_item" style="flex-direction: column;">
|
<view class="dca_list_item_label">图片</view>
|
<view class="dca_list_item_tu" v-if="info.multifileList">
|
<view class="dca_list_item_tu_item" v-for="(item, index) in info.multifileList" :key="index" @click="previewImage(item.fileurlFull, info.multifileList.map(item => item.fileurlFull))">
|
<image :src="item.fileurlFull" mode="widthFix"></image>
|
</view>
|
<view class="dca_list_item_tu_zw"></view>
|
<view class="dca_list_item_tu_zw"></view>
|
<view class="dca_list_item_tu_zw"></view>
|
</view>
|
</view>
|
</view>
|
<u-gap height="5" bgColor="#EFEFEF"></u-gap>
|
<view class="dca_process">
|
<view class="dca_process_title">处理流程</view>
|
<view class="dca_process_lc">
|
<view class="lc">
|
<view class="lc_item" v-for="(item, index) in info.logList" :key="index">
|
<view class="lc_item_dian"></view>
|
<view class="lc_item_xian" v-if="info.logList.length === 1 ? false : index !== info.logList.length - 1"></view>
|
<view class="lc_item_title">{{item.title}}</view>
|
<view class="lc_item_info">{{item.companyName}}/{{item.userName}} {{item.createDate}}</view>
|
<view class="lc_item_content" v-if="![0,4].includes(item.objType)">
|
<view class="lc_item_content_item" v-if="[1,2].includes(item.objType)">
|
<view class="lc_item_content_item_label">处理人：</view>
|
<view class="lc_item_content_item_val">
|
<text>{{item.param2}}</text>
|
<view class="lc_item_content_item_val_cui" v-if="item.urgeButton === 1" @click="urge">催促</view>
|
</view>
|
</view>
|
<view class="lc_item_content_item">
|
<view class="lc_item_content_item_label">说明：</view>
|
<view class="lc_item_content_item_val">
|
<text>{{item.content || '暂无'}}</text>
|
</view>
|
</view>
|
<view class="lc_item_content_item">
|
<view class="lc_item_content_item_label">图片：</view>
|
<view class="lc_item_content_item_img" v-if="item.multifileList">
|
<view class="image" v-for="(child, index) in item.multifileList" :key="index" @click="previewImage(child.fileurlFull, item.multifileList.map(item => item.fileurlFull))">
|
<image :src="child.fileurlFull" mode="widthFix"></image>
|
</view>
|
<view class="imagezw"></view>
|
<view class="imagezw"></view>
|
</view>
|
<view class="lc_item_content_item_val" v-else>
|
<text>暂无</text>
|
</view>
|
</view>
|
</view>
|
<view class="lc_item_content" v-else-if="item.objType === 4">
|
<view class="lc_item_content_item">
|
<!-- <view class="lc_item_content_item_label">已催促：</view> -->
|
<view class="lc_item_content_item_val">
|
<text>{{item.content}}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view style="width: 100%; height: calc(84rpx + env(safe-area-inset-bottom));"></view>
|
<view class="footer">
|
<view class="footer_btn" :style="info.passOnButton === 0 ? 'background-color: #3875C5; color: #ffffff;' : ''" @click="openGB" v-if="info.closeButton === 1">问题关闭</view>
|
<view class="footer_btn" style="background-color: #3875C5; color: #ffffff;" @click="openFP" v-if="info.passOnButton === 1">任务分配</view>
|
</view>
|
<!-- 任务分配 -->
|
<u-popup :show="show" :round="10" mode="bottom">
|
<view class="fp">
|
<view class="fp_head">
|
<text @click="closeFP">取消</text>
|
<text @click="allocation">确认分配</text>
|
</view>
|
<view class="fp_box">
|
<u--form labelPosition="left" :model="model" :rules="rules1" ref="uForm">
|
<u-form-item label="处理人" labelWidth="80" prop="passOnUserName" @click="seleUser" required>
|
<u--input v-model="model.passOnUserName" border="none" placeholder="请选择处理人" disabledColor="#ffffff"
|
disabled></u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item label="说明" labelWidth="80" labelPosition="top" prop="info">
|
<u--textarea v-model="model.info" placeholder="请输入说明" style="margin-top: 15rpx;"
|
maxlength="200" count></u--textarea>
|
</u-form-item>
|
<u-form-item label="上传图片" labelWidth="80" prop="multifileList" labelPosition="top">
|
<u-upload
|
:fileList="model.multifileList"
|
@afterRead="afterRead"
|
@delete="deletePic"
|
name="2"
|
multiple
|
style="margin-top: 15rpx;" />
|
</u-form-item>
|
</u--form>
|
</view>
|
</view>
|
</u-popup>
|
<!-- 任务关闭 -->
|
<u-popup :show="show1" :round="10" mode="bottom">
|
<view class="fp">
|
<view class="fp_head">
|
<text @click="closeGB">取消</text>
|
<text @click="closeWorkOrder">确认关闭</text>
|
</view>
|
<view class="fp_box">
|
<u--form labelPosition="left" :model="model" :rules="rules" ref="uForm">
|
<u-form-item label="说明" labelWidth="120" labelPosition="top" prop="info" required>
|
<u--textarea v-model="model.info" placeholder="请输入说明" style="margin-top: 15rpx;"
|
maxlength="200" count></u--textarea>
|
</u-form-item>
|
<u-form-item label="上传图片" labelWidth="120" prop="multifileList" labelPosition="top" required>
|
<u-upload
|
:fileList="model.multifileList"
|
@afterRead="afterRead"
|
@delete="deletePic"
|
name="1"
|
multiple
|
style="margin-top: 15rpx;" />
|
</u-form-item>
|
</u--form>
|
</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
id: null,
|
show: false,
|
show1: false,
|
info: null,
|
model: {
|
name: '',
|
info: '',
|
multifileList: [],
|
passOnUserId: '',
|
passOnUserName: ''
|
},
|
rules: {
|
info: {
|
type: 'string',
|
required: true,
|
message: '说明不能为空',
|
trigger: ['blur', 'change']
|
},
|
multifileList: {
|
type: 'array',
|
min: 1,
|
required: true,
|
message: '图片不能为空',
|
trigger: ['blur', 'change']
|
}
|
},
|
rules1: {
|
passOnUserName: {
|
type: 'string',
|
required: true,
|
message: '处理人不能为空',
|
trigger: ['blur', 'change']
|
}
|
}
|
};
|
},
|
onLoad(option) {
|
this.id = option.id
|
this.getDetails()
|
},
|
methods: {
|
// 工单催促
|
async urge() {
|
let res = await this.$u.api.urge({ workorderId: this.info.id })
|
if (res.code === 200) {
|
uni.showToast({ title: '催促成功', icon: 'none' })
|
this.getDetails()
|
this.show2 = false
|
}
|
},
|
previewImage(current, urls) {
|
uni.previewImage({
|
current,
|
urls
|
});
|
},
|
closeGB() {
|
this.canScroll()
|
this.show1 = false
|
},
|
openGB() {
|
this.stopScroll()
|
this.show1 = true
|
},
|
closeFP() {
|
this.canScroll()
|
this.show = false
|
},
|
openFP() {
|
this.stopScroll()
|
this.show = true
|
},
|
// 选择人员
|
seleUser() {
|
var that = this
|
that.$ww.selectEnterpriseContact({
|
fromDepartmentId: -1,
|
mode: 'single',
|
type: ['user'],
|
}).then(res =>{
|
console.log(res)
|
if (res.errCode === 0) {
|
this.model.passOnUserName = res.result.userList.map(item => item.name).join(',')
|
this.model.passOnUserId = res.result.userList.map(item => item.id).join(',')
|
}
|
})
|
},
|
// 任务分配
|
allocation() {
|
var that = this
|
that.$refs.uForm.validate().then(async () => {
|
let res = await that.$u.api.passOn({
|
info: that.model.info,
|
passOnUserId: that.model.passOnUserId,
|
multifileList: that.model.multifileList,
|
workorderId: that.info.id,
|
passOnType: this.info.status
|
})
|
if (res.code === 200) {
|
uni.showToast({ title: '操作成功', icon: 'none' })
|
that.canScroll()
|
uni.$emit('update')
|
that.show = false
|
that.getDetails()
|
}
|
}).catch(errors => {
|
|
})
|
},
|
returnStatus(status) {
|
if ([3,4,5].includes(status)) {
|
return '已处理'
|
} else {
|
return '待处理'
|
}
|
},
|
// 关闭工单
|
closeWorkOrder() {
|
var that = this
|
that.$refs.uForm.validate().then(async () => {
|
let res = await that.$u.api.closeWorkOrder({
|
info: that.model.info,
|
multifileList: that.model.multifileList,
|
workorderId: that.info.id
|
})
|
if (res.code === 200) {
|
uni.$emit('update')
|
uni.showToast({ title: '操作成功', icon: 'none' })
|
that.canScroll()
|
that.show1 = false
|
that.getDetails()
|
}
|
}).catch(errors => {
|
|
})
|
},
|
// 获取详情
|
async getDetails() {
|
let res = await this.$u.api.detail({ id: this.id })
|
if (res.code === 200) {
|
this.info = res.data
|
}
|
},
|
// 删除图片
|
deletePic(event) {
|
this.model.multifileList.forEach((item, index) => {
|
if (item.imgaddr === event.file.imgaddr) {
|
this.model.multifileList.splice(index, 1)
|
}
|
})
|
},
|
// 新增图片
|
afterRead(event) {
|
var that = this
|
uni.showLoading({ title: '上传中...', mask: true })
|
uni.uploadFile({
|
url: this.$baseUrl + '/web/public/uploadBatch',
|
files: event.file.map(e => {
|
return { name: 'files', uri: e.url }
|
}),
|
formData: {
|
folder: "WORKORDER_LOG_FILE_PATH",
|
},
|
success(res) {
|
uni.hideLoading();
|
let obj = JSON.parse(res.data)
|
if (obj.code === 200) {
|
console.log(obj.data)
|
obj.data.forEach(item => {
|
item.fileurl = item.imgaddr
|
})
|
that.model.multifileList = [...that.model.multifileList, ...obj.data]
|
}
|
}
|
})
|
// uni.uploadFile({
|
// url: this.$baseUrl + '/web/public/upload',
|
// filePath: event.file.url,
|
// name: "file",
|
// formData: {
|
// folder: "WORKORDER_LOG_FILE_PATH"
|
// },
|
// success: (res) => {
|
// let obj = JSON.parse(res.data)
|
// if (obj.code === 200) {
|
// obj.data.fileurl = obj.data.imgaddr
|
// this.model.multifileList.push(obj.data)
|
// }
|
// }
|
// });
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.dca {
|
width: 100%;
|
|
.dca_process {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
|
.dca_process_title {
|
color: rgba(16, 16, 16, 1);
|
font-size: 28rpx;
|
}
|
|
.dca_process_close {
|
width: 100%;
|
height: 84rpx;
|
line-height: 84rpx;
|
text-align: center;
|
color: rgba(255,255,255,1);
|
font-size: 28rpx;
|
background-color: rgba(56,117,197,1);
|
margin-top: 98rpx;
|
}
|
|
.dca_process_lc {
|
width: 100%;
|
margin-top: 30rpx;
|
|
.lc {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.lc_item {
|
width: 100%;
|
padding-left: 70rpx;
|
box-sizing: border-box;
|
position: relative;
|
margin-bottom: 38rpx;
|
|
&:last-child {
|
margin: 0;
|
}
|
|
.lc_item_dian {
|
position: absolute;
|
top: 0;
|
left: 15rpx;
|
width: 20rpx;
|
height: 20rpx;
|
border-radius: 50%;
|
background-color: #3875C5;
|
}
|
|
.lc_item_xian {
|
width: 1rpx;
|
height: calc(100% + 38rpx);
|
position: absolute;
|
left: 25rpx;
|
top: 0;
|
background-color: #3875C5;
|
}
|
|
.lc_item_title {
|
color: rgba(16,16,16,1);
|
font-size: 28rpx;
|
}
|
|
.lc_item_info {
|
color: rgba(16,16,16,1);
|
font-size: 24rpx;
|
margin-top: 22rpx;
|
}
|
|
.lc_item_content {
|
width: 100%;
|
margin-top: 22rpx;
|
padding: 30rpx;
|
border-radius: 8rpx;
|
box-sizing: border-box;
|
background-color: rgba(239,239,239,1);
|
|
.lc_item_content_item {
|
width: 100%;
|
display: flex;
|
align-items: start;
|
margin-bottom: 24rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.lc_item_content_item_label {
|
width: 100rpx;
|
flex-shrink: 0;
|
color: rgba(16,16,16,1);
|
font-size: 24rpx;
|
}
|
.lc_item_content_item_val {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
position: relative;
|
.lc_item_content_item_val_cui {
|
position: absolute;
|
right: 0;
|
top: 0;
|
color: rgba(56,117,197,1);
|
font-size: 24rpx;
|
}
|
text {
|
color: rgba(16,16,16,1);
|
font-size: 24rpx;
|
}
|
}
|
.lc_item_content_item_img {
|
flex: 1;
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
.imagezw {
|
width: 128rpx;
|
height: 0;
|
}
|
.image {
|
width: 128rpx;
|
height: 128rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.fp {
|
width: 100%;
|
|
.fp_head {
|
width: 100%;
|
height: 74rpx;
|
padding: 0 42rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1rpx solid #EFEFEF;
|
|
text {
|
&:nth-child(1) {
|
color: rgba(16, 16, 16, 1);
|
font-size: 28rpx;
|
}
|
|
&:nth-child(2) {
|
color: rgba(56, 117, 197, 1);
|
font-size: 28rpx;
|
}
|
}
|
}
|
|
.fp_box {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
|
}
|
}
|
|
.footer {
|
width: 100%;
|
height: 84rpx;
|
display: flex;
|
align-items: center;
|
box-sizing: border-box;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
border-top: 1rpx solid rgba(239, 239, 239, 1);
|
padding-bottom: env(safe-area-inset-bottom);
|
|
.footer_btn {
|
flex: 1;
|
height: 84rpx;
|
line-height: 84rpx;
|
text-align: center;
|
background-color: #ffffff;
|
color: #222222;
|
font-size: 24rpx;
|
}
|
}
|
|
.dca_head {
|
width: 100%;
|
padding: 32rpx;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
display: flex;
|
flex-direction: column;
|
|
text {
|
&:nth-child(1) {
|
color: rgba(56, 117, 197, 1);
|
font-size: 32rpx;
|
}
|
|
&:nth-child(2) {
|
color: rgba(154, 154, 154, 1);
|
font-size: 24rpx;
|
margin-top: 14rpx;
|
}
|
}
|
}
|
|
.dca_list {
|
width: 100%;
|
|
.dca_list_item {
|
width: 100%;
|
padding: 36rpx 30rpx;
|
box-sizing: border-box;
|
border-bottom: 1rpx solid #EFEFEF;
|
display: flex;
|
|
&:last-child {
|
border: none;
|
}
|
|
.dca_list_item_label {
|
flex-shrink: 0;
|
width: 170rpx;
|
color: rgba(108, 108, 108, 1);
|
font-size: 28rpx;
|
}
|
|
.dca_list_item_value {
|
flex: 1;
|
color: rgba(0, 0, 0, 1);
|
font-size: 28rpx;
|
}
|
|
.dca_list_item_to {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
text {
|
color: rgba(32, 110, 238, 1);
|
font-size: 28rpx;
|
}
|
}
|
|
.dca_list_item_tu {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
margin-top: 30rpx;
|
|
.dca_list_item_tu_item {
|
width: 156rpx;
|
height: 156rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
margin-bottom: 30rpx;
|
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.dca_list_item_tu_zw {
|
width: 156rpx;
|
height: 0;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
