From 7c86b549b27bd54f6bd5de81c13f8242f91c87ff Mon Sep 17 00:00:00 2001
From: 张诺 <zhang_12370@163.com>
Date: 星期一, 16 六月 2025 18:03:27 +0800
Subject: [PATCH] 优化文件上传组件及表格显示

---
 src/views/procureMent/index.vue |  305 ++++++++++++++++++++++++++++----------------------
 1 files changed, 172 insertions(+), 133 deletions(-)

diff --git a/src/views/procureMent/index.vue b/src/views/procureMent/index.vue
index 790146a..0651cd4 100644
--- a/src/views/procureMent/index.vue
+++ b/src/views/procureMent/index.vue
@@ -1,109 +1,116 @@
 <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.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-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 type="danger" :icon="Delete" @click="handleDelete"
+          >鍒犻櫎</el-button
+        >
+        <!-- <el-button type="info" :icon="Download" @click="handleExport">瀵煎嚭</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"
+        @delete="handleDeleteSuccess"
+        :show-selection="true"
+        :border="true"
+        :maxHeight="440"
+      />
       <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 } from "@/api/procureMent";
+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: "",
   supplierName: "",
   identifyNumber: "",
   address: "",
-  
+  current: 1,
+  pageSize: 10,
 });
 // 鏄惁缂栬緫
 const addOrEdit = ref("add");
@@ -113,32 +120,45 @@
 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: "coal", 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: "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 resetQuery = () => {
   Object.keys(queryParams).forEach((key) => {
-    if (key !== "pageNum" && key !== "pageSize") {
+    if (key !== "current" && key !== "pageSize") {
       queryParams[key] = "";
     }
   });
-  handleQuery();
 };
 // 鏂板
 const handleAdd = () => {
@@ -146,24 +166,55 @@
   handleAddEdit();
 };
 // 鏂板缂栬緫
+const productionDialogs = ref(null); // 娣诲姞ref澹版槑
+
 const handleAddEdit = () => {
   addOrEdit.value == "add" ? (title.value = "鏂板") : (title.value = "缂栬緫");
-    title.value = title.value + "閲囪喘淇℃伅";
-    openDialog();
+  title.value = title.value + "閲囪喘淇℃伅";
+  
+  // 姝ｇ‘浣跨敤瀛愮粍浠秗ef
+  if (productionDialogs.value) {
+    // 杩欓噷鍙互璋冪敤瀛愮粍浠剁殑鏂规硶
+    console.log("瀛愮粍浠跺疄渚�:", productionDialogs.value.getDropdownData());
+  }
+  
+  openDialog();
 };
 // 鎵撳紑寮圭獥
 const openDialog = () => {
   if (addOrEdit.value === "edit") {
+    // 纭繚澶嶅埗涓�浠芥暟鎹紝閬垮厤鐩存帴寮曠敤
+    copyForm.value = JSON.parse(JSON.stringify(form.value));
     dialogFormVisible.value = true;
+    // 瑙﹀彂ref閲岄潰鐨勬柟娉�
     return;
   }
-  form.value = {};
+  // 鏂板缓鏃跺垵濮嬪寲琛ㄥ崟
+  form.value = {
+    supplierName: "",
+    coal: "",
+    unit: "",
+    purchaseQuantity: "",
+    priceExcludingTax: "",
+    totalPriceExcludingTax: "",
+    priceIncludingTax: "",
+    totalPriceIncludingTax: "",
+    taxRate: "",
+    registrantId: userInfo.value.userName,
+    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,24 +224,20 @@
 };
 // 琛ㄦ牸缂栬緫鏂规硶
 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"
-    }
-  )
+  ElMessageBox.confirm(`纭畾鍒犻櫎閫変腑鐨勬暟鎹悧锛焋, "鎻愮ず", {
+    confirmButtonText: "纭畾",
+    cancelButtonText: "鍙栨秷",
+    type: "warning",
+  })
     .then(() => {
       // 妯℃嫙鍒犻櫎鎿嶄綔
       tableData.value = tableData.value.filter(
@@ -202,61 +249,52 @@
     .catch(() => {
       ElMessage.info("宸插彇娑堝垹闄�");
     });
-}
+};
 const handleDeleteSuccess = (row) => {
   ElMessage.success("鍒犻櫎鎴愬姛锛�" + row.supplierName);
 };
 // 瀵煎嚭
 const handleExport = (row) => {
-  proxy.download("system/post/export", {
-    ...queryParams.value
-  }, `post_${new Date().getTime()}.xlsx`)
+  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 {
+    // 浼犻�掑垎椤靛弬鏁�
+    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 {
@@ -299,10 +337,11 @@
   }
 }
 /* 琛ㄦ牸宸ュ叿鏍� */
-.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