You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
568 lines
15 KiB
568 lines
15 KiB
<template>
|
|
<div>
|
|
<!-- 导航返回上一页 -->
|
|
<NuxtLink to="/applicant">
|
|
<van-nav-bar
|
|
title="发起申请"
|
|
left-arrow
|
|
/>
|
|
</NuxtLink>
|
|
<!-- 申请发票需要输入的数据 -->
|
|
<div class="apply-message">
|
|
<van-cell-group>
|
|
<van-cell title="发票信息" class="bill-name"/>
|
|
</van-cell-group>
|
|
<!-- 是否上传票据 -->
|
|
<div v-show="isInvoice">
|
|
<div class="bill">
|
|
<div class="flex px-3 pt-3 pb-2" v-show="titleHidden">
|
|
<div>
|
|
<span class="red">*</span>
|
|
<span class="grey">上传票据凭证 </span>
|
|
<span class="shallow-grey">(仅支持ipg格式)</span>
|
|
</div>
|
|
<van-button plain type="primary" size="mini" @click="isInvoice = false">手动输入</van-button>
|
|
</div>
|
|
<div class="upload-window" @click="uploadBill" v-show="!isSuccess">
|
|
<p class="add-icon">+</p>
|
|
<p class="shallow-grey">上传并识别凭证</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"
|
|
class="name-field"
|
|
/>
|
|
</div>
|
|
<!-- 备注信息 -->
|
|
<div class="remarks-name">备注</div>
|
|
<van-cell-group>
|
|
<van-field
|
|
v-model="message"
|
|
rows="2"
|
|
autosize
|
|
type="textarea"
|
|
maxlength="40"
|
|
placeholder="请输入备注"
|
|
show-word-limit
|
|
class="textarea"
|
|
/>
|
|
</van-cell-group>
|
|
</div>
|
|
<!-- 选择审核人 -->
|
|
<div class="reviewer">
|
|
<van-field label="审核人" required/>
|
|
<div class="px-3">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 其他信息 -->
|
|
<div class="reviewer">
|
|
<div class="remarks-name">其他信息</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>
|
|
<!-- 所属任务的 -->
|
|
<van-field
|
|
v-model="applyTask"
|
|
is-link
|
|
readonly
|
|
label="所属任务"
|
|
placeholder="请选择所属任务"
|
|
@click="showTask = true"
|
|
required
|
|
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">
|
|
<van-cell title="单元格" is-link :value="personalType" required/>
|
|
<van-cell title="单元格" is-link :value="personalCategory" required/>
|
|
</div>
|
|
</div>
|
|
<!-- 提交人信息 -->
|
|
<div class="reviewer">
|
|
<div class="remarks-name">提交人信息</div>
|
|
<van-field
|
|
required
|
|
v-model="name"
|
|
label="姓名"
|
|
placeholder="输入姓名"
|
|
input-align="right"
|
|
/>
|
|
<!-- 选择所属部门 -->
|
|
<van-field
|
|
v-model="applyDepartment"
|
|
is-link
|
|
readonly
|
|
label="申请类型"
|
|
placeholder="请选择申请类型"
|
|
@click="showDepartment = true"
|
|
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-popup>
|
|
</div>
|
|
<!-- 历史申请 -->
|
|
<div class="reviewer">
|
|
<div class="financial-management">
|
|
<span class="title">历史申请</span>
|
|
<div v-if="showHistory">
|
|
<Search />
|
|
<table>
|
|
<tr class="table-header">
|
|
<td>申请人</td>
|
|
<td>金额(元)</td>
|
|
<td class="apply-time">时间</td>
|
|
<td>状态</td>
|
|
</tr>
|
|
<tr v-for="item in applyData">
|
|
<td>{{item.applicant}}</td>
|
|
<td>{{item.money}}</td>
|
|
<td>{{item.time}}</td>
|
|
<td
|
|
:class="item.type === 1 ? 'green' : item.type === 2 ? 'red' : ''"
|
|
>
|
|
{{item.type === 1 ? '已通过' : item.type === 2 ? '已驳回' : '待审批'}}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div class="pagination">
|
|
<van-pagination v-model="currentPage" :page-count="12" mode="simple" />
|
|
</div>
|
|
</div>
|
|
<div v-if="!showHistory" class="no-data">
|
|
暂无历史记录
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 底部立即提交按钮 -->
|
|
<NuxtLink to="/application-details">
|
|
<div class="foot">
|
|
<van-button type="primary" block>立即提交</van-button>
|
|
</div>
|
|
</NuxtLink>
|
|
|
|
</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 applyData = ref([
|
|
{
|
|
applicant:'代用名1',
|
|
money:100,
|
|
time:'2021/12/31 12:31',
|
|
type: 1
|
|
},
|
|
{
|
|
applicant:'代用名2',
|
|
money:100,
|
|
time:'2021/12/31 12:31',
|
|
type: 2
|
|
},
|
|
{
|
|
applicant:'代用名1',
|
|
money:100,
|
|
time:'2021/12/31 12:31',
|
|
type: 3
|
|
},
|
|
{
|
|
applicant:'代用名2',
|
|
money:100,
|
|
time:'2021/12/31 12:31',
|
|
type: 3
|
|
},
|
|
{
|
|
applicant:'代用名1',
|
|
money:100,
|
|
time:'2021/12/31 12:31',
|
|
type: 1
|
|
},
|
|
{
|
|
applicant:'代用名2',
|
|
money:100,
|
|
time:'2021/12/31 12:31',
|
|
type: 2
|
|
}
|
|
]); // 申请的记录
|
|
const isSuccess = ref(false) // 上传票据是否成功
|
|
const name = ref('黛西') // 提交人的姓名
|
|
const applyMoney = ref(5000) // 手动输入时输入的申请的金额
|
|
const titleHidden = ref(true) // 上传提示语隐藏
|
|
const currentPage = ref(0) //当前显示页数
|
|
const personalType = ref('个人申请')
|
|
const personalCategory = ref('用款')
|
|
|
|
// 其他信息的多个选择按钮
|
|
// 申请类型的
|
|
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 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);
|
|
}
|
|
|
|
// 所属的名目
|
|
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);
|
|
}
|
|
|
|
// 所属部门
|
|
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 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 uploadBill(){
|
|
//TODO:调取接口识别票据
|
|
setTimeout(() =>{
|
|
titleHidden.value = false
|
|
isSuccess.value = true
|
|
},1000)
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.apply-message{
|
|
background-color:#fff;
|
|
padding-bottom: 0.7rem;
|
|
}
|
|
.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;
|
|
}
|
|
.flex{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.red{
|
|
color: red;
|
|
// margin: 0.2rem;
|
|
}
|
|
.green{
|
|
color: green;
|
|
}
|
|
.grey{
|
|
color: #737373;
|
|
}
|
|
.shallow-grey{
|
|
color: rgb(168, 168, 168);
|
|
font-size: 14px;
|
|
}
|
|
.upload-window{
|
|
text-align: center;
|
|
width:15rem;
|
|
height:6rem;
|
|
border: 1px dashed #ccc;
|
|
background-color:#eee;
|
|
margin-left: 1rem;
|
|
}
|
|
.add-icon{
|
|
color: rgb(168, 168, 168);
|
|
font-size: 25px;
|
|
margin-top: 1rem;
|
|
}
|
|
.van-button{
|
|
border-radius: 0.2rem;
|
|
}
|
|
.remarks-name{
|
|
color: #6F6F6F;
|
|
padding: 1rem;
|
|
}
|
|
.textarea{
|
|
border: 1px solid #ccc;
|
|
border-radius: 0.2rem;
|
|
}
|
|
input{
|
|
color: #6F6F6F;
|
|
text-align: right;
|
|
}
|
|
.button{
|
|
border-radius: 1rem;
|
|
padding: 0 0.75rem;
|
|
margin: 0.5rem ;
|
|
}
|
|
.reviewer{
|
|
background-color: #fff;
|
|
margin-top: 1.5rem;
|
|
}
|
|
.foot{
|
|
margin-top: 3rem;
|
|
padding:1rem 2rem;
|
|
}
|
|
.name-field{
|
|
padding-left: 0.75rem !important;
|
|
}
|
|
</style>
|
|
|