Skip to content

P
psa-web
Commit 49f1a01a authored by qyx's avatar qyx
Browse files
Options

费用审批

parent 6a5620cc
Hide whitespace changes
Inline Side-by-side
Showing with 387 additions and 65 deletions
src/api/examineAndApprove/examineAndApprove.js 0 → 100644
View file @ 49f1a01a
import request from "../../utils/request.js";
// 1.项目费用申请审批
//获取所有项目名称（查询下拉框）
export function getProjectName() {
return request({
url: '/projectCostRequest/projectAllList',
method: 'get'
})
}
// 2.项目费用报销审批
src/views/costManage/examineAndApprove/components/projectCostReimbursementApprove.vue
View file @ 49f1a01a
......@@ -37,11 +37,27 @@
</div >
<div class="contentTable">
<!-- 按钮-->
<div style="margin-bottom: 30px">
<!-- 标题、按钮-->
<div class="shadow_box_bottom_add">
<div class="topDiv">
<span class="bold-text1" style="">项目费用报销审批</span>
</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>
</div>
</div>
<!-- 步骤条-->
<div class="shadow_box_bottom_step">
<text class="text1">审批流程</text>
<div class="text2">
<text>项目编号</text>
<text>{{changProjectNumber}}</text>
</div>
<div >
<FlowChart :dataList="list" :itemWidth="'130px'" :activeIndex="2"/>
</div>
</div>
<!-- 列表 -->
<el-table :data="ReimbursementRequestList" border>
<el-table-column type="selection" align="center"></el-table-column>
......@@ -83,6 +99,7 @@
<script setup>
import {reactive, ref} from "vue";
import FlowChart from '@/components/FlowChart/index.vue'
const ReimbursementRequestList = ref([
{
shenqingren:'张三',
......@@ -95,7 +112,8 @@ const ReimbursementRequestList = ref([
approvalStatus:'进行中'
}
]);
const list = ref(['个人','项目经理','事业部负责人','财务','总经理']) // 流程图内容,只有值
const allList = ref([]) // 流程图内容,值和角色id
const total = ref(0);
const queryParams = reactive({
pageNum:1,
......@@ -110,5 +128,55 @@ const queryParams = reactive({
<style scoped lang="scss">
//步骤条
.shadow_box_bottom_step {
display: flex;
margin-top: 10px;
margin-bottom: 20px;
padding: 20px 0px;
width: 100%;
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%;
}
}
//导航 、 按钮
.shadow_box_bottom_add {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding:10px 0;
margin-bottom: 20px;
.topDiv{
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>
src/views/costManage/examineAndApprove/components/projectCostRequestApprove.vue
View file @ 49f1a01a
......@@ -20,6 +20,7 @@
:value="dict.value"/>
</el-select>
</el-form-item>
<!-- 审批页的审批状态：待审批，已通过，未通过-->
<el-form-item label="审批状态">
<el-select style="width: 220px" v-model="queryParams.approveStatus" placeholder="请选择审批状态" clearable>
<el-option
......@@ -37,20 +38,36 @@
</div >
<div class="contentTable">
<!-- 按钮-->
<div style="margin-bottom: 30px">
<!-- 标题、按钮-->
<div class="shadow_box_bottom_add">
<div class="topDiv">
<span class="bold-text1" style="">项目费用申请审批</span>
</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>
</div>
</div>
<!-- 步骤条-->
<div class="shadow_box_bottom_step">
<text class="text1">审批流程</text>
<div class="text2">
<text>项目编号</text>
<text>{{changProjectNumber}}</text>
</div>
<div >
<FlowChart :dataList="list" :itemWidth="'130px'" :activeIndex="2"/>
</div>
</div>
<!-- 列表 -->
<el-table :data="projectCostRequestList" border>
<el-table-column type="selection" align="center"></el-table-column>
<el-table-column prop="shenqingren" label="申请人" align="center"></el-table-column>
<el-table-column prop="createBy" label="申请人" align="center"></el-table-column>
<el-table-column prop="createTime" label="申请时间" align="center" min-width="100px"> </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>
<!-- <el-table-column prop="userName" label="事业部负责人" align="center"></el-table-column>-->
<el-table-column prop="expenseType" label="费用类型" align="center" ></el-table-column>
<el-table-column prop="userName" label="事业部负责人" align="center"></el-table-column>
<el-table-column prop="costType" label="费用类型" align="center" ></el-table-column>
<el-table-column prop="timeOfExpense" label="费用发生时间" align="center"></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>
......@@ -86,34 +103,109 @@
<script setup>
import {reactive, ref} from "vue";
const router = useRouter()
import { useRouter } from 'vue-router'
const { proxy } = getCurrentInstance();
import FlowChart from '@/components/FlowChart/index.vue'
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');
import {getProjectName} from "../../../../api/examineAndApprove/examineAndApprove.js";
import {getCostRequestList} from "../../../../api/projectCostRequest/projectCostRequest.js";
const list = ref(['个人','项目经理','事业部负责人','财务','总经理']) // 流程图内容,只有值
const allList = ref([]) // 流程图内容,值和角色id
const projectCostRequestList = ref([
{
shenqingren:'张三',
createTime:'2025-03-18 10:10:34',
projectName:'餐饮项目',
projectType:'RL-人力',
userName:'ry',
expenseType:'办公费-宽带费',
timeOfExpense:'2025-02-01',
sumMoney:'200',
approvalStatus:'进行中'
}
]);
const total = ref(0);
const queryParams = reactive({
pageNum:1,
pageSize:10,
projectName:null,
projectNumber:null,
userName:null,
projectType:null,
approveStatus:null
})
// 表单 获取所有项目名称
const projectNameList = ref([]);
const getAllProjectName=()=> {
getProjectName(queryParams).then(response => {
console.log("项目名称",response.data)
projectNameList.value = response.data;
});
}
getAllProjectName()
// 重置表单
const reset = () => {
queryParams.projectName = null
queryParams.projectType = null
queryParams.approveStatus = null
getList()
}
// 列表
const projectCostRequestList = ref([]);
const getList=()=> {
getCostRequestList(queryParams).then(response => {
total.value = response.total
console.log("列表",response)
projectCostRequestList.value = response.rows;
});
}
getList()
</script>
<style scoped lang="scss">
//步骤条
.shadow_box_bottom_step {
display: flex;
margin-top: 10px;
margin-bottom: 20px;
padding: 20px 0px;
width: 100%;
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%;
}
}
//导航 、 按钮
.shadow_box_bottom_add {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding:10px 0;
margin-bottom: 20px;
.topDiv{
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>
src/views/costManage/examineAndApprove/components/tripApplicationApprove.vue
View file @ 49f1a01a
......@@ -93,10 +93,28 @@
</div>
<div class="contentTable">
<!-- 按钮-->
<div style="margin-bottom: 30px">
<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>
<!-- 标题、按钮-->
<div class="shadow_box_bottom_add">
<div class="topDiv">
<span class="bold-text1" style="">出差申请审批</span>
</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>
</div>
</div>
<!-- 步骤条-->
<div class="shadow_box_bottom_step">
<text class="text1">审批流程</text>
<div class="text2">
<text>项目编号</text>
<text>{{}}</text>
</div>
<div >
<FlowChart :dataList="list" :itemWidth="'130px'" :activeIndex="2"/>
</div>
</div>
<!-- 表格数据 -->
<el-table :data="projectList" border style="width: 100%">
......@@ -113,7 +131,7 @@
<el-table-column label="审批状态" align="center" prop="projectStatus" ></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(scope.row)">
<el-button link type="text" @click="handleView()">
<img src="@/assets/icons/common/check.png" height="32" width="32"/>
</el-button>
</el-tooltip>
......@@ -126,29 +144,29 @@
</template>
</el-table-column>
</el-table>
<div style="padding-right: 35%;">
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div>
<!-- <div style="padding-right: 35%;">-->
<!-- <pagination-->
<!-- v-show="total > 0"-->
<!-- :total="total"-->
<!-- v-model:page="queryParams.pageNum"-->
<!-- v-model:limit="queryParams.pageSize"-->
<!-- @pagination="getList"-->
<!-- />-->
<!-- </div>-->
</div>
<!-- 驳回弹出框-->
<el-dialog top="200px" style="width: 745px;height: 300px" v-model="dialogFormVisible" title="驳回" >
<el-dialog style="width: 745px;height: 300px" v-model="dialogFormVisible" title="驳回" >
<template #header>
<div style="margin-bottom:30px;color: #0D162AFF;font-family: PingFangSC-Regular;font-weight: 600;font-size: 16px;">驳回<el-divider /></div>
<div class="text_weight">驳回<el-divider /></div>
</template>
<div style="padding:5px" >
<div style="font-family: PingFangSC-Regular;font-weight: 550;font-size: 16px;color: #0D162A">驳回原因</div>
<div style="width: 680px;margin-top:10px"> <el-input :rows="3" type="textarea" v-model="form.name" placeholder="请输入驳回原因" /></div>
<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>
<template #footer>
<div style="position: absolute;left: 60%;display: flex">
<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>
</div>
......@@ -161,13 +179,15 @@
<script setup lang="ts">
import {ArrowDown} from "@element-plus/icons-vue";
import FlowChart from '@/components/FlowChart/index.vue'
import {ElMessageBox} from "element-plus";
import {useRouter} from "vue-router";
import {ref,getCurrentInstance,reactive,toRefs} from "vue"
const router = useRouter();
const { proxy } = getCurrentInstance();
const { project_status, project_type } = proxy.useDict('project_status', 'project_type');
const list = ref(['个人','项目经理','事业部负责人','财务','总经理']) // 流程图内容,只有值
const allList = ref([]) // 流程图内容,值和角色id
const dialogFormVisible = ref(false)
const projectList = ref([
......@@ -213,6 +233,7 @@ const toggleSearch = () => {
isExpanded.value = !isExpanded.value;
}
/** 搜索按钮操作 */
function handleQuery() {
......@@ -222,16 +243,74 @@ function handleQuery() {
function resetQuery() {
}
/** 查看详情按钮操作 */
function handleView(){
}
</script>
<style scoped lang="scss">
.el-dialog:not(.is-fullscreen){
margin-top: 10vh !important;
//步骤条
.shadow_box_bottom_step {
display: flex;
margin-top: 10px;
margin-bottom: 20px;
padding: 20px 0px;
width: 100%;
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%;
}
}
//导航 、 按钮
.shadow_box_bottom_add {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding:10px 0;
.topDiv{
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", sans-serif;
font-weight: 900;
font-size: 18px;
color: #0D162A;
letter-spacing: 0;
line-height: 15px;
}
}
.text_weight{
font-family: "PingFangSC-Medium", sans-serif;
font-weight: 600;
font-size: 16px;
}
.bohui{
font-family: "PingFangSC-Medium", sans-serif;
font-weight: 500;
font-size: 16px;
color: #0D162A;
}
</style>
src/views/costManage/examineAndApprove/components/tripReimburseApprove.vue
View file @ 49f1a01a
......@@ -86,11 +86,27 @@
</div>
<div class="contentTable">
<!-- 按钮-->
<div style="margin-bottom: 30px;">
<!-- 标题、按钮-->
<div class="shadow_box_bottom_add">
<div class="topDiv">
<span class="bold-text1" style="">差旅报销审批</span>
</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>
</div>
</div>
<!-- 步骤条-->
<div class="shadow_box_bottom_step">
<text class="text1">审批流程</text>
<div class="text2">
<text>项目编号</text>
<text>{{changProjectNumber}}</text>
</div>
<div >
<FlowChart :dataList="list" :itemWidth="'130px'" :activeIndex="2"/>
</div>
</div>
<!-- 表格数据 -->
<el-table v-loading="loading" :data="projectList" border style="width: 100%">
<el-table-column type="selection" width="40" align="right"/>
......@@ -160,8 +176,9 @@
<script setup>
import {reactive, ref} from "vue";
import {ArrowDown} from "@element-plus/icons-vue";
import FlowChart from '@/components/FlowChart/index.vue'
const list = ref(['个人','项目经理','事业部负责人','财务','总经理']) // 流程图内容,只有值
const allList = ref([]) // 流程图内容,值和角色id
const dialogFormVisible = ref(false)
const projectList = ref([
{
......@@ -218,5 +235,54 @@ function resetQuery() {
<style scoped lang="scss">
//步骤条
.shadow_box_bottom_step {
display: flex;
margin-top: 10px;
margin-bottom: 20px;
padding: 20px 0px;
width: 100%;
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%;
}
}
//导航 、 按钮
.shadow_box_bottom_add {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding:10px 0;
margin-bottom: 10px;
.topDiv{
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>
src/views/costManage/examineAndApprove/index.vue
View file @ 49f1a01a
......@@ -53,7 +53,7 @@ import ProjectCostReimbursementApprove from "./components/projectCostReimburseme
const activeName = ref('first');
const handleClick = (tab) =>{
console.log('点击的标签:', toRaw(tab));
// console.log('点击的标签:', toRaw(tab));
// 更新当前激活的标签名
activeName.value = tab.name;
}
......@@ -74,12 +74,14 @@ const handleClick = (tab) =>{
.tabs_span_color{
font-size: 16px;
color: #5B5B5B;
font-family: "Microsoft YaHei", sans-serif;
font-weight: 500;
font-family: "PingFangSC-Medium", sans-serif;
}
.tabs_span_colorChange{
font-size: 16px;
color: #0062FF;
font-family: "Microsoft YaHei", sans-serif;
font-weight: 500;
font-family: "PingFangSC-Medium", sans-serif;
}
</style>
src/views/costManage/projectCostRequest/index.vue
View file @ 49f1a01a
......@@ -2,8 +2,8 @@
<div class="app-container" >
<!-- 搜索表单-->
<div class="formSearch" >
<el-form ref="formRef" :inline="true" :model="formInline" >
<el-form-item style="margin-right: 60px" label="项目名称">
<el-form ref="formRef" :inline="true" :model="formInline" label-width="120px">
<el-form-item label="项目名称">
<el-select style="width: 220px" v-model="queryParams.projectName" placeholder="请选择项目名称" clearable>
<el-option
v-for="item in projectNameList"
......@@ -12,7 +12,7 @@
:value="item"/>
</el-select>
</el-form-item>
<el-form-item style="margin-right: 60px" label="项目类型">
<el-form-item label="项目类型">
<el-select style="width: 220px" v-model="queryParams.projectType" placeholder="请选择项目类型" clearable>
<el-option
v-for="dict in project_type"
......@@ -31,7 +31,7 @@
</el-select>
</el-form-item>
<el-form-item>
<div style="margin-left: 250px">
<div style="padding-left: 5.4%">
<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>
</div>
......@@ -102,7 +102,7 @@
<span>{{row.userName}}</span>
</template>
</el-table-column>
<el-table-column prop="expenseType" label="费用类型" align="center" width="200px">
<el-table-column prop="costType" label="费用类型" align="center" width="200px">
<template #default="scope">
<dict-tag :options="project_cost_type" :value="scope.row.costType"/>
</template>
......@@ -185,8 +185,7 @@ const queryParams = reactive({
pageNum:1,
pageSize:10,
projectName:null,
projectNumber:null,
userName:null,
projectType:null,
approveStatus:null
})
let ids = ref([])
......@@ -271,9 +270,8 @@ getAllProjectName()
// 重置表单
const reset = () => {
queryParams.projectName = null
queryParams.projectNumber = null
queryParams.userName = null
queryParams.approvalStatus = null
queryParams.projectType = null
queryParams.approveStatus = null
getList()
}
// 提交搜索表单
......
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