engineering_admin/src/views/oa_arrival/edit.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="到账状态" label-align="left" align="left">
                        {{ formData.is_cash_text }}
                    </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.enter_amount }}
                    </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 }">
                            <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 @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 @click="close">取消</el-button>
                        <el-button type="primary" @click="submit">确定</el-button>
                    </span>
                </div>
            </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>