Commit 205a0c93 authored by 高滢's avatar 高滢

Merge remote-tracking branch 'origin/master'

parents 001f85db 09e57b45
import request from '@/utils/request'
// 查询项目费用申请列表
export function getCostRequestList() {
return request({
url: '/projectCostRequest/list',
method: 'get',
})
}
<script setup> <script setup>
import { getDicts } from "@/api/system/dict/data";
getDicts("project_cost_type").then(response => {
console.log(response)
});
</script> </script>
<template> <template>
......
<template> <template>
<div class="app-container"> <div class="app-container">
<!-- 面包屑导航-->
<div class="top">
<div class="top_text">新增项目费用申请</div>
<div class="top_line"></div>
</div>
<!-- 表单--> <div class="inner">
<div class="addform"> <!-- 导航-->
<el-form :inline="true" :model="form" label-width="auto"> <div class="top">
<el-form-item label="项目名称"> <div class="top_text">新增项目费用申请</div>
<el-select <div class="top_line"></div>
v-model="form.xiangmumingcheng" </div>
placeholder="请选择项目名称"
> <!-- 表单-->
<el-option label="项目一" value="shanghai" /> <div class="addform">
<el-option label="项目二" value="beijing" /> <el-form :model="form" label-width="auto">
</el-select>
</el-form-item> <el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目编号"> <el-form-item label="流水号">
<el-input v-model="form.xiangmubianhao" disabled /> <el-input
</el-form-item> v-model="form.liushuihao"
disabled
<el-form-item label="项目类型"> placeholder="自动生成流水号"/>
<el-input v-model="form.xiangmuleixing" disabled /> </el-form-item>
</el-form-item> </el-col>
<el-col :span="12">
<el-form-item label="事业部负责人"> <el-form-item label="费用类型">
<el-input v-model="form.fuzeren" disabled /> <el-select
</el-form-item> v-model="form.feiyongleixing"
placeholder="请选择项目费用类型"
<el-form-item label="项目状态"> clearable
<el-input v-model="form.xiangmustatus" disabled /> >
</el-form-item> <el-option label="办公用品" value="shanghai" />
<el-option label="云服务购买" value="beijing" />
<el-form-item label="登记人"> <el-option label="域名/服务器托管费" value="beijing" />
<el-input v-model="form.dengjiren" placeholder="张三" disabled /> </el-select>
</el-form-item> </el-form-item>
</el-col>
<el-form-item label="费用类型"> </el-row>
<el-select
v-model="form.feiyongleixing" <el-row :gutter="20">
placeholder="请选择项目费用类型" <el-col :span="12">
> <el-form-item label="项目名称">
<el-option label="办公用品" value="shanghai" /> <el-select
<el-option label="云服务购买" value="beijing" /> v-model="form.xiangmumingcheng"
<el-option label="域名/服务器托管费" value="beijing" /> placeholder="请选择项目名称" clearable>
</el-select> <el-option label="项目一" value="shanghai" />
</el-form-item> <el-option label="项目二" value="beijing" />
</el-select>
<el-form-item label="费用发生时间"> </el-form-item>
<el-date-picker </el-col>
v-model="form.date" <el-col :span="12">
type="date" <el-form-item label="物品描述">
placeholder="请选择费用发生时间" <el-input v-model="form.wupinmiaoshu" placeholder="请输入物品名称" />
clearable </el-form-item>
/> </el-col>
</el-form-item> </el-row>
<el-form-item label="物品描述">
<el-input v-model="form.wupinmiaoshu" placeholder="请输入物品名称" /> <el-row :gutter="20">
</el-form-item> <el-col :span="12">
<el-form-item label="项目编号">
<el-form-item label="单价"> <el-input v-model="form.xiangmubianhao" disabled/>
<el-input v-model="form.danjia" placeholder="请输入物品单价" /> </el-form-item>
</el-form-item> </el-col>
<el-col :span="12">
<el-form-item label="数量"> <el-form-item label="费用发生时间">
<el-input v-model="form.num" placeholder="请输入物品数量" /> <el-date-picker style="width: 500px;height: 40px"
</el-form-item> v-model="form.date"
type="date"
<el-form-item label="申请金额(元)"> placeholder="请选择费用发生时间"
<el-input v-model="form.jine" placeholder="请输入申请金额" /> clearable/>
</el-form-item> </el-form-item>
</el-col>
<el-form-item label="备注"> </el-row>
<el-input
v-model="form.beizhu" <el-row :gutter="20">
:autosize="{ minRows: 1 }"
type="textarea" <el-col :span="12">
placeholder="请输入备注" <el-form-item label="项目类型">
/> <el-input v-model="form.xiangmuleixing" disabled />
</el-form-item> </el-form-item>
</el-col>
<el-form-item label="流水号">
<el-input <el-col :span="12">
v-model="form.liushuihao" <el-row >
disabled <el-col :span="7">
placeholder="自动生成流水号" <el-form-item label="单价">
/> <el-input class="danjia_shuliang" v-model="form.danjia" placeholder="请输入物品单价" />
</el-form-item> </el-form-item>
</el-col>
<!-- <el-form-item label="上传附件">--> <el-col :span="5">
<!-- <el-upload--> <el-form-item label="数量">
<!-- v-model:file-list="form.fujian"--> <el-input class="danjia_shuliang" v-model="form.num" placeholder="请输入物品数量" />
<!-- action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"--> </el-form-item>
<!-- multiple--> </el-col>
<!-- :on-preview="handlePreview"--> </el-row>
<!-- :on-remove="handleRemove"--> </el-col>
<!-- :before-remove="beforeRemove"--> </el-row>
<!-- :limit="3"-->
<!-- :on-exceed="handleExceed"--> <el-row :gutter="20">
<!-- >--> <el-col :span="12">
<!-- <el-icon class="folderAdd"><FolderAdd /></el-icon>--> <el-form-item label="事业部负责人">
<!-- <text>点击上传附件</text>--> <el-input v-model="form.fuzeren" disabled />
<!-- </el-upload>--> </el-form-item>
<!-- </el-form-item>--> </el-col>
</el-form> <el-col :span="12">
</div> <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: 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="form.dengjiren" placeholder="张三" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
</el-col>
</el-row>
<!-- 取消、提交按钮-->
<div class="button">
<div><el-button class="button_size">取消</el-button></div>
<div><el-button class="button_size" type="primary">提交</el-button></div>
</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>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { reactive, ref } from 'vue' import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
// 表单 // 表单
const form = reactive({ const form = reactive({
...@@ -139,15 +188,27 @@ const form = reactive({ ...@@ -139,15 +188,27 @@ const form = reactive({
liushuihao: '', liushuihao: '',
fujian: '' fujian: ''
}) })
const router = useRouter()
const goBackIndex = () => {
router.push({ path: '/costManage/projectCostRequest/index' })
}
</script> </script>
<style scoped lang="scss"> <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 { .top {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 150px; width: 150px;
margin-left: 40px; margin-left: 40px;
margin-top: 20px;
.top_text { .top_text {
cursor: default; cursor: default;
...@@ -157,23 +218,25 @@ const form = reactive({ ...@@ -157,23 +218,25 @@ const form = reactive({
font-family: 'Microsoft YaHei', sans-serif; font-family: 'Microsoft YaHei', sans-serif;
} }
.top_line { .top_line {
border: solid 2px #0062ff; border: solid 1px #0062ff;
margin-top: 5px; margin-top: 5px;
height: 4px; height: 4px;
background-color: #0062ff;
} }
} }
.addform { .addform {
margin-left: 50px; margin-left: 50px;
margin-top: 30px; margin-top: 30px;
display: flex;
align-content: center;
.el-form-item { .el-form-item {
margin-right: 400px; width: 500px;
width: 400px;
height: 40px; height: 40px;
.danjia_shuliang{
width: 150px;
}
} }
} }
.folderAdd { .folderAdd {
......
<template> <template>
<div class="app-container"> <div class="app-container" >
<div class="shadow_box_top"> <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-form-item label="项目名称">
<el-select <el-select
v-model="formInline.mingcheng" v-model="formInline.mingcheng"
placeholder="请选择项目名称" placeholder="请选择项目名称"
clearable clearable
> >
<el-option label="项目名称一" value="shanghai" /> <el-option label="项目名称一" value="shanghai" />
<el-option label="项目名称二" value="beijing" /> <el-option label="项目名称二" value="beijing" />
...@@ -15,49 +15,38 @@ ...@@ -15,49 +15,38 @@
<el-form-item label="项目编号"> <el-form-item label="项目编号">
<el-input <el-input
v-model="formInline.bianhao" v-model="formInline.bianhao"
placeholder="请输入项目编号" placeholder="请输入项目编号"
clearable clearable
/> />
</el-form-item> </el-form-item>
<el-form-item label="项目负责人"> <el-form-item label="项目负责人">
<el-input <el-input
v-model="formInline.fuzeren" v-model="formInline.fuzeren"
placeholder="请输入项目负责人" placeholder="请输入项目负责人"
clearable clearable
/> />
</el-form-item> </el-form-item>
<el-form-item label="项目类型"> <el-form-item label="项目类型">
<el-select <el-select
v-model="formInline.leixing" v-model="formInline.leixing"
placeholder="请选择项目类型" placeholder="请选择项目类型"
clearable clearable
> >
<el-option label="项目类型一" value="shanghai" /> <el-option label="项目类型一" value="shanghai" />
<el-option label="项目类型二" value="beijing" /> <el-option label="项目类型二" value="beijing" />
</el-select> </el-select>
</el-form-item> </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> </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>
<div class="shadow_box_bottom"> <div class="shadow_box_bottom">
<!-- 导航、按钮--> <!-- 导航、按钮-->
<div class="shadow_box_bottom_add"> <div class="shadow_box_bottom_add">
<div class="left"> <div class="left">
...@@ -65,52 +54,12 @@ ...@@ -65,52 +54,12 @@
<div class="left_line"></div> <div class="left_line"></div>
</div> </div>
<div class="right"> <div class="right">
<el-row :gutter="10" class="mb8"> <el-button
<el-col :span="1.5"> type="primary"
<el-button type="primary" plain size="mini" @click="goToAddPage"> plain
<template #icon> icon="Plus"
<Plus /> @click="goToAddPage"
</template> >费用申请</el-button>
新增费用申请
</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"
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>
</div> </div>
</div> </div>
...@@ -136,9 +85,9 @@ ...@@ -136,9 +85,9 @@
<!-- 列表--> <!-- 列表-->
<div class="shadow_box_bottom_table"> <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 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"> <template #default="scope">
<span <span
style=" style="
...@@ -146,7 +95,7 @@ ...@@ -146,7 +95,7 @@
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
" "
>{{ scope.row.projectNo }}</span >{{ scope.row.projectNumber }}</span
> >
</template> </template>
</el-table-column> </el-table-column>
...@@ -158,27 +107,28 @@ ...@@ -158,27 +107,28 @@
<el-table-column <el-table-column
prop="projectType" prop="projectType"
label="项目类型" label="项目类型"
align="center" align="center">
></el-table-column> <template #default="{ row }">
<dict-tag :options="project_type" :value="row.projectType"/>
</template>
</el-table-column>
<el-table-column <el-table-column
prop="departmentLeader" prop="userName"
label="事业部负责人" label="事业部负责人"
align="center" align="center"
></el-table-column> ></el-table-column>
<el-table-column prop="projectStatus" label="项目状态" align="center"> <el-table-column prop="projectStatus" label="项目状态" align="center">
<template #default="{ row }"> <template #default="{ row }">
<el-tag :type="getTagType(row.projectStatus)">{{ <dict-tag :options="project_status" :value="row.projectStatus"/>
row.projectStatus
}}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="serialNo" prop="waterNumber"
label="流水号" label="流水号"
align="center" align="center"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
prop="expenseTime" prop="timeOfExpense"
label="费用发生时间" label="费用发生时间"
align="center" align="center"
></el-table-column> ></el-table-column>
...@@ -186,21 +136,22 @@ ...@@ -186,21 +136,22 @@
prop="expenseType" prop="expenseType"
label="费用类型" label="费用类型"
align="center" 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 <el-table-column
prop="amount" prop="sumMoney"
label="金额(元)" label="金额(元)"
align="center" align="center"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
prop="approvalStatus" prop="approvalStatus"
label="审批状态" label="审批状态"
align="center" align="center">
> <template #default="scope">
<template #default="{ row }"> <dict-tag :options="project_cost_request_status" :value="scope.row.approveStatus"/>
<el-tag :type="getApprovalTagType(row.approvalStatus)">{{
row.approvalStatus
}}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center">
...@@ -211,11 +162,31 @@ ...@@ -211,11 +162,31 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
</div>
</div >
</div> </div>
</template> </template>
<script setup> <script setup>
import { reactive, ref } from 'vue' 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({ const formInline = reactive({
...@@ -238,90 +209,48 @@ const onSearch = () => { ...@@ -238,90 +209,48 @@ const onSearch = () => {
console.log(formInline.value) 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 => { const getTagType = status => {
if (status === '待审批') return 'warning' if (status === '待审批') return 'warning'
return 'default' 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 { useRouter } from 'vue-router'
import {getCostRequestList} from "../../../api/projectCostRequest/projectCostRequest.js";
const router = useRouter() const router = useRouter()
const goToAddPage = () => { const goToAddPage = () => {
console.log(123)
router.push({ path: '/costManage/projectCostRequest/add' }) router.push({ path: '/costManage/projectCostRequest/add' })
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.shadow_box_top { .shadow_box_top {
margin-top: 20px;
margin-left: 1%; margin-left: 1%;
width: 98%; width: 98%;
box-shadow: 5px 5px 5px -3px rgba(0, 0, 0, 0.2);
.el-form { display: flex;
padding: 10px; 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; display: flex;
justify-content: space-around; justify-content: space-between;
align-items: center; align-items: center;
} }
.el-form-item { .el-form-item {
...@@ -338,8 +267,10 @@ const goToAddPage = () => { ...@@ -338,8 +267,10 @@ const goToAddPage = () => {
margin-top: 20px; margin-top: 20px;
margin-left: 1%; margin-left: 1%;
width: 98%; width: 98%;
height: 50%; height: calc(100vh - 250px);
box-shadow: 5px 5px 5px -3px rgba(0, 0, 0, 0.2); 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 { .shadow_box_bottom_add {
...@@ -347,7 +278,7 @@ const goToAddPage = () => { ...@@ -347,7 +278,7 @@ const goToAddPage = () => {
width: 98%; width: 98%;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 20px; padding:10px;
.left { .left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -361,9 +292,10 @@ const goToAddPage = () => { ...@@ -361,9 +292,10 @@ const goToAddPage = () => {
font-family: 'Microsoft YaHei', sans-serif; font-family: 'Microsoft YaHei', sans-serif;
} }
.left_line { .left_line {
border: solid 2px #0062ff; border: solid 1px #0062ff;
margin-top: 5px; margin-top: 5px;
height: 4px; height: 4px;
background-color: #0062ff;
} }
} }
.right { .right {
...@@ -373,12 +305,12 @@ const goToAddPage = () => { ...@@ -373,12 +305,12 @@ const goToAddPage = () => {
//步骤条 //步骤条
.shadow_box_bottom_step { .shadow_box_bottom_step {
display: flex; display: flex;
margin: 20px 0px; margin: 10px 13px;
padding: 20px 0px; padding: 20px 0px;
width: 98%; width: 98%;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
background-color: #f9f9fa; background-color: #f3f3f3;
.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