Skip to content

P
psa-web
Commit 899670a8 authored by qyx's avatar qyx
Browse files
Options

项目费用申请列表详情

parent 256a4232
Hide whitespace changes
Inline Side-by-side
Showing with 168 additions and 191 deletions
src/api/projectCostRequest/projectCostRequest.js
View file @ 899670a8
......@@ -8,3 +8,12 @@ export function getCostRequestList(query) {
params:query
})
}
// 查询项目费用申请详情
export function getCostRequestDetail(id) {
return request({
url: '/projectCostRequest/' + id,
method: 'get'
})
}
src/views/costManage/projectCostRequest/detail.vue
View file @ 899670a8
......@@ -10,13 +10,12 @@
<!-- 表单-->
<div class="addform">
<el-form :model="form" label-width="auto">
<el-form :disabled="type ==='详情'" :model="costRequestDetailList" label-width="auto">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="流水号">
<el-input
v-model="form.liushuihao"
v-model="costRequestDetailList.waterNumber"
disabled
placeholder="自动生成流水号"/>
</el-form-item>
......@@ -24,13 +23,14 @@
<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" />
v-model="costRequestDetailList.costType"
disabled>
<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>
......@@ -40,7 +40,7 @@
<el-col :span="12">
<el-form-item label="项目名称">
<el-select
v-model="form.xiangmumingcheng"
v-model="costRequestDetailList.projectName"
placeholder="请选择项目名称" clearable>
<el-option label="项目一" value="shanghai" />
<el-option label="项目二" value="beijing" />
......@@ -49,7 +49,7 @@
</el-col>
<el-col :span="12">
<el-form-item label="物品描述">
<el-input v-model="form.wupinmiaoshu" placeholder="请输入物品名称" />
<el-input v-model="costRequestDetailList.description" placeholder="请输入物品名称" />
</el-form-item>
</el-col>
</el-row>
......@@ -58,13 +58,13 @@
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目编号">
<el-input v-model="form.xiangmubianhao" disabled/>
<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="form.date"
v-model="costRequestDetailList.createTime"
type="date"
placeholder="请选择费用发生时间"
clearable/>
......@@ -76,7 +76,16 @@
<el-col :span="12">
<el-form-item label="项目类型">
<el-input v-model="form.xiangmuleixing" disabled />
<el-select
v-model="costRequestDetailList.projectType"
disabled>
<el-option
v-for="dict in project_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
......@@ -84,12 +93,12 @@
<el-row >
<el-col :span="7">
<el-form-item label="单价">
<el-input class="danjia_shuliang" v-model="form.danjia" placeholder="请输入物品单价" />
<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="form.num" placeholder="请输入物品数量" />
<el-input class="danjia_shuliang" v-model="costRequestDetailList.amount" placeholder="请输入物品数量" />
</el-form-item>
</el-col>
</el-row>
......@@ -99,12 +108,12 @@
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="事业部负责人">
<el-input v-model="form.fuzeren" disabled />
<el-input v-model="costRequestDetailList.userName" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="申请金额（元）">
<el-input v-model="form.jine" placeholder="请输入申请金额" />
<el-input v-model="costRequestDetailList.sumMoney" placeholder="请输入申请金额" />
</el-form-item>
</el-col>
</el-row>
......@@ -112,13 +121,24 @@
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目状态">
<el-input v-model="form.xiangmustatus" disabled />
<el-select
v-model="costRequestDetailList.projectStatus"
disabled
>
<el-option
v-for="dict in project_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注">
<el-input
v-model="form.beizhu"
v-model="costRequestDetailList.remark"
:autosize="{ minRows: 4 }"
type="textarea"
placeholder="请输入备注"
......@@ -130,7 +150,7 @@
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="登记人">
<el-input v-model="form.dengjiren" placeholder="张三" disabled />
<el-input v-model="costRequestDetailList.dengjiren" placeholder="张三" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
......@@ -138,26 +158,13 @@
</el-col>
</el-row>
</el-form>
</div>
<!-- 取消、提交按钮-->
<div class="button">
<div><el-button @click="goBackIndex" class="button_size">取消</el-button></div>
<div><el-button class="button_size" type="primary">提交</el-button></div>
<div><el-button v-if="type !=='详情'" class="button_size" type="primary">提交</el-button></div>
</div>
</div>
......@@ -168,26 +175,30 @@
<script setup>
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');
//根据项目id获取表单详情数据
const costRequestDetailList = ref([]);
const getDetail=()=> {
let projectId = proxy.$route.query.id;
getCostRequestDetail(projectId).then(response => {
console.log(response.data)
costRequestDetailList.value = response.data
});
}
//根据跳转页面是否传参判断进详情页or新增页
let type = proxy.$route.query.type
if(type === "详情"){
//进详情页面
getDetail()
}else{
//进新增页面
}
// 表单
const form = reactive({
xiangmumingcheng: '',
xiangmubianhao: '',
xiangmuleixing: '',
fuzeren: '',
xiangmustatus: '',
dengjiren: '',
feiyongleixing: '',
date: '',
wupinmiaoshu: '',
danjia: '',
num: '',
jine: '',
beizhu: '',
liushuihao: '',
fujian: ''
})
// 取消按钮
const router = useRouter()
const goBackIndex = () => {
router.push({ path: '/costManage/projectCostRequest/index' })
......
src/views/costManage/projectCostRequest/index.vue
View file @ 899670a8
<template>
<div class="app-container" >
<div class="shadow_box_top">
<el-form class="shadow_box_top_form" ref="formRef" :inline="true" :model="formInline">
<el-form class="formSearch" ref="formRef" :inline="true" :model="formInline">
<el-form-item label="项目名称">
<el-input
v-model="queryParams.projectName"
placeholder="请选择项目名称"
clearable
/>
clearable/>
</el-form-item>
<el-form-item label="项目编号">
<el-input
v-model="queryParams.projectNumber"
placeholder="请输入项目编号"
clearable
/>
clearable/>
</el-form-item>
<el-form-item label="项目负责人">
<el-input
v-model="queryParams.userName"
placeholder="请输入项目负责人"
clearable
/>
clearable/>
</el-form-item>
<el-form-item label="项目类型">
<el-select v-model="queryParams.projectType" placeholder="请选择项目类型" clearable>
<el-option
v-for="dict in project_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
:value="dict.value"/>
</el-select>
</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>
<el-form-item>
<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>
</el-form-item>
</el-form>
<div class="shadow_box_bottom">
<!-- 导航、按钮-->
<div class="shadow_box_bottom_add">
<div class="left">
......@@ -69,7 +56,7 @@
<text class="text1">审批流程</text>
<div class="text2">
<text>项目编号</text>
<text>XS647375</text>
<text>{{}}</text>
</div>
<div class="step">
<el-steps :active="2" align-center>
......@@ -85,19 +72,12 @@
</div>
<!-- 列表-->
<div class="shadow_box_bottom_table">
<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">
<template #default="scope">
<span
style="
color: royalblue;
text-decoration: underline;
cursor: pointer;
"
>{{ scope.row.projectNumber }}</span
>
<template #default="{row}">
<span @click="handleView(row)" style="color:royalblue;text-decoration:underline;cursor:pointer;">{{row.projectNumber}}</span>
</template>
</el-table-column>
<el-table-column
......@@ -156,24 +136,27 @@
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="{ row }">
<el-icon class="list_icon"><Edit /></el-icon>
<el-icon class="list_icon"><View /></el-icon>
<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>
</template>
</el-table-column>
</el-table>
</div>
<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>
<pagination
v-show="total>0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div >
</div>
</template>
......@@ -183,7 +166,7 @@
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 total = ref(0);
const queryParams = reactive({
pageNum:1,
pageSize:10,
......@@ -192,27 +175,24 @@ const queryParams = reactive({
userName:null,
projectType:null
})
const total = ref(0);
// 列表
const projectCostRequestList = ref([]);
const getList=()=> {
getCostRequestList(queryParams).then(response => {
console.log("数组",response)
console.log("列表",response.rows)
total.value = response.total
projectCostRequestList.value = response.rows
});
}
getList()
// 重置表单
const reset = () => {
queryParams.projectName = null
queryParams.projectNumber = null
queryParams.userName = null
queryParams.projectType = null
getList()
}
// 提交搜索表单
......@@ -224,14 +204,24 @@ const onSearch = () => {
//新增按钮
import { useRouter } from 'vue-router'
import {getCostRequestList} from "../../../api/projectCostRequest/projectCostRequest.js";
import {getCostRequestDetail, getCostRequestList} from "../../../api/projectCostRequest/projectCostRequest.js";
const router = useRouter()
const goToAddPage = () => {
router.push({ path: '/costManage/projectCostRequest/add' })
router.push({ path: '/costManage/projectCostRequest/add' ,query:{type:"新增"}})
}
//查看详情
const handleView=({id})=> {
console.log("详情"+id)
proxy.$router.push({ path: '/costManage/projectCostRequest/add', query: { id: id,type:"详情" } });
// router.push({ path: '/costManage/projectCostRequest/add', query: { id: id } })
}
//编辑
const handleUpdate=({id})=>{
console.log("编辑"+id)
}
......@@ -243,103 +233,70 @@ const goToAddPage = () => {
<style scoped lang="scss">
.shadow_box_top {
margin-left: 1%;
width: 98%;
//导航 、 按钮
.shadow_box_bottom_add {
display: flex;
justify-content: space-around;
width: 98%;
justify-content: space-between;
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;
padding:10px;
.left {
display: flex;
justify-content: space-between;
align-items: center;
}
.el-form-item {
width: 270px;
flex-direction: column;
width: 150px;
margin-left: 40px;
.left_text {
cursor: default;
font-weight: 550;
font-size: 18px;
color: #0d162a;
font-family: 'Microsoft YaHei', sans-serif;
}
.left_line {
border: solid 1px #0062ff;
margin-top: 5px;
height: 4px;
background-color: #0062ff;
}
}
.img-icon {
margin-right: 8px;
width: 24px;
height: 24px;
.right {
}
}
.shadow_box_bottom {
margin-top: 20px;
margin-left: 1%;
width: 98%;
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 {
display: flex;
width: 98%;
justify-content: space-between;
align-items: center;
padding:10px;
.left {
display: flex;
flex-direction: column;
width: 150px;
margin-left: 40px;
.left_text {
cursor: default;
font-weight: 550;
font-size: 18px;
color: #0d162a;
font-family: 'Microsoft YaHei', sans-serif;
}
.left_line {
border: solid 1px #0062ff;
margin-top: 5px;
height: 4px;
background-color: #0062ff;
}
}
.right {
}
//步骤条
.shadow_box_bottom_step {
display: flex;
margin: 10px 13px;
padding: 20px 0px;
width: 98%;
justify-content: space-evenly;
align-items: center;
background-color: #f3f3f3;
.text1 {
font-size: 18px;
font-weight: 550;
}
//步骤条
.shadow_box_bottom_step {
.text2 {
display: flex;
margin: 10px 13px;
padding: 20px 0px;
width: 98%;
justify-content: space-evenly;
flex-direction: column;
font-size: 18px;
align-items: center;
background-color: #f3f3f3;
.text1 {
font-size: 18px;
font-weight: 550;
}
.text2 {
display: flex;
flex-direction: column;
font-size: 18px;
align-items: center;
}
.step {
width: 80%;
}
}
.step {
width: 80%;
}
}
//列表
.shadow_box_bottom_table {
.list_icon {
color: #477bf5;
margin: 8px;
font-size: 20px;
}
.list_icon {
color: #477bf5;
margin: 8px;
font-size: 20px;
}
</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