rcwxTable.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558
  1. <!-- 维修-->
  2. <template>
  3. <div class="rcwx-list">
  4. <div class="eq-list-top">
  5. <el-input
  6. placeholder="搜索设备名称或内码"
  7. size="small"
  8. @keyup.enter.native="pageChanged(1)"
  9. @blur="pageChanged(1)"
  10. clearable
  11. prefix-icon="el-icon-search"
  12. v-model="sbjc"
  13. style="width:192px;margin-right:12px"
  14. ></el-input>
  15. <el-input
  16. placeholder="搜索位置名称或内码"
  17. size="small"
  18. @keyup.enter.native="pageChanged(1)"
  19. @blur="pageChanged(1)"
  20. clearable
  21. prefix-icon="el-icon-search"
  22. v-model="wzjc"
  23. style="width:192px;margin-right:12px"
  24. ></el-input>
  25. <el-input
  26. placeholder="搜索描述"
  27. size="small"
  28. clearable
  29. @keyup.enter.native="pageChanged(1)"
  30. @blur="pageChanged(1)"
  31. prefix-icon="el-icon-search"
  32. v-model="matters"
  33. style="width:192px;margin-right:12px"
  34. ></el-input>
  35. <el-input
  36. placeholder="搜索工单编号"
  37. size="small"
  38. clearable
  39. @keyup.enter.native="pageChanged(1)"
  40. @blur="pageChanged(1)"
  41. prefix-icon="el-icon-search"
  42. v-model="wonum2"
  43. style="width:192px;margin-right:12px"
  44. ></el-input>
  45. <Select
  46. @change="confirmMore"
  47. @confirm="confirmMore"
  48. style="margin-right:12px;"
  49. v-model="status"
  50. width="200"
  51. tipPlace="top"
  52. caption="任务状态描述:"
  53. multiple
  54. :selectdata="statusOption"
  55. ></Select>
  56. <Select
  57. @change="pageChanged(1)"
  58. style="margin-right:12px;"
  59. v-model="source"
  60. width="180"
  61. tipPlace="top"
  62. caption="报修来源:"
  63. :selectdata="sourceOption"
  64. ></Select>
  65. <!-- <el-input
  66. placeholder='搜索执行人'
  67. size='small'
  68. clearable
  69. @keyup.enter.native='pageChanged(1)'
  70. @blur='pageChanged(1)'
  71. prefix-icon='el-icon-search'
  72. v-model='people'
  73. style='width:192px;margin-right:12px'
  74. ></el-input>-->
  75. <input-dialog :type="5" @confirm="confirm"></input-dialog>
  76. </div>
  77. <div ref="tableBox">
  78. <el-table :data="tableData" :border="true" style="width: 100%" @row-click="innerTable">
  79. <el-table-column type="index" label="序号" width="60" :index="indexMethod"></el-table-column>
  80. <el-table-column prop="sbmc" label="设备名称" show-overflow-tooltip resizable min-width="100">
  81. <template slot-scope="{row}">{{row.sbmc || '--'}}</template>
  82. </el-table-column>
  83. <el-table-column prop="matters" label="位置名称" width="240" show-overflow-tooltip resizable>
  84. <template slot-scope="{row}">{{row.wzjc || '--'}}</template>
  85. </el-table-column>
  86. <el-table-column
  87. prop="description"
  88. label="问题描述"
  89. show-overflow-tooltip
  90. resizable
  91. min-width="280"
  92. >
  93. <template slot-scope="{row}">{{row.description || '--'}}</template>
  94. </el-table-column>
  95. <el-table-column prop="brand" label="报修照片" width="80">
  96. <template slot-scope="{row}">
  97. <div
  98. v-if="row.repair_photos_num"
  99. style="cursor:pointer;color: #0091ff;"
  100. @click.stop="clickPicRepair(row)"
  101. >{{row.repair_photos_num+'张'}}</div>
  102. <div v-else>{{'--'}}</div>
  103. </template>
  104. </el-table-column>
  105. <el-table-column
  106. prop="description"
  107. label="任务状态描述"
  108. show-overflow-tooltip
  109. resizable
  110. min-width="200"
  111. >
  112. <template slot-scope="{row}">{{row.status || '--'}}</template>
  113. </el-table-column>
  114. <el-table-column prop="brand" label="完工照片" width="80">
  115. <template slot-scope="{row}">
  116. <div
  117. v-if="row.finish_photos_num"
  118. style="cursor:pointer;color: #0091ff;"
  119. @click.stop="clickPicFinish(row)"
  120. >{{row.finish_photos_num+'张'}}</div>
  121. <div v-else>{{'--'}}</div>
  122. </template>
  123. </el-table-column>
  124. <el-table-column prop="reportdate" label="要求完成时间" width="140">
  125. <template slot-scope="{row}">{{row.schedfinish?formatterTime(row.schedfinish): '--'}}</template>
  126. </el-table-column>
  127. <el-table-column prop="sjjssj" label="实际完工时间" width="140">
  128. <template slot-scope="{row}">{{row.wotjyssj?formatterTime(row.wotjyssj): '--'}}</template>
  129. </el-table-column>
  130. <el-table-column
  131. prop="description"
  132. label="报修来源"
  133. show-overflow-tooltip
  134. resizable
  135. min-width="200"
  136. >
  137. <template slot-scope="{row}">{{row.bxfwlymc || '--'}}</template>
  138. </el-table-column>
  139. <el-table-column
  140. prop="description"
  141. label="执行人"
  142. show-overflow-tooltip
  143. resizable
  144. min-width="80"
  145. >
  146. <template slot-scope="{row}">{{row.lead || '--'}}</template>
  147. </el-table-column>
  148. <el-table-column
  149. prop="description"
  150. label="工单编号"
  151. show-overflow-tooltip
  152. resizable
  153. min-width="80"
  154. >
  155. <template slot-scope="{row}">
  156. <div
  157. v-if="row.wonum"
  158. @click.stop="staff(row)"
  159. style="cursor:pointer;color: #0091ff;"
  160. >{{row.wonum}}</div>
  161. <div v-else>{{'--'}}</div>
  162. </template>
  163. </el-table-column>
  164. <el-table-column prop="assetnum" label="设备内码" show-overflow-tooltip resizable width="80">
  165. <template slot-scope="{row}">{{row.assetnum || '--'}}</template>
  166. </el-table-column>
  167. <el-table-column
  168. prop="description"
  169. label="位置内码"
  170. show-overflow-tooltip
  171. resizable
  172. min-width="80"
  173. >
  174. <template slot-scope="{row}">{{row.location || '--'}}</template>
  175. </el-table-column>
  176. </el-table>
  177. </div>
  178. <div class="foot">
  179. <el-pagination
  180. background
  181. layout="prev, pager, next"
  182. :total="total"
  183. :page-size="size"
  184. :current-page="currentPage"
  185. @prev-click="pageChanged"
  186. @next-click="pageChanged"
  187. @current-change="pageChanged"
  188. ></el-pagination>
  189. <pic-large :imgUrl="imgUrl" ref="picLargeOpen"></pic-large>
  190. </div>
  191. </div>
  192. </template>
  193. <script>
  194. import moment from 'moment'
  195. import { queryWxzy, queryWxzyImg } from "@/api/equipmentList.js";
  196. import { mapGetters } from "vuex";
  197. import inputDialog from "./inputDIalog";
  198. import { Select } from "meri-design";
  199. import { querySelect } from "@/api/public.js";
  200. import { formatterTime, number_format } from "@/utils/format.js";
  201. export default {
  202. components: { Select, inputDialog },
  203. data() {
  204. return {
  205. tableData: [],
  206. total: 0,
  207. currentPage: 1,
  208. reportdate: "",
  209. sjjssj: "",
  210. sbjc: "",
  211. wzjc: "",
  212. matters: "",
  213. wonum2: "",
  214. wonum: "",
  215. sourceOption: [],
  216. statusOption: [],
  217. source: "全部",
  218. formatterTime,
  219. number_format,
  220. imgUrl: [],
  221. people: "",
  222. locationName: "",
  223. keyword: "",
  224. status: [], //搜索状态描述
  225. getStatus: [
  226. "新建",
  227. "待派工",
  228. "已派工",
  229. "待验收",
  230. "验收通过",
  231. "工单执行退回",
  232. "问题待解决",
  233. "执行中"
  234. ], //默认选项如果statusOption存在则写入status中
  235. };
  236. },
  237. computed: {
  238. ...mapGetters(["floorSelect"])
  239. },
  240. props: ["smsxt", "diff", "tabLabel", "size", "assetnum"],
  241. methods: {
  242. //序号的方法
  243. indexMethod(index) {
  244. return (this.currentPage - 1) * this.size + index + 1;
  245. },
  246. innerTable(row) {
  247. if (row.workorderid) {
  248. window.open(
  249. `http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=JXWO&uniqueid=${row.workorderid}`
  250. );
  251. }
  252. },
  253. //跳转工单编号
  254. staff(row) {
  255. // console.log(row);
  256. if (row.workorderid) {
  257. window.open(
  258. `http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=JXWO&uniqueid=${row.workorderid}`
  259. );
  260. }
  261. },
  262. //多余输入框监听
  263. confirm(reportdate, real, locationName, people) {
  264. debugger
  265. this.reportdate = reportdate;
  266. this.sjjssj = real;
  267. this.locationName = locationName;
  268. this.people = people;
  269. this.pageChanged(1);
  270. },
  271. pageChanged(page) {
  272. this.currentPage = page;
  273. this.getList();
  274. },
  275. getList() {
  276. let getParams = {
  277. data: {
  278. smsxt: this.smsxt,
  279. // diff: this.diff,
  280. plazaId: this.$store.state.plazaId,
  281. page: this.currentPage,
  282. size: this.size
  283. }
  284. };
  285. //区分主要设备和全部设备
  286. if (this.smsxt != "1008") {
  287. getParams.data.onlyMainAsset = true;
  288. }
  289. if (this.assetnum) {
  290. getParams.data.assetnum = this.assetnum;
  291. }
  292. //下拉 要求完成日期
  293. if (this.reportdate) {
  294. getParams.data.schedfinishStartDate = this.reportdate[0] + "000000";
  295. // getParams.data.schedfinishEndDate = this.reportdate[1] + "000000";
  296. getParams.data.schedfinishEndDate = moment(this.reportdate[1]).add(1, 'day').format('YYYYMMDD000000')
  297. }
  298. // 实际完工日期
  299. if (this.sjjssj) {
  300. getParams.data.wotjyssjStartDate = this.sjjssj[0] + "000000";
  301. // getParams.data.wotjyssjEndDate = this.sjjssj[1] + "000000";
  302. getParams.data.wotjyssjEndDate = moment(this.sjjssj[1]).add(1, 'day').format('YYYYMMDD000000')
  303. }
  304. if (this.source && this.source != "全部") {
  305. getParams.data.bxfwlymc = this.source;
  306. getParams.data.bxfwly = this.source;
  307. }
  308. //输入框搜索
  309. getParams.data.keyword = "";
  310. if (this.sbjc) {
  311. getParams.data.keyword += `${this.sbjc}:sbmc,assetnum;`;
  312. }
  313. if (this.wzjc) {
  314. getParams.data.keyword += `${this.wzjc}:wzjc,location;`;
  315. }
  316. if (this.matters) {
  317. getParams.data.keyword += `${this.matters}:description;`;
  318. }
  319. if (this.locationName) {
  320. getParams.data.keyword += `${this.locationName}:location;`;
  321. }
  322. if (this.wonum2) {
  323. getParams.data.keyword += `${this.wonum2}:wonum;`;
  324. }
  325. if (this.people) {
  326. getParams.data.keyword += `${this.people}:lead;`;
  327. }
  328. if (getParams.data.keyword == "") {
  329. delete getParams.data.keyword;
  330. }
  331. if (this.status.length) {
  332. const data = {
  333. status: this.status
  334. };
  335. getParams.getParams = data;
  336. }
  337. queryWxzy(getParams).then(res => {
  338. this.tableData = res.data.data || [];
  339. this.total = res.data.count || 0;
  340. });
  341. },
  342. clickPicRepair(row) {
  343. let getParams = {
  344. data: {
  345. plazaId: this.$store.state.plazaId,
  346. ticketuid: row.ticketuid,
  347. type: 0,
  348. workorderid: row.workorderid
  349. }
  350. };
  351. queryWxzyImg(getParams).then(res => {
  352. let url = res.data;
  353. this.imgUrl = [];
  354. if (url) {
  355. url.forEach(el => {
  356. let obj = {
  357. name: el.description,
  358. url: el.urlname
  359. };
  360. this.imgUrl.push(obj);
  361. });
  362. }
  363. this.$refs.picLargeOpen.open(this.imgUrl);
  364. });
  365. },
  366. clickPicFinish(row) {
  367. let getParams = {
  368. data: {
  369. plazaId: this.plazaId,
  370. ticketuid: row.ticketuid,
  371. type: 1,
  372. workorderid: row.workorderid
  373. }
  374. };
  375. queryWxzyImg(getParams).then(res => {
  376. let url = res.data;
  377. this.imgUrl = [];
  378. if (url) {
  379. url.forEach(el => {
  380. let obj = {
  381. name: el.description,
  382. url: el.urlname
  383. };
  384. this.imgUrl.push(obj);
  385. });
  386. }
  387. this.$refs.picLargeOpen.open(this.imgUrl);
  388. });
  389. },
  390. startMethods() {
  391. this.tabFind();
  392. },
  393. //下拉框查询
  394. tabFind() {
  395. let postParams = [
  396. {
  397. columnName: { bxfwly: "bxfwlymc" },
  398. params: {
  399. smsxt: this.smsxt
  400. },
  401. tableName: "sms_wxzy" //视图名称
  402. }
  403. ];
  404. let data = {
  405. plazaId: this.$store.state.plazaId
  406. };
  407. if (this.smsxt != "1008") {
  408. data.onlyMainAsset = true;
  409. }
  410. querySelect({ data, postParams }).then(res => {
  411. //console.log(res)
  412. let bxfwlymc =
  413. res.data && res.data.data && res.data.data.sms_wxzy
  414. ? res.data.data.sms_wxzy.bxfwly
  415. : [];
  416. this.sourceOption = [];
  417. this.sourceOption.push({
  418. name: "全部",
  419. id: "全部"
  420. });
  421. bxfwlymc.forEach(el => {
  422. this.sourceOption.push({
  423. name: el.value,
  424. id: el.key
  425. });
  426. });
  427. });
  428. // 2任务状态
  429. let postParams2 = [
  430. {
  431. columnName: { status: "status" },
  432. params: {
  433. smsxt: this.smsxt
  434. },
  435. tableName: "sms_wxzy" //视图名称
  436. }
  437. ];
  438. querySelect({ data, postParams: postParams2 }).then(res => {
  439. let bxfwlymc =
  440. res.data && res.data.data && res.data.data.sms_wxzy
  441. ? res.data.data.sms_wxzy.status
  442. : [];
  443. this.statusOption = [];
  444. // this.statusOption.push({
  445. // name: "全部",
  446. // id: "全部"
  447. // });
  448. bxfwlymc.forEach(el => {
  449. this.statusOption.push({
  450. name: el.value,
  451. id: el.key
  452. });
  453. });
  454. let status = [];
  455. this.statusOption.forEach(item => {
  456. if (this.getStatus.includes(item.id)) {
  457. status.push(item.id);
  458. }
  459. });
  460. this.status = status;
  461. // 获取数据
  462. this.getList();
  463. });
  464. },
  465. confirmMore(val) {
  466. const arr = [];
  467. val.forEach(item => {
  468. arr.push(item.id);
  469. });
  470. this.status = arr;
  471. this.getList();
  472. }
  473. },
  474. watch: {
  475. diff(newV, oldV) {
  476. if (newV !== oldV) {
  477. this.startMethods();
  478. }
  479. },
  480. assetnum(newV, oldV) {
  481. if (newV !== oldV) {
  482. // this.tabFind()
  483. this.getList();
  484. }
  485. },
  486. tabLabel(newV, oldV) {
  487. if (newV !== oldV) {
  488. this.startMethods();
  489. }
  490. }
  491. },
  492. mounted() {
  493. this.startMethods();
  494. }
  495. };
  496. </script>
  497. <style lang="less" scoped>
  498. .rcwx-list {
  499. .eq-list-top {
  500. display: flex;
  501. margin-bottom: 12px;
  502. .picker-box {
  503. display: flex;
  504. align-items: center;
  505. background: #fff;
  506. padding: 0 6px;
  507. border: 1px solid #dcdfe6;
  508. border-radius: 4px;
  509. height: 32px;
  510. box-sizing: border-box;
  511. margin-right: 12px;
  512. .picker-span {
  513. margin-right: 6px;
  514. color: rgba(0, 0, 0, 0.65);
  515. }
  516. }
  517. }
  518. td {
  519. overflow: hidden;
  520. text-overflow: ellipsis;
  521. white-space: nowrap;
  522. }
  523. .foot {
  524. height: 32px;
  525. display: flex;
  526. justify-content: flex-end;
  527. margin-top: 28px;
  528. }
  529. }
  530. </style>
  531. <style lang="less" >
  532. .rcwx-list {
  533. .picker-box {
  534. .el-input__inner {
  535. border: none;
  536. }
  537. .el-range-editor.el-input__inner {
  538. padding: 3px 0px;
  539. }
  540. .el-icon-date {
  541. display: none;
  542. }
  543. .el-range__close-icon {
  544. position: absolute;
  545. right: 0px;
  546. top: 2px;
  547. }
  548. .el-range-editor--mini .el-range-input {
  549. font-size: 14px;
  550. color: rgb(31, 36, 41);
  551. }
  552. }
  553. /deep/.el-table td {
  554. cursor: pointer;
  555. }
  556. }
  557. </style>