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

发起申请

apply
song 4 years ago
parent
baede98c02
commit
7bc5def9b3
3 changed files with 210 additions and 86 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 268
      pages/Initiate-application.vue
  2. 16
      pages/application-details.vue
  3. 6
      plugins/vant.js

268
pages/Initiate-application.vue
View File

@ -27,10 +27,11 @@
<!-- 上传票据成功后显示发票信息 -->
<div v-show="data.isSuccess">
<van-field
v-for="item in data.billList"
v-for="item in data.invoiceInfo"
required
v-model="item.values"
v-model="item.value"
:label="item.name"
@change="cahngeInvoiceList($event, item)"
input-align="right"
/>
</div>
@ -40,7 +41,7 @@
<div v-show="!data.isInvoice">
<van-field
required
v-model="data.applyMoney"
v-model="data.money"
label="申请金额"
placeholder="输入申请金额"
input-align="right"
@ -50,7 +51,7 @@
<div class="text-gray-500 py-4 pl-5">备注</div>
<van-cell-group>
<van-field
v-model="data.message"
v-model="data.remark"
rows="2"
autosize
type="textarea"
@ -87,7 +88,7 @@
<div class="text-gray-500 p-4 font-semibold">其他信息</div>
<!-- 申请类型 -->
<!-- 普通票据申请 -->
<div v-show="data.isInvoice">
<div>
<van-field
v-model="data.applyType"
is-link
@ -99,13 +100,13 @@
input-align="right"
/>
<van-popup v-model:show="data.showType" round position="bottom">
<van-cascader
:options="data.applyTypeOptions"
@close="data.showType = false"
@finish="finishApplyType"
active-color="#1989fa"
class="p-0"
<van-picker
title="申请类型"
v-if="data.applyTypeOptions && data.applyTypeOptions.length"
:columns="data.applyTypeOptions"
@confirm="finishApplyType"
/>
<van-loading v-else type="spinner" class="text-center my-20" />
</van-popup>
<!-- 所属项目 -->
<van-field
@ -127,6 +128,7 @@
<!-- 所属任务的 -->
<van-field
v-model="data.taskName"
v-show="data.isInvoice"
is-link
readonly
label="所属任务"
@ -148,77 +150,60 @@
readonly
label="类目"
placeholder="请选择类目"
required
@click="data.showCategory = true"
input-align="right"
/>
<van-popup v-model:show="data.showCategory" round position="bottom">
<van-cascader
:options="data.applyCategoryOptions"
@close="data.showCategory = false"
@finish="finishApplyCategory"
active-color="#1989fa"
class="p-0"
<van-picker
title="请选择类目"
v-if="data.applyCategoryOptions && data.applyCategoryOptions.length"
:columns="data.applyCategoryOptions"
@confirm="finishApplyCategory"
/>
<van-loading v-else type="spinner" class="text-center my-20" />
</van-popup>
<!-- 名目选择 -->
<van-field
v-model="data.applyName"
v-show="data.isInvoice"
is-link
readonly
label="名目"
placeholder="请选择名目"
required
@click="data.showName = true"
input-align="right"
/>
<van-popup v-model:show="data.showName" round position="bottom">
<van-cascader
:options="data.applyNameOptions"
@close="data.showName = false"
@finish="finishApplyName"
active-color="#1989fa"
class="p-0"
<van-picker
title="请选择名目"
v-if="data.applyNameOptions && data.applyNameOptions.length"
:columns="data.applyNameOptions"
@confirm="finishApplyName"
/>
<van-loading v-else type="spinner" class="text-center my-20" />
</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 class="bg-white mt-3">
<div class="text-gray-500 p-4 font-semibold">提交人信息</div>
<van-field
required
v-model="data.name"
v-model="data.submitName"
label="姓名"
placeholder="输入姓名"
placeholder="请输入姓名"
input-align="right"
/>
<!-- 选择所属部门 -->
<van-field
v-model="data.applyDepartment"
is-link
readonly
label="所属部门"
placeholder="请选择所属部门"
@click="data.showDepartment = true"
required
v-model="data.department"
label="所属部门"
placeholder="请输入所属部门"
input-align="right"
/>
<van-popup v-model:show="data.showDepartment" round position="bottom">
<van-cascader
:options="data.applyDepartmentOptions"
@close="data.showDepartment = false"
@finish="finishApplyDepartment"
active-color="#1989fa"
class="p-0"
/>
</van-popup>
</div>
<!-- 历史申请 -->
<div class="bg-white mt-3 p-4">
@ -230,44 +215,53 @@
</div>
<!-- 底部立即提交按钮 -->
<div class="mx-6 mt-10">
<van-button type="primary" size="small" block>立即提交</van-button>
<van-button type="primary" size="small" block @click="submit">立即提交</van-button>
</div>
</div>
</template>
<script setup>
import {ref, reactive} from 'vue'
// import useApplication from 'hooks/useApplication';
import { queryChecker } from 'apis/member'
import { queryType } from 'apis/finance'
import { queryType, apply } from 'apis/finance'
import { Toast } from 'vant';
// const getApplication = useApplication();
const projectName = useProjectName()
const taskName = useTaskName()
const projectId = useProjectId()
const taskDetailId = useTaskId()
const data = reactive({
isInvoice: true,
message: '',
billList: [
remark: '',
invoiceList: [],
invoiceInfo: [
{
name: '发票代码',
values:0
value:0,
label: 'invoiceCode'
},
{
name: '发票号码',
values:1
value:0,
label: 'invoiceNumber'
},
{
name: '合计金额(元)',
values:2
value:0,
label: 'money'
},
{
name: '税额(元)',
values:3
value:0,
label: 'taxMoney'
},
{
name: '开票日期',
values:4
}
value:0,
label: 'invoiceTime'
},
],
reviewerList: [], // 审核人数组
checkerList: [], // 默认的审核人
@ -286,7 +280,9 @@ const data = reactive({
},
], // 申请的记录
isSuccess: false, // 上传票据是否成功
name: '', // 提交人的姓名
money: '', // 金额
submitName: '', // 提交人的姓名
department: '', // 选择的部门的值
pplyMoney: '5000', // 手动输入时输入的申请的金额
titleHidden: true, // 上传提示语隐藏
currentPage: 0, // 当前显示页数
@ -294,41 +290,53 @@ const data = reactive({
personalCategory: '用款',
// 其他信息的多个选择按钮
showType: false, // 申请类型的
applyProject: '', // 选择的类型的值
applyTypes: [],
applyTypeOptions: [],
applyType: '', // 选择的类型的值
typeId: '',
showCategory: false, // 所属的类目
applyCategory: '', // 选择的类目的值
applyCategories: [],
applyCategoryOptions: [],
applyCategory: '', // 选择的类目的值
categoryId: '',
showName: false, // 所属的名目
applyName: '', // 选择的名目的值
applyNames: [],
applyNameOptions: [],
showDepartment: false, // 所属的部门
applyDepartment: '', // 选择的部门的值
applyDepartmentOptions: [],
applyName: '', // 选择的名目的值
rowId: '',
})
// 发票信息
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;
const type = data.applyTypes.find((option) => option.name === e);
data.typeId = type.id;
// 类目
handleQueryType(data.typeId, 1)
}
// 所属的类目
function finishApplyCategory({ selectedOptions }){
showCategory.value = false;
applyCategory.value = selectedOptions.map((option) => option.text);
function finishApplyCategory(e){
data.showCategory = false;
data.applyCategory = e;
const category = data.applyCategories.find((option) => option.name === e);
data.categoryId = category.id;
// 名目
handleQueryType(data.categoryId, 2)
}
// 所属的名目
function finishApplyName({ selectedOptions }){
showName.value = false;
applyName.value = selectedOptions.map((option) => option.text);
}
// 所属部门
function finishApplyDepartment({ selectedOptions }){
showDepartment.value = false;
applyDepartment.value = selectedOptions.map((option) => option.text);
function finishApplyName(e){
data.showName = false;
data.applyName = e;
const row = data.applyNames.find((option) => option.name === e);
data.rowId = row.id;
}
// 检查被选中的审核人的状态
@ -345,8 +353,8 @@ function handleSelectChecker(id){
function uploadBill(){
//TODO:调取接口识别票据
setTimeout(() =>{
titleHidden.value = false
isSuccess.value = true
data.titleHidden = false
data.isSuccess = true
},1000)
}
@ -374,6 +382,7 @@ async function handleQueryChecker(){
* @param { Number } type 类型：0申请类型 1类目 2名目
*/
async function handleQueryType(parentId, type){
console.log('parentId: ', parentId);
try {
const params = {
param:{
@ -382,9 +391,24 @@ async function handleQueryType(parentId, type){
}
}
const res = await queryType(params)
if(type === 0){
data.applyTypes = res
res.forEach((item) => {
data.applyTypeOptions.push(item.name)
})
}
if(type === 1){
data.applyCategories = res
res.forEach((item) => {
data.applyCategoryOptions.push(item.name)
})
}
if(type === 2){
data.applyNames = res
res.forEach((item) => {
data.applyNameOptions.push(item.name)
})
}
} catch (error) {
console.error('error: ', error);
}
@ -401,6 +425,86 @@ function onClickLeft(){
console.log(1)
}
/**
* 发起申请
* @param { Object } params
*/
async function submit(params) {
try {
if(!verification()) return
const params = {}
params.param = setParams()
await apply(params)
Toast.success('申请成功');
} catch (error) {
console.log('error: ', error);
Toast.fail(error || '申请失败');
}
}
// 验证必填
function verification(){
const { isSuccess, categoryId, checkerList, department, money, rowId, submitName, typeId, isInvoice } = data
if(!isSuccess && isInvoice){
Toast.fail('请上传票据凭证');
return
}
if(!money && !isInvoice){
Toast.fail('请输入金额');
return
}
if(!checkerList || !checkerList.length){
Toast.fail('请选择审核人');
return
}
if(!typeId){
Toast.fail('请选择申请类型');
return
}
if(!categoryId){
Toast.fail('请选择类目');
return
}
if(!rowId && isInvoice){
Toast.fail('请选择名目');
return
}
if(!submitName){
Toast.fail('请输入提交人姓名');
return
}
if(!department){
Toast.fail('请输入所属部门');
return
}
return true
}
// 设置参数
function setParams(){
const { remark, money, categoryId, checkerList, department, rowId, submitName, typeId, invoiceInfo, isInvoice } = data
let param = {}
let invoiceList = []
let list = {url: 'https://cdn.nlark.com/yuque/0/2022/png/413990/1642482454748-931b2e93-8964-492b-b06b-b8db42733c02.png'}
let totleMoney = 0
invoiceInfo.forEach(item => {
list[item.label] = item.value
if(item.label === 'money'){
totleMoney += item.value - 0
}
})
invoiceList.push(list)
if(isInvoice){
param = {
money: totleMoney,invoiceList, remark, checkerList, typeId, projectId: projectId.value,
taskDetailId: taskDetailId.value, categoryId, rowId, submitName, department
}
}else{
param = {
money, remark, checkerList, typeId, projectId: projectId.value, categoryId, submitName, department
}
}
return param
}
</script>
<style lang="less" scoped>

16
pages/application-details.vue
View File

@ -64,6 +64,7 @@
</template>
<script setup>
import { getApplyDetail } from 'apis/finance'
// 审核人数据
const checkerList = ref([
{
@ -156,6 +157,21 @@ const submitter = ref([
function onClickLeft(){
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>
<style lang="less" scoped>

6
plugins/vant.js
View File

@ -22,7 +22,9 @@ import {
Circle,
Empty,
Popover,
Dialog
Dialog,
Picker,
Loading
} from 'vant';
import { defineNuxtPlugin } from '#app';
@ -50,4 +52,6 @@ export default defineNuxtPlugin(nuxtApp => {
.use(Empty)
.use(Popover)
.use(Dialog)
.use(Picker)
.use(Loading)
});

Write Preview
Loading…
Cancel
Save