Min5203
4 years ago
15 changed files with 874 additions and 500 deletions
@ -0,0 +1,8 @@ |
|||
import http from 'apis/axios'; |
|||
|
|||
const apiUrl = import.meta.env.VITE_API_URL; |
|||
const ptccsens = `${apiUrl}/ptccsens/v1.0`; |
|||
const member = `${ptccsens}/member`; |
|||
|
|||
// 查询所有成员
|
|||
export const queryChecker = params => http.post(`${member}/queryChecker`, params); |
|||
@ -0,0 +1,29 @@ |
|||
import http from 'apis/axios'; |
|||
|
|||
const apiUrl = import.meta.env.VITE_API_URL; |
|||
const ptccsens = `${apiUrl}/ptccsens/v1.0`; |
|||
const projectFinance = `${ptccsens}/projectFinance`; |
|||
|
|||
// 追加预算
|
|||
export const addBudget = params => |
|||
http.post(`${projectFinance}/addBudget`, params); |
|||
|
|||
// 查看所有的费用申请
|
|||
export const queryAllMoneyApply = params => |
|||
http.post(`${projectFinance}/queryAllMoneyApply`, params); |
|||
|
|||
// 查看项目下的财务信息
|
|||
export const queryFinanceOfProject = params => |
|||
http.post(`${projectFinance}/queryFinanceOfProject`, params); |
|||
|
|||
// 查看自己需要审批的申请
|
|||
export const queryNeedCheckByMe = params => |
|||
http.post(`${projectFinance}/queryNeedCheckByMe`, params); |
|||
|
|||
// 查看项目下的所有任务对应的财务信息
|
|||
export const queryProjectFinance = params => |
|||
http.post(`${projectFinance}/queryProjectFinance`, params); |
|||
|
|||
// 修改任务或项目的预算和奖金信息
|
|||
export const updateFinance = params => |
|||
http.post(`${projectFinance}/updateFinance`, params); |
|||
@ -0,0 +1,122 @@ |
|||
<template> |
|||
<div> |
|||
<div |
|||
v-if="data.info.list && data.info.list.length" |
|||
class="w-full overflow-x-scroll" |
|||
> |
|||
<table class="text-gray-500 mt-4 text-ms"> |
|||
<tr class="bg-gray-100 text-gray-400"> |
|||
<td class="name">申请人</td> |
|||
<td class="money">金额(元)</td> |
|||
<td class="time">时间</td> |
|||
<td class="remark">备注</td> |
|||
</tr> |
|||
<tr v-for="item in data.info.list" class="text-gray-500"> |
|||
<td>{{ item.submitName }}</td> |
|||
<td> |
|||
{{ (+item.money / 100).toFixed(2) }} |
|||
</td> |
|||
<td> |
|||
{{ dayjs(item.submitTime - 0).format('YYYY/MM/DD HH:mm') }} |
|||
</td> |
|||
<td> |
|||
{{ item.remark }} |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<div class="w-1/2 mt-4 ml-48"> |
|||
<van-pagination |
|||
v-model="data.pageNum" |
|||
:items-per-page="data.pageSize" |
|||
:page-count="data.pages" |
|||
mode="simple" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<van-empty v-else description="暂无数据" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import dayjs from 'dayjs'; |
|||
import { personalHistory } from 'apis/finance'; |
|||
import { ref, reactive, onMounted, nextTick } from 'vue'; |
|||
|
|||
const data = reactive({ |
|||
info: {}, |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
pages: 0, |
|||
}); |
|||
|
|||
const projectId = useProjectId(); |
|||
const taskDetailId = useTaskId(); |
|||
const taskName = useTaskName(); |
|||
|
|||
/** |
|||
* 查看当前用户的费用申请历史信息（奖金） |
|||
* @param { Number } pageNum |
|||
* @param { Number } pageSize |
|||
* @param { String } projectId |
|||
* @param { String } name |
|||
*/ |
|||
async function handlePersonalHistory() { |
|||
try { |
|||
const params = { |
|||
param: { |
|||
pageNum: data.pageNum, |
|||
pageSize: data.pageSize, |
|||
projectId: projectId.value, |
|||
taskDetailId: taskDetailId.value, |
|||
taskName: taskName.value, |
|||
type: 1, |
|||
}, |
|||
}; |
|||
const res = await personalHistory(params); |
|||
data.info = res; |
|||
data.pageNum = res.pageNum ? +res.pageNum : 1; |
|||
data.pageSize = res.pageSize ? +res.pageSize : 10; |
|||
data.pages = res.pages ? +res.pages : 0; |
|||
} catch (error) { |
|||
console.error('error: ', error); |
|||
} |
|||
} |
|||
|
|||
function confirm() { |
|||
alert('确认放款'); |
|||
} |
|||
|
|||
onMounted(() => { |
|||
nextTick(() => { |
|||
handlePersonalHistory(); |
|||
}); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped lang="less"> |
|||
table { |
|||
width: 500px; |
|||
td { |
|||
border: 0.5px solid #ccc; |
|||
padding: 0.85rem; |
|||
width: 5.9375rem; |
|||
} |
|||
.name { |
|||
width: 100px; |
|||
} |
|||
.money { |
|||
width: 100px; |
|||
} |
|||
.time { |
|||
width: 170px; |
|||
} |
|||
.remark { |
|||
width: 120px; |
|||
} |
|||
} |
|||
|
|||
.input-box { |
|||
padding: 0 !important; |
|||
border-bottom: 1px solid #ccc; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,155 @@ |
|||
<template> |
|||
<div> |
|||
<div |
|||
v-if="data.info.list && data.info.list.length" |
|||
class="w-full overflow-x-scroll" |
|||
> |
|||
<table class="text-gray-500 mt-4 text-ms"> |
|||
<tr class="bg-gray-100 text-gray-400"> |
|||
<td class="name">申请人</td> |
|||
<td class="money">金额(元)</td> |
|||
<td class="time">时间</td> |
|||
<td class="status">状态</td> |
|||
</tr> |
|||
<tr v-for="item in data.info.list" class="text-gray-500"> |
|||
<td>{{ item.submitName }}</td> |
|||
<td> |
|||
<!-- v-if="!item.showBudgetEdit" --> |
|||
{{ (+item.money / 100).toFixed(2) }} |
|||
<!-- <van-field |
|||
v-else |
|||
v-model="item.budget" |
|||
type="number" |
|||
class="input-box" |
|||
@change="handleUpdateFinance(item)" |
|||
@blur="item.showBudgetEdit = false" |
|||
/> --> |
|||
</td> |
|||
<td> |
|||
{{ dayjs(item.submitTime - 0).format('YYYY/MM/DD HH:mm') }} |
|||
</td> |
|||
<td> |
|||
<!-- <div v-if="!item.showBonusEdit" @click="item.showBonusEdit = true"> --> |
|||
<span v-if="item.applyType - 0 === 0" class="text-gray-500"> |
|||
待审核 |
|||
</span> |
|||
<span v-else-if="item.applyType - 0 === 1" class="text-gray-500"> |
|||
已通过 |
|||
</span> |
|||
<span v-else-if="item.applyType - 0 === 2" class="text-red-500"> |
|||
已驳回 |
|||
</span> |
|||
<span v-else-if="item.applyType - 0 === 3" class="text-gray-500"> |
|||
待放款 |
|||
</span> |
|||
<van-button |
|||
v-else-if="item.applyType - 0 === 4" |
|||
type="success" |
|||
size="mini" |
|||
class="rounded" |
|||
@click="confirm" |
|||
> |
|||
确认 |
|||
</van-button> |
|||
<span v-else-if="item.applyType - 0 === 5" class="text-green-500"> |
|||
已确认 |
|||
</span> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<div class="w-1/2 mt-4 ml-48"> |
|||
<van-pagination |
|||
v-model="data.pageNum" |
|||
:items-per-page="data.pageSize" |
|||
:page-count="data.pages" |
|||
mode="simple" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<van-empty v-else description="暂无数据" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import dayjs from 'dayjs'; |
|||
import { personalHistory } from 'apis/finance'; |
|||
import { ref, reactive, onMounted, nextTick } from 'vue'; |
|||
|
|||
const data = reactive({ |
|||
info: {}, |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
pages: 0, |
|||
}); |
|||
|
|||
const projectId = useProjectId(); |
|||
const taskDetailId = useTaskId(); |
|||
const taskName = useTaskName(); |
|||
|
|||
/** |
|||
* 查看当前用户的费用申请历史信息（奖金） |
|||
* @param { Number } pageNum |
|||
* @param { Number } pageSize |
|||
* @param { String } projectId |
|||
* @param { String } name |
|||
*/ |
|||
async function handlePersonalHistory() { |
|||
try { |
|||
const params = { |
|||
param: { |
|||
pageNum: data.pageNum, |
|||
pageSize: data.pageSize, |
|||
projectId: projectId.value, |
|||
taskDetailId: taskDetailId.value, |
|||
taskName: taskName.value, |
|||
type: 0, |
|||
}, |
|||
}; |
|||
const res = await personalHistory(params); |
|||
data.info = res; |
|||
data.pageNum = res.pageNum ? +res.pageNum : 1; |
|||
data.pageSize = res.pageSize ? +res.pageSize : 10; |
|||
data.pages = res.pages ? +res.pages : 0; |
|||
} catch (error) { |
|||
console.error('error: ', error); |
|||
} |
|||
} |
|||
|
|||
function confirm() { |
|||
alert('确认放款'); |
|||
} |
|||
|
|||
onMounted(() => { |
|||
nextTick(() => { |
|||
handlePersonalHistory(); |
|||
}); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped lang="less"> |
|||
table { |
|||
width: 500px; |
|||
td { |
|||
border: 0.5px solid #ccc; |
|||
padding: 0.85rem; |
|||
width: 5.9375rem; |
|||
} |
|||
.name { |
|||
width: 100px; |
|||
} |
|||
.money { |
|||
width: 100px; |
|||
} |
|||
.time { |
|||
width: 170px; |
|||
} |
|||
.status { |
|||
width: 120px; |
|||
} |
|||
} |
|||
|
|||
.input-box { |
|||
padding: 0 !important; |
|||
border-bottom: 1px solid #ccc; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,33 @@ |
|||
import { queryChecker } from 'apis/member' |
|||
import { ref } from 'vue' |
|||
|
|||
export default function useApplication() { |
|||
const projectId = useProjectId() |
|||
|
|||
const reviewerList = ref([]) |
|||
|
|||
/** |
|||
* 查询所有成员 |
|||
* @param { String } projectId |
|||
*/ |
|||
async function handleQueryChecker(){ |
|||
try { |
|||
const params = { |
|||
param:{ |
|||
projectId: projectId.value |
|||
} |
|||
} |
|||
const res = await queryChecker(params) |
|||
reviewerList.value = res |
|||
} catch (error) { |
|||
console.error('error: ', error); |
|||
} |
|||
} |
|||
|
|||
// handleQueryChecker()
|
|||
|
|||
return { |
|||
handleQueryChecker, |
|||
reviewerList, |
|||
}; |
|||
} |
|||
@ -1,452 +1,462 @@ |
|||
<template> |
|||
<div> |
|||
<!-- 导航返回上一页 --> |
|||
<van-nav-bar |
|||
title="发起申请" |
|||
left-arrow |
|||
@click-left="onClickLeft" |
|||
/> |
|||
<!-- 申请发票需要输入的数据 --> |
|||
<div class="bg-white pb-3"> |
|||
<div class="text-gray-500 px-4 py-3 font-semibold">发票信息</div> |
|||
<!-- 是否上传票据 --> |
|||
<div v-show="isInvoice"> |
|||
<div class="mx-4 pb-3 border-b"> |
|||
<div class="flex pt-3 pb-2 justify-between" v-show="titleHidden"> |
|||
<div> |
|||
<span class="text-red-500">*</span> |
|||
<span class="text-gray-500">上传票据凭证 </span> |
|||
<span class="text-gray-400 text-xs">(仅支持ipg格式)</span> |
|||
</div> |
|||
<van-button plain type="primary" size="mini" @click="isInvoice = false">手动输入</van-button> |
|||
</div> |
|||
<div class="text-center border-b w-52 h-24 bg-gray-100 border-dashed border-2" @click="uploadBill" v-show="!isSuccess"> |
|||
<p class="text-gray-400 text-xl pt-3">+</p> |
|||
<p class="text-gray-400 text-xs">上传并识别凭证</p> |
|||
</div> |
|||
<!-- 上传票据成功后显示发票信息 --> |
|||
<div v-show="isSuccess"> |
|||
<van-field |
|||
v-for="item in billList" |
|||
required |
|||
v-model="item.values" |
|||
:label=item.name |
|||
input-align="right" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div > |
|||
<!-- 手动输入信息 --> |
|||
<div v-show="!isInvoice"> |
|||
<van-field |
|||
required |
|||
v-model="applyMoney" |
|||
label="申请金额" |
|||
placeholder="输入申请金额" |
|||
input-align="right" |
|||
/> |
|||
</div> |
|||
<!-- 备注信息 --> |
|||
<div class="text-gray-500 py-4 pl-5">备注</div> |
|||
<van-cell-group> |
|||
<van-field |
|||
v-model="message" |
|||
rows="2" |
|||
autosize |
|||
type="textarea" |
|||
maxlength="40" |
|||
placeholder="请输入备注" |
|||
show-word-limit |
|||
class="border rounded" |
|||
/> |
|||
</van-cell-group> |
|||
</div> |
|||
<!-- 选择审核人 --> |
|||
<div class="mt-3"> |
|||
<div class="flex bg-white p-4"> |
|||
<div class="text-red-500">*</div> |
|||
<div class="text-gray-500 pl-1 font-semibold">审核人</div> |
|||
</div> |
|||
<div class="px-3 bg-white"> |
|||
<!-- 导航返回上一页 --> |
|||
<van-nav-bar title="发起申请" left-arrow @click-left="onClickLeft" /> |
|||
<!-- 申请发票需要输入的数据 --> |
|||
<div class="bg-white pb-3"> |
|||
<div class="text-gray-500 px-4 py-3 font-semibold">发票信息</div> |
|||
<!-- 是否上传票据 --> |
|||
<div v-show="data.isInvoice"> |
|||
<div class="mx-4 pb-3 border-b"> |
|||
<div class="flex pt-3 pb-2 justify-between" v-show="data.titleHidden"> |
|||
<div> |
|||
<van-button |
|||
class="button" |
|||
size="mini" |
|||
v-for="item in reviewerList" |
|||
:type="selected.find(checker => checker === item) ? 'primary' : 'default'" |
|||
@click="handleSelectChecker(item)" |
|||
> |
|||
{{item}} |
|||
</van-button> |
|||
<span class="text-red-500">*</span> |
|||
<span class="text-gray-500">上传票据凭证 </span> |
|||
<span class="text-gray-400 text-xs">(仅支持ipg格式)</span> |
|||
</div> |
|||
<van-button |
|||
plain |
|||
type="primary" |
|||
size="mini" |
|||
@click="data.isInvoice = false" |
|||
>手动输入</van-button |
|||
> |
|||
</div> |
|||
</div> |
|||
<!-- 其他信息 --> |
|||
<div class="bg-white mt-3"> |
|||
<div class="text-gray-500 p-4 font-semibold">其他信息</div> |
|||
<!-- 申请类型 --> |
|||
<!-- 普通票据申请 --> |
|||
<div v-show="isInvoice"> |
|||
<van-field |
|||
v-model="applyType" |
|||
is-link |
|||
readonly |
|||
label="申请类型" |
|||
placeholder="请选择申请类型" |
|||
@click="showType = true" |
|||
required |
|||
input-align="right" |
|||
/> |
|||
<van-popup v-model:show="showType" round position="bottom"> |
|||
<van-cascader |
|||
:options="applyTypeOptions" |
|||
@close="showType = false" |
|||
@finish="finishApplyType" |
|||
active-color="#1989fa" |
|||
class="p-0" |
|||
/> |
|||
</van-popup> |
|||
<!-- 所属项目 --> |
|||
<van-field |
|||
v-model="applyProject" |
|||
is-link |
|||
readonly |
|||
label="所属项目" |
|||
placeholder="请选择所属项目" |
|||
@click="showProject = true" |
|||
required |
|||
input-align="right" |
|||
/> |
|||
<van-popup v-model:show="showProject" round position="bottom"> |
|||
<van-cascader |
|||
:options="applyProjectOptions" |
|||
@close="showProject = false" |
|||
@finish="finishApplyProject" |
|||
active-color="#1989fa" |
|||
class="p-0" |
|||
/> |
|||
</van-popup> |
|||
<!-- 所属任务的 --> |
|||
<div |
|||
class="text-center border-b w-52 h-24 bg-gray-100 border-dashed border-2" |
|||
@click="uploadBill" |
|||
v-show="!data.isSuccess" |
|||
> |
|||
<p class="text-gray-400 text-xl pt-3">+</p> |
|||
<p class="text-gray-400 text-xs">上传并识别凭证</p> |
|||
</div> |
|||
<!-- 上传票据成功后显示发票信息 --> |
|||
<div v-show="data.isSuccess"> |
|||
<van-field |
|||
v-model="applyTask" |
|||
is-link |
|||
readonly |
|||
label="所属任务" |
|||
placeholder="请选择所属任务" |
|||
@click="showTask = true" |
|||
v-for="item in data.invoiceInfo" |
|||
required |
|||
v-model="item.values" |
|||
:label="item.name" |
|||
@change="cahngeInvoiceList($event, item)" |
|||
input-align="right" |
|||
/> |
|||
<van-popup v-model:show="showTask" round position="bottom"> |
|||
<van-cascader |
|||
:options="applyTaskOptions" |
|||
@close="showTask = false" |
|||
@finish="finishApplyTask" |
|||
active-color="#1989fa" |
|||
class="p-0" |
|||
/> |
|||
</van-popup> |
|||
<!-- 类目选择 --> |
|||
<van-field |
|||
v-model="applyCategory" |
|||
is-link |
|||
readonly |
|||
label="类目" |
|||
placeholder="请选择类目" |
|||
@click="showCategory = true" |
|||
required |
|||
input-align="right" |
|||
/> |
|||
<van-popup v-model:show="showCategory" round position="bottom"> |
|||
<van-cascader |
|||
:options="applyCategoryOptions" |
|||
@close="showCategory = false" |
|||
@finish="finishApplyCategory" |
|||
active-color="#1989fa" |
|||
class="p-0" |
|||
/> |
|||
</van-popup> |
|||
<!-- 名目选择 --> |
|||
<van-field |
|||
v-model="applyName" |
|||
is-link |
|||
readonly |
|||
label="类目" |
|||
placeholder="请选择类目" |
|||
@click="showName = true" |
|||
required |
|||
input-align="right" |
|||
/> |
|||
<van-popup v-model:show="showName" round position="bottom"> |
|||
<van-cascader |
|||
:options="applyNameOptions" |
|||
@close="showName = false" |
|||
@finish="finishApplyName" |
|||
active-color="#1989fa" |
|||
class="p-0" |
|||
/> |
|||
</van-popup> |
|||
</div> |
|||
<!-- 个人手动申请 --> |
|||
<div v-show="!isInvoice"> |
|||
<div class="pl-2"> |
|||
<van-cell title="单元格" is-link :value="personalType" required/> |
|||
<van-cell title="单元格" is-link :value="personalCategory" required/> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<!-- 手动输入信息 --> |
|||
<div v-show="!data.isInvoice"> |
|||
<van-field |
|||
required |
|||
v-model="data.applyMoney" |
|||
label="申请金额" |
|||
placeholder="输入申请金额" |
|||
input-align="right" |
|||
/> |
|||
</div> |
|||
<!-- 备注信息 --> |
|||
<div class="text-gray-500 py-4 pl-5">备注</div> |
|||
<van-cell-group> |
|||
<van-field |
|||
v-model="data.remark" |
|||
rows="2" |
|||
autosize |
|||
type="textarea" |
|||
maxlength="40" |
|||
placeholder="请输入备注" |
|||
show-word-limit |
|||
class="border rounded" |
|||
/> |
|||
</van-cell-group> |
|||
</div> |
|||
<!-- 选择审核人 --> |
|||
<div class="mt-3"> |
|||
<div class="flex bg-white p-4"> |
|||
<div class="text-red-500">*</div> |
|||
<div class="text-gray-500 pl-1 font-semibold">审核人</div> |
|||
</div> |
|||
<div class="px-3 bg-white"> |
|||
<div> |
|||
<van-button |
|||
class="button" |
|||
size="mini" |
|||
v-for="item in data.reviewerList" |
|||
:key="item.userId" |
|||
:type=" |
|||
data.checkerList.find(checker => checker === item.userId) |
|||
? 'primary' |
|||
: 'default' |
|||
" |
|||
@click="handleSelectChecker(item.userId)" |
|||
> |
|||
{{ item.name }} |
|||
</van-button> |
|||
</div> |
|||
</div> |
|||
<!-- 提交人信息 --> |
|||
<div class="bg-white mt-3"> |
|||
<div class="text-gray-500 p-4 font-semibold">提交人信息</div> |
|||
<van-field |
|||
required |
|||
v-model="name" |
|||
label="姓名" |
|||
placeholder="输入姓名" |
|||
input-align="right" |
|||
/> |
|||
<!-- 选择所属部门 --> |
|||
<van-field |
|||
v-model="applyDepartment" |
|||
</div> |
|||
<!-- 其他信息 --> |
|||
<div class="bg-white mt-3"> |
|||
<div class="text-gray-500 p-4 font-semibold">其他信息</div> |
|||
<!-- 申请类型 --> |
|||
<!-- 普通票据申请 --> |
|||
<div v-show="data.isInvoice"> |
|||
<van-field |
|||
v-model="data.applyType" |
|||
is-link |
|||
readonly |
|||
label="申请类型" |
|||
placeholder="请选择申请类型" |
|||
@click="data.showType = true" |
|||
required |
|||
input-align="right" |
|||
/> |
|||
<van-popup v-model:show="data.showType" round position="bottom"> |
|||
<van-picker |
|||
title="申请类型" |
|||
:columns="data.applyTypeOptions" |
|||
@confirm="finishApplyType" |
|||
/> |
|||
</van-popup> |
|||
<!-- 所属项目 --> |
|||
<van-field |
|||
v-model="data.projectName" |
|||
is-link |
|||
readonly |
|||
label="所属项目" |
|||
placeholder="请选择所属项目" |
|||
required |
|||
input-align="right" |
|||
disabled |
|||
/> |
|||
<van-popup v-model:show="data.projectName" round position="bottom"> |
|||
<van-cascader active-color="#1989fa" class="p-0" /> |
|||
</van-popup> |
|||
<!-- 所属任务的 --> |
|||
<van-field |
|||
v-model="data.taskName" |
|||
is-link |
|||
readonly |
|||
label="所属任务" |
|||
placeholder="请选择所属任务" |
|||
required |
|||
input-align="right" |
|||
disabled |
|||
/> |
|||
<van-popup v-model:show="data.taskName" round position="bottom"> |
|||
<van-cascader active-color="#1989fa" class="p-0" /> |
|||
</van-popup> |
|||
<!-- 类目选择 --> |
|||
<van-field |
|||
v-model="data.applyCategory" |
|||
is-link |
|||
readonly |
|||
label="类目" |
|||
placeholder="请选择类目" |
|||
@click="data.showCategory = true" |
|||
input-align="right" |
|||
/> |
|||
<van-popup v-model:show="data.showCategory" round position="bottom"> |
|||
<van-picker |
|||
title="请选择类目" |
|||
:columns="data.applyCategoryOptions" |
|||
@confirm="finishApplyCategory" |
|||
/> |
|||
</van-popup> |
|||
<!-- 名目选择 --> |
|||
<van-field |
|||
v-model="data.applyName" |
|||
is-link |
|||
readonly |
|||
label="名目" |
|||
placeholder="请选择名目" |
|||
@click="data.showName = true" |
|||
input-align="right" |
|||
/> |
|||
<van-popup v-model:show="data.showName" round position="bottom"> |
|||
<van-picker |
|||
title="请选择名目" |
|||
:columns="data.applyNameOptions" |
|||
@confirm="finishApplyName" |
|||
/> |
|||
</van-popup> |
|||
</div> |
|||
<!-- 个人手动申请 --> |
|||
<div v-show="!data.isInvoice"> |
|||
<div class="pl-2"> |
|||
<van-cell |
|||
title="单元格" |
|||
is-link |
|||
readonly |
|||
label="所属部门" |
|||
placeholder="请选择所属部门" |
|||
@click="showDepartment = true" |
|||
:value="data.personalType" |
|||
required |
|||
input-align="right" |
|||
/> |
|||
<van-popup v-model:show="showDepartment" round position="bottom"> |
|||
<van-cascader |
|||
:options="applyDepartmentOptions" |
|||
@close="showDepartment = false" |
|||
@finish="finishApplyDepartment" |
|||
active-color="#1989fa" |
|||
class="p-0" |
|||
<van-cell |
|||
title="单元格" |
|||
is-link |
|||
:value="data.personalCategory" |
|||
required |
|||
/> |
|||
</van-popup> |
|||
</div> |
|||
</div> |
|||
<!-- 历史申请 --> |
|||
<div class="bg-white mt-3 p-4"> |
|||
<div class="text-gray-500 font-semibold">历史申请</div> |
|||
<div v-if="showHistory"> |
|||
<Search /> |
|||
<FinanceExamine /> |
|||
</div> |
|||
<div v-if="!showHistory" class="no-data"> |
|||
暂无历史记录 |
|||
</div> |
|||
</div> |
|||
<!-- 提交人信息 --> |
|||
<div class="bg-white mt-3"> |
|||
<div class="text-gray-500 p-4 font-semibold">提交人信息</div> |
|||
<van-field |
|||
required |
|||
v-model="data.submitName" |
|||
label="姓名" |
|||
placeholder="请输入姓名" |
|||
input-align="right" |
|||
/> |
|||
<!-- 选择所属部门 --> |
|||
<van-field |
|||
required |
|||
v-model="data.department" |
|||
label="所属部门" |
|||
placeholder="请输入所属部门" |
|||
input-align="right" |
|||
/> |
|||
</div> |
|||
<!-- 历史申请 --> |
|||
<div class="bg-white mt-3 p-4"> |
|||
<div class="text-gray-500 font-semibold">历史申请</div> |
|||
<div> |
|||
<Search /> |
|||
<FinanceExamine /> |
|||
</div> |
|||
<!-- 底部立即提交按钮 --> |
|||
<div class="mx-6 mt-10"> |
|||
<van-button type="primary" size="small" block>立即提交</van-button> |
|||
</div> |
|||
</div> |
|||
<!-- 底部立即提交按钮 --> |
|||
<div class="mx-6 mt-10"> |
|||
<van-button type="primary" size="small" block>立即提交</van-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
import {ref} from 'vue' |
|||
const isInvoice = ref(true); // 判断是否是手动输入 |
|||
const message = ref(''); // 备注的值 |
|||
const billList = ref([ |
|||
{ |
|||
name: '发票代码', |
|||
values:0 |
|||
}, |
|||
{ |
|||
name: '发票号码', |
|||
values:1 |
|||
}, |
|||
{ |
|||
name: '合计金额(元)', |
|||
values:2 |
|||
}, |
|||
{ |
|||
name: '税额(元)', |
|||
values:3 |
|||
}, |
|||
{ |
|||
name: '开票日期', |
|||
values:4 |
|||
} |
|||
]) // 识别后的发票信息 |
|||
const reviewerList = ref(['冯教授','周亮','李洪明','夏红','麦琪其','薇薇安','卫老师']); //审核人数组 |
|||
const selected = ref(['冯教授']); //默认的审核人 |
|||
const showHistory = ref(true); // 根据数据判断是否有历史记录 |
|||
const isSuccess = ref(false) // 上传票据是否成功 |
|||
const name = ref('') // 提交人的姓名 |
|||
const applyMoney = ref(5000) // 手动输入时输入的申请的金额 |
|||
const titleHidden = ref(true) // 上传提示语隐藏 |
|||
const personalType = ref('个人申请') |
|||
const personalCategory = ref('用款') |
|||
import { ref, reactive } from 'vue'; |
|||
// import useApplication from 'hooks/useApplication'; |
|||
import { queryChecker } from 'apis/member'; |
|||
import { queryType } from 'apis/finance'; |
|||
|
|||
// 其他信息的多个选择按钮 |
|||
// 申请类型的 |
|||
const showType = ref(false); |
|||
const applyProject = ref(''); // 选择的类型的值 |
|||
const applyTypeOptions = [ |
|||
{ |
|||
text: '项目申请', |
|||
value: '330000', |
|||
}, |
|||
{ |
|||
text: '日常申请', |
|||
value: '320000', |
|||
} |
|||
]; |
|||
function finishApplyType({ selectedOptions }){ |
|||
showType.value = false; |
|||
applyType.value = selectedOptions.map((option) => option.text); |
|||
} |
|||
// 所属项目的 |
|||
const showProject = ref(false); |
|||
const applyType = ref(''); // 选择的项目的值 |
|||
const applyProjectOptions = [ |
|||
{ |
|||
text: '项目一', |
|||
value: '330000', |
|||
}, |
|||
{ |
|||
text: '项目二', |
|||
value: '320000', |
|||
}, |
|||
{ |
|||
text: '项目三', |
|||
value: '310000', |
|||
} |
|||
]; |
|||
function finishApplyProject({ selectedOptions }){ |
|||
showProject.value = false; |
|||
applyProject.value = selectedOptions.map((option) => option.text); |
|||
} |
|||
// const getApplication = useApplication(); |
|||
const projectName = useProjectName(); |
|||
const taskName = useTaskName(); |
|||
const projectId = useProjectId(); |
|||
const data = reactive({ |
|||
isInvoice: true, |
|||
remark: '', |
|||
invoiceList: [], |
|||
invoiceInfo: [ |
|||
{ |
|||
name: '发票代码', |
|||
values: 0, |
|||
label: 'invoiceCode', |
|||
}, |
|||
{ |
|||
name: '发票号码', |
|||
values: 1, |
|||
label: 'invoiceNumber', |
|||
}, |
|||
{ |
|||
name: '合计金额(元)', |
|||
values: 2, |
|||
label: 'money', |
|||
}, |
|||
{ |
|||
name: '税额(元)', |
|||
values: 3, |
|||
label: 'taxMoney', |
|||
}, |
|||
{ |
|||
name: '开票日期', |
|||
values: 4, |
|||
label: 'invoiceTime', |
|||
}, |
|||
{ |
|||
name: '发票备注信息', |
|||
values: 5, |
|||
label: 'remark', |
|||
}, |
|||
], |
|||
reviewerList: [], // 审核人数组 |
|||
checkerList: [], // 默认的审核人 |
|||
applyData: [ |
|||
{ |
|||
applicant: '代用名1', |
|||
money: 100, |
|||
time: '2021/12/31 12:31', |
|||
type: 1, |
|||
}, |
|||
{ |
|||
applicant: '代用名2', |
|||
money: 100, |
|||
time: '2021/12/31 12:31', |
|||
type: 2, |
|||
}, |
|||
], // 申请的记录 |
|||
isSuccess: false, // 上传票据是否成功 |
|||
submitName: '', // 提交人的姓名 |
|||
department: '', // 选择的部门的值 |
|||
pplyMoney: '5000', // 手动输入时输入的申请的金额 |
|||
titleHidden: true, // 上传提示语隐藏 |
|||
currentPage: 0, // 当前显示页数 |
|||
personalType: '个人申请', // 上传提示语隐藏 |
|||
personalCategory: '用款', |
|||
// 其他信息的多个选择按钮 |
|||
showType: false, // 申请类型的 |
|||
applyTypes: [], |
|||
applyTypeOptions: [], |
|||
applyType: '', // 选择的类型的值 |
|||
typeId: '', |
|||
showCategory: false, // 所属的类目 |
|||
applyCategories: [], |
|||
applyCategoryOptions: [], |
|||
applyCategory: '', // 选择的类目的值 |
|||
categoryId: '', |
|||
showName: false, // 所属的名目 |
|||
applyNames: [], |
|||
applyNameOptions: [], |
|||
applyName: '', // 选择的名目的值 |
|||
rowId: '', |
|||
}); |
|||
|
|||
// 所属任务的 |
|||
const showTask = ref(false); |
|||
const applyTask = ref(''); // 选择的任务的值 |
|||
const applyTaskOptions = [ |
|||
{ |
|||
text: '任务一', |
|||
value: '330000', |
|||
}, |
|||
{ |
|||
text: '任务二', |
|||
value: '320000', |
|||
}, |
|||
{ |
|||
text: '任务三', |
|||
value: '310000', |
|||
} |
|||
]; |
|||
function finishApplyTask({ selectedOptions }){ |
|||
showTask.value = false; |
|||
applyTask.value = selectedOptions.map((option) => option.text); |
|||
} |
|||
// 所属的类目 |
|||
const showCategory = ref(false); |
|||
const applyCategory = ref(''); // 选择的类目的值 |
|||
const applyCategoryOptions = [ |
|||
{ |
|||
text: '报销', |
|||
value: '330000', |
|||
}, |
|||
{ |
|||
text: '奖金', |
|||
value: '320000', |
|||
}, |
|||
]; |
|||
function finishApplyCategory({ selectedOptions }){ |
|||
showCategory.value = false; |
|||
applyCategory.value = selectedOptions.map((option) => option.text); |
|||
} |
|||
// 发票信息 |
|||
function cahngeInvoiceList(e, item) { |
|||
console.log('e: ', e.target.value, item); |
|||
} |
|||
|
|||
// 所属的名目 |
|||
const showName = ref(false); |
|||
const applyName = ref(''); // 选择的名目的值 |
|||
const applyNameOptions = [ |
|||
{ |
|||
text: '办公费', |
|||
value: '330000', |
|||
}, |
|||
{ |
|||
text: '车辆费用', |
|||
value: '320000', |
|||
}, |
|||
{ |
|||
text: '差旅费', |
|||
value: '310000', |
|||
} |
|||
]; |
|||
function finishApplyName({ selectedOptions }){ |
|||
showName.value = false; |
|||
applyName.value = selectedOptions.map((option) => option.text); |
|||
} |
|||
// 选择申请类型 |
|||
function finishApplyType(e) { |
|||
data.showType = false; |
|||
data.applyType = e; |
|||
const type = data.applyTypes.find(option => option.name === e); |
|||
data.typeId = type.id; |
|||
// 类目 |
|||
handleQueryType(data.typeId, 1); |
|||
} |
|||
|
|||
// 所属部门 |
|||
const showDepartment = ref(false); |
|||
const applyDepartment = ref(''); // 选择的部门的值 |
|||
const applyDepartmentOptions = [ |
|||
{ |
|||
text: '软件部', |
|||
value: '330000', |
|||
}, |
|||
{ |
|||
text: '硬件部', |
|||
value: '320000', |
|||
}, |
|||
{ |
|||
text: '人事部', |
|||
value: '310000', |
|||
} |
|||
]; |
|||
function finishApplyDepartment({ selectedOptions }){ |
|||
showDepartment.value = false; |
|||
applyDepartment.value = selectedOptions.map((option) => option.text); |
|||
} |
|||
// 所属的类目 |
|||
function finishApplyCategory(e) { |
|||
data.showCategory = false; |
|||
data.applyCategory = e; |
|||
const category = data.applyCategories.find(option => option.name === e); |
|||
data.categoryId = category.id; |
|||
// 名目 |
|||
handleQueryType(data.categoryId, 2); |
|||
} |
|||
|
|||
// 所属的名目 |
|||
function finishApplyName(e) { |
|||
data.showName = false; |
|||
data.applyName = e; |
|||
const row = data.applyNames.find(option => option.name === e); |
|||
data.rowId = row.id; |
|||
} |
|||
|
|||
// 检查被选中的审核人的状态 |
|||
function handleSelectChecker(items){ |
|||
const target = selected.value.find(item =>item === items) |
|||
if(target){ |
|||
selected.value = selected.value.filter(item =>item !== items) |
|||
}else{ |
|||
selected.value.push(items) |
|||
function handleSelectChecker(id) { |
|||
const target = data.checkerList.find(item => item === id); |
|||
if (target) { |
|||
data.checkerList = data.checkerList.filter(item => item !== id); |
|||
} else { |
|||
data.checkerList.push(id); |
|||
} |
|||
} |
|||
|
|||
// 上传票据事件 |
|||
function uploadBill(){ |
|||
function uploadBill() { |
|||
//TODO:调取接口识别票据 |
|||
setTimeout(() =>{ |
|||
titleHidden.value = false |
|||
isSuccess.value = true |
|||
},1000) |
|||
setTimeout(() => { |
|||
data.titleHidden = false; |
|||
data.isSuccess = true; |
|||
}, 1000); |
|||
} |
|||
|
|||
function onClickLeft(){ |
|||
console.log(1) |
|||
/** |
|||
* 查询所有成员 |
|||
* @param { String } projectId |
|||
*/ |
|||
async function handleQueryChecker() { |
|||
try { |
|||
const params = { |
|||
param: { |
|||
projectId: projectId.value, |
|||
}, |
|||
}; |
|||
const res = await queryChecker(params); |
|||
data.reviewerList = res; |
|||
} catch (error) { |
|||
console.error('error: ', error); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 查询费用申请类型 |
|||
* @param { String } parentId 上级类型ID，默认为0 |
|||
* @param { Number } type 类型：0申请类型 1类目 2名目 |
|||
*/ |
|||
async function handleQueryType(parentId, type) { |
|||
console.log('parentId: ', parentId); |
|||
try { |
|||
const params = { |
|||
param: { |
|||
parentId, |
|||
type, |
|||
}, |
|||
}; |
|||
const res = await queryType(params); |
|||
if (type === 0) { |
|||
data.applyTypes = res; |
|||
res.forEach(item => { |
|||
data.applyTypeOptions.push(item.name); |
|||
}); |
|||
} |
|||
if (type === 1) { |
|||
data.applyCategories = res; |
|||
res.forEach(item => { |
|||
data.applyCategoryOptions.push(item.name); |
|||
}); |
|||
} |
|||
if (type === 2) { |
|||
data.applyNames = res; |
|||
res.forEach(item => { |
|||
data.applyNameOptions.push(item.name); |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
console.error('error: ', error); |
|||
} |
|||
} |
|||
|
|||
onMounted(() => { |
|||
// 查询所有成员 |
|||
handleQueryChecker(); |
|||
// 查询费用申请类型 |
|||
handleQueryType(0, 0); |
|||
}); |
|||
|
|||
function onClickLeft() { |
|||
console.log(1); |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.van-cell-group{ |
|||
padding:0 1rem; |
|||
.van-cell-group { |
|||
padding: 0 1rem; |
|||
} |
|||
.van-cell{ |
|||
.van-cell { |
|||
font-size: 15px; |
|||
} |
|||
.bill-name{ |
|||
.bill-name { |
|||
font-weight: 600; |
|||
color: #6F6F6F; |
|||
color: #6f6f6f; |
|||
border-bottom: 1px solid #eee; |
|||
padding: 0.75rem 0px; |
|||
} |
|||
.van-button{ |
|||
.van-button { |
|||
border-radius: 0.2rem; |
|||
} |
|||
.button{ |
|||
.button { |
|||
border-radius: 1rem; |
|||
padding: 0 0.75rem; |
|||
margin: 0.5rem ; |
|||
margin: 0.5rem; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,61 +1,78 @@ |
|||
<template> |
|||
<div> |
|||
|
|||
<!-- 搜索框与表格部分 --> |
|||
<van-tabs v-model:active="active" shrink line-width="60px" color="#59B4FF" title-active-color="#59B4FF"> |
|||
<van-tabs |
|||
v-model:active="active" |
|||
shrink |
|||
line-width="60px" |
|||
color="#59B4FF" |
|||
title-active-color="#59B4FF" |
|||
> |
|||
<van-tab title="我的申请"> |
|||
<div class="mt-8 bg-white"> |
|||
<div class="p-4 pb-0 text-gray-500 font-semibold">历史申请</div> |
|||
<Search class="px-4 pt-0"/> |
|||
<FinanceManage class="px-4 mt-0"/> |
|||
<div class="mt-8 bg-white flex flex-col"> |
|||
<div class="p-4 pb-0 text-gray-500 font-semibold">历史申请</div> |
|||
<Search class="px-4 pt-0" /> |
|||
<HistoricalApplication class="px-4 mt-0" /> |
|||
</div> |
|||
<!-- 底部提交按钮部分 --> |
|||
<div class="mt-20 px-10"> |
|||
<NuxtLink to="/Initiate-application"> |
|||
<van-button type="primary" size="small" block>发起申请</van-button> |
|||
</NuxtLink> |
|||
<div class="mt-20" @click="toApplication"> |
|||
<van-button type="primary" block>发起申请</van-button> |
|||
</div> |
|||
</van-tab> |
|||
|
|||
<van-tab title="我的奖金"> |
|||
<div class="mt-8 bg-white"> |
|||
<div class="p-4 pb-0 text-gray-500 font-semibold">奖金领取记录</div> |
|||
<Search class="px-4 pt-0"/> |
|||
<FinanceManage class="px-4 mt-0"/> |
|||
<div class="p-4 pb-0 text-gray-500 font-semibold">奖金领取记录</div> |
|||
<Search class="px-4 pt-0" /> |
|||
<BonusCollection class="px-4 mt-0" /> |
|||
</div> |
|||
<div class="my-4 bg-white"> |
|||
<div class="text-gray-500 font-semibold m-4 py-3 border-b">待领取奖金</div> |
|||
<div class="text-gray-500 font-semibold m-4 py-3 border-b"> |
|||
待领取奖金 |
|||
</div> |
|||
<div class="text-ms text-gray-400 pl-4">可领取:</div> |
|||
<div class="w-full h-20 text-gray-400 font-semibold text-center leading-loose" v-if="!isBonus"> |
|||
<div |
|||
class="w-full h-20 text-gray-400 font-semibold text-center leading-loose" |
|||
v-if="!isBonus" |
|||
> |
|||
暂无可领取的奖金 |
|||
</div> |
|||
<div class="w-full h-20 text-blue-500 font-semibold text-center leading-loose text-2xl" v-if="isBonus"> |
|||
<div |
|||
class="w-full h-20 text-blue-500 font-semibold text-center leading-loose text-2xl" |
|||
v-if="isBonus" |
|||
> |
|||
500元 |
|||
</div> |
|||
<div class="px-8"> |
|||
<van-button type="primary" size="small" block :disabled="!isBonus" >立即领取</van-button> |
|||
<van-button type="primary" size="small" block :disabled="!isBonus" |
|||
>立即领取</van-button |
|||
> |
|||
</div> |
|||
</div> |
|||
</van-tab> |
|||
</van-tabs> |
|||
</van-tabs> |
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
|
|||
<script setup> |
|||
import {ref} from 'vue' |
|||
import { ref } from 'vue'; |
|||
import { useRouter } from 'vue-router'; |
|||
|
|||
const router = useRouter(); |
|||
|
|||
const active = ref(0); |
|||
const isShow = ref(true); |
|||
const isBonus =ref(true) |
|||
const isBonus = ref(true); |
|||
|
|||
function onClickLeft(){ |
|||
console.log('返回上一页') |
|||
function onClickLeft() { |
|||
console.log('返回上一页'); |
|||
} |
|||
|
|||
function toApplication() { |
|||
const routeValue = router.currentRoute.value; |
|||
const query = routeValue.query; |
|||
router.push({ path: '/Initiate-application', query }); |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="less" scoped> |
|||
|
|||
</style> |
|||
<style lang="less" scoped></style> |
|||
|
|||
Loading…
Reference in new issue