rcwxTable.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359
  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. clearable
  19. @keyup.enter.native='getList'
  20. @blur='getList'
  21. prefix-icon='el-icon-search'
  22. v-model='matters'
  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='wonum2'
  33. style='width:192px;margin-right:12px'
  34. ></el-input>
  35. <Select
  36. @change='getList'
  37. style='margin-right:12px;'
  38. v-model='source'
  39. width='180'
  40. tipPlace='top'
  41. caption='报修来源:'
  42. :selectdata='sourceOption'
  43. ></Select>
  44. <el-input
  45. placeholder='搜索执行人'
  46. size='small'
  47. clearable
  48. @keyup.enter.native='getList'
  49. @blur='getList'
  50. prefix-icon='el-icon-search'
  51. v-model='people'
  52. style='width:192px;margin-right:12px'
  53. ></el-input>
  54. <input-dialog :type='5' @confirm='confirm'></input-dialog>
  55. </div>
  56. <div ref='tableBox'>
  57. <el-table :data='tableData' :border='true' style='width: 100%' @row-click='innerTable'>
  58. <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
  59. <el-table-column prop='sbmc' label='设备名称' show-overflow-tooltip resizable min-width='460'>
  60. <template slot-scope='{row}'>{{row.sbmc || '--'}}</template>
  61. </el-table-column>
  62. <el-table-column prop='assetnum' label='设备内码' show-overflow-tooltip resizable width='80'>
  63. <template slot-scope='{row}'>{{row.assetnum || '--'}}</template>
  64. </el-table-column>
  65. <el-table-column prop='description' label='问题描述' show-overflow-tooltip resizable min-width='340'>
  66. <template slot-scope='{row}'>{{row.description || '--'}}</template>
  67. </el-table-column>
  68. <el-table-column prop='description' label='工单编号' show-overflow-tooltip resizable min-width='80'>
  69. <template slot-scope='{row}'>
  70. <div v-if='row.wonum' @click.stop='staff(row)' style='cursor:pointer;color: #0091ff;'>{{row.wonum}}</div>
  71. <div v-else>{{'--'}}</div>
  72. </template>
  73. </el-table-column>
  74. <el-table-column prop='description' label='报修来源' show-overflow-tooltip resizable min-width='340'>
  75. <template slot-scope='{row}'>{{row.bxfwlymc || '--'}}</template>
  76. </el-table-column>
  77. <el-table-column prop='description' label='执行人' show-overflow-tooltip resizable min-width='80'>
  78. <template slot-scope='{row}'>{{row.lead || '--'}}</template>
  79. </el-table-column>
  80. <el-table-column prop='reportdate' label='要求完成时间' width='140'>
  81. <template slot-scope='{row}'>{{row.schedfinish?formatterTime(row.schedfinish): '--'}}</template>
  82. </el-table-column>
  83. <el-table-column prop='sjjssj' label='实际完工时间' width='140'>
  84. <template slot-scope='{row}'>{{row.wotjyssj?formatterTime(row.wotjyssj): '--'}}</template>
  85. </el-table-column>
  86. <el-table-column prop='matters' label='位置名称' width='240' show-overflow-tooltip resizable>
  87. <template slot-scope='{row}'>{{row.wzjc || '--'}}</template>
  88. </el-table-column>
  89. <el-table-column prop='description' label='位置内码' show-overflow-tooltip resizable min-width='80'>
  90. <template slot-scope='{row}'>{{row.location || '--'}}</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='clickPic(row.repair_photos_num)'
  98. >{{row.repair_photos_num.length+'张'}}</div>
  99. <div v-else>{{'--'}}</div>
  100. </template>
  101. </el-table-column>
  102. <el-table-column prop='brand' label='完工照片' width='80'>
  103. <template slot-scope='{row}'>
  104. <div
  105. v-if='row.finish_photos_num'
  106. style='cursor:pointer;color: #0091ff;'
  107. @click.stop='clickPic(row.finish_photos_num)'
  108. >{{row.finish_photos_num.length+'张'}}</div>
  109. <div v-else>{{'--'}}</div>
  110. </template>
  111. </el-table-column>
  112. </el-table>
  113. </div>
  114. <div class='foot'>
  115. <el-pagination
  116. background
  117. layout='prev, pager, next'
  118. :total='total'
  119. :page-size='size'
  120. @prev-click='pageChanged'
  121. @next-click='pageChanged'
  122. @current-change='pageChanged'
  123. ></el-pagination>
  124. <pic-large :imgUrl='imgUrl' ref='picLargeOpen'></pic-large>
  125. </div>
  126. </div>
  127. </template>
  128. <script>
  129. import { queryWxzy } from '@/api/equipmentList.js'
  130. import { mapGetters } from 'vuex'
  131. import inputDialog from './inputDIalog'
  132. import { Select } from 'meri-design'
  133. import { querySelect } from '@/api/public.js'
  134. import { formatterTime, number_format } from '@/utils/format.js'
  135. export default {
  136. components: { Select, inputDialog },
  137. data() {
  138. return {
  139. tableData: [],
  140. total: 0,
  141. currentPage: 1,
  142. reportdate: '',
  143. sjjssj: '',
  144. sbjc: '',
  145. matters: '',
  146. wonum2: '',
  147. wonum: '',
  148. sourceOption: [],
  149. source: '全部',
  150. formatterTime,
  151. number_format,
  152. imgUrl: [],
  153. people: '',
  154. locationName: '',
  155. keyword: '',
  156. }
  157. },
  158. computed: {
  159. ...mapGetters(['floorSelect']),
  160. },
  161. props: ['smsxt', 'diff', 'tabLabel', 'size', 'assetnum'],
  162. methods: {
  163. //序号的方法
  164. indexMethod(index) {
  165. return (this.currentPage - 1) * this.size + index + 1
  166. },
  167. innerTable(row) {
  168. if (row.workorderid) {
  169. window.open(`http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=JXWO&uniqueid=${row.workorderid}`)
  170. }
  171. },
  172. //跳转工单编号
  173. staff(row) {
  174. console.log(row)
  175. if (row.wonum) {
  176. window.open(`http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=JXWO&uniqueid=${row.wonum}`)
  177. }
  178. },
  179. //多余输入框监听
  180. confirm(reportdate, real, locationName) {
  181. this.reportdate = reportdate
  182. this.sjjssj = real
  183. this.locationName = locationName
  184. this.getList()
  185. },
  186. pageChanged(page) {
  187. this.currentPage = page
  188. this.getList()
  189. },
  190. getList() {
  191. let getParams = {
  192. data: {
  193. smsxt: this.smsxt,
  194. // diff: this.diff,
  195. plazaId: this.$store.state.plazaId,
  196. page: this.currentPage,
  197. size: this.size,
  198. },
  199. }
  200. if (this.assetnum) {
  201. getParams.data.assetnum = this.assetnum
  202. }
  203. //下拉
  204. if (this.reportdate) {
  205. getParams.data.schedfinishStartDate = this.reportdate[0] + '000000'
  206. getParams.data.schedfinishEndDate = this.reportdate[1] + '000000'
  207. }
  208. if (this.real) {
  209. getParams.data.wotjyssjStartDate = this.real[0] + '000000'
  210. getParams.data.wotjyssjEndDate = this.real[1] + '000000'
  211. }
  212. if (this.source && this.source != '全部') {
  213. getParams.data.bxfwlymc = this.source
  214. }
  215. //输入框搜索
  216. getParams.data.keyword = ''
  217. if (this.sbjc) {
  218. getParams.data.keyword += `${this.sbjc}:sbmc,assetnum;`
  219. }
  220. if (this.matters) {
  221. getParams.data.keyword += `${this.matters}:description,matters;`
  222. }
  223. if (this.locationName) {
  224. getParams.data.keyword += `${this.locationName}:location`
  225. }
  226. if (getParams.data.keyword == '') {
  227. delete getParams.data.keyword
  228. }
  229. queryWxzy(getParams).then((res) => {
  230. this.tableData = res.data || []
  231. this.total = res.count
  232. })
  233. },
  234. clickPic(row) {
  235. this.imgUrl = []
  236. if (row) {
  237. row.forEach((el) => {
  238. let obj = {
  239. name: el.description,
  240. url: el.url,
  241. }
  242. this.imgUrl.push(obj)
  243. })
  244. }
  245. this.$refs.picLargeOpen.open(this.imgUrl)
  246. },
  247. startMethods() {
  248. // this.tabFind()
  249. // this.getList()
  250. },
  251. //下拉框查询
  252. tabFind() {
  253. let postParams = [
  254. {
  255. columnName: { bxfwly: 'bxfwlymc' },
  256. params: {
  257. smsxt: this.smsxt,
  258. },
  259. tableName: 'sms_wxzy', //视图名称
  260. },
  261. ]
  262. let data = {
  263. plazaId: this.$store.state.plazaId,
  264. }
  265. querySelect({ data, postParams }).then((res) => {
  266. //console.log(res)
  267. let bxfwlymc = res.data && res.data.data && res.data.data.sms_wxzy ? res.data.data.sms_wxzy.bxfwly : []
  268. this.sourceOption = []
  269. this.sourceOption.push({
  270. name: '全部',
  271. id: '全部',
  272. })
  273. bxfwlymc.forEach((el) => {
  274. this.sourceOption.push({
  275. name: el.value,
  276. id: el.key,
  277. })
  278. })
  279. })
  280. },
  281. },
  282. watch: {
  283. diff(newV, oldV) {
  284. if (newV !== oldV) {
  285. this.startMethods()
  286. }
  287. },
  288. tabLabel(newV, oldV) {
  289. if (newV !== oldV) {
  290. this.startMethods()
  291. }
  292. },
  293. },
  294. mounted() {
  295. this.startMethods()
  296. },
  297. }
  298. </script>
  299. <style lang="less" scoped>
  300. .rcwx-list {
  301. .eq-list-top {
  302. display: flex;
  303. margin-bottom: 12px;
  304. .picker-box {
  305. display: flex;
  306. align-items: center;
  307. background: #fff;
  308. padding: 0 6px;
  309. border: 1px solid #dcdfe6;
  310. border-radius: 4px;
  311. height: 32px;
  312. box-sizing: border-box;
  313. margin-right: 12px;
  314. .picker-span {
  315. margin-right: 6px;
  316. color: rgba(0, 0, 0, 0.65);
  317. }
  318. }
  319. }
  320. td {
  321. overflow: hidden;
  322. text-overflow: ellipsis;
  323. white-space: nowrap;
  324. }
  325. .foot {
  326. height: 32px;
  327. display: flex;
  328. justify-content: flex-end;
  329. margin-top: 28px;
  330. }
  331. }
  332. </style>
  333. <style lang="less" >
  334. .rcwx-list {
  335. .picker-box {
  336. .el-input__inner {
  337. border: none;
  338. }
  339. .el-range-editor.el-input__inner {
  340. padding: 3px 0px;
  341. }
  342. .el-icon-date {
  343. display: none;
  344. }
  345. .el-range__close-icon {
  346. position: absolute;
  347. right: 0px;
  348. top: 2px;
  349. }
  350. .el-range-editor--mini .el-range-input {
  351. font-size: 14px;
  352. color: rgb(31, 36, 41);
  353. }
  354. }
  355. /deep/.el-table td {
  356. cursor: pointer;
  357. }
  358. }
  359. </style>