Commit c06c6cb1 authored by ZhangRunSong's avatar ZhangRunSong
parents e08e9fb6 f46ab241
import request from "../../utils/request.js";
// 1.项目费用申请审批
//获取所有项目名称(查询下拉框)
export function getProjectName() {
return request({
url: '/projectCostRequest/projectAllList',
method: 'get'
})
}
//根据id获取审批流程
export function getApproveNodeList(id) {
return request({
url: '/approvalConfiguration/getNodeList/'+id,
method: 'get'
})
}
//获取当前用户角色信息
export function getRoleId() {
return request({
url: '/expenseApproval/getAllRoleList',
method: 'get'
})
}
...@@ -115,6 +115,7 @@ ...@@ -115,6 +115,7 @@
placeholder="选择日期" placeholder="选择日期"
style="width: 100%" style="width: 100%"
:disabled-date="pickerOptions.disabledDate" :disabled-date="pickerOptions.disabledDate"
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
......
...@@ -16,17 +16,17 @@ ...@@ -16,17 +16,17 @@
> >
<el-row :gutter="150"> <el-row :gutter="150">
<el-col :span="10"> <el-col :span="10">
<el-form-item label="项目名称" prop="projectName"> <el-form-item label="项目名称">
<!-- <el-select v-model="ruleForm.projectName" placeholder="请输入项目名称" clearable>--> <!-- <el-select v-model="ruleForm.projectName" placeholder="请输入项目名称" clearable>-->
<!-- <el-option label="Zone one" value="shanghai" />--> <!-- <el-option label="Zone one" value="shanghai" />-->
<!-- <el-option label="Zone two" value="beijing" />--> <!-- <el-option label="Zone two" value="beijing" />-->
<!-- </el-select>--> <!-- </el-select>-->
<el-input v-model="ruleForm.projectName" placeholder="请输入项目名称" /> <el-input disabled v-model="ruleForm.projectName" placeholder="请输入项目名称" />
</el-form-item> </el-form-item>
<el-form-item label="项目编号" prop="projectNumber"> <el-form-item label="项目编号" >
<el-input v-model="ruleForm.projectNumber" placeholder="请输入项目编号" disabled/> <el-input v-model="ruleForm.projectNumber" placeholder="请输入项目编号" disabled/>
</el-form-item> </el-form-item>
<el-form-item label="项目经理" prop="userName"> <el-form-item label="项目经理">
<el-input v-model="ruleForm.userName" placeholder="请选择项目负责人" disabled/> <el-input v-model="ruleForm.userName" placeholder="请选择项目负责人" disabled/>
</el-form-item> </el-form-item>
<el-form-item label="项目类型" prop="reimbursementType"> <el-form-item label="项目类型" prop="reimbursementType">
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
<el-form-item label="事业部负责人" prop="departName"> <el-form-item label="事业部负责人" prop="departName">
<el-input v-model="ruleForm.departName" placeholder="请输入项目编号" disabled/> <el-input v-model="ruleForm.departName" placeholder="请输入项目编号" disabled/>
</el-form-item> </el-form-item>
<el-form-item label="报销月份" prop="reimbursement" > <el-form-item label="报销月份" >
<el-date-picker <el-date-picker
disabled disabled
format="YYYY-MM" format="YYYY-MM"
......
...@@ -313,7 +313,7 @@ function getList() { ...@@ -313,7 +313,7 @@ function getList() {
//获取所有项目 //获取所有项目
const getProjectList = () => { const getProjectList = () => {
projectList().then(res => { projectList().then(res => {
// console.log("我是666",res.data)
// Object.assign(projectOption, res.data); // Object.assign(projectOption, res.data);
projectOption.value = res.data.map(item => { projectOption.value = res.data.map(item => {
return { return {
...@@ -321,7 +321,6 @@ const getProjectList = () => { ...@@ -321,7 +321,6 @@ const getProjectList = () => {
label: item.projectName label: item.projectName
} }
}) })
// console.log("我是项目数据",projectOption.value)
}) })
listUser().then(response => { listUser().then(response => {
headOptions.value = response.rows.map(item => { headOptions.value = response.rows.map(item => {
...@@ -346,16 +345,13 @@ const getAllshenpiList = ()=>{ ...@@ -346,16 +345,13 @@ const getAllshenpiList = ()=>{
return item.roleName return item.roleName
}) })
allList.value = res.data.nodeList allList.value = res.data.nodeList
console.log("所有节点",allList.value)
}) })
} }
const getPassNumber = (item)=>{ const getPassNumber = (item)=>{
console.log("item",item)
let allNumber = 0 let allNumber = 0
for(let item2 of item){ for(let item2 of item){
console.log(item2)
if(item2.status === 3){ if(item2.status === 3){
allNumber += item2.totalMoney allNumber += item2.totalMoney
} }
...@@ -364,11 +360,9 @@ const getPassNumber = (item)=>{ ...@@ -364,11 +360,9 @@ const getPassNumber = (item)=>{
} }
const getNotPassNumber = (item)=>{ const getNotPassNumber = (item)=>{
console.log("item",item)
let allNumber = 0 let allNumber = 0
for(let item2 of item){ for(let item2 of item){
console.log(item2)
if(item2.status === 1){ if(item2.status === 1){
allNumber += item2.totalMoney allNumber += item2.totalMoney
} }
...@@ -377,11 +371,9 @@ const getNotPassNumber = (item)=>{ ...@@ -377,11 +371,9 @@ const getNotPassNumber = (item)=>{
} }
const getAllPassNumber = (item)=>{ const getAllPassNumber = (item)=>{
console.log("item",item)
let allNumber = 0 let allNumber = 0
for(let item2 of item){ for(let item2 of item){
console.log(item2)
allNumber += item2.totalMoney allNumber += item2.totalMoney
} }
return allNumber return allNumber
...@@ -390,7 +382,6 @@ const getAllPassNumber = (item)=>{ ...@@ -390,7 +382,6 @@ const getAllPassNumber = (item)=>{
//获取列表第一个顶部信息 //获取列表第一个顶部信息
const getTopApproveInfo = ()=>{ const getTopApproveInfo = ()=>{
let item2 = costManageList.value[0] let item2 = costManageList.value[0]
console.log("first",item2)
changProjectNumber.value = item2.projectNumber changProjectNumber.value = item2.projectNumber
let i = allList.value.findIndex((item)=>item.nodeId === item2.currentAuditRoleId) let i = allList.value.findIndex((item)=>item.nodeId === item2.currentAuditRoleId)
stepActive.value = i+1 stepActive.value = i+1
...@@ -403,8 +394,6 @@ const toggleSearch = () => { ...@@ -403,8 +394,6 @@ const toggleSearch = () => {
/** 搜索按钮操作 */ /** 搜索按钮操作 */
function handleQuery() { function handleQuery() {
console.log("我是被选择的项目",queryParams.value.projectName)
// console.log("我的是时间哪去了",queryParams.value.reimbursement)
if(queryParams.value.reimbursementType === '1'){ if(queryParams.value.reimbursementType === '1'){
isFoodType.value = false; isFoodType.value = false;
isTaxiType.value = true; isTaxiType.value = true;
...@@ -428,7 +417,6 @@ function resetQuery() { ...@@ -428,7 +417,6 @@ function resetQuery() {
/** 删除按钮操作 */ /** 删除按钮操作 */
function handleDelete(row) { function handleDelete(row) {
const Ids = row.id; const Ids = row.id;
console.log("删除",Ids);
proxy.$modal.confirm('是否确认删除提交日期为"' + row.registrationTime + '"的数据项?').then(function () { proxy.$modal.confirm('是否确认删除提交日期为"' + row.registrationTime + '"的数据项?').then(function () {
return deleteDailyReimburse(Ids); return deleteDailyReimburse(Ids);
}).then(() => { }).then(() => {
...@@ -484,7 +472,6 @@ const handleHover = (row) => { ...@@ -484,7 +472,6 @@ const handleHover = (row) => {
} }
timer = setTimeout(() => { timer = setTimeout(() => {
changProjectNumber.value = row.projectNumber changProjectNumber.value = row.projectNumber
console.log("摇起来",row)
let i = allList.value.findIndex((item)=>item.nodeId === row.currentAuditRoleId) let i = allList.value.findIndex((item)=>item.nodeId === row.currentAuditRoleId)
stepActive.value = i+1 stepActive.value = i+1
}, 300); }, 300);
......
...@@ -37,11 +37,27 @@ ...@@ -37,11 +37,27 @@
</div > </div >
<div class="contentTable"> <div class="contentTable">
<!-- 按钮--> <!-- 标题、按钮-->
<div style="margin-bottom: 30px"> <div class="shadow_box_bottom_add">
<div class="topDiv">
<span class="bold-text1" style="">项目费用报销审批</span>
</div>
<div>
<el-button class="el-button-defalut" type="default" @click="">一键驳回</el-button> <el-button class="el-button-defalut" type="default" @click="">一键驳回</el-button>
<el-button class="el-button-primary" style="margin-left: 20px" type="primary" @click="">一键通过</el-button> <el-button class="el-button-primary" style="margin-left: 20px" type="primary" @click="">一键通过</el-button>
</div> </div>
</div>
<!-- 步骤条-->
<div class="shadow_box_bottom_step">
<text class="text1">审批流程</text>
<div class="text2">
<text>项目编号</text>
<text>{{changProjectNumber}}</text>
</div>
<div >
<FlowChart :dataList="list" :itemWidth="'130px'" :activeIndex="2"/>
</div>
</div>
<!-- 列表 --> <!-- 列表 -->
<el-table :data="ReimbursementRequestList" border> <el-table :data="ReimbursementRequestList" border>
<el-table-column type="selection" align="center"></el-table-column> <el-table-column type="selection" align="center"></el-table-column>
...@@ -83,6 +99,7 @@ ...@@ -83,6 +99,7 @@
<script setup> <script setup>
import {reactive, ref} from "vue"; import {reactive, ref} from "vue";
import FlowChart from '@/components/FlowChart/index.vue'
const ReimbursementRequestList = ref([ const ReimbursementRequestList = ref([
{ {
shenqingren:'张三', shenqingren:'张三',
...@@ -95,7 +112,8 @@ const ReimbursementRequestList = ref([ ...@@ -95,7 +112,8 @@ const ReimbursementRequestList = ref([
approvalStatus:'进行中' approvalStatus:'进行中'
} }
]); ]);
const list = ref(['个人','项目经理','事业部负责人','财务','总经理']) // 流程图内容,只有值
const allList = ref([]) // 流程图内容,值和角色id
const total = ref(0); const total = ref(0);
const queryParams = reactive({ const queryParams = reactive({
pageNum:1, pageNum:1,
...@@ -110,5 +128,55 @@ const queryParams = reactive({ ...@@ -110,5 +128,55 @@ const queryParams = reactive({
<style scoped lang="scss"> <style scoped lang="scss">
//步骤条
.shadow_box_bottom_step {
display: flex;
margin-top: 10px;
margin-bottom: 20px;
padding: 20px 0px;
width: 100%;
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_add {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding:10px 0;
margin-bottom: 20px;
.topDiv{
display: flex;
align-items: center;
justify-content: space-between;
}
.bold-text1 {
border-bottom: 4px solid #0062FF;
padding-bottom: 22px;
height: 15px;
font-family: PingFangSC-Medium;
font-weight: 900;
font-size: 18px;
color: #0D162A;
letter-spacing: 0;
line-height: 15px;
}
}
</style> </style>
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
:value="dict.value"/> :value="dict.value"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 审批页的审批状态:待审批,已通过,未通过-->
<el-form-item label="审批状态"> <el-form-item label="审批状态">
<el-select style="width: 220px" v-model="queryParams.approveStatus" placeholder="请选择审批状态" clearable> <el-select style="width: 220px" v-model="queryParams.approveStatus" placeholder="请选择审批状态" clearable>
<el-option <el-option
...@@ -37,23 +38,53 @@ ...@@ -37,23 +38,53 @@
</div > </div >
<div class="contentTable"> <div class="contentTable">
<!-- 按钮--> <!-- 标题、按钮-->
<div style="margin-bottom: 30px"> <div class="shadow_box_bottom_add">
<div class="topDiv">
<span class="bold-text1" style="">项目费用申请审批</span>
</div>
<div>
<el-button class="el-button-defalut" type="default" @click="">一键驳回</el-button> <el-button class="el-button-defalut" type="default" @click="">一键驳回</el-button>
<el-button class="el-button-primary" style="margin-left: 20px" type="primary" @click="">一键通过</el-button> <el-button class="el-button-primary" style="margin-left: 20px" type="primary" @click="">一键通过</el-button>
</div> </div>
</div>
<!-- 步骤条-->
<div class="shadow_box_bottom_step">
<text class="text1">审批流程</text>
<div class="text2">
<text>项目编号</text>
<text>{{changProjectNumber}}</text>
</div>
<div >
<FlowChart :dataList="list" :itemWidth="'130px'" :activeIndex="stepActive"/>
</div>
</div>
<!-- 列表 --> <!-- 列表 -->
<el-table :data="projectCostRequestList" border> <el-table @cell-mouse-enter="handleHover" @cell-mouse-leave="handleLeave" :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="shenqingren" label="申请人" align="center"></el-table-column> <el-table-column prop="createBy" label="申请人" align="center"></el-table-column>
<el-table-column prop="createTime" label="申请时间" align="center" min-width="100px"> </el-table-column> <el-table-column prop="createTime" label="申请时间" align="center" min-width="100px"> </el-table-column>
<el-table-column prop="projectName" label="项目名称" align="center"></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="projectType" label="项目类型" align="center"></el-table-column>
<!-- <el-table-column prop="userName" label="事业部负责人" align="center"></el-table-column>--> <el-table-column prop="userName" label="事业部负责人" align="center"></el-table-column>
<el-table-column prop="expenseType" label="费用类型" align="center" ></el-table-column> <el-table-column prop="costType" label="费用类型" align="center" >
<template #default="scope">
<dict-tag :options="project_cost_type" :value="scope.row.costType"/>
</template>
</el-table-column>
<el-table-column prop="timeOfExpense" label="费用发生时间" align="center"></el-table-column> <el-table-column prop="timeOfExpense" label="费用发生时间" align="center"></el-table-column>
<el-table-column prop="sumMoney" label="预计金额(元)" align="center"></el-table-column> <el-table-column prop="sumMoney" label="预计金额(元)" align="center"></el-table-column>
<el-table-column prop="approvalStatus" label="审批状态" align="center"></el-table-column> <el-table-column prop="approvalStatus" label="整体审批状态" align="center">
<template #default="scope">
<dict-tag :options="project_cost_request_status" :value="scope.row.approveStatus"/>
</template>
</el-table-column>
<el-table-column prop="approvalStatus" label="当前审批状态" align="center">
<template #default="scope">
<!-- {{getCurrentApprovalStatus(scope.row)}}-->
<el-tag size="large" :type="getCurrentApprovalStatus(scope.row) === 0?'primary':getCurrentApprovalStatus(scope.row) > 0?'success':'info'">{{getCurrentApprovalStatus(scope.row) === 0?'待审批':getCurrentApprovalStatus(scope.row) > 0?'已通过':'待前审'}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="detail" label="详情" align="center" width="100px"> <el-table-column prop="detail" label="详情" align="center" width="100px">
<el-tooltip content="详情" placement="top"> <el-tooltip content="详情" placement="top">
<el-button link type="text" @click="handleView(scope.row)"> <el-button link type="text" @click="handleView(scope.row)">
...@@ -85,35 +116,196 @@ ...@@ -85,35 +116,196 @@
</template> </template>
<script setup> <script setup>
import {reactive, ref} from "vue"; import {reactive, ref,onMounted} from "vue";
const router = useRouter()
const projectCostRequestList = ref([ import { useRouter } from 'vue-router'
{ const { proxy } = getCurrentInstance();
shenqingren:'张三', import FlowChart from '@/components/FlowChart/index.vue'
createTime:'2025-03-18 10:10:34',
projectName:'餐饮项目', 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');
projectType:'RL-人力', import {getProjectName, getApproveNodeList, getRoleId} from "../../../../api/examineAndApprove/examineAndApprove.js";
userName:'ry', import {getCostRequestList} from "../../../../api/projectCostRequest/projectCostRequest.js";
expenseType:'办公费-宽带费', const list = ref([]) // 流程图内容,只有值
timeOfExpense:'2025-02-01', const allList = ref([]) // 流程图内容,完整的列表
sumMoney:'200',
approvalStatus:'进行中'
}
]);
//当前登录用户角色组
const currentUserRoleInfoList = ref([])
const changProjectNumber = ref('')
const stepActive = ref(1)
const total = ref(0); const total = ref(0);
const queryParams = reactive({ const queryParams = reactive({
pageNum:1, pageNum:1,
pageSize:10, pageSize:10,
projectName:null, projectName:null,
projectNumber:null, projectType:null,
userName:null,
approveStatus:null approveStatus:null
}) })
// 表单 获取所有项目名称
const projectNameList = ref([]);
const getAllProjectName=()=> {
getProjectName(queryParams).then(response => {
projectNameList.value = response.data;
});
}
getAllProjectName()
// 重置表单
const reset = () => {
queryParams.projectName = null
queryParams.projectType = null
queryParams.approveStatus = null
getList()
}
//获取当前用户角色信息
const getRoleInfo = ()=>{
getRoleId().then(res=>{
console.log("角色信息",res)
currentUserRoleInfoList.value = res.data
})
}
const getCurrentApprovalStatus = (row)=>{
let res = approvalStatusChange(row)
// if(res === 0) return "待审批"
// else if(res > 0) return "已通过"
// else if(res < 0) return "待前审"
return res
}
//获取当前审批状态 返回值0表示当前用户可以审核,大于0已经审核过了,小于0表示表示还没到当前用户
const approvalStatusChange = (row)=>{
let currentNodeId = row.currentAuditRoleId
console.log("当前审批状态",currentNodeId)
// 先根据每个节点的激活nodeid查找对应的角色id---也就是可以申请的角色
let activeRoleId = allList.value.find(item =>item.nodeId === currentNodeId).roleId
let lastCurrentRoleId = currentUserRoleInfoList.value[currentUserRoleInfoList.value.length - 1].roleId
//激活id的下标减去当前登录用户最后一个角色id的在整体审批列表差
//0表示当前用户可以审核,大于0已经审核过了,小于0表示表示还没到当前用户
return allList.value.findIndex(item =>item.roleId === activeRoleId) - allList.value.findIndex(item =>item.roleId === lastCurrentRoleId)
}
//获取列表第一个顶部信息
const getTopApproveInfo = ()=>{
let item2 = projectCostRequestList.value[0]
changProjectNumber.value = item2.projectNumber
let i = allList.value.findIndex((item)=>item.nodeId === item2.currentAuditRoleId)
if(i === -1) stepActive.value = 1
else stepActive.value = i+1
}
//表格的鼠标进入事件
let timer = null;
const handleHover = (row, column, cell, event) => {
//防抖
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
changProjectNumber.value = row.projectNumber
let i = allList.value.findIndex((item)=>item.nodeId === row.currentAuditRoleId)
if(i === -1) stepActive.value = 1
else stepActive.value = i+1
}, 300);
}
const handleLeave = () => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
getTopApproveInfo()
}, 300);
}
//获取所有流程列表,根据审批id
const getNodeList = ()=>{
getApproveNodeList(14).then(res=>{
console.log("lkoi",res)
allList.value = res.data.nodeList
list.value = res.data.nodeList.map(item=>{
return item.roleName
})
})
}
// 列表
const projectCostRequestList = ref([]);
const getList=()=> {
getCostRequestList(queryParams).then(response => {
total.value = response.total
console.log("列表",response)
projectCostRequestList.value = response.rows;
getTopApproveInfo()
});
}
onMounted(()=>{
//获取列表
getList()
//获取所有审批列表
getNodeList()
//获取当前用户角色信息
getRoleInfo()
})
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
//步骤条
.shadow_box_bottom_step {
display: flex;
margin-top: 10px;
margin-bottom: 20px;
padding: 20px 0px;
width: 100%;
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_add {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding:10px 0;
margin-bottom: 20px;
.topDiv{
display: flex;
align-items: center;
justify-content: space-between;
}
.bold-text1 {
border-bottom: 4px solid #0062FF;
padding-bottom: 22px;
height: 15px;
font-family: PingFangSC-Medium;
font-weight: 900;
font-size: 18px;
color: #0D162A;
letter-spacing: 0;
line-height: 15px;
}
}
</style> </style>
...@@ -93,10 +93,28 @@ ...@@ -93,10 +93,28 @@
</div> </div>
<div class="contentTable"> <div class="contentTable">
<!-- 按钮--> <!-- 标题、按钮-->
<div style="margin-bottom: 30px"> <div class="shadow_box_bottom_add">
<el-button class="el-button-defalut" type="default" @click="">一键驳回</el-button> <div class="topDiv">
<el-button class="el-button-primary" style="margin-left: 20px" type="primary" @click="">一键通过</el-button> <span class="bold-text1" style="">出差申请审批</span>
</div>
<!-- 按钮-->
<div>
<el-button class="el-button-defalut" type="default" @click="">一键驳回</el-button>
<el-button class="el-button-primary" style="margin-left: 20px" type="primary" @click="">一键通过</el-button>
</div>
</div>
<!-- 步骤条-->
<div class="shadow_box_bottom_step">
<text class="text1">审批流程</text>
<div class="text2">
<text>项目编号</text>
<text>{{}}</text>
</div>
<div >
<FlowChart :dataList="list" :itemWidth="'130px'" :activeIndex="2"/>
</div>
</div> </div>
<!-- 表格数据 --> <!-- 表格数据 -->
<el-table :data="projectList" border style="width: 100%"> <el-table :data="projectList" border style="width: 100%">
...@@ -113,7 +131,7 @@ ...@@ -113,7 +131,7 @@
<el-table-column label="审批状态" align="center" prop="projectStatus" ></el-table-column> <el-table-column label="审批状态" align="center" prop="projectStatus" ></el-table-column>
<el-table-column prop="detail" label="详情" align="center" width="100px"> <el-table-column prop="detail" label="详情" align="center" width="100px">
<el-tooltip content="详情" placement="top"> <el-tooltip content="详情" placement="top">
<el-button link type="text" @click="handleView(scope.row)"> <el-button link type="text" @click="handleView()">
<img src="@/assets/icons/common/check.png" height="32" width="32"/> <img src="@/assets/icons/common/check.png" height="32" width="32"/>
</el-button> </el-button>
</el-tooltip> </el-tooltip>
...@@ -126,29 +144,29 @@ ...@@ -126,29 +144,29 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div style="padding-right: 35%;"> <!-- <div style="padding-right: 35%;">-->
<pagination <!-- <pagination-->
v-show="total > 0" <!-- v-show="total > 0"-->
:total="total" <!-- :total="total"-->
v-model:page="queryParams.pageNum" <!-- v-model:page="queryParams.pageNum"-->
v-model:limit="queryParams.pageSize" <!-- v-model:limit="queryParams.pageSize"-->
@pagination="getList" <!-- @pagination="getList"-->
/> <!-- />-->
</div> <!-- </div>-->
</div> </div>
<!-- 驳回弹出框--> <!-- 驳回弹出框-->
<el-dialog top="200px" style="width: 745px;height: 300px" v-model="dialogFormVisible" title="驳回" > <el-dialog style="width: 745px;height: 300px" v-model="dialogFormVisible" title="驳回" >
<template #header> <template #header>
<div style="margin-bottom:30px;color: #0D162AFF;font-family: PingFangSC-Regular;font-weight: 600;font-size: 16px;">驳回<el-divider /></div> <div class="text_weight">驳回<el-divider /></div>
</template> </template>
<div style="padding:5px" > <div style="padding: 5px;display: flex;flex-direction:column;">
<div style="font-family: PingFangSC-Regular;font-weight: 550;font-size: 16px;color: #0D162A">驳回原因</div> <div class="text">驳回原因</div>
<div style="width: 680px;margin-top:10px"> <el-input :rows="3" type="textarea" v-model="form.name" placeholder="请输入驳回原因" /></div> <div style="width: 95%;margin-top:10px"> <el-input :rows="3" type="textarea" v-model="form.name" placeholder="请输入驳回原因" /></div>
</div> </div>
<template #footer> <template #footer>
<div style="position: absolute;left: 60%;display: flex"> <div style="position: absolute;left: 35%;display: flex">
<el-button @click="dialogFormVisible = false" class="btn-B">取消</el-button> <el-button @click="dialogFormVisible = false" class="btn-B">取消</el-button>
<el-button @click="dialogFormVisible" class="btn-A" type="primary">确定</el-button> <el-button @click="dialogFormVisible" class="btn-A" type="primary">确定</el-button>
</div> </div>
...@@ -161,13 +179,15 @@ ...@@ -161,13 +179,15 @@
<script setup lang="ts"> <script setup lang="ts">
import {ArrowDown} from "@element-plus/icons-vue"; import {ArrowDown} from "@element-plus/icons-vue";
import FlowChart from '@/components/FlowChart/index.vue'
import {ElMessageBox} from "element-plus"; import {ElMessageBox} from "element-plus";
import {useRouter} from "vue-router"; import {useRouter} from "vue-router";
import {ref,getCurrentInstance,reactive,toRefs} from "vue"
const router = useRouter(); const router = useRouter();
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const { project_status, project_type } = proxy.useDict('project_status', 'project_type'); const { project_status, project_type } = proxy.useDict('project_status', 'project_type');
const list = ref(['个人','项目经理','事业部负责人','财务','总经理']) // 流程图内容,只有值
const allList = ref([]) // 流程图内容,值和角色id
const dialogFormVisible = ref(false) const dialogFormVisible = ref(false)
const projectList = ref([ const projectList = ref([
...@@ -213,6 +233,7 @@ const toggleSearch = () => { ...@@ -213,6 +233,7 @@ const toggleSearch = () => {
isExpanded.value = !isExpanded.value; isExpanded.value = !isExpanded.value;
} }
/** 搜索按钮操作 */ /** 搜索按钮操作 */
function handleQuery() { function handleQuery() {
...@@ -222,16 +243,74 @@ function handleQuery() { ...@@ -222,16 +243,74 @@ function handleQuery() {
function resetQuery() { function resetQuery() {
} }
/** 查看详情按钮操作 */
function handleView(){
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.el-dialog:not(.is-fullscreen){ //步骤条
margin-top: 10vh !important; .shadow_box_bottom_step {
display: flex;
margin-top: 10px;
margin-bottom: 20px;
padding: 20px 0px;
width: 100%;
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_add {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding:10px 0;
.topDiv{
display: flex;
align-items: center;
justify-content: space-between;
}
.bold-text1 {
border-bottom: 4px solid #0062FF;
padding-bottom: 22px;
height: 15px;
font-family: "PingFangSC-Medium", sans-serif;
font-weight: 900;
font-size: 18px;
color: #0D162A;
letter-spacing: 0;
line-height: 15px;
}
}
.text_weight{
font-family: "PingFangSC-Medium", sans-serif;
font-weight: 600;
font-size: 16px;
}
.bohui{
font-family: "PingFangSC-Medium", sans-serif;
font-weight: 500;
font-size: 16px;
color: #0D162A;
} }
</style> </style>
...@@ -86,11 +86,27 @@ ...@@ -86,11 +86,27 @@
</div> </div>
<div class="contentTable"> <div class="contentTable">
<!-- 按钮--> <!-- 标题、按钮-->
<div style="margin-bottom: 30px;"> <div class="shadow_box_bottom_add">
<div class="topDiv">
<span class="bold-text1" style="">差旅报销审批</span>
</div>
<div>
<el-button class="el-button-defalut" type="default" @click="">一键驳回</el-button> <el-button class="el-button-defalut" type="default" @click="">一键驳回</el-button>
<el-button class="el-button-primary" style="margin-left: 20px" type="primary" @click="">一键通过</el-button> <el-button class="el-button-primary" style="margin-left: 20px" type="primary" @click="">一键通过</el-button>
</div> </div>
</div>
<!-- 步骤条-->
<div class="shadow_box_bottom_step">
<text class="text1">审批流程</text>
<div class="text2">
<text>项目编号</text>
<text>{{changProjectNumber}}</text>
</div>
<div >
<FlowChart :dataList="list" :itemWidth="'130px'" :activeIndex="2"/>
</div>
</div>
<!-- 表格数据 --> <!-- 表格数据 -->
<el-table v-loading="loading" :data="projectList" border style="width: 100%"> <el-table v-loading="loading" :data="projectList" border style="width: 100%">
<el-table-column type="selection" width="40" align="right"/> <el-table-column type="selection" width="40" align="right"/>
...@@ -160,8 +176,9 @@ ...@@ -160,8 +176,9 @@
<script setup> <script setup>
import {reactive, ref} from "vue"; import {reactive, ref} from "vue";
import {ArrowDown} from "@element-plus/icons-vue"; import {ArrowDown} from "@element-plus/icons-vue";
import FlowChart from '@/components/FlowChart/index.vue'
const list = ref(['个人','项目经理','事业部负责人','财务','总经理']) // 流程图内容,只有值
const allList = ref([]) // 流程图内容,值和角色id
const dialogFormVisible = ref(false) const dialogFormVisible = ref(false)
const projectList = ref([ const projectList = ref([
{ {
...@@ -218,5 +235,54 @@ function resetQuery() { ...@@ -218,5 +235,54 @@ function resetQuery() {
<style scoped lang="scss"> <style scoped lang="scss">
//步骤条
.shadow_box_bottom_step {
display: flex;
margin-top: 10px;
margin-bottom: 20px;
padding: 20px 0px;
width: 100%;
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_add {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding:10px 0;
margin-bottom: 10px;
.topDiv{
display: flex;
align-items: center;
justify-content: space-between;
}
.bold-text1 {
border-bottom: 4px solid #0062FF;
padding-bottom: 22px;
height: 15px;
font-family: PingFangSC-Medium;
font-weight: 900;
font-size: 18px;
color: #0D162A;
letter-spacing: 0;
line-height: 15px;
}
}
</style> </style>
...@@ -53,7 +53,7 @@ import ProjectCostReimbursementApprove from "./components/projectCostReimburseme ...@@ -53,7 +53,7 @@ import ProjectCostReimbursementApprove from "./components/projectCostReimburseme
const activeName = ref('first'); const activeName = ref('first');
const handleClick = (tab) =>{ const handleClick = (tab) =>{
console.log('点击的标签:', toRaw(tab)); // console.log('点击的标签:', toRaw(tab));
// 更新当前激活的标签名 // 更新当前激活的标签名
activeName.value = tab.name; activeName.value = tab.name;
} }
...@@ -74,12 +74,14 @@ const handleClick = (tab) =>{ ...@@ -74,12 +74,14 @@ const handleClick = (tab) =>{
.tabs_span_color{ .tabs_span_color{
font-size: 16px; font-size: 16px;
color: #5B5B5B; color: #5B5B5B;
font-family: "Microsoft YaHei", sans-serif; font-weight: 500;
font-family: "PingFangSC-Medium", sans-serif;
} }
.tabs_span_colorChange{ .tabs_span_colorChange{
font-size: 16px; font-size: 16px;
color: #0062FF; color: #0062FF;
font-family: "Microsoft YaHei", sans-serif; font-weight: 500;
font-family: "PingFangSC-Medium", sans-serif;
} }
</style> </style>
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<div class="app-container" > <div class="app-container" >
<!-- 搜索表单--> <!-- 搜索表单-->
<div class="formSearch" > <div class="formSearch" >
<el-form ref="formRef" :inline="true" :model="formInline" > <el-form ref="formRef" :inline="true" :model="formInline" label-width="120px">
<el-form-item style="margin-right: 60px" label="项目名称"> <el-form-item label="项目名称">
<el-select style="width: 220px" v-model="queryParams.projectName" placeholder="请选择项目名称" clearable> <el-select style="width: 220px" v-model="queryParams.projectName" placeholder="请选择项目名称" clearable>
<el-option <el-option
v-for="item in projectNameList" v-for="item in projectNameList"
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
:value="item"/> :value="item"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item style="margin-right: 60px" label="项目类型"> <el-form-item label="项目类型">
<el-select style="width: 220px" v-model="queryParams.projectType" placeholder="请选择项目类型" clearable> <el-select style="width: 220px" v-model="queryParams.projectType" placeholder="请选择项目类型" clearable>
<el-option <el-option
v-for="dict in project_type" v-for="dict in project_type"
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<div style="margin-left: 250px"> <div style="padding-left: 5.4%">
<el-button type="default" class="el-button-defalut" icon="Refresh" @click="reset">重置</el-button> <el-button type="default" class="el-button-defalut" icon="Refresh" @click="reset">重置</el-button>
<el-button type="primary" class="el-button-primary" icon="Search" @click="onSearch">搜索</el-button> <el-button type="primary" class="el-button-primary" icon="Search" @click="onSearch">搜索</el-button>
</div> </div>
...@@ -102,7 +102,7 @@ ...@@ -102,7 +102,7 @@
<span>{{row.userName}}</span> <span>{{row.userName}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="expenseType" label="费用类型" align="center" width="200px"> <el-table-column prop="costType" label="费用类型" align="center" width="200px">
<template #default="scope"> <template #default="scope">
<dict-tag :options="project_cost_type" :value="scope.row.costType"/> <dict-tag :options="project_cost_type" :value="scope.row.costType"/>
</template> </template>
...@@ -185,8 +185,7 @@ const queryParams = reactive({ ...@@ -185,8 +185,7 @@ const queryParams = reactive({
pageNum:1, pageNum:1,
pageSize:10, pageSize:10,
projectName:null, projectName:null,
projectNumber:null, projectType:null,
userName:null,
approveStatus:null approveStatus:null
}) })
let ids = ref([]) let ids = ref([])
...@@ -271,9 +270,8 @@ getAllProjectName() ...@@ -271,9 +270,8 @@ getAllProjectName()
// 重置表单 // 重置表单
const reset = () => { const reset = () => {
queryParams.projectName = null queryParams.projectName = null
queryParams.projectNumber = null queryParams.projectType = null
queryParams.userName = null queryParams.approveStatus = null
queryParams.approvalStatus = null
getList() getList()
} }
// 提交搜索表单 // 提交搜索表单
......
...@@ -345,7 +345,7 @@ function handleUpdate(row) { ...@@ -345,7 +345,7 @@ function handleUpdate(row) {
} }
/** 查看详情操作 */ /** 查看详情操作 */
function handleView(row) { function handleView(row) {
proxy.$router.push({ path: '/materials/apply/applyview',query: { id: row.id} }); proxy.$router.push({ path: '/materials/apply/applyview',query: { id: row.id, type: "0"} });
} }
/** 删除按钮操作 */ /** 删除按钮操作 */
......
<template>
<div class="app-container">
<div class="formSearch">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
<el-row :gutter="25">
<el-col :span="6">
<el-form-item label="项目组" prop="projectId">
<el-select v-model="queryParams.projectId" placeholder="请选择项目" clearable style="width: 220px">
<el-option
v-for="dict in project_list"
:key="dict.id"
:label="dict.projectName"
:value="dict.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="申请人" prop="userName" width="220px">
<el-input
v-model="queryParams.userName"
placeholder="请选择申请人"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="状态" prop="checkStatus">
<el-select v-model="queryParams.checkStatus" placeholder="请选择审核状态" clearable style="width: 220px;">
<el-option
v-for="dict in material_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item style="margin-left: 30px">
<el-button @click="resetQuery" class="el-button-defalut">
<template #icon>
<img src="../../assets/icons/common/reset.png" height="25" width="24"/>
</template>
重置
</el-button>
<el-button type="primary" @click="handleQuery" class="el-button-primary">
<template #icon>
<img src="../../assets/icons/common/search.png" height="24" width="24"/>
</template>
查询
</el-button>
<el-button
size="large"
icon="ArrowDown"
link
type="primary"
v-show="!isExpanded"
@click="toggleSearch"
>
展开
</el-button>
<el-button
size="large"
type="primary"
link
icon="ArrowUp"
v-show="isExpanded"
@click="toggleSearch"
>
收起
</el-button>
</el-form-item>
</el-col>
</el-row>
<!-- 可折叠的查询条件 -->
<transition>
<div v-if="isExpanded">
<el-row :gutter="25">
<el-col :span="6">
<el-form-item label="申请时间" prop="createTime">
<el-date-picker
clearable
v-model="queryParams.createTime"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择申请时间"
style="width: 220px"
size="large"
>
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
</div>
</transition>
</el-form>
</div>
<div class="contentTable">
<div class="title">
<div class="contentBt">
<span class="bold-text">借用审批</span>
<div>
<el-tooltip content="导出" placement="top">
<el-button
type="primary"
link
plain
@click="handleExport"
v-hasPermi="['material:apply:export']"
><img src="../../assets/icons/common/export2.png" height="38" width="38"/>
</el-button>
</el-tooltip>
</div>
</div>
</div>
<el-table v-loading="loading" :data="applyList" border style="width: 100%">
<el-table-column label="项目组" align="center" prop="projectId">
<template v-slot:default="scope">
<span>{{ project_list.find(item => item.id === scope.row.projectId)?.projectName || '未知类型' }}</span>
</template>
</el-table-column>
<el-table-column label="申请人" align="center" prop="userName"/>
<el-table-column label="申请时间" align="center" prop="createTime">
<template #default="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
</template>
</el-table-column>
<el-table-column label="申请物品" align="center" prop="items">
<template #default="scope">
<el-popover placement="right" :width="400" trigger="click">
<template #reference>
<el-button type="primary" link>物品明细</el-button>
</template>
<el-table :data="scope.row.items" border style="width: 100%">
<!-- 项目回款笔数 -->
<el-table-column label="物品类型" align="center">
<template #default="scope">
{{ typeMap[scope.row.type] || '-' }}
</template>
</el-table-column>
<el-table-column label="物品名称" align="center" prop="repaymentPercentage">
<template #default="scope">
{{ materialDetailMap[scope.row.material_detail] || '-' }}
</template>
</el-table-column>
<el-table-column label="物品数量" align="center" prop="repaymentCondition" show-overflow-tooltip>
<template #default="scope">
{{ scope.row.quantity || '-' }}
</template>
</el-table-column>
</el-table>
</el-popover>
</template>
</el-table-column>
<el-table-column label="审批状态" align="center" prop="checkStatus">
<template #default="scope">
<dict-tag :options="material_status" :value="scope.row.checkStatus"/>
</template>
</el-table-column>
<el-table-column label="申请备注" align="center" prop="remark">
<template #default="scope">
<el-popover placement="right" :width="400" trigger="click">
<template #reference>
<el-button type="primary" link>查看详情</el-button>
</template>
<div style="padding: 10px;">
<el-input
type="textarea"
:rows="5"
v-model="scope.row.remark"
readonly
style="width: 100%;"
>
</el-input>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column label="详情" align="center" width="80">
<template #default="scope">
<el-tooltip content="详情" placement="top">
<el-button link @click="handleView(scope.row)">
<img src="../../assets/icons/common/check.png" height="32" width="32"/>
</el-button>
</el-tooltip>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
width="130">
<template #default="scope">
<el-button type="primary" link @click="handleApprove(scope.row)">通过</el-button>
<el-button type="danger" link @click="handleReject(scope.row)">驳回</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<pagination
layout="prev, pager, next, sizes, jumper"
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div>
</div>
</div>
</template>
<script setup>
import {listApply} from "@/api/material/apply";
import {listMaterialType, listMaterialTypeDetail} from "../../api/material/material.js";
import {listProject} from "../../api/project/project.js";
const queryRef = ref(null);
const {proxy} = getCurrentInstance();
const {material_status} = proxy.useDict('material_status');
const applyList = ref([]);
const material_type = ref([]);
const all_material_type_detail = ref([]);
const project_list = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const isExpanded = ref(false);
const data = reactive({
form: {
id: null,
projectId: null,
userId: null,
userName: null,
checkStatus: null,
remark: null,
createBy: null,
createTime: null,
items: [{
type: null,
material_detail: null,
quantity: null
}],
},
queryParams: {
pageNum: 1,
pageSize: 10,
projectId: null,
userName: null,
checkStatus: null,
createTime: null,
},
rules: {}
});
const {queryParams, form, rules} = toRefs(data);
/** 切换展开/折叠 */
const toggleSearch = () => {
isExpanded.value = !isExpanded.value;
}
/** 查询物品借用申请列表 */
function getList() {
loading.value = true;
listApply(queryParams.value).then(response => {
applyList.value = response.rows;
total.value = response.total;
loading.value = false;
});
}
// 添加计算属性
const typeMap = computed(() => {
const map = {};
material_type.value.forEach(item => {
map[item.id] = item.typeName;
});
return map;
});
const materialDetailMap = computed(() => {
const map = {};
all_material_type_detail.value.forEach(item => {
map[item.id] = item.materialName;
});
return map;
});
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm("queryRef");
handleQuery();
}
/** 查看详情操作 */
function handleView(row) {
proxy.$router.push({path: '/materials/apply/applyview', query: {id: row.id, type: "1"}});
}
/** 导出按钮操作 */
function handleExport() {
proxy.download('material/apply/export', {
...queryParams.value
}, `apply_${new Date().getTime()}.xlsx`)
}
/** 获取项目列表 */
function getProjectList() {
listProject().then(response => {
project_list.value = response.rows;
})
}
/** 获取物品类型 */
function getTypeList() {
listMaterialType().then(response => {
material_type.value = response.data;
});
}
/** 获取类型的物品列表 */
function getTypeDetailList() {
listMaterialTypeDetail().then(response => {
all_material_type_detail.value = response.data;
});
}
// 审批通过
function handleApprove(row) {
proxy.$confirm('确认通过该申请吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
approve(row.id).then(response => {
proxy.$message({
message: '通过成功',
type: 'success'
});
getList();
});
});
}
// 审批驳回
function handleReject(row) {
proxy.$confirm('确认驳回该申请吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
reject(row.id).then(response => {
proxy.$message({
message: '驳回成功',
type: 'success'
});
getList();
});
});
}
getList();
//获取项目列表
getProjectList();
//获取物品类型
getTypeList();
//获取物品信息
getTypeDetailList();
</script>
<style scoped lang="scss">
.bold-text {
font-family: PingFangSC-Medium;
font-weight: 900;
font-size: 19px;
color: #0D162A;
border-bottom: 4px solid #0062FF;
}
.title {
padding-left: 8px;
margin-bottom: 25px;
position: relative;
}
.contentBt {
display: flex;
align-items: center;
justify-content: space-between;
}
// 表格的标头
:deep(.el-table th.el-table__cell) {
line-height: 35px;
//height: 56px;
background: #F6F8FC !important;
}
/* 设置当member字段为空时的行背景色 */
:deep .el-table .error-row {
--el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.contentTable {
position: relative; /* 父容器需要相对定位 */
min-height: 400px; /* 最小高度防止内容过少时变形 */
padding-bottom: 80px; /* 底部留出分页空间 */
}
.pagination {
position: absolute;
bottom: 20px; /* 距离父容器底部20px */
left: 60%; /* 水平居中关键步骤1 */
transform: translateX(-50%); /* 水平居中关键步骤2 */
margin-right: 0; /* 移除旧代码中的右侧间距 */
z-index: 1; /* 确保分页在表格上方 */
}
</style>
...@@ -116,13 +116,21 @@ const form = ref({ ...@@ -116,13 +116,21 @@ const form = ref({
// 返回项目管理页面 // 返回项目管理页面
const reset = () => { const reset = () => {
// 返回项目 if (returnType === "1"){
// 返回项目
proxy.$router.push({ path: '/material/materialBorrowApproval' })
}else if (returnType === "0") {
// 返回项目
proxy.$router.push({ path: '/material/materialApply' }) proxy.$router.push({ path: '/material/materialApply' })
}
} }
// 条页面来源
let returnType=null;
/** 根据ID查到的详细信息 */ /** 根据ID查到的详细信息 */
const getInfo = () =>{ const getInfo = () =>{
returnType = proxy.$route.query.type;
getApply(proxy.$route.query.id).then(response=>{ getApply(proxy.$route.query.id).then(response=>{
form.value = response.data; form.value = response.data;
}) })
} }
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="app-container"> <div class="app-container">
<div class="content"> <div class="content">
<div style="padding-left: 10px"> <div style="padding-left: 10px">
<span class="bold-text" style="border-bottom: 3px solid #0062FF;">项目立项</span> <span class="bold-text">项目立项</span>
</div> </div>
<div style="padding-top: 40px"> <div style="padding-top: 40px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto"> <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
...@@ -123,7 +123,7 @@ ...@@ -123,7 +123,7 @@
:auto-upload="false" :auto-upload="false"
:on-success="handleSuccess" :on-success="handleSuccess"
> >
<el-button size="large" type="text"> <el-button size="large" type="primary" link>
<img src="../../assets/icons/common/upl.png" height="16" width="16" alt="上传" <img src="../../assets/icons/common/upl.png" height="16" width="16" alt="上传"
style="margin-right: 10px"/> style="margin-right: 10px"/>
点击上传附件 点击上传附件
...@@ -344,8 +344,9 @@ const reset = () => { ...@@ -344,8 +344,9 @@ const reset = () => {
proxy.$router.push({path: '/project'}) proxy.$router.push({path: '/project'})
resetForm() resetForm()
} }
// 更新回款输入框数量
const updateRepaymentInputs = () => { const updateRepaymentInputs = () => {
// 根据用户输入的回款笔数更新百分比输入框的数量 // 根据用户输入的回款笔数-新增输入框的数量
if (form.repaymentCount > 0) { if (form.repaymentCount > 0) {
form.repaymentDetails = Array.from({length: form.repaymentCount}, () => ({ form.repaymentDetails = Array.from({length: form.repaymentCount}, () => ({
repaymentPercentage: null, // 回款百分比 repaymentPercentage: null, // 回款百分比
...@@ -355,7 +356,7 @@ const updateRepaymentInputs = () => { ...@@ -355,7 +356,7 @@ const updateRepaymentInputs = () => {
form.repaymentDetails = []; form.repaymentDetails = [];
} }
} }
// 检查回款百分比 // 校验回款百分比
const checkPercentage = (value, index) => { const checkPercentage = (value, index) => {
let newValue = parseFloat(value); // 确保值是浮点数 let newValue = parseFloat(value); // 确保值是浮点数
if (isNaN(newValue)) { if (isNaN(newValue)) {
...@@ -369,8 +370,8 @@ const checkPercentage = (value, index) => { ...@@ -369,8 +370,8 @@ const checkPercentage = (value, index) => {
} }
}; };
// 删除附件相关事件 // 删除附件相关事件
const handleRemove = (file, fileList) => { const handleRemove = (file) => {
console.log(file, fileList) return this.$confirm(`确定移除 ${file.name}?`);
} }
// 预览附件相关事件 // 预览附件相关事件
...@@ -381,13 +382,14 @@ const handlePreview = (file) => { ...@@ -381,13 +382,14 @@ const handlePreview = (file) => {
const handleExceed = (files, fileList) => { const handleExceed = (files, fileList) => {
this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`); this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
} }
// 上传附件删除相关事件
const beforeRemove = (file, fileList) => {
return this.$confirm(`确定移除 ${file.name}?`);
}
// 上传附件成功相关事件 // 上传附件成功相关事件
const handleSuccess = (response, file, fileList) => { const handleSuccess = (response, file, fileList) => {
form.projectAnnexList = fileList.map(item => {
return {
fileName: item.fileName,
fileUrl: item.fileUrl
}
})
console.log(response, file, fileList) console.log(response, file, fileList)
} }
...@@ -396,13 +398,10 @@ getUserList() ...@@ -396,13 +398,10 @@ getUserList()
<style scoped lang="scss"> <style scoped lang="scss">
.bold-text { .bold-text {
width: 72px;
height: 15px;
font-family: PingFangSC-Medium; font-family: PingFangSC-Medium;
font-weight: 900; font-weight: 900;
font-size: 18px; font-size: 19px;
color: #0D162A; color: #0D162A;
letter-spacing: 0; border-bottom: 4px solid #0062FF;
line-height: 15px;
} }
</style> </style>
...@@ -59,7 +59,8 @@ ...@@ -59,7 +59,8 @@
<el-button <el-button
size="large" size="large"
icon="ArrowDown" icon="ArrowDown"
type="text" type="primary"
link
v-show="!isExpanded" v-show="!isExpanded"
@click="toggleSearch" @click="toggleSearch"
> >
...@@ -67,7 +68,8 @@ ...@@ -67,7 +68,8 @@
</el-button> </el-button>
<el-button <el-button
size="large" size="large"
type="text" type="primary"
link
icon="ArrowUp" icon="ArrowUp"
v-show="isExpanded" v-show="isExpanded"
@click="toggleSearch" @click="toggleSearch"
...@@ -114,8 +116,8 @@ ...@@ -114,8 +116,8 @@
</div> </div>
<div class="contentTable"> <div class="contentTable">
<div style="padding-left: 8px ;padding-bottom: 25px"> <div style="padding-left: 8px ;padding-bottom: 25px">
<span class="bold-text" style="border-bottom: 3px solid #0062FF;">项目草稿箱</span> <span class="bold-text">项目草稿箱</span>
<span style="padding-left: 85%"> <span style="padding-left: 86%">
<el-button <el-button
icon="ArrowLeft" icon="ArrowLeft"
class="el-button-primary-pain" class="el-button-primary-pain"
...@@ -155,7 +157,7 @@ ...@@ -155,7 +157,7 @@
<template #default="scope"> <template #default="scope">
<el-popover placement="right" :width="400" trigger="click"> <el-popover placement="right" :width="400" trigger="click">
<template #reference> <template #reference>
<el-button type="text">查看详情</el-button> <el-button type="primary" link>查看详情</el-button>
</template> </template>
<el-table :data="scope.row.repaymentDetails" border style="width: 100%"> <el-table :data="scope.row.repaymentDetails" border style="width: 100%">
<el-table-column label="回款百分比" align="center" prop="repaymentPercentage"> <el-table-column label="回款百分比" align="center" prop="repaymentPercentage">
...@@ -185,12 +187,12 @@ ...@@ -185,12 +187,12 @@
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="150"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="150">
<template #default="scope"> <template #default="scope">
<el-tooltip content="编辑" placement="top"> <el-tooltip content="编辑" placement="top">
<el-button link type="text" @click="handleUpdate(scope.row)" v-hasPermi="['system:project:edit']"> <el-button link @click="handleUpdate(scope.row)" v-hasPermi="['system:project:edit']">
<img src="../../assets/icons/common/edit.png" height="32" width="32"/> <img src="../../assets/icons/common/edit.png" height="32" width="32"/>
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<el-tooltip content="删除" placement="top"> <el-tooltip content="删除" placement="top">
<el-button link type="text" @click="handleDelete(scope.row)" v-hasPermi="['system:project:logicRemove']"> <el-button link @click="handleDelete(scope.row)" v-hasPermi="['system:project:logicRemove']">
<img src="../../assets/icons/common/delete.png" height="32" width="32"/> <img src="../../assets/icons/common/delete.png" height="32" width="32"/>
</el-button> </el-button>
</el-tooltip> </el-tooltip>
...@@ -314,14 +316,11 @@ getList(); ...@@ -314,14 +316,11 @@ getList();
<style scoped lang="scss"> <style scoped lang="scss">
.bold-text { .bold-text {
width: 72px;
height: 15px;
font-family: PingFangSC-Medium; font-family: PingFangSC-Medium;
font-weight: 900; font-weight: 900;
font-size: 18px; font-size: 19px;
color: #0D162A; color: #0D162A;
letter-spacing: 0; border-bottom: 4px solid #0062FF;
line-height: 15px;
} }
.pagination-containerA { .pagination-containerA {
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="app-container"> <div class="app-container">
<div class="content"> <div class="content">
<div style="padding-left: 10px"> <div style="padding-left: 10px">
<span class="bold-text" style="border-bottom: 3px solid #0062FF;">项目编辑</span> <span class="bold-text">项目编辑</span>
</div> </div>
<div style="padding-top: 40px"> <div style="padding-top: 40px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto"> <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="项目成员" prop="projectMemberIds"> <el-form-item label="项目成员" prop="projectMemberIds">
<div v-for="(member, index) in form.projectMemberIds" :key="index" class="member-select"> <div v-for="(index) in form.projectMemberIds" :key="index" class="member-select">
<el-select <el-select
v-model="form.projectMemberIds[index]" v-model="form.projectMemberIds[index]"
:placeholder="'成员' + (index + 1)" :placeholder="'成员' + (index + 1)"
...@@ -151,7 +151,7 @@ ...@@ -151,7 +151,7 @@
:on-exceed="handleExceed" :on-exceed="handleExceed"
:auto-upload="false" :auto-upload="false"
:on-success="handleSuccess"> :on-success="handleSuccess">
<el-button size="large" type="text"> <el-button size="large" type="primary" link>
<img src="../../assets/icons/common/upl.png" height="16" width="16" style="margin-right: 10px"/> <img src="../../assets/icons/common/upl.png" height="16" width="16" style="margin-right: 10px"/>
点击上传附件 点击上传附件
</el-button> </el-button>
...@@ -203,7 +203,7 @@ ...@@ -203,7 +203,7 @@
</el-form> </el-form>
</el-col> </el-col>
<el-col :span="10"> <el-col :span="10">
<el-button type="text" @click="addMember" style="margin-top: 492px;margin-left: 0">+ 添加成员</el-button> <el-button type="primary" link @click="addMember" style="margin-top: 492px;margin-left: 0">+ 添加成员</el-button>
</el-col> </el-col>
</el-row> </el-row>
<el-form-item style="padding-left: 82%"> <el-form-item style="padding-left: 82%">
...@@ -258,7 +258,20 @@ const rules = ref({ ...@@ -258,7 +258,20 @@ const rules = ref({
{required: true, message: '预计开始时间不能为空', trigger: 'blur'} {required: true, message: '预计开始时间不能为空', trigger: 'blur'}
], ],
endDate: [ endDate: [
{required: true, message: '预计结束时间不能为空', trigger: 'blur'} {required: true, message: '预计结束时间不能为空', trigger: 'blur'},
// 预计结束时间必须大于预计开始时间
{
validator: (rule, value, callback) => {
if (value === '') {
callback(new Error('请选择预计结束时间'));
} else if (value <= form.startDate) {
callback(new Error('预计结束时间必须大于预计开始时间'));
} else {
callback();
}
},
trigger: 'blur'
}
], ],
departmentLeadId: [ departmentLeadId: [
{required: true, message: '事业部负责人不能为空', trigger: 'blur'} {required: true, message: '事业部负责人不能为空', trigger: 'blur'}
...@@ -388,6 +401,12 @@ const handleRemove = (file, fileList) => { ...@@ -388,6 +401,12 @@ const handleRemove = (file, fileList) => {
// 上传成功 // 上传成功
const handleSuccess = (response, file, fileList) => { const handleSuccess = (response, file, fileList) => {
form.value.projectAnnexList = fileList.map(item => {
return {
fileName: item.fileName,
fileUrl: item.fileUrl
}
})
console.log(response, file, fileList) console.log(response, file, fileList)
} }
// 上传后预览 // 上传后预览
...@@ -412,14 +431,11 @@ getUserList() ...@@ -412,14 +431,11 @@ getUserList()
<style scoped lang="scss"> <style scoped lang="scss">
.bold-text { .bold-text {
width: 72px;
height: 15px;
font-family: PingFangSC-Medium; font-family: PingFangSC-Medium;
font-weight: 900; font-weight: 900;
font-size: 18px; font-size: 19px;
color: #0D162A; color: #0D162A;
letter-spacing: 0; border-bottom: 4px solid #0062FF;
line-height: 15px;
} }
.member-select { .member-select {
......
...@@ -3,6 +3,8 @@ ...@@ -3,6 +3,8 @@
<div class="formSearch"> <div class="formSearch">
<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px"> <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
<!-- 默认显示的查询条件 --> <!-- 默认显示的查询条件 -->
<el-row :gutter="25">
<el-col :span="6">
<el-form-item label="项目名称" prop="projectName"> <el-form-item label="项目名称" prop="projectName">
<el-select <el-select
v-model="queryParams.id" v-model="queryParams.id"
...@@ -19,6 +21,8 @@ ...@@ -19,6 +21,8 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="项目经理" prop="projectManagerId"> <el-form-item label="项目经理" prop="projectManagerId">
<el-select <el-select
v-model="queryParams.projectManagerId" v-model="queryParams.projectManagerId"
...@@ -35,6 +39,8 @@ ...@@ -35,6 +39,8 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="项目状态" prop="projectStatus"> <el-form-item label="项目状态" prop="projectStatus">
<el-select <el-select
v-model="queryParams.projectStatus" v-model="queryParams.projectStatus"
...@@ -50,8 +56,10 @@ ...@@ -50,8 +56,10 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col>
<!-- 操作按钮 --> <!-- 操作按钮 -->
<el-form-item style="padding-left: 5.4%"> <el-col :span="6">
<el-form-item style="margin-left: 30px">
<el-button @click="resetQuery" class="el-button-defalut"> <el-button @click="resetQuery" class="el-button-defalut">
<template #icon> <template #icon>
<img src="../../assets/icons/common/reset.png" height="25" width="24"/> <img src="../../assets/icons/common/reset.png" height="25" width="24"/>
...@@ -67,7 +75,8 @@ ...@@ -67,7 +75,8 @@
<el-button <el-button
size="large" size="large"
icon="ArrowDown" icon="ArrowDown"
type="text" link
type="primary"
v-show="!isExpanded" v-show="!isExpanded"
@click="toggleSearch" @click="toggleSearch"
> >
...@@ -75,7 +84,8 @@ ...@@ -75,7 +84,8 @@
</el-button> </el-button>
<el-button <el-button
size="large" size="large"
type="text" type="primary"
link
icon="ArrowUp" icon="ArrowUp"
v-show="isExpanded" v-show="isExpanded"
@click="toggleSearch" @click="toggleSearch"
...@@ -83,17 +93,15 @@ ...@@ -83,17 +93,15 @@
收起 收起
</el-button> </el-button>
</el-form-item> </el-form-item>
</el-col>
</el-row>
<!-- 可折叠的查询条件 --> <!-- 可折叠的查询条件 -->
<transition> <transition>
<div v-if="isExpanded"> <div v-if="isExpanded">
<el-row :gutter="25">
<el-col :span="6">
<el-form-item label="事业部负责人" prop="departmentLeaderId"> <el-form-item label="事业部负责人" prop="departmentLeaderId">
<!-- <el-input
v-model="queryParams.departmentLeaderId"
placeholder="请输入事业部负责人"
clearable
@keyup.enter="handleQuery"
style="width: 220px"
/>-->
<el-select <el-select
v-model="queryParams.departmentLeaderId" v-model="queryParams.departmentLeaderId"
filterable filterable
...@@ -109,6 +117,8 @@ ...@@ -109,6 +117,8 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="项目类型" prop="projectType"> <el-form-item label="项目类型" prop="projectType">
<el-select <el-select
v-model="queryParams.projectType" v-model="queryParams.projectType"
...@@ -124,13 +134,15 @@ ...@@ -124,13 +134,15 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col>
</el-row>
</div> </div>
</transition> </transition>
</el-form> </el-form>
</div> </div>
<div class="contentTable"> <div class="contentTable">
<div class="title"> <div class="title">
<div style="display: flex; align-items: center; justify-content: space-between;"> <div class="contentBt">
<span class="bold-text">项目列表</span> <span class="bold-text">项目列表</span>
<div style="display: flex; gap: 10px; align-items: center;"> <div style="display: flex; gap: 10px; align-items: center;">
<el-button <el-button
...@@ -210,7 +222,7 @@ ...@@ -210,7 +222,7 @@
<template #default="scope"> <template #default="scope">
<el-popover placement="right" :width="400" trigger="click"> <el-popover placement="right" :width="400" trigger="click">
<template #reference> <template #reference>
<el-button type="text">查看详情</el-button> <el-button link type="primary">查看详情</el-button>
</template> </template>
<el-table :data="scope.row.repaymentDetails" border style="width: 100%"> <el-table :data="scope.row.repaymentDetails" border style="width: 100%">
<!-- 项目回款笔数 --> <!-- 项目回款笔数 -->
...@@ -248,17 +260,17 @@ ...@@ -248,17 +260,17 @@
min-width="200"> min-width="200">
<template #default="scope"> <template #default="scope">
<el-tooltip content="编辑" placement="top"> <el-tooltip content="编辑" placement="top">
<el-button link type="text" @click="handleUpdate(scope.row)" v-hasPermi="['system:project:edit']"> <el-button link @click="handleUpdate(scope.row)" v-hasPermi="['system:project:edit']">
<img src="../../assets/icons/common/edit.png" height="32" width="32"/> <img src="../../assets/icons/common/edit.png" height="32" width="32"/>
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<el-tooltip content="详情" placement="top"> <el-tooltip content="详情" placement="top">
<el-button link type="text" @click="handleView(scope.row)" v-hasPermi="['system:project:view']"> <el-button link @click="handleView(scope.row)" v-hasPermi="['system:project:view']">
<img src="../../assets/icons/common/check.png" height="32" width="32"/> <img src="../../assets/icons/common/check.png" height="32" width="32"/>
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<el-tooltip content="删除" placement="top"> <el-tooltip content="删除" placement="top">
<el-button link type="text" @click="handleDelete(scope.row)" v-hasPermi="['system:project:logicRemove']"> <el-button link @click="handleDelete(scope.row)" v-hasPermi="['system:project:logicRemove']">
<img src="../../assets/icons/common/delete.png" height="32" width="32"/> <img src="../../assets/icons/common/delete.png" height="32" width="32"/>
</el-button> </el-button>
</el-tooltip> </el-tooltip>
...@@ -443,7 +455,7 @@ getUserList() ...@@ -443,7 +455,7 @@ getUserList()
.bold-text { .bold-text {
font-family: PingFangSC-Medium; font-family: PingFangSC-Medium;
font-weight: 900; font-weight: 900;
font-size: 20px; font-size: 19px;
color: #0D162A; color: #0D162A;
border-bottom: 4px solid #0062FF; border-bottom: 4px solid #0062FF;
} }
...@@ -454,6 +466,12 @@ getUserList() ...@@ -454,6 +466,12 @@ getUserList()
position: relative; position: relative;
} }
.contentBt {
display: flex;
align-items: center;
justify-content: space-between;
}
// 表格的标头 // 表格的标头
:deep(.el-table th.el-table__cell) { :deep(.el-table th.el-table__cell) {
line-height: 35px; line-height: 35px;
...@@ -470,12 +488,12 @@ getUserList() ...@@ -470,12 +488,12 @@ getUserList()
} }
.el-alert { .el-alert {
margin: 23px 0 23px; //margin: 23px 0 23px;
margin-bottom: 23px;
} }
.custom-blue-bg { .custom-blue-bg {
background-color: #E6F7FF !important; background-color: #E6F7FF !important;
/* 可能还需要调整文字颜色以便于阅读 */
color: #1890FF !important; color: #1890FF !important;
} }
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="app-container"> <div class="app-container">
<div class="content" style="position: relative"> <div class="content" style="position: relative">
<div style="padding-left: 15px ;padding-top: 15px"> <div style="padding-left: 15px ;padding-top: 15px">
<span class="bold-text" style="border-bottom: 3px solid blue;">项目详情</span> <span class="bold-text">项目详情</span>
</div> </div>
<div style="padding-top: 28px ;padding-left: 10px; "> <div style="padding-top: 28px ;padding-left: 10px; ">
<el-form :model="form" label-width="auto"> <el-form :model="form" label-width="auto">
...@@ -126,7 +126,7 @@ ...@@ -126,7 +126,7 @@
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<span v-for="(file, index) in form.projectAnnexList" :key="index" class="file-item"> <span v-for="(file, index) in form.projectAnnexList" :key="index" class="file-item">
<el-link :href="file.fileUrl" target="_blank">{{ file.fileName }}</el-link> <el-link :href="file.fileUrl" type="primary" target="_blank">{{ file.fileName }}</el-link>
</span> </span>
</el-col> </el-col>
</el-row> </el-row>
...@@ -208,7 +208,6 @@ const form = ref({ ...@@ -208,7 +208,6 @@ const form = ref({
repaymentDetails: [], repaymentDetails: [],
draft: '', draft: '',
}) })
const headOptions = ref([]) const headOptions = ref([])
const managerOptions = ref([]) const managerOptions = ref([])
const getUserList = () => { const getUserList = () => {
...@@ -259,14 +258,11 @@ getUserList() ...@@ -259,14 +258,11 @@ getUserList()
<style scoped lang="scss"> <style scoped lang="scss">
.bold-text { .bold-text {
width: 72px;
height: 15px;
font-family: PingFangSC-Medium; font-family: PingFangSC-Medium;
font-weight: 900; font-weight: 900;
font-size: 18px; font-size: 19px;
color: #0D162A; color: #0D162A;
letter-spacing: 0; border-bottom: 4px solid #0062FF;
line-height: 15px;
} }
.label-title { .label-title {
......
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