From 53e0b9466d3fdd3e5caf7c42e476fffdb468bc2a Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期五, 27 三月 2026 17:17:22 +0800
Subject: [PATCH] 1
---
src/views/salesManagement/salesLedger/components/OtherAmountMaintenanceButton.vue | 278 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 278 insertions(+), 0 deletions(-)
diff --git a/src/views/salesManagement/salesLedger/components/OtherAmountMaintenanceButton.vue b/src/views/salesManagement/salesLedger/components/OtherAmountMaintenanceButton.vue
new file mode 100644
index 0000000..62389b5
--- /dev/null
+++ b/src/views/salesManagement/salesLedger/components/OtherAmountMaintenanceButton.vue
@@ -0,0 +1,278 @@
+<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>
+
--
Gitblit v1.9.3