添加1报工审批2添加我的申请

This commit is contained in:
2026-04-22 15:52:58 +08:00
parent 8b3e016568
commit 8b78e82a80
22 changed files with 991 additions and 78 deletions

View File

@@ -0,0 +1,9 @@
import request from '@/utils/request'
export function listMyApply(query) {
return request({
url: '/hrm/my-apply/list',
method: 'get',
params: query
})
}

View File

@@ -0,0 +1,18 @@
import request from '@/utils/request'
export function listTravelCompare (start, end, nickName, workPlace, pageNum, pageSize) {
return request({
url: '/oa/projectReport/travel-compare',
method: 'get',
params: {
...(start ? { start } : {}),
...(end ? { end } : {}),
...(nickName ? { nickName } : {}),
...(workPlace ? { workPlace } : {}),
pageNum,
pageSize,
orderByColumn: 'compareDate',
isAsc: 'desc'
}
})
}

View File

@@ -0,0 +1,273 @@
<template>
<div class="my-apply-page">
<section class="stats-strip">
<el-card shadow="never" class="stat-card">
<div class="stat-label">总申请</div>
<div class="stat-value">{{ summary.total }}</div>
</el-card>
<el-card shadow="never" class="stat-card">
<div class="stat-label">审批中</div>
<div class="stat-value warning">{{ summary.running }}</div>
</el-card>
<el-card shadow="never" class="stat-card">
<div class="stat-label">已通过</div>
<div class="stat-value success">{{ summary.approved }}</div>
</el-card>
</section>
<section class="filters">
<el-card shadow="never" class="filter-card">
<div class="filter-row">
<el-select v-model="query.bizType" placeholder="申请类型" clearable size="small" style="width: 130px" @change="handleFilterChange">
<el-option label="全部" value="" />
<el-option label="请假" value="leave" />
<el-option label="出差" value="travel" />
<el-option label="用印" value="seal" />
<el-option label="报销" value="reimburse" />
<el-option label="拨款" value="appropriation" />
</el-select>
<el-select v-model="query.status" placeholder="状态" clearable size="small" style="width: 130px" @change="handleFilterChange">
<el-option label="全部" value="" />
<el-option label="草稿" value="draft" />
<el-option label="审批中" value="running" />
<el-option label="已通过" value="approved" />
<el-option label="已驳回" value="rejected" />
<el-option label="已撤销" value="revoked" />
</el-select>
<el-input v-model="query.keyword" placeholder="输入申请标题/备注关键词" size="small" clearable style="width: 260px" @keyup.enter.native="handleFilterChange" />
<el-button type="primary" size="small" icon="el-icon-search" @click="handleFilterChange">查询</el-button>
<el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
</div>
</el-card>
</section>
<section class="content">
<el-card shadow="never" class="table-card">
<div slot="header" class="card-header">
<span>申请列表</span>
<el-button size="mini" icon="el-icon-refresh" @click="loadList">刷新</el-button>
</div>
<el-table :data="list" v-loading="loading" stripe @row-dblclick="goDetail" empty-text="暂无申请记录">
<el-table-column label="申请类型" min-width="100">
<template slot-scope="scope">
<el-tag :type="getTypeTagType(scope.row.bizType)">{{ getTypeText(scope.row.bizType) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="申请名称" min-width="240" show-overflow-tooltip>
<template slot-scope="scope">
{{ getRowTitle(scope.row) }}
</template>
</el-table-column>
<el-table-column label="发起人" min-width="140" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.nickName || '-' }}
</template>
</el-table-column>
<el-table-column label="状态" min-width="110">
<template slot-scope="scope">
<el-tag :type="statusType(scope.row.status)" size="small">{{ statusText(scope.row.status) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="发起时间" prop="createTime" min-width="160">
<template slot-scope="scope">{{ formatDate(scope.row.createTime) }}</template>
</el-table-column>
<el-table-column label="操作" min-width="120" fixed="right">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="goDetail(scope.row)">详情</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-wrapper">
<el-pagination
:current-page="query.pageNum"
:page-size="query.pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</el-card>
</section>
</div>
</template>
<script>
import { listMyApply } from '@/api/hrm/myApply'
import applyTypeMinix from '@/views/hrm/minix/applyTypeMinix.js'
export default {
name: 'HrmMyApply',
mixins: [applyTypeMinix],
data () {
return {
loading: false,
list: [],
total: 0,
summary: {
total: 0,
running: 0,
approved: 0
},
query: {
pageNum: 1,
pageSize: 50,
bizType: '',
status: '',
keyword: ''
}
}
},
created () {
this.loadList()
},
methods: {
getRowTitle (row) {
return row.title || row.remark || '-'
},
statusText (status) {
const map = { draft: '草稿', running: '审批中', pending: '审批中', approved: '已通过', rejected: '已驳回', revoked: '已撤销', finished: '已完成' }
return map[status] || status || '-'
},
statusType (status) {
const map = { draft: 'info', running: 'warning', pending: 'warning', approved: 'success', rejected: 'danger', revoked: 'danger', finished: 'success' }
return map[status] || 'info'
},
formatDate (val) {
if (!val) return ''
const d = new Date(val)
const p = n => (n < 10 ? `0${n}` : n)
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
},
handleFilterChange () {
this.query.pageNum = 1
this.loadList()
},
resetQuery () {
this.query = { pageNum: 1, pageSize: 10, bizType: '', status: '', keyword: '' }
this.loadList()
},
async loadList () {
this.loading = true
try {
const res = await listMyApply({
pageNum: this.query.pageNum,
pageSize: this.query.pageSize,
bizType: this.query.bizType || undefined,
status: this.query.status || undefined,
keyword: this.query.keyword || undefined
})
this.list = res.rows || []
this.total = res.total || 0
this.summary.total = res.total || 0
this.summary.running = (res.rows || []).filter(i => ['running', 'pending'].includes(i.status)).length
this.summary.approved = (res.rows || []).filter(i => i.status === 'approved').length
} catch (err) {
console.error('加载我的申请失败:', err)
this.$message.error('加载我的申请失败')
this.list = []
this.total = 0
} finally {
this.loading = false
}
},
handleSizeChange (val) {
this.query.pageSize = val
this.query.pageNum = 1
this.loadList()
},
handleCurrentChange (val) {
this.query.pageNum = val
this.loadList()
},
goDetail (row) {
if (!row) return
const routeMap = {
leave: '/hrm/HrmLeaveDetail',
travel: '/hrm/HrmTravelDetail',
seal: '/hrm/HrmSealDetail',
reimburse: '/hrm/HrmReimburseDetail',
appropriation: '/hrm/HrmAppropriationDetail'
}
const path = routeMap[row.bizType]
if (!path) {
this.$message.warning('暂不支持该申请类型的详情页')
return
}
this.$router.push({ path, query: { bizId: row.bizId } })
}
}
}
</script>
<style lang="scss" scoped>
.my-apply-page {
padding: 16px 20px 32px;
background: #f8f9fb;
}
.stats-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 16px;
}
.stat-card {
border: 1px solid #e6e8ed;
border-radius: 10px;
background: #fff;
text-align: center;
}
.stat-label {
font-size: 12px;
color: #8a8f99;
}
.stat-value {
margin-top: 4px;
font-size: 22px;
font-weight: 800;
color: #2b2f36;
}
.warning { color: #e6a23c; }
.success { color: #67c23a; }
.filter-card,
.table-card {
border: 1px solid #d7d9df;
border-radius: 10px;
}
.filter-row {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 700;
color: #2b2f36;
}
.pagination-wrapper {
margin-top: 16px;
display: flex;
justify-content: flex-end;
}
@media (max-width: 1200px) {
.stats-strip {
grid-template-columns: 1fr;
}
}
</style>

View File

@@ -0,0 +1,239 @@
<template>
<div class="travel-compare-page">
<el-card shadow="never" class="filter-card">
<div class="filter-row">
<div class="filter-item">
<span class="filter-label">姓名</span>
<el-input
v-model="queryParams.nickName"
clearable
size="small"
placeholder="请输入姓名"
style="width: 180px"
/>
</div>
<div class="filter-item">
<span class="filter-label">地点</span>
<el-input
v-model="queryParams.workPlace"
clearable
size="small"
placeholder="请输入报工地点"
style="width: 200px"
/>
</div>
<div class="filter-item">
<span class="filter-label">时间</span>
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
size="small"
clearable
/>
</div>
<el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
<el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
</div>
</el-card>
<el-card shadow="never" class="table-card">
<div slot="header" class="card-header">
<span>报工审核</span>
<el-button size="mini" icon="el-icon-refresh" @click="loadList">刷新</el-button>
</div>
<el-table :data="list" v-loading="loading" stripe empty-text="暂无比对记录">
<el-table-column label="姓名" prop="nickName" min-width="140" />
<el-table-column label="日期" prop="compareDate" min-width="120">
<template slot-scope="scope">{{ formatDate(scope.row.compareDate) }}</template>
</el-table-column>
<el-table-column label="是否出差" min-width="120">
<template slot-scope="scope">
{{ scope.row.isTrip === 1 ? '是' : '否' }}
</template>
</el-table-column>
<el-table-column label="报工地点" prop="workPlace" min-width="180" show-overflow-tooltip />
<el-table-column label="实际出差地点" prop="travelPlace" min-width="180" show-overflow-tooltip />
<el-table-column label="机器比对结果" min-width="140">
<template slot-scope="scope">
<span
:class="[
'result-tag',
scope.row.compareResult === '通过' ? 'pass' : (scope.row.compareResult === '异常' ? 'fail' : 'neutral')
]"
>
{{ scope.row.compareResult }}
</span>
</template>
</el-table-column>
</el-table>
<div class="pagination-wrap">
<el-pagination
background
:current-page="pageNum"
:page-size="pageSize"
:total="total"
layout="total, prev, pager, next, sizes, jumper"
:page-sizes="[10, 20, 50, 100]"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
</el-card>
</div>
</template>
<script>
import { listTravelCompare } from '@/api/oa/projectCompare'
export default {
name: 'OaProjectTravelCompare',
data () {
return {
loading: false,
list: [],
total: 0,
pageNum: 1,
pageSize: 50,
dateRange: [],
queryParams: {
nickName: '',
workPlace: ''
}
}
},
created () {
this.loadList()
},
methods: {
formatDateOnly (date) {
const p = n => (n < 10 ? `0${n}` : `${n}`)
return `${date.getFullYear()}-${p(date.getMonth() + 1)}-${p(date.getDate())}`
},
formatDate (val) {
if (!val) return '-'
const d = new Date(val)
if (Number.isNaN(d.getTime())) return '-'
return this.formatDateOnly(d)
},
handleQuery () {
this.pageNum = 1
this.loadList()
},
async loadList () {
this.loading = true
try {
const [start, end] = this.dateRange || []
const res = await listTravelCompare(
start || null,
end || null,
this.queryParams.nickName,
this.queryParams.workPlace,
this.pageNum,
this.pageSize
)
this.list = res?.rows || []
this.total = res?.total || 0
} catch (err) {
console.error('加载报工审核失败:', err)
this.$message.error('加载报工审核失败')
this.list = []
this.total = 0
} finally {
this.loading = false
}
},
handleCurrentChange (pageNum) {
this.pageNum = pageNum
this.loadList()
},
handleSizeChange (pageSize) {
this.pageSize = pageSize
this.pageNum = 1
this.loadList()
},
resetQuery () {
this.pageNum = 1
this.pageSize = 50
this.queryParams.nickName = ''
this.queryParams.workPlace = ''
this.dateRange = []
this.loadList()
}
}
}
</script>
<style lang="scss" scoped>
.travel-compare-page {
padding: 16px 20px 32px;
}
.filter-card,
.table-card {
border: 1px solid #d7d9df;
border-radius: 10px;
margin-bottom: 16px;
}
.filter-row {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
}
.filter-item {
display: flex;
align-items: center;
gap: 8px;
}
.filter-label {
color: #606266;
font-size: 14px;
white-space: nowrap;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 700;
color: #2b2f36;
}
.pagination-wrap {
display: flex;
justify-content: flex-end;
margin-top: 16px;
}
.result-tag {
display: inline-block;
padding: 4px 10px;
border-radius: 4px;
font-size: 12px;
line-height: 1;
}
.pass {
background: #e8f7ee;
color: #1f8b4c;
}
.fail {
background: #fdecec;
color: #d93026;
}
.neutral {
background: #eef2f7;
color: #5c6b7a;
}
</style>