zwTable.vue 13 KB

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