rcwxTable.vue 15 KB

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