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

我的历史申请

apply
aBin 4 years ago
parent
3869ff242e 7bc5def9b3
commit
b6f2d4006e
3 changed files with 535 additions and 505 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. 594
      pages/Initiate-application.vue
  2. 16
      pages/application-details.vue
  3. 4
      plugins/vant.js

594
pages/Initiate-application.vue
View File

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

16
pages/application-details.vue
View File

@ -64,6 +64,7 @@
</template> </template>
<script setup> <script setup>
import { getApplyDetail } from 'apis/finance'
// 审核人数据 // 审核人数据
const checkerList = ref([ const checkerList = ref([
{ {
@ -156,6 +157,21 @@ const submitter = ref([
function onClickLeft(){ function onClickLeft(){
console.log("上一页") console.log("上一页")
} }
/**
* 查询申请详情
* @param { Number } applyId 申请记录id
*/
async function handleApplyDetail(){
try {
const params = {param : { applyId: '1485797754654695424' }}
await getApplyDetail(params)
} catch (error) {
console.error('error: ', error);
}
}
handleApplyDetail()
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

4
plugins/vant.js
View File

@ -24,6 +24,7 @@ import {
Popover, Popover,
Dialog, Dialog,
Picker, Picker,
Loading,
} from 'vant'; } from 'vant';
import { defineNuxtPlugin } from '#app'; import { defineNuxtPlugin } from '#app';
@ -51,5 +52,6 @@ export default defineNuxtPlugin(nuxtApp => {
.use(Empty) .use(Empty)
.use(Popover) .use(Popover)
.use(Dialog) .use(Dialog)
.use(Picker); .use(Picker)
.use(Loading);
}); });

Write Preview
Loading…
Cancel
Save