closed.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561
  1. <template>
  2. <div class="closed">
  3. <div class="conentBox">
  4. <div class="header">处理方案</div>
  5. <div v-if="model.incident" class="conent">
  6. <div class="navBar">
  7. <div class="fl">
  8. <a
  9. :class="{ active: actives == 'info' }"
  10. href="javascript:;"
  11. @click="toInfo('info')"
  12. >事件信息</a
  13. >
  14. </div>
  15. <div class="fl">
  16. <a
  17. :class="{ active: actives == 'handlerInfo' }"
  18. href="javascript:;"
  19. @click="toInfo('handlerInfo')"
  20. >处理信息</a
  21. >
  22. </div>
  23. <div class="fl">
  24. <a
  25. :class="{ active: actives == 'closeInfo' }"
  26. href="javascript:;"
  27. @click="toInfo('closeInfo')"
  28. >关单信息</a
  29. >
  30. </div>
  31. <div class="fl">
  32. <a
  33. :class="{ active: actives == 'progress' }"
  34. href="javascript:;"
  35. @click="toInfo('progress')"
  36. >处理进度</a
  37. >
  38. </div>
  39. </div>
  40. <div class="label headtop" id="info">事件信息</div>
  41. <div class="info">
  42. <EventInformation :model="model" :id="id"></EventInformation>
  43. <p class="info_hide">
  44. <span class="fl hide" @click="hides()" v-if="!item_hides"
  45. >展开详情 >></span
  46. >
  47. <span class="fl hide" @click="hides()" v-if="item_hides"
  48. >隐藏详情<<</span
  49. >
  50. </p>
  51. <ShowPicture :processInstanceId="processInstanceId" :wxIncidentId="wxIncidentId"></ShowPicture>
  52. <div class="label" id="handlerInfo">处理信息</div>
  53. <!-- <p>
  54. <span class="fl">升级对象</span>
  55. <span class="fr">{{model.isupreason?model.handlerUser.name:''}}</span>
  56. </p>
  57. <p>
  58. <span class="fl">升级原因</span>
  59. <span class="fr">{{model.isupreason?model.isupreason:''}}</span>
  60. </p> -->
  61. <p>
  62. <span class="fl">处理方式</span>
  63. <span class="fr showwrap">{{
  64. model.incident.handleCategory
  65. ? model.incident.handleCategory.name
  66. : ""
  67. }}</span>
  68. </p>
  69. <div class="shows1" id="shows1">
  70. <p>
  71. <span class="fl">确认故障现象</span>
  72. <span class="fr">{{ model.incident.category.category }}</span>
  73. </p>
  74. <p>
  75. <span class="fl">关闭代码</span>
  76. <span class="fr">{{
  77. model.incident.closecode ? model.incident.closecode.name : ""
  78. }}</span>
  79. </p>
  80. <p class="desc">
  81. <span class="fl">处理方案</span>
  82. <span
  83. class="fr grayFont"
  84. v-html="model.incident.handleDescription"
  85. ></span>
  86. </p>
  87. </div>
  88. <p class="info_hide">
  89. <span class="fl hide" @click="hides1()" v-if="!item_hides1"
  90. >展开详情 >></span
  91. >
  92. <span class="fl hide" @click="hides1()" v-if="item_hides1"
  93. >隐藏详情<<</span
  94. >
  95. </p>
  96. <div class="label" id="closeInfo">关单信息</div>
  97. <p>
  98. <span class="fl">是否已解决</span>
  99. <span class="fr">{{
  100. model.isclose == "close" ? "已解决" : "未解决"
  101. }}</span>
  102. </p>
  103. <p>
  104. <span class="fl">结果类型</span>
  105. <span class="fr">{{
  106. model.incident.handleResult
  107. ? model.incident.handleResult.name
  108. : ""
  109. }}</span>
  110. </p>
  111. <p>
  112. <span class="fl">满意度评价</span>
  113. <span class="fr">{{
  114. model.incident.degree ? model.incident.degree.name : ""
  115. }}</span>
  116. </p>
  117. <p>
  118. <span class="fl">回访备注</span>
  119. <span class="fr">{{ model.incident.visitRemarks || "" }}</span>
  120. </p>
  121. <div class="label" id="progress">处理进度</div>
  122. <div
  123. :class="{ progress: true, progressHide: !pro_hides }"
  124. id="progressBox"
  125. >
  126. <div class="progress_info" v-for="item in progressInfo">
  127. <div class="progress_info_L">{{ item.activityName }}</div>
  128. <div class="progress_info_R">
  129. <div class="time">
  130. <i
  131. :class="{
  132. iconfont: true,
  133. 'icon-icon_weizuo': item.endTime != '',
  134. 'icon-icon_zhengzaijinx': item.endTime == '',
  135. }"
  136. ></i>
  137. <span class="text1">
  138. {{ item.startTime | timeFormat("MM-dd HH:mm:ss") }}
  139. <template v-if="item.userName">
  140. ,{{ item.userName }}
  141. </template>
  142. </span>
  143. </div>
  144. <div :class="{ cont: true, blue: item.endTime != '' }">
  145. <p class="text2" v-if="item.desc" v-html="item.desc"></p>
  146. </div>
  147. </div>
  148. </div>
  149. </div>
  150. <p class="info_hide">
  151. <span class="fl hide" @click="proHides()">{{
  152. pro_hides ? "隐藏详情 <<" : "展开详情 >>"
  153. }}</span>
  154. </p>
  155. <div class="sub">
  156. <cube-button type="submit" @click="goToSummary()" v-if="model.incident.duty && model.incident.duty.addSummary == 1">查看汇总单</cube-button>
  157. </div>
  158. </div>
  159. </div>
  160. <load-ing v-if="!model.incident"></load-ing>
  161. </div>
  162. </div>
  163. </template>
  164. <script>
  165. import LoadIng from "./../views/loading.vue";
  166. import EventInformation from './../components/EventInformation/index.vue'
  167. import ShowPicture from './../custom/ShowPicture.vue'
  168. import { formatDate } from "./../components/js/date.js";
  169. export default {
  170. data() {
  171. return {
  172. id: "",
  173. loginUser: JSON.parse(localStorage.getItem("loginUser")),
  174. selected: 1,
  175. options: [
  176. {
  177. label: "接单",
  178. value: 1,
  179. },
  180. {
  181. label: "关单信息",
  182. value: 2,
  183. },
  184. ],
  185. resignComment: "", //重新指派原因
  186. item_hides: false,
  187. item_hides1: false,
  188. actives: "info",
  189. processInstanceId: "",
  190. wxIncidentId: "",
  191. progressInfo: [], //处理进度
  192. model: {}, //提交数据
  193. pro_hides: false, //展开/收起处理进度
  194. };
  195. },
  196. components: {
  197. LoadIng,
  198. EventInformation,
  199. ShowPicture,
  200. },
  201. methods: {
  202. // 查看汇总单
  203. goToSummary(){
  204. if(this.model.incident.duty && this.model.incident.duty.addSummary == 1 && this.model.incident.state.value == "resolved"){
  205. // 责任科室【是否需要填写汇总单】开启,并且工单状态是已解决
  206. this.$router.push({
  207. path: `/summaryOrderDetail/${this.model.incident.id}/${this.model.incident.duty.id}`
  208. });
  209. }else if(this.model.incident.duty && this.model.incident.duty.addSummary == 1 && this.model.incident.state.value == "close"){
  210. // 责任科室【是否需要填写汇总单】开启,并且工单状态是已关闭
  211. this.$router.push({
  212. path: `/summaryOrderDetail/${this.model.incident.id}/${this.model.incident.duty.id}`
  213. });
  214. }
  215. },
  216. // 获取事件数据
  217. getParamsData() {
  218. var that = this;
  219. that.$http
  220. .get(
  221. "/service/form/renderForm/receiveform/" +
  222. that.processInstanceId +
  223. "/" +
  224. that.loginUser.id +
  225. "/" +
  226. that.id,
  227. {}
  228. )
  229. .then(function (res) {
  230. console.log(res.data);
  231. that.model = res.data.model;
  232. //seimin
  233. that.wxIncidentId = res.data.model.incident.wxIncidentId;
  234. localStorage.setItem("modelData", JSON.stringify(that.model));
  235. that.getProgressInfo();
  236. });
  237. },
  238. // 获取处理进度
  239. getProgressInfo() {
  240. var that = this;
  241. that.$http
  242. .post(
  243. "/service/bpm/bpm/flowTracingCustom/" + that.processInstanceId,
  244. {}
  245. )
  246. .then(function (res) {
  247. console.log(res.data);
  248. that.progressInfo = res.data.data;
  249. //维修记录startcaca
  250. if (that.model.incident.handlerLogs) {
  251. //添加日志
  252. that.model.incident.handlerLogs.forEach((v) => {
  253. that.progressInfo.push({
  254. startTime: v.opTime,
  255. endTime: 1,
  256. desc: (v.repairType && v.expectedDate) ? `${v.repairType.name} ${formatDate(v.expectedDate, "MM月dd日前完成")}<br>${v.opValue}` : v.opValue,
  257. userName: v.userName,
  258. activityName: "事件处理",
  259. });
  260. });
  261. }
  262. //处理数据
  263. that.progressInfo.forEach((v) => {
  264. if (!v.endTime) {
  265. v.endTime = 1;
  266. }
  267. v.startTime = new Date(v.startTime).getTime();
  268. });
  269. var kaishi = that.progressInfo.shift();
  270. var jiedan = that.progressInfo.shift();
  271. that.progressInfo.sort(function (o, c) {
  272. return c.startTime - o.startTime;
  273. });
  274. that.progressInfo.length && (that.progressInfo[0].endTime = "");
  275. that.progressInfo.push(jiedan);
  276. that.progressInfo.push(kaishi);
  277. console.log(that.progressInfo);
  278. //维修记录end
  279. });
  280. },
  281. //隐藏显示详情
  282. hides() {
  283. this.item_hides = !this.item_hides;
  284. $("#shows").slideToggle();
  285. },
  286. // 处理进度隐藏/展开
  287. proHides() {
  288. if (!this.pro_hides) {
  289. $("#progressBox").animate({
  290. height: $("#progressBox")[0].scrollHeight,
  291. });
  292. } else {
  293. $("#progressBox").animate({ height: "1.7rem" });
  294. }
  295. this.pro_hides = !this.pro_hides;
  296. },
  297. //隐藏显示详情
  298. hides1() {
  299. this.item_hides1 = !this.item_hides1;
  300. $("#shows1").slideToggle();
  301. },
  302. // 快速定位
  303. toInfo(id) {
  304. this.actives = id;
  305. $("body,html").animate(
  306. {
  307. scrollTop:
  308. $("#" + id).offset().top -
  309. $(".header")[0].offsetHeight -
  310. $(".navBar")[0].offsetHeight,
  311. },
  312. 260
  313. );
  314. },
  315. },
  316. created() {
  317. this.processInstanceId = this.$route.params.data
  318. ? this.$route.params.data.processInstanceId
  319. : JSON.parse(localStorage.getItem("modelData")).incident
  320. .processInstanceId;
  321. this.id = this.$route.params.data
  322. ? this.$route.params.data.id
  323. : JSON.parse(localStorage.getItem("modelData")).incident.id;
  324. this.getParamsData();
  325. },
  326. };
  327. </script>
  328. <style lang="less" scoped>
  329. i.iconfont {
  330. &.blue {
  331. color: #005395;
  332. // &::after {
  333. // content: "";
  334. // width: 0.01rem;
  335. // height: 0.4rem;
  336. // background: #005395;
  337. // position: relative;
  338. // display: block;
  339. // left: 0.14rem;
  340. // }
  341. }
  342. &.blue1 {
  343. color: #005395;
  344. }
  345. }
  346. .closed {
  347. .header {
  348. width: 100%;
  349. height: 0.88rem;
  350. line-height: 0.88rem;
  351. text-align: center;
  352. color: #fff;
  353. font-size: 0.37rem;
  354. background: linear-gradient(#2e2f32, #414246);
  355. position: fixed;
  356. top: 0;
  357. z-index: 6;
  358. }
  359. .navBar {
  360. width: 100%;
  361. height: 0.96rem;
  362. line-height: 0.96rem;
  363. background-color: #fafafa;
  364. font-size: 0.28rem;
  365. position: fixed;
  366. top: 0.88rem;
  367. div {
  368. width: 25%;
  369. text-align: center;
  370. a {
  371. display: inline-block;
  372. height: 0.9rem;
  373. width: 1.7rem;
  374. padding: 0 0.1rem;
  375. &.active {
  376. color: #005395;
  377. border-bottom: 0.06rem solid #005395;
  378. }
  379. }
  380. }
  381. }
  382. .headtop {
  383. margin-top: 1.84rem;
  384. }
  385. .label {
  386. background-color: #eeeeee;
  387. height: 0.6rem;
  388. line-height: 0.58rem;
  389. padding-left: 0.2rem;
  390. font-size: 0.24rem;
  391. color: #666666;
  392. span {
  393. font-size: 0.2rem;
  394. display: inline-block;
  395. margin-left: 0.08rem;
  396. color: #999999;
  397. }
  398. &.formLabel {
  399. background-color: #fff;
  400. }
  401. }
  402. .conentBox {
  403. width: 100%;
  404. .conent {
  405. font-size: 0.32rem;
  406. font-weight: 400;
  407. line-height: 0.45rem;
  408. // border-bottom: 0.16rem solid #e5e5e5;
  409. .shows {
  410. display: none;
  411. }
  412. .shows1 {
  413. display: none;
  414. }
  415. .boeder_B {
  416. border-bottom: 0.01rem solid #ccc;
  417. }
  418. p {
  419. &.desc {
  420. overflow: hidden;
  421. }
  422. .grayFont {
  423. width: 75%;
  424. text-align: right;
  425. overflow-x: scroll;
  426. }
  427. }
  428. .bottom {
  429. overflow: hidden;
  430. line-height: 0.86rem;
  431. border-bottom: 0.01rem solid #e6e6e6;
  432. font-size: 0.24rem;
  433. color: #999;
  434. padding: 0 0.24rem 0 0.48rem;
  435. }
  436. .info {
  437. color: #999;
  438. font-size: 0.28rem;
  439. overflow: hidden;
  440. .head {
  441. border-bottom: 0.01rem solid #e6e6e6;
  442. p {
  443. padding: 0.24rem 0.3rem;
  444. i {
  445. color: #00559d;
  446. }
  447. }
  448. }
  449. p {
  450. line-height: 0.4rem;
  451. padding: 0.1rem 0.24rem;
  452. overflow: hidden;
  453. .overflowEllipsis2 {
  454. margin-left: 1.96rem;
  455. }
  456. }
  457. .info_hide {
  458. padding: 0.2rem 0.24rem;
  459. border-bottom: 0.01rem solid #e6e6e6;
  460. .hide {
  461. color: #00559d;
  462. }
  463. }
  464. .progress {
  465. padding: 0.2rem 0.2rem;
  466. overflow: hidden;
  467. transition-duration: 0.2s;
  468. transition-timing-function: linear;
  469. &.progressHide {
  470. height: 1.7rem;
  471. }
  472. .progress_info {
  473. overflow: hidden;
  474. margin-bottom: 0.1rem;
  475. &:nth-last-child(1) {
  476. .cont {
  477. border: none !important;
  478. }
  479. }
  480. .progress_info_L {
  481. float: left;
  482. color: #333;
  483. max-width: 18%;
  484. }
  485. .progress_info_R {
  486. float: right;
  487. margin-left: 0.09rem;
  488. width: 80%;
  489. font-size: 0.25rem;
  490. .time {
  491. i {
  492. margin-left: -0.15rem;
  493. &.icon-icon_weizuo {
  494. color: #005495;
  495. }
  496. &.icon-icon_zhengzaijinx {
  497. color: #48a843;
  498. font-size: 0.37rem;
  499. }
  500. }
  501. span {
  502. margin-left: 0.15rem;
  503. }
  504. }
  505. .cont {
  506. border-left: 1px solid #999;
  507. padding-left: 0.4rem;
  508. min-height: 0.4rem;
  509. &.blue {
  510. border-left: 1px solid #005395;
  511. }
  512. }
  513. .text2 {
  514. color: #666;
  515. word-break: break-all;
  516. }
  517. p {
  518. padding: 0;
  519. }
  520. }
  521. }
  522. }
  523. }
  524. .txtLabel {
  525. width: 100%;
  526. overflow: hidden;
  527. padding: 0.32rem 0.24rem 0.32rem 0.32rem;
  528. .txt {
  529. width: 30%;
  530. color: #666;
  531. }
  532. .cube-textarea-wrapper {
  533. width: 62%;
  534. }
  535. }
  536. .sub {
  537. background: #ececec;
  538. .cube-btn {
  539. background-color: #005395 !important;
  540. margin: 0.2rem auto;
  541. border-radius: 8px;
  542. }
  543. }
  544. }
  545. }
  546. .showwrap {
  547. width: 75%;
  548. text-align: right;
  549. }
  550. }
  551. </style>