Skip to content

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

详情页修改

parent 66c48d62
Hide whitespace changes
Inline Side-by-side
Showing with 365 additions and 191 deletions
src/views/costManage/projectCostRequest/add.vue 0 → 100644
View file @ cc1ca3be
<template>
<div class="app-container">
<div class="content">
<!-- 导航-->
<div class="top">
<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-item>
</el-col>
<el-col :span="12">
<el-form-item label="费用类型">
<el-select :disabled="type ==='详情'"
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" />
</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"
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>
</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>
</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-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-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注">
<el-input
v-model="costRequestDetailList.remark"
:autosize="{ minRows: 4 }"
type="textarea"
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.dengjiren" placeholder="张三" disabled />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<el-col :span="12">
</el-col>
</el-row>
</el-form>
</div>
<!-- 取消、提交按钮-->
<div class="button">
<div><el-button @click="goBackIndex" class="button_size">取消</el-button></div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
const { proxy } = getCurrentInstance();
const { project_cost_type} = proxy.useDict('project_cost_type');
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
})
// 取消按钮
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;
.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;
}
}
.addform {
margin-left: 50px;
margin-top: 30px;
.el-form-item {
width: 500px;
height: 40px;
.danjia_shuliang{
width: 150px;
}
}
}
.folderAdd {
font-size: 20px;
margin-right: 5px;
}
.button {
display: flex;
margin-left: 70%;
margin-top: 100px;
.button_size {
width: 116px;
height: 40px;
margin: 20px;
}
}
//步骤条
.shadow_box_bottom_step {
display: flex;
margin: 10px 13px;
padding: 20px 0px;
width: 98%;
justify-content: space-evenly;
align-items: center;
background-color: #f4f4f4;
.text1 {
font-size: 18px;
font-weight: 550;
}
.text2 {
display: flex;
flex-direction: column;
font-size: 18px;
align-items: center;
}
.step {
width: 80%;
}
}
</style>
src/views/costManage/projectCostRequest/detail.vue
View file @ cc1ca3be
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="content"> <div class="content">
<!-- 导航--> <!-- 导航-->
<div class="top"> <div class="top">
...@@ -7,164 +8,38 @@ ...@@ -7,164 +8,38 @@
<div class="top_line"></div> <div class="top_line"></div>
</div> </div>
<!-- 步骤条--> <!-- 步骤条-->
<div v-if="type ==='详情'" class="shadow_box_bottom_step"> <div class="shadow_box_bottom_step">
<text class="text1">审批流程</text> <text class="text1">审批流程</text>
<div class="step"> <FlowChart :dataList="list" :widthDontai="'70%'" :activeIndex="1"/>
<el-steps :active="costRequestDetailList.value.approveStatus === 3?7:2" align-center>
<el-step title="个人" /> <!-- <div class="step">-->
<el-step title="PM" /> <!-- <el-steps :active="costRequestDetailList.approveStatus === 3?7:2" align-center>-->
<el-step title="核心领导" /> <!-- <el-step title="个人" />-->
<el-step title="HR" /> <!-- <el-step title="PM" />-->
<el-step title="总经理" /> <!-- <el-step title="核心领导" />-->
<el-step title="财务" /> <!-- <el-step title="HR" />-->
<el-step title="完成" /> <!-- <el-step title="总经理" />-->
</el-steps> <!-- <el-step title="财务" />-->
</div> <!-- <el-step title="完成" />-->
<!-- </el-steps>-->
<!-- </div>-->
</div> </div>
<!-- 表单--> <div class="detail">
<div class="addform"> <div>流水号：<text>{{costRequestDetailList.value.waterNumber}}</text></div>
<el-form :disabled="type ==='详情'" :model="costRequestDetailList" label-width="auto"> <div>项目名称：<text>{{costRequestDetailList.value.projectName}}</text></div>
<el-row :gutter="20"> <div>项目编号：<text>{{costRequestDetailList.value.projectNumber}}</text></div>
<el-col :span="12"> <div>项目类型：<text>{{costRequestDetailList.value.projectType}}</text></div>
<el-form-item label="流水号"> <div>事业部负责人：<text>{{costRequestDetailList.value.userName}}</text></div>
<el-input <div>项目状态：<text>{{costRequestDetailList.value.projectStatus}}</text></div>
v-model="costRequestDetailList.value.waterNumber" <div>费用类型：<text>{{costRequestDetailList.value.costType}}</text></div>
disabled <div>物品描述：<text>{{costRequestDetailList.value.description}}</text></div>
placeholder="自动生成流水号"/> <div>费用发生时间：<text>{{costRequestDetailList.value.createTime}}</text></div>
</el-form-item> <div>单价：<text>{{costRequestDetailList.value.unitPrice}}</text></div>
</el-col> <div>数量：<text>{{costRequestDetailList.value.amount}}</text></div>
<el-col :span="12"> <div>申请金额（元）：<text>{{costRequestDetailList.value.sumMoney}}</text></div>
<el-form-item label="费用类型"> <div>备注：<text>{{costRequestDetailList.value.remark}}</text></div>
<el-select :disabled="type ==='详情'" </div>
v-model="costRequestDetailList.value.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.value.projectName"
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="costRequestDetailList.value.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.value.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.value.createTime"
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.value.projectType"
disabled>
</el-select>
</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.value.unitPrice" placeholder="请输入物品单价" />
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="数量">
<el-input class="danjia_shuliang" v-model="costRequestDetailList.value.amount" 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-select
v-model="costRequestDetailList.value.userName"
clearable disabled>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="申请金额（元）">
<el-input v-model="costRequestDetailList.value.sumMoney" placeholder="请输入申请金额" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目状态">
<el-select
v-model="costRequestDetailList.value.projectStatus"
disabled
>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注">
<el-input
v-model="costRequestDetailList.value.remark"
:autosize="{ minRows: 4 }"
type="textarea"
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.dengjiren" placeholder="张三" disabled />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<el-col :span="12">
</el-col>
</el-row>
</el-form>
</div>
<!-- 取消、提交按钮--> <!-- 取消、提交按钮-->
<div class="button"> <div class="button">
...@@ -181,33 +56,43 @@ ...@@ -181,33 +56,43 @@
</template> </template>
<script setup> <script setup>
import FlowChart from '@/components/FlowChart/index.vue'
import { reactive, ref } from 'vue' import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import {getCostRequestDetail, getCostRequestList} from "../../../api/projectCostRequest/projectCostRequest.js"; import {getCostRequestDetail, getCostRequestList} from "../../../api/projectCostRequest/projectCostRequest.js";
const { proxy } = getCurrentInstance(); 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 { 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获取表单详情数据 //根据项目id获取表单详情数据
const costRequestDetailList = reactive({}); 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 getDetail=()=> { const getDetail=()=> {
let projectId = proxy.$route.query.id; let projectId = proxy.$route.query.id;
getCostRequestDetail(projectId).then(response => { getCostRequestDetail(projectId).then(response => {
console.log("res",response.data) console.log("res",response.data)
costRequestDetailList.value = response.data costRequestDetailList.value = response.data
console.log("cost",costRequestDetailList) console.log("流水号",costRequestDetailList.value.waterNumber)
}); });
} }
getDetail()
//根据跳转页面是否传参判断进详情页or新增页
let type = proxy.$route.query.type
if(type === "详情"){
//进详情页面
getDetail()
}else{
//进新增页面
}
// 取消按钮 // 取消按钮
const router = useRouter() const router = useRouter()
...@@ -247,19 +132,19 @@ const goBackIndex = () => { ...@@ -247,19 +132,19 @@ const goBackIndex = () => {
} }
} }
.addform { .detail{
margin-left: 50px;
margin-top: 30px;
.el-form-item { margin-top: 20px;
width: 500px;
height: 40px;
.danjia_shuliang{
width: 150px;
}
}
} }
.detail div{
margin: 20px 20px;
color: #898989;
}
.detail text{
margin: 20px 20px;
color: #000000;
}
.folderAdd { .folderAdd {
font-size: 20px; font-size: 20px;
...@@ -286,7 +171,7 @@ const goBackIndex = () => { ...@@ -286,7 +171,7 @@ const goBackIndex = () => {
width: 98%; width: 98%;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
background-color: #f4f4f4; background-color: #F9F9FA;
.text1 { .text1 {
font-size: 18px; font-size: 18px;
font-weight: 550; font-weight: 550;
......
src/views/costManage/projectCostRequest/index.vue
View file @ cc1ca3be
...@@ -60,17 +60,17 @@ ...@@ -60,17 +60,17 @@
<text>项目编号</text> <text>项目编号</text>
<text>{{}}</text> <text>{{}}</text>
</div> </div>
<div class="step"> <FlowChart :dataList="list" :widthDontai="'70%'" :activeIndex="1"/><!-- <div class="step">-->
<el-steps :active="2" align-center> <!-- <el-steps :active="2" align-center>-->
<el-step title="个人" /> <!-- <el-step title="个人" />-->
<el-step title="PM" /> <!-- <el-step title="PM" />-->
<el-step title="核心领导" /> <!-- <el-step title="核心领导" />-->
<el-step title="HR" /> <!-- <el-step title="HR" />-->
<el-step title="总经理" /> <!-- <el-step title="总经理" />-->
<el-step title="财务" /> <!-- <el-step title="财务" />-->
<el-step title="完成" /> <!-- <el-step title="完成" />-->
</el-steps> <!-- </el-steps>-->
</div> <!-- </div>-->
</div> </div>
<!-- 列表--> <!-- 列表-->
...@@ -165,9 +165,14 @@ ...@@ -165,9 +165,14 @@
<script setup> <script setup>
import FlowChart from '@/components/FlowChart/index.vue'
import { reactive, ref } from 'vue' import { reactive, ref } from 'vue'
const { proxy } = getCurrentInstance(); 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 { 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 total = ref(0); const total = ref(0);
const queryParams = reactive({ const queryParams = reactive({
pageNum:1, pageNum:1,
...@@ -209,14 +214,15 @@ import { useRouter } from 'vue-router' ...@@ -209,14 +214,15 @@ import { useRouter } from 'vue-router'
import {getCostRequestDetail, getCostRequestList} from "../../../api/projectCostRequest/projectCostRequest.js"; import {getCostRequestDetail, getCostRequestList} from "../../../api/projectCostRequest/projectCostRequest.js";
const router = useRouter() const router = useRouter()
const goToAddPage = () => { const goToAddPage = () => {
router.push({ path: '/costManage/projectCostRequest/add' ,query:{type:"新增"}}) // router.push({ path: '/costManage/projectCostRequest/add' ,query:{type:"新增"}})
proxy.$router.push({ path: '/costManage/projectCostRequest/add', query: { type:"新增" } });
} }
//查看详情 //查看详情
const handleView=({id})=> { const handleView=({id})=> {
console.log("详情"+id) console.log("详情"+id)
proxy.$router.push({ path: '/costManage/projectCostRequest/add', query: { id: id,type:"详情" } }); proxy.$router.push({ path: '/costManage/projectCostRequest/detail', query: { id: id,type:"详情" } });
// router.push({ path: '/costManage/projectCostRequest/add', query: { id: id } }) // router.push({ path: '/costManage/projectCostRequest/add', query: { id: id } })
} }
...@@ -275,7 +281,7 @@ const handleUpdate=({id})=>{ ...@@ -275,7 +281,7 @@ const handleUpdate=({id})=>{
width: 98%; width: 98%;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
background-color: #f3f3f3; background-color: #F9F9FA;
.text1 { .text1 {
font-size: 18px; font-size: 18px;
font-weight: 550; 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