Commit 3b7eda53 authored by qyx's avatar qyx

费用审批搭建

parent 17e0bdd1
import request from '@/utils/request'
// 查询项目费用申请列表
// 查询项目费用报销列表
export function getReimbursementList(query) {
return request({
url: '/fyglprojectCostReimbursement/getList',
......
<template>
<div class="app-container">
日常报销审批
</div>
</template>
<script setup>
</script>
<style scoped lang="scss">
</style>
<script setup>
</script>
<template>
</template>
<style scoped lang="scss">
</style>
<template>
<div class="app-container">
<!-- 标题 -->
<div class="topDiv">
<span class="bold-text1" style="">项目费用申请</span>
</div>
</div>
</template>
<script setup>
</script>
<style scoped lang="scss">
.topDiv{
margin-bottom: 30px;
padding-left: 8px ;
display: flex;
align-items: center;
justify-content: space-between;
}
.bold-text1 {
border-bottom: 4px solid #0062FF;
padding-bottom: 22px;
height: 15px;
font-family: PingFangSC-Medium;
font-weight: 900;
font-size: 18px;
color: #0D162A;
letter-spacing: 0;
line-height: 15px;
}
</style>
<script setup>
</script>
<template>
</template>
<style scoped lang="scss">
</style>
<script setup>
</script>
<template>
</template>
<style scoped lang="scss">
</style>
<template>
<el-tabs type="border-card" v-model="activeName">
<el-tab-pane label="日常报销" name="first"></el-tab-pane>
<el-tab-pane label="出差申请" name="second"></el-tab-pane>
<el-tab-pane label="差旅报销" name="third"></el-tab-pane>
<el-tab-pane label="项目费用申请" name="fourth"></el-tab-pane>
<el-tab-pane label="项目费用报销" name="fifth"></el-tab-pane>
</el-tabs>
<div class="app-container">
<div class="topDiv">
<span class="bold-text1" style="">费用审批</span>
</div>
<el-tabs type="border-card" v-model="activeName">
<el-tab-pane label="日常报销" name="first">
<daily-reimburse-approve/>
</el-tab-pane>
<el-tab-pane label="出差申请" name="second"></el-tab-pane>
<el-tab-pane label="差旅报销" name="third"></el-tab-pane>
<el-tab-pane label="项目费用申请" name="fourth">
<project-cost-request-approve/>
</el-tab-pane>
<el-tab-pane label="项目费用报销" name="fifth"></el-tab-pane>
</el-tabs>
</div>
</template>
<script setup>
import ProjectCostRequestApprove from "./components/projectCostRequestApprove.vue";
import DailyReimburseApprove from "./components/dailyReimburseApprove.vue";
const activeName = ref('first')
</script>
<style scoped lang="scss">
.topDiv{
margin-bottom: 30px;
padding-left: 8px ;
display: flex;
align-items: center;
justify-content: space-between;
}
.bold-text1 {
border-bottom: 4px solid #0062FF;
padding-bottom: 22px;
height: 15px;
font-family: PingFangSC-Medium;
font-weight: 900;
font-size: 18px;
color: #0D162A;
letter-spacing: 0;
line-height: 15px;
}
</style>
......@@ -15,12 +15,7 @@
<el-row>
<el-col :span="12">
<el-form-item label="项目名称" prop="projectId">
<el-select @change="getProjectDetail" v-model="costReimbursementDetail.projectId" placeholder="请选择项目名称" clearable disabled>
<el-option
v-for="item in projectList.value"
:key="item.projectName"
:label="item.projectName"
:value="item.projectId"/>
<el-select v-model="costReimbursementDetail.projectName" placeholder="请选择项目名称" clearable disabled>
</el-select>
</el-form-item>
</el-col>
......@@ -110,6 +105,7 @@ import {
updateReimbursement
} from "../../../api/projectCostReimbursement/projectCostReimbursement.js";
const route = useRoute();
const formRef = ref()
const projectTypeOptions = reactive([])
......@@ -135,16 +131,11 @@ const FormRules = reactive(
}
)
//获取所有项目
const projectList = reactive([]);
const getProject=()=> {
getProjectList().then(response => {
console.log("项目列表",response.data)
projectList.value = response.data
})
// 重置表单
const resetForm = () => {
costReimbursementDetail.actualAmount = ''
costReimbursementDetail.description = ''
}
getProject()
//获取编辑详情
let type = route.query.type
let id = parseInt(route.query.id)
......@@ -155,12 +146,12 @@ if (type === "新增"){
getCostRequestDetail(id).then(res=>{
console.log("项目详情",res)
Object.assign(costReimbursementDetail, res.data);
getProjectDetail()
})
}else if(type === "编辑"){
//编辑页面
console.log("type",type)
console.log("路由",id)
// 等后端把 少的两个字段返给我 直接调报销详情的接口
getReimbursementDetail(id).then(res=>{
console.log("报销详情",res)
Object.assign(costReimbursementDetail, res.data);
......@@ -180,7 +171,8 @@ const handleSubmit = ()=>{
description:costReimbursementDetail.description
}
if (type === "新增") {
// 发 新增 报销请求
// 发 新增报销 请求
addReimbursement(obj).then(response => {
if (response.code === 200) {
proxy.$modal.msgSuccess("新增成功");
......@@ -190,31 +182,24 @@ const handleSubmit = ()=>{
proxy.$modal.msgError(response.msg)
}
});
} else if (type === "编辑") {
// 发 修改 报销请求
console.log("修改后数据",obj)
// 发 修改报销 请求
updateReimbursement(obj).then(response => {
if (response.code === 200) {
proxy.$modal.msgSuccess("编辑成功");
proxy.$router.push({path: '/costManage/projectCostReimbursement/index'})
proxy.$router.push({path: '/costManage/projectCostReimbursement'})
} else {
proxy.$modal.msgError(response.msg)
}
});
}
}
});
}
// 重置表单
const resetForm = () => {
costReimbursementDetail.projectName = '',
costReimbursementDetail.projectType = '',
costReimbursementDetail.projectId = '',
costReimbursementDetail.costType = '',
costReimbursementDetail.timeOfExpense = '',
costReimbursementDetail.sumMoney = '',
costReimbursementDetail.remark = ''
}
// 取消按钮
const router = useRouter()
const goBackIndex = () => {
......
......@@ -10,12 +10,13 @@
</div>
<!-- 步骤条-->
<div class="shadow_box_bottom_step">
<div v-if="reimbursementDetail" class="shadow_box_bottom_step">
<text class="text1">审批流程</text>
<FlowChart :dataList="list" :widthDontai="'70%'" :activeIndex="reimbursementDetail.reimbursmentApproveStatus === 3 ? 5 :1"/>
<FlowChart :dataList="list" :widthDontai="'70%'" :activeIndex="reimbursementDetail.reimbursmentApproveStatus === 3 ? 5 :3"/>
</div>
<div class="detail">
<!-- 详情-->
<div class="detail" v-if="reimbursementDetail" >
<el-row>
<el-col :span="2"> <span>流水号:</span></el-col>
<el-col :span="22"><div>{{reimbursementDetail.serialNumber}}</div></el-col>
......@@ -91,12 +92,13 @@ const { project_status, project_cost_type,project_cost_request_status,project_ty
const list = ['个人','PM','事业部负责人','财务','领导']
//获取详情
const reimbursementDetail = ref([])
const reimbursementDetail = reactive({})
let id = proxy.$route.query.id;
const getDetail=()=> {
getReimbursementDetail(id).then(response => {
console.log("res",response.data)
reimbursementDetail.value = response.data
Object.assign(reimbursementDetail,response.data);
// reimbursementDetail.value = response.data
});
}
getDetail()
......@@ -138,7 +140,7 @@ onMounted(()=>{
});
})
//返回
// 返回
const goBackReimburseIndex = () => {
router.push({ path: '/costManage/projectCostReimbursement' })
}
......@@ -160,10 +162,6 @@ const goBackReimburseIndex = () => {
color: #4A4E54;;
}
}
.top {
display: flex;
flex-direction: column;
......
......@@ -22,7 +22,7 @@
</el-select>
</el-form-item>
<el-form-item label="审批状态">
<el-select style="width: 220px" v-model="queryParams.approveStatus" placeholder="请选择审批状态" clearable>
<el-select style="width: 220px" v-model="queryParams.reimbursmentApproveStatus" placeholder="请选择审批状态" clearable>
<el-option
v-for="dict in project_cost_request_status"
:key="dict.value"
......@@ -169,7 +169,8 @@ const queryParams = reactive({
projectName:null,
projectNumber:null,
userName:null,
projectType:null
projectType:null,
reimbursmentApproveStatus:null
})
// 定义是否展开的状态
const isExpanded = ref(false);
......@@ -211,10 +212,12 @@ const handleHover = (row) => {
changProjectNumber.value = row.projectNumber
// console.log("当前行的项目编号",row.projectNumber)
const Status = row.reimbursmentApproveStatus;
if (Status === 1 || Status === 2) {
if (Status === 1 ) {
stepActive.value = 1;
} else if (Status === 3) {
stepActive.value = 5;
}else if(Status === 2){
stepActive.value = 3;
}
}
const handleLeave = () => {
......@@ -235,9 +238,8 @@ getAllProjectName()
// 重置表单
const reset = () => {
queryParams.projectName = null
queryParams.projectNumber = null
queryParams.userName = null
queryParams.projectType = null
queryParams.reimbursmentApproveStatus = null
getList()
}
......@@ -275,7 +277,7 @@ const handleView=({id})=> {
//编辑
const handleUpdate=({id})=>{
console.log("编辑"+id)
proxy.$router.push({ path: '/costManage/projectCostReimbursement/add',query: { id: 2,type:"编辑" } });
proxy.$router.push({ path: '/costManage/projectCostReimbursement/add',query: { id: id,type:"编辑" } });
}
//跳转至打印页
......
......@@ -268,7 +268,7 @@ const handleToAdd=({id})=> {
.pagination-box {
padding-right: 43%;
margin-top: 400px;
margin-top: 220px;
}
</style>
......@@ -14,12 +14,7 @@
<FlowChart :dataList="list" :widthDontai="'70%'" :activeIndex="costRequestDetailList.value.approveStatus === 3 ? 5 :1"/>
</div>
<div v-if="costRequestDetailList.value" class="detail">
<!-- <el-row>-->
<!-- <el-col :span="2"> <span>流水号:</span></el-col>-->
<!-- <el-col :span="22"><div>{{costRequestDetailList.value.waterNumber}}</div></el-col>-->
<!-- </el-row>-->
<el-row>
<el-col :span="2"> <span>项目名称:</span></el-col>
<el-col :span="22"><div>{{costRequestDetailList.value.projectName}}</div></el-col>
......@@ -44,22 +39,10 @@
<el-col :span="2"> <span>费用类型:</span></el-col>
<el-col :span="22"><div>{{changeProjectCostType(costRequestDetailList.value.costType)}}</div></el-col>
</el-row>
<!-- <el-row>-->
<!-- <el-col :span="2"> <span>物品描述:</span></el-col>-->
<!-- <el-col :span="22"><div>{{costRequestDetailList.value.description}}</div></el-col>-->
<!-- </el-row>-->
<el-row>
<el-col :span="2"> <span>费用发生时间:</span></el-col>
<el-col :span="22"><div>{{costRequestDetailList.value.timeOfExpense}}</div></el-col>
</el-row>
<!-- <el-row>-->
<!-- <el-col :span="2"> <span>单价:</span></el-col>-->
<!-- <el-col :span="22"><div>{{costRequestDetailList.value.unitPrice}}</div></el-col>-->
<!-- </el-row>-->
<!-- <el-row>-->
<!-- <el-col :span="2"> <span>数量:</span></el-col>-->
<!-- <el-col :span="22"><div>{{costRequestDetailList.value.amount}}</div></el-col>-->
<!-- </el-row>-->
<el-row>
<el-col :span="2"> <span>预计金额(元):</span></el-col>
<el-col :span="22"><div>{{costRequestDetailList.value.sumMoney}}</div></el-col>
......@@ -96,31 +79,14 @@ import { onMounted } from 'vue';
import { getDicts } from "@/api/system/dict/data";
import FlowChart from '@/components/FlowChart/index.vue'
import { reactive, ref} from 'vue'
import { useRouter } from 'vue-router'
import {getCostRequestDetail, getCostRequestList} from "../../../api/projectCostRequest/projectCostRequest.js";
const router = useRouter()
import {getCostRequestDetail} from "../../../api/projectCostRequest/projectCostRequest.js";
import {useRouter} from "vue-router";
const { proxy } = getCurrentInstance();
const { project_status, project_cost_type,project_cost_request_status,project_type} = proxy.useDict('project_status', 'project_cost_type','project_cost_request_status','project_type');
// 流程图内容
const list = ['个人','PM','事业部负责人','财务','领导']
// const costRequestDetailList = reactive({
// waterNumber:null,
// costType:null,
// projectName:null,
// description:null,
// projectNumber:null,
// createTime:null,
// projectType:null,
// unitPrice:null,
// amount:null,
// userName:null,
// sumMoney:null,
// projectStatus:null,
// remark:null,
// approveStatus:null
// timeOfExpense:null
// });
const costRequestDetailList = reactive({})
let projectId = proxy.$route.query.id;
const getDetail=()=> {
......@@ -175,12 +141,11 @@ onMounted(()=>{
// 取消按钮
const router = useRouter()
const goBackIndex = () => {
router.push({ path: '/costManage/projectCostRequest/index' })
}
//报销按钮
// 申请报销按钮
const goToAddReimburse = () => {
console.log(projectId)
router.push({ path: '/costManage/projectCostReimbursement/add',query: { id: projectId,type:"新增" }})
......
......@@ -81,7 +81,7 @@
<div class="contentTable" >
<el-table v-loading="loading" :data="projectCostRequestList" border>
<el-table-column type="selection" align="center"></el-table-column>
<el-table-column prop="createTime" label="申请时间" align="center">
<el-table-column prop="createTime" label="申请时间" align="center" width="190px">
<template #default="{row}">
<span @mouseenter="handleHover(row)" @mouseleave="handleLeave">{{row.createTime}}</span>
</template>
......@@ -106,6 +106,11 @@
<dict-tag :options="project_cost_type" :value="scope.row.costType" @mouseenter="handleHover(scope.row)" @mouseleave="handleLeave"/>
</template>
</el-table-column>
<el-table-column prop="timeOfExpense" label="费用发生时间" align="center">
<template #default="{row}">
<span @mouseenter="handleHover(row)" @mouseleave="handleLeave">{{row.timeOfExpense}}</span>
</template>
</el-table-column>
<el-table-column prop="sumMoney" label="预计金额(元)" align="center">
<template #default="{row}">
<div @mouseenter="handleHover(row)" @mouseleave="handleLeave">{{row.sumMoney}}</div>
......@@ -139,7 +144,6 @@
</el-table-column>
</el-table>
<!-- 分页-->
<div class="pagination-box">
<pagination
......@@ -152,9 +156,6 @@
</div>
</div>
</div >
</template>
......@@ -284,14 +285,8 @@ const handleDelete=(row)=> {
}).catch(() => {
proxy.$modal.msgError("删除失败");
});
}
// 导出列表
</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