From f3cec0341563c2c0dd4f5df609d0689c6c450bfc Mon Sep 17 00:00:00 2001
From: ZN <zhang_12370@163.com>
Date: 星期六, 21 三月 2026 17:11:12 +0800
Subject: [PATCH] feat(采购退货): 增加退货详情查看功能并完善退货流程

---
 src/views/procurementManagement/purchaseReturnOrder/index.vue |  254 +++++++++++++++++++++++++++++++++++++++++++++-----
 1 files changed, 229 insertions(+), 25 deletions(-)

diff --git a/src/views/procurementManagement/purchaseReturnOrder/index.vue b/src/views/procurementManagement/purchaseReturnOrder/index.vue
index df5ae07..1ac769e 100644
--- a/src/views/procurementManagement/purchaseReturnOrder/index.vue
+++ b/src/views/procurementManagement/purchaseReturnOrder/index.vue
@@ -23,37 +23,97 @@
     </div>
 
     <div class="table_list">
-      <el-table :data="tableData" border v-loading="tableLoading" @selection-change="handleSelectionChange" :row-key="row => row.id" style="width: 100%" height="calc(100vh - 18.5em)">
-        <el-table-column align="center" type="selection" width="55" />
-        <el-table-column align="center" label="搴忓彿" type="index" width="60" />
-        <el-table-column label="閫�鏂欏崟鍙�" prop="no" show-overflow-tooltip />
-        <el-table-column label="閫�璐ф柟寮�" prop="returnType" show-overflow-tooltip />
-        <el-table-column label="渚涘簲鍟嗗悕绉�" prop="supplierName" show-overflow-tooltip />
-        <el-table-column label="鍏宠仈鍗曞彿" prop="purchaseContractNumber" show-overflow-tooltip />
-        <el-table-column label="閫�鏂欎汉" prop="returnUserName" show-overflow-tooltip />
-        <el-table-column label="澶囨敞" prop="remark"  show-overflow-tooltip />
-        <el-table-column label="鍒涘缓浜�" prop="createUserName"  show-overflow-tooltip />
-        <el-table-column label="鍒涘缓鏃堕棿" prop="createTime" show-overflow-tooltip />
-        <el-table-column label="鏈�杩戞洿鏂版椂闂�" prop="updateTime" show-overflow-tooltip />
-        <el-table-column fixed="right" label="鎿嶄綔" min-width="60" align="center">
-          <template #default="scope">
-            <el-button link type="primary" size="small" style="color: #67C23A">璇︽儏</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" />
+      <PIMTable
+        rowKey="id"
+        :column="tableColumn"
+        :tableData="tableData"
+        :tableLoading="tableLoading"
+        :isSelection="true"
+        :page="page"
+        :height="'calc(100vh - 18.5em)'"
+        @selection-change="handleSelectionChange"
+        @pagination="paginationChange"
+      >
+        <template #operation="{ row }">
+          <el-button link type="primary" size="small" style="color: #67C23A" @click="handleDetail(row)">璇︽儏</el-button>
+        </template>
+      </PIMTable>
     </div>
     <new v-if="isShowNewModal"
          v-model:visible="isShowNewModal"
          @completed="handleQuery" />
