From e251be5ee099b73aebd646cb2ade4246f95d54b1 Mon Sep 17 00:00:00 2001
From: zhang_12370 <z2864490065@outlook.com>
Date: 星期四, 26 六月 2025 11:40:05 +0800
Subject: [PATCH] 添加 单位字段 自动计算属性不可修改
---
src/views/procureMent/index.vue | 365 ++++++++++++++++++++++++++++-----------------------
1 files changed, 202 insertions(+), 163 deletions(-)
diff --git a/src/views/procureMent/index.vue b/src/views/procureMent/index.vue
index 790146a..763ef87 100644
--- a/src/views/procureMent/index.vue
+++ b/src/views/procureMent/index.vue
@@ -1,109 +1,103 @@
<template>
<div class="app-container">
- <el-form :inline="true" :model="queryParams" class="search-form">
- <el-form-item label="鎼滅储">
- <el-input
- v-model="queryParams.searchText"
- placeholder="璇疯緭鍏ュ叧閿瘝"
- clearable
- :style="{ width: '100%' }"
- />
- </el-form-item>
- <el-form-item label="渚涘簲鍟嗗悕绉�">
- <el-input
- v-model="queryParams.supplierName"
- placeholder="璇疯緭鍏�"
- clearable
- :style="{ width: '100%' }"
- />
- </el-form-item>
- <el-form-item label="缁熶竴浜鸿瘑鍒彿">
- <el-input
- v-model="queryParams.identifyNumber"
- placeholder="璇疯緭鍏�"
- clearable
- :style="{ width: '100%' }"
- />
- </el-form-item>
- <el-form-item label="缁忚惀鍦板潃">
- <el-input
- v-model="queryParams.address"
- placeholder="璇疯緭鍏�"
- clearable
- :style="{ width: '100%' }"
- />
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="handleQuery">鏌ヨ</el-button>
- <el-button @click="resetQuery">閲嶇疆</el-button>
- </el-form-item>
- </el-form>
+ <el-form :inline="true" :model="queryParams" class="search-form">
+ <el-form-item label="鎼滅储">
+ <el-input
+ v-model="queryParams.searchAll"
+ placeholder="璇疯緭鍏ヤ緵搴斿晢/鐓ょ"
+ clearable
+ :style="{ width: '100%' }"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="handleQuery">鏌ヨ</el-button>
+ <el-button @click="resetQuery">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
<el-card>
<!-- 鎿嶄綔鎸夐挳鍖� -->
<el-row :gutter="24" class="table-toolbar">
<el-button type="primary" :icon="Plus" @click="handleAdd"
- >鏂板缓</el-button
- >
- <el-button type="danger" :icon="Delete" @click="handleDelete">鍒犻櫎</el-button>
- <el-button type="info" :icon="Download" @click="handleExport">瀵煎嚭</el-button>
- </el-row>
+ >鏂板缓
+ </el-button>
+ <el-button type="danger" :icon="Delete" @click="handleDelete"
+ >鍒犻櫎
+ </el-button>
+ </el-row>
<!-- 琛ㄦ牸缁勪欢 -->
- <data-table
- :loading="loading"
- :table-data="tableData"
- :columns="columns"
- @selection-change="handleSelectionChange"
- @edit="handleEdit"
- @delete="handleDeleteSuccess"
- :show-selection="true"
- :border="true"
- :maxHeight="440"
- />
+ <data-table
+ :loading="loading"
+ :table-data="tableData"
+ :columns="columns"
+ @selection-change="handleSelectionChange"
+ @edit="handleEdit"
+ :showOverflowTooltip="false"
+ @delete="handleDeleteSuccess"
+ :show-selection="true"
+ :border="true"
+ style="width: 100%; height: calc(100vh - 26em)"
+ @viewRow="handleView"
+ :operations="['edit', 'viewRow']"
+ :operationsWidth="200"
+ :show-overflow-tooltip="false"
+ />
<pagination
- v-if="total>0"
- :page-num="pageNum"
- :page-size="pageSize"
+ v-if="total > 0"
+ :page="current"
+ :limit="pageSize"
:total="total"
- @pagination="handleQuery"
+ @pagination="handlePagination"
:layout="'total, prev, pager, next, jumper'"
/>
</el-card>
<ProductionDialog
- v-if="total>0"
- v-model:dialogFormVisible="dialogFormVisible"
- :form="form"
- :title="title"
- @submit="handleSubmit"
- @success="handleSuccess"
- />
+ v-model:copyForm="copyForm"
+ v-model:dialogFormVisible="dialogFormVisible"
+ v-model:form="form"
+ :title="title"
+ @submit="handleSubmit"
+ @success="handleSuccess"
+ ref="productionDialogs"
+ />
</div>
</template>
<script setup>
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus, Edit, Delete, Download } from "@element-plus/icons-vue";
import DataTable from "@/components/Table/ETable.vue";
import Pagination from "@/components/Pagination";
import ProductionDialog from "./components/ProductionDialog.vue";
-const { proxy } = getCurrentInstance()
+import {
+ purchaseRegistration,
+ getSupplyList,
+ getCoalInfoList,
+ delPR
+} from "@/api/procureMent";
+import { useDelete } from "@/hooks/useDelete";
+import useUserStore from "@/store/modules/user";
+// 寮曞叆瀛楀吀鏁版嵁
+const { proxy } = getCurrentInstance();
const dialogFormVisible = ref(false);
const form = ref({});
const title = ref("");
// 鐘舵�佸彉閲�
const loading = ref(false);
const total = ref(0);
-const pageNum = ref(1)
+const current = ref(1);
const pageSize = ref(10);
const selectedRows = ref([]);
+const copyForm = ref({});
// 鏌ヨ鍙傛暟
const queryParams = reactive({
- searchText: "",
+ searchAll: "",
supplierName: "",
identifyNumber: "",
address: "",
-
+ current: 1,
+ pageSize: 10,
});
// 鏄惁缂栬緫
const addOrEdit = ref("add");
@@ -113,32 +107,72 @@
const handleQuery = () => {
loading.value = true;
// 杩欓噷娣诲姞瀹為檯鐨勬煡璇㈤�昏緫
- setTimeout(() => {
- loading.value = false;
- }, 500);
+ getList();
+};
+const userStore = useUserStore();
+// 鑾峰彇鐢ㄦ埛淇℃伅
+const userInfo = ref({});
+onMounted(async () => {
+ let res = await userStore.getInfo();
+ userInfo.value = res.user;
+});
+// 鍒嗛〉澶勭悊
+const handlePagination = (val) => {
+ current.value = val.page;
+ pageSize.value = val.limit;
+ queryParams.current = val.page;
+ queryParams.pageSize = val.limit;
+ getList();
};
// supplier 渚涘簲鍟嗘暟鎹�
const columns = ref([
- { prop: "supplierName", label: "渚涘簲鍟嗗悕绉�", minWidth: 200 },
- { prop: "category", label: "鐓ょ", minWidth: 120 },
- { prop: "unit", label: "鍗曚綅", minWidth: 150 },
- { prop: "purchaseAmount", label: "閲囪喘鏁伴噺", minWidth: 120 },
- { prop: "priceBeforeTax", label: "鍗曚环(绋庡墠)", minWidth: 150 },
- { prop: "totalBeforeTax", label: "鎬讳环(绋庡墠)", minWidth: 100 },
- { prop: "calorificValue", label: "鐑��", minWidth: 150 },
- { prop: "registrant", label: "鐧昏浜�", minWidth: 100 },
+ {
+ prop: "supplierId",
+ label: "渚涘簲鍟嗗悕绉�",
+ minWidth: 200,
+ formatter: (row) => {
+ return MatchQuery(row.supplierId, "supplyRes") || "鏈煡渚涘簲鍟�";
+ },
+ },
+ {
+ prop: "coalId",
+ label: "鐓ょ绫诲瀷",
+ minWidth: 120,
+ formatter: (row) => {
+ return MatchQuery(row.coalId, "coalRes") || "鏈煡鐓ょ";
+ },
+ },
+ { prop: "purchaseQuantity", label: "閲囪喘鏁伴噺", minWidth: 100 },
+ { prop: "priceIncludingTax", label: "鍗曚环锛堝惈绋庯級", minWidth: 150 },
+ { prop: "totalPriceIncludingTax", label: "鎬讳环锛堝惈绋庯級", minWidth: 100 },
+ { prop: "taxRate", label: "绋庣巼", minWidth: 100 },
+ { prop: "priceExcludingTax", label: "涓嶅惈绋庡崟浠�", minWidth: 100 },
+ { prop: "registrantId", label: "鐧昏浜�", minWidth: 100 },
{ prop: "registrationDate", label: "鐧昏鏃ユ湡", minWidth: 100 },
]);
+// 鍖归厤鏌ヨ瀛楁
+const MatchQuery = (data, name) => {
+ const list = name === "supplyRes" ? supplyRes.value.data : coalRes.value.data;
+ const item = list.find((items) => items.id == data);
+ return item ? item.coal || item.supplierName : "";
+};
+// 鑾峰彇渚涘簲鍟嗗垪琛�
+const supplyRes = ref([]);
+const coalRes = ref([]);
+
// 閲嶇疆鏌ヨ
const resetQuery = () => {
- Object.keys(queryParams).forEach((key) => {
- if (key !== "pageNum" && key !== "pageSize") {
- queryParams[key] = "";
- }
- });
- handleQuery();
+ queryParams.searchAll = "";
+ queryParams.supplierName = "";
+ queryParams.identifyNumber = "";
+ queryParams.address = "";
+ current.value = 1;
+ pageSize.value = 10;
+ queryParams.current = current.value;
+ queryParams.pageSize = pageSize.value;
+ getList();
};
// 鏂板
const handleAdd = () => {
@@ -146,24 +180,49 @@
handleAddEdit();
};
// 鏂板缂栬緫
+const productionDialogs = ref(null); // 娣诲姞ref澹版槑
+
const handleAddEdit = () => {
- addOrEdit.value == "add" ? (title.value = "鏂板") : (title.value = "缂栬緫");
- title.value = title.value + "閲囪喘淇℃伅";
- openDialog();
+ addOrEdit.value == "add" ? (title.value = "鏂板") : addOrEdit.value == "viewRow" ? (title.value = "鏌ョ湅") : (title.value = "缂栬緫");
+ title.value = title.value + "閲囪喘淇℃伅";
+ openDialog();
};
// 鎵撳紑寮圭獥
const openDialog = () => {
- if (addOrEdit.value === "edit") {
+ if (addOrEdit.value === "edit" || addOrEdit.value === "viewRow") {
+ // 纭繚澶嶅埗涓�浠芥暟鎹紝閬垮厤鐩存帴寮曠敤
+ copyForm.value = JSON.parse(JSON.stringify(form.value));
dialogFormVisible.value = true;
+ // 瑙﹀彂ref閲岄潰鐨勬柟娉�
return;
}
- form.value = {};
+ console.log(userInfo.value)
+ // 鏂板缓鏃跺垵濮嬪寲琛ㄥ崟
+ form.value = {
+ supplierName: "",
+ coal: "",
+ unit: "t",
+ purchaseQuantity: "",
+ priceExcludingTax: "",
+ totalPriceExcludingTax: "",
+ priceIncludingTax: "",
+ totalPriceIncludingTax: "",
+ taxRate: "",
+ registrantId: userInfo.value.userId,
+ registrationDate: new Date().toISOString().split("T")[0],
+ };
+ // 鏂板缓鏃朵篃闇�瑕佽缃� copyForm 鐢ㄤ簬閲嶇疆鍔熻兘
+ copyForm.value = JSON.parse(JSON.stringify(form.value));
dialogFormVisible.value = true;
};
// 鎻愪氦琛ㄥ崟
-const handleSubmit = () => {
- // 鎷垮埌鎻愪氦鏁版嵁
+const handleSubmit = (val) => {
+ if (val.result.code !== 200) {
+ ElMessage.error("鎿嶄綔澶辫触锛�" + val.result.msg);
+ return;
+ }
+ ElMessage.success(val.title + val.result.msg);
dialogFormVisible.value = false;
getList();
};
@@ -173,92 +232,65 @@
};
// 琛ㄦ牸缂栬緫鏂规硶
const handleEdit = (row) => {
- form.value = JSON.parse(JSON.stringify(row));
- addOrEdit.value = "edit";
- handleAddEdit()
+ form.value = JSON.parse(JSON.stringify(row));
+ addOrEdit.value = "edit";
+ handleAddEdit();
};
-const handleDelete = () => {
- if (selectedRows.value.length === 0) {
- ElMessage.warning("璇烽�夋嫨瑕佸垹闄ょ殑鏁版嵁");
- return;
- }
- ElMessageBox.confirm(
- `纭鍒犻櫎閫変腑鐨� ${selectedRows.value.length} 鏉℃暟鎹悧锛焋,
- "鎻愮ず",
- {
- confirmButtonText: "纭畾",
- cancelButtonText: "鍙栨秷",
- type: "warning"
- }
- )
- .then(() => {
- // 妯℃嫙鍒犻櫎鎿嶄綔
- tableData.value = tableData.value.filter(
- (item) => !selectedRows.value.includes(item)
- );
- total.value = tableData.value.length;
- ElMessage.success("鍒犻櫎鎴愬姛");
- })
- .catch(() => {
- ElMessage.info("宸插彇娑堝垹闄�");
- });
-}
+const handleView = (row) => {
+ form.value = JSON.parse(JSON.stringify(row));
+ addOrEdit.value = "viewRow";
+ handleAddEdit();
+};
+// 浣跨敤鍒犻櫎缁勫悎寮忓嚱鏁� - 绠�鍖栫増鏈�
+const { handleDeleteBatch: handleDelete } = useDelete({
+ deleteApi: delPR,
+ selectedRows,
+ tableData,
+ total,
+ confirmText: "纭畾鍒犻櫎閫変腑鐨勯噰璐褰曞悧锛�",
+ useLocalUpdate: true
+});
const handleDeleteSuccess = (row) => {
ElMessage.success("鍒犻櫎鎴愬姛锛�" + row.supplierName);
};
-// 瀵煎嚭
-const handleExport = (row) => {
- proxy.download("system/post/export", {
- ...queryParams.value
- }, `post_${new Date().getTime()}.xlsx`)
- ElMessage.success("瀵煎嚭鏁版嵁锛�" + row.supplierName);
-};
// 鎴愬姛
const handleSuccess = (val) => {
- console.log(val);
tableData.value.push(val);
// getList();
total.value = tableData.value.length;
ElMessage.success("鎿嶄綔鎴愬姛");
};
-const getList = () => {
+const getList = async () => {
loading.value = true;
- setTimeout(() => {
- tableData.value = [
- {
- supplierName: "涓浗鐭虫补鍖栧伐鑲′唤鏈夐檺鍏徃",
- category: "鐓�",
- unit: "鍚�",
- purchaseAmount: "1000",
- priceBeforeTax: "100",
- totalBeforeTax: "100000",
- calorificValue: "5000",
- registrant: "寮犱笁",
- registrationDate: "2025-01-01",
- },
- {
- supplierName: "涓浗涓煶鍖�",
- category: "绮惧搧鐓�",
- unit: "鍗冨厠",
- purchaseAmount: "1000",
- priceBeforeTax: "100",
- totalBeforeTax: "100000",
- calorificValue: "5000",
- registrant: "鏉庡洓",
- registrationDate: "2025-01-01",
- }
- ]
- total.value = tableData.value.length;
+ try {
+ [supplyRes.value, coalRes.value] = await Promise.all([
+ getSupplyList(),
+ getCoalInfoList(),
+ ]);
+ // 浼犻�掑垎椤靛弬鏁�
+ let res = await purchaseRegistration({
+ current: current.value,
+ pageSize: pageSize.value,
+ ...queryParams,
+ });
+ if (res && res.data) {
+ tableData.value = res.data.records || [];
+ total.value = res.data.total || 0;
+ }
+ } catch (error) {
+ ElMessage.error("鑾峰彇鏁版嵁澶辫触");
+ } finally {
loading.value = false;
- }, 500);
+ }
};
getList();
</script>
<style scoped>
-.app-container{
+.app-container {
box-sizing: border-box;
}
+
.search-form {
background-color: #fff;
padding: 20px 20px 0 20px;
@@ -266,6 +298,7 @@
border-radius: 4px;
box-shadow: var(--el-box-shadow-light);
}
+
.search-form :deep(.el-form-item) {
margin-bottom: 16px;
width: 100%;
@@ -277,11 +310,13 @@
width: 50%;
}
}
+
@media screen and (min-width: 1200px) {
.search-form :deep(.el-form-item) {
width: 18%;
}
}
+
.table-toolbar {
margin-bottom: 20px;
display: flex;
@@ -294,15 +329,19 @@
.table-toolbar {
flex-direction: column;
}
+
.table-toolbar .el-button {
width: 100%;
}
}
+
/* 琛ㄦ牸宸ュ叿鏍� */
-.table-toolbar, .table-toolbar > * {
+.table-toolbar,
+.table-toolbar > * {
margin: 0 0 0 0 !important;
}
-.table-toolbar{
+
+.table-toolbar {
margin-bottom: 20px !important;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3