zwTable.vue 12 KB

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