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, $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) => {
    if (+ detail.value[index].amount < 0) {
        return detail.value[index].amount = ''
    }
    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>