212 lines
6.9 KiB
Vue
212 lines
6.9 KiB
Vue
<template>
|
|
<el-dialog title="收费明细" v-model="visible" width="900px" :close-on-click-modal="false" draggable>
|
|
<div class="fee-header">
|
|
<span>学号: {{ serialNumber }}</span>
|
|
<span style="margin-left: 20px">姓名: {{ realName }}</span>
|
|
<el-button type="primary" size="small" style="margin-left: 20px" @click="handleBindProject">绑定收费项目</el-button>
|
|
</div>
|
|
<el-table :data="feeList" v-loading="loading" stripe border style="margin-top: 15px">
|
|
<el-table-column type="index" label="序号" width="60" align="center" />
|
|
<el-table-column prop="projectCode" label="项目代码" width="120" align="center" />
|
|
<el-table-column prop="money" label="应缴金额" width="120" align="right">
|
|
<template #default="{ row }">
|
|
{{ row.money ? Number(row.money).toFixed(2) : '0.00' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="status" label="状态" width="100" align="center">
|
|
<template #default="{ row }">
|
|
<el-tag v-if="row.status === '0'" type="info">未缴费</el-tag>
|
|
<el-tag v-else-if="row.status === '10'" type="success">已缴费</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="payType" label="缴费方式" width="120" align="center">
|
|
<template #default="{ row }">
|
|
<span v-if="row.payType === '0'">-</span>
|
|
<span v-else>{{ row.payType }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="paiedMoney" label="实缴金额" width="120" align="right">
|
|
<template #default="{ row }">
|
|
{{ row.paiedMoney ? Number(row.paiedMoney).toFixed(2) : '-' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="payTime" label="缴费时间" width="180" align="center" />
|
|
<el-table-column label="操作" align="center" fixed="right" width="180">
|
|
<template #default="scope">
|
|
<template v-if="scope.row.status === '0'">
|
|
<el-button link type="primary" size="small" @click="handlePay(scope.row)">缴费</el-button>
|
|
<el-button link type="danger" size="small" @click="handleDeleteFee(scope.row)">删除</el-button>
|
|
</template>
|
|
<template v-else>
|
|
<el-button link type="warning" size="small" @click="handleCancelPay(scope.row)">取消缴费</el-button>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="visible = false">关 闭</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<el-dialog title="绑定收费项目" v-model="bindDialogVisible" width="500px">
|
|
<el-form label-width="100px">
|
|
<el-form-item label="选择项目">
|
|
<el-select v-model="selectedProjectCodes" multiple placeholder="请选择收费项目" style="width: 100%">
|
|
<el-option v-for="item in projectList" :key="item.projectCode" :label="item.projectName" :value="item.projectCode" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="bindDialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="submitBind">确 定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<el-dialog title="缴费登记" v-model="payDialogVisible" width="400px">
|
|
<el-form label-width="100px">
|
|
<el-form-item label="缴费金额">
|
|
<el-input-number v-model="payForm.money" :min="0" :precision="2" style="width: 100%" />
|
|
</el-form-item>
|
|
<el-form-item label="缴费方式">
|
|
<el-select v-model="payForm.payType" placeholder="请选择缴费方式" style="width: 100%">
|
|
<el-option label="现金" value="20" />
|
|
<el-option label="银行转账" value="30" />
|
|
<el-option label="微信" value="40" />
|
|
<el-option label="支付宝" value="21" />
|
|
<el-option label="其他" value="22" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="payDialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="submitPay">确 定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="FinanceRecruitStuFeeDetail">
|
|
import { ref, reactive } from 'vue';
|
|
import { getBySerialNumber, bindProject, payRegister, cancelPay, delObj } from '/@/api/finance/recruitStuProject';
|
|
import { getList } from '/@/api/finance/recruitProject';
|
|
import { useMessage, useMessageBox } from '/@/hooks/message';
|
|
|
|
const visible = ref(false);
|
|
const loading = ref(false);
|
|
const serialNumber = ref('');
|
|
const realName = ref('');
|
|
const feeList = ref<any[]>([]);
|
|
|
|
const bindDialogVisible = ref(false);
|
|
const projectList = ref<any[]>([]);
|
|
const selectedProjectCodes = ref<string[]>([]);
|
|
|
|
const payDialogVisible = ref(false);
|
|
const payForm = reactive({
|
|
id: '',
|
|
money: 0,
|
|
payType: '',
|
|
});
|
|
|
|
const openDialog = async (stuSerialNumber: string, stuRealName: string) => {
|
|
serialNumber.value = stuSerialNumber;
|
|
realName.value = stuRealName;
|
|
visible.value = true;
|
|
await loadFeeList();
|
|
};
|
|
|
|
const loadFeeList = async () => {
|
|
loading.value = true;
|
|
try {
|
|
const res = await getBySerialNumber(serialNumber.value);
|
|
feeList.value = res?.data || [];
|
|
} catch (err: any) {
|
|
useMessage().error(err.msg || '获取收费明细失败');
|
|
feeList.value = [];
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const handleBindProject = async () => {
|
|
try {
|
|
const res = await getList({});
|
|
projectList.value = res?.data || [];
|
|
selectedProjectCodes.value = [];
|
|
bindDialogVisible.value = true;
|
|
} catch (err: any) {
|
|
useMessage().error(err.msg || '获取收费项目失败');
|
|
}
|
|
};
|
|
|
|
const submitBind = async () => {
|
|
if (selectedProjectCodes.value.length === 0) {
|
|
useMessage().warning('请选择收费项目');
|
|
return;
|
|
}
|
|
try {
|
|
await bindProject(serialNumber.value, selectedProjectCodes.value);
|
|
useMessage().success('绑定成功');
|
|
bindDialogVisible.value = false;
|
|
await loadFeeList();
|
|
} catch (err: any) {
|
|
useMessage().error(err.msg || '绑定失败');
|
|
}
|
|
};
|
|
|
|
const handlePay = (row: any) => {
|
|
payForm.id = row.id;
|
|
payForm.money = Number(row.money) || 0;
|
|
payForm.payType = '';
|
|
payDialogVisible.value = true;
|
|
};
|
|
|
|
const submitPay = async () => {
|
|
if (!payForm.payType) {
|
|
useMessage().warning('请选择缴费方式');
|
|
return;
|
|
}
|
|
try {
|
|
await payRegister(payForm.id, payForm.payType);
|
|
useMessage().success('缴费成功');
|
|
payDialogVisible.value = false;
|
|
await loadFeeList();
|
|
} catch (err: any) {
|
|
useMessage().error(err.msg || '缴费失败');
|
|
}
|
|
};
|
|
|
|
const handleCancelPay = async (row: any) => {
|
|
try {
|
|
await useMessageBox().confirm('确定要取消该缴费记录吗？', '提示', { type: 'warning' });
|
|
await cancelPay(row.id);
|
|
useMessage().success('取消成功');
|
|
await loadFeeList();
|
|
} catch {
|
|
// 用户取消操作
|
|
}
|
|
};
|
|
|
|
const handleDeleteFee = async (row: any) => {
|
|
try {
|
|
await useMessageBox().confirm('确定要删除该收费项目吗？', '提示', { type: 'warning' });
|
|
await delObj(row.id);
|
|
useMessage().success('删除成功');
|
|
await loadFeeList();
|
|
} catch {
|
|
// 用户取消操作
|
|
}
|
|
};
|
|
|
|
defineExpose({ openDialog });
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fee-header {
|
|
padding: 10px 0;
|
|
font-size: 14px;
|
|
color: #606266;
|
|
}
|
|
</style>
|