Skip to content

P
psa-web
Commit 81096954 authored by wangjiancheng's avatar wangjiancheng
Browse files
Options

Merge branch 'master' of http://gitlab.91isoft.com:90/gaoying/psa-web

parents 6c3de0ce 82bd5638
Hide whitespace changes
Inline Side-by-side
Showing with 811 additions and 154 deletions
src/views/attendance/application/overtimeApplication.vue
View file @ 81096954
......@@ -11,9 +11,9 @@
<div class="sep-label"></div>
<div class="sep-bg"></div>
</div>
员工加班需发起加班申请，加班时长以员工填写的审批单时长为准。<br>
加班满4 小时，计 0.5 天，满 8 小时，计1 天。<br>
加班时长按照加班天数，以 1:1 的比例，转换为调休时长。<br>
员工加班需发起加班申请，加班时长以员工填写的审批单时长为准。<br />
加班满4 小时，计 0.5 天，满 8 小时，计1 天。<br />
加班时长按照加班天数，以 1:1 的比例，转换为调休时长。<br />
</el-col>
</el-row>
......@@ -22,26 +22,33 @@
<el-row gutter="280">
<el-col :span="12">
<b>加班单号</b>
<el-input placeholder="自动生成无需填写" v-model="state.overtimeId" :disabled="true" style="margin-top: 7px">
<el-input
v-model="state.overtimeId"
placeholder="自动生成无需填写"
:disabled="true"
style="margin-top: 7px"
>
</el-input>
</el-col>
<el-col :span="12" >
<el-col :span="12">
<b>添加成员</b>
<div class="member-box" @click="showMemberSearch">
<el-icon style="margin-right:7px "><Plus /></el-icon>选择成员
<el-icon style="margin-right: 7px"><Plus /></el-icon>选择成员
</div>
<div class="search-container" v-if="state.isSearchBoxVisible">
<div v-if="state.isSearchBoxVisible" class="search-container">
<el-input
v-model="input2"
style="margin-top: 5px"
placeholder="搜索(多个关键词用空格隔开)"
:prefix-icon="Search"
v-model="input2"
style="margin-top: 5px"
placeholder="搜索(多个关键词用空格隔开)"
:prefix-icon="Search"
/>
<div class="search">
<br><br>
<br /><br />
<div>试试搜索，以更快找到结果。</div>
<br><br>
<a style="color: rgb(0, 137, 127);margin-bottom: 15px">查看全部成员</a>
<br /><br />
<a style="color: rgb(0, 137, 127); margin-bottom: 15px"
>查看全部成员</a
>
</div>
</div>
</el-col>
......@@ -50,140 +57,125 @@
<el-row gutter="280">
<el-col :span="12">
<b>所在部门</b>
<el-input v-model="state.department" :disabled="true" style="margin-top: 7px"></el-input>
<el-input
v-model="state.department"
:disabled="true"
style="margin-top: 7px"
></el-input>
</el-col>
<el-col :span="12">
<b>申请日期</b>
<el-input v-model="state.requestDate" :disabled="true" style="margin-top: 7px"></el-input>
<el-input
v-model="state.requestDate"
:disabled="true"
style="margin-top: 7px"
></el-input>
</el-col>
</el-row>
<el-row gutter="280">
<el-col :span="12">
<b>归属月份</b>
<el-input v-model="state.yearMonth" :disabled="true" style="margin-top: 7px"></el-input>
<el-input
v-model="state.yearMonth"
:disabled="true"
style="margin-top: 7px"
></el-input>
</el-col>
</el-row>
</div>
<!-- 第三 -->
<div class="row3">
<b>加班明细</b><br>
<b>加班明细</b><br />
若有多日需要加班，请按照日期逐日填写！
<!-- 表格 -->
<el-table
:data="state.tableData"
:border="true"
style="width: 1256px"
:data="state.tableData"
:border="true"
style="width: 1256px"
>
<!-- 序号列 -->
<el-table-column
label="序号"
width="80"
align="center"
>
<el-table-column label="序号" width="80" align="center">
<template #default="scope">
{{ (state.currentPage - 1) * state.pageSize + scope.$index + 1 }}
{{
(state.currentPage - 1) * state.pageSize + scope.$index + 1
}}
</template>
</el-table-column>
<!-- 加班开始时间 -->
<el-table-column
label="加班开始时间"
width="245"
>
<el-table-column label="加班开始时间" width="245">
<template #default="scope">
<el-date-picker
v-model="scope.row.startTime"
type="datetime"
placeholder="选择开始时间"
format="YYYY-MM-DD HH:mm:ss"
@change="handleTimeChange(scope.row)"
v-model="scope.row.startTime"
type="datetime"
placeholder="选择开始时间"
format="YYYY-MM-DD HH:mm:ss"
@change="handleTimeChange(scope.row)"
/>
</template>
</el-table-column>
<!-- 加班结束时间 -->
<el-table-column
label="加班结束时间"
width="245"
>
<el-table-column label="加班结束时间" width="245">
<template #default="scope">
<el-date-picker
v-model="scope.row.endTime"
type="datetime"
placeholder="选择结束时间"
format="YYYY-MM-DD HH:mm:ss"
@change="handleTimeChange(scope.row)"
v-model="scope.row.endTime"
type="datetime"
placeholder="选择结束时间"
format="YYYY-MM-DD HH:mm:ss"
@change="handleTimeChange(scope.row)"
/>
</template>
</el-table-column>
<!-- 星期 -->
<el-table-column
label="星期"
width="130"
>
<el-table-column label="星期" width="130">
<template #default="scope">
<el-input
v-model="scope.row.dayOfWeek"
placeholder="星期"
style="width: 100%;"
v-model="scope.row.dayOfWeek"
placeholder="星期"
style="width: 100%"
/>
</template>
</el-table-column>
<!-- 加班时长（h） -->
<el-table-column
label="加班时长（h）"
width="145"
>
<el-table-column label="加班时长（h）" width="145">
<template #default="scope">
<el-input
v-model="scope.row.overtimeHours"
placeholder="输入时长"
style="width: 100%;"
v-model="scope.row.overtimeHours"
placeholder="输入时长"
style="width: 100%"
/>
</template>
</el-table-column>
<!-- 加班天数 -->
<el-table-column
label="加班天数"
width="145"
>
<el-table-column label="加班天数" width="145">
<template #default="scope">
<el-input
v-model="scope.row.overtimeDays"
placeholder="0"
/>
<el-input v-model="scope.row.overtimeDays" placeholder="0" />
</template>
</el-table-column>
<!-- 归属考勤周期 -->
<el-table-column
label="归属考勤周期"
width="145"
>
<el-table-column label="归属考勤周期" width="145">
<template #default="scope">
<el-input
v-model="scope.row.attendancePeriod"
placeholder="请选择"
style="width: 100%;"
:disabled="true"
v-model="scope.row.attendancePeriod"
placeholder="请选择"
style="width: 100%"
:disabled="true"
/>
</template>
</el-table-column>
<!-- 操作 -->
<el-table-column
label="操作"
width="120"
>
<el-table-column label="操作" width="120">
<template #default="scope">
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>
删除
</el-button>
......@@ -191,10 +183,24 @@
</el-table-column>
</el-table>
<!-- 添加按钮 -->
<div style="text-align: left; margin-bottom: 10px; margin-top: 20px">
<div
style="text-align: left; margin-bottom: 10px; margin-top: 20px"
>
<!-- 绿色文字按钮 -->
<el-button type="text" @click="addRow" class="custom-text-button" icon="el-icon-plus">添加</el-button>
<el-button type="text" @click="pasteItem" class="custom-text-button" icon="el-icon-plus">粘贴新增</el-button>
<el-button
type="text"
class="custom-text-button"
icon="el-icon-plus"
@click="addRow"
>添加</el-button
>
<el-button
type="text"
class="custom-text-button"
icon="el-icon-plus"
@click="pasteItem"
>粘贴新增</el-button
>
</div>
</div>
<!-- 第四 -->
......@@ -202,11 +208,28 @@
<el-row gutter="280">
<el-col :span="12">
<b>加班总天数</b>
<el-input placeholder="0" v-model="state.totalOvertimeDays" :disabled="true"></el-input>
<el-input
v-model="state.totalOvertimeDays"
placeholder="0"
:disabled="true"
></el-input>
</el-col>
<el-col :span="12">
<span style="color:rgb(235, 80, 80); font-size: 14px; padding-bottom: 20px;">*</span> <b>加班事由</b>
<el-input type="textarea" :rows="6" placeholder="请输入加班事由" v-model="state.reason"></el-input>
<span
style="
color: rgb(235, 80, 80);
font-size: 14px;
padding-bottom: 20px;
"
>*</span
>
<b>加班事由</b>
<el-input
v-model="state.reason"
type="textarea"
:rows="6"
placeholder="请输入加班事由"
></el-input>
</el-col>
</el-row>
</div>
......@@ -219,7 +242,12 @@
<p>直接上级</p>
<el-row gutter="280">
<el-col :span="12">
<el-input placeholder=" 暂无内容" v-model="state.directSupervisor" :disabled="true" style="margin-top: 7px"></el-input>
<el-input
v-model="state.directSupervisor"
placeholder=" 暂无内容"
:disabled="true"
style="margin-top: 7px"
></el-input>
</el-col>
</el-row>
<!-- 添加自定义虚线分割线 -->
......@@ -235,14 +263,14 @@
</template>
<script setup name="OvertimeApplication">
import { reactive } from 'vue';
import { submitovertimeApplication } from '@/api/attendance/overtime';
import {Search} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import { reactive } from 'vue'
import { submitovertimeApplication } from '@/api/attendance/overtime'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
const state = reactive({
currentPage: 1, // 当前页码
pageSize: 5, // 每页条数
pageSize: 5, // 每页条数
isSearchBoxVisible: false, //用于控制搜索框的显示和隐藏
overtimeId: '',
employeeName: '',
......@@ -255,101 +283,107 @@ const state = reactive({
tableData: [
{
startTime: '', // 加班开始时间
endTime: '', // 加班结束时间
endTime: '', // 加班结束时间
dayOfWeek: '', // 星期，默认为空字符串
overtimeHours: '', // 加班时长
overtimeDays: '0', // 加班天数
attendancePeriod: '', // 归属考勤周期
},
], // 默认显示一行数据
});
overtimeHours: '', // 加班时长
overtimeDays: '0', // 加班天数
attendancePeriod: '' // 归属考勤周期
}
] // 默认显示一行数据
})
onMounted(() => {
// 获取当前日期并格式化为 YYYY-MM-DD
const currentDate = new Date();
const year = currentDate.getFullYear();
const month = String(currentDate.getMonth() + 1).padStart(2, '0');
const day = String(currentDate.getDate()).padStart(2, '0');
state.requestDate = `${year}-${month}-${day}`;
const currentDate = new Date()
const year = currentDate.getFullYear()
const month = String(currentDate.getMonth() + 1).padStart(2, '0')
const day = String(currentDate.getDate()).padStart(2, '0')
state.requestDate = `${year}-${month}-${day}`
// 获取当前月份并格式化为 YYYY-MM
state.yearMonth = `${year}-${month}`;
});
state.yearMonth = `${year}-${month}`
})
const addRow = () => {
state.tableData.push({
startTime: '', // 加班开始时间
endTime: '', // 加班结束时间
endTime: '', // 加班结束时间
dayOfWeek: '', // 星期，默认为空字符串
overtimeHours: '', // 加班时长
overtimeDays: '0', // 加班天数
attendancePeriod: '', // 归属考勤周期
});
};
overtimeHours: '', // 加班时长
overtimeDays: '0', // 加班天数
attendancePeriod: '' // 归属考勤周期
})
}
const handleTimeChange = (row) => {
console.log('Start Time:', row.startTime); // 调试日志
console.log('End Time:', row.endTime); // 调试日志
const handleTimeChange = row => {
console.log('Start Time:', row.startTime) // 调试日志
console.log('End Time:', row.endTime) // 调试日志
if (row.startTime) {
if (row.endTime) {
const start = new Date(row.startTime);
const end = new Date(row.endTime);
const start = new Date(row.startTime)
const end = new Date(row.endTime)
console.log('Start Date:', start)
console.log('End Date:', end)
// 验证时间
if (end <= start) {
ElMessage.error('结束时间必须晚于开始时间');
row.endTime = ''; // 清空结束时间
row.overtimeHours = '';
row.overtimeDays = '0';
row.dayOfWeek = ''; // 清空星期
return;
ElMessage.error('结束时间必须晚于开始时间')
row.endTime = '' // 清空结束时间
row.overtimeHours = ''
row.overtimeDays = '0'
row.dayOfWeek = '' // 清空星期
return
}
// 计算星期几
updateDayOfWeek(row);
// 计算星期几
updateDayOfWeek(row)
// 计算加班时长（小时）
const timeDifference = end - start;
const overtimeHours = timeDifference / (1000 * 60 * 60);
row.overtimeHours = overtimeHours.toFixed(2);
const timeDifference = end - start
const overtimeHours = timeDifference / (1000 * 60 * 60)
row.overtimeHours = overtimeHours.toFixed(2)
// 计算加班天数
const dayDifference = timeDifference / (1000 * 60 * 60 * 24);
row.overtimeDays = dayDifference.toFixed(2);
const dayDifference = timeDifference / (1000 * 60 * 60 * 24)
row.overtimeDays = dayDifference.toFixed(2)
} else {
row.overtimeHours = '';
row.overtimeDays = '0';
row.overtimeHours = ''
row.overtimeDays = '0'
}
} else {
row.overtimeHours = '';
row.overtimeDays = '0';
row.dayOfWeek = ''; // 清空星期
row.overtimeHours = ''
row.overtimeDays = '0'
row.dayOfWeek = '' // 清空星期
}
};
}
const updateDayOfWeek = (row) => {
const updateDayOfWeek = row => {
if (row.startTime) {
const date = new Date(row.startTime);
const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
row.dayOfWeek = daysOfWeek[date.getDay()];
const date = new Date(row.startTime)
const daysOfWeek = [
'星期日',
'星期一',
'星期二',
'星期三',
'星期四',
'星期五',
'星期六'
]
row.dayOfWeek = daysOfWeek[date.getDay()]
} else {
row.dayOfWeek = ''; // 确保在时间为空时也清空星期
row.dayOfWeek = '' // 确保在时间为空时也清空星期
}
};
}
const handleDelete = (index) => {
state.tableData.splice(index, 1);
};
const handleDelete = index => {
state.tableData.splice(index, 1)
}
const showMemberSearch = () => {
// 这里可以添加搜索或查看全部成员的逻辑
state.isSearchBoxVisible= !state.isSearchBoxVisible;
};
state.isSearchBoxVisible = !state.isSearchBoxVisible
}
</script>
<style>
/* 分割线样式 */
.sep-label {
......@@ -392,7 +426,9 @@ const showMemberSearch = () => {
margin-left: 30px;
}
/* 拓宽与上一模块的间距 */
.row2, .row3, .row4 {
.row2,
.row3,
.row4 {
margin-top: 50px;
}
/* 增加行与行上下之间的间距 */
......@@ -449,5 +485,4 @@ body > .el-container {
flex-direction: column;
align-items: center;
}
</style>
src/views/costManage/projectCostReimbursement/detail.vue 0 → 100644
View file @ 81096954
<script setup>
</script>
<template>
</template>
<style scoped lang="scss">
</style>
src/views/costManage/projectCostReimbursement/index.vue 0 → 100644
View file @ 81096954
<script setup>
</script>
<template>
<div>项目费用报销</div>
</template>
<style scoped lang="scss">
</style>
src/views/costManage/projectCostRequest/detail.vue 0 → 100644
View file @ 81096954
<template>
<div class="app-container">
<!-- 面包屑导航-->
<div class="top">
<div class="top_text">新增项目费用申请</div>
<div class="top_line"></div>
</div>
<!-- 表单-->
<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-item label="登记人">
<el-input v-model="form.dengjiren" placeholder="张三" disabled />
</el-form-item>
<el-form-item label="费用类型">
<el-select
v-model="form.feiyongleixing"
placeholder="请选择项目费用类型"
>
<el-option label="办公用品" value="shanghai" />
<el-option label="云服务购买" value="beijing" />
<el-option label="域名/服务器托管费" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="费用发生时间">
<el-date-picker
v-model="form.date"
type="date"
placeholder="请选择费用发生时间"
clearable
/>
</el-form-item>
<el-form-item label="物品描述">
<el-input v-model="form.wupinmiaoshu" placeholder="请输入物品名称" />
</el-form-item>
<el-form-item label="单价">
<el-input v-model="form.danjia" placeholder="请输入物品单价" />
</el-form-item>
<el-form-item label="数量">
<el-input v-model="form.num" placeholder="请输入物品数量" />
</el-form-item>
<el-form-item label="申请金额（元）">
<el-input v-model="form.jine" placeholder="请输入申请金额" />
</el-form-item>
<el-form-item label="备注">
<el-input
v-model="form.beizhu"
:autosize="{ minRows: 1 }"
type="textarea"
placeholder="请输入备注"
/>
</el-form-item>
<el-form-item label="流水号">
<el-input
v-model="form.liushuihao"
disabled
placeholder="自动生成流水号"
/>
</el-form-item>
<!-- <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 class="button_size" type="primary">提交</el-button></div>
</div>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
// 表单
const form = reactive({
xiangmumingcheng: '',
xiangmubianhao: '',
xiangmuleixing: '',
fuzeren: '',
xiangmustatus: '',
dengjiren: '',
feiyongleixing: '',
date: '',
wupinmiaoshu: '',
danjia: '',
num: '',
jine: '',
beizhu: '',
liushuihao: '',
fujian: ''
})
</script>
<style scoped lang="scss">
.top {
display: flex;
flex-direction: column;
width: 150px;
margin-left: 40px;
margin-top: 20px;
.top_text {
cursor: default;
font-weight: 550;
font-size: 18px;
color: #0d162a;
font-family: 'Microsoft YaHei', sans-serif;
}
.top_line {
border: solid 2px #0062ff;
margin-top: 5px;
height: 4px;
}
}
.addform {
margin-left: 50px;
margin-top: 30px;
display: flex;
align-content: center;
.el-form-item {
margin-right: 400px;
width: 400px;
height: 40px;
}
}
.folderAdd {
font-size: 20px;
margin-right: 5px;
}
.button {
display: flex;
margin-left: 70%;
margin-top: 100px;
.button_size {
width: 116px;
height: 40px;
margin: 20px;
}
}
</style>
src/views/costManage/projectCostRequest/index.vue 0 → 100644
View file @ 81096954
<template>
<div class="app-container">
<div class="shadow_box_top">
<el-form :inline="true" :model="formInline">
<el-form-item label="项目名称">
<el-select
v-model="formInline.mingcheng"
placeholder="请选择项目名称"
clearable
>
<el-option label="项目名称一" value="shanghai" />
<el-option label="项目名称二" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="项目编号">
<el-input
v-model="formInline.bianhao"
placeholder="请输入项目编号"
clearable
/>
</el-form-item>
<el-form-item label="项目负责人">
<el-input
v-model="formInline.fuzeren"
placeholder="请输入项目负责人"
clearable
/>
</el-form-item>
<el-form-item label="项目类型">
<el-select
v-model="formInline.leixing"
placeholder="请选择项目类型"
clearable
>
<el-option label="项目类型一" value="shanghai" />
<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>
<div class="shadow_box_bottom">
<!-- 导航、按钮-->
<div class="shadow_box_bottom_add">
<div class="left">
<div class="left_text">项目费用申请列表</div>
<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"
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 class="shadow_box_bottom_step">
<text class="text1">审批流程</text>
<div class="text2">
<text>项目编号</text>
<text>XS647375</text>
</div>
<div class="step">
<el-steps :active="2" align-center>
<el-step title="个人" />
<el-step title="PM" />
<el-step title="核心领导" />
<el-step title="HR" />
<el-step title="总经理" />
<el-step title="财务" />
<el-step title="完成" />
</el-steps>
</div>
</div>
<!-- 列表-->
<div class="shadow_box_bottom_table">
<el-table :data="tableData" border>
<el-table-column type="selection" align="center"></el-table-column>
<el-table-column prop="projectNo" label="项目编号" align="center">
<template #default="scope">
<span
style="
color: royalblue;
text-decoration: underline;
cursor: pointer;
"
>{{ scope.row.projectNo }}</span
>
</template>
</el-table-column>
<el-table-column
prop="projectName"
label="项目名称"
align="center"
></el-table-column>
<el-table-column
prop="projectType"
label="项目类型"
align="center"
></el-table-column>
<el-table-column
prop="departmentLeader"
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>
</template>
</el-table-column>
<el-table-column
prop="serialNo"
label="流水号"
align="center"
></el-table-column>
<el-table-column
prop="expenseTime"
label="费用发生时间"
align="center"
></el-table-column>
<el-table-column
prop="expenseType"
label="费用类型"
align="center"
></el-table-column>
<el-table-column
prop="amount"
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>
</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>
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
// 顶部搜索表单数据
const formInline = reactive({
mingcheng: '',
bianhao: '',
fuzeren: '',
leixing: ''
})
// 重置表单
const reset = () => {
formInline.value = {
mingcheng: '',
bianhao: '',
fuzeren: '',
leixing: ''
}
}
// 提交搜索表单
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'
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;
}
.el-form-item {
width: 270px;
}
.img-icon {
margin-right: 8px;
width: 24px;
height: 24px;
}
}
.shadow_box_bottom {
margin-top: 20px;
margin-left: 1%;
width: 98%;
height: 50%;
box-shadow: 5px 5px 5px -3px rgba(0, 0, 0, 0.2);
//导航 、 按钮
.shadow_box_bottom_add {
display: flex;
width: 98%;
justify-content: space-between;
align-items: center;
margin-top: 20px;
.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 2px #0062ff;
margin-top: 5px;
height: 4px;
}
}
.right {
}
}
//步骤条
.shadow_box_bottom_step {
display: flex;
margin: 20px 0px;
padding: 20px 0px;
width: 98%;
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_table {
.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