Browse Source

我的历史申请

apply
aBin 4 years ago
parent
commit
b6f2d4006e
  1. 154
      pages/Initiate-application.vue
  2. 16
      pages/application-details.vue
  3. 4
      plugins/vant.js

154
pages/Initiate-application.vue

@ -1,11 +1,7 @@
<template> <template>
<div> <div>
<!-- 导航返回上一页 --> <!-- 导航返回上一页 -->
<van-nav-bar <van-nav-bar title="发起申请" left-arrow @click-left="onClickLeft" />
title="发起申请"
left-arrow
@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>
@ -18,9 +14,19 @@
<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>
@ -75,7 +81,11 @@
size="mini" size="mini"
v-for="item in data.reviewerList" v-for="item in data.reviewerList"
:key="item.userId" :key="item.userId"
:type="data.checkerList.find(checker => checker === item.userId) ? 'primary' : 'default'" :type="
data.checkerList.find(checker => checker === item.userId)
? 'primary'
: 'default'
"
@click="handleSelectChecker(item.userId)" @click="handleSelectChecker(item.userId)"
> >
{{ item.name }} {{ item.name }}
@ -118,10 +128,7 @@
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" class="p-0" />
active-color="#1989fa"
class="p-0"
/>
</van-popup> </van-popup>
<!-- 所属任务的 --> <!-- 所属任务的 -->
<van-field <van-field
@ -135,10 +142,7 @@
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" class="p-0" />
active-color="#1989fa"
class="p-0"
/>
</van-popup> </van-popup>
<!-- 类目选择 --> <!-- 类目选择 -->
<van-field <van-field
@ -178,10 +182,19 @@
<!-- 个人手动申请 --> <!-- 个人手动申请 -->
<div v-show="!data.isInvoice"> <div v-show="!data.isInvoice">
<div class="pl-2"> <div class="pl-2">
<van-cell title="单元格" is-link :value="data.personalType" required/> <van-cell
<van-cell title="单元格" is-link :value="data.personalCategory" required/> title="单元格"
is-link
:value="data.personalType"
required
/>
<van-cell
title="单元格"
is-link
:value="data.personalCategory"
required
/>
</div> </div>
</div> </div>
</div> </div>
<!-- 提交人信息 --> <!-- 提交人信息 -->
@ -218,15 +231,15 @@
</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: '',
@ -235,32 +248,32 @@ const data = reactive({
{ {
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: [], //
@ -270,13 +283,13 @@ const data = reactive({
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,7 +316,7 @@ const data = reactive({
applyNameOptions: [], applyNameOptions: [],
applyName: '', // applyName: '', //
rowId: '', rowId: '',
}) });
// //
function cahngeInvoiceList(e, item) { function cahngeInvoiceList(e, item) {
@ -314,37 +327,37 @@ function cahngeInvoiceList(e,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);
} }
} }
@ -352,9 +365,9 @@ function handleSelectChecker(id){
function uploadBill() { function uploadBill() {
//TODO: //TODO:
setTimeout(() => { setTimeout(() => {
data.titleHidden = false data.titleHidden = false;
data.isSuccess = true data.isSuccess = true;
},1000) }, 1000);
} }
/** /**
@ -365,11 +378,11 @@ 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);
} }
@ -387,26 +400,26 @@ async function handleQueryType(parentId, type){
param: { param: {
parentId, parentId,
type, type,
} },
} };
const res = await queryType(params) const res = await queryType(params);
if (type === 0) { if (type === 0) {
data.applyTypes = res data.applyTypes = res;
res.forEach((item) => { res.forEach(item => {
data.applyTypeOptions.push(item.name) data.applyTypeOptions.push(item.name);
}) });
} }
if (type === 1) { if (type === 1) {
data.applyCategories = res data.applyCategories = res;
res.forEach((item) => { res.forEach(item => {
data.applyCategoryOptions.push(item.name) data.applyCategoryOptions.push(item.name);
}) });
} }
if (type === 2) { if (type === 2) {
data.applyNames = res data.applyNames = res;
res.forEach((item) => { res.forEach(item => {
data.applyNameOptions.push(item.name) data.applyNameOptions.push(item.name);
}) });
} }
} catch (error) { } catch (error) {
console.error('error: ', error); console.error('error: ', error);
@ -415,15 +428,14 @@ async function handleQueryType(parentId, type){
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>
@ -435,7 +447,7 @@ function onClickLeft(){
} }
.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;
} }

16
pages/application-details.vue

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

@ -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);
}); });

Loading…
Cancel
Save