Skip to content

P
psa-web
Commit d5f5ad11 authored by yanzhengyang's avatar yanzhengyang
Browse files
Options

费用审批-日常报销修改

parent 242f0ebe
Hide whitespace changes
Inline Side-by-side
Showing with 308 additions and 85 deletions
src/api/costManage/cost.js
View file @ d5f5ad11
......@@ -8,6 +8,14 @@ import request from '@/utils/request'
// })
// }
export const listDailyApprove = (query) => {
return request({
url: '/expenseApproval/dailyExpenseList',
method: 'get',
params: query
})
}
// 日常报销列表
export const listCostManage = (query) => {
return request({
......
src/views/costManage/dailyReimburse/index.vue
View file @ d5f5ad11
......@@ -105,15 +105,15 @@
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="申请人姓名" prop="">
<el-input
v-model="queryParams.endDate"
placeholder="请输入申请人姓名"
style="width: 220px"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="申请人姓名" prop="">-->
<!-- <el-input-->
<!-- v-model="queryParams.endDate"-->
<!-- placeholder="请输入申请人姓名"-->
<!-- style="width: 220px"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
</div>
</transition>
</el-form>
......
src/views/costManage/examineAndApprove/components/dailyReimburseApprove.vue
View file @ d5f5ad11
......@@ -35,7 +35,7 @@
</el-form-item>
<el-form-item label="审批状态" prop="projectStatus">
<el-select
v-model="queryParams.projectStatus"
v-model="queryParams.approveStatus"
placeholder="请选择项目状态"
style="width: 220px"
clearable
......@@ -50,8 +50,8 @@
</el-form-item>
<!-- 操作按钮 -->
<el-form-item style="padding-left: 5.4%">
<el-button icon="Refresh" @click="resetQuery" class="el-button-defalut">重置</el-button>
<el-button type="primary" icon="Search" @click="handleQuery" class="el-button-primary">查询</el-button>
<el-button icon="Refresh" @click="reset" class="el-button-defalut">重置</el-button>
<el-button type="primary" icon="Search" @click="onSearch" class="el-button-primary">查询</el-button>
<el-button size="large" type="text" @click="toggleSearch">
{{ isExpanded ? ' 收起' : ' 展开' }}
<el-icon class="el-icon--right">
......@@ -94,7 +94,7 @@
</el-form-item>
<el-form-item label="报销月份">
<el-date-picker
v-model="dateRange"
v-model="queryParams.reimbursementMonth"
value-format="YYYY-MM"
type="month"
placeholder="请选择报销月份"
......@@ -116,8 +116,8 @@
</div>
<!-- 按钮-->
<div>
<el-button class="el-button-defalut" type="default" @click="">一键驳回</el-button>
<el-button class="el-button-primary" style="margin-left: 20px" type="primary" @click="">一键通过</el-button>
<el-button class="el-button-defalut" @click="oneClickNotPass">一键驳回</el-button>
<el-button class="el-button-primary" style="margin-left: 20px" type="primary" @click="oneClickPass">一键通过</el-button>
</div>
</div>
......@@ -126,29 +126,33 @@
<text class="text1">审批流程</text>
<div class="text2">
<text>项目编号</text>
<text>{{}}</text>
<text>{{changProjectNumber}}</text>
</div>
<div >
<FlowChart :dataList="list" :itemWidth="'130px'" :activeIndex="2"/>
</div>
</div>
<!-- 表格数据 -->
<el-table :data="projectList" border style="width: 100%">
<el-table @cell-mouse-enter="handleHover" @cell-mouse-leave="handleLeave" :data="costManageList" border @selection-change="handleSelectionChange">
<el-table-column type="selection" width="40" align="right"/>
<el-table-column label="申请人" align="center" prop="shenqingren" fixed width="100px"/>
<el-table-column label="申请人" align="center" prop="approvalUser" fixed width="100px"/>
<el-table-column label="项目编号" align="center" prop="projectNumber" width="180px"/>
<el-table-column label="项目名称" align="center" prop="projectName" width="120px"/>
<el-table-column label="项目经理" align="center" prop="projectUserName" width="120px"/>
<el-table-column label="事业部负责人" align="center" prop="departmentUserName" width="150px"/>
<el-table-column label="提交时间" align="center" prop="registrationTime" width="180px"/>
<el-table-column label="报销月份" align="center" prop="reimbursement" width="120px"/>
<el-table-column label="餐饮费" align="center" prop="totalFoodCost" width="100px"/>
<el-table-column label="交通费" align="center" prop="totalTaxiCost" width="100px"/>
<el-table-column label="项目经理" align="center" prop="projectManager" width="120px"/>
<el-table-column label="事业部负责人" align="center" prop="businessMan" width="150px"/>
<el-table-column label="提交时间" align="center" prop="createTime" width="180px"/>
<el-table-column label="报销月份" align="center" prop="reimbursementMonth" width="120px"/>
<el-table-column label="餐饮费" align="center" prop="cateringExpenses" width="100px"/>
<el-table-column label="交通费" align="center" prop="transportExpense" width="100px"/>
<el-table-column label="总额" align="center" prop="totalMoney" width="100px"/>
<el-table-column label="审批状态" align="center" prop="status" width="100px"/>
<el-table-column label="审批状态" align="center" prop="approvalStatus" width="100px">
<template #default="{ row }">
<dict-tag :options="cost_daily_status" :value="row.approvalStatus"/>
</template>
</el-table-column>
<el-table-column prop="detail" label="详情" align="center" width="100px">
<el-tooltip content="详情" placement="top">
<el-button link type="text" @click="handleView()">
<el-button link type="text" @click="handleView(scope.row)">
<img src="@/assets/icons/common/check.png" height="32" width="32"/>
</el-button>
</el-tooltip>
......@@ -156,8 +160,8 @@
<!-- 操作按钮-->
<el-table-column label="操作" align="center" fixed="right" width="120px">
<template #default="scope" >
<el-button link type="primary" size="small" style="font-size: 15px">通过</el-button>
<el-button link @click="dialogFormVisible = true" type="danger" size="small" style="font-size: 15px">驳回</el-button>
<el-button :disabled="scope.row.currentStatus !== 0" link @click="passProjectCost(scope.row)" type="primary" size="small" style="font-size: 15px">通过</el-button>
<el-button :disabled="scope.row.currentStatus !== 0" link @click="reject(scope.row)" type="danger" size="small" style="font-size: 15px">驳回</el-button>
</template>
</el-table-column>
</el-table>
......@@ -167,85 +171,70 @@
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="projectList"
@pagination="getList"
/>
</div>
</div>
<!-- 驳回弹出框-->
<el-dialog style="width: 745px;height: 300px" v-model="dialogFormVisible" title="驳回" >
<el-dialog style="width: 745px;height: 300px;margin-top: 300px;" :fullscreen="true" v-model="dialogFormVisible" title="驳回" >
<template #header>
<div class="text_weight">驳回<el-divider /></div>
</template>
<div style="padding: 5px;display: flex;flex-direction:column;">
<div class="text">驳回原因</div>
<div style="width: 95%;margin-top:10px"> <el-input :rows="3" type="textarea" v-model="form.name" placeholder="请输入驳回原因" /></div>
<div style="width: 95%;margin-top:10px"> <el-input :rows="3" type="textarea" v-model="rejectObj.groundsForRejection" placeholder="请输入驳回原因" /></div>
</div>
<template #footer>
<div style="position: absolute;left: 35%;display: flex">
<el-button @click="dialogFormVisible = false" class="btn-B">取消</el-button>
<el-button @click="dialogFormVisible" class="btn-A" type="primary">确定</el-button>
<el-button @click="cancelReject" class="btn-B">取消</el-button>
<el-button @click="sureReject" class="btn-A" type="primary">确定</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import {ArrowDown} from "@element-plus/icons-vue";
import FlowChart from '@/components/FlowChart/index.vue'
import {ElMessageBox} from "element-plus";
import {getProjectName, getApproveNodeList, getRoleId} from '@/api/examineAndApprove/examineAndApprove.js'
import {listDailyApprove} from '@/api/costManage/cost.js'
import {useRouter} from "vue-router";
import { ref } from "vue";
const router = useRouter();
const { proxy } = getCurrentInstance();
const { project_status, project_type } = proxy.useDict('project_status', 'project_type');
const list = ref(['个人','项目经理','事业部负责人','财务','总经理']) // 流程图内容,只有值
const { project_status,cost_daily_status ,project_type } = proxy.useDict('project_status','cost_daily_status' ,'project_type');
const list = ref([]) // 流程图内容,只有值
const allList = ref([]) // 流程图内容,值和角色id
const dialogFormVisible = ref(false)
const projectList = ref([
{
shenqingren:'张三',
projectNumber:'20250306RL001',
createTime:'2025-03-18 10:10:34',
projectName:'餐饮项目',
projectUserName:'张三经理',
departmentUserName:'蔡徐坤',
registrationTime:'2025-03-11',
reimbursement:'2025-03',
totalFoodCost:'27',
totalTaxiCost:'1399',
totalMoney:'1426',
status:'进行中'
},
{
shenqingren:'张三',
projectNumber:'20250306RL001',
createTime:'2025-03-18 10:10:34',
projectName:'餐饮项目',
projectUserName:'张三经理',
departmentUserName:'蔡徐坤',
registrationTime:'2025-03-11',
reimbursement:'2025-03',
totalFoodCost:'27',
totalTaxiCost:'1399',
totalMoney:'1426',
status:'进行中'
}
]);
const loading = ref(true);
const total = ref(1);
const dateRange = ref([]);
//当前登录用户角色组
const currentUserRoleInfoList = ref([])
//多选通过的参数list，用于一键通过/驳回
const passObjList = []
//驳回对象
let rejectObj = reactive({
projectCostId :null,
groundsForRejection:null
})
//是否一键驳回标识 false 不是
let oneClickFlag = false
//弹出框
const dialogFormVisible = ref(false)
const changProjectNumber = ref('')
const stepActive = ref(1)
// 更多搜索框
const isExpanded = ref(false);
const data = reactive({
form: {},
queryParams: {
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
projectNumber: null,
......@@ -253,32 +242,258 @@ const data = reactive({
projectType: null,
departmentLeaderId: null,
projectManagerId: null,
projectStatus: null,
},
approvalStatus: null,
reimbursementMonth: null,
});
const { queryParams, form} = toRefs(data);
//一键通过
const oneClickPass = ()=>{
if(!passObjList.length) return ElMessage({
message: '请先选择数据项',
type: 'error'
})
projectCostPass(passObjList).then(res=>{
if(res.code === 200){
getList()
}
})
}
// 切换展开/折叠状态
const toggleSearch = () => {
isExpanded.value = !isExpanded.value;
// 表单 获取所有项目名称
const projectNameList = ref([]);
const getAllProjectName=()=> {
getProjectName(queryParams).then(response => {
projectNameList.value = response.data;
});
}
getAllProjectName()
// 重置表单
const reset = () => {
queryParams.projectName = null
queryParams.projectType = null
queryParams.approveStatus = null
getList()
}
//获取当前用户角色信息
const getRoleInfo = ()=>{
getRoleId().then(res=>{
console.log("角色信息",res)
currentUserRoleInfoList.value = res.data
})
}
//驳回
const reject = (row)=>{
oneClickFlag = false
console.log(row)
dialogFormVisible.value = true
rejectObj.projectCostId = row.id
}
//确定驳回
const sureReject = ()=>{
if(oneClickFlag){
//如果是一键驳回
let list = passObjList.map((item)=>{
return {
projectCostId:item.projectCostId,
groundsForRejection:rejectObj.groundsForRejection
}
})
projectCostNotPass(list).then(res=>{
dialogFormVisible.value = false
cancelReject()
getList()
})
}else {
//不是一键驳回
projectCostNotPass([rejectObj]).then(res=>{
dialogFormVisible.value = false
cancelReject()
getList()
})
}
/** 搜索按钮操作 */
function handleQuery() {
}
//一键驳回
const oneClickNotPass = ()=>{
if(!passObjList.length) return ElMessage({
message: '请先选择数据项',
type: 'error'
})
oneClickFlag = true
dialogFormVisible.value = true
}
/** 重置按钮操作 */
function resetQuery() {
//取消对话框
const cancelReject = ()=>{
dialogFormVisible.value = false
rejectObj = reactive({
projectCostId :null,
groundsForRejection:null
})
}
//表格多选
const handleSelectionChange = (val) => {
passObjList.length = 0
for(let item of val){
let currentAuditRoleId = item.currentAuditRoleId
//获取currentAuditRoleId的下标
let index = allList.value.findIndex(item=>item.nodeId === currentAuditRoleId)
let obj = {
//项目费用id
projectCostId:item.id,
//下一个节点nodeId
nextNodeId:null,
//是否终审
isEndApproval:false
}
//判断是不是最后一个下标
if((allList.value.length -1) === index){
//最后一个下标的话
obj.nextNodeId = allList.value[index].nodeId
obj.isEndApproval = true
}else{
//不是最后一个下标
obj.nextNodeId = allList.value[index + 1].nodeId
obj.isEndApproval = false
}
passObjList.push(obj)
}
};
//只有待审批的表格可选
const rowSelectable = (row) => {
return row.currentStatus === 0
};
//获取当前审批状态 返回值0表示当前用户可以审核，大于0已经审核过了，小于0表示表示还没到当前用户
const approvalStatusChange = (status,currentNodeId)=>{
//如果状态为未通过，那么这里返回-999
if(status === 1) return -999
if(status === 3) return 999
// 先根据每个节点的激活nodeid查找对应的角色id---也就是可以申请的角色
let activeRoleId = allList.value.find(item =>item.nodeId === currentNodeId).roleId
let lastCurrentRoleId = currentUserRoleInfoList.value[currentUserRoleInfoList.value.length - 1].roleId
//激活id的下标减去当前登录用户最后一个角色id的在整体审批列表差
//0表示当前用户可以审核，大于0已经审核过了，小于0表示表示还没到当前用户
return allList.value.findIndex(item =>item.roleId === activeRoleId) - allList.value.findIndex(item =>item.roleId === lastCurrentRoleId)
}
//通过
const passProjectCost = (row)=>{
console.log(row)
let currentAuditRoleId = row.currentAuditRoleId
//获取currentAuditRoleId的下标
let index = allList.value.findIndex(item=>item.nodeId === currentAuditRoleId)
let obj = {
//项目费用id
projectCostId:row.id,
//下一个节点nodeId
nextNodeId:null,
//是否终审
isEndApproval:false
}
//判断是不是最后一个下标
if((allList.value.length -1) === index){
//最后一个下标的话
obj.nextNodeId = allList.value[index].nodeId
obj.isEndApproval = true
}else{
//不是最后一个下标
obj.nextNodeId = allList.value[index + 1].nodeId
obj.isEndApproval = false
}
projectCostPass([obj]).then(res=>{
console.log("响应",res)
if(res.code === 200){
getList()
}
})
}
//获取列表第一个顶部信息
const getTopApproveInfo = ()=>{
let item2 = costManageList[0]
changProjectNumber.value = item2.projectNumber
let i = allList.value.findIndex((item)=>item.nodeId === item2.currentAuditRoleId)
if(i === -1) stepActive.value = 1
else stepActive.value = i+1
}
//表格的鼠标进入事件
let timer = null;
const handleHover = (row, column, cell, event) => {
//防抖
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
changProjectNumber.value = row.projectNumber
let i = allList.value.findIndex((item)=>item.nodeId === row.currentAuditRoleId)
if(i === -1) stepActive.value = 1
else stepActive.value = i+1
}, 300);
}
const handleLeave = () => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
getTopApproveInfo()
}, 300);
}
//获取所有流程列表,根据审批id
const getNodeList = ()=>{
getApproveNodeList(14).then(res=>{
console.log("lkoi",res)
allList.value = res.data.nodeList
list.value = res.data.nodeList.map(item=>{
return item.roleName
})
})
}
/** 查看详情按钮操作 */
function handleView(){
//日常报销列表
const costManageList = reactive([]);
const getList = () => {
loading.value = true;
listDailyApprove(queryParams).then(res => {
loading.value = false;
total.value = res.total;
Object.assign(costManageList,res.data);
console.log("审批页数据",costManageList);
for(let i in costManageList){
costManageList[i].currentStatus = approvalStatusChange(projectCostRequestList[i].approveStatus,projectCostRequestList[i].currentAuditRoleId)
}
getTopApproveInfo()
})
}
// 切换展开/折叠状态
const toggleSearch = () => {
isExpanded.value = !isExpanded.value;
}
onMounted(async () => {
//获取所有审批列表
await getNodeList()
//获取当前用户角色信息
await getRoleInfo()
//获取列表
await getList()
})
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment