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.
269 lines
7.5 KiB
269 lines
7.5 KiB
<template>
|
|
<div>
|
|
<div
|
|
title="财务审批详情"
|
|
left-arrow
|
|
@click="router.go(-1)"
|
|
></div>
|
|
|
|
<!-- 发票信息 -->
|
|
<div class="bg-white px-3" v-if="isInvoice">
|
|
<div class="text-gray-500 font-semibold px-1 py-3">发票信息</div>
|
|
<div v-for="(item,invoiceIndex) in invoiceList" :key="invoiceIndex">
|
|
<div class="flex py-2 px-4 text-gray-400 text-base justify-between">
|
|
<div>发票代码</div>
|
|
<div>{{item.invoiceCode}}</div>
|
|
</div>
|
|
<div class="flex py-2 px-4 text-gray-400 text-base justify-between">
|
|
<div>发票号码</div>
|
|
<div>{{item.invoiceNumber}}</div>
|
|
</div>
|
|
<div class="flex py-2 px-4 text-gray-400 text-base justify-between">
|
|
<div>合计金额(元)</div>
|
|
<div>{{ (+item.money / 100).toFixed(2) }}</div>
|
|
</div>
|
|
<div class="flex py-2 px-4 text-gray-400 text-base justify-between">
|
|
<div>税额(元)</div>
|
|
<div>{{ (+item.taxMoney / 100).toFixed(2) }}</div>
|
|
</div>
|
|
<div class="flex py-2 px-4 text-gray-400 text-base justify-between">
|
|
<div>开票日期</div>
|
|
<div>{{dayjs(item.invoiceTime - 0).format('YYYY年MM月DD日')}}</div>
|
|
</div>
|
|
<div class="flex py-2 px-4 text-gray-400 text-base justify-between">
|
|
<div>备注</div>
|
|
<div>{{item.remark}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 金额信息 -->
|
|
<div class="bg-white px-3" v-else>
|
|
<div class="text-gray-500 font-semibold px-1 py-3">发票信息</div>
|
|
<div v-for="(item,moneyIndex) in moneyInfo" :key="moneyIndex" class="flex py-2 px-4 text-gray-400 text-base justify-between">
|
|
<div>{{item.name}}</div>
|
|
<div>{{item.value}}</div>
|
|
</div>
|
|
</div>
|
|
<!-- 其他信息 -->
|
|
<div class="bg-white px-3">
|
|
<div class="text-gray-500 font-semibold px-1 py-3 mt-5">其他信息</div>
|
|
<div v-for="(item,otherIndex) in otherData" :key="otherIndex" class="flex py-2 px-4 text-gray-400 text-base justify-between">
|
|
<div>{{item.name}}</div>
|
|
<div>{{item.value}}</div>
|
|
</div>
|
|
</div>
|
|
<!-- 提交人信息 -->
|
|
<div class="bg-white px-3 mb-5">
|
|
<div class="text-gray-500 font-semibold px-1 py-3 mt-5">提交人信息</div>
|
|
<div v-for="(item, index) in submitter" :key="index" class="flex py-2 px-4 text-gray-400 text-base justify-between">
|
|
<div>{{item.name}}</div>
|
|
<div>{{item.value}}</div>
|
|
</div>
|
|
</div>
|
|
<!-- 审核人信息 -->
|
|
<div class="bg-white px-3 mb-5">
|
|
<div class="text-gray-500 font-semibold px-1 py-3">审核结果</div>
|
|
<div v-for="(item, checkerIndex) in checkerList" :key="checkerIndex" class="flex py-3 px-4 text-gray-400 text-base justify-between">
|
|
<div>
|
|
<div>{{item.checkerName}}</div>
|
|
<div class="text-sm pt-1">{{item.remark}}</div>
|
|
<div class="text-sm pt-1">{{item.time}}</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div v-if="item.checkStatus == '1' || item.checkStatus == '2'" :class="item.checkStatus == '1' ? 'text-green-500' : item.checkStatus == '2' ? 'text-red-500' : ''">
|
|
{{item.checkStatus == '1' ? '已通过' : item.checkStatus == '2' ? '已驳回' : '待审批'}}
|
|
</div>
|
|
<div class="text-center" v-else>
|
|
<el-button type="success" round size="mini" class="button ml-5" @click="showRemark(item.financeCheckId, 1)">通过</el-button>
|
|
<el-button type="danger" round size="mini" class="button" @click="showRemark(item.financeCheckId, 2)">驳回</el-button>
|
|
</div>
|
|
<div v-if="item.checkStatus == '1' || item.checkStatus == '2'" class="mt-1">
|
|
<el-circle
|
|
v-model:current-rate="currentRate"
|
|
:rate="100"
|
|
:speed="100"
|
|
:text="100"
|
|
class="w-12"
|
|
color="#ff6700"
|
|
:stroke-width="100"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<el-dialog v-model:show="data.show" title="备注" show-cancel-button @confirm="handleAudit">
|
|
<el-field :border="data.border" v-model="data.remark" type="textarea" class="remark" placeholder="请输入备注" />
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import dayjs from "dayjs";
|
|
import { ref, computed } from 'vue';
|
|
import { getApplyDetail, audit } from 'apis/finance';
|
|
import { useRouter } from 'vue-router';
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
const router = useRouter();
|
|
|
|
const data = reactive({
|
|
show: false,
|
|
remark: '',
|
|
auditInfo: {},
|
|
border: true
|
|
})
|
|
// 审核人数据
|
|
const currentRate = ref(0);
|
|
const text = computed(() => currentRate.value.toFixed(0));
|
|
const isInvoice = ref(false)
|
|
const checkerList = ref([])
|
|
// 发票信息数据
|
|
const invoiceList = ref([])
|
|
// 没有发票信息得数据
|
|
const moneyInfo = ref([
|
|
{
|
|
name: "申请金额",
|
|
value: "",
|
|
label: "money",
|
|
},
|
|
{
|
|
name: "备注",
|
|
value: "",
|
|
label: "remark",
|
|
},
|
|
])
|
|
// 其他信息数据
|
|
const otherData = ref([
|
|
{
|
|
name: "申请类型",
|
|
value: "",
|
|
label: "typeName",
|
|
},
|
|
{
|
|
name: "所属项目",
|
|
value: "",
|
|
label: "projectName",
|
|
},
|
|
{
|
|
name: "所属任务",
|
|
value: "",
|
|
label: "taskDetailName",
|
|
},
|
|
{
|
|
name: "类目",
|
|
value: "",
|
|
label: "categoryName",
|
|
},
|
|
{
|
|
name: "名目",
|
|
value: "",
|
|
label: "rowName",
|
|
},
|
|
])
|
|
// 提交人数据
|
|
const submitter = ref([
|
|
{
|
|
name:'姓名',
|
|
value:'',
|
|
label: "submitName",
|
|
},
|
|
{
|
|
name:'部门',
|
|
value:'软件部',
|
|
label: "department",
|
|
},
|
|
{
|
|
name:'提交时间',
|
|
value:'',
|
|
label: "applyTime",
|
|
},
|
|
])
|
|
|
|
/**
|
|
* 查询申请详情
|
|
* @param { Number } applyId 申请记录id
|
|
*/
|
|
async function handleApplyDetail(){
|
|
try {
|
|
const routeValue = router.currentRoute.value;
|
|
const applyId = routeValue.query.applyId;
|
|
const params = {param : { applyId }}
|
|
const res = await getApplyDetail(params)
|
|
// 检查人
|
|
checkerList.value = res.checkerList
|
|
// 发票信息
|
|
isInvoice.value = res.invoiceList && res.invoiceList.length ? true : false;
|
|
invoiceList.value = res.invoiceList
|
|
for(let key in res){
|
|
moneyInfo.value.forEach(item => {
|
|
if(item.label === key){
|
|
item.value = res[key]
|
|
}
|
|
})
|
|
}
|
|
// 其他信息
|
|
for(let key in res){
|
|
otherData.value.forEach(item => {
|
|
if(item.label === key){
|
|
item.value = res[key]
|
|
}
|
|
})
|
|
}
|
|
// 提交人信息
|
|
for(let key in res){
|
|
submitter.value.forEach(item => {
|
|
if(item.label === key){
|
|
item.value = res[key]
|
|
}
|
|
})
|
|
}
|
|
} catch (error) {
|
|
console.error('error: ', error);
|
|
}
|
|
}
|
|
|
|
handleApplyDetail()
|
|
|
|
// 填写备注
|
|
function showRemark(financeCheckId, checkStatus){
|
|
data.show = true
|
|
data.auditInfo = { financeCheckId, checkStatus }
|
|
}
|
|
|
|
/**
|
|
* 审批
|
|
* @param { Number } checkStatus 审核状态 1已通过 2驳回
|
|
* @param { String } financeCheckId 审核id
|
|
* @param { String } remark 备注
|
|
*/
|
|
async function handleAudit(financeCheckId, checkStatus){
|
|
try {
|
|
const { auditInfo, remark } = data
|
|
const { financeCheckId, checkStatus } = data.auditInfo
|
|
const params = {
|
|
param:{
|
|
financeCheckId,
|
|
checkStatus,
|
|
remark: data.remark
|
|
}
|
|
}
|
|
await audit(params)
|
|
ElMessage.success('审批成功')
|
|
handleFinanceOfProject()
|
|
data.remark = ''
|
|
} catch (error) {
|
|
console.error('error: ', error);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.el-circle{
|
|
width: 2.5rem !important;
|
|
height: 2.5rem !important;
|
|
}
|
|
.button{
|
|
padding: 0 0.75rem;
|
|
}
|
|
</style>
|
|
|