otherTable.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  1. <!-- 设备设施其他事项 -->
  2. <template>
  3. <div class='qt-list'>
  4. <div class='eq-list-top'>
  5. <el-input
  6. placeholder='搜索记录事项位置内容'
  7. style='width:192px;margin-right:12px'
  8. size='small'
  9. prefix-icon='el-icon-search'
  10. v-model='keyword'
  11. clearable
  12. @keyup.enter.native='getList'
  13. @blur='getList'
  14. ></el-input>
  15. <div class='picker-box'>
  16. <span class='picker-span'>选择处理日期:</span>
  17. <el-date-picker
  18. style='width:190px'
  19. v-model='handledate'
  20. value-format='yyyyMMdd'
  21. type='daterange'
  22. @change='getList'
  23. size='mini'
  24. range-separator='-'
  25. start-placeholder
  26. end-placeholder
  27. ></el-date-picker>
  28. </div>
  29. <Select
  30. width='180'
  31. tipPlace='top'
  32. caption='处置结果:'
  33. v-model='handleresults'
  34. :selectdata='handleOption'
  35. :placeholder='"请选择"'
  36. @change='getList'
  37. ></Select>
  38. </div>
  39. <el-table :data='tableData' :border='true' style='width: 100%'>
  40. <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
  41. <el-table-column prop='lb' label='其他事项详情' align='center'>
  42. <el-table-column prop='zlwfwe' label='记录事项' show-overflow-tooltip resizable min-width='320'>
  43. <template slot-scope='{row}'>{{row.jlsx || '--'}}</template>
  44. </el-table-column>
  45. <el-table-column prop label='位置' show-overflow-tooltip resizable width='425'>
  46. <template slot-scope='{row}'>{{row.description || '--'}}</template>
  47. </el-table-column>
  48. <el-table-column prop='content' label='内容' show-overflow-tooltip resizable width='260'>
  49. <template slot-scope='{row}'>{{row.content || '--'}}</template>
  50. </el-table-column>
  51. <el-table-column prop='sl' label='数量' width='80'>
  52. <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template>
  53. </el-table-column>
  54. </el-table-column>
  55. <el-table-column prop='zfje' label='金额(万元)' width='80' align='right'>
  56. <template slot-scope='{row}'>{{number_format(row.zfje,2) || '--'}}</template>
  57. </el-table-column>
  58. <el-table-column prop='handledate' label='处理日期' width='130'>
  59. <template slot-scope='{row}'>{{row.handledate?formatter(row.handledate): '--'}}</template>
  60. </el-table-column>
  61. <el-table-column prop='handleresults' label='处置结果' show-overflow-tooltip resizable width='100'>
  62. <template slot-scope='{row}'>{{row.handleresults || '--'}}</template>
  63. </el-table-column>
  64. <el-table-column prop='zlwfwz ' label='资料存放位置' show-overflow-tooltip resizable width='100'>
  65. <template slot-scope='{row}'>{{row.zlwfwz || '--'}}</template>
  66. </el-table-column>
  67. <el-table-column prop='recordtime' label='记录日期' width='140'>
  68. <template slot-scope='{row}'>{{row.createdate?formatter(row.createdate): '--'}}</template>
  69. </el-table-column>
  70. </el-table>
  71. <div class='foot'>
  72. <el-pagination
  73. background
  74. layout='prev, pager, next'
  75. :total='total'
  76. :page-size='size'
  77. @prev-click='pageChanged'
  78. @next-click='pageChanged'
  79. @current-change='pageChanged'
  80. ></el-pagination>
  81. </div>
  82. </div>
  83. </template>
  84. <script>
  85. import { queryQtsx } from '@/api/equipmentList.js'
  86. import { mapGetters } from 'vuex'
  87. import { formatter, number_format } from '@/utils/format.js'
  88. import { querySelect } from '@/api/public.js'
  89. import { Select } from 'meri-design'
  90. export default {
  91. data() {
  92. return {
  93. tableData: [],
  94. total: 0,
  95. formatter,
  96. number_format,
  97. currentPage: 1,
  98. size: 10,
  99. keyword: '',
  100. handleresults: '',
  101. handledate: '',
  102. handleOption: []
  103. }
  104. },
  105. props: ['major', 'smsxt', 'tabLabel'],
  106. computed: {
  107. ...mapGetters(['floorSelect'])
  108. },
  109. methods: {
  110. //序号的方法
  111. indexMethod(index) {
  112. return (this.currentPage - 1) * this.size + index + 1
  113. },
  114. pageChanged(page) {
  115. this.currentPage = page
  116. this.getList()
  117. },
  118. getList() {
  119. let getParams = {
  120. data: {
  121. smsxt: this.smsxt,
  122. // tab: this.major,
  123. plazaId: this.$store.state.plazaId,
  124. page: this.currentPage,
  125. size: this.size
  126. }
  127. }
  128. //输入框
  129. getParams.data.keyword = ''
  130. if (this.keyword) {
  131. getParams.data.keyword += `${this.keyword}:jlsx,location,content;`
  132. }
  133. if (getParams.data.keyword == '') {
  134. delete getParams.data.keyword
  135. }
  136. //时间
  137. if (this.handledate) {
  138. getParams.data.handledateStartDate = this.handledate[0] + '000000'
  139. getParams.data.handledateEndDate = this.handledate[1] + '000000'
  140. }
  141. //下拉
  142. if (this.handleresults) {
  143. getParams.data.handleresults = this.handleresults
  144. }
  145. queryQtsx(getParams).then(res => {
  146. //console.log(res)
  147. this.tableData = res.data ? res.data : []
  148. this.total = res.count
  149. })
  150. },
  151. //下拉框查询
  152. tabFind() {
  153. let postParams = [
  154. {
  155. columnName: { handleresults: 'handleresults' },
  156. tableName: 'sms_qtsx' //视图名称
  157. }
  158. ]
  159. let major
  160. if (this.major.slice(0, 2) == 'GD') {
  161. major = '供电'
  162. } else if (this.major.slice(0, 2) == 'XF') {
  163. major = '消防'
  164. } else if (this.major.slice(0, 2) == 'GPS') {
  165. major = '给排水'
  166. } else if (this.major.slice(0, 2) == 'DT') {
  167. major = '电梯'
  168. } else if (this.major.slice(0, 2) == 'RQ') {
  169. major = '燃气'
  170. } else if (this.major.slice(0, 2) == 'RD') {
  171. major = '弱电'
  172. } else if (this.major.slice(0, 2) == 'NT') {
  173. major = '暖通'
  174. } else if (this.major.slice(0, 2) == 'TJ') {
  175. major = '土建'
  176. } else {
  177. major = this.major
  178. }
  179. let data = {
  180. major: major,
  181. plazaId: this.$store.state.plazaId
  182. }
  183. querySelect({ data, postParams }).then(res => {
  184. //console.log(res)
  185. let handleresults = res.data.data.sms_qtsx.handleresults
  186. this.handleOption = []
  187. handleresults.forEach(el => {
  188. this.handleOption.push({
  189. name: el.value,
  190. id: el.key
  191. })
  192. })
  193. })
  194. }
  195. },
  196. watch: {
  197. smsxt(newV, oldV) {
  198. if (newV !== oldV) {
  199. this.tabFind()
  200. this.getList()
  201. }
  202. },
  203. tabLabel(newV, oldV) {
  204. if (newV !== oldV) {
  205. this.tabFind()
  206. this.getList()
  207. }
  208. },
  209. handleresults() {
  210. this.getList()
  211. }
  212. },
  213. mounted() {
  214. this.tabFind()
  215. //console.log(this.smsxt)
  216. this.getList()
  217. }
  218. }
  219. </script>
  220. <style lang="less" scoped>
  221. .qt-list {
  222. .eq-list-top {
  223. display: flex;
  224. margin-bottom: 12px;
  225. .picker-box {
  226. display: flex;
  227. align-items: center;
  228. background: #fff;
  229. padding: 0 6px;
  230. border: 1px solid #dcdfe6;
  231. border-radius: 4px;
  232. height: 32px;
  233. box-sizing: border-box;
  234. margin-right: 12px;
  235. .picker-span {
  236. margin-right: 6px;
  237. color: rgba(0, 0, 0, 0.65);
  238. }
  239. }
  240. }
  241. td {
  242. overflow: hidden;
  243. text-overflow: ellipsis;
  244. white-space: nowrap;
  245. }
  246. .foot {
  247. height: 32px;
  248. display: flex;
  249. justify-content: flex-end;
  250. margin-top: 28px;
  251. }
  252. }
  253. </style>
  254. <style lang="less" >
  255. .qt-list {
  256. .picker-box {
  257. .el-input__inner {
  258. border: none;
  259. }
  260. .el-range-editor.el-input__inner {
  261. padding: 3px 0px;
  262. }
  263. .el-icon-date {
  264. display: none;
  265. }
  266. .el-range__close-icon {
  267. position: absolute;
  268. right: 0px;
  269. top: 2px;
  270. }
  271. .el-range-editor--mini .el-range-input {
  272. font-size: 14px;
  273. color: rgb(31, 36, 41);
  274. }
  275. }
  276. }
  277. </style>