<template>
|
<div class="app-container">
|
|
|
<!-- 查询条件 -->
|
<div class="search_form">
|
<div style="flex: 1; padding-right: 20px;">
|
<el-row :gutter="16">
|
<el-col :span="6" style="display: flex; align-items: center;">
|
<span class="search_title" style="white-space: nowrap;">加油卡号：</span>
|
<el-input v-model="queryParams.cardNumber" placeholder="请输入加油卡号" clearable style="flex: 1;" @keyup.enter.native="handleQuery" />
|
</el-col>
|
<el-col :span="6" style="display: flex; align-items: center;">
|
<span class="search_title" style="white-space: nowrap;">所属部门：</span>
|
<el-tree-select v-model="queryParams.deptId" :data="deptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择部门" check-strictly clearable filterable style="flex: 1;" />
|
</el-col>
|
<el-col :span="6" style="display: flex; align-items: center;">
|
<el-button type="primary" @click="handleQuery">搜索</el-button>
|
<el-button @click="resetQuery">重置</el-button>
|
</el-col>
|
</el-row>
|
</div>
|
<div>
|
<el-button type="primary" icon="Plus" @click="handleAdd">新增加油卡</el-button>
|
</div>
|
</div>
|
<!-- 表格 -->
|
<div class="table_list">
|
<el-table
|
v-loading="loading"
|
:data="tableData"
|
border
|
style="width: 100%"
|
height="calc(100vh - 22em)"
|
:header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
|
>
|
<el-table-column type="index" label="序号" width="60" align="center" />
|
<el-table-column prop="cardNumber" label="加油卡号" min-width="150" />
|
<el-table-column prop="deptName" label="所属部门" min-width="150" show-overflow-tooltip />
|
<el-table-column prop="issuer" label="发卡单位" min-width="120" />
|
<el-table-column prop="initialBalance" label="期初余额" min-width="100" align="right" />
|
<el-table-column prop="currentBalance" label="当前余额" min-width="100" align="right" />
|
<el-table-column prop="status" label="状态" min-width="100" align="center">
|
<template #default="scope">
|
<el-tag :type="scope.row.status === 'ACTIVE' ? 'success' : 'danger'">
|
{{ scope.row.status === 'ACTIVE' ? '正常' : '注销' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip />
|
<el-table-column label="操作" fixed="right" width="200" align="center">
|
<template #default="scope">
|
<el-button type="success" link size="small" @click="handleRecharge(scope.row)">充值管理</el-button>
|
<el-button type="primary" link size="small" @click="handleUpdate(scope.row)">编辑</el-button>
|
<el-button v-if="scope.row.status !== 'CANCELLED'" type="warning" link size="small" @click="handleCancel(scope.row)">注销</el-button>
|
<el-button type="danger" link size="small" @click="handleDelete(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页 -->
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
v-model:page="queryParams.current"
|
v-model:limit="queryParams.size"
|
@pagination="getList"
|
/>
|
</div>
|
<!-- 新增/编辑弹窗 -->
|
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
|
<el-form-item label="加油卡号" prop="cardNumber">
|
<el-input v-model="form.cardNumber" placeholder="请输入加油卡号" />
|
</el-form-item>
|
<el-form-item label="所属部门" prop="deptId">
|
<el-tree-select
|
v-model="form.deptId"
|
:data="deptOptions"
|
:props="{ value: 'id', label: 'label', children: 'children' }"
|
value-key="id"
|
placeholder="请选择部门"
|
check-strictly
|
clearable
|
filterable
|
style="width: 100%"
|
/>
|
</el-form-item>
|
<el-form-item label="发卡单位" prop="issuer">
|
<el-input v-model="form.issuer" placeholder="请输入发卡单位" />
|
</el-form-item>
|
<el-form-item label="期初余额" prop="initialBalance" v-if="!form.id">
|
<el-input-number v-model="form.initialBalance" :precision="2" :min="0" :step="100" style="width: 100%" />
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-radio-group v-model="form.status">
|
<el-radio label="ACTIVE">正常</el-radio>
|
<el-radio label="CANCELLED">注销</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
<el-button @click="cancel">取 消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
<!-- 充值管理抽屉 -->
|
<el-drawer v-model="rechargeDrawer.visible" :title="'充值管理 - ' + rechargeDrawer.cardNumber" size="50%">
|
<div style="padding: 0 20px;">
|
<el-row style="margin-bottom: 15px;">
|
<el-button type="primary" icon="Plus" @click="handleAddRecharge">新增充值</el-button>
|
</el-row>
|
<el-table v-loading="rechargeDrawer.loading" :data="rechargeDrawer.list" border>
|
<el-table-column type="index" label="序号" width="60" align="center" />
|
<el-table-column prop="rechargeDate" label="充值时间" width="160" />
|
<el-table-column prop="rechargeAmount" label="充值金额(元)" width="120" align="right">
|
<template #default="scope">
|
<span style="color: #67C23A; font-weight: bold;">+{{ scope.row.rechargeAmount }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createUserName" label="操作人" width="100" />
|
<el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip />
|
<el-table-column label="操作" width="100" align="center">
|
<template #default="scope">
|
<el-button type="danger" link size="small" @click="handleDeleteRecharge(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination
|
v-show="rechargeDrawer.total > 0"
|
:total="rechargeDrawer.total"
|
v-model:page="rechargeDrawer.queryParams.current"
|
v-model:limit="rechargeDrawer.queryParams.size"
|
@pagination="getRechargeList"
|
/>
|
</div>
|
</el-drawer>
|
|
<!-- 新增充值弹窗 -->
|
<el-dialog :title="rechargeDialog.title" v-model="rechargeDialog.visible" width="500px" append-to-body>
|
<el-form ref="rechargeFormRef" :model="rechargeDialog.form" :rules="rechargeDialog.rules" label-width="100px">
|
<el-form-item label="充值金额" prop="rechargeAmount">
|
<el-input-number v-model="rechargeDialog.form.rechargeAmount" :min="0.01" :precision="2" :step="100" style="width: 100%;" placeholder="请输入充值金额" />
|
</el-form-item>
|
<el-form-item label="充值日期" prop="rechargeDate">
|
<el-date-picker v-model="rechargeDialog.form.rechargeDate" type="datetime" placeholder="选择充值时间" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%;" />
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="rechargeDialog.form.remark" type="textarea" placeholder="请输入备注内容" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="submitRechargeForm">确 定</el-button>
|
<el-button @click="rechargeDialog.visible = false">取 消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
|
<script setup>
|
import { ref, reactive, onMounted } from 'vue';
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
import { listFuelCardPage, addFuelCard, updateFuelCard, delFuelCard } from '@/api/inventoryManagement/vehicle';
|
import request from '@/utils/request';
|
|
import { listAllFuelCard, listRecharge, addRecharge, delRecharge } from '@/api/inventoryManagement/vehicle';
|
const statTotal = ref(0);
|
const statActive = ref(0);
|
const statCancelled = ref(0);
|
const statBalance = ref(0);
|
|
function getStats() {
|
listAllFuelCard().then(res => {
|
const arr = res.data || [];
|
statTotal.value = arr.length;
|
statActive.value = arr.filter(i => i.status === 'ACTIVE').length;
|
statCancelled.value = arr.filter(i => i.status === 'CANCELLED').length;
|
statBalance.value = arr.reduce((sum, item) => sum + (item.currentBalance || 0), 0);
|
});
|
}
|
|
|
const loading = ref(true);
|
const tableData = ref([]);
|
const total = ref(0);
|
const open = ref(false);
|
const title = ref("");
|
const formRef = ref(null);
|
|
const deptOptions = ref([]);
|
|
const queryParams = reactive({
|
current: 1,
|
size: 10,
|
cardNumber: undefined,
|
deptId: undefined
|
});
|
|
const form = reactive({
|
id: undefined,
|
cardNumber: undefined,
|
deptId: undefined,
|
issuer: undefined,
|
initialBalance: 0,
|
status: 'ACTIVE',
|
remark: undefined
|
});
|
|
const rules = {
|
cardNumber: [{ required: true, message: "加油卡号不能为空", trigger: "blur" }],
|
deptId: [{ required: true, message: "所属部门不能为空", trigger: "change" }],
|
issuer: [{ required: true, message: "发卡单位不能为空", trigger: "blur" }]
|
};
|
|
function getDicts() {
|
request({url: '/system/user/deptTree', method: 'get'}).then(res => {
|
deptOptions.value = res.data || [];
|
});
|
}
|
|
function getList() {
|
loading.value = true;
|
listFuelCardPage(queryParams).then(response => {
|
tableData.value = response.data.records;
|
total.value = response.data.total;
|
loading.value = false;
|
}).catch(() => {
|
loading.value = false;
|
});
|
}
|
|
function handleQuery() {
|
queryParams.current = 1;
|
getList();
|
getStats();
|
}
|
|
function resetQuery() {
|
queryParams.cardNumber = undefined;
|
queryParams.deptId = undefined;
|
handleQuery();
|
}
|
|
function reset() {
|
Object.assign(form, {
|
id: undefined,
|
cardNumber: undefined,
|
deptId: undefined,
|
issuer: undefined,
|
initialBalance: 0,
|
status: 'ACTIVE',
|
remark: undefined
|
});
|
if (formRef.value) formRef.value.resetFields();
|
}
|
|
function handleAdd() {
|
reset();
|
open.value = true;
|
title.value = "新增加油卡";
|
}
|
|
function handleUpdate(row) {
|
reset();
|
Object.assign(form, row);
|
open.value = true;
|
title.value = "修改加油卡";
|
}
|
|
function submitForm() {
|
formRef.value.validate(valid => {
|
if (valid) {
|
if (form.id != null) {
|
updateFuelCard(form).then(response => {
|
ElMessage.success("修改成功");
|
open.value = false;
|
getList();
|
getStats();
|
});
|
} else {
|
addFuelCard(form).then(response => {
|
ElMessage.success("新增成功");
|
open.value = false;
|
getList();
|
getStats();
|
});
|
}
|
}
|
});
|
}
|
|
function handleCancel(row) {
|
ElMessageBox.confirm('是否确认注销加油卡号为"' + row.cardNumber + '"的卡片？注销后该卡不能用于新增加油记录，但余额将保留。', "提示", {
|
confirmButtonText: "确定注销",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(function() {
|
return updateFuelCard({ id: row.id, status: 'CANCELLED' });
|
}).then(() => {
|
getList();
|
getStats();
|
ElMessage.success("注销成功");
|
});
|
}
|
|
function handleDelete(row) {
|
ElMessageBox.confirm('是否确认删除加油卡号为"' + row.cardNumber + '"的数据项？', "警告", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(function() {
|
return delFuelCard(row.id);
|
}).then(() => {
|
getList();
|
getStats();
|
ElMessage.success("删除成功");
|
});
|
}
|
|
function cancel() {
|
open.value = false;
|
reset();
|
}
|
|
onMounted(() => {
|
getDicts();
|
getList();
|
getStats();
|
});
|
|
// --- 充值管理逻辑 ---
|
const rechargeDrawer = reactive({
|
visible: false,
|
loading: false,
|
cardNumber: '',
|
cardId: null,
|
list: [],
|
total: 0,
|
queryParams: {
|
current: 1,
|
size: 10,
|
cardId: null
|
}
|
});
|
|
const rechargeDialog = reactive({
|
visible: false,
|
title: '新增充值',
|
form: {
|
cardId: null,
|
rechargeAmount: null,
|
rechargeDate: '',
|
remark: ''
|
},
|
rules: {
|
rechargeAmount: [{ required: true, message: '请输入充值金额', trigger: 'blur' }],
|
rechargeDate: [{ required: true, message: '请选择充值日期', trigger: 'change' }]
|
}
|
});
|
|
const rechargeFormRef = ref(null);
|
|
function handleRecharge(row) {
|
rechargeDrawer.cardId = row.id;
|
rechargeDrawer.cardNumber = row.cardNumber;
|
rechargeDrawer.queryParams.cardId = row.id;
|
rechargeDrawer.visible = true;
|
getRechargeList();
|
}
|
|
function getRechargeList() {
|
rechargeDrawer.loading = true;
|
listRecharge(rechargeDrawer.queryParams).then(res => {
|
rechargeDrawer.list = res.data.records;
|
rechargeDrawer.total = res.data.total;
|
rechargeDrawer.loading = false;
|
}).catch(() => {
|
rechargeDrawer.loading = false;
|
});
|
}
|
|
function handleAddRecharge() {
|
rechargeDialog.form = {
|
cardId: rechargeDrawer.cardId,
|
rechargeAmount: undefined,
|
rechargeDate: new Date().toISOString().slice(0,19).replace('T', ' '),
|
remark: ''
|
};
|
rechargeDialog.visible = true;
|
if (rechargeFormRef.value) {
|
rechargeFormRef.value.clearValidate();
|
}
|
}
|
|
function submitRechargeForm() {
|
rechargeFormRef.value.validate(valid => {
|
if (valid) {
|
addRecharge(rechargeDialog.form).then(res => {
|
ElMessage.success('充值成功');
|
rechargeDialog.visible = false;
|
getRechargeList();
|
getList(); // 更新主列表金额
|
getStats();
|
});
|
}
|
});
|
}
|
|
function handleDeleteRecharge(row) {
|
ElMessageBox.confirm('确认删除该笔充值记录吗？（删除后余额将自动扣回）', '提示', { type: 'warning' }).then(() => {
|
return delRecharge(row.id);
|
}).then(() => {
|
ElMessage.success('删除成功');
|
getRechargeList();
|
getList();
|
getStats();
|
});
|
}
|
// --- 充值管理逻辑结束 ---
|
|
</script>
|
