<template>
<div class="user-manage">
<div class="query-form">
<el-form ref="form" :inline="true" :model="queryForm">
<el-form-item label="审批状态" prop="applyState">
<el-select v-model="queryForm.applyState">
<el-option value="" label="全部"></el-option>
<el-option :value="1" label="待审批"></el-option>
<el-option :value="2" label="审批中"></el-option>
<el-option :value="3" label="审批拒绝"></el-option>
<el-option :value="4" label="审批通过"></el-option>
<el-option :value="5" label="作废"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getApplyList">查询</el-button>
<el-button @click="handleReset('form')">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="base-table">
<div class="action"></div>
<el-table :data="applyList">
<el-table-column
v-for="item in columns"
:key="item.prop"
:prop="item.prop"
:label="item.label"
:width="item.width"
:formatter="item.formatter"
>
</el-table-column>
<el-table-column label="操作" width="150">
<template
<el-button
size="mini"
@click="handleDetail(scope.row)"
v-if="
scope.row.curAuditUserName == userInfo.userName &&
[1, 2].includes(scope.row.applyState)
"
>审核</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
class="pagination"
background
layout="prev, pager, next"
:total="pager.total"
:page-size="pager.pageSize"
@current-change="handleCurrentChange"
/>
</div>
<el-dialog
title="审核"
width="50%"
v-model="showDetailModal"
destroy-on-close
>
<el-form
ref="dialogForm"
:model="auditForm"
label-width="120px"
label-suffix=":"
:rules="rules"
>
<el-form-item label="申请人">
<div>{{ detail.applyUser.userName }}</div>
</el-form-item>
<el-form-item label="休假类型">
<div>{{ detail.applyTypeName }}</div>
</el-form-item>
<el-form-item label="休假时间">
<div>{{ detail.time }}</div>
</el-form-item>
<el-form-item label="休假时长">
<div>{{ detail.leaveTime }}</div>
</el-form-item>
<el-form-item label="休假原因">
<div>{{ detail.reasons }}</div>
</el-form-item>
<el-form-item label="审批状态">
<div>{{ detail.applyStateName }}</div>
</el-form-item>
<el-form-item label="审批人">
<div>{{ detail.curAuditUserName }}</div>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
type="textarea"
:rows="3"
placeholder="请输入审核备注"
v-model="auditForm.remark"
/>
</el-form-item>
</el-form>
<template
<span class="dialog-footer">
<el-button @click="handleApprove('pass')">审核通过</el-button>
<el-button @click="handleApprove('refuse')" type="primary"
>驳回</el-button
>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import { getCurrentInstance, onMounted, reactive, ref, toRaw } from "vue"
import utils from "../utils/utils"
export default {
name: "approve",
setup() {
// 获取Composition API 上下文对象
const { ctx } = getCurrentInstance()
const queryForm = reactive({
applyState: 1,
})
const pager = reactive({
pageNum: 1,
pageSize: 10,
total: 0,
})
// 定义动态表格-格式
const columns = reactive([
{
label: "单号",
prop: "orderNo",
},
{
label: "申请人",
prop: "",
formatter(row) {
return row.applyUser.userName
},
},
{
label: "休假时间",
prop: "",
formatter(row) {
return (
utils.formateDate(new Date(row.startTime), "yyyy-MM-dd") +
"到" +
utils.formateDate(new Date(row.endTime), "yyyy-MM-dd")
)
},
},
{
label: "休假时长",
prop: "leaveTime",
},
{
label: "休假类型",
prop: "applyType",
formatter(row, column, value) {
return {
1: "事假",
2: "调休",
3: "年假",
}[value]
},
},
{
label: "休假原因",
prop: "reasons",
},
{
label: "申请时间",
prop: "createTime",
width: 180,
formatter: (row, column, value) => {
return utils.formateDate(new Date(value))
},
},
{
label: "审批人",
prop: "auditUsers",
},
{
label: "当前审批人",
prop: "curAuditUserName",
},
{
label: "审批状态",
prop: "applyState",
formatter: (row, column, value) => {
// 1:待审批 2:审批中 3:审批拒绝 4:审批通过 5:作废
return {
1: "待审批",
2: "审批中",
3: "审批拒绝",
4: "审批通过",
5: "作废",
}[value]
},
},
])
// 申请列表
const applyList = ref([])
// 创建休假弹框表单
const leaveForm = reactive({
applyType: 1,
startTime: "",
endTime: "",
leaveTime: "0天",
reasons: "",
})
const showDetailModal = ref(false)
// 详情弹框对象
let detail = ref({})
const userInfo = ctx.$store.state.userInfo
// 表单规则
const rules = {
remark: [
{
required: true,
message: "请输入审核备注",
trigger: "change",
},
],
}
const auditForm = reactive({
remark: "",
})
// 初始化接口调用
onMounted(() => {
getApplyList()
})
// 加载申请列表
const getApplyList = async () => {
let params = { ...queryForm, ...pager, type: "approve" }
let { list, page } = await ctx.$api.getApplyList(params)
applyList.value = list
pager.total = page.total
}
// 重置查询表单
const handleReset = (form) => {
ctx.$refs[form].resetFields()
}
// 分页事件处理
const handleCurrentChange = (current) => {
pager.pageNum = current
getUserList()
}
// 弹框关闭
const handleClose = () => {
showDetailModal.value = false
handleReset("dialogForm")
}
const handleDetail = (row) => {
let data = { ...row }
data.applyTypeName = {
1: "事假",
2: "调休",
3: "年假",
}[data.applyType]
data.time =
utils.formateDate(new Date(data.startTime), "yyyy-MM-dd") +
"到" +
utils.formateDate(new Date(data.endTime), "yyyy-MM-dd")
// 1:待审批 2:审批中 3:审批拒绝 4:审批通过 5:作废
data.applyStateName = {
1: "待审批",
2: "审批中",
3: "审批拒绝",
4: "审批通过",
5: "作废",
}[data.applyState]
detail.value = data
showDetailModal.value = true
}
const handleApprove = (action) => {
ctx.$refs.dialogForm.validate(async (valid) => {
if (valid) {
let params = {
action,
remark: auditForm.remark,
_id: detail.value._id,
}
try {
await ctx.$api.leaveApprove(params)
handleClose()
ctx.$message.success("处理成功")
getApplyList()
ctx.$store.commit(
"saveNoticeCount",
ctx.$store.state.noticeCount - 1
)
} catch (error) {}
}
})
}
return {
queryForm,
pager,
columns,
handleCurrentChange,
handleReset,
getApplyList,
applyList,
auditForm,
showDetailModal,
handleClose,
rules,
detail,
userInfo,
handleDetail,
handleApprove,
}
},
}
</script>
