DIGITAL_MANAGEMENT
/
finance
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

我的历史申请

apply
aBin 4 years ago
parent
baede98c02
commit
3869ff242e
6 changed files with 899 additions and 581 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 52
      apis/projectFinance.js
  2. 122
      components/BonusCollection.vue
  3. 155
      components/HistoricalApplication.vue
  4. 877
      pages/Initiate-application.vue
  5. 166
      pages/applicant.vue
  6. 108
      plugins/vant.js

52
apis/projectFinance.js
View File

@ -1,23 +1,29 @@
import http from 'apis/axios'; import http from 'apis/axios';
const apiUrl = import.meta.env.VITE_API_URL; const apiUrl = import.meta.env.VITE_API_URL;
const ptccsens = `${apiUrl}/ptccsens/v1.0`; const ptccsens = `${apiUrl}/ptccsens/v1.0`;
const projectFinance = `${ptccsens}/projectFinance`; const projectFinance = `${ptccsens}/projectFinance`;
// 追加预算 // 追加预算
export const addBudget = params => http.post(`${projectFinance}/addBudget`, params); export const addBudget = params =>
http.post(`${projectFinance}/addBudget`, params);
// 查看所有的费用申请
export const queryAllMoneyApply = params => http.post(`${projectFinance}/queryAllMoneyApply`, params); // 查看所有的费用申请
export const queryAllMoneyApply = params =>
// 查看项目下的财务信息 http.post(`${projectFinance}/queryAllMoneyApply`, params);
export const queryFinanceOfProject = params => http.post(`${projectFinance}/queryFinanceOfProject`, params);
// 查看项目下的财务信息
// 查看自己需要审批的申请 export const queryFinanceOfProject = params =>
export const queryNeedCheckByMe = params => http.post(`${projectFinance}/queryNeedCheckByMe`, params); http.post(`${projectFinance}/queryFinanceOfProject`, params);
// 查看项目下的所有任务对应的财务信息 // 查看自己需要审批的申请
export const queryProjectFinance = params => http.post(`${projectFinance}/queryProjectFinance`, params); export const queryNeedCheckByMe = params =>
http.post(`${projectFinance}/queryNeedCheckByMe`, params);
// 修改任务或项目的预算和奖金信息
export const updateFinance = params => http.post(`${projectFinance}/updateFinance`, params); // 查看项目下的所有任务对应的财务信息
export const queryProjectFinance = params =>
http.post(`${projectFinance}/queryProjectFinance`, params);
// 修改任务或项目的预算和奖金信息
export const updateFinance = params =>
http.post(`${projectFinance}/updateFinance`, params);

122
components/BonusCollection.vue
View File

@ -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>

155
components/HistoricalApplication.vue
View File

@ -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>

877
pages/Initiate-application.vue
View File

