185 lines
7.4 KiB
Vue
185 lines
7.4 KiB
Vue
<template>
|
|
<div class="detail-popup">
|
|
<popup ref="popupRef" :showFootBtn="false" title="审批详情" :async="true" width="60vw">
|
|
<el-card>
|
|
<template #header>审批内容</template>
|
|
<el-descriptions :column="3" border>
|
|
<el-descriptions-item label="发票金额" label-align="left" align="left">
|
|
{{ formData.amount }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="抬头类型" label-align="left" align="left">
|
|
{{ formData.type_text }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="发票主体" label-align="left" align="left">
|
|
{{ formData.invoice_subject }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="发票类型" label-align="left" align="left">
|
|
{{ formData.invoice_type_text }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="开票抬头" label-align="left" align="left">
|
|
{{ formData.invoice_title }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="电话号码" label-align="left" align="left">
|
|
{{ formData.invoice_phone }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="纳税人识别号" label-align="left" align="left">
|
|
{{ formData.invoice_tax }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="开户银行" label-align="left" align="left">
|
|
{{ formData.invoice_bank }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="银行账号" label-align="left" align="left">
|
|
{{ formData.invoice_account }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="银行营业网点" label-align="left" align="left">
|
|
{{ formData.invoice_banking }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="地址" label-align="left" align="left">
|
|
{{ formData.invoice_address }}
|
|
</el-descriptions-item>
|
|
|
|
<el-descriptions-item label="开票人" label-align="left" align="left">
|
|
{{}}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="未到账金额" label-align="left" align="left">
|
|
{{}}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="已到账金额" label-align="left" align="left">
|
|
{{}}
|
|
</el-descriptions-item>
|
|
|
|
<el-descriptions-item label="备注" label-align="left" align="left">
|
|
{{ formData.remark }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="附件" label-align="left" align="left">
|
|
<annexLink :annex="formData.annex || []"></annexLink>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-card>
|
|
<el-card>
|
|
<template #header> 到账信息 </template>
|
|
<el-descriptions :column="3" border>
|
|
<el-descriptions-item label="到账状态" label-align="left" align="left">
|
|
<!-- {{ formData.invoice_account }} -->
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="未到账金额(元)" label-align="left" align="left">
|
|
<!-- {{ formData.invoice_banking }} -->
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="已到账金额(元)" label-align="left" align="left">
|
|
<!-- {{ formData.invoice_address }} -->
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
<el-table :data="detail" class="mt-4">
|
|
<el-table-column label="到账金额">
|
|
<template #default="{ row }">
|
|
<el-input v-model="row.amount" clearable placeholder="请输入报销金额" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="到账日期">
|
|
<template #default="{ row }">
|
|
<el-date-picker class="flex-1 !flex" v-model="row.enter_time" clearable type="date"
|
|
value-format="YYYY-MM-DD" placeholder="选择到账日期">
|
|
</el-date-picker>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="备注信息">
|
|
<template #default="{ row }">
|
|
<el-input v-model="row.remarks" clearable placeholder="请输入备注信息" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" prop="lead_admin_name">
|
|
<template #default="{ row, $index }">
|
|
<el-button type="primary" @click="handAdd">添加选项</el-button>
|
|
<el-button @click="handDel($index)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-form-item>
|
|
<span style="float:right">
|
|
<el-button type="primary" @click="submit">确定</el-button>
|
|
<el-button @click="close">取消</el-button>
|
|
</span>
|
|
</el-form-item>
|
|
</el-card>
|
|
</popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="customdetail">
|
|
import annexLink from "./../../components/annexLink/index.vue";
|
|
import Popup from "@/components/popup/index.vue";
|
|
import { apiInvliceLists, apiInvlicevAdd } from '@/api/oa_financial'
|
|
import { defineEmits } from "vue"
|
|
const popupRef = shallowRef<InstanceType<typeof Popup>>();
|
|
const emit = defineEmits(["success", "close"]);
|
|
|
|
|
|
// 表单数据
|
|
const formData = reactive({
|
|
id: 0,
|
|
extends: {},
|
|
});
|
|
|
|
// 获取详情
|
|
const setFormData = async (data: Record<any, any>) => {
|
|
for (const key in data) {
|
|
if (data[key] != null && data[key] != undefined) {
|
|
//@ts-ignore
|
|
formData[key] = data[key];
|
|
}
|
|
}
|
|
getLists()
|
|
};
|
|
|
|
//打开弹窗
|
|
const open = () => {
|
|
popupRef.value?.open();
|
|
};
|
|
|
|
|
|
const detail = ref([
|
|
{
|
|
"amount": '',
|
|
"enter_time": "",
|
|
"remarks": ""
|
|
}
|
|
])
|
|
|
|
const getLists = async () => {
|
|
let res = await await apiInvliceLists({ invoice_id: formData.id })
|
|
detail.value = res || [{}]
|
|
}
|
|
// 关闭回调
|
|
const handAdd = () => {
|
|
detail.value.push({
|
|
"amount": '',
|
|
"enter_time": "",
|
|
"remarks": ""
|
|
})
|
|
}
|
|
|
|
const handDel = (i) => {
|
|
detail.value.splice(i, 1)
|
|
}
|
|
const submit = async () => {
|
|
await apiInvlicevAdd({ invoice_id: formData.id, detail: detail.value })
|
|
emit("success");
|
|
|
|
}
|
|
const close = () => {
|
|
emit("success");
|
|
}
|
|
|
|
|
|
// 显示
|
|
|
|
defineExpose({
|
|
open,
|
|
setFormData,
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
:deep(.el-step__icon) {
|
|
margin-top: 10px !important;
|
|
}
|
|
</style> |