zhxg_pc/src/views/workstudy/money/DeptAll.vue

<template>
  <div class="app-container">
    <el-form ref="queryForm" class="lookForm" :model="queryParams" size="mini" :inline="true" label-width="140px">
      <el-form-item label="学生姓名" prop="stuName">
        <el-input v-model="queryParams.stuName" placeholder="请输入学生姓名" clearable
                  @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="岗位名称" prop="postName">
        <el-input v-model="queryParams.postName" placeholder="请输入岗位名称" clearable
                  @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设岗部门" prop="deptName">
        <el-input v-model="queryParams.deptName" placeholder="请输入设岗部门" clearable
                  @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="审核状态" prop="applyStatus">
        <el-select v-model="queryParams.applyStatus" placeholder="请选择审核状态" clearable>
          <el-option v-for="dict in dict.type.qgzx_apply_status" :key="dict.value" :label="dict.label"
                     :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="结算月份" prop="applyTime">
        <el-date-picker v-model="queryParams.applyTime" clearable type="month" value-format="yyyy-MM-dd"
                        placeholder="请选择结算月份"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <!-- <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button> -->
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="printVClick">打印</el-button>

      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="#" align="center" prop="id" />
      <el-table-column label="学号" align="center" prop="stuNo" />

      <el-table-column label="姓名" align="center" prop="stuName" />
      <el-table-column label="学院" align="center" prop="stuDept" />

      <el-table-column label="岗位名称" align="center" prop="postName" />
      <el-table-column label="设岗部门" align="center" prop="deptName" />
      <el-table-column label="岗位类型" align="center" prop="postType" />

      <el-table-column label="工作时长" align="center">
        <template #default="{ row }">
          {{ row.postType == "固定岗位A" ? row.totalTime + "天" : row.totalTime + "小时" }}
        </template>
      </el-table-column>
      <el-table-column label="结算月份" align="center">
        <template #default="{ row }">
          {{ formatDate(row.applyTime) }}
        </template>
      </el-table-column>

      <!-- <el-table-column label="薪资" align="center" prop="applyStatus">
                <template slot-scope="scope">
                    {{ scope.row.totalTime * 15 }}
                </template>
        </el-table-column> -->

      <el-table-column label="审核状态" align="center" prop="applyStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.qgzx_apply_status" :value="scope.row.applyStatus" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="lookVClick(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>



    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList"
    />


    <el-dialog title="查看" :visible.sync="lookV">
      <el-steps :active="getStep(lookForm)">
        <el-step title="指导老师填报薪资" description="" />

        <el-step title="部门领导审批" :status="isEmpty(lookForm.deptCmt) ? 'wait' : getStepStatus(lookForm.deptCmt)">
          <template slot="description">
            <div>
              {{ isEmpty(lookForm.deptNoName) ? '' : lookForm.deptNoName }}
            </div>
            <div>
              {{ isEmpty(lookForm.deptCmt) ? '' : lookForm.deptCmt }}
            </div>
            <div>
              {{ isEmpty(lookForm.deptTime) ? '' : lookForm.deptTime }}
            </div>
          </template>
        </el-step>
        <el-step title="资助办审批" :status="isEmpty(lookForm.highCmt) ? 'wait' : getStepStatus(lookForm.highCmt)">
          <template slot="description">
            <div>
              {{ isEmpty(lookForm.highName) ? '' : lookForm.highName }}
            </div>
            <div>
              {{ isEmpty(lookForm.highCmt) ? '' : lookForm.highCmt }}
            </div>
            <div>
              {{ isEmpty(lookForm.highTime) ? '' : lookForm.highTime }}
            </div>
          </template>
        </el-step>

        <el-step title="学工领导审批"
                 :status="isEmpty(lookForm.finalCmt) ? 'wait' : getStepStatus(lookForm.finalCmt)"
        >
          <template slot="description">
            <div>
              {{ isEmpty(lookForm.finalName) ? '' : lookForm.finalName }}
            </div>
            <div>
              {{ isEmpty(lookForm.finalCmt) ? '' : lookForm.finalCmt }}
            </div>
            <div>
              {{ isEmpty(lookForm.finalTime) ? '' : lookForm.finalTime }}
            </div>
          </template>
        </el-step>
      </el-steps>
      <hr>
      <el-form class="lookForm" size="mini" label-width="148px">
        <el-form-item label="学生">
          <el-input v-model="lookForm.stuName" readonly />
        </el-form-item>
        <el-form-item label="岗位">
          <el-input v-model="lookForm.postName" readonly />
        </el-form-item>
        <el-form-item label="总工作时长">
          <el-input v-model="lookForm.totalTime" readonly />
        </el-form-item>
        <el-form-item label="个人签章">
          <img v-if="lookForm.applySign" :src="baseurl + lookForm.applySign" width="200px" height="50px"
               class="avatar"
          >
        </el-form-item>
        <div v-if="!isEmpty(lookForm.auditRemark)">
          <hr>
          <el-form-item label="审核备注">
            <el-input v-model="lookForm.auditRemark" type="textarea" readonly />
          </el-form-item>
        </div>

        <el-form-item v-if="!isEmpty(lookForm.deptCmt)" label="部门意见">
          <el-input v-model="lookForm.deptCmt" readonly />
        </el-form-item>
        <el-form-item v-if="!isEmpty(lookForm.deptSign)" label="部门签章">
          <img v-if="lookForm.deptSign" :src="baseurl + lookForm.deptSign" width="200px" height="50px"
               class="avatar"
          >
        </el-form-item>

        <el-form-item v-if="!isEmpty(lookForm.highCmt)" label="资助办意见">
          <el-input v-model="lookForm.highCmt" readonly />
        </el-form-item>
        <el-form-item v-if="!isEmpty(lookForm.highSign)" label="资助办签章">
          <img v-if="lookForm.highSign" :src="baseurl + lookForm.highSign" width="200px" height="50px"
               class="avatar"
          >
        </el-form-item>

        <el-form-item v-if="!isEmpty(lookForm.finalCmt)" label="学工处意见">
          <el-input v-model="lookForm.finalCmt" readonly />
        </el-form-item>
        <el-form-item v-if="!isEmpty(lookForm.finalSign)" label="学工处签章">
          <img v-if="lookForm.finalSign" :src="baseurl + lookForm.finalSign" width="200px" height="50px"
               class="avatar"
          >
        </el-form-item>

      </el-form>
    </el-dialog>



    <el-dialog fullscreen :visible.sync="printV">
      <el-row>
        <el-col :span="4">
          <el-input v-model="printQuery.postName" placeholder="请输入岗位名称" clearable />
        </el-col>
        <el-col :span="4">
          <el-date-picker v-model="printQuery.applyTime" clearable type="month" value-format="yyyy-MM-dd"
                          placeholder="请选择需要打印的月份"
          />
        </el-col>
      </el-row>

      <el-button @click="findPrint">查询</el-button>
      <el-button @click="doPrint">打印</el-button>
      <el-button v-show="false" id="doPrint" v-print="printContent">打印</el-button>
      <hr>
      <MoneyPrint id="printDiv"
                  :month="isEmpty(printQuery.applyTime) ? dayjs().format('YYYY年MM月') : dayjs(printQuery.applyTime).format('YYYY年MM月')"
                  :table-data="print_list" :month-days="printMonthDays"
      />
    </el-dialog>

  </div>