@ -1,427 +1,450 @@
<template> <template>
<div> <div>
<!-- 导航返回上一页 --> <!-- 导航返回上一页 -->
<van-nav-bar <van-nav-bar
title="发起申请" title="发起申请"
left-arrow left-arrow
@click-left="onClickLeft" @click-left="onClickLeft"
/> />
<!-- 申请发票需要输入的数据 --> <!-- 申请发票需要输入的数据 -->
<div class="bg-white pb-3"> <div class="bg-white pb-3">
<div class="text-gray-500 px-4 py-3 font-semibold">发票信息</div> <div class="text-gray-500 px-4 py-3 font-semibold">发票信息</div>
<!-- 是否上传票据 --> <!-- 是否上传票据 -->
<div v-show="data.isInvoice"> <div v-show="data.isInvoice">
<div class="mx-4 pb-3 border-b"> <div class="mx-4 pb-3 border-b">
<div class="flex pt-3 pb-2 justify-between" v-show="data.titleHidden"> <div class="flex pt-3 pb-2 justify-between" v-show="data.titleHidden">
<div> <div>
<span class="text-red-500">*</span> <span class="text-red-500">*</span>
<span class="text-gray-500">上传票据凭证 </span> <span class="text-gray-500">上传票据凭证 </span>
<span class="text-gray-400 text-xs">(仅支持ipg格式)</span> <span class="text-gray-400 text-xs">(仅支持ipg格式)</span>
</div> </div>
<van-button plain type="primary" size="mini" @click="data.isInvoice = false">手动输入</van-button> <van-button plain type="primary" size="mini" @click="data.isInvoice = false">手动输入</van-button>
</div> </div>
<div class="text-center border-b w-52 h-24 bg-gray-100 border-dashed border-2" @click="uploadBill" v-show="!data.isSuccess"> <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-xl pt-3">+</p>
<p class="text-gray-400 text-xs">上传并识别凭证</p> <p class="text-gray-400 text-xs">上传并识别凭证</p>
</div> </div>
<!-- 上传票据成功后显示发票信息 --> <!-- 上传票据成功后显示发票信息 -->
<div v-show="data.isSuccess"> <div v-show="data.isSuccess">
<van-field <van-field
v-for="item in data.billList" v-for="item in data.invoiceInfo"
required required
v-model="item.values" v-model="item.values"
:label="item.name" :label="item.name"
input-align="right" @change="cahngeInvoiceList($event, item)"
/> input-align="right"
</div> />
</div> </div>
</div > </div>
<!-- 手动输入信息 --> </div >
<div v-show="!data.isInvoice"> <!-- 手动输入信息 -->
<van-field <div v-show="!data.isInvoice">
required <van-field
v-model="data.applyMoney" required
label="申请金额" v-model="data.applyMoney"
placeholder="输入申请金额" label="申请金额"
input-align="right" placeholder="输入申请金额"
/> input-align="right"
</div> />
<!-- 备注信息 --> </div>
<div class="text-gray-500 py-4 pl-5">备注</div> <!-- 备注信息 -->
<van-cell-group> <div class="text-gray-500 py-4 pl-5">备注</div>
<van-field <van-cell-group>
v-model="data.message" <van-field
rows="2" v-model="data.remark"
autosize rows="2"
type="textarea" autosize
maxlength="40" type="textarea"
placeholder="请输入备注" maxlength="40"
show-word-limit placeholder="请输入备注"
class="border rounded" show-word-limit
/> class="border rounded"
</van-cell-group> />
</div> </van-cell-group>
<!-- 选择审核人 --> </div>
<div class="mt-3"> <!-- 选择审核人 -->
<div class="flex bg-white p-4"> <div class="mt-3">
<div class="text-red-500">*</div> <div class="flex bg-white p-4">
<div class="text-gray-500 pl-1 font-semibold">审核人</div> <div class="text-red-500">*</div>
</div> <div class="text-gray-500 pl-1 font-semibold">审核人</div>
<div class="px-3 bg-white"> </div>
<div> <div class="px-3 bg-white">
<van-button <div>
class="button" <van-button
size="mini" class="button"
v-for="item in data.reviewerList" size="mini"
:key="item.userId" v-for="item in data.reviewerList"
:type="data.checkerList.find(checker => checker === item.userId) ? 'primary' : 'default'" :key="item.userId"
@click="handleSelectChecker(item.userId)" :type="data.checkerList.find(checker => checker === item.userId) ? 'primary' : 'default'"
> @click="handleSelectChecker(item.userId)"
{{item.name}} >
</van-button> {{item.name}}
</div> </van-button>
</div> </div>
</div> </div>
<!-- 其他信息 --> </div>
<div class="bg-white mt-3"> <!-- 其他信息 -->
<div class="text-gray-500 p-4 font-semibold">其他信息</div> <div class="bg-white mt-3">
<!-- 申请类型 --> <div class="text-gray-500 p-4 font-semibold">其他信息</div>
<!-- 普通票据申请 --> <!-- 申请类型 -->
<div v-show="data.isInvoice"> <!-- 普通票据申请 -->
<van-field <div v-show="data.isInvoice">
v-model="data.applyType" <van-field
is-link v-model="data.applyType"
readonly is-link
label="申请类型" readonly
placeholder="请选择申请类型" label="申请类型"
@click="data.showType = true" placeholder="请选择申请类型"
required @click="data.showType = true"
input-align="right" required
/> input-align="right"
<van-popup v-model:show="data.showType" round position="bottom"> />
<van-cascader <van-popup v-model:show="data.showType" round position="bottom">
:options="data.applyTypeOptions" <van-picker
@close="data.showType = false" title="申请类型"
@finish="finishApplyType" :columns="data.applyTypeOptions"
active-color="#1989fa" @confirm="finishApplyType"
class="p-0" />
/> </van-popup>
</van-popup> <!-- 所属项目 -->
<!-- 所属项目 --> <van-field
<van-field v-model="data.projectName"
v-model="data.projectName" is-link
is-link readonly
readonly label="所属项目"
label="所属项目" placeholder="请选择所属项目"
placeholder="请选择所属项目" required
required input-align="right"
input-align="right" disabled
disabled />
/> <van-popup v-model:show="data.projectName" round position="bottom">
<van-popup v-model:show="data.projectName" round position="bottom"> <van-cascader
<van-cascader active-color="#1989fa"
active-color="#1989fa" class="p-0"
class="p-0" />
/> </van-popup>
</van-popup> <!-- 所属任务的 -->
<!-- 所属任务的 --> <van-field
<van-field v-model="data.taskName"
v-model="data.taskName" is-link
is-link readonly
readonly label="所属任务"
label="所属任务" placeholder="请选择所属任务"
placeholder="请选择所属任务" required
required input-align="right"
input-align="right" disabled
disabled />
/> <van-popup v-model:show="data.taskName" round position="bottom">
<van-popup v-model:show="data.taskName" round position="bottom"> <van-cascader
<van-cascader active-color="#1989fa"
active-color="#1989fa" class="p-0"
class="p-0" />
/> </van-popup>
</van-popup> <!-- 类目选择 -->
<!-- 类目选择 --> <van-field
<van-field v-model="data.applyCategory"
v-model="data.applyCategory" is-link
is-link readonly
readonly label="类目"
label="类目" placeholder="请选择类目"
placeholder="请选择类目" @click="data.showCategory = true"
@click="data.showCategory = true" input-align="right"
input-align="right" />
/> <van-popup v-model:show="data.showCategory" round position="bottom">
<van-popup v-model:show="data.showCategory" round position="bottom"> <van-picker
<van-cascader title="请选择类目"
:options="data.applyCategoryOptions" :columns="data.applyCategoryOptions"
@close="data.showCategory = false" @confirm="finishApplyCategory"
@finish="finishApplyCategory" />
active-color="#1989fa" </van-popup>
class="p-0" <!-- 名目选择 -->
/> <van-field
</van-popup> v-model="data.applyName"
<!-- 名目选择 --> is-link
<van-field readonly
v-model="data.applyName" label="名目"
is-link placeholder="请选择名目"
readonly @click="data.showName = true"
label="名目" input-align="right"
placeholder="请选择名目" />
@click="data.showName = true" <van-popup v-model:show="data.showName" round position="bottom">
input-align="right" <van-picker
/> title="请选择名目"
<van-popup v-model:show="data.showName" round position="bottom"> :columns="data.applyNameOptions"
<van-cascader @confirm="finishApplyName"
:options="data.applyNameOptions" />
@close="data.showName = false" </van-popup>
@finish="finishApplyName" </div>
active-color="#1989fa" <!-- 个人手动申请 -->
class="p-0" <div v-show="!data.isInvoice">
/> <div class="pl-2">
</van-popup> <van-cell title="单元格" is-link :value="data.personalType" required/>
</div> <van-cell title="单元格" is-link :value="data.personalCategory" required/>
<!-- 个人手动申请 --> </div>
<div v-show="!data.isInvoice">
<div class="pl-2"> </div>
<van-cell title="单元格" is-link :value="data.personalType" required/> </div>
<van-cell title="单元格" is-link :value="data.personalCategory" required/> <!-- 提交人信息 -->
</div> <div class="bg-white mt-3">
<div class="text-gray-500 p-4 font-semibold">提交人信息</div>
</div> <van-field
</div> required
<!-- 提交人信息 --> v-model="data.submitName"
<div class="bg-white mt-3"> label="姓名"
<div class="text-gray-500 p-4 font-semibold">提交人信息</div> placeholder="请输入姓名"
<van-field input-align="right"
required />
v-model="data.name" <!-- 选择所属部门 -->
label="姓名" <van-field
placeholder="输入姓名" required
input-align="right" v-model="data.department"
/> label="所属部门"
<!-- 选择所属部门 --> placeholder="请输入所属部门"
<van-field input-align="right"
v-model="data.applyDepartment" />
is-link </div>
readonly <!-- 历史申请 -->
label="所属部门" <div class="bg-white mt-3 p-4">
placeholder="请选择所属部门" <div class="text-gray-500 font-semibold">历史申请</div>
@click="data.showDepartment = true" <div>
required <Search />
input-align="right" <FinanceExamine />
/> </div>
<van-popup v-model:show="data.showDepartment" round position="bottom"> </div>
<van-cascader <!-- 底部立即提交按钮 -->
:options="data.applyDepartmentOptions" <div class="mx-6 mt-10">
@close="data.showDepartment = false" <van-button type="primary" size="small" block>立即提交</van-button>
@finish="finishApplyDepartment" </div>
active-color="#1989fa" </div>
class="p-0" </template>
/> <script setup>
</van-popup> import {ref, reactive} from 'vue'
</div> // import useApplication from 'hooks/useApplication';
<!-- 历史申请 --> import { queryChecker } from 'apis/member'
<div class="bg-white mt-3 p-4"> import { queryType } from 'apis/finance'
<div class="text-gray-500 font-semibold">历史申请</div>
<div> // const getApplication = useApplication();
<Search /> const projectName = useProjectName()
<FinanceExamine /> const taskName = useTaskName()
</div> const projectId = useProjectId()
</div> const data = reactive({
<!-- 底部立即提交按钮 --> isInvoice: true,
<div class="mx-6 mt-10"> remark: '',
<van-button type="primary" size="small" block>立即提交</van-button> invoiceList: [],
</div> invoiceInfo: [
</div> {
</template> name: '发票代码',
<script setup> values:0,
import {ref, reactive} from 'vue' label: 'invoiceCode'
// import useApplication from 'hooks/useApplication'; },
import { queryChecker } from 'apis/member' {
import { queryType } from 'apis/finance' name: '发票号码',
values:1,
// const getApplication = useApplication(); label: 'invoiceNumber'
const projectName = useProjectName() },
const taskName = useTaskName() {
const projectId = useProjectId() name: '合计金额(元)',
const data = reactive({ values:2,
isInvoice: true, label: 'money'
message: '', },
billList: [ {
{ name: '税额(元)',
name: '发票代码', values:3,
values:0 label: 'taxMoney'
}, },
{ {
name: '发票号码', name: '开票日期',
values:1 values:4,
}, label: 'invoiceTime'
{ },
name: '合计金额(元)', {
values:2 name: '发票备注信息',
}, values:5,
{ label: 'remark'
name: '税额(元)', },
values:3 ],
}, reviewerList: [], // 审核人数组
{ checkerList: [], // 默认的审核人
name: '开票日期', applyData: [
values:4 {
} applicant:'代用名1',
], money:100,
reviewerList: [], // 审核人数组 time:'2021/12/31 12:31',
checkerList: [], // 默认的审核人 type: 1
applyData: [ },
{ {
applicant:'代用名1', applicant:'代用名2',
money:100, money:100,
time:'2021/12/31 12:31', time:'2021/12/31 12:31',
type: 1 type: 2
}, },
{ ], // 申请的记录
applicant:'代用名2', isSuccess: false, // 上传票据是否成功
money:100, submitName: '', // 提交人的姓名
time:'2021/12/31 12:31', department: '', // 选择的部门的值
type: 2 pplyMoney: '5000', // 手动输入时输入的申请的金额
}, titleHidden: true, // 上传提示语隐藏
], // 申请的记录 currentPage: 0, // 当前显示页数
isSuccess: false, // 上传票据是否成功 personalType: '个人申请', // 上传提示语隐藏
name: '', // 提交人的姓名 personalCategory: '用款',
pplyMoney: '5000', // 手动输入时输入的申请的金额 // 其他信息的多个选择按钮
titleHidden: true, // 上传提示语隐藏 showType: false, // 申请类型的
currentPage: 0, // 当前显示页数 applyTypes: [],
personalType: '个人申请', // 上传提示语隐藏 applyTypeOptions: [],
personalCategory: '用款', applyType: '', // 选择的类型的值
// 其他信息的多个选择按钮 typeId: '',
showType: false, // 申请类型的 showCategory: false, // 所属的类目
applyProject: '', // 选择的类型的值 applyCategories: [],
applyTypeOptions: [], applyCategoryOptions: [],
showCategory: false, // 所属的类目 applyCategory: '', // 选择的类目的值
applyCategory: '', // 选择的类目的值 categoryId: '',
applyCategoryOptions: [], showName: false, // 所属的名目
showName: false, // 所属的名目 applyNames: [],
applyName: '', // 选择的名目的值 applyNameOptions: [],
applyNameOptions: [], applyName: '', // 选择的名目的值
showDepartment: false, // 所属的部门 rowId: '',
applyDepartment: '', // 选择的部门的值 })
applyDepartmentOptions: [],
}) // 发票信息
function cahngeInvoiceList(e,item){
// 选择申请类型 console.log('e: ', e.target.value,item);
function finishApplyType({ selectedOptions }){ }
showType.value = false;
applyType.value = selectedOptions.map((option) => option.text); // 选择申请类型
} function finishApplyType(e){
data.showType = false;
// 所属的类目 data.applyType = e;
function finishApplyCategory({ selectedOptions }){ const type = data.applyTypes.find((option) => option.name === e);
showCategory.value = false; data.typeId = type.id;
applyCategory.value = selectedOptions.map((option) => option.text); // 类目
} handleQueryType(data.typeId, 1)
}
// 所属的名目
function finishApplyName({ selectedOptions }){ // 所属的类目
showName.value = false; function finishApplyCategory(e){
applyName.value = selectedOptions.map((option) => option.text); data.showCategory = false;
} data.applyCategory = e;
const category = data.applyCategories.find((option) => option.name === e);
// 所属部门 data.categoryId = category.id;
function finishApplyDepartment({ selectedOptions }){ // 名目
showDepartment.value = false; handleQueryType(data.categoryId, 2)
applyDepartment.value = selectedOptions.map((option) => option.text); }
}
// 所属的名目
// 检查被选中的审核人的状态 function finishApplyName(e){
function handleSelectChecker(id){ data.showName = false;
const target = data.checkerList.find(item =>item === id) data.applyName = e;
if(target){ const row = data.applyNames.find((option) => option.name === e);
data.checkerList = data.checkerList.filter(item =>item !== id) data.rowId = row.id;
}else{ }
data.checkerList.push(id)
} // 检查被选中的审核人的状态
} function handleSelectChecker(id){
const target = data.checkerList.find(item =>item === id)
// 上传票据事件 if(target){
function uploadBill(){ data.checkerList = data.checkerList.filter(item =>item !== id)
//TODO:调取接口识别票据 }else{
setTimeout(() =>{ data.checkerList.push(id)
titleHidden.value = false }
isSuccess.value = true }
},1000)
} // 上传票据事件
function uploadBill(){
/** //TODO:调取接口识别票据
* 查询所有成员 setTimeout(() =>{
* @param { String } projectId data.titleHidden = false
*/ data.isSuccess = true
async function handleQueryChecker(){ },1000)
try { }
const params = {
param:{ /**
projectId: projectId.value * 查询所有成员
} * @param { String } projectId
} */
const res = await queryChecker(params) async function handleQueryChecker(){
data.reviewerList = res try {
} catch (error) { const params = {
console.error('error: ', error); param:{
} projectId: projectId.value
} }
}
/** const res = await queryChecker(params)
* 查询费用申请类型 data.reviewerList = res
* @param { String } parentId 上级类型ID，默认为0 } catch (error) {
* @param { Number } type 类型：0申请类型 1类目 2名目 console.error('error: ', error);
*/ }
async function handleQueryType(parentId, type){ }
try {
const params = { /**
param:{ * 查询费用申请类型
parentId, * @param { String } parentId 上级类型ID，默认为0
type, * @param { Number } type 类型：0申请类型 1类目 2名目
} */
} async function handleQueryType(parentId, type){
const res = await queryType(params) console.log('parentId: ', parentId);
res.forEach((item) => { try {
data.applyTypeOptions.push(item.name) const params = {
}) param:{
} catch (error) { parentId,
console.error('error: ', error); type,
} }
} }
const res = await queryType(params)
onMounted(() =>{ if(type === 0){
// 查询所有成员 data.applyTypes = res
handleQueryChecker() res.forEach((item) => {
// 查询费用申请类型 data.applyTypeOptions.push(item.name)
handleQueryType(0, 0) })
}) }
if(type === 1){
function onClickLeft(){ data.applyCategories = res
console.log(1) res.forEach((item) => {
} data.applyCategoryOptions.push(item.name)
})
</script> }
if(type === 2){
<style lang="less" scoped> data.applyNames = res
.van-cell-group{ res.forEach((item) => {
padding:0 1rem; data.applyNameOptions.push(item.name)
} })
.van-cell{ }
font-size: 15px; } catch (error) {
} console.error('error: ', error);
.bill-name{ }
font-weight: 600; }
color: #6F6F6F;
border-bottom: 1px solid #eee; onMounted(() =>{
padding: 0.75rem 0px; // 查询所有成员
} handleQueryChecker()
.van-button{ // 查询费用申请类型
border-radius: 0.2rem; handleQueryType(0, 0)
} })
.button{
border-radius: 1rem; function onClickLeft(){
padding: 0 0.75rem; console.log(1)
margin: 0.5rem ; }
}
</style> </script>
<style lang="less" scoped>
.van-cell-group{
padding:0 1rem;
}
.van-cell{
font-size: 15px;
}
.bill-name{
font-weight: 600;
color: #6F6F6F;
border-bottom: 1px solid #eee;
padding: 0.75rem 0px;
}
.van-button{
border-radius: 0.2rem;
}
.button{
border-radius: 1rem;
padding: 0 0.75rem;
margin: 0.5rem ;
}
</style>

