manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/order/component/rebate.vue

<template>
    <div class="operationRecord pl-4 pr-4 pt-3 pb-3 h-full flex flex-col">
        <div class="flex justify-between">
            <div class="title">回款</div>
            <div class="flex" v-permission="['orderEdit']">
                <el-button type="primary" @click="editRebate(false)">新增回款</el-button>
            </div>
        </div>
        <div class="flex-1 overflow-auto pt-5">
            <el-table :data="operationRecordtable" border style="width: 100%;height: 278px;">
                <el-table-column prop="createTime" label="回款时间" width="190" />
                <el-table-column prop="creatorName" label="操作人" width="120">
                    <template #default="scope">
                        <TextTranslation translationTypes="userName" :translationValue="scope.row.creatorName"></TextTranslation>
                    </template>
                </el-table-column>
                <el-table-column prop="money" label="回款金额" width="120" />
                <el-table-column prop="unReceivedPayment" label="未回款金额" width="120" />
                <el-table-column :label="'操作'" :width="'120px'" fixed="right">
                    <template #default="scope">
                        <el-button link type="primary" size="large" @click="editRebate(scope.row)">编辑</el-button>
                        <el-button link type="danger" size="large" @click="deteItem(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 弹窗 -->
        <el-dialog v-model="allVisible.rebateVisible" width="680" :show-close="false" top="10vh">
            <template #header="{ close, titleId, titleClass }">
                <div class="flex justify-between items-center border-b pb-3 dialog-header">
                    <h4 :id="titleId">{{ allText.rebateText }}</h4>
                    <div class="flex">
                        <el-button @click="allVisible.rebateVisible = false">取消</el-button>
                        <el-button type="primary" @click="saveRebate" :loading="allLoading.rebateLoading">保存</el-button>
                    </div>
                </div>
            </template>
            <div class="p-8">
                <div class="flex flex-row items-center">
                    <div>回款金额：</div>
                    <div class="flex-1">
                        <el-input v-model.trim="mony" v-enterNumber placeholder="请输入" clearable class="w-full"></el-input>
                    </div>
                    <div class="ml-4">元</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { post } from '@/utils/request';
import { ref, reactive, onMounted, onUnmounted, inject, watchEffect } from 'vue'
import { URL_ADDREBATE, URL_DETELEITEMS, URL_EDITEBATE } from '../api';
import { confirmAction } from '@/utils/tools';
import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults';
const globalPopup = inject<GlobalPopup>('globalPopup')
const emits = defineEmits(['refreshData']);
const props = defineProps<{
    data: any,
    information: any
}>()

const allVisible = reactive({
    rebateVisible: false,
})
const allLoading = reactive({
    rebateLoading: false
})
const allText = reactive({
    rebateText: '新增回款'
})

const operationRecordtable = ref([])
const mony = ref('')
const monyItem = ref<any>({})
const info = ref<any>({})
const theRebate = ref<number>(0)

function deteItem(item: any) {
    confirmAction(`确定删除该回款记录吗？`).then(() => {
        post(URL_DETELEITEMS, { paymentId: item.id }).then((_res) => {
            globalPopup?.showSuccess('删除成功')
            emits('refreshData', 'getPaymentCollectionList')
        }).catch((err) => {
            globalPopup?.showError(err.msg || '')
        })
    })
}

function editRebate(item: any) {
    console.log(theRebate.value)
    if (!item) {
        allText.rebateText = '新增回款'
        mony.value = ''
        monyItem.value = {}
    } else {
        theRebate.value = theRebate.value + Number(item.money)
        monyItem.value = item
        mony.value = item.money
        allText.rebateText = '编辑回款'
    }

    allVisible.rebateVisible = true
}

function saveRebate() {
    if (!mony.value || mony.value == '.' || Number(mony.value as string) < 0) {
        globalPopup?.showWarning(Number(mony.value as string) < 0 ? '请不要输入负数' : '请输入金额')
        return
    }
    allLoading.rebateLoading = true
    const { url, formVal } = Object.keys(monyItem.value).length === 0
        ? { url: URL_ADDREBATE, formVal: { orderId: info.value.id, money: mony.value } }
        : { url: URL_EDITEBATE, formVal: { paymentId: monyItem.value.id, money: mony.value } };
    post(url, { ...formVal }).then(() => {
        globalPopup?.showSuccess('操作成功')
        allVisible.rebateVisible = false
        emits('refreshData', 'getPaymentCollectionList')
    }).finally(() => {
        allLoading.rebateLoading = false
    })
}

watchEffect(() => {
    const { data, information } = props
    operationRecordtable.value = data || []
    info.value = information
    theRebate.value = Number(information.unReceivedPayment || 0)
});
// 生命周期钩子
onMounted(() => {
});
</script>
<style scoped lang="scss">
.operationRecord {
    .title {
        font-size: 18px;
        color: #606266
    }
}
</style>