You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
480 lines
12 KiB
480 lines
12 KiB
<template> |
|
<scroll-view class="view-container" scroll-y> |
|
<view class="box detail" style="margin-bottom: 12px"> |
|
<text class="wd-font-800 wd-text-16" style="margin-bottom: 4px"> |
|
{{ detail.title }} |
|
</text> |
|
<view class="tagList"> |
|
<view class="tag" v-if="detail.priority"> |
|
{{ $dict.echoDicValue(dictMap.task_priority, detail.priority) }} |
|
</view> |
|
<view |
|
v-for="(tag, index) in detail.tagList" |
|
:key="index" |
|
class="tag" |
|
> |
|
{{ tag }} |
|
</view> |
|
</view> |
|
<view |
|
class="wd-flex wd-text-13" |
|
style="justify-content: space-between" |
|
> |
|
<view class="wd-flex" style="align-items: center; gap: 4px"> |
|
<u-icon name="calendar" color="#17C653" /> |
|
<text class="wd-text-13 wd-ml-4px wd-font-800"> |
|
{{ |
|
`${$util.formatDate( |
|
detail.startDate, |
|
'YYYY/M/D' |
|
)} 至 ${$util.formatDate(detail.endDate, 'YYYY/M/D')}` |
|
}} |
|
</text> |
|
</view> |
|
</view> |
|
<view |
|
style=" |
|
font-size: 13px; |
|
line-height: 160%; |
|
position: relative; |
|
transform: 0.2s all; |
|
" |
|
v-if="detail.description.length < 20" |
|
> |
|
{{ detail.description }} |
|
</view> |
|
<view |
|
v-else |
|
style=" |
|
font-size: 13px; |
|
line-height: 160%; |
|
position: relative; |
|
transform: 0.2s all; |
|
" |
|
@tap="isShowAllText = !isShowAllText" |
|
> |
|
{{ |
|
isShowAllText |
|
? detail.description |
|
: `${detail.description.slice(1, 20)}...` |
|
}} |
|
<text style="color: #17c653; padding-left: 4px"> |
|
{{ isShowAllText ? '收起' : '展开' }} |
|
</text> |
|
</view> |
|
|
|
<view |
|
class="wd-flex wd-items-center enterprise" |
|
@tap="goEnterprise(detail.enterprise)" |
|
> |
|
<u-avatar |
|
:src="detail.enterprise.files[0].url" |
|
shape="square" |
|
size="64" |
|
></u-avatar> |
|
<view class="wd-flex wd-flex-col" style="gap: 4px"> |
|
<text class="wd-font-800 wd-text-15"> |
|
{{ detail.enterprise.enterprisesName }} |
|
</text> |
|
<view |
|
class="wd-flex wd-pb-8px" |
|
@tap.native.stop="viewPosition(detail.enterprise)" |
|
> |
|
<u-icon name="map" size="14" color="#17C653"></u-icon> |
|
<text class="address wd-text-12" style="margin-left: 4px"> |
|
{{ detail.enterprise.address }} |
|
</text> |
|
</view> |
|
<view class="tagList"> |
|
<view class="tag" v-if="detail.enterprise.region"> |
|
{{ |
|
$dict.echoDicValue( |
|
dictMap.enterprises_area, |
|
detail.enterprise.region |
|
) |
|
}} |
|
</view> |
|
<view class="tag" v-if="detail.enterprise.type"> |
|
{{ |
|
$dict.echoDicValue( |
|
dictMap.enterprises_type, |
|
detail.enterprise.type |
|
) |
|
}} |
|
</view> |
|
<view |
|
class="tag" |
|
v-for="(tag, index) in detail.enterprise.tagList" |
|
:key="index" |
|
> |
|
{{ tag }} |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="audit"> |
|
<cs-dict-tag |
|
:dict="dictMap.task_state" |
|
:value="detail.status" |
|
></cs-dict-tag> |
|
</view> |
|
</view> |
|
|
|
<view class="box record"> |
|
<view class="wd-text-14 wd-font-800">结果反馈</view> |
|
<view |
|
class="row log" |
|
v-for="item in list" |
|
:key="item.id" |
|
@tap="goLog(item)" |
|
> |
|
<view style="margin-bottom: 12px"> |
|
<text |
|
:style="{ |
|
marginRight: '10px', |
|
fontWeight: 'bold', |
|
color: $dict.echoDictOption( |
|
dictMap.inspections_mark, |
|
item.status |
|
).remark |
|
}" |
|
> |
|
{{ $dict.echoDicValue(dictMap.inspections_mark, item.status) }} |
|
</text> |
|
<text> |
|
{{ $util.formatDate(item.createTime, 'YYYY/M/D h:m') }} |
|
</text> |
|
</view> |
|
<scroll-view |
|
scroll-x="true" |
|
style="flex-flow: row nowrap; white-space: nowrap" |
|
> |
|
<view |
|
class="row" |
|
v-for="people in item.userList" |
|
:key="people.userId" |
|
style="display: inline-flex; gap: 12px; margin-right: 12px" |
|
> |
|
<u-avatar |
|
:src="people.avtar" |
|
size="40px" |
|
shape="circle" |
|
></u-avatar> |
|
<view class="wd-flex wd-flex-col" style="gap: 2px"> |
|
<text>{{ people.realName }}</text> |
|
<text>{{ people.deptName }}</text> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
</view> |
|
<view class="emty" v-if="list.length == 0"> |
|
<image |
|
class="image" |
|
src="/static/images/emty.png" |
|
mode="aspectFill" |
|
></image> |
|
<text class="wd-text-14" style="color: #99a1b7">暂无处理结果</text> |
|
</view> |
|
<view class="audit"> |
|
<cs-dict-tag |
|
:dict="dictMap.Inspections_status" |
|
:value="inspectionsState" |
|
color="#fff" |
|
:bgColor="setColor(inspectionsState)" |
|
></cs-dict-tag> |
|
</view> |
|
</view> |
|
|
|
<cs-bottom-wrapper> |
|
<view |
|
class="operation" |
|
v-if="[null, 0, 3].includes(inspectionsState)" |
|
> |
|
<view class="btn green" @tap="locate">执法签到</view> |
|
</view> |
|
<view class="operation" v-else-if="inspectionsState == 1"> |
|
<view class="btn red" @tap="tackle(3)">整改处理</view> |
|
<view class="btn green" @tap="tackle(2)">审批通过</view> |
|
</view> |
|
<view class="operation" v-else> |
|
<view class="btn grey">任务完成</view> |
|
</view> |
|
</cs-bottom-wrapper> |
|
</scroll-view> |
|
</template> |
|
|
|
<script> |
|
import { getDeptTree, getDictBatchByType } from '@/api/system/dict.js' |
|
import { TaskApi } from '@/api/task/index.js' |
|
import { getEnterPrise } from '@/api/enterprise/index.js' |
|
import { InspectionsApi } from '../../api/inspections' |
|
export default { |
|
data() { |
|
return { |
|
dictMap: {}, |
|
// 任务详情 |
|
detail: { |
|
id: '', |
|
description: '', |
|
priority: '', |
|
enterprise: { |
|
region: '', |
|
type: '' |
|
} |
|
}, |
|
// 是否展开文本 |
|
isShowAllText: false, |
|
// 查询条件 |
|
queryParams: { |
|
taskId: '', |
|
recordId: '', |
|
enterpriseId: '' |
|
}, |
|
list: [], |
|
inspectionsState: null |
|
} |
|
}, |
|
onLoad(res) { |
|
this.queryParams.taskId = res.taskId |
|
this.queryParams.recordId = res.recordId |
|
this.queryParams.enterpriseId = res.enterpriseId |
|
this.getDict() |
|
this.init() |
|
}, |
|
onShow() { |
|
this.init() |
|
}, |
|
methods: { |
|
/** |
|
* 获取字典 |
|
*/ |
|
async getDict() { |
|
const dict = await getDictBatchByType({ |
|
type: [ |
|
'Inspections_status', |
|
'task_state', |
|
'inspections_mark', |
|
'enterprises_type', |
|
'enterprises_area', |
|
'task_priority' |
|
].join(',') |
|
}) |
|
const dept = await getDeptTree() |
|
this.dictMap = { |
|
...dict.data, |
|
dept: dept.data |
|
} |
|
}, |
|
async init() { |
|
const res = await TaskApi.getDetail(this.queryParams.taskId) |
|
const enterprise = await getEnterPrise(this.queryParams.enterpriseId) |
|
this.detail = { |
|
...res.data, |
|
enterprise: enterprise.data |
|
} |
|
const feedBack = await InspectionsApi.getFeedBack( |
|
this.queryParams.recordId |
|
) |
|
this.list = feedBack.data |
|
this.inspectionsState = |
|
this.list[this.list.length - 1]?.status || null |
|
}, |
|
goEnterprise(enterprise) { |
|
uni.navigateTo({ |
|
url: `/sub/enterprise/detail?id=${enterprise.id}` |
|
}) |
|
}, |
|
viewPosition(enterprise) { |
|
const position = enterprise.gpsLocation |
|
.split(',') |
|
.map(i => Number(i)) |
|
this.$util.viewPosition({ |
|
lat: position[0], |
|
lng: position[1], |
|
name: enterprise.address |
|
}) |
|
}, |
|
locate() { |
|
uni.navigateTo({ |
|
url: `/sub/task/locate?inspectionsId=${this.queryParams.recordId}&enterpriseId=${this.queryParams.enterpriseId}` |
|
}) |
|
}, |
|
setColor(status) { |
|
const colorMap = { |
|
1: '#F6B100', |
|
2: '#17C653', |
|
3: '#F8285A' |
|
} |
|
return colorMap[status] |
|
}, |
|
tackle(state) { |
|
uni.navigateTo({ |
|
url: `/sub/task/enforce?state=${state}&inspectionsId=${this.queryParams.recordId}` |
|
}) |
|
}, |
|
goLog(record) { |
|
if ([2, 3].includes(record.status)) { |
|
uni.navigateTo({ |
|
url: `/sub/task/log?id=${record.id}` |
|
}) |
|
} |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.view-container { |
|
padding: 0 12px; |
|
position: relative; |
|
padding-bottom: 100px; |
|
.box { |
|
background-color: #fff; |
|
border-radius: $cs-border-radius; |
|
padding: 16px; |
|
margin-top: 12px; |
|
} |
|
.row { |
|
border-radius: $cs-border-radius; |
|
padding: 12px; |
|
border: 1px solid #f9f9f9; |
|
} |
|
.detail { |
|
display: flex; |
|
flex-flow: column nowrap; |
|
gap: 12px; |
|
position: relative; |
|
overflow: hidden; |
|
.tagList { |
|
display: flex; |
|
align-items: center; |
|
gap: var(--Number-4px, 4px); |
|
.tag { |
|
display: flex; |
|
padding: var(--Number-2px, 2px) var(--Number-6px, 6px); |
|
justify-content: center; |
|
align-items: center; |
|
gap: var(--Number-4px, 4px); |
|
border-radius: var(--Number-2px, 2px); |
|
background: var(--LightMode-Grey-Grey-100, #f9f9f9); |
|
color: var(--LightMode-Grey-Grey-600, #78829d); |
|
text-align: center; |
|
font-size: 12px; |
|
font-style: normal; |
|
font-weight: 400; |
|
line-height: normal; |
|
} |
|
} |
|
.enterprise { |
|
border: 1px solid #f9f9f9; |
|
padding: 12px; |
|
border-radius: $cs-border-radius; |
|
gap: 12px; |
|
position: relative; |
|
overflow: hidden; |
|
font-size: 12px; |
|
.address { |
|
color: $uni-text-color-grey; |
|
text-decoration: underline; |
|
} |
|
&:active { |
|
background-color: $cs-color-touch; |
|
} |
|
.tagList { |
|
margin-top: 8px; |
|
display: flex; |
|
gap: 4px; |
|
color: $uni-text-color-grey; |
|
display: flex; |
|
.tag { |
|
font-size: 12px; |
|
display: flex; |
|
padding: 2px 6px; |
|
justify-content: center; |
|
align-items: center; |
|
border-radius: 2px; |
|
background: #f9f9f9; |
|
} |
|
} |
|
.audit { |
|
position: absolute; |
|
right: -19px; |
|
top: 6px; |
|
transform: rotateZ(45deg); |
|
transform-origin: 50% 50%; |
|
padding: 4px 20px; |
|
font-size: 12px; |
|
text-align: center; |
|
} |
|
} |
|
.audit { |
|
position: absolute; |
|
right: 0; |
|
top: 0; |
|
transform: translateX(23px) translateY(16px) rotateZ(45deg); |
|
transform-origin: 50% 50%; |
|
} |
|
} |
|
|
|
.record { |
|
position: relative; |
|
overflow: hidden; |
|
display: flex; |
|
flex-flow: column nowrap; |
|
gap: 12px; |
|
.emty { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
gap: 12px; |
|
border-radius: var(--Number-8px, 8px); |
|
border: 1px solid var(--LightMode-Grey-Grey-100, #f9f9f9); |
|
padding: 24px 12px; |
|
border-radius: 8px; |
|
.image { |
|
width: 64px; |
|
height: 64px; |
|
} |
|
} |
|
.audit { |
|
position: absolute; |
|
right: 0; |
|
top: 0; |
|
transform: translateX(30px) translateY(8px) rotateZ(45deg); |
|
transform-origin: 50% 50%; |
|
} |
|
} |
|
.log { |
|
&:active { |
|
background-color: $cs-color-touch; |
|
} |
|
} |
|
.operation { |
|
padding: 12px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
gap: 12px; |
|
.btn { |
|
flex: 1; |
|
border-radius: 8px; |
|
display: flex; |
|
padding: 12px 0; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
.green { |
|
background-color: $cs-color-main; |
|
color: #fff; |
|
} |
|
.red { |
|
background-color: #f8285a; |
|
color: #fff; |
|
} |
|
.grey { |
|
background-color: #f1f1f4; |
|
color: #99a1b7; |
|
} |
|
} |
|
} |
|
</style>
|
|
|