166
pages/applicant.vue
View File

@ -1,78 +1,88 @@
<template> <template>
<div> <div>
<!-- 搜索框与表格部分 -->
<!-- 搜索框与表格部分 --> <van-tabs
<van-tabs v-model:active="active" shrink line-width="60px" color="#59B4FF" title-active-color="#59B4FF"> v-model:active="active"
<van-tab title="我的申请"> shrink
<div class="mt-8 bg-white flex flex-col"> line-width="60px"
<div class="p-4 pb-0 text-gray-500 font-semibold">历史申请</div> color="#59B4FF"
<Search class="px-4 pt-0"/> title-active-color="#59B4FF"
<FinanceManage class="px-4 mt-0"/> >
</div> <van-tab title="我的申请">
<!-- <div class="mt-8 bg-white"> <div class="mt-8 bg-white flex flex-col">
<span class="p-4 pb-0 text-gray-500 font-semibold">历史申请</span> <div class="p-4 pb-0 text-gray-500 font-semibold">历史申请</div>
<div v-if="isShow"> <Search class="px-4 pt-0" />
<Search /> <HistoricalApplication class="px-4 mt-0" />
<FinanceManage /> </div>
</div> <!-- <div class="mt-8 bg-white">
<div v-if="!isShow" class="no-data"> <span class="p-4 pb-0 text-gray-500 font-semibold">历史申请</span>
暂无历史记录 <div v-if="isShow">
</div> <Search />
</div> --> <FinanceManage />
<!-- 底部提交按钮部分 --> </div>
<div class="mt-20" @click="toApplication"> <div v-if="!isShow" class="no-data">
<van-button type="primary" block>发起申请</van-button> 暂无历史记录
</div> </div>
</van-tab> </div> -->
<!-- 底部提交按钮部分 -->
<van-tab title="我的奖金"> <div class="mt-20" @click="toApplication">
<div class="mt-8 bg-white"> <van-button type="primary" block>发起申请</van-button>
<div class="p-4 pb-0 text-gray-500 font-semibold">奖金领取记录</div> </div>
<Search class="px-4 pt-0"/> </van-tab>
<FinanceManage class="px-4 mt-0"/>
</div> <van-tab title="我的奖金">
<div class="my-4 bg-white"> <div class="mt-8 bg-white">
<div class="text-gray-500 font-semibold m-4 py-3 border-b">待领取奖金</div> <div class="p-4 pb-0 text-gray-500 font-semibold">奖金领取记录</div>
<div class="text-ms text-gray-400 pl-4">可领取:</div> <Search class="px-4 pt-0" />
<div class="w-full h-20 text-gray-400 font-semibold text-center leading-loose" v-if="!isBonus"> <BonusCollection class="px-4 mt-0" />
暂无可领取的奖金 </div>
</div> <div class="my-4 bg-white">
<div class="w-full h-20 text-blue-500 font-semibold text-center leading-loose text-2xl" v-if="isBonus"> <div class="text-gray-500 font-semibold m-4 py-3 border-b">
500元 待领取奖金
</div> </div>
<div class="px-8"> <div class="text-ms text-gray-400 pl-4">可领取:</div>
<van-button type="primary" size="small" block :disabled="!isBonus" >立即领取</van-button> <div
</div> class="w-full h-20 text-gray-400 font-semibold text-center leading-loose"
</div> v-if="!isBonus"
</van-tab> >
</van-tabs> 暂无可领取的奖金
</div> </div>
<div
</template> class="w-full h-20 text-blue-500 font-semibold text-center leading-loose text-2xl"
v-if="isBonus"
<script setup> >
import {ref} from 'vue' 500元
import { useRouter } from 'vue-router'; </div>
<div class="px-8">
const router = useRouter(); <van-button type="primary" size="small" block :disabled="!isBonus"
>立即领取</van-button
const active = ref(0); >
const isShow = ref(true); </div>
const isBonus =ref(true) </div>
</van-tab>
function onClickLeft(){ </van-tabs>
console.log('返回上一页') </div>
} </template>
function toApplication() { <script setup>
const routeValue = router.currentRoute.value; import { ref } from 'vue';
const query = routeValue.query import { useRouter } from 'vue-router';
router.push({path: '/Initiate-application', query})
} const router = useRouter();
</script> const active = ref(0);
const isShow = ref(true);
const isBonus = ref(true);
<style lang="less" scoped>
function onClickLeft() {
</style> 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>

108
plugins/vant.js
View File

@ -1,53 +1,55 @@
// 目前在 nuxt 中无法按需引入样式，因此采用手动引入的方式 // 目前在 nuxt 中无法按需引入样式，因此采用手动引入的方式
import 'vant/lib/index.css'; import 'vant/lib/index.css';
import { import {
Button, Button,
Cell, Cell,
CellGroup, CellGroup,
Col, Col,
Icon, Icon,
Image, Image,
Row, Row,
NavBar, NavBar,
Tabs, Tabs,
Tab, Tab,
Search, Search,
Pagination, Pagination,
Field, Field,
Uploader, Uploader,
Form, Form,
Popup, Popup,
Cascader, Cascader,
Circle, Circle,
Empty, Empty,
Popover, Popover,
Dialog Dialog,
} from 'vant'; Picker,
} from 'vant';
import { defineNuxtPlugin } from '#app';
import { defineNuxtPlugin } from '#app';
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp export default defineNuxtPlugin(nuxtApp => {
.use(Row) nuxtApp.vueApp
.use(Col) .use(Row)
.use(Image) .use(Col)
.use(Icon) .use(Image)
.use(Cell) .use(Icon)
.use(Button) .use(Cell)
.use(CellGroup) .use(Button)
.use(NavBar) .use(CellGroup)
.use(Tab) .use(NavBar)
.use(Search) .use(Tab)
.use(Pagination) .use(Search)
.use(Field) .use(Pagination)
.use(Uploader) .use(Field)
.use(Form) .use(Uploader)
.use(Cascader) .use(Form)
.use(Popup) .use(Cascader)
.use(Circle) .use(Popup)
.use(Tabs) .use(Circle)
.use(Empty) .use(Tabs)
.use(Popover) .use(Empty)
.use(Dialog) .use(Popover)
}); .use(Dialog)
.use(Picker);
});

Write Preview
Loading…
Cancel
Save