backlogDetail.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355
  1. <template>
  2. <view class="back-content">
  3. <view class="content">
  4. <!-- 轮播图 -->
  5. <swiper v-if="backlogPhotoList.length && status!='loading'" class="top-ad-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="600" :circular="true">
  6. <swiper-item @click="showImg" v-for="(item,index) in backlogPhotoList" :key="index">
  7. <div class="swiper-item uni-bg-red">
  8. <u-image mode="aspectFit" width="750upx" height="400upx" :src="item"></u-image>
  9. </div>
  10. </swiper-item>
  11. </swiper>
  12. <view v-else class="noPic">
  13. 暂无图片
  14. </view>
  15. <view class="back-text">
  16. <!-- 门店 -->
  17. <view class="text-item">
  18. <view class="ellipsis-one">
  19. {{infoData.storeName}}
  20. </view>
  21. <view class="time ">
  22. {{infoData.effectiveEndTime||'--'}} 到期
  23. </view>
  24. </view>
  25. <!-- 创建人 -->
  26. <view class="text-item">
  27. <view>
  28. <text>创建人</text>
  29. <text class="margin-left">{{infoData.putUserName}}</text>
  30. </view>
  31. <view class="time">
  32. {{infoData.createTime}} 创建
  33. </view>
  34. </view>
  35. <!-- 指标 -->
  36. <view class="text-item">
  37. <view>
  38. 考评指标
  39. </view>
  40. <view v-if="infoData.clsName" class="margin-left desc">
  41. {{infoData.clsName}}
  42. </view>
  43. <view v-else class="ygq">
  44. <u-icon name="info-circle"></u-icon>
  45. 未关联问题项
  46. </view>
  47. </view>
  48. <!-- 描述 -->
  49. <view class="text-item">
  50. <view>
  51. 描述
  52. </view>
  53. <view :class="['margin-left desc',infoData.problemDesc?'':'ygq']">
  54. {{infoData.problemDesc?infoData.problemDesc:'暂无'}}
  55. </view>
  56. </view>
  57. </view>
  58. <view class="step-content">
  59. <u-time-line>
  60. <u-time-line-item nodeTop="4" v-for="(item,index) in numList" :key="item.id">
  61. <!-- 此处自定义了左边内容,用一个图标替代 -->
  62. <template v-slot:node>
  63. <view class="u-node" :style="`background: ${index==0?'#19be6b':''};`">
  64. <!-- 此处为uView的icon组件 -->
  65. <u-icon name="checkmark" color="#fff" :size="20"></u-icon>
  66. </view>
  67. </template>
  68. <template v-slot:content>
  69. <view>
  70. <view class="u-order-title">{{item.title}}</view>
  71. <view class="u-order-desc">{{item.desc}}</view>
  72. </view>
  73. </template>
  74. </u-time-line-item>
  75. </u-time-line>
  76. </view>
  77. </view>
  78. <view class="footer">
  79. <!-- receiveFlag 接收人/责任人标记 只有处理人可以整改-->
  80. <!-- 目前版本不做 -->
  81. <!-- <u-button @click="handleSubmit('SOLVE')" v-if="infoData.receiveFlag && infoData.receiveFlag == 1 && infoData.statusDictValue=='待整改'" type="primary">整改完成</u-button> -->
  82. <!-- putFlag 创建人标记 只有创建人可以审核-->
  83. <view v-if="infoData.putFlag && infoData.putFlag == 1 && infoData.statusDictValue=='待审核'" class="check-pending">
  84. <u-button @click="handleSubmit('AUDIT_NO')" class="act-btn" type="error">整改不通过</u-button>
  85. <u-button @click="handleSubmit('AUDIT_YES')" class="act-btn" type="success">整改通过</u-button>
  86. </view>
  87. <!-- copyFlag 抄送标识 只有抄送人可以评论-->
  88. <view v-if="infoData.copyFlag && infoData.copyFlag==1" class="comment-input">
  89. <view class="input-cont">
  90. <textarea auto-height :class="[isFocus?'active':'']" v-model="comment" @focus="isFocus = true" placeholder="请输入评论..."/>
  91. <u-button @click="handleSubmit('COMMENTS')" :disabled="!comment" class="input-btn" v-if="isFocus" size="mini" type="warning">发送</u-button>
  92. </view>
  93. <view>整改状态:<text :class="clsStatus(infoData.statusDictValue)">{{infoData.statusDictValue}}</text></view>
  94. </view>
  95. </view>
  96. </view>
  97. </template>
  98. <script>
  99. import { getBackLogDetail, getBackLogRecord, handleBackLog } from '@/api/backLog.js'
  100. export default {
  101. data() {
  102. return {
  103. status: 'loading',
  104. backlogId: '', // 待办id
  105. infoData:{}, // 详情数据
  106. backlogPhotoList: [], // 图片列表
  107. numList: [],
  108. comment: '', // 评论
  109. isFocus: false // 评论键盘是否弹起
  110. }
  111. },
  112. onLoad(option) {
  113. this.backlogId = option.id
  114. this.getData(option.id)
  115. this.getRecordData(option.id)
  116. },
  117. methods: {
  118. // 图片预览
  119. showImg () {
  120. uni.previewImage({
  121. urls: this.backlogPhotoList
  122. })
  123. },
  124. // 获取详情数据
  125. getData (id) {
  126. this.status = 'loading'
  127. getBackLogDetail({id:id}).then(res=>{
  128. // console.log(res,'rrrrrrrr')
  129. if(res.status==200){
  130. this.infoData = res.data
  131. let arr = []
  132. if (this.infoData.backlogPhotoList) {
  133. this.infoData.backlogPhotoList.map(item=>{
  134. if(item.photoPath) {
  135. arr.push(item.photoPath)
  136. }
  137. })
  138. }
  139. this.backlogPhotoList = arr
  140. } else {
  141. this.toashMsg(res.message)
  142. this.infoData = {}
  143. this.backlogPhotoList = []
  144. }
  145. this.status = 'nomore'
  146. })
  147. },
  148. // 获取进度数据
  149. getRecordData (id) {
  150. getBackLogRecord({id:id}).then(res=>{
  151. if(res.status==200){
  152. let arr = []
  153. res.data.map(item=>{
  154. const p = {id:item.id}
  155. const k = '\xa0\xa0\xa0\xa0\xa0\xa0'
  156. p.title = item.handleTime + k + item.handleTypeDictValue
  157. p.desc = item.handleDesc ? item.handleDesc : ''
  158. arr.push(p)
  159. })
  160. this.numList = arr
  161. } else {
  162. this.toashMsg(res.message)
  163. this.numList = []
  164. }
  165. })
  166. },
  167. // 提交处理
  168. //type: SOLVE("SOLVE", "整改问题"),AUDIT_YES("AUDIT_YES", "审核通过"),AUDIT_NO("AUDIT_NO", "审核不通过"),COMMENTS("COMMENTS", "发表评论");
  169. handleSubmit(type) {
  170. const params = {
  171. id: this.backlogId,
  172. handleDesc: this.comment,
  173. handleType: type
  174. }
  175. handleBackLog(params).then(res=>{
  176. this.toashMsg(res.message)
  177. if(res.status==200){
  178. uni.$emit('refreshBl-handle')
  179. if (type=='COMMENTS') {
  180. this.comment = ''
  181. this.isFocus = false
  182. this.getRecordData(this.backlogId)
  183. } else {
  184. setTimeout(()=>{
  185. uni.navigateBack()
  186. },300)
  187. }
  188. }
  189. })
  190. },
  191. // 状态颜色处理
  192. clsStatus(status){
  193. if(status == '待审核'){
  194. return 'dsh'
  195. }
  196. if(status == '待整改'){
  197. return 'dzg'
  198. }
  199. if(status == '整改完成'){
  200. return 'ywc'
  201. }
  202. if(status == '已过期'){
  203. return 'ygq'
  204. }
  205. }
  206. }
  207. }
  208. </script>
  209. <style lang="scss" >
  210. page{
  211. height: 100%;
  212. }
  213. .back-content {
  214. background-color: #eee;
  215. height: 100%;
  216. display: flex;
  217. flex-direction: column;
  218. .content{
  219. flex: 1;
  220. overflow-y: scroll;
  221. }
  222. // 轮播图
  223. .top-ad-swiper{
  224. height: 340upx;
  225. }
  226. .noPic{
  227. width: 750upx;
  228. height: 400upx;
  229. font-size: 38upx;
  230. text-align: center;
  231. line-height: 400upx;
  232. color: #666;
  233. }
  234. // 详情内容
  235. .back-text{
  236. background: #ffffff;
  237. padding: 10upx 20upx;
  238. margin-bottom: 20upx;
  239. border-radius: 6upx;
  240. box-shadow: 1px 1px 3px #EEEEEE;
  241. .text-item{
  242. display: flex;
  243. padding: 10upx 10upx;
  244. font-size: 28upx;
  245. justify-content: space-between;
  246. .margin-left{
  247. margin-left: 30upx;
  248. }
  249. .time{
  250. color: #888;
  251. font-size: 26upx;
  252. margin-left: 10upx;
  253. }
  254. > view{
  255. &:first-child{
  256. flex: 1;
  257. width: 50%;
  258. display: flex;
  259. > text{
  260. &:last-child{
  261. width: 60%;
  262. }
  263. }
  264. }
  265. }
  266. .desc{
  267. word-break: break-word;
  268. width: 70%;
  269. text-align: right;
  270. }
  271. }
  272. }
  273. // 步骤条
  274. .step-content {
  275. padding: 30upx 40upx;
  276. background-color: #fff;
  277. .u-node {
  278. width: 30rpx;
  279. height: 30rpx;
  280. border-radius: 100rpx;
  281. display: flex;
  282. justify-content: center;
  283. align-items: center;
  284. background: #d0d0d0;
  285. margin-left: 1px;
  286. }
  287. .u-order-title {
  288. color: #333333;
  289. margin-bottom: 10rpx;
  290. }
  291. .u-order-desc {
  292. color: rgb(150, 150, 150);
  293. margin-bottom: 6rpx;
  294. line-height: 40upx;
  295. }
  296. }
  297. // 底部按钮
  298. .footer {
  299. background-color: #fff;
  300. // margin-top: 20upx;
  301. .check-pending{
  302. display: flex;
  303. .act-btn {
  304. width: 50%;
  305. border-radius: 0;
  306. }
  307. }
  308. .comment-input{
  309. width: 100%;
  310. padding: 20upx;
  311. .input-cont{
  312. width: 100%;
  313. background-color: #f4f4f4;
  314. border-radius: 10upx;
  315. display: flex;
  316. justify-content: space-between;
  317. align-items: center;
  318. padding: 0 20upx;
  319. textarea{
  320. padding: 20upx;
  321. height: 100%;
  322. flex: 1;
  323. }
  324. .active{
  325. background-color: #fff;
  326. margin: 20upx 20upx 20upx 0;
  327. }
  328. .input-btn{
  329. padding: 20upx;
  330. height: 60upx;
  331. }
  332. }
  333. view{
  334. margin-top: 20upx;
  335. }
  336. }
  337. .dsh {
  338. color: #ffaa00;
  339. }
  340. .dzg {
  341. color: #ff736e;
  342. }
  343. .ywc {
  344. color: #10c71e;
  345. }
  346. }
  347. .ygq {
  348. color: #999;
  349. }
  350. }
  351. </style>