rcwxTable.vue 14 KB

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