61 lines
1.7 KiB
Vue
61 lines
1.7 KiB
Vue
<template>
|
|
<div class="page-card">
|
|
<h3>Bills</h3>
|
|
<div style="margin-bottom: 12px;">
|
|
<el-select v-model="elderId" placeholder="Select elder" @change="load">
|
|
<el-option v-for="elder in elders" :key="elder.id" :label="elder.name" :value="elder.id" />
|
|
</el-select>
|
|
</div>
|
|
<el-table :data="items" stripe>
|
|
<el-table-column prop="month" label="Month" />
|
|
<el-table-column prop="total" label="Total" />
|
|
<el-table-column prop="status" label="Status" />
|
|
<el-table-column label="Actions" width="160">
|
|
<template slot-scope="scope">
|
|
<el-button size="mini" type="primary" @click="pay(scope.row)" :disabled="scope.row.status === 'PAID'">
|
|
Pay
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { familyElders, familyBills, familyPay } from "../../api";
|
|
|
|
export default {
|
|
data() {
|
|
return { elders: [], elderId: "", items: [] };
|
|
},
|
|
async created() {
|
|
try {
|
|
const res = await familyElders();
|
|
this.elders = res.data.data;
|
|
} catch (e) {
|
|
this.$message.error(e.message || "load failed");
|
|
}
|
|
},
|
|
methods: {
|
|
async load() {
|
|
if (!this.elderId) return;
|
|
try {
|
|
const res = await familyBills(this.elderId);
|
|
this.items = res.data.data;
|
|
} catch (e) {
|
|
this.$message.error(e.message || "load failed");
|
|
}
|
|
},
|
|
async pay(row) {
|
|
try {
|
|
await familyPay(row.id, { method: "ONLINE" });
|
|
this.$message.success("paid");
|
|
this.load();
|
|
} catch (e) {
|
|
this.$message.error(e.message || "pay failed");
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|