123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355 |
- <template>
- <view class="back-content">
- <view class="content">
- <!-- 轮播图 -->
- <swiper v-if="backlogPhotoList.length && status!='loading'" class="top-ad-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="600" :circular="true">
- <swiper-item @click="showImg" v-for="(item,index) in backlogPhotoList" :key="index">
- <div class="swiper-item uni-bg-red">
- <u-image mode="aspectFit" width="750upx" height="400upx" :src="item"></u-image>
- </div>
- </swiper-item>
- </swiper>
- <view v-else class="noPic">
- 暂无图片
- </view>
- <view class="back-text">
- <!-- 门店 -->
- <view class="text-item">
- <view class="ellipsis-one">
- {{infoData.storeName}}
- </view>
- <view class="time ">
- {{infoData.effectiveEndTime||'--'}} 到期
- </view>
- </view>
- <!-- 创建人 -->
- <view class="text-item">
- <view>
- <text>创建人</text>
- <text class="margin-left">{{infoData.putUserName}}</text>
- </view>
- <view class="time">
- {{infoData.createTime}} 创建
- </view>
- </view>
- <!-- 指标 -->
- <view class="text-item">
- <view>
- 考评指标
- </view>
- <view v-if="infoData.clsName" class="margin-left desc">
- {{infoData.clsName}}
- </view>
- <view v-else class="ygq">
- <u-icon name="info-circle"></u-icon>
- 未关联问题项
- </view>
- </view>
- <!-- 描述 -->
- <view class="text-item">
- <view>
- 描述
- </view>
- <view :class="['margin-left desc',infoData.problemDesc?'':'ygq']">
- {{infoData.problemDesc?infoData.problemDesc:'暂无'}}
- </view>
- </view>
- </view>
- <view class="step-content">
- <u-time-line>
- <u-time-line-item nodeTop="4" v-for="(item,index) in numList" :key="item.id">
- <!-- 此处自定义了左边内容,用一个图标替代 -->
- <template v-slot:node>
- <view class="u-node" :style="`background: ${index==0?'#19be6b':''};`">
- <!-- 此处为uView的icon组件 -->
- <u-icon name="checkmark" color="#fff" :size="20"></u-icon>
- </view>
- </template>
- <template v-slot:content>
- <view>
- <view class="u-order-title">{{item.title}}</view>
- <view class="u-order-desc">{{item.desc}}</view>
- </view>
- </template>
- </u-time-line-item>
- </u-time-line>
- </view>
- </view>
- <view class="footer">
- <!-- receiveFlag 接收人/责任人标记 只有处理人可以整改-->
- <!-- 目前版本不做 -->
- <!-- <u-button @click="handleSubmit('SOLVE')" v-if="infoData.receiveFlag && infoData.receiveFlag == 1 && infoData.statusDictValue=='待整改'" type="primary">整改完成</u-button> -->
- <!-- putFlag 创建人标记 只有创建人可以审核-->
- <view v-if="infoData.putFlag && infoData.putFlag == 1 && infoData.statusDictValue=='待审核'" class="check-pending">
- <u-button @click="handleSubmit('AUDIT_NO')" class="act-btn" type="error">整改不通过</u-button>
- <u-button @click="handleSubmit('AUDIT_YES')" class="act-btn" type="success">整改通过</u-button>
- </view>
- <!-- copyFlag 抄送标识 只有抄送人可以评论-->
- <view v-if="infoData.copyFlag && infoData.copyFlag==1" class="comment-input">
- <view class="input-cont">
- <textarea auto-height :class="[isFocus?'active':'']" v-model="comment" @focus="isFocus = true" placeholder="请输入评论..."/>
- <u-button @click="handleSubmit('COMMENTS')" :disabled="!comment" class="input-btn" v-if="isFocus" size="mini" type="warning">发送</u-button>
- </view>
- <view>整改状态:<text :class="clsStatus(infoData.statusDictValue)">{{infoData.statusDictValue}}</text></view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import { getBackLogDetail, getBackLogRecord, handleBackLog } from '@/api/backLog.js'
- export default {
- data() {
- return {
- status: 'loading',
- backlogId: '', // 待办id
- infoData:{}, // 详情数据
- backlogPhotoList: [], // 图片列表
- numList: [],
- comment: '', // 评论
- isFocus: false // 评论键盘是否弹起
- }
- },
- onLoad(option) {
- this.backlogId = option.id
- this.getData(option.id)
- this.getRecordData(option.id)
- },
- methods: {
- // 图片预览
- showImg () {
- uni.previewImage({
- urls: this.backlogPhotoList
- })
- },
- // 获取详情数据
- getData (id) {
- this.status = 'loading'
- getBackLogDetail({id:id}).then(res=>{
- // console.log(res,'rrrrrrrr')
- if(res.status==200){
- this.infoData = res.data
- let arr = []
- if (this.infoData.backlogPhotoList) {
- this.infoData.backlogPhotoList.map(item=>{
- if(item.photoPath) {
- arr.push(item.photoPath)
- }
- })
- }
- this.backlogPhotoList = arr
- } else {
- this.toashMsg(res.message)
- this.infoData = {}
- this.backlogPhotoList = []
- }
- this.status = 'nomore'
- })
- },
- // 获取进度数据
- getRecordData (id) {
- getBackLogRecord({id:id}).then(res=>{
- if(res.status==200){
- let arr = []
- res.data.map(item=>{
- const p = {id:item.id}
- const k = '\xa0\xa0\xa0\xa0\xa0\xa0'
- p.title = item.handleTime + k + item.handleTypeDictValue
- p.desc = item.handleDesc ? item.handleDesc : ''
- arr.push(p)
- })
- this.numList = arr
- } else {
- this.toashMsg(res.message)
- this.numList = []
- }
- })
- },
- // 提交处理
- //type: SOLVE("SOLVE", "整改问题"),AUDIT_YES("AUDIT_YES", "审核通过"),AUDIT_NO("AUDIT_NO", "审核不通过"),COMMENTS("COMMENTS", "发表评论");
- handleSubmit(type) {
- const params = {
- id: this.backlogId,
- handleDesc: this.comment,
- handleType: type
- }
- handleBackLog(params).then(res=>{
- this.toashMsg(res.message)
- if(res.status==200){
- uni.$emit('refreshBl-handle')
- if (type=='COMMENTS') {
- this.comment = ''
- this.isFocus = false
- this.getRecordData(this.backlogId)
- } else {
- setTimeout(()=>{
- uni.navigateBack()
- },300)
- }
- }
- })
- },
- // 状态颜色处理
- clsStatus(status){
- if(status == '待审核'){
- return 'dsh'
- }
- if(status == '待整改'){
- return 'dzg'
- }
- if(status == '整改完成'){
- return 'ywc'
- }
- if(status == '已过期'){
- return 'ygq'
- }
- }
- }
- }
- </script>
- <style lang="scss" >
- page{
- height: 100%;
- }
- .back-content {
- background-color: #eee;
- height: 100%;
- display: flex;
- flex-direction: column;
- .content{
- flex: 1;
- overflow-y: scroll;
- }
- // 轮播图
- .top-ad-swiper{
- height: 340upx;
- }
- .noPic{
- width: 750upx;
- height: 400upx;
- font-size: 38upx;
- text-align: center;
- line-height: 400upx;
- color: #666;
- }
- // 详情内容
- .back-text{
- background: #ffffff;
- padding: 10upx 20upx;
- margin-bottom: 20upx;
- border-radius: 6upx;
- box-shadow: 1px 1px 3px #EEEEEE;
- .text-item{
- display: flex;
- padding: 10upx 10upx;
- font-size: 28upx;
- justify-content: space-between;
- .margin-left{
- margin-left: 30upx;
- }
- .time{
- color: #888;
- font-size: 26upx;
- margin-left: 10upx;
- }
- > view{
- &:first-child{
- flex: 1;
- width: 50%;
- display: flex;
- > text{
- &:last-child{
- width: 60%;
- }
- }
- }
- }
- .desc{
- word-break: break-word;
- width: 70%;
- text-align: right;
- }
- }
- }
- // 步骤条
- .step-content {
- padding: 30upx 40upx;
- background-color: #fff;
- .u-node {
- width: 30rpx;
- height: 30rpx;
- border-radius: 100rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- background: #d0d0d0;
- margin-left: 1px;
- }
- .u-order-title {
- color: #333333;
- margin-bottom: 10rpx;
- }
- .u-order-desc {
- color: rgb(150, 150, 150);
- margin-bottom: 6rpx;
- line-height: 40upx;
- }
- }
-
- // 底部按钮
- .footer {
- background-color: #fff;
- // margin-top: 20upx;
- .check-pending{
- display: flex;
- .act-btn {
- width: 50%;
- border-radius: 0;
- }
- }
- .comment-input{
- width: 100%;
- padding: 20upx;
- .input-cont{
- width: 100%;
- background-color: #f4f4f4;
- border-radius: 10upx;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 20upx;
- textarea{
- padding: 20upx;
- height: 100%;
- flex: 1;
- }
- .active{
- background-color: #fff;
- margin: 20upx 20upx 20upx 0;
- }
- .input-btn{
- padding: 20upx;
- height: 60upx;
- }
- }
- view{
- margin-top: 20upx;
- }
- }
- .dsh {
- color: #ffaa00;
- }
-
- .dzg {
- color: #ff736e;
- }
- .ywc {
- color: #10c71e;
- }
- }
- .ygq {
- color: #999;
- }
- }
- </style>
|