+
+    <el-dialog
+      v-model="detailVisible"
+      title="閲囪喘閫�璐ц鎯�"
+      width="1200"
+      destroy-on-close
+    >
+      <div v-loading="detailLoading">
+        <el-descriptions :column="3" border>
+          <el-descriptions-item label="閫�鏂欏崟鍙�">{{ detailData.no || '--' }}</el-descriptions-item>
+          <el-descriptions-item label="閫�璐ф柟寮�">{{ getReturnTypeLabel(detailData.returnType) }}</el-descriptions-item>
+          <el-descriptions-item label="渚涘簲鍟嗗悕绉�">{{ detailData.supplierName || '--' }}</el-descriptions-item>
+          <el-descriptions-item label="椤圭洰闃舵">{{ getProjectPhaseLabel(detailData.projectPhase) }}</el-descriptions-item>
+          <el-descriptions-item label="鍏宠仈鍗曞彿">{{ detailData.purchaseContractNumber || '--' }}</el-descriptions-item>
+          <el-descriptions-item label="鍒朵綔鏃ユ湡">{{ detailData.preparedAt || '--' }}</el-descriptions-item>
+          <el-descriptions-item label="鍒跺崟浜�">{{ detailData.preparedUserName || '--' }}</el-descriptions-item>
+          <el-descriptions-item label="閫�鏂欎汉">{{ detailData.returnUserName || '--' }}</el-descriptions-item>
+          <el-descriptions-item label="鏁村崟鎶樻墸棰�">{{ formatAmount(detailData.totalDiscountAmount) }}</el-descriptions-item>
+          <el-descriptions-item label="鏁村崟鎶樻墸鐜�">{{ detailData.totalDiscountRate ?? '--' }}</el-descriptions-item>
+          <el-descriptions-item label="鎴愪氦閲戦">{{ formatAmount(detailData.totalAmount) }}</el-descriptions-item>
+          <el-descriptions-item label="鍒涘缓浜�">{{ detailData.createUserName || '--' }}</el-descriptions-item>
+          <el-descriptions-item label="鍒涘缓鏃堕棿">{{ detailData.createTime || '--' }}</el-descriptions-item>
+          <el-descriptions-item label="鏈�杩戞洿鏂版椂闂�">{{ detailData.updateTime || '--' }}</el-descriptions-item>
+          <el-descriptions-item label="澶囨敞" :span="3">{{ detailData.remark || '--' }}</el-descriptions-item>
+        </el-descriptions>
+
+        <el-divider content-position="left">浜у搧鍒楄〃</el-divider>
+
+        <el-table
+          :data="detailProducts"
+          border
+          max-height="420"
+          style="width: 100%"
+        >
+          <el-table-column align="center" label="搴忓彿" type="index" width="60" />
+          <el-table-column label="浜у搧澶х被" prop="productCategory" min-width="120" show-overflow-tooltip />
+          <el-table-column label="瑙勬牸鍨嬪彿" prop="specificationModel" min-width="140" show-overflow-tooltip />
+          <el-table-column label="鍗曚綅" prop="unit" width="80" />
+          <el-table-column label="鏁伴噺" prop="quantity" width="80" />
+          <el-table-column label="閫�璐ф暟閲�" prop="returnQuantity" width="100" />
+          <el-table-column label="搴撳瓨棰勮鏁伴噺" prop="warnNum" width="120" />
+          <el-table-column label="绋庣巼(%)" prop="taxRate" width="90" />
+          <el-table-column label="鍚◣鍗曚环(鍏�)" prop="taxInclusiveUnitPrice" width="130">
+            <template #default="scope">{{ formatAmount(scope.row.taxInclusiveUnitPrice) }}</template>
+          </el-table-column>
+          <el-table-column label="鍚◣鎬讳环(鍏�)" prop="taxInclusiveTotalPrice" width="130">
+            <template #default="scope">{{ formatAmount(scope.row.taxInclusiveTotalPrice) }}</template>
+          </el-table-column>
+          <el-table-column label="涓嶅惈绋庢�讳环(鍏�)" prop="taxExclusiveTotalPrice" width="140">
+            <template #default="scope">{{ formatAmount(scope.row.taxExclusiveTotalPrice) }}</template>
+          </el-table-column>
+          <el-table-column label="鏄惁璐ㄦ" prop="isChecked" width="100" align="center">
+            <template #default="scope">
+              <el-tag :type="scope.row.isChecked ? 'success' : 'info'">
+                {{ scope.row.isChecked ? '鏄�' : '鍚�' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <template #footer>
+        <el-button @click="detailVisible = false">鍏抽棴</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import pagination from '@/components/PIMTable/Pagination.vue'
-import { ref, reactive, toRefs, onMounted } from 'vue'
-import {findPurchaseReturnOrderListPage} from "@/api/procurementManagement/purchase_return_order.js";
+import PIMTable from '@/components/PIMTable/PIMTable.vue'
+import { ref, reactive, toRefs, onMounted, defineAsyncComponent, getCurrentInstance } from 'vue'
+const { proxy } = getCurrentInstance()
+import {findPurchaseReturnOrderListPage, getPurchaseReturnOrderDetail} from "@/api/procurementManagement/purchase_return_order.js";
 const New = defineAsyncComponent(() => import("@/views/procurementManagement/purchaseReturnOrder/New.vue"));
 const tableData = ref([])
 const selectedRows = ref([])
@@ -61,10 +121,111 @@
 const page = reactive({
   current: 1,
   size: 100,
+  total: 0,
 })
-const total = ref(0)
+const detailVisible = ref(false)
+const detailLoading = ref(false)
+const detailData = ref({})
+const detailProducts = ref([])
 // 鏄惁鏄剧ず鏂板寮规
 const isShowNewModal = ref(false)
+const returnTypeOptions = [
+  { label: '閫�璐ч��娆�', value: 0 },
+  { label: '鎷掓敹', value: 1 },
+]
+const projectPhaseOptions = [
+  { label: '绔嬮」', value: 0 },
+  { label: '璁捐', value: 1 },
+  { label: '閲囪喘', value: 2 },
+  { label: '鐢熶骇', value: 3 },
+  { label: '鍑鸿揣', value: 4 },
+]
+const tableColumn = ref([
+  {
+    label: '閫�鏂欏崟鍙�',
+    prop: 'no',
+  },
+  {
+    label: '閫�璐ф柟寮�',
+    prop: 'returnType',
+    formatData: (val) => returnTypeOptions.find(item => item.value === val)?.label || '--',
+  },
+  {
+    label: '渚涘簲鍟嗗悕绉�',
+    prop: 'supplierName',
+    width: 180,
+  },
+  {
+    label: '椤圭洰闃舵',
+    prop: 'projectPhase',
+    width: 100,
+    formatData: (val) => projectPhaseOptions.find(item => String(item.value) === String(val))?.label || '--',
+  },
+  {
+    label: '鍏宠仈鍗曞彿',
+    prop: 'purchaseContractNumber',
+    width: 160,
+  },
+  {
+    label: '鍒朵綔鏃ユ湡',
+    prop: 'preparedAt',
+    width: 130,
+  },
+  {
+    label: '鍒跺崟浜�',
+    prop: 'preparedUserName',
+    width: 110,
+  },
+  {
+    label: '閫�鏂欎汉',
+    prop: 'returnUserName',
+    width: 110,
+  },
+  
+  {
+    label: '鏁村崟鎶樻墸棰�',
+    prop: 'totalDiscountAmount',
+    width: 120,
+  },
+  {
+    label: '鏁村崟鎶樻墸鐜�',
+    prop: 'totalDiscountRate',
+    width: 120,
+  },
+  {
+    label: '鎴愪氦閲戦',
+    prop: 'totalAmount',
+    width: 120,
+  },
+  {
+    label: '鍒涘缓浜�',
+    prop: 'createUserName',
+    width: 110,
+  },
+  {
+    label: '鍒涘缓鏃堕棿',
+    prop: 'createTime',
+    width: 170,
+  },
+  {
+    label: '鏈�杩戞洿鏂版椂闂�',
+    prop: 'updateTime',
+    width: 170,
+  },
+  {
+    label: '澶囨敞',
+    prop: 'remark',
+    width: 180,
+  },
+  {
+    fixed: 'right',
+    label: '鎿嶄綔',
+    dataType: 'slot',
+    slot: 'operation',
+    width: 100,
+    align: 'center',
+  },
+])
 const data = reactive({
   searchForm: {
     no: '',
@@ -79,6 +240,30 @@
   getList()
 }
 
+const handleDetail = (row) => {
+  if (!row?.id) {
+    proxy?.$modal?.msgWarning('鏈幏鍙栧埌鍗曟嵁ID')
+    return
+  }
+  detailVisible.value = true
+  detailLoading.value = true
+  getPurchaseReturnOrderDetail(row.id).then(res => {
+    const payload = res?.data || {}
+    detailData.value = payload
+    // 鎷兼帴杩炰釜瀵硅薄鎴愪竴涓璞★紝鏂逛究灞曠ず item 鍜� item.salesLedgerProduct 閲岀殑瀛楁
+    
+    
+    detailProducts.value =
+      payload.purchaseReturnOrderProductsDetailVoList.map(item => ({ ...item, ...item.salesLedgerProduct })) ||
+      []
+  }).catch(() => {
+    proxy?.$modal?.msgError('鑾峰彇璇︽儏澶辫触')
+  }).finally(() => {
+    detailLoading.value = false
+  })
+}
+
+
 const paginationChange = (obj) => {
   page.current = obj.page;
   page.size = obj.limit;
@@ -90,7 +275,7 @@
   findPurchaseReturnOrderListPage({ ...searchForm.value, ...page }).then(res => {
     tableLoading.value = false
     tableData.value = res.data.records
-    total.value = res.data.total
+    page.total = res.data.total
   }).catch(() => {
     tableLoading.value = false
   })
@@ -102,6 +287,25 @@
   selectedRows.value = selection.filter(item => item.id);
 }
 
+const getReturnTypeLabel = (value) => {
+  return returnTypeOptions.find(item => String(item.value) === String(value))?.label || '--'
+}
+
+const getProjectPhaseLabel = (value) => {
+  return projectPhaseOptions.find(item => String(item.value) === String(value))?.label || '--'
+}
+
+const formatAmount = (value) => {
+  if (value === null || value === undefined || value === '') {
+    return '--'
+  }
+  const num = Number(value)
+  if (Number.isNaN(num)) {
+    return value
+  }
+  return num.toFixed(2)
+}
+
 onMounted(() => {
   getList()
 })

--
Gitblit v1.9.3