</template>
<script>

import { CheckImgExists, fullLoading, isEmpty, getHoliday, isSameMonth } from '@/api/helpFunc'
import MoneyPrint from '@/views/workstudy/components/MoneyPrint'
import TeacherOwnStuPostSelect from '@/views/workstudy/components/TeacherOwnStuPostSelect'

import { getTokenKeySessionStorage as getToken } from '@/utils/auth'


import { doAudit, listDeptAll as getList, checkDeptAll } from '@/api/workstudy/money'
import dayjs from 'dayjs'

export default {
    name: 'Money',
    dicts: ['qgzx_apply_status'],
    components: { TeacherOwnStuPostSelect, MoneyPrint },
    data() {
        return {

            isEmpty,
            dayjs,
            printContent: {
                id: 'printDiv',
                extraCss: '',
                extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
                previewBeforeOpenCallback() {
                    console.log('正在加载预览窗口')
                },
                previewOpenCallback() {
                    console.log('已经加载完预览窗口')
                },
                beforeOpenCallback(vue) {
                    vue.printLoading = true
                    console.log('打开之前')
                },
                openCallback(vue) {
                    vue.printLoading = false
                    console.log('执行了打印')
                },
                closeCallback() {
                    console.log('关闭了打印工具')
                },
                clickMounted(vue) {
                    console.log('点击了打印按钮')
                }
            },

            editV: false,
            applyForm: {
                stuPostId: null
            },
            upload: {
                headers: { Authorization: 'Bearer ' + getToken() },
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + '/common/upload'
            },
            baseurl: process.env.VUE_APP_BASE_API + '/',
            isEmpty,
            loading: false,

            tableData: [],
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                postName: null
            },
            lookForm: {},

            lookV: false,

            auditForm: {
                id: null,
                deptCmt: null
            },

            printV: false,
            printQuery: {
                applyTime: null,
                postName: null,
                pageNum: 1,
                pageSize: 10000,
                applyStatus: '6'
            },
            print_list: [],
            printMonthDays: 21
        }
    },
    created() {
        this.getList()
    },
    methods: {
        async doPrint() {
            if (isEmpty(this.printQuery.applyTime)) {
                this.$message.info('请先选择月份')
                return
            }
            let loading = fullLoading(this)
            let res = await checkDeptAll(this.printQuery)
            loading.close()
            if (res.code == 200) {
                document.getElementById('doPrint').click()
            } else {
                this.$confirm(res.msg + '是否继续打印？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    document.getElementById('doPrint').click()
                })
            }
        },
        formatDate(dateStr) {
            const date = new Date(dateStr)
            const year = date.getFullYear()
            const month = String(date.getMonth() + 1).padStart(2, '0') // 月份是从0开始的，所以需要+1
            return `${year}年${month}月`
        },
        //此方法用于判断步骤条当前步骤的状态
        getStepStatus(data) {
            if (data == '同意') {
                return 'success'
            } else {
                return 'error'
            }
        },

        //此方法用于判断步骤条到哪个步骤了
        getStep(data) {
            if (!isEmpty(data.deptCmt)) { //判断部门领导有没有审批
                return 2
            } else if (!isEmpty(data.highCmt)) { //判断资助办有没有审批
                return 3
            } else if (!isEmpty(data.finalCmt)) { //判断学工处有没有审批
                return 4
            } else {
                return 1
            }
        },
        async findPrint() {
            if (isEmpty(this.printQuery.applyTime)) {
                this.$message.info('请先选择月份')
                return
            }
            let workdayList = []
            let a = new Date()
            a.setFullYear(new Date(this.printQuery.applyTime).getFullYear()) // 设置指定年份
            a.setMonth(new Date(this.printQuery.applyTime).getMonth()) // 设置指定月份
            let days = new Date(a.getFullYear(), a.getMonth() + 1, 0).getDate() // 获取本月一共有多少天  new Date()第3个参数默认为1，就是每个月的1号，把它设置为0时， new Date()会返回上一个月的最后一天，然后通过getDate()方法得到天数
            for (let i = 1; i <= days; i++) {
                a.setDate(i) // 设置月份的日期
                let d = a.getDay() // 获取星期几。 返回0 到 6星期日为 0、星期六为 6。
                if (d > 0 && d < 6) {
                    workdayList.push(a.toLocaleDateString())
                }
            }

            let holidayList = []

            let year = new Date(this.printQuery.applyTime).getFullYear()

            let loading1 = fullLoading(this)
            let res1 = await getHoliday(year)
            loading1.close()
            if (res1.code == 0) {
                let data = { ...res1.holiday }
                for (let key in data) {
                    let dateStr = new Date(this.printQuery.applyTime).getFullYear() + '-' + key
                    if (isSameMonth(new Date(dateStr), this.printQuery.applyTime)) {
                        if (data[key].holiday == true) {
                            holidayList.push(new Date(data[key].date).toLocaleDateString())
                        } else {
                            workdayList.push(new Date(data[key].date).toLocaleDateString())
                        }
                    }
                }
            }

            let tempDayList = []
            workdayList.map(x => {

                holidayList.map(y => {
                    if (x == y) {
                        tempDayList.push(x)
                    }
                })
            })

            workdayList = workdayList.filter(x => !tempDayList.includes(x))

            let workdayCount = workdayList.length

            this.$prompt(dayjs(this.printQuery.applyTime).format('YYYY年MM月') + '的工作日为' + workdayCount + '天,如果有误请填写并点击确定，如果正确就不填直接点击确定', '导出确认', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(|null|-?\d+)$/,
                inputErrorMessage: ''
            }).then(async ({ value }) => {
                if (!isEmpty(value)) {
                    this.printMonthDays = value
                } else {
                    this.printMonthDays = workdayCount
                }

                let loading = fullLoading(this)
                let res = await getList(this.printQuery)
                loading.close()
                if (res.code == 200) {
                    this.print_list = [...res.rows]
                }

            })
        },
        printVClick() {
            this.printV = true
        },
        async handleExport() {
            if (isEmpty(this.queryParams.applyTime)) {
                this.$message.info('请选择月份')
                return
            }

            let workdayList = []
            let a = new Date()
            a.setFullYear(new Date(this.queryParams.applyTime).getFullYear()) // 设置指定年份
            a.setMonth(new Date(this.queryParams.applyTime).getMonth()) // 设置指定月份
            let days = new Date(a.getFullYear(), a.getMonth() + 1, 0).getDate() // 获取本月一共有多少天  new Date()第3个参数默认为1，就是每个月的1号，把它设置为0时， new Date()会返回上一个月的最后一天，然后通过getDate()方法得到天数
            for (let i = 1; i <= days; i++) {
                a.setDate(i) // 设置月份的日期
                let d = a.getDay() // 获取星期几。 返回0 到 6星期日为 0、星期六为 6。
                if (d > 0 && d < 6) {
                    workdayList.push(a.toLocaleDateString())
                }
            }

            let holidayList = []
            let year = new Date(this.queryParams.applyTime).getFullYear()
            let loading = fullLoading(this)
            let res = await getHoliday(year)
            loading.close()
            if (res.code == 0) {
                let data = { ...res.holiday }
                for (let key in data) {
                    let dateStr = new Date(this.queryParams.applyTime).getFullYear() + '-' + key

                    if (isSameMonth(new Date(dateStr), this.queryParams.applyTime)) {

                        if (data[key].holiday == true) {
                            holidayList.push(new Date(data[key].date).toLocaleDateString())
                        } else {
                            workdayList.push(new Date(data[key].date).toLocaleDateString())
                        }
                    }
                }
            }

            console.log(1, workdayList)
            console.log(1, holidayList)
            let tempDayList = []
            workdayList.map(x => {

                holidayList.map(y => {
                    if (x == y) {
                        tempDayList.push(x)
                    }
                })
            })

            workdayList = workdayList.filter(x => !tempDayList.includes(x))

            console.log(2, workdayList)

            let workdayCount = workdayList.length
            console.log(3, workdayCount)

            this.$prompt(dayjs(this.queryParams.applyTime).format('YYYY年MM月') + '的工作日为' + workdayCount + '天,如果有误请填写并点击确定，如果正确就不填直接点击确定', '导出确认', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(|null|-?\d+)$/,
                inputErrorMessage: ''
            }).then(({ value }) => {
                if (!isEmpty(value)) {
                    workdayCount = value
                }

                this.queryParams.workdayCount = workdayCount

                this.download('workstudy/money/deptExport', {
                    ...this.queryParams
                }, dayjs(this.queryParams.applyTime).format('YYYY年MM月') + `勤工助学薪资_${new Date().getTime()}.xlsx`)

            })

        },

        async lookVClick(row) {
            this.lookForm = {}
            this.lookForm = { ...row }
            this.lookV = true
        },

        async getList() {
            this.loading = true
            let res = await getList(this.queryParams)
            this.loading = false
            if (res.code == 200) {
                this.tableData = [...res.rows]
                this.total = res.total
            }
        },
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },

        handleAvatarSuccess(response, file, fileList) {
            this.auditForm.deptSign = response.fileName
            this.$forceUpdate()
        },
        async doAudit() {
            let sdata = { ...this.auditForm }
            if (isEmpty(sdata.deptCmt)) {
                this.$message.info('请选择部门意见')
                return
            }
            if (isEmpty(sdata.deptSign)) {
                this.$message.info('请上传部门签章')
                return
            }

            if (!CheckImgExists(this.baseurl + sdata.deptSign)) {
                this.$message.info('签名失效，请重新上传')
                return
            }

            if (sdata.deptCmt == '同意') {
                sdata.applyStatus = '2'
            } else {
                sdata.applyStatus = '10'
            }

            let loading = fullLoading(this)
            let res = await doAudit(sdata)
            loading.close()
            if (res.code == 200) {
                this.getList()
                this.$message.success(res.msg)
                this.lookV = false
            }
        }
    }
}


</script>

<style scoped lang="scss">
.lookForm {
    .el-form-item {
        margin-bottom: 5px;
    }
}
</style>