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. 912
      pages/Initiate-application.vue
  2. 16
      pages/application-details.vue
  3. 112
      plugins/vant.js

912
pages/Initiate-application.vue
View File

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

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>

112
plugins/vant.js
View File

@ -1,55 +1,57 @@
// 目前在 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,
Picker, Picker,
} from 'vant'; Loading,
} 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(Picker); .use(Dialog)
}); .use(Picker)
.use(Loading);
});

Write Preview
Loading…
Cancel
Save