Skip to content

P
psa-web
Commit 457179cd authored by qyx's avatar qyx
Browse files
Options

改样式

parent e1d65834
Show whitespace changes
Inline Side-by-side
Showing with 891 additions and 409 deletions
src/views/costManage/projectCostReimbursement/apply.vue 0 → 100644
View file @ 457179cd
<script setup>
</script>
<template class="app-container">
<!-- 标题-->
<div class="top">
<div class="top_text">申请报销</div>
<div class="top_line"></div>
</div>
<div style="display: flex;">
<div class="card_box">
<div class="card-header">
<span>费用类型：</span>
<span style="color: #616161;font-weight: normal">办公费-宽带费</span>
</div>
<div class="detail">
<el-row>
<el-col :span="6"> <span>项目名称：</span></el-col>
<el-col :span="18"><div>餐饮项目</div></el-col>
</el-row>
<el-row>
<el-col :span="6"> <span>项目类型：</span></el-col>
<el-col :span="18"><div>RL-人力</div></el-col>
</el-row>
<el-row>
<el-col :span="6"> <span>事业部负责人：</span></el-col>
<el-col :span="18"><div>ry</div></el-col>
</el-row>
<el-row>
<el-col :span="6"> <span>项目状态：</span></el-col>
<el-col :span="18"><div>进行中</div></el-col>
</el-row>
<el-row>
<el-col :span="6"> <span>物品描述：</span></el-col>
<el-col :span="18"><div>描述描述描述</div></el-col>
</el-row>
<el-row>
<el-col :span="6"> <span>单价：</span></el-col>
<el-col :span="18"><div>5</div></el-col>
</el-row>
<el-row>
<el-col :span="6"> <span>数量：</span></el-col>
<el-col :span="18"><div>1</div></el-col>
</el-row>
<el-row>
<el-col :span="6"> <span>申请金额（元）：</span></el-col>
<el-col :span="18"><div>5</div></el-col>
</el-row>
</div>
<div class="card-bottom">
<div>费用发生时间：2025-3-6</div>
<div style="margin-left: 80px"><el-button type="primary">申请报销</el-button></div>
</div>
</div>
<div class="card_box">
<div class="card-header">
<span>费用类型：</span>
<span style="color: #616161;font-weight: normal">办公费-宽带费</span>
</div>
<div class="detail">
<el-row>
<el-col :span="6"> <span>项目名称：</span></el-col>
<el-col :span="18"><div>餐饮项目</div></el-col>
</el-row>
<el-row>
<el-col :span="6"> <span>项目类型：</span></el-col>
<el-col :span="18"><div>RL-人力</div></el-col>
</el-row>
<el-row>
<el-col :span="6"> <span>事业部负责人：</span></el-col>
<el-col :span="18"><div>ry</div></el-col>
</el-row>
<el-row>
<el-col :span="6"> <span>项目状态：</span></el-col>
<el-col :span="18"><div>进行中</div></el-col>
</el-row>
<el-row>
<el-col :span="6"> <span>物品描述：</span></el-col>
<el-col :span="18"><div>描述描述描述</div></el-col>
</el-row>
<el-row>
<el-col :span="6"> <span>单价：</span></el-col>
<el-col :span="18"><div>5</div></el-col>
</el-row>
<el-row>
<el-col :span="6"> <span>数量：</span></el-col>
<el-col :span="18"><div>1</div></el-col>
</el-row>
<el-row>
<el-col :span="6"> <span>申请金额（元）：</span></el-col>
<el-col :span="18"><div>5</div></el-col>
</el-row>
</div>
<div class="card-bottom">
<div>费用发生时间：2025-3-6</div>
<div style="margin-left: 80px"><el-button type="primary">申请报销</el-button></div>
</div>
</div>
<div class="card_box">
<div class="card-header">
<span>费用类型：</span>
<span style="color: #616161;font-weight: normal">办公费-宽带费</span>
</div>
<div class="detail">
<el-row>
<el-col :span="6"> <span>项目名称：</span></el-col>
<el-col :span="18"><div>餐饮项目</div></el-col>
</el-row>
<el-row>
<el-col :span="6"> <span>项目类型：</span></el-col>
<el-col :span="18"><div>RL-人力</div></el-col>
</el-row>
<el-row>
<el-col :span="6"> <span>事业部负责人：</span></el-col>
<el-col :span="18"><div>ry</div></el-col>
</el-row>
<el-row>
<el-col :span="6"> <span>项目状态：</span></el-col>
<el-col :span="18"><div>进行中</div></el-col>
</el-row>
<el-row>
<el-col :span="6"> <span>物品描述：</span></el-col>
<el-col :span="18"><div>描述描述描述</div></el-col>
</el-row>
<el-row>
<el-col :span="6"> <span>单价：</span></el-col>
<el-col :span="18"><div>5</div></el-col>
</el-row>
<el-row>
<el-col :span="6"> <span>数量：</span></el-col>
<el-col :span="18"><div>1</div></el-col>
</el-row>
<el-row>
<el-col :span="6"> <span>申请金额（元）：</span></el-col>
<el-col :span="18"><div>5</div></el-col>
</el-row>
</div>
<div class="card-bottom">
<div>费用发生时间：2025-3-6</div>
<div style="margin-left: 80px"><el-button type="primary">申请报销</el-button></div>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.detail{
margin-left: 30px;
span{
color: #969696;
}
div{
margin-top: 5px;
color: #65676C;
}
.detail_beizhu{
width: 480px;
height: 130px;
border: 1px solid #dddddd;
background-color: #FAFAFA;
}
}
.card_box{
width: 400px;
border: 1px solid #eaeaea;
margin-top: 20px;
margin-left: 50px;
box-shadow: 0 2px 2px 0 #b3b3b380;
.card-header{
color: #3B66FF;
background-color: #F9F9FA;
border-bottom: 1px solid #eaeaea;
padding: 10px;
font-size: 16px;
font-weight: bold;
}
.detail{
border-bottom: 1px solid #eaeaea;
padding: 5px;
}
.card-bottom{
width: 100%;
padding: 10px;
display: flex;
}
}
.top {
display: flex;
flex-direction: column;
width: 75px;
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;
}
}
</style>
src/views/costManage/projectCostReimbursement/detail.vue
View file @ 457179cd
<template>
<div class="app-container">
<div class="content">
<div class="top">
<div class="top_text">申请报销</div>
<div class="top_line"></div>
</div>
<div class="detail">
<el-row>
<el-col :span="2"> <span>流水号：</span></el-col>
<el-col :span="22"><div>XS656433</div></el-col>
</el-row>
<el-row>
<el-col :span="2"> <span>项目名称：</span></el-col>
<el-col :span="22"><div>餐饮项目</div></el-col>
</el-row>
<el-row>
<el-col :span="2"> <span>项目编号：</span></el-col>
<el-col :span="22"><div>20250228RL001</div></el-col>
</el-row>
<el-row>
<el-col :span="2"> <span>项目类型：</span></el-col>
<el-col :span="22"><div>RL-人力</div></el-col>
</el-row>
<el-row>
<el-col :span="2"> <span>事业部负责人：</span></el-col>
<el-col :span="22"><div>ry</div></el-col>
</el-row>
<el-row>
<el-col :span="2"> <span>项目状态：</span></el-col>
<el-col :span="22"><div>进行中</div></el-col>
</el-row>
<el-row>
<el-col :span="2"> <span>费用类型：</span></el-col>
<el-col :span="22"><div>办公费-宽带费</div></el-col>
</el-row>
<el-row>
<el-col :span="2"> <span>物品描述：</span></el-col>
<el-col :span="22"><div>描述描述描述</div></el-col>
</el-row>
<el-row>
<el-col :span="2"> <span>费用发生时间：</span></el-col>
<el-col :span="22"><div>2025-03-06 15:00:00</div></el-col>
</el-row>
<el-row>
<el-col :span="2"> <span>单价：</span></el-col>
<el-col :span="22"><div>5</div></el-col>
</el-row>
<el-row>
<el-col :span="2"> <span>数量：</span></el-col>
<el-col :span="22"><div>1</div></el-col>
</el-row>
<el-row>
<el-col :span="2"> <span>申请金额（元）：</span></el-col>
<el-col :span="22"><div>5</div></el-col>
</el-row>
<el-row>
<el-col :span="2"> <span>备注：</span></el-col>
<el-col :span="22">
<div class="detail_beizhu">备注备注备注备注备注备注备注备注</div>
</el-col>
</el-row>
</div>
<!-- 取消、提交按钮-->
<div class="button">
<div><el-button @click="goBackReimburseIndex" class="button_size">返回</el-button></div>
<div><el-button class="button_size" type="primary">确认申请报销</el-button></div>
</div>
</div>
</div>
</template>
<script setup>
import {useRouter} from "vue-router";
const router = useRouter()
const goBackReimburseIndex = () => {
router.push({ path: '/costManage/projectCostReimbursement' })
}
</script>
<template>
新增报销
</template>
<style scoped lang="scss">
.detail{
margin-top: 20px;
margin-left: 30px;
span{
color: #969696;
}
div{
margin-top: 5px;
color: #65676C;
}
.detail_beizhu{
width: 480px;
height: 130px;
border: 1px solid #dddddd;
background-color: #FAFAFA;
}
}
.top {
display: flex;
flex-direction: column;
width: 75px;
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;
}
}
.button {
display: flex;
margin-left: 70%;
margin-top: 10px;
.button_size {
width: 116px;
height: 40px;
margin: 20px;
}
}
</style>
src/views/costManage/projectCostReimbursement/index.vue
View file @ 457179cd
<template>
<div class="app-container" >
<div>
<el-form class="formSearch" ref="formRef" :inline="true" :model="formInline">
<el-form-item label="项目名称">
<el-input
<!-- 搜索表单-->
<div class="formSearch" >
<el-form ref="formRef" :inline="true" :model="formInline">
<el-form-item style="margin-right: 60px" label="项目名称">
<el-input style="width: 220px"
v-model="queryParams.projectName"
placeholder="请输入项目名称"
clearable/>
</el-form-item>
<!-- <el-form-item label="项目编号">-->
<!-- <el-input-->
<!-- v-model="queryParams.projectNumber"-->
<!-- placeholder="请输入项目编号"-->
<!-- clearable/>-->
<!-- </el-form-item>-->
<el-form-item label="项目负责人">
<el-input
<el-form-item style="margin-right: 60px" label="项目负责人">
<el-input style="width: 220px"
v-model="queryParams.userName"
placeholder="请输入项目负责人"
clearable/>
</el-form-item>
<el-form-item label="项目类型">
<el-select v-model="queryParams.projectType" placeholder="请选择项目类型" clearable>
<el-form-item style="margin-right: 60px" label="项目类型">
<el-select style="width: 220px" v-model="queryParams.projectType" placeholder="请选择项目类型" clearable>
<el-option
v-for="dict in project_type"
:key="dict.value"
......@@ -30,26 +25,50 @@
:value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" class="el-button-primary" icon="Search" @click="onSearch">搜索</el-button>
<div style="margin-left: 50px">
<el-button type="default" class="el-button-defalut" icon="Refresh" @click="reset">重置</el-button>
<el-button type="primary" class="el-button-primary" icon="Search" @click="onSearch">搜索</el-button>
<el-button size="large" type="text" @click="toggleSearch">
{{ isExpanded ? ' 收起' : ' 展开' }}
<el-icon class="el-icon--right">
<arrow-down />
</el-icon>
</el-button>
</div>
</el-form-item>
<!-- 可折叠的查询条件 -->
<transition>
<div v-if="isExpanded">
<el-form-item label="审批状态">
<el-select style="width: 220px" v-model="queryParams.projectType" placeholder="请选择审批状态" clearable>
<el-option
v-for="dict in project_cost_request_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"/>
</el-select>
</el-form-item>
</div>
</transition>
</el-form>
</div>
<!-- 导航、按钮-->
<div class="shadow_box_bottom_add">
<div class="left">
<div class="left_text">项目费用报销列表</div>
<div class="left_text">报销列表</div>
<div class="left_line"></div>
</div>
<div class="right">
<el-button
type="primary"
plain
icon="Plus"
@click="goToAddPage"
>报销申请</el-button>
<div>
<el-button class="el-button-primary-pain" plain icon="Plus" @click="goToApplyPage">报销申请</el-button>
<el-button type="text" plain><img src="@/assets/icons/common/rightone.png" height="38" width="38"/></el-button>
<el-button type="text" plain><img src="@/assets/icons/common/print.png" height="38" width="38"/></el-button>
</div>
</div>
......@@ -60,17 +79,7 @@
<text>项目编号</text>
<text>{{}}</text>
</div>
<div class="step">
<el-steps :active="2" align-center>
<el-step title="个人" />
<el-step title="PM" />
<el-step title="核心领导" />
<el-step title="HR" />
<el-step title="总经理" />
<el-step title="财务" />
<el-step title="完成" />
</el-steps>
</div>
<FlowChart :dataList="list" :widthDontai="'70%'" :activeIndex="1"/>
</div>
<!-- 列表-->
......@@ -165,6 +174,7 @@
<script setup>
import FlowChart from '@/components/FlowChart/index.vue'
import { reactive, ref } from 'vue'
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');
......@@ -177,17 +187,26 @@ const queryParams = reactive({
userName:null,
projectType:null
})
// 列表
const projectCostRequestList = ref([]);
const getList=()=> {
getCostRequestList(queryParams).then(response => {
console.log("列表",response.rows)
total.value = response.total
projectCostRequestList.value = response.rows
});
// 定义是否展开的状态
const isExpanded = ref(false);
// 切换展开/折叠状态
const toggleSearch = () => {
isExpanded.value = !isExpanded.value;
}
getList()
// 流程图内容
const list = ['个人','PM','事业部负责人','财务','领导','完成']
// // 列表
// const projectCostRequestList = ref([]);
// const getList=()=> {
// getCostRequestList(queryParams).then(response => {
// console.log("列表",response.rows)
// total.value = response.total
// projectCostRequestList.value = response.rows
// });
// }
// getList()
// 重置表单
const reset = () => {
......@@ -207,12 +226,14 @@ const onSearch = () => {
//新增按钮
import { useRouter } from 'vue-router'
import {getCostRequestDetail, getCostRequestList} from "../../../api/projectCostRequest/projectCostRequest.js";
import {ArrowDown} from "@element-plus/icons-vue";
const router = useRouter()
const goToAddPage = () => {
router.push({ path: '/costManage/projectCostRequest/add' ,query:{type:"新增"}})
const goToApplyPage = () => {
router.push({ path: '/costManage/projectCostReimbursement/apply' ,query:{type:"新增"}})
}
//查看详情
const handleView=({id})=> {
console.log("详情"+id)
......@@ -246,7 +267,7 @@ const handleUpdate=({id})=>{
.left {
display: flex;
flex-direction: column;
width: 150px;
width: 73px;
margin-left: 40px;
.left_text {
cursor: default;
......@@ -275,7 +296,7 @@ const handleUpdate=({id})=>{
width: 98%;
justify-content: space-evenly;
align-items: center;
background-color: #f3f3f3;
background-color: #F9F9FA;
.text1 {
font-size: 18px;
font-weight: 550;
......
src/views/costManage/projectCostRequest/add.vue
View file @ 457179cd
<template>
<div class="app-container">
<div class="content">
<!-- 导航-->
<!-- 标题-->
<div class="top">
<div class="top_text">新增项目费用申请</div>
<div class="top_text">项目费用申请</div>
<div class="top_line"></div>
</div>
<!-- 表单-->
<!-- 申请 表单-->
<div class="addform">
<el-form :model="costRequestDetailList" label-width="auto">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="流水号">
<el-input
v-model="costRequestDetailList.waterNumber"
disabled
placeholder="自动生成流水号"/>
<el-form ref="formRef" :rules="FormRules" :model="costRequestDetailList" label-width="auto">
<el-form-item label="项目名称" prop="projectId">
<el-select
v-model="costRequestDetailList.projectId"
placeholder="请选择项目名称" clearable>
<el-option label="项目一" value="shanghai"/>
<el-option label="项目二" value="beijing"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="费用类型">
<el-form-item label="费用类型" prop="costType">
<el-select :disabled="type ==='详情'"
placeholder="请选择费用类型"
v-model="costRequestDetailList.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-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目名称">
<el-select
v-model="costRequestDetailList.projectName"
placeholder="请选择项目名称" clearable>
<el-option label="项目一" value="shanghai" />
<el-option label="项目二" value="beijing" />
:value="dict.value"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="物品描述">
<el-input v-model="costRequestDetailList.description" placeholder="请输入物品名称" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目编号">
<el-input v-model="costRequestDetailList.projectNumber" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="费用发生时间">
<el-date-picker style="width: 500px;height: 40px"
v-model="costRequestDetailList.createTime"
<el-form-item label="费用发生时间" prop="timeOfExpense">
<el-date-picker style="width: 100%;height: 35px"
v-model="costRequestDetailList.timeOfExpense"
type="date"
placeholder="请选择费用发生时间"
clearable/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目类型">
<el-select
v-model="costRequestDetailList.projectType"
disabled>
</el-select>
<el-form-item label="预计金额（元）" prop="sumMoney">
<el-input v-model="costRequestDetailList.sumMoney" placeholder="请输入申请金额"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-row >
<el-col :span="7">
<el-form-item label="单价">
<el-input class="danjia_shuliang" v-model="costRequestDetailList.unitPrice" placeholder="请输入物品单价" />
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="数量">
<el-input class="danjia_shuliang" v-model="costRequestDetailList.amount" placeholder="请输入物品数量" />
<el-form-item label="项目类型">
<el-input v-model="costRequestDetailList.projectType" disabled/>
</el-form-item>
</el-col>
</el-row>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="事业部负责人">
<el-select
v-model="costRequestDetailList.userName"
clearable disabled>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="申请金额（元）">
<el-input v-model="costRequestDetailList.sumMoney" placeholder="请输入申请金额" />
<el-input v-model="costRequestDetailList.userName" disabled/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目状态">
<el-select
v-model="costRequestDetailList.projectStatus"
disabled
>
</el-select>
<el-input v-model="costRequestDetailList.projectStatus" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注">
<el-input
v-model="costRequestDetailList.remark"
:autosize="{ minRows: 4 }"
type="textarea"
placeholder="请输入备注"
/>
placeholder="请输入备注"/>
</el-form-item>
</el-col>
</el-row>
<!-- 报销需要增加的表单-->
<!-- <el-col :span="12">-->
<!-- <el-row >-->
<!-- <el-col :span="7">-->
<!-- <el-form-item label="单价">-->
<!-- <el-input class="danjia_shuliang" v-model="costRequestDetailList.unitPrice" placeholder="请输入物品单价" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="5">-->
<!-- <el-form-item label="数量">-->
<!-- <el-input class="danjia_shuliang" v-model="costRequestDetailList.amount" placeholder="请输入物品数量" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </el-col>-->
<el-row :gutter="20">
<!-- <el-col :span="12">-->
<!-- <el-form-item label="登记人">-->
<!-- <el-input v-model="costRequestDetailList.dengjiren" placeholder="张三" disabled />-->
<!-- <el-form-item label="物品描述">-->
<!-- <el-input v-model="costRequestDetailList.description" placeholder="请输入物品名称" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<el-col :span="12">
</el-col>
</el-row>
<!-- <el-col :span="12">-->
<!-- <el-form-item label="项目编号">-->
<!-- <el-input v-model="costRequestDetailList.projectNumber" disabled/>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
</el-form>
</div>
<!-- 取消、提交按钮-->
<div class="button">
<div><el-button @click="goBackIndex" class="button_size">取消</el-button></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>
......@@ -170,6 +113,7 @@ import { useRouter } from 'vue-router'
const { proxy } = getCurrentInstance();
const { project_cost_type} = proxy.useDict('project_cost_type');
const formRef = ref()
const costRequestDetailList = reactive({
waterNumber:null,
......@@ -187,6 +131,31 @@ const costRequestDetailList = reactive({
remark: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' },
],
}
)
//提交按钮
const handleSubmit = ()=>{
formRef.value.validate((valid) => {
if (valid) {
//验证通过
console.log('Form Submitted');
}
});
}
// 取消按钮
const router = useRouter()
......@@ -208,7 +177,7 @@ const goBackIndex = () => {
.top {
display: flex;
flex-direction: column;
width: 150px;
width: 110px;
margin-left: 40px;
.top_text {
......@@ -229,15 +198,10 @@ const goBackIndex = () => {
.addform {
margin-left: 50px;
margin-top: 30px;
.el-form-item {
width: 500px;
width: 540px;
height: 40px;
.danjia_shuliang{
width: 150px;
}
}
}
.folderAdd {
......@@ -245,16 +209,18 @@ const goBackIndex = () => {
margin-right: 5px;
}
.button {
display: flex;
margin-left: 70%;
margin-top: 100px;
.button_size {
width: 116px;
height: 40px;
margin: 20px;
}
}
//.button {
// display: flex;
// margin-left: 70%;
// margin-top: 130px;
// .button_size {
// width: 116px;
// height: 40px;
// margin: 20px;
// }
//}
//步骤条
......
src/views/costManage/projectCostRequest/detail.vue
View file @ 457179cd
......@@ -2,15 +2,15 @@
<div class="app-container">
<div class="content">
<!-- 导航-->
<!-- 标题-->
<div class="top">
<div class="top_text">新增项目费用申请</div>
<div class="top_text">申请详情</div>
<div class="top_line"></div>
</div>
<!-- 步骤条-->
<div class="shadow_box_bottom_step">
<div v-if="costRequestDetailList.value" class="shadow_box_bottom_step">
<text class="text1">审批流程</text>
<FlowChart :dataList="list" :widthDontai="'70%'" :activeIndex="1"/>
<FlowChart :dataList="list" :widthDontai="'70%'" :activeIndex="costRequestDetailList.value.approveStatus === 3 ? 6 :1"/>
<!-- <div class="step">-->
<!-- <el-steps :active="costRequestDetailList.approveStatus === 3?7:2" align-center>-->
......@@ -25,27 +25,70 @@
<!-- </div>-->
</div>
<div class="detail">
<div>流水号：<text>{{costRequestDetailList.value.waterNumber}}</text></div>
<div>项目名称：<text>{{costRequestDetailList.value.projectName}}</text></div>
<div>项目编号：<text>{{costRequestDetailList.value.projectNumber}}</text></div>
<div>项目类型：<text>{{costRequestDetailList.value.projectType}}</text></div>
<div>事业部负责人：<text>{{costRequestDetailList.value.userName}}</text></div>
<div>项目状态：<text>{{costRequestDetailList.value.projectStatus}}</text></div>
<div>费用类型：<text>{{costRequestDetailList.value.costType}}</text></div>
<div>物品描述：<text>{{costRequestDetailList.value.description}}</text></div>
<div>费用发生时间：<text>{{costRequestDetailList.value.createTime}}</text></div>
<div>单价：<text>{{costRequestDetailList.value.unitPrice}}</text></div>
<div>数量：<text>{{costRequestDetailList.value.amount}}</text></div>
<div>申请金额（元）：<text>{{costRequestDetailList.value.sumMoney}}</text></div>
<div>备注：<text>{{costRequestDetailList.value.remark}}</text></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>
</el-row>
<el-row>
<el-col :span="2"> <span>项目编号：</span></el-col>
<el-col :span="22"><div>{{costRequestDetailList.value.projectNumber}}</div></el-col>
</el-row>
<el-row>
<el-col :span="2"> <span>项目类型：</span></el-col>
<el-col :span="22"><div>{{changeProjectType(costRequestDetailList.value.projectType)}}</div></el-col>
</el-row>
<el-row>
<el-col :span="2"> <span>事业部负责人：</span></el-col>
<el-col :span="22"><div>{{costRequestDetailList.value.userName}}</div></el-col>
</el-row>
<el-row>
<el-col :span="2"> <span>项目状态：</span></el-col>
<el-col :span="22"><div>{{changeProjectStatus(costRequestDetailList.value.projectStatus)}}</div></el-col>
</el-row>
<el-row>
<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>
</el-row>
<el-row>
<el-col :span="2"> <span>备注：</span></el-col>
<el-col :span="22">
<div v-if="costRequestDetailList.value.remark !== null" class="detail_beizhu">备注备注备注备注备注备注备注备注{{costRequestDetailList.value.remark}}</div>
<div v-if="costRequestDetailList.value.remark === null">无</div>
</el-col>
</el-row>
</div>
<!-- 取消、提交按钮-->
<div class="button">
<div><el-button @click="goBackIndex" class="button_size">取消</el-button></div>
<div><el-button v-if="type !=='详情'" class="button_size" type="primary">提交</el-button></div>
<div><el-button v-if="type ==='详情' && costRequestDetailList.value.approveStatus === 3" class="button_size" type="primary">去报销</el-button></div>
<div v-if="costRequestDetailList.value" class="button">
<div><el-button @click="goBackIndex" class="button_size">返回</el-button></div>
<div><el-button @click="goToAddReimburse" v-if="costRequestDetailList.value.approveStatus === 3" class="button_size" type="primary">去报销</el-button></div>
</div>
......@@ -56,50 +99,104 @@
</template>
<script setup>
import { onMounted } from 'vue';
import { getDicts } from "@/api/system/dict/data";
import FlowChart from '@/components/FlowChart/index.vue'
import { reactive, ref } from 'vue'
import { reactive, ref} from 'vue'
import { useRouter } from 'vue-router'
import {getCostRequestDetail, getCostRequestList} from "../../../api/projectCostRequest/projectCostRequest.js";
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','核心领导','HR','总经理','财务','完成']
//根据项目id获取表单详情数据
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
});
// 流程图内容
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({})
const getDetail=()=> {
let projectId = proxy.$route.query.id;
getCostRequestDetail(projectId).then(response => {
console.log("res",response.data)
costRequestDetailList.value = response.data
console.log("流水号",costRequestDetailList.value.waterNumber)
// console.log("审批状态",costRequestDetailList.value.approveStatus)
});
}
getDetail()
//字典转换
const projectTypeOptions = reactive({})
const changeProjectType = (yuan)=>{
// console.log("原数据",yuan)
if(!projectTypeOptions.value) return yuan
let item = projectTypeOptions.value.find(item=>item.dictValue === yuan)
return item.dictLabel
}
const projectStatusOptions = reactive({})
const changeProjectStatus = (yuan)=>{
// console.log("原数据",yuan)
if(!projectStatusOptions.value) return yuan
let item = projectStatusOptions.value.find(item=>item.dictValue === yuan)
return item.dictLabel
}
const projectCostTypeOptions = reactive({})
const changeProjectCostType = (yuan)=>{
// console.log("原数据",yuan)
if(!projectCostTypeOptions.value) return yuan
let item = projectCostTypeOptions.value.find(item=>item.dictValue === yuan)
return item.dictLabel
}
onMounted(()=>{
//项目类型字典
getDicts("project_type").then(response => {
projectTypeOptions.value = response.data;
// console.log("项目类型字典",projectTypeOptions.value)
});
getDicts("project_status").then(response => {
projectStatusOptions.value = response.data;
});
getDicts("project_cost_type").then(response => {
projectCostTypeOptions.value = response.data;
});
})
// 取消按钮
const router = useRouter()
const goBackIndex = () => {
router.push({ path: '/costManage/projectCostRequest/index' })
}
//去报销按钮
const goToAddReimburse = (projectId) => {
router.push({ path: '/costManage/projectCostReimbursement/addReimbursement' })
}
</script>
<style scoped lang="scss">
......@@ -114,7 +211,7 @@ const goBackIndex = () => {
.top {
display: flex;
flex-direction: column;
width: 150px;
width: 75px;
margin-left: 40px;
.top_text {
......@@ -133,18 +230,30 @@ const goBackIndex = () => {
}
.detail{
margin-top: 20px;
}
.detail div{
margin: 20px 20px;
color: #898989;
}
.detail text{
margin: 20px 20px;
color: #000000;
}
margin-left: 30px;
span{
color: #969696;
}
div{
margin-top: 5px;
color: #65676C;
}
.detail_beizhu{
width: 480px;
height: 130px;
border: 1px solid #dddddd;
background-color: #FAFAFA;
}
}
//.detail div{
// margin: 20px 20px;
// color: #898989;
//}
//.detail text{
// margin: 20px 20px;
// color: #000000;
//}
.folderAdd {
font-size: 20px;
......@@ -154,7 +263,7 @@ const goBackIndex = () => {
.button {
display: flex;
margin-left: 70%;
margin-top: 100px;
margin-top: 10px;
.button_size {
width: 116px;
height: 40px;
......
src/views/costManage/projectCostRequest/index.vue
View file @ 457179cd
<template>
<div class="app-container" >
<div>
<el-form class="formSearch" ref="formRef" :inline="true" :model="formInline">
<el-form-item label="项目名称">
<el-input
<!-- 搜索表单-->
<div class="formSearch" >
<el-form ref="formRef" :inline="true" :model="formInline" >
<el-form-item style="margin-right: 60px" label="项目名称">
<el-input style="width: 220px"
v-model="queryParams.projectName"
placeholder="请输入项目名称"
clearable/>
</el-form-item>
<!-- <el-form-item label="项目编号">-->
<!-- <el-input-->
<!-- v-model="queryParams.projectNumber"-->
<!-- placeholder="请输入项目编号"-->
<!-- clearable/>-->
<!-- </el-form-item>-->
<el-form-item label="项目负责人">
<el-input
<el-form-item style="margin-right: 60px" label="项目负责人">
<el-input style="width: 220px"
v-model="queryParams.userName"
placeholder="请输入项目负责人"
clearable/>
</el-form-item>
<el-form-item label="项目类型">
<el-select v-model="queryParams.projectType" placeholder="请选择项目类型" clearable>
<el-form-item style="margin-right: 60px" label="项目类型">
<el-select style="width: 220px" v-model="queryParams.projectType" placeholder="请选择项目类型" clearable>
<el-option
v-for="dict in project_type"
:key="dict.value"
......@@ -30,10 +24,37 @@
:value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" class="el-button-primary" icon="Search" @click="onSearch">搜索</el-button>
<div style="margin-left: 50px">
<el-button type="default" class="el-button-defalut" icon="Refresh" @click="reset">重置</el-button>
<el-button type="primary" class="el-button-primary" icon="Search" @click="onSearch">搜索</el-button>
<el-button size="large" type="text" @click="toggleSearch">
<el-icon class="el-icon--right">
<arrow-down />
</el-icon>
{{ isExpanded ? ' 收起' : ' 展开' }}
</el-button>
</div>
</el-form-item>
<!-- 可折叠的查询条件 -->
<transition>
<div v-if="isExpanded">
<el-form-item label="审批状态">
<el-select style="width: 220px" v-model="queryParams.projectType" placeholder="请选择审批状态" clearable>
<el-option
v-for="dict in project_cost_request_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"/>
</el-select>
</el-form-item>
</div>
</transition>
</el-form>
</div>
......@@ -43,14 +64,13 @@
<div class="left_text">项目费用申请列表</div>
<div class="left_line"></div>
</div>
<div class="right">
<el-button
type="primary"
plain
icon="Plus"
@click="goToAddPage"
>费用申请</el-button>
<div>
<el-button class="el-button-primary-pain" plain icon="Plus" @click="goToAddPage">费用申请</el-button>
<el-button type="text" plain><img src="@/assets/icons/common/rightone.png" height="38" width="38"/></el-button>
<el-button type="text" plain><img src="@/assets/icons/common/print.png" height="38" width="38"/></el-button>
</div>
</div>
<!-- 步骤条-->
......@@ -58,106 +78,88 @@
<text class="text1">审批流程</text>
<div class="text2">
<text>项目编号</text>
<text>{{}}</text>
<text>{{changProjectNumber}}</text>
</div>
<FlowChart :dataList="list" :widthDontai="'70%'" :activeIndex="1"/><!-- <div class="step">-->
<!-- <el-steps :active="2" align-center>-->
<!-- <el-step title="个人" />-->
<!-- <el-step title="PM" />-->
<!-- <el-step title="核心领导" />-->
<!-- <el-step title="HR" />-->
<!-- <el-step title="总经理" />-->
<!-- <el-step title="财务" />-->
<!-- <el-step title="完成" />-->
<!-- </el-steps>-->
<!-- </div>-->
<FlowChart :dataList="list" :widthDontai="'70%'" :activeIndex="stepActive"/>
</div>
<!-- 列表-->
<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="projectNumber" label="项目编号" align="center">
<el-table-column width="170px" prop="projectNumber" label="项目编号" align="center">
<template #default="{row}">
<span @click="handleView(row)" @mouseenter="handleHover(row)" @mouseleave="handleLeave" style="color:royalblue;text-decoration:underline;cursor:pointer;">{{row.projectNumber}}</span>
</template>
</el-table-column>
<el-table-column prop="waterNumber" label="流水号" align="center" width="170px">
<template #default="{row}">
<span @click="handleView(row)" style="color:royalblue;text-decoration:underline;cursor:pointer;">{{row.projectNumber}}</span>
<span @mouseenter="handleHover(row)" @mouseleave="handleLeave">{{row.waterNumber}}</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="projectName" label="项目名称" align="center">
<template #default="{row}">
<span @mouseenter="handleHover(row)" @mouseleave="handleLeave">{{row.projectName}}</span>
</template>
</el-table-column>
<el-table-column prop="projectType" label="项目类型" align="center">
<template #default="{ row }">
<dict-tag :options="project_type" :value="row.projectType"/>
<dict-tag :options="project_type" :value="row.projectType" @mouseenter="handleHover(row)" @mouseleave="handleLeave"/>
</template>
</el-table-column>
<el-table-column prop="userName" label="事业部负责人" align="center">
<template #default="{row}">
<span @mouseenter="handleHover(row)" @mouseleave="handleLeave">{{row.userName}}</span>
</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"/>
<dict-tag :options="project_status" :value="row.projectStatus" @mouseenter="handleHover(row)" @mouseleave="handleLeave"/>
</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"
>
<template #default="scope">
<dict-tag :options="project_cost_type" :value="scope.row.costType"/>
<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"
></el-table-column>
<el-table-column
prop="approvalStatus"
label="审批状态"
align="center">
<el-table-column prop="expenseType" label="费用类型" align="center">
<template #default="scope">
<dict-tag :options="project_cost_request_status" :value="scope.row.approveStatus"/>
<dict-tag :options="project_cost_type" :value="scope.row.costType" @mouseenter="handleHover(scope.row)" @mouseleave="handleLeave"/>
</template>
</el-table-column>
<el-table-column prop="sumMoney" label="金额（元）" align="center">
<template #default="{row}">
<div @mouseenter="handleHover(row)" @mouseleave="handleLeave">{{row.sumMoney}}</div>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<el-table-column prop="approvalStatus" 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>
<dict-tag :options="project_cost_request_status" :value="scope.row.approveStatus" @mouseenter="handleHover(scope.row)" @mouseleave="handleLeave"/>
</template>
</el-table-column>
</el-table>
<el-table-column label="操作" align="center" width="200px">
<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>
</template>
</div>
</el-table-column>
</el-table>
<div class="shadow_box_bottom_page">
<pagination
v-show="total>0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div>
</div >
</template>
......@@ -169,9 +171,10 @@ import FlowChart from '@/components/FlowChart/index.vue'
import { reactive, ref } from 'vue'
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','核心领导','HR','总经理','财务','完成']
// 流程图内容
const list = ['个人','PM','事业部负责人','财务','领导']
// 定义是否展开的状态
const isExpanded = ref(false);
const total = ref(0);
const queryParams = reactive({
......@@ -194,6 +197,17 @@ const getList=()=> {
}
getList()
// // 获取列表第一个项目的项目编号 显示在步骤条前
// const firstProjectNumber = computed(() => {
// return projectCostRequestList.value.length > 0 ? projectCostRequestList.value[0].projectNumber : null;
// });
// 切换展开/折叠状态
const toggleSearch = () => {
isExpanded.value = !isExpanded.value;
}
// 重置表单
const reset = () => {
queryParams.projectName = null
......@@ -202,19 +216,40 @@ const reset = () => {
queryParams.projectType = null
getList()
}
// 提交搜索表单
const onSearch = () => {
console.log("queryParams",queryParams)
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 = '';
}
//新增按钮
import { useRouter } from 'vue-router'
import {getCostRequestDetail, getCostRequestList} from "../../../api/projectCostRequest/projectCostRequest.js";
import {ArrowDown} from "@element-plus/icons-vue";
const router = useRouter()
const goToAddPage = () => {
// router.push({ path: '/costManage/projectCostRequest/add' ,query:{type:"新增"}})
proxy.$router.push({ path: '/costManage/projectCostRequest/add', query: { type:"新增" } });
}
......@@ -223,7 +258,6 @@ const goToAddPage = () => {
const handleView=({id})=> {
console.log("详情"+id)
proxy.$router.push({ path: '/costManage/projectCostRequest/detail', query: { id: id,type:"详情" } });
// router.push({ path: '/costManage/projectCostRequest/add', query: { id: id } })
}
//编辑
......@@ -236,10 +270,6 @@ const handleUpdate=({id})=>{
</script>
<style scoped lang="scss">
//导航 、 按钮
......@@ -252,7 +282,7 @@ const handleUpdate=({id})=>{
.left {
display: flex;
flex-direction: column;
width: 150px;
width: 145px;
margin-left: 40px;
.left_text {
cursor: default;
......@@ -297,14 +327,19 @@ const handleUpdate=({id})=>{
}
}
.list_icon {
color: #477bf5;
margin: 8px;
font-size: 20px;
}
.pagination-box {
//display: flex;
//justify-content: center; /* 水平居中 */
padding-right: 43%;
margin-top: 180px;
}
</style>
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