zwTable.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
  1. <!--专维-->
  2. <template>
  3. <div class='zw-list'>
  4. <div class='eq-list-top'>
  5. <el-date-picker
  6. size='small'
  7. value-format='yyyy'
  8. v-model='nd'
  9. type='year'
  10. placeholder='请选择年度'
  11. @change='getList'
  12. style='width:180px;margin-right:12px'
  13. ></el-date-picker>
  14. <Select width='160' tipPlace='top' v-model='lb' caption='类别:' :selectdata='lbOption' :placeholder='"请选择"' @change='getList'></Select>
  15. <Select
  16. width='160'
  17. tipPlace='top'
  18. v-model='xm'
  19. caption='项目 :'
  20. :selectdata='xmOption'
  21. :placeholder='"请选择"'
  22. style='margin:0 12px'
  23. @change='getList'
  24. ></Select>
  25. <el-input
  26. placeholder='搜索实施方案说明'
  27. prefix-icon='el-icon-search'
  28. size='small'
  29. style='width:192px'
  30. v-model='ssfasm'
  31. clearable
  32. @keyup.enter.native='getList'
  33. @blur='getList'
  34. ></el-input>
  35. <!-- 当前阶段 -->
  36. <Select
  37. width='180'
  38. tipPlace='top'
  39. size='small'
  40. v-model='sxjd'
  41. caption='当前阶段 :'
  42. :placeholder='"请选择"'
  43. :selectdata='sxjdOption'
  44. style='margin:0 12px'
  45. @change='getList'
  46. ></Select>
  47. <!-- placeholder='选择立项时间' -->
  48. <div class='picker-box'>
  49. <span class='picker-span'>立项日期:</span>
  50. <el-date-picker
  51. style='width:190px'
  52. v-model='lxsjwcsj'
  53. value-format='yyyyMMdd'
  54. type='daterange'
  55. @change='getList'
  56. size='mini'
  57. range-separator='-'
  58. start-placeholder
  59. end-placeholder
  60. ></el-date-picker>
  61. </div>
  62. <!-- placeholder='选择验收时间' -->
  63. <input-dialog v-if='statusOption.length>0' :statusOption='statusOption' :type='4' @confirm='confirm'></input-dialog>
  64. </div>
  65. <div ref='tableBox' style='height: calc(100% - 115px);'>
  66. <el-table
  67. :data='tableData'
  68. :max-height='tableMaxHeight'
  69. :border='true'
  70. style='width: 100%'
  71. @row-click='innerTable'
  72. v-if='tableData.length>0'
  73. >
  74. <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
  75. <el-table-column prop='nd' label='年度' show-overflow-tooltip resizable width='80'>
  76. <template slot-scope='{row}'>{{row.nd || '--'}}</template>
  77. </el-table-column>
  78. <el-table-column prop='qs' label='期数' show-overflow-tooltip resizable width='80'>
  79. <template slot-scope='{row}'>{{row.qs || '--'}}</template>
  80. </el-table-column>
  81. <el-table-column prop='lb' label='类别' show-overflow-tooltip resizable min-width='210'>
  82. <template slot-scope='{row}'>{{row.lb || '--'}}</template>
  83. </el-table-column>
  84. <el-table-column prop='xm' label='项目' show-overflow-tooltip resizable min-width='150'>
  85. <template slot-scope='{row}'>{{row.xm || '--'}}</template>
  86. </el-table-column>
  87. <el-table-column prop='sl' label='数量' show-overflow-tooltip resizable width='80'>
  88. <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template>
  89. </el-table-column>
  90. <el-table-column prop='ssfasm' label='实施方案说明' show-overflow-tooltip resizable min-width='320'>
  91. <template slot-scope='{row}'>{{row.ssfasm || '--'}}</template>
  92. </el-table-column>
  93. <el-table-column prop='sxjd' label='当前阶段' show-overflow-tooltip resizable width='80'>
  94. <template slot-scope='{row}'>{{row.sxjd || '--'}}</template>
  95. </el-table-column>
  96. <el-table-column prop='lxsjwcsj' label='立项日期' show-overflow-tooltip resizable width='140'>
  97. <template slot-scope='{row}'>{{row.lxsjwcsj?formatter(row.lxsjwcsj):'--'}}</template>
  98. </el-table-column>
  99. <el-table-column prop='yssjwcsj' label='验收日期' show-overflow-tooltip resizable width='140'>
  100. <template slot-scope='{row}'>{{row.yssjwcsj?formatter(row.yssjwcsj):'--'}}</template>
  101. </el-table-column>
  102. <el-table-column prop='status' label='验收结果' show-overflow-tooltip resizable width='90'>
  103. <template slot-scope='{row}'>{{row.status || '--'}}</template>
  104. </el-table-column>
  105. <el-table-column prop='zfje' label='结算金额' show-overflow-tooltip resizable width='80' align='right'>
  106. <template slot-scope='{row}'>{{number_format(row.zfje,2)|| '--'}}</template>
  107. </el-table-column>
  108. <el-table-column prop='xlcfwz' label='资料存放位置' show-overflow-tooltip resizable width='100'>
  109. <template slot-scope='{row}'>{{row.xlcfwz || '--'}}</template>
  110. </el-table-column>
  111. </el-table>
  112. </div>
  113. <div class='foot'>
  114. <el-pagination
  115. background
  116. layout='prev, pager, next'
  117. :total='total'
  118. :page-size='size'
  119. @prev-click='pageChanged'
  120. @next-click='pageChanged'
  121. @current-change='pageChanged'
  122. ></el-pagination>
  123. </div>
  124. </div>
  125. </template>
  126. <script>
  127. import Select from '@/components/Select/Select.vue'
  128. import { queryZw } from '@/api/equipmentList.js'
  129. import { querySelect } from '@/api/public.js'
  130. import { mapGetters } from 'vuex'
  131. import inputDialog from './inputDIalog'
  132. import { formatter, number_format } from '@/utils/format.js'
  133. export default {
  134. components: { Select, inputDialog },
  135. data() {
  136. return {
  137. tableData: [],
  138. total: 0,
  139. currentPage: 1,
  140. yssjwcsj: '',
  141. lxsjwcsj: '',
  142. ssfasm: '',
  143. size: 10,
  144. keyword: '',
  145. nd: '',
  146. lb: '',
  147. sxjd: '',
  148. formatter,
  149. number_format,
  150. xm: '',
  151. statusOption: [],
  152. sxjdOption: [],
  153. xmOption: [],
  154. lbOption: [],
  155. tableMaxHeight: 0
  156. }
  157. },
  158. computed: {
  159. ...mapGetters(['floorSelect'])
  160. },
  161. props: ['smsxt', 'major', 'diff', 'tabLabel'],
  162. methods: {
  163. //序号的方法
  164. indexMethod(index) {
  165. return (this.currentPage - 1) * this.size + index + 1
  166. },
  167. //多余输入框监听
  168. confirm(status, yssjwcsj) {
  169. this.yssjwcsj = yssjwcsj
  170. this.status = status
  171. this.getList()
  172. },
  173. pageChanged(page) {
  174. this.currentPage = page
  175. this.getList()
  176. },
  177. innerTable(row) {
  178. if (row.gczxwx_lineid) {
  179. window.open(`http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=GCZXWXLINE&uniqueid=${row.gczxwx_lineid}`)
  180. }
  181. },
  182. //下拉框查询
  183. tabFind() {
  184. let postParams = [
  185. {
  186. columnName: { lb: 'lb', xm: 'xm', sxjd: 'sxjd', status: 'status' },
  187. tableName: 'sms_zw' //视图名称
  188. }
  189. ]
  190. let major
  191. if (this.major.slice(0, 2) == 'GD') {
  192. major = '供电'
  193. } else if (this.major.slice(0, 2) == 'XF') {
  194. major = '消防'
  195. } else if (this.major.slice(0, 2) == 'GPS') {
  196. major = '给排水'
  197. } else if (this.major.slice(0, 2) == 'DT') {
  198. major = '电梯'
  199. } else if (this.major.slice(0, 2) == 'RQ') {
  200. major = '燃气'
  201. } else if (this.major.slice(0, 2) == 'RD') {
  202. major = '弱电'
  203. } else if (this.major.slice(0, 2) == 'NT') {
  204. major = '暖通'
  205. } else if (this.major.slice(0, 2) == 'TJ') {
  206. major = '土建'
  207. } else {
  208. major = this.major
  209. }
  210. let data = {
  211. major: major,
  212. plazaId: this.$store.state.plazaId
  213. }
  214. querySelect({ data, postParams }).then(res => {
  215. //console.log(res)
  216. let lb = res.data.data.sms_zw.lb
  217. let xm = res.data.data.sms_zw.xm
  218. let sxjd = res.data.data.sms_zw.sxjd
  219. let status = res.data.data.sms_zw.status
  220. this.lbOption = []
  221. this.lbOption.push({
  222. name: '全部',
  223. id: ''
  224. })
  225. this.xmOption = []
  226. this.xmOption.push({
  227. id: '',
  228. name: '全部'
  229. })
  230. this.sxjdOption = []
  231. this.sxjdOption.push({
  232. id: '',
  233. name: '全部'
  234. })
  235. this.statusOption = []
  236. this.statusOption.push({
  237. id: '',
  238. name: '全部'
  239. })
  240. sxjd.forEach(el => {
  241. this.sxjdOption.push({
  242. name: el.value,
  243. id: el.key
  244. })
  245. })
  246. xm.forEach(el => {
  247. this.xmOption.push({
  248. name: el.value,
  249. id: el.key
  250. })
  251. })
  252. lb.forEach(el => {
  253. this.lbOption.push({
  254. name: el.value,
  255. id: el.key
  256. })
  257. })
  258. status.forEach(el => {
  259. this.statusOption.push({
  260. name: el.value,
  261. id: el.key
  262. })
  263. })
  264. })
  265. },
  266. getList() {
  267. let getParams = {
  268. data: {
  269. smsxt: this.smsxt,
  270. plazaId: this.$store.state.plazaId,
  271. page: this.currentPage,
  272. diff: this.diff,
  273. size: this.size
  274. }
  275. }
  276. //下拉
  277. if (this.nd) {
  278. getParams.data.nd = this.nd
  279. }
  280. if (this.lb) {
  281. getParams.data.lb = this.lb
  282. }
  283. if (this.xm) {
  284. getParams.data.xm = this.xm
  285. }
  286. if (this.sxjd) {
  287. getParams.data.sxjd = this.sxjd
  288. }
  289. //验收
  290. if (this.yssjwcsj) {
  291. getParams.data.yssjwcsjStartDate = this.yssjwcsj[0] + '000000'
  292. getParams.data.yssjwcsjEndDate = this.yssjwcsj[1] + '000000'
  293. }
  294. if (this.lxsjwcsj) {
  295. getParams.data.lxsjwcsjStartDate = this.lxsjwcsj[0] + '000000'
  296. getParams.data.lxsjwcsjEndDate = this.reportdate[1] + '000000'
  297. }
  298. if (this.status) {
  299. getParams.data.status = this.status
  300. }
  301. //input
  302. getParams.data.keyword = ''
  303. if (this.ssfasm) {
  304. getParams.data.keyword += `${this.ssfasm}:ssfasm`
  305. }
  306. if (getParams.data.keyword == '') {
  307. delete getParams.data.keyword
  308. }
  309. queryZw(getParams).then(res => {
  310. this.tableData = res.data || []
  311. this.total = res.count
  312. })
  313. }
  314. },
  315. watch: {
  316. diff(newV, oldV) {
  317. if (newV !== oldV) {
  318. this.tabFind()
  319. this.getList()
  320. this.$nextTick(() => {
  321. // 页面渲染完成后的回调
  322. this.tableMaxHeight = this.$refs.tableBox.offsetHeight
  323. })
  324. }
  325. },
  326. tabLabel(newV, oldV) {
  327. if (newV !== oldV) {
  328. this.tabFind()
  329. this.getList()
  330. }
  331. },
  332. smsxt: {
  333. handler(newV, oldV) {
  334. if (newV != oldV) {
  335. this.getList()
  336. }
  337. },
  338. deep: true
  339. },
  340. sxjd() {
  341. this.getList()
  342. },
  343. xm() {
  344. this.getList()
  345. },
  346. lb() {
  347. this.getList()
  348. }
  349. },
  350. mounted() {
  351. this.tabFind()
  352. this.getList()
  353. this.$nextTick(() => {
  354. // 页面渲染完成后的回调
  355. this.tableMaxHeight = this.$refs.tableBox.offsetHeight
  356. })
  357. }
  358. }
  359. </script>
  360. <style lang="less" scoped>
  361. .zw-list {
  362. .eq-list-top {
  363. display: flex;
  364. margin-bottom: 12px;
  365. .picker-box {
  366. display: flex;
  367. align-items: center;
  368. background: #fff;
  369. padding: 0 6px;
  370. border: 1px solid #dcdfe6;
  371. border-radius: 4px;
  372. height: 32px;
  373. box-sizing: border-box;
  374. margin-right: 12px;
  375. .picker-span {
  376. margin-right: 6px;
  377. color: rgba(0, 0, 0, 0.65);
  378. }
  379. }
  380. }
  381. td {
  382. overflow: hidden;
  383. text-overflow: ellipsis;
  384. white-space: nowrap;
  385. }
  386. .foot {
  387. height: 32px;
  388. display: flex;
  389. justify-content: flex-end;
  390. margin-top: 28px;
  391. }
  392. }
  393. </style>
  394. <style lang="less" >
  395. .zw-list {
  396. .picker-box {
  397. .el-input__inner {
  398. border: none;
  399. }
  400. .el-range-editor.el-input__inner {
  401. padding: 3px 0px;
  402. }
  403. .el-icon-date {
  404. display: none;
  405. }
  406. .el-range__close-icon {
  407. position: absolute;
  408. right: 0px;
  409. top: 2px;
  410. }
  411. .el-range-editor--mini .el-range-input {
  412. font-size: 14px;
  413. color: rgb(31, 36, 41);
  414. }
  415. }
  416. /deep/.el-table tr {
  417. cursor: pointer;
  418. }
  419. }
  420. </style>