mission-details.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421
  1. <template>
  2. <view class="mission-details-page">
  3. <scroll-view class="scroll-y" scroll-y="true">
  4. <list-item :isDetails="true" :task="missionDetails" />
  5. <view class="mission-plan">
  6. <view class="label">
  7. <text>改善进度</text>
  8. </view>
  9. <view class="plan-box">
  10. <template v-for="(item, i) in missionDetails.pfmTaskCirculationList || []">
  11. <view class="row" :key="i">
  12. <view class="col">
  13. <image class="plan-icon"
  14. :src="`/static/${i === taskStepLength ? 'check-radio' : 'check-no'}.png`">
  15. </image>
  16. <view class="line" v-show="i != taskStepLength"></view>
  17. </view>
  18. <view class="col">
  19. <view class="title">
  20. <text>{{ getContext(item, false, 'row1') }}</text>
  21. </view>
  22. <view class="sub-box">
  23. <view class="sub-title">
  24. <text>{{ getContext(item, false, 'row2') }}</text>
  25. </view>
  26. <view class="sub-title">
  27. <text>{{ item.recordTime }}</text>
  28. </view>
  29. </view>
  30. <template v-if="getContext(item, true, 'selectDetails')">
  31. <view class="link-view"
  32. v-if="ifShowStepLinkBtn(item,i)"
  33. @click="goToDetails(item, getContext(item, true, 'selectDetails'))">
  34. <text>{{ getContext(item, true, 'selectDetails').name }}</text>
  35. <image class="blue-arr" src="/static/blue-arrow.png"></image>
  36. </view>
  37. </template>
  38. </view>
  39. </view>
  40. <view :class="['btn-group', taskBtn.length === 1 ?'btn-one' : '']" v-if="missionDetails.buttonDisplayFlag == 1
  41. && missionDetails.pfmTaskCirculationList
  42. && i == missionDetails.pfmTaskCirculationList.length - 1">
  43. <template v-for="(btn, i1) in taskBtn">
  44. <tm-button :key="i1"
  45. :type="taskBtn.length === 1 ? 'default' : ( i1 === 0 ? 'pramary' : 'default')"
  46. :btnText="btn.name" @btnClick="clickBtn(item, btn)" />
  47. </template>
  48. </view>
  49. </template>
  50. </view>
  51. </view>
  52. </scroll-view>
  53. <view class="bottomBtn" @click="goBack">{{botBtnText}}</view>
  54. </view>
  55. </template>
  56. <script>
  57. // 改善任务
  58. import {
  59. mapState
  60. } from "vuex";
  61. import listItem from '../mission/components/list-item.vue';
  62. import taskTypeList from './setting.js';
  63. import pdcaSetting from './pdcaSetting.js'
  64. export default {
  65. computed: {
  66. ...mapState({
  67. missionDetails: state => state.mission.missionDetails
  68. }),
  69. // 进度长度
  70. taskStepLength() {
  71. return (this.missionDetails.pfmTaskCirculationList || []).length - 1;
  72. },
  73. // 获取底部按钮
  74. taskBtn() {
  75. const {
  76. buttonDisplayFlag,
  77. pfmTaskCirculationList,
  78. taskType,
  79. checkResult
  80. } = this.missionDetails;
  81. if (buttonDisplayFlag == 1 && pfmTaskCirculationList && pfmTaskCirculationList.length > 0) {
  82. let task = null;
  83. if (taskType == 1 || taskType == 3) { // 状态为1, 和3比较特殊,需要再比较checkResult
  84. task = taskTypeList.find(item => (item.taskType == taskType && item.checkResult == checkResult));
  85. } else {
  86. task = taskTypeList.find(item => item.taskType == taskType);
  87. }
  88. console.log({task});
  89. return task ? task.btnList : []
  90. } else {
  91. return [];
  92. }
  93. }
  94. },
  95. data() {
  96. return {
  97. // 任务id
  98. taskId: '',
  99. botBtnText: '',
  100. // 跳转详情信息
  101. linkTaskDetails: null
  102. }
  103. },
  104. onLoad(option) {
  105. const {
  106. taskId,
  107. pathName
  108. } = option;
  109. this.taskId = taskId;
  110. this.botBtnText = pathName == 'missionDetails' ? '返回改善任务列表' : '返回改善消息列表'
  111. },
  112. created() {
  113. this.getMissionDetails();
  114. },
  115. methods: {
  116. ifShowStepLinkBtn(item,i){
  117. //当为改善回复且已完成且是最后一步时不展示
  118. return !(this.missionDetails.endFlag == true && this.missionDetails.checkResult == 2 && i == (this.missionDetails.pfmTaskCirculationList.length) - 1)
  119. },
  120. goBack() {
  121. //解决page页面栈的重复,同伙返回道该页面
  122. const pages = getCurrentPages();
  123. for(let i = pages.length - 1;i>=0;i--){
  124. if(pages[i].route != pages[pages.length - 1].route){
  125. uni.navigateBack({
  126. delta:(pages.length - 1) - i
  127. });
  128. return;
  129. }
  130. }
  131. },
  132. // 获取改善任务列表
  133. getMissionDetails(data) {
  134. this.$store.dispatch({
  135. type: 'mission/commActions',
  136. payload: {
  137. key: "getMissionDetails",
  138. data: {
  139. taskId: this.taskId
  140. }
  141. }
  142. });
  143. },
  144. // 点击按钮
  145. clickBtn(currentInfo, btnInfo) {
  146. if (btnInfo.componentName) { // 有组件名,则跳转页面
  147. if (btnInfo.componentName === 'pdca') {
  148. const {
  149. taskType,
  150. needApproveFlag
  151. } = this.missionDetails;
  152. // needApproveFlag: true 需要审核(p)只显示p
  153. if (taskType === 8) {
  154. btnInfo = {
  155. ...btnInfo,
  156. ...pdcaSetting['pdcaBtnInfo'],
  157. pDisabled: true // plan内容禁用
  158. };
  159. } else if (taskType === 11) {
  160. btnInfo = {
  161. ...btnInfo,
  162. ...pdcaSetting[needApproveFlag ? 'pdcaBtnInfo' : 'pdcaBtnInfo2'],
  163. pDisabled: needApproveFlag // plan内容是否禁用取决于needApproveFlag
  164. };
  165. } else if (taskType === 13) { // 制定改善方案p中(需要回显暂存过的数据)
  166. btnInfo = {
  167. ...btnInfo,
  168. ...pdcaSetting['editPBtnInfo'],
  169. isEdit: true
  170. };
  171. } else if (taskType === 15) { // 制定改善方案pdca中(需要回显暂存过的数据)
  172. btnInfo = {
  173. ...btnInfo,
  174. ...pdcaSetting['editPdcaBtnInfo'],
  175. isEdit: true,
  176. pDisabled: needApproveFlag
  177. };
  178. } else {
  179. // taskType === 4 || taskType === 6 || taskType === 7 || taskType === 9
  180. btnInfo = {
  181. ...btnInfo,
  182. ...pdcaSetting[needApproveFlag ? 'pBtnInfo' : 'pdcaBtnInfo2']
  183. };
  184. }
  185. }
  186. uni.navigateTo({
  187. url: `/pages/mission-action/mission-action?ifSetImproveEmp=${this.missionDetails.improveEmpId}&details=${encodeURIComponent(JSON.stringify({...currentInfo, ...btnInfo}))}`
  188. });
  189. } else { // 直接调接口
  190. let requestParams = {};
  191. btnInfo.params.map(item => {
  192. if (item.valueKey) {
  193. requestParams[item.paramsKey] = (
  194. item.isOutvalueKey ?
  195. this.missionDetails :
  196. currentInfo
  197. )[item.valueKey];
  198. } else if (item.value) {
  199. requestParams[item.paramsKey] = item.value;
  200. }
  201. })
  202. this.comTaskCirculation(requestParams);
  203. }
  204. },
  205. // 查看详情
  206. goToDetails(currentInfo, detailInfo) {
  207. if (detailInfo.navigateUrl) { // 跳转其他页面(如查核项详情) 目前hasAnyData都为false
  208. const {
  209. navigateUrl,
  210. key,
  211. isOutvalueKey,
  212. hasAnyData
  213. } = detailInfo;
  214. uni.navigateTo({
  215. url: `${detailInfo.navigateUrl}?id=${(isOutvalueKey ? this.missionDetails : currentInfo)[detailInfo.key]}&checkPointId=${this.missionDetails.checkPointId}`
  216. });
  217. } else {
  218. uni.navigateTo({
  219. url: `/pages/mission-action/mission-action?details=${encodeURIComponent(JSON.stringify({...currentInfo, ...detailInfo}))}`
  220. });
  221. }
  222. },
  223. /***
  224. * 解析显示对应的内容
  225. * @param {Object} obj 当前遍历的任务
  226. * @param {Boolean} isLink 是否需要跳转页面(查看详情)
  227. * @param {String} rowKey 任务流程中的key
  228. */
  229. getContext(obj, isLink, rowKey) {
  230. let currentTypeTask = null;
  231. if (obj.taskType == 1) {
  232. const {
  233. checkResult
  234. } = this.missionDetails;
  235. currentTypeTask = taskTypeList.find(item => (item.taskType == obj.taskType && item.checkResult ==
  236. checkResult)) || {};
  237. } else {
  238. currentTypeTask = taskTypeList.find(item => item.taskType == obj.taskType) || {};
  239. }
  240. if (isLink) {
  241. return currentTypeTask[rowKey];
  242. } else {
  243. const {
  244. hasJoin,
  245. name,
  246. key,
  247. isOutvalueKey
  248. } = currentTypeTask[rowKey] || {};
  249. if (hasJoin) { // 需要删除*并替换
  250. return name ? name.replace(/x/g, (isOutvalueKey ? this.missionDetails : obj)[key] || '') : ''
  251. } else {
  252. return name || '';
  253. }
  254. }
  255. },
  256. // 公共改善任务接口
  257. comTaskCirculation(data) {
  258. this.$store.dispatch({
  259. type: 'mission/commActions',
  260. payload: {
  261. key: "comTaskCirculation",
  262. data
  263. }
  264. }).then(data1 => {
  265. if (data1) {
  266. this.getMissionDetails();
  267. }
  268. });
  269. }
  270. },
  271. components: {
  272. listItem
  273. }
  274. }
  275. </script>
  276. <style lang="less">
  277. .mission-details-page {
  278. height: 100%;
  279. padding-top: 15rpx;
  280. .bottomBtn {
  281. position: fixed;
  282. bottom: 0;
  283. width: 100%;
  284. height: 75rpx;
  285. line-height: 75rpx;
  286. text-align: center;
  287. font-size: 22.5rpx;
  288. font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  289. font-weight: 400;
  290. color: #FFFFFF;
  291. background: #3377FF;
  292. }
  293. .scroll-y {
  294. height: 100%;
  295. padding-bottom: 87.5rpx;
  296. .mission-plan {
  297. .label {
  298. margin-top: 25rpx;
  299. margin-bottom: 15rpx;
  300. height: 20rpx;
  301. line-height: 20rpx;
  302. padding-left: 25rpx;
  303. text {
  304. font-size: 20rpx;
  305. color: #666F80;
  306. }
  307. }
  308. .plan-box {
  309. padding: 25rpx;
  310. background-color: #fff;
  311. .row {
  312. display: flex;
  313. .col {
  314. .title {
  315. display: flex;
  316. align-items: center;
  317. margin-bottom: 15rpx;
  318. height: 25rpx;
  319. >text {
  320. font-size: 22.5rpx;
  321. color: #292C33;
  322. }
  323. }
  324. .sub-box {
  325. display: flex;
  326. flex-direction: column;
  327. .sub-title {
  328. display: flex;
  329. align-items: center;
  330. margin-bottom: 15rpx;
  331. height: 20rpx;
  332. &:last-child {
  333. margin-bottom: 34.37rpx;
  334. }
  335. >text {
  336. font-size: 20rpx;
  337. color: #666E80;
  338. }
  339. }
  340. }
  341. &:first-child {
  342. display: flex;
  343. flex-direction: column;
  344. align-items: center;
  345. margin-right: 15rpx;
  346. width: 25rpx;
  347. .plan-icon {
  348. margin-bottom: 17.5rpx;
  349. width: 25rpx;
  350. height: 25rpx;
  351. }
  352. .line {
  353. width: 5rpx;
  354. height: 75rpx;
  355. background-color: #E6EAF2;
  356. }
  357. }
  358. &:last-child {
  359. position: relative;
  360. flex: 1;
  361. .link-view {
  362. position: absolute;
  363. top: 0;
  364. right: 0;
  365. >text {
  366. font-size: 17.5rpx;
  367. color: #3377FF;
  368. }
  369. .blue-arr {
  370. margin-left: 10rpx;
  371. width: 8.12rpx;
  372. height: 15.62rpx;
  373. }
  374. }
  375. }
  376. }
  377. }
  378. .btn-group {
  379. display: flex;
  380. justify-content: space-between;
  381. padding: 0 25rpx;
  382. }
  383. .btn-one {
  384. justify-content: center;
  385. }
  386. }
  387. }
  388. }
  389. }
  390. </style>