Skip to content

P
psa-web
Commit 09e57b45 authored by qyx's avatar qyx
Browse files
Options

项目费用申请列表

parent 530b9e98
Show whitespace changes
Inline Side-by-side
Showing with 289 additions and 285 deletions
src/api/projectCostRequest/projectCostRequest.js 0 → 100644
View file @ 09e57b45
import request from '@/utils/request'
// 查询项目费用申请列表
export function getCostRequestList() {
return request({
url: '/projectCostRequest/list',
method: 'get',
})
}
src/views/costManage/projectCostRequest/detail.vue
View file @ 09e57b45
<template>
<div class="app-container">
<!-- 面包屑导航-->
<div class="inner">
<!-- 导航-->
<div class="top">
<div class="top_text">新增项目费用申请</div>
<div class="top_line"></div>
......@@ -8,118 +10,165 @@
<!-- 表单-->
<div class="addform">
<el-form :inline="true" :model="form" label-width="auto">
<el-form-item label="项目名称">
<el-select
v-model="form.xiangmumingcheng"
placeholder="请选择项目名称"
>
<el-option label="项目一" value="shanghai" />
<el-option label="项目二" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="项目编号">
<el-input v-model="form.xiangmubianhao" disabled />
</el-form-item>
<el-form-item label="项目类型">
<el-input v-model="form.xiangmuleixing" disabled />
</el-form-item>
<el-form-item label="事业部负责人">
<el-input v-model="form.fuzeren" disabled />
</el-form-item>
<el-form-item label="项目状态">
<el-input v-model="form.xiangmustatus" disabled />
</el-form-item>
<el-form :model="form" label-width="auto">
<el-form-item label="登记人">
<el-input v-model="form.dengjiren" placeholder="张三" disabled />
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="流水号">
<el-input
v-model="form.liushuihao"
disabled
placeholder="自动生成流水号"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="费用类型">
<el-select
v-model="form.feiyongleixing"
placeholder="请选择项目费用类型"
clearable
>
<el-option label="办公用品" value="shanghai" />
<el-option label="云服务购买" value="beijing" />
<el-option label="域名/服务器托管费" value="beijing" />
</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="form.xiangmumingcheng"
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-input v-model="form.wupinmiaoshu" placeholder="请输入物品名称" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目编号">
<el-input v-model="form.xiangmubianhao" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="费用发生时间">
<el-date-picker
<el-date-picker style="width: 500px;height: 40px"
v-model="form.date"
type="date"
placeholder="请选择费用发生时间"
clearable
/>
clearable/>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="物品描述">
<el-input v-model="form.wupinmiaoshu" placeholder="请输入物品名称" />
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目类型">
<el-input v-model="form.xiangmuleixing" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-row >
<el-col :span="7">
<el-form-item label="单价">
<el-input v-model="form.danjia" placeholder="请输入物品单价" />
<el-input class="danjia_shuliang" v-model="form.danjia" placeholder="请输入物品单价" />
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="数量">
<el-input v-model="form.num" placeholder="请输入物品数量" />
<el-input class="danjia_shuliang" v-model="form.num" placeholder="请输入物品数量" />
</el-form-item>
</el-col>
</el-row>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="事业部负责人">
<el-input v-model="form.fuzeren" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="申请金额（元）">
<el-input v-model="form.jine" placeholder="请输入申请金额" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目状态">
<el-input v-model="form.xiangmustatus" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注">
<el-input
v-model="form.beizhu"
:autosize="{ minRows: 1 }"
:autosize="{ minRows: 4 }"
type="textarea"
placeholder="请输入备注"
/>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="流水号">
<el-input
v-model="form.liushuihao"
disabled
placeholder="自动生成流水号"
/>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="登记人">
<el-input v-model="form.dengjiren" placeholder="张三" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
</el-col>
</el-row>
<!-- <el-form-item label="上传附件">-->
<!-- <el-upload-->
<!-- v-model:file-list="form.fujian"-->
<!-- action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"-->
<!-- multiple-->
<!-- :on-preview="handlePreview"-->
<!-- :on-remove="handleRemove"-->
<!-- :before-remove="beforeRemove"-->
<!-- :limit="3"-->
<!-- :on-exceed="handleExceed"-->
<!-- >-->
<!-- <el-icon class="folderAdd"><FolderAdd /></el-icon>-->
<!-- <text>点击上传附件</text>-->
<!-- </el-upload>-->
<!-- </el-form-item>-->
</el-form>
</div>
<!-- 取消、提交按钮-->
<div class="button">
<div><el-button class="button_size">取消</el-button></div>
<div><el-button @click="goBackIndex" class="button_size">取消</el-button></div>
<div><el-button class="button_size" type="primary">提交</el-button></div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
// 表单
const form = reactive({
......@@ -139,15 +188,27 @@ const form = reactive({
liushuihao: '',
fujian: ''
})
const router = useRouter()
const goBackIndex = () => {
router.push({ path: '/costManage/projectCostRequest/index' })
}
</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: 150px;
margin-left: 40px;
margin-top: 20px;
.top_text {
cursor: default;
......@@ -157,23 +218,25 @@ const form = reactive({
font-family: 'Microsoft YaHei', sans-serif;
}
.top_line {
border: solid 2px #0062ff;
border: solid 1px #0062ff;
margin-top: 5px;
height: 4px;
background-color: #0062ff;
}
}
.addform {
margin-left: 50px;
margin-top: 30px;
display: flex;
align-content: center;
.el-form-item {
margin-right: 400px;
width: 400px;
width: 500px;
height: 40px;
.danjia_shuliang{
width: 150px;
}
}
}
.folderAdd {
......
src/views/costManage/projectCostRequest/index.vue
View file @ 09e57b45
<template>
<div class="app-container">
<div class="app-container" >
<div class="shadow_box_top">
<el-form :inline="true" :model="formInline">
<el-form class="shadow_box_top_form" :inline="true" :model="formInline">
<el-form-item label="项目名称">
<el-select
v-model="formInline.mingcheng"
......@@ -39,22 +39,11 @@
<el-option label="项目类型二" value="beijing" />
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="reset"
><img
src="@/assets/icons/common/reset.png"
class="img-icon"
/>重置</el-button
>
<el-button type="primary" @click="onSearch"
><img
src="@/assets/icons/common/search.png"
class="img-icon"
/>查询</el-button
>
</el-form-item>
</el-form>
<div>
<el-button type="primary" class="el-button-primary" icon="Search" @click="onSearch">搜索</el-button>
<el-button type="default" class="el-button-defalut" icon="Refresh" @click="reset">重置</el-button>
</div>
</div>
<div class="shadow_box_bottom">
......@@ -65,52 +54,12 @@
<div class="left_line"></div>
</div>
<div class="right">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain size="mini" @click="goToAddPage">
<template #icon>
<Plus />
</template>
新增费用申请
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
size="mini"
:disabled="single"
@click="handleUpdate"
>
<template #icon>
<Edit />
</template>
修改
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
type="primary"
plain
size="mini"
:disabled="multiple"
@click="handleDelete"
>
<template #icon>
<el-icon><Delete /></el-icon>
</template>
删除
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain size="mini" @click="handleExport">
<template #icon>
<el-icon><Share /></el-icon>
</template>
导出
</el-button>
</el-col>
</el-row>
icon="Plus"
@click="goToAddPage"
>费用申请</el-button>
</div>
</div>
......@@ -136,9 +85,9 @@
<!-- 列表-->
<div class="shadow_box_bottom_table">
<el-table :data="tableData" border>
<el-table v-loading="loading" :data="projectCostRequestList" border>
<el-table-column type="selection" align="center"></el-table-column>
<el-table-column prop="projectNo" label="项目编号" align="center">
<el-table-column prop="projectNumber" label="项目编号" align="center">
<template #default="scope">
<span
style="
......@@ -146,7 +95,7 @@
text-decoration: underline;
cursor: pointer;
"
>{{ scope.row.projectNo }}</span
>{{ scope.row.projectNumber }}</span
>
</template>
</el-table-column>
......@@ -158,27 +107,28 @@
<el-table-column
prop="projectType"
label="项目类型"
align="center"
></el-table-column>
align="center">
<template #default="{ row }">
<dict-tag :options="project_type" :value="row.projectType"/>
</template>
</el-table-column>
<el-table-column
prop="departmentLeader"
prop="userName"
label="事业部负责人"
align="center"
></el-table-column>
<el-table-column prop="projectStatus" label="项目状态" align="center">
<template #default="{ row }">
<el-tag :type="getTagType(row.projectStatus)">{{
row.projectStatus
}}</el-tag>
<dict-tag :options="project_status" :value="row.projectStatus"/>
</template>
</el-table-column>
<el-table-column
prop="serialNo"
prop="waterNumber"
label="流水号"
align="center"
></el-table-column>
<el-table-column
prop="expenseTime"
prop="timeOfExpense"
label="费用发生时间"
align="center"
></el-table-column>
......@@ -186,21 +136,22 @@
prop="expenseType"
label="费用类型"
align="center"
></el-table-column>
>
<template #default="scope">
<dict-tag :options="project_cost_type" :value="scope.row.costType"/>
</template>
</el-table-column>
<el-table-column
prop="amount"
prop="sumMoney"
label="金额（元）"
align="center"
></el-table-column>
<el-table-column
prop="approvalStatus"
label="审批状态"
align="center"
>
<template #default="{ row }">
<el-tag :type="getApprovalTagType(row.approvalStatus)">{{
row.approvalStatus
}}</el-tag>
align="center">
<template #default="scope">
<dict-tag :options="project_cost_request_status" :value="scope.row.approveStatus"/>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
......@@ -211,11 +162,31 @@
</el-table-column>
</el-table>
</div>
</div>
</div >
</div>
</template>
<script setup>
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 projectCostRequestList = ref([]);
const getList=()=> {
getCostRequestList().then(response => {
console.log("数组",response.data)
projectCostRequestList.value = response.data
});
}
getList()
// 顶部搜索表单数据
const formInline = reactive({
......@@ -238,91 +209,49 @@ const onSearch = () => {
console.log(formInline.value)
}
const tableData = reactive([
{
projectNo: 'XS647375',
projectName: '生活费项目',
projectType: 'A型',
departmentLeader: '张三',
projectStatus: '待审批',
serialNo: 'ls565646265',
expenseTime: '2025/01/02',
expenseType: '笔记本',
amount: 300,
approvalStatus: '待审批'
},
{
projectNo: 'XS647375',
projectName: '生活费项目',
projectType: 'A型',
departmentLeader: '张三',
projectStatus: '待审批',
serialNo: 'XS656465',
expenseTime: '2025/01/02',
expenseType: 'U盘',
amount: 200,
approvalStatus: '已通过'
},
{
projectNo: '1345abc',
projectName: 'XXX项目',
projectType: 'B型',
departmentLeader: '李四',
projectStatus: '待审批',
serialNo: 'ls565646265',
expenseTime: '2025/01/02',
expenseType: '办公用品',
amount: 200,
approvalStatus: '进行中'
},
{
projectNo: '1345abc',
projectName: 'XXX项目',
projectType: 'B型',
departmentLeader: '李四',
projectStatus: '待审批',
serialNo: 'XS656465',
expenseTime: '2025/01/02',
expenseType: '办公用品',
amount: 200,
approvalStatus: '已通过'
}
])
// 根据项目状态返回标签类型
const getTagType = status => {
if (status === '待审批') return 'warning'
return 'default'
}
// 根据审批状态返回标签类型
const getApprovalTagType = status => {
if (status === '已通过') return 'success'
if (status === '进行中') return 'primary'
if (status === '待审批') return 'warning'
return 'default'
}
//新增按钮
import { useRouter } from 'vue-router'
import {getCostRequestList} from "../../../api/projectCostRequest/projectCostRequest.js";
const router = useRouter()
const goToAddPage = () => {
console.log(123)
router.push({ path: '/costManage/projectCostRequest/add' })
}
</script>
<style scoped lang="scss">
.shadow_box_top {
margin-top: 20px;
margin-left: 1%;
width: 98%;
box-shadow: 5px 5px 5px -3px rgba(0, 0, 0, 0.2);
.el-form {
padding: 10px;
display: flex;
justify-content: space-around;
align-items: center;
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);
.shadow_box_top_form {
margin-top: 20px;
padding: 10px 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.el-form-item {
width: 270px;
......@@ -338,8 +267,10 @@ const goToAddPage = () => {
margin-top: 20px;
margin-left: 1%;
width: 98%;
height: 50%;
box-shadow: 5px 5px 5px -3px rgba(0, 0, 0, 0.2);
height: calc(100vh - 250px);
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);
//导航 、 按钮
.shadow_box_bottom_add {
......@@ -347,7 +278,7 @@ const goToAddPage = () => {
width: 98%;
justify-content: space-between;
align-items: center;
margin-top: 20px;
padding:10px;
.left {
display: flex;
flex-direction: column;
......@@ -361,9 +292,10 @@ const goToAddPage = () => {
font-family: 'Microsoft YaHei', sans-serif;
}
.left_line {
border: solid 2px #0062ff;
border: solid 1px #0062ff;
margin-top: 5px;
height: 4px;
background-color: #0062ff;
}
}
.right {
......@@ -373,12 +305,12 @@ const goToAddPage = () => {
//步骤条
.shadow_box_bottom_step {
display: flex;
margin: 20px 0px;
margin: 10px 13px;
padding: 20px 0px;
width: 98%;
justify-content: space-evenly;
align-items: center;
background-color: #f9f9fa;
background-color: #f3f3f3;
.text1 {
font-size: 18px;
font-weight: 550;
......
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