rosterVersion.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <template>
  2. <el-drawer
  3. title="员工变更记录"
  4. :visible.sync="show"
  5. direction="rtl"
  6. size="75%"
  7. >
  8. <div class="pa-3">
  9. <m-search shadow="never" class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
  10. <m-table
  11. v-loading="loading"
  12. shadow="never"
  13. :card-title="`员工变更记录 [ 截止 ${exportTime} ] `"
  14. :headers="headers"
  15. :items="items"
  16. :total="total"
  17. :page-size="pageInfo.size"
  18. :page-current="pageInfo.current"
  19. @page-change="onPageChange"
  20. >
  21. <template #card-tools>
  22. <m-button size="mini" type="orange" icon="el-icon-download" :loading="exportLoading" @click="onExport">导出</m-button>
  23. </template>
  24. </m-table>
  25. </div>
  26. </el-drawer>
  27. </template>
  28. <script>
  29. import { getRosterVersion, exportRosterVersion } from '@/api/system'
  30. import { downloadFile } from '@/utils'
  31. import { mapGetters } from 'vuex'
  32. import {
  33. dateFormat
  34. } from '@/utils/date'
  35. export default {
  36. name: 'rosterVersion',
  37. data () {
  38. return {
  39. loading: false,
  40. headers: [],
  41. items: [],
  42. show: false,
  43. pageInfo: {
  44. size: 10,
  45. current: 1
  46. },
  47. searchValues: {
  48. versionDate: dateFormat('YYYY-mm-dd HH:MM:SS', new Date()),
  49. employeeName: null
  50. },
  51. exportTime: dateFormat('YYYY-mm-dd HH:MM:SS', new Date()),
  52. exportLoading: false
  53. }
  54. },
  55. computed: {
  56. ...mapGetters(['organizationTree']),
  57. searchItems () {
  58. return [
  59. {
  60. label: '时间',
  61. type: 'datePicker',
  62. prop: 'versionDate',
  63. options: {
  64. placeholder: '请选择时间',
  65. type: 'datetime',
  66. valueFormat: 'yyyy-MM-dd HH:mm:ss'
  67. }
  68. },
  69. {
  70. label: '员工名称',
  71. options: {
  72. placeholder: '请输入员工名称'
  73. },
  74. prop: 'employeeName',
  75. type: 'input'
  76. },
  77. {
  78. label: '部门名称',
  79. options: {
  80. filterable: true,
  81. clearable: true,
  82. placeholder: '请选择部门',
  83. options: this.organizationTree,
  84. showAllLevels: false,
  85. props: {
  86. emitPath: false,
  87. value: 'organizationNo',
  88. label: 'organizationName',
  89. children: 'child'
  90. }
  91. },
  92. prop: 'organizationNo',
  93. type: 'cascader'
  94. }
  95. ]
  96. }
  97. },
  98. methods: {
  99. async open (headers) {
  100. this.headers = headers
  101. this.show = true
  102. await this.init()
  103. },
  104. async init () {
  105. this.loading = true
  106. try {
  107. const { data } = await getRosterVersion({
  108. page: {
  109. ...this.pageInfo
  110. },
  111. ...this.searchValues
  112. })
  113. this.items = data.records.map(e => {
  114. const date = new Date(e.tradeUnionsTime)
  115. // 获取年、月、日
  116. const year = date.getFullYear()
  117. const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始,所以要加1
  118. const day = String(date.getDate()).padStart(2, '0')
  119. return {
  120. ...e,
  121. tradeUnionsTimeText: `${year}年${month}月${day}日`
  122. }
  123. })
  124. this.total = data.total
  125. } catch (error) {
  126. this.$message.error(error)
  127. } finally {
  128. this.loading = false
  129. }
  130. },
  131. async onExport () {
  132. this.exportLoading = true
  133. try {
  134. const { data, name } = await exportRosterVersion({
  135. versionDate: this.exportTime
  136. })
  137. downloadFile(data, name)
  138. } catch (error) {
  139. this.$message.error(error)
  140. } finally {
  141. this.exportLoading = false
  142. }
  143. },
  144. onSearch () {
  145. this.pageInfo.current = 1
  146. this.exportTime = this.searchValues.versionDate
  147. this.init()
  148. },
  149. onPageChange (index) {
  150. this.pageInfo.current = index
  151. this.init()
  152. }
  153. }
  154. }
  155. </script>
  156. <style lang="scss" scoped>
  157. </style>