Skip to content

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

新增日常报销费用审批页

parent ebf6c96e
Hide whitespace changes
Inline Side-by-side
Showing with 341 additions and 2 deletions
src/views/costManage/examineAndApprove/components/dailyReimburseApprove.vue
View file @ 54d01e73
<template> <template>
<div class="app-container"> <!-- 搜索表单-->
日常报销审批 <div class="formSearch" >
<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
<!-- 默认显示的查询条件 -->
<el-form-item label="项目名称" prop="projectName">
<el-select
v-model="queryParams.projectStatus"
placeholder="请选择项目名称"
style="width: 220px"
clearable
>
<el-option
v-for="dict in project_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="报销类型" prop="reimbursementType">
<el-select
v-model="queryParams.reimbursementType"
placeholder="请选择"
clearable
style="width: 220px"
>
<el-option
v-for="dict in cost_daily_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="审批状态" prop="projectStatus">
<el-select
v-model="queryParams.projectStatus"
placeholder="请选择项目状态"
style="width: 220px"
clearable
>
<el-option
v-for="dict in project_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<!-- 操作按钮 -->
<el-form-item style="padding-left: 5.4%">
<el-button icon="Refresh" @click="resetQuery" class="el-button-defalut">重置</el-button>
<el-button type="primary" icon="Search" @click="handleQuery" class="el-button-primary">查询</el-button>
<el-button size="large" type="text" @click="toggleSearch">
{{ isExpanded ? ' 收起' : ' 展开' }}
<el-icon class="el-icon--right">
<arrow-down />
</el-icon>
</el-button>
</el-form-item>
<!-- 可折叠的查询条件 -->
<transition>
<div v-if="isExpanded">
<el-form-item label="项目经理" prop="projectManagerId">
<el-select
v-model="queryParams.projectStatus"
placeholder="请选择项目经理"
style="width: 220px"
clearable
>
<el-option
v-for="dict in project_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="事业部负责人" prop="projectType">
<el-select
v-model="queryParams.projectType"
placeholder="请选择事业部负责人"
style="width: 220px"
clearable
>
<el-option
v-for="dict in project_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="报销月份">
<el-date-picker
v-model="dateRange"
value-format="YYYY-MM"
type="month"
placeholder="请选择报销月份"
></el-date-picker>
</el-form-item>
<el-form-item label="申请人">
<el-input style="width: 220px" placeholder="请输入申请人姓名"/>
</el-form-item>
</div>
</transition>
</el-form>
</div> </div>
<div class="contentTable">
<!-- 标题、按钮-->
<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%">
<el-table-column type="selection" width="40" align="right"/>
<el-table-column label="申请人" align="center" prop="shenqingren" fixed width="100px"/>
<el-table-column label="项目编号" align="center" prop="projectNumber" width="180px"/>
<el-table-column label="项目名称" align="center" prop="projectName" width="120px"/>
<el-table-column label="项目经理" align="center" prop="projectUserName" width="120px"/>
<el-table-column label="事业部负责人" align="center" prop="departmentUserName" width="150px"/>
<el-table-column label="提交时间" align="center" prop="registrationTime" width="180px"/>
<el-table-column label="报销月份" align="center" prop="reimbursement" width="120px"/>
<el-table-column label="餐饮费" align="center" prop="totalFoodCost" width="100px"/>
<el-table-column label="交通费" align="center" prop="totalTaxiCost" width="100px"/>
<el-table-column label="总额" align="center" prop="totalMoney" width="100px"/>
<el-table-column label="审批状态" align="center" prop="status" width="100px"/>
<el-table-column prop="detail" label="详情" align="center" width="100px">
<el-tooltip content="详情" placement="top">
<el-button link type="text" @click="handleView()">
<img src="@/assets/icons/common/check.png" height="32" width="32"/>
</el-button>
</el-tooltip>
</el-table-column>
<!-- 操作按钮-->
<el-table-column label="操作" align="center" fixed="right" width="120px">
<template #default="scope" >
<el-button link type="primary" size="small" style="font-size: 15px">通过</el-button>
<el-button link @click="dialogFormVisible = true" type="danger" size="small" style="font-size: 15px">驳回</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-box">
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="projectList"
/>
</div>
</div>
<!-- 驳回弹出框-->
<el-dialog style="width: 745px;height: 300px" v-model="dialogFormVisible" title="驳回" >
<template #header>
<div class="text_weight">驳回<el-divider /></div>
</template>
<div style="padding: 5px;display: flex;flex-direction:column;">
<div class="text">驳回原因</div>
<div style="width: 95%;margin-top:10px"> <el-input :rows="3" type="textarea" v-model="form.name" placeholder="请输入驳回原因" /></div>
</div>
<template #footer>
<div style="position: absolute;left: 35%;display: flex">
<el-button @click="dialogFormVisible = false" class="btn-B">取消</el-button>
<el-button @click="dialogFormVisible" class="btn-A" type="primary">确定</el-button>
</div>
</template>
</el-dialog>
</template> </template>
<script setup> <script setup>
import {ArrowDown} from "@element-plus/icons-vue";
import FlowChart from '@/components/FlowChart/index.vue'
import {ElMessageBox} from "element-plus";
import {useRouter} from "vue-router";
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([
{
shenqingren:'张三',
projectNumber:'20250306RL001',
createTime:'2025-03-18 10:10:34',
projectName:'餐饮项目',
projectUserName:'张三经理',
departmentUserName:'蔡徐坤',
registrationTime:'2025-03-11',
reimbursement:'2025-03',
totalFoodCost:'27',
totalTaxiCost:'1399',
totalMoney:'1426',
status:'进行中'
},
{
shenqingren:'张三',
projectNumber:'20250306RL001',
createTime:'2025-03-18 10:10:34',
projectName:'餐饮项目',
projectUserName:'张三经理',
departmentUserName:'蔡徐坤',
registrationTime:'2025-03-11',
reimbursement:'2025-03',
totalFoodCost:'27',
totalTaxiCost:'1399',
totalMoney:'1426',
status:'进行中'
}
]);
const loading = ref(true);
const total = ref(1);
const dateRange = ref([]);
// 更多搜索框
const isExpanded = ref(false);
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
projectNumber: null,
projectName: null,
projectType: null,
departmentLeaderId: null,
projectManagerId: null,
projectStatus: null,
},
});
const { queryParams, form} = toRefs(data);
// 切换展开/折叠状态
const toggleSearch = () => {
isExpanded.value = !isExpanded.value;
}
/** 搜索按钮操作 */
function handleQuery() {
}
/** 重置按钮操作 */
function resetQuery() {
}
/** 查看详情按钮操作 */
function handleView(){
}
</script> </script>
<style scoped lang="scss"> <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;
.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;
}
.pagination-box {
padding-right: 40%;
margin-top: 20px;
}
</style> </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