Commit ff88548f authored by yanzhengyang's avatar yanzhengyang

Merge remote-tracking branch 'origin/master'

parents ed16b512 2c16c3de
......@@ -42,3 +42,19 @@ export function updateApprovalConfigurationMain(data) {
data:data
})
}
// 修改
export function delMainData(id) {
return request({
url: '/approvalConfiguration/delMain/'+id,
method: 'delete'
})
}
// 详情
export function getNodeListDetail(id) {
return request({
url: '/approvalConfiguration/getNodeList/'+id,
method: 'get'
})
}
<template>
<div class="app-container">
<div class="content" style="position: relative">
<!-- 标题-->
<div >
<span class="bold-text" style="border-bottom: 4px solid #0062FF;">审批流程详情</span>
</div>
<div class="detail">
<el-row>
<el-col :span="2"> <span>审批名称:</span></el-col>
<el-col :span="22"><div>{{nodeDetailObj.approvalName}}</div></el-col>
</el-row>
<el-row>
<el-col :span="2"> <span>审批类型:</span></el-col>
<el-col :span="22"><div>{{changeDictLabel(nodeDetailObj.approveType)}}</div></el-col>
</el-row>
<el-row v-for="(t,i) in nodeDetailObj.nodeList">
<el-col :span="2"> <span>{{getName(i)}}</span></el-col>
<el-col :span="22"><div>{{nodeDetailObj.nodeList[i].roleName}}</div></el-col>
</el-row>
<el-row>
<el-col :span="2"> <span>备注:</span></el-col>
<el-col :span="22"><div>{{nodeDetailObj.remark}}</div></el-col>
</el-row>
</div>
<!-- 取消、提交按钮-->
<div style="position: absolute;right: 52px;bottom: 42px">
<div ><el-button @click="goBackIndex" size="large" type="primary" class="btn-A">返回</el-button></div>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted } from 'vue';
import { getDicts } from "@/api/system/dict/data";
import { getNodeListDetail } from "../../api/approvalConfiguration/approvalConfiguration.js";
import { reactive, ref} from 'vue'
import { useRouter } from 'vue-router'
const { proxy } = getCurrentInstance();
const chineseNumbers = ["1","一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
const projectTypeOptions = reactive([])
const nodeDetailObj = reactive({})
let id = proxy.$route.query.id;
console.log(id)
const getDetail = ()=>{
getNodeListDetail(id).then(res=>{
console.log(res)
Object.assign(nodeDetailObj, res.data);
})
}
const changeDictLabel = (yuan)=>{
for(let item of projectTypeOptions){
if(item.dictValue === yuan) return item.dictLabel
}
}
const getName = (i)=>{
console.log(i)
if(i <= 0 ) return "流程发起人"
else return `第${chineseNumbers[i]}节点审批人`;
}
onMounted(()=>{
getDicts("approve_type").then(response => {
console.log(response)
Object.assign(projectTypeOptions, response.data);
});
getDetail()
})
// 取消按钮
const router = useRouter()
const goBackIndex = () => {
router.push({ path: '/system/approvalConfiguration/index' })
}
</script>
<style scoped lang="scss">
.bold-text {
margin-left: 10px;
padding-bottom: 3px;
width: 72px;
height: 15px;
font-family: PingFangSC-Medium;
font-weight: 900;
font-size: 18px;
color: #0D162A;
letter-spacing: 0;
line-height: 15px;
}
.inner{
box-shadow: 0 0 3px rgba(211, 211, 211, 0.2),
0 0 7px rgba(211, 211, 211, 0.2),
0 0 7px rgba(211, 211, 211, 0.2);
background-color: white;
height: calc(100vh - 130px);
}
.detail{
margin-left: 10px;
margin-top: 34px;
span{
color: #969696;
}
div{
margin-top: 5px;
color: #65676C;
}
.detail_beizhu{
padding: 10px;
width: 480px;
height: 130px;
border: 1px solid #dddddd;
background-color: #FAFAFA;
}
}
.folderAdd {
font-size: 20px;
margin-right: 5px;
}
//步骤条
.shadow_box_bottom_step {
display: flex;
margin: 10px 13px;
padding: 20px 0px;
width: 98%;
justify-content: space-evenly;
align-items: center;
background-color: #F9F9FA;
.text1 {
font-size: 18px;
font-weight: 550;
}
.text2 {
display: flex;
flex-direction: column;
font-size: 18px;
align-items: center;
}
.step {
width: 80%;
}
}
</style>
<template>
<div class="app-container">
<div class="formSearch">
<div class="formSearch" style="display: flex;width: 100%;justify-content: space-between;height: 96px;">
<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
<!-- 默认显示的查询条件 -->
<el-form-item label="审批流程名称" prop="projectName">
......@@ -31,23 +31,21 @@
</el-form-item>
<!-- 操作按钮 -->
<el-form-item style="padding-left: 5.4%">
<el-button @click="resetQuery" class="el-button-defalut">
<template #icon>
<img src="../../assets/icons/common/reset.png" height="25" width="24"/>
</template>
重置
</el-button>
<el-button type="primary" @click="handleQuery" class="el-button-primary">
<template #icon>
<img src="../../assets/icons/common/search.png" height="24" width="24"/>
</template>
查询
</el-button>
</el-form-item>
</el-form>
<div>
<el-button @click="resetQuery" class="el-button-defalut">
<template #icon>
<img src="../../assets/icons/common/reset.png" height="25" width="24"/>
</template>
重置
</el-button>
<el-button type="primary" @click="handleQuery" class="el-button-primary">
<template #icon>
<img src="../../assets/icons/common/search.png" height="24" width="24"/>
</template>
查询
</el-button>
</div>
</div>
<div class="contentTable" style="position: relative">
<div style="" class="topDiv">
......@@ -125,14 +123,13 @@
</template>
<script setup>
import {ref,onMounted,toRaw} from 'vue'
import {ref,onMounted} from 'vue'
import { useRouter } from 'vue-router'
import { getList } from "../../api/approvalConfiguration/approvalConfiguration.js";
import { getList,delMainData } from "../../api/approvalConfiguration/approvalConfiguration.js";
const { proxy } = getCurrentInstance();
import { getDicts } from "@/api/system/dict/data";
const {approve_type} = proxy.useDict('approve_type');
import { ElMessage,ElMessageBox } from 'element-plus'
//变量定义
let approveTypeList = reactive([])
const loading = ref(false)
......@@ -166,10 +163,14 @@ const getDictList = ()=>{
}
const handleUpdate = (row)=>{
console.log(row.id)
router.push({ path: '/system/approvalConfiguration/info',query:{id:row.id,type:"编辑"} })
}
const handleView = (row)=>{
router.push({ path: '/system/approvalConfiguration/detail',query:{id:row.id} })
}
const handleQuery = ()=>{
getTableDataList()
}
......@@ -181,6 +182,33 @@ const resetQuery = ()=>{
getTableDataList()
}
const handleDelete = (row)=>{
// todo 待添加提示框
ElMessageBox.confirm(
'是否删除该审批配置?',
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
delMainData(row.id).then(res=>{
console.log(res)
if(res.code === 200){
ElMessage.success("删除成功")
getTableDataList()
}
})
})
.catch(() => {
})
}
onMounted(()=>{
getTableDataList()
getDictList()
......@@ -211,7 +239,7 @@ onMounted(()=>{
}
.bold-text1 {
border-bottom: 4px solid #0062FF;
padding-bottom: 25px;
padding-bottom: 22px;
height: 15px;
font-family: PingFangSC-Medium;
font-weight: 900;
......
......@@ -2,7 +2,7 @@
<div class="app-container">
<div class="content" style="position: relative">
<div style="padding-left: 10px">
<span class="bold-text" style="border-bottom: 3px solid #0062FF;">新增审批流程</span>
<span class="bold-text" style="border-bottom: 4px solid #0062FF;">新增审批流程</span>
</div>
<div style="padding-top: 40px;">
<el-form ref="formRef" :model="form" :rules="rules" label-width="150px" >
......@@ -243,6 +243,7 @@ onMounted(()=>{
.bold-text {
width: 72px;
height: 15px;
padding-bottom: 3px;
font-family: PingFangSC-Medium;
font-weight: 900;
font-size: 18px;
......
<template>
<div class="app-container">
<div class="content">
<!-- 标题-->
<div class="top">
<div class="top_text">报销申请</div>
<div class="top_line"></div>
</div>
<!-- 申请 报销 表单-->
<div class="addform">
<el-form ref="formRef" :rules="FormRules" :model="costRequestDetail" label-width="auto">
<el-row>
<el-col :span="12">
<el-form-item label="项目名称" prop="projectId">
<el-select @change="getProjectDetail" v-model="costRequestDetail.projectId" placeholder="请选择项目名称" clearable disabled>
<el-option
v-for="item in projectList.value"
:key="item.projectName"
:label="item.projectName"
:value="item.projectId"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="实际金额(元)" prop="shijihjine">
<el-input v-model="costRequestDetail.shijihjine" placeholder="请输入实际金额" clearable/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="费用类型" prop="costType">
<el-select disabled placeholder="请选择费用类型" v-model="costRequestDetail.costType" clearable>
<el-option
v-for="dict in project_cost_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="物品描述" prop="wupinmiaoshu">
<el-input v-model="costRequestDetail.wupinmiaoshu" placeholder="请输入物品描述" clearable/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="费用发生时间" prop="timeOfExpense">
<el-date-picker style="width: 100%;height: 35px"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
v-model="costRequestDetail.timeOfExpense"
type="date"
placeholder="请选择费用发生时间"
clearable
disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<!-- <el-form-item label="上传附件" prop="shangchaunfujian">-->
<!-- -->
<!-- </el-form-item>-->
</el-col>
</el-row>
<el-form-item label="预计金额(元)" prop="sumMoney">
<el-input v-model="costRequestDetail.sumMoney" placeholder="请输入申请金额" disabled/>
</el-form-item>
<el-form-item label="项目类型">
<el-input v-model="projectDetail.projectType" placeholder="请选择项目名称自动填充" disabled/>
</el-form-item>
<el-form-item label="事业部负责人">
<el-input v-model="projectDetail.userName" placeholder="请选择项目名称自动填充" disabled/>
</el-form-item>
<el-form-item label="项目状态">
<el-input v-model="projectDetail.projectStatus" placeholder="请选择项目名称自动填充" disabled/>
</el-form-item>
<el-form-item label="备注">
<el-input disabled v-model="costRequestDetail.remark" :autosize="{ minRows: 4 }" type="textarea" placeholder="请输入备注"/>
</el-form-item>
<!-- 报销可能需要增加的表单-->
<!-- <el-col :span="12">-->
<!-- <el-row >-->
<!-- <el-col :span="7">-->
<!-- <el-form-item label="单价">-->
<!-- <el-input class="danjia_shuliang" v-model="costRequestDetail.unitPrice" placeholder="请输入物品单价" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="5">-->
<!-- <el-form-item label="数量">-->
<!-- <el-input class="danjia_shuliang" v-model="costRequestDetail.amount" placeholder="请输入物品数量" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </el-col>-->
</el-form>
</div>
<!-- 取消、提交按钮-->
<div style="display:flex;padding-left: 75%;margin-top: 100px">
<div style="margin-right: 15px"><el-button @click="goBackIndex" class="btn-B">返回</el-button></div>
<div><el-button @click="handleSubmit" type="primary" class="btn-A">提交</el-button></div>
</div>
</div>
</div>
</template>
<script setup>
import { getDicts } from "@/api/system/dict/data";
import {onMounted, reactive, ref} from 'vue'
import { useRouter } from 'vue-router'
import {
addCostRequest,
getCostRequestList,
getProjectDetailbyId,
getProjectList,
getCostRequestDetail,
updateCostRequest
} from "../../../api/projectCostRequest/projectCostRequest.js";
const { proxy } = getCurrentInstance();
const { project_type , project_status,project_cost_type} = proxy.useDict('project_type','project_status','project_cost_type');
import { useRoute } from 'vue-router';
// 获取当前路由信息
const route = useRoute();
const formRef = ref()
const projectTypeOptions = reactive([])
const projectStatusOptions = reactive([])
const costRequestDetail = reactive({
projectId:null,
costType:null,
timeOfExpense:null,
sumMoney:null,
remark:null,
shijihjine:null,
wupinmiaoshu:null,
shangchaunfujian:null
})
//表单验证
const FormRules = reactive(
{
// projectId: [
// { required: true, message: '请选择项目名称', trigger: 'change' },
// ],
// costType: [
// { required: true, message: '请选择费用类型', trigger: 'change' },
// ],
// timeOfExpense: [
// { required: true, message: '请选择费用发生时间', trigger: 'change' },
// ],
// sumMoney: [
// { required: true, message: '请输入申请金额', trigger: 'blur' },
// ],
shijihjine: [
{ required: true, message: '请输入实际金额', trigger: 'blur' },
],
}
)
//获取所有项目
const projectList = reactive([]);
const getProject=()=> {
getProjectList().then(response => {
console.log("项目列表",response.data)
projectList.value = response.data
})
}
getProject()
//根据项目id自动填充项目详情
const projectDetail = reactive({});
const getProjectDetail=()=> {
getProjectDetailbyId(costRequestDetail.projectId).then(response => {
console.log("项目详情",response)
Object.assign(projectDetail, response.data);
//类型转换
changeProjectStatus()
changeProjectType()
})
}
//获取编辑详情
let type = route.query.type
if (type === "新增"){
//新增页面
console.log("type",type)
}else if(type === "编辑"){
let id = parseInt(route.query.id)
//编辑页面
console.log("type",type)
console.log("路由",id)
getCostRequestDetail(id).then(res=>{
console.log("项目详情",res)
Object.assign(costRequestDetail, res.data);
getProjectDetail()
})
}
//提交按钮
const handleSubmit = ()=>{
formRef.value.validate((valid) => {
if (valid) {
//验证通过
console.log('表单验证通过');
if (type === "新增") {
//发新增 报销 请求
// addCostRequest(costRequestDetail).then(response => {
// if (response.code === 200) {
// proxy.$modal.msgSuccess("新增成功");
// resetForm()
// proxy.$router.push({path: '/costManage/projectCostRequest/index'})
// } else {
// proxy.$modal.msgError(response.msg)
// }
// });
} else if (type === "编辑") {
//发修改 报销 请求
// updateCostRequest(costRequestDetail).then(response => {
// if (response.code === 200) {
// proxy.$modal.msgSuccess("编辑成功");
// proxy.$router.push({path: '/costManage/projectCostRequest/index'})
// } else {
// proxy.$modal.msgError(response.msg)
// }
// });
}
}
});
}
// 重置表单
const resetForm = () => {
costRequestDetail.projectName = '',
costRequestDetail.projectType = '',
costRequestDetail.projectId = '',
costRequestDetail.costType = '',
costRequestDetail.timeOfExpense = '',
costRequestDetail.sumMoney = '',
costRequestDetail.remark = ''
}
// 取消按钮
const router = useRouter()
const goBackIndex = () => {
router.push({path: '/costManage/projectCostRequest/index'})
}
//字典转换
//项目状态字典
const changeProjectType = () => {
let yuan = projectDetail.projectType
for (const item of projectTypeOptions) {
if (item.dictValue === yuan) {
projectDetail.projectType = item.dictLabel
break
}
}
}
//项目类型字典
const changeProjectStatus = () => {
let yuan = projectDetail.projectStatus
for (const item of projectStatusOptions) {
if (item.dictValue === yuan) {
projectDetail.projectStatus = item.dictLabel
break
}
}
}
onMounted(() => {
//项目类型字典
getDicts("project_type").then(response => {
Object.assign(projectTypeOptions, response.data);
console.log("项目类型字典", projectTypeOptions)
});
//项目状态字典
getDicts("project_status").then(response => {
Object.assign(projectStatusOptions, response.data);
});
})
</script>
<style scoped lang="scss">
.inner {
box-shadow: 0 0 3px rgba(211, 211, 211, 0.2),
0 0 7px rgba(211, 211, 211, 0.2),
0 0 7px rgba(211, 211, 211, 0.2);
background-color: white;
height: calc(100vh - 130px);
}
.top {
display: flex;
flex-direction: column;
width: 73px;
margin-left: 40px;
.top_text {
cursor: default;
font-weight: 550;
font-size: 18px;
color: #0d162a;
font-family: 'Microsoft YaHei', sans-serif;
}
.top_line {
border: solid 1px #0062ff;
margin-top: 5px;
height: 4px;
background-color: #0062ff;
}
}
.addform {
margin-left: 50px;
margin-top: 30px;
.el-form-item {
width: 540px;
height: 40px;
}
}
.folderAdd {
font-size: 20px;
margin-right: 5px;
}
//.button {
// display: flex;
// margin-left: 70%;
// margin-top: 130px;
// .button_size {
// width: 116px;
// height: 40px;
// margin: 20px;
// }
//}
//步骤条
.shadow_box_bottom_step {
display: flex;
margin: 10px 13px;
padding: 20px 0px;
width: 98%;
justify-content: space-evenly;
align-items: center;
background-color: #f4f4f4;
.text1 {
font-size: 18px;
font-weight: 550;
}
.text2 {
display: flex;
flex-direction: column;
font-size: 18px;
align-items: center;
}
.step {
width: 80%;
}
}
</style>
......@@ -84,73 +84,56 @@
<!-- 列表-->
<div class="contentTable">
<el-table v-loading="loading" :data="projectCostRequestList" border>
<el-table v-loading="loading" :data="ReimbursementRequestList" border>
<el-table-column type="selection" align="center"></el-table-column>
<el-table-column prop="projectNumber" label="项目编号" align="center">
<el-table-column width="180px" prop="creatTime" label="申请时间" align="center">
<template #default="{row}">
<span @click="handleView(row)" style="color:royalblue;text-decoration:underline;cursor:pointer;">{{row.projectNumber}}</span>
<span @click="handleView(row)" style="color:royalblue;text-decoration:underline;cursor:pointer;">{{row.creatTime}}</span>
</template>
</el-table-column>
<el-table-column
prop="projectName"
label="项目名称"
align="center"
></el-table-column>
<el-table-column
prop="projectType"
label="项目类型"
align="center">
<el-table-column prop="waterNumber" label="流水号" align="center"></el-table-column>
<el-table-column prop="projectName" label="项目名称" align="center"></el-table-column>
<el-table-column prop="projectType" label="项目类型" align="center">
<template #default="{ row }">
<dict-tag :options="project_type" :value="row.projectType"/>
</template>
</el-table-column>
<el-table-column
prop="userName"
label="事业部负责人"
align="center"
></el-table-column>
<el-table-column prop="projectStatus" label="项目状态" align="center">
<template #default="{ row }">
<dict-tag :options="project_status" :value="row.projectStatus"/>
</template>
</el-table-column>
<el-table-column
prop="waterNumber"
label="流水号"
align="center"
></el-table-column>
<el-table-column
prop="timeOfExpense"
label="费用发生时间"
align="center"
></el-table-column>
<el-table-column
prop="expenseType"
label="费用类型"
align="center"
>
<el-table-column prop="timeOfExpense" label="费用发生时间" align="center"></el-table-column>
<el-table-column prop="expenseType" label="费用类型" align="center">
<template #default="scope">
<dict-tag :options="project_cost_type" :value="scope.row.costType"/>
<dict-tag :options="project_cost_type" :value="scope.row.expenseType"/>
</template>
</el-table-column>
<el-table-column
prop="sumMoney"
label="金额(元)"
align="center"
></el-table-column>
<el-table-column
prop="approvalStatus"
label="审批状态"
align="center">
<el-table-column prop="sumMoney" label="实际金额(元)" align="center"></el-table-column>
<el-table-column prop="approvalStatus" label="报销审批状态" align="center">
<template #default="scope">
<dict-tag :options="project_cost_request_status" :value="scope.row.approveStatus"/>
<dict-tag :options="project_cost_request_status" :value="scope.row.approvalStatus"/>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button link type="primary" icon="View" @click="handleView(scope.row)" ></el-button>
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"> </el-button>
<!-- 操作按钮-->
<el-table-column label="操作" align="center" width="230px">
<template #default="scope" >
<el-tooltip content="编辑" placement="top" >
<el-button link type="text" @click="handleUpdate(scope.row)" @mouseenter="handleHover(scope.row)" @mouseleave="handleLeave">
<img src="@/assets/icons/common/edit.png" height="32" width="32"/>
</el-button>
</el-tooltip>
<el-tooltip content="详情" placement="top">
<el-button link type="text" @click="handleView(scope.row)" @mouseenter="handleHover(scope.row)" @mouseleave="handleLeave">
<img src="@/assets/icons/common/check.png" height="32" width="32"/>
</el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="text" @click="handleDelete(scope.row)" @mouseenter="handleHover(scope.row)" @mouseleave="handleLeave">
<img src="@/assets/icons/common/delete.png" height="32" width="32"/>
</el-button>
</el-tooltip>
<el-tooltip content="打印" placement="top">
<el-button link type="text" @click="handlePrint()" @mouseenter="handleHover(scope.row)" @mouseleave="handleLeave">
<img src="@/assets/icons/common/print.png" height="32" width="32"/>
</el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
......@@ -181,7 +164,7 @@ const { project_status, project_cost_type,project_cost_request_status,project_ty
const total = ref(0);
const queryParams = reactive({
pageNum:1,
pageSize:10,
pageSize:1,
projectName:null,
projectNumber:null,
userName:null,
......@@ -195,10 +178,36 @@ const toggleSearch = () => {
}
// 流程图内容
const list = ['个人','PM','事业部负责人','财务','领导','完成']
const list = ['个人','PM','事业部负责人','财务','领导']
// 列表
const ReimbursementRequestList = ref([
{
creatTime: '2025-03-11 17:15:18',
projectName: '校园平台',
projectType: '1',
projectStatus: '1',
waterNumber: 'xmfy-20250210-0002',
timeOfExpense:'2025-02-10',
expenseType:'1',
sumMoney:'300',
approvalStatus:'2'
},
{
creatTime: '2025-03-06 13:49:11',
projectName: '餐饮项目',
projectType: '3',
projectStatus: '0',
waterNumber: 'xmfy-20250305-0001',
timeOfExpense:'2025-03-05',
expenseType:'7',
sumMoney:'900',
approvalStatus:'2'
}
]);
// // 列表
// const projectCostRequestList = ref([]);
//获取列表数据
// const getList=()=> {
// getCostRequestList(queryParams).then(response => {
// console.log("列表",response.rows)
......@@ -208,6 +217,28 @@ const list = ['个人','PM','事业部负责人','财务','领导','完成']
// }
// getList()
//鼠标悬停更改步骤条
const hoverColumnData = ref('');
const stepActive = ref(1);
const changProjectNumber = ref('')
const handleHover = (row) => {
changProjectNumber.value = row.projectNumber
const approveStatus = row.approveStatus;
// console.log("当前行的审批状态",row.approveStatus)
if (approveStatus === 1 || approveStatus === 2) {
stepActive.value = 1;
} else if (approveStatus === 3) {
stepActive.value = 5;
}
// hoverColumnData.value = row.projectNumber; // 根据需要修改为其他列数据
}
const handleLeave = () => {
stepActive.value = 1;
hoverColumnData.value = '';
}
// 重置表单
const reset = () => {
queryParams.projectName = null
......@@ -216,6 +247,8 @@ const reset = () => {
queryParams.projectType = null
getList()
}
// 提交搜索表单
const onSearch = () => {
console.log("queryParams",queryParams)
......@@ -229,7 +262,7 @@ import {getCostRequestDetail, getCostRequestList} from "../../../api/projectCost
import {ArrowDown} from "@element-plus/icons-vue";
const router = useRouter()
const goToApplyPage = () => {
router.push({ path: '/costManage/projectCostReimbursement/apply' ,query:{type:"新增"}})
router.push({ path: '/costManage/projectCostReimbursement/waitReimbursement' ,query:{type:"新增"}})
}
......@@ -237,7 +270,7 @@ const goToApplyPage = () => {
//查看详情
const handleView=({id})=> {
console.log("详情"+id)
proxy.$router.push({ path: '/costManage/projectCostRequest/add', query: { id: id,type:"详情" } });
proxy.$router.push({ path: '/costManage/projectCostReimbursement/detail', query: { id: id,type:"详情" } });
// router.push({ path: '/costManage/projectCostRequest/add', query: { id: id } })
}
......@@ -246,6 +279,13 @@ const handleUpdate=({id})=>{
console.log("编辑"+id)
}
//进打印页
const handlePrint=()=>{
console.log("打印")
proxy.$router.push({ path: '/costManage/projectCostReimbursement/print'});
}
</script>
......@@ -287,7 +327,6 @@ const handleUpdate=({id})=>{
}
}
//步骤条
.shadow_box_bottom_step {
display: flex;
......@@ -313,7 +352,6 @@ const handleUpdate=({id})=>{
}
.list_icon {
color: #477bf5;
margin: 8px;
......
<template>
<div class="app-container">
<div class="formSearch">
<div style="padding-left: 10px">
<span class="bold-text" style="border-bottom: 2px solid #0062FF;">打印报销单</span>
</div>
<div style="padding-top: 30px">
<el-card class="box-card">
<div class="card-header">
<h1>项目费用报销单</h1>
</div>
<div class="card-body">
<el-form
ref="ruleFormRef"
:model="ruleForm"
label-width="100px"
:size="formSize"
>
<el-row :gutter="300">
<el-col :span="12">
<el-form-item label="员工姓名:" >
<el-text>{{ruleForm.projectNumber}}</el-text>
</el-form-item>
<el-form-item label="提交时间:">
<el-text>{{ruleForm.updateTime}}</el-text>
</el-form-item>
<el-form-item label="项目经理:" >
<el-text>{{ruleForm.createBy}}</el-text>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="报销月份:" >
<el-text>{{parseTime(ruleForm.reimbursement,'{y}-{m}')}}</el-text>
</el-form-item>
<el-form-item label="项目名称:" >
<el-text>{{ruleForm.projectName}}</el-text>
</el-form-item>
<el-form-item label="项目类型:" >
<el-text>{{ruleForm.projectType}}</el-text>
</el-form-item>
</el-col>
</el-row>
<!-- <el-form-item>-->
<!-- <el-button type="primary" @click="submitForm(ruleFormRef)">-->
<!-- Create-->
<!-- </el-button>-->
<!-- <el-button @click="resetForm(ruleFormRef)">Reset</el-button>-->
<!-- </el-form-item>-->
</el-form>
<el-table v-loading="loading" :data="ruleForm.childList" class="body-table" border>
<el-table-column type="index" label="序号" align="center" min-width="80px"></el-table-column>
<el-table-column label="费用类别" prop="reimbursementType" align="center" min-width="200px"></el-table-column>
<el-table-column label="金额" prop="money" align="center" min-width="200px"></el-table-column>
<el-table-column label="备注" prop="remark" align="left" fixed="right" min-width="320px"></el-table-column>
</el-table>
<div class="body-bottom">
<el-row :gutter="400">
<el-col :span="12">
<el-text>申请人签字:</el-text>
</el-col>
<el-col :span="12">
<el-text>费用合计:{{totalMoney}}</el-text>
</el-col>
</el-row>
</div>
</div>
<div class="card-footer">
<el-row :gutter="300">
<el-col :span="12">
<div style="margin-bottom: 26px">
<el-form-item label="员工姓名:" label-width="130px">
<el-text>{{ruleForm.projectNumber}}</el-text>
</el-form-item>
</div>
<div style="margin-bottom: 26px">
<el-form-item label="项目经理:" label-width="130px">
<el-text>{{ruleForm.projectNumber}}</el-text>
</el-form-item>
</div>
<div style="margin-bottom: 26px">
<el-form-item label="事业部负责人:" label-width="130px">
<el-text>{{ruleForm.projectNumber}}</el-text>
</el-form-item>
</div>
<div style="margin-bottom: 26px">
<el-form-item label="财务:" label-width="130px">
<el-text>{{ruleForm.projectNumber}}</el-text>
</el-form-item>
</div>
<div style="margin-bottom: 26px">
<el-form-item label="老板:" label-width="130px">
<el-text>{{ruleForm.projectNumber}}</el-text>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div style="margin-bottom: 26px">
<el-form-item label="申请时间:" label-width="100px">
<el-text>{{ruleForm.updateTime}}</el-text>
</el-form-item>
</div>
<div style="margin-bottom: 26px">
<el-form-item label="通过时间:" label-width="100px">
<el-text>{{ruleForm.updateTime}}</el-text>
</el-form-item>
</div>
<div style="margin-bottom: 26px">
<el-form-item label="通过时间:" label-width="100px">
<el-text>{{ruleForm.updateTime}}</el-text>
</el-form-item>
</div>
<div style="margin-bottom: 26px">
<el-form-item label="通过时间:" label-width="100px">
<el-text>{{ruleForm.updateTime}}</el-text>
</el-form-item>
</div>
<div style="margin-bottom: 26px">
<el-form-item label="通过时间:" label-width="100px">
<el-text>{{ruleForm.updateTime}}</el-text>
</el-form-item>
</div>
</el-col>
</el-row>
</div>
</el-card>
<div style="margin-top: 20px;padding-left: 57%">
<el-button size="large" @click="back" class="btn-B"> </el-button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { detailCostManage } from "../../../api/costManage/cost.js";
import {useRoute, useRouter} from 'vue-router';
import {parseTime} from "../../../utils/ruoyi.js";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const loading = ref(true);
const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = ref({
id:null,
projectName: null,
projectNumber: null,
reimbursement: null,
projectType: null,
userName: null,
createBy: null,
updateTime: null,
childList:[{
money: null,
reimbursementType:null,
remark:null,
timeOfExpense:null,
}],
})
const options = Array.from({ length: 10000 }).map((_, idx) => ({
value: `${idx + 1}`,
label: `${idx + 1}`,
}))
// const Id = parseInt(route.params.Id)
// const detailForm = ref([])
function getDetail() {
let id = proxy.$route.query.id
console.log("路由",id)
detailCostManage(id).then(res => {
ruleForm.value = res.data
console.log("我是数据",ruleForm.value.childList)
})
// console.log("坤坤",Id.value)
// console.log("test",ruleForm.value.childList)
loading.value = false
}
// 计算金额总和
const totalMoney = computed(() => {
return ruleForm.value.childList.reduce((sum, item) => sum + item.money, 0);
})
function back(){
router.push('/costManage/projectCostReimbursement')
}
getDetail()
</script>
<style scoped>
.box-card{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 1000px;
}
.card-header{
width: 100%;
height: 100px;
line-height: 100px;
}
.card-body{
width: 100%;
}
.body-table{
margin-top: 20px;
}
.body-bottom{
margin-top: 50px;
}
.card-footer{
margin-top: 50px;
}
.bold-text {
width: 72px;
height: 15px;
font-family: PingFangSC-Medium;
font-weight: 900;
font-size: 18px;
color: #0D162A;
letter-spacing: 0;
line-height: 15px;
}
</style>
......@@ -92,6 +92,11 @@
<img src="@/assets/icons/common/check.png" height="32" width="32"/>
</el-button>
</el-tooltip>
<el-tooltip content="申请报销" placement="top">
<el-button link type="text" @click="handleToAdd(scope.row)" @mouseenter="handleHover(scope.row)" @mouseleave="handleLeave">
<el-icon ><DArrowRight /></el-icon>
</el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="text" @click="handleDelete(scope.row)" @mouseenter="handleHover(scope.row)" @mouseleave="handleLeave">
<img src="@/assets/icons/common/delete.png" height="32" width="32"/>
......@@ -246,6 +251,12 @@ const handleUpdate=({id})=>{
console.log("编辑"+id)
}
//去报销 —— 跳转至报销表单
const handleToAdd=({id})=> {
proxy.$router.push({ path: '/costManage/projectCostReimbursement/add',query: { id: id,type:"编辑" }});
}
</script>
......
......@@ -52,15 +52,15 @@
</el-form-item>
<el-form-item label="项目类型">
<el-input v-model="projectDetail.projectType" :placeholder="projectDetail && changeProjectType(projectDetail.projectType)" disabled/>
<el-input v-model="projectDetail.projectType" placeholder="请选择项目名称自动填充" disabled/>
</el-form-item>
<el-form-item label="事业部负责人">
<el-input v-model="projectDetail.userName" :placeholder="projectDetail && projectDetail.userName" disabled/>
<el-input v-model="projectDetail.userName" placeholder="请选择项目名称自动填充" disabled/>
</el-form-item>
<el-form-item label="项目状态">
<el-input v-model="projectDetail.projectStatus" :placeholder="projectDetail &&changeProjectStatus(projectDetail.projectStatus)" disabled/>
<el-input v-model="projectDetail.projectStatus" placeholder="请选择项目名称自动填充" disabled/>
</el-form-item>
<el-form-item label="备注">
......@@ -70,7 +70,7 @@
type="textarea"
placeholder="请输入备注"/>
</el-form-item>
<!-- 报销需要增加的表单-->
<!-- 报销可能需要增加的表单-->
<!-- <el-col :span="12">-->
<!-- <el-row >-->
<!-- <el-col :span="7">-->
......@@ -118,9 +118,12 @@ import {onMounted, reactive, ref} from 'vue'
import { useRouter } from 'vue-router'
import {
addCostRequest,
getCostRequestList, getProjectDetailbyId, getProjectList,getCostRequestDetail
getCostRequestList,
getProjectDetailbyId,
getProjectList,
getCostRequestDetail,
updateCostRequest
} from "../../../api/projectCostRequest/projectCostRequest.js";
import {addProject} from "../../../api/project/project.js";
const { proxy } = getCurrentInstance();
const { project_type , project_status,project_cost_type} = proxy.useDict('project_type','project_status','project_cost_type');
import { useRoute } from 'vue-router';
......@@ -128,6 +131,8 @@ import { useRoute } from 'vue-router';
// 获取当前路由信息
const route = useRoute();
const formRef = ref()
const projectTypeOptions = reactive([])
const projectStatusOptions = reactive([])
const costRequestDetail = reactive({
projectId:null,
......@@ -137,6 +142,7 @@ const costRequestDetail = reactive({
remark:null,
})
//表单验证
const FormRules = reactive(
{
projectId: [
......@@ -154,7 +160,6 @@ const FormRules = reactive(
}
)
//获取所有项目
const projectList = reactive([]);
const getProject=()=> {
......@@ -169,18 +174,38 @@ getProject()
const projectDetail = reactive({});
const getProjectDetail=()=> {
getProjectDetailbyId(costRequestDetail.projectId).then(response => {
console.log("项目详情",response)
Object.assign(projectDetail, response.data);
//类型转换
changeProjectStatus()
changeProjectType()
})
}
//
//获取编辑详情
let id = parseInt(route.query.id)
console.log("路由",id)
getCostRequestDetail(id).then(res=>{
console.log("项目详情",res)
Object.assign(costRequestDetail, res.data);
getProjectDetail()
})
let type = route.query.type
if (type === "新增"){
//新增页面
console.log("type",type)
}else if(type === "编辑"){
//编辑页面
console.log("type",type)
console.log("路由",id)
getCostRequestDetail(id).then(res=>{
console.log("项目详情",res)
Object.assign(costRequestDetail, res.data);
getProjectDetail()
})
}
......@@ -190,17 +215,34 @@ const handleSubmit = ()=>{
if (valid) {
//验证通过
console.log('表单验证通过');
//发请求
// console.log(costRequestDetail)
addCostRequest(costRequestDetail).then(response => {
if (response.code === 200){
proxy.$modal.msgSuccess("新增成功");
resetForm()
// proxy.$router.push({ path: '/project' })
}else {
proxy.$modal.msgError(response.msg)
}
});
if (type === "新增"){
//发新增请求
addCostRequest(costRequestDetail).then(response => {
if (response.code === 200){
proxy.$modal.msgSuccess("新增成功");
resetForm()
proxy.$router.push({ path: '/costManage/projectCostRequest/index' })
}else {
proxy.$modal.msgError(response.msg)
}
});
}
else if(type === "编辑"){
//发修改请求
updateCostRequest(costRequestDetail).then(response => {
if (response.code === 200){
proxy.$modal.msgSuccess("编辑成功");
proxy.$router.push({ path: '/costManage/projectCostRequest/index' })
}else {
proxy.$modal.msgError(response.msg)
}
});
}
}
});
}
......@@ -225,18 +267,20 @@ const goBackIndex = () => {
//字典转换
const projectTypeOptions = reactive([])
const changeProjectType = (yuan)=>{
for (const item of projectTypeOptions) {
if(item.dictValue === yuan){
projectDetail.projectType = item.dictLabel
break
//项目状态字典
const changeProjectType = ()=>{
let yuan = projectDetail.projectType
for (const item of projectTypeOptions) {
if(item.dictValue === yuan){
projectDetail.projectType = item.dictLabel
break
}
}
}
}
const projectStatusOptions = reactive([])
const changeProjectStatus = (yuan)=>{
//项目类型字典
const changeProjectStatus = ()=>{
let yuan = projectDetail.projectStatus
for (const item of projectStatusOptions) {
if(item.dictValue === yuan){
projectDetail.projectStatus = item.dictLabel
......@@ -251,6 +295,7 @@ onMounted(()=>{
Object.assign(projectTypeOptions, response.data);
console.log("项目类型字典",projectTypeOptions)
});
//项目状态字典
getDicts("project_status").then(response => {
Object.assign(projectStatusOptions, response.data);
......
......@@ -121,8 +121,8 @@ const list = ['个人','PM','事业部负责人','财务','领导','完成']
// });
const costRequestDetailList = reactive({})
let projectId = proxy.$route.query.id;
const getDetail=()=> {
let projectId = proxy.$route.query.id;
getCostRequestDetail(projectId).then(response => {
console.log("res",response.data)
costRequestDetailList.value = response.data
......@@ -131,10 +131,6 @@ const getDetail=()=> {
}
getDetail()
//字典转换
const projectTypeOptions = reactive({})
const changeProjectType = (yuan)=>{
......@@ -184,8 +180,9 @@ const goBackIndex = () => {
}
//去报销按钮
const goToAddReimburse = (projectId) => {
router.push({ path: '/costManage/projectCostReimbursement/addReimbursement' })
const goToAddReimburse = () => {
console.log(projectId)
router.push({ path: '/costManage/projectCostReimbursement/add',query: { id: projectId,type:"编辑" }})
}
......
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