otherTable.vue 10 KB

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