<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="padding-right: 100rpx" > {{ 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: 8rpx" > <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> <cs-text-more :value="detail.description" ></cs-text-more> <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="overflow: hidden" > <text class="wd-font-800 wd-text-15"> {{ detail.enterprise.enterprisesName }} </text> <view class="wd-flex" style="margin-top: 4rpx" > <u-icon name="map" size="28rpx" color="#17C653" ></u-icon> <text class="address wd-text-12" style="margin-left: 8rpx" > {{ `${$dict.echoDicValue( dictMap.enterprises_area, detail.enterprise.region )} | ${detail.enterprise.address}` }} </text> </view> <view class="tagList" style="margin-top: 16rpx" > <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: 24rpx"> <text :style="{ marginRight: '20rpx', fontWeight: 'bold', color: $dict.echoDictOption( dictMap.Inspections_status, item.status ).remark, }" > {{ $dict.echoDicValue( dictMap.Inspections_status, 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: 24rpx; margin-right: 24rpx; " > <u-avatar :src="people.avtar" size="80rpx" shape="circle" ></u-avatar> <view class="wd-flex wd-flex-col" style="gap: 4rpx" > <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_mark" :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.enterprisesName, address: 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 24rpx; position: relative; padding-bottom: 200rpx; .box { background-color: #fff; border-radius: $cs-border-radius; padding: 32rpx; margin-top: 24rpx; } .row { border-radius: $cs-border-radius; padding: 24rpx; border: 2rpx solid #f9f9f9; } .detail { display: flex; flex-flow: column nowrap; gap: 24rpx; position: relative; overflow: hidden; .enterprise { border: 2rpx solid #f9f9f9; padding: 24rpx; border-radius: $cs-border-radius; gap: 24rpx; position: relative; overflow: hidden; font-size: 24rpx; .address { color: $uni-text-color-grey; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } &:active { background-color: $cs-color-touch; } } .audit { position: absolute; right: 0; top: 0; transform: translateX(36rpx) translateY(32rpx) rotateZ(45deg); transform-origin: 50% 50%; } } .record { position: relative; overflow: hidden; display: flex; flex-flow: column nowrap; gap: 24rpx; .emty { display: flex; flex-direction: column; align-items: center; gap: 24rpx; border-radius: 16rpx; border: 2rpx solid var(--LightMode-Grey-Grey-100, #f9f9f9); padding: 48rpx 24rpx; border-radius: 16rpx; .image { width: 128rpx; height: 128rpx; } } .audit { position: absolute; right: 0; top: 0; transform: translateX(68rpx) translateY(19rpx) rotateZ(45deg); transform-origin: 50% 50%; } } .log { &:active { background-color: $cs-color-touch; } } .operation { padding: 24rpx; display: flex; align-items: center; justify-content: center; gap: 24rpx; .btn { flex: 1; border-radius: 16rpx; display: flex; padding: 24rpx 0; align-items: center; justify-content: center; font-weight: bold; } .green { background-color: $cs-color-main; color: #fff; } .red { background-color: #f8285a; color: #fff; } .grey { background-color: #f1f1f4; color: #99a1b7; } } } </style>