<template>
|
<div style="display: inline-block;">
|
<el-button type="primary" plain @click="openDialog">
|
其他金额维护
|
</el-button>
|
|
<el-dialog
|
v-model="visible"
|
title="其他金额维护"
|
width="80%"
|
:close-on-click-modal="false"
|
@close="closeDialog"
|
>
|
<el-row :gutter="20">
|
<el-col :span="14">
|
<el-table
|
:data="records"
|
border
|
v-loading="loading"
|
height="55vh"
|
>
|
<el-table-column label="编码" prop="code" min-width="120" show-overflow-tooltip />
|
<el-table-column label="项目" prop="processName" min-width="180" show-overflow-tooltip />
|
<el-table-column label="数量" prop="quantity" min-width="110" :formatter="formattedNumber" />
|
<el-table-column label="单价(元)" prop="unitPrice" min-width="130" :formatter="formattedNumber" />
|
<el-table-column label="金额(元)" prop="amount" min-width="160" :formatter="formattedNumber" />
|
<el-table-column fixed="right" label="操作" width="160" align="center">
|
<template #default="scope">
|
<el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
<el-button link type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
layout="total, sizes, prev, pager, next, jumper"
|
:page="page.current"
|
:limit="page.size"
|
@pagination="paginationChange"
|
/>
|
</el-col>
|
|
<el-col :span="10">
|
<div style="padding: 8px 0;">
|
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 10px;">
|
<div style="font-weight:600;">
|
{{ operationType === "add" ? "新增其他金额" : "编辑其他金额" }}
|
</div>
|
<el-button
|
type="primary"
|
plain
|
size="small"
|
@click="handleAdd"
|
:disabled="operationType === 'add'"
|
>
|
新增
|
</el-button>
|
</div>
|
|
<el-form
|
:model="form"
|
label-width="120px"
|
label-position="top"
|
:rules="rules"
|
ref="formRef"
|
>
|
<el-form-item label="编码">
|
<el-input v-model="form.code" placeholder="请输入编码（可选）" clearable />
|
</el-form-item>
|
|
<el-form-item label="项目" prop="processName">
|
<el-input v-model="form.processName" placeholder="请输入项目名称" clearable />
|
</el-form-item>
|
|
<el-form-item label="数量" prop="quantity">
|
<el-input-number
|
v-model="form.quantity"
|
:min="0"
|
:precision="2"
|
style="width:100%"
|
placeholder="请输入数量"
|
clearable
|
@change="recalcAmount"
|
/>
|
</el-form-item>
|
|
<el-form-item label="单价(元)" prop="unitPrice">
|
<el-input-number
|
v-model="form.unitPrice"
|
:min="0"
|
:precision="2"
|
style="width:100%"
|
placeholder="请输入单价"
|
clearable
|
@change="recalcAmount"
|
/>
|
</el-form-item>
|
|
<el-form-item label="金额(元)">
|
<el-input v-model="form.amount" disabled />
|
</el-form-item>
|
|
<div style="display:flex; justify-content:flex-end; gap: 10px; margin-top: 8px;">
|
<el-button @click="closeDialog">取消</el-button>
|
<el-button type="primary" @click="submitForm">保存</el-button>
|
</div>
|
</el-form>
|
</div>
|
</el-col>
|
</el-row>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { getCurrentInstance, reactive, ref } from "vue";
|
import { ElMessageBox } from "element-plus";
|
import pagination from "@/components/PIMTable/Pagination.vue";
|
import {
|
salesLedgerProductProcessList,
|
salesLedgerProductProcessAdd,
|
salesLedgerProductProcessUpdate,
|
salesLedgerProductProcessDelete,
|
} from "@/api/salesManagement/salesLedger.js";
|
|
const { proxy } = getCurrentInstance();
|
const visible = ref(false);
|
const loading = ref(false);
|
const records = ref([]);
|
const total = ref(0);
|
const page = reactive({
|
current: 1,
|
size: 10,
|
});
|
|
const operationType = ref("add");
|
const formRef = ref(null);
|
const form = reactive({
|
id: null,
|
code: "",
|
processName: "",
|
quantity: 0,
|
unitPrice: 0,
|
amount: "0.00",
|
});
|
const rules = reactive({
|
processName: [{ required: true, message: "请输入项目名称", trigger: "change" }],
|
quantity: [{ required: true, message: "请输入数量", trigger: "blur" }],
|
unitPrice: [{ required: true, message: "请输入单价", trigger: "blur" }],
|
});
|
|
const formattedNumber = (row, column, cellValue) => {
|
return Number(cellValue || 0).toFixed(2);
|
};
|
|
const recalcAmount = () => {
|
const quantity = Number(form.quantity ?? 0) || 0;
|
const unitPrice = Number(form.unitPrice ?? 0) || 0;
|
form.amount = (quantity * unitPrice).toFixed(2);
|
};
|
|
const resetForm = (type = "add") => {
|
operationType.value = type;
|
form.id = null;
|
form.code = "";
|
form.processName = "";
|
form.quantity = 0;
|
form.unitPrice = 0;
|
form.amount = "0.00";
|
};
|
|
const fetchList = async () => {
|
loading.value = true;
|
try {
|
const res = await salesLedgerProductProcessList({
|
current: page.current,
|
size: page.size,
|
});
|
const list = res?.records ?? res?.data?.records ?? [];
|
const sum = res?.total ?? res?.data?.total ?? 0;
|
records.value = list.map((item) => {
|
const quantity = Number(item.quantity ?? 0) || 0;
|
const unitPrice = Number(item.unitPrice ?? 0) || 0;
|
const amount = Number(item.amount ?? quantity * unitPrice) || 0;
|
return {
|
id: item.id,
|
code: item.code ?? item.remark ?? "",
|
processName: item.processName ?? "",
|
quantity,
|
unitPrice,
|
amount: amount.toFixed(2),
|
};
|
});
|
total.value = sum;
|
} finally {
|
loading.value = false;
|
}
|
};
|
|
const openDialog = () => {
|
visible.value = true;
|
resetForm("add");
|
fetchList();
|
};
|
|
const closeDialog = () => {
|
visible.value = false;
|
resetForm("add");
|
};
|
|
const paginationChange = (obj) => {
|
page.current = obj.page;
|
page.size = obj.limit;
|
fetchList();
|
};
|
|
const handleAdd = () => {
|
resetForm("add");
|
};
|
|
const handleEdit = (row) => {
|
if (!row) return;
|
operationType.value = "edit";
|
form.id = row.id ?? null;
|
form.code = row.code ?? "";
|
form.processName = row.processName ?? "";
|
form.quantity = Number(row.quantity ?? 0) || 0;
|
form.unitPrice = Number(row.unitPrice ?? 0) || 0;
|
recalcAmount();
|
};
|
|
const submitForm = () => {
|
formRef.value?.validate((valid) => {
|
if (!valid) return;
|
const payload = {
|
processName: form.processName,
|
quantity: Number(form.quantity) || 0,
|
unitPrice: Number(form.unitPrice) || 0,
|
amount: Number(form.amount) || 0,
|
remark: form.code,
|
code: form.code,
|
};
|
const req =
|
operationType.value === "edit"
|
? salesLedgerProductProcessUpdate({ ...payload, id: form.id })
|
: salesLedgerProductProcessAdd(payload);
|
req.then(() => {
|
proxy.$modal.msgSuccess("保存成功");
|
fetchList();
|
resetForm("add");
|
});
|
});
|
};
|
|
const handleDelete = (row) => {
|
if (!row?.id) return;
|
ElMessageBox.confirm("确认删除该记录？", "删除", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
return salesLedgerProductProcessDelete(row.id).then(() => {
|
proxy.$modal.msgSuccess("删除成功");
|
fetchList();
|
if (operationType.value === "edit" && form.id === row.id) {
|
resetForm("add");
|
}
|
});
|
})
|
.catch(() => {
|
proxy.$modal.msg("已取消");
|
});
|
};
|
</script>
|
|
<style scoped>
|
:deep(.el-dialog .pagination-container) {
|
padding: 10px !important;
|
display: flex;
|
justify-content: flex-end;
|
position: static !important;
|
margin: 0 !important;
|
}
|
|
:deep(.el-pagination) {
|
overflow: hidden;
|
flex-wrap: wrap;
|
}
|
</style>
|
