123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160 |
- <template>
- <el-drawer
- title="员工变更记录"
- :visible.sync="show"
- direction="rtl"
- size="75%"
- >
- <div class="pa-3">
- <m-search shadow="never" class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
- <m-table
- v-loading="loading"
- shadow="never"
- :card-title="`员工变更记录 [ 截止 ${exportTime} ] `"
- :headers="headers"
- :items="items"
- :total="total"
- :page-size="pageInfo.size"
- :page-current="pageInfo.current"
- @page-change="onPageChange"
- >
- <template #card-tools>
- <m-button size="mini" type="orange" icon="el-icon-download" :loading="exportLoading" @click="onExport">导出</m-button>
- </template>
- </m-table>
- </div>
- </el-drawer>
- </template>
- <script>
- import { getRosterVersion, exportRosterVersion } from '@/api/system'
- import { downloadFile } from '@/utils'
- import { mapGetters } from 'vuex'
- import {
- dateFormat
- } from '@/utils/date'
- export default {
- name: 'rosterVersion',
- data () {
- return {
- loading: false,
- headers: [],
- items: [],
- show: false,
- pageInfo: {
- size: 10,
- current: 1
- },
- searchValues: {
- versionDate: dateFormat('YYYY-mm-dd HH:MM:SS', new Date()),
- employeeName: null
- },
- exportTime: dateFormat('YYYY-mm-dd HH:MM:SS', new Date()),
- exportLoading: false
- }
- },
- computed: {
- ...mapGetters(['organizationTree']),
- searchItems () {
- return [
- {
- label: '时间',
- type: 'datePicker',
- prop: 'versionDate',
- options: {
- placeholder: '请选择时间',
- type: 'datetime',
- valueFormat: 'yyyy-MM-dd HH:mm:ss'
- }
- },
- {
- label: '员工名称',
- options: {
- placeholder: '请输入员工名称'
- },
- prop: 'employeeName',
- type: 'input'
- },
- {
- label: '部门名称',
- options: {
- filterable: true,
- clearable: true,
- placeholder: '请选择部门',
- options: this.organizationTree,
- showAllLevels: false,
- props: {
- emitPath: false,
- value: 'organizationNo',
- label: 'organizationName',
- children: 'child'
- }
- },
- prop: 'organizationNo',
- type: 'cascader'
- }
- ]
- }
- },
- methods: {
- async open (headers) {
- this.headers = headers
- this.show = true
- await this.init()
- },
- async init () {
- this.loading = true
- try {
- const { data } = await getRosterVersion({
- page: {
- ...this.pageInfo
- },
- ...this.searchValues
- })
- this.items = data.records.map(e => {
- const date = new Date(e.tradeUnionsTime)
- // 获取年、月、日
- const year = date.getFullYear()
- const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始,所以要加1
- const day = String(date.getDate()).padStart(2, '0')
- return {
- ...e,
- tradeUnionsTimeText: `${year}年${month}月${day}日`
- }
- })
- this.total = data.total
- } catch (error) {
- this.$message.error(error)
- } finally {
- this.loading = false
- }
- },
- async onExport () {
- this.exportLoading = true
- try {
- const { data, name } = await exportRosterVersion({
- versionDate: this.exportTime
- })
- downloadFile(data, name)
- } catch (error) {
- this.$message.error(error)
- } finally {
- this.exportLoading = false
- }
- },
- onSearch () {
- this.pageInfo.current = 1
- this.exportTime = this.searchValues.versionDate
- this.init()
- },
- onPageChange (index) {
- this.pageInfo.current = index
- this.init()
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- </style>
|