240 lines
9.5 KiB
Vue
240 lines
9.5 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">
|
||
{{ formData.open_admin_name }}
|
||
</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="到账状45态" label-align="left" align="left">
|
||
{{ formData.is_cash }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="未到账金额(元)" label-align="left" align="left">
|
||
{{ (+formData.amount) - (+formData.enter_amount) }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="已到账金额(元)" label-align="left" align="left">
|
||
{{ formData.is_cash_text }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-table :data="detail" class="mt-4">
|
||
<template #empty>
|
||
暂无更多到账记录，点击 <el-button @click="handAdd">添加</el-button>
|
||
</template>
|
||
<el-table-column label="到账金额">
|
||
<template #default="{ row, $index }">
|
||
<el-input v-model="row.amount" clearable placeholder="请输入报销金额" type="number"
|
||
@change="amountChange($index)" />
|
||
</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 @click="handDel($index)">删除</el-button>
|
||
<el-button type="primary" @click="handAdd">添加选项</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="mt-4 mb-4">
|
||
<span style="float:right">
|
||
<el-button type="primary" @click="submit"
|
||
v-if="bcdzList.includes(formData.is_cash)">保存到账记录</el-button>
|
||
<el-button @click="reset" v-if="czList.includes(formData.is_cash)">重置</el-button>
|
||
<el-button @click="showDialog = true" v-if="sybfist.includes(formData.is_cash)">剩余部分全到账</el-button>
|
||
<el-button @click="showDialog = true" v-if="bqdzList.includes(formData.is_cash)">全部到账</el-button>
|
||
<el-button @click="fdz" v-if="qbfdzList.includes(formData.is_cash)">全部反到账</el-button>
|
||
</span>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-dialog title="选择到账日期" v-model="showDialog" width="550px">
|
||
<el-form-item label="到账日期" prop="invoice_phone">
|
||
<el-date-picker class="flex-1 !flex" v-model="times" clearable type="date" value-format="YYYY-MM-DD"
|
||
placeholder="选择到账日期">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="" prop="invoice_phone">
|
||
<el-button type="primary" @click="allSubmits">确定</el-button>
|
||
<el-button @click="showDialog = false">取消</el-button>
|
||
</el-form-item>
|
||
</el-dialog>
|
||
</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, apiInvlicevFdz } from '@/api/oa_financial'
|
||
import { defineEmits } from "vue"
|
||
const popupRef = shallowRef<InstanceType<typeof Popup>>();
|
||
const emit = defineEmits(["success", "close"]);
|
||
const times = ref('')
|
||
const showDialog = ref(false)
|
||
|
||
|
||
|
||
const bcdzList = reactive([0, 1])
|
||
const czList = reactive([0, 1])
|
||
const sybfist = reactive([1])
|
||
const bqdzList = reactive([0])
|
||
const qbfdzList = reactive([1, 2])
|
||
|
||
// 表单数据
|
||
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 () => {
|
||
if (detail.value.length) {
|
||
await apiInvlicevAdd({ invoice_id: formData.id, detail: detail.value })
|
||
}
|
||
emit("success");
|
||
|
||
}
|
||
const close = () => {
|
||
emit("success");
|
||
}
|
||
const reset = () => {
|
||
detail.value = [{
|
||
"amount": '',
|
||
"enter_time": "",
|
||
"remarks": ""
|
||
}]
|
||
}
|
||
|
||
const allSubmits = async () => {
|
||
let data = { invoice_id: formData.id, detail: [{ amount: formData.amount, enter_time: times.value, remarks: '' }] }
|
||
if (formData.is_cash == 1) {
|
||
detail.value.push({ amount: (+formData.amount) - (+formData.enter_amount), enter_time: times.value, remarks: '' })
|
||
data.detail = detail.value
|
||
}
|
||
await apiInvlicevAdd(
|
||
{
|
||
...data
|
||
}
|
||
)
|
||
emit("success");
|
||
|
||
}
|
||
|
||
const fdz = async () => {
|
||
await apiInvlicevFdz({ invoice_id: formData.id })
|
||
emit("success");
|
||
|
||
}
|
||
|
||
|
||
const amountChange = (index) => {
|
||
detail.value[index].amount = (+detail.value[index].amount).toFixed(2)
|
||
}
|
||
|
||
// 显示
|
||
|
||
defineExpose({
|
||
open,
|
||
setFormData,
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
:deep(.el-step__icon) {
|
||
margin-top: 10px !important;
|
||
}
|
||
</style> |