修改运输金额管理，修改查看结算单页

2025-08-13 21:45:35 +08:00 · 2025-08-13 21:45:35 +08:00 · 0aba0aabb6
commit 0aba0aabb6
parent afb46f9e7b
6 changed files with 130 additions and 138 deletions
--- a/src/views/order/loadOrder/index.vue
+++ b/src/views/order/loadOrder/index.vue
@ -317,10 +317,6 @@ export default {
 </script>

 <style lang="scss" scoped>
-.app-container {
-  padding: 20px;
-}
-
 .filter-container {
  display: flex;
  align-items: center;
--- a/src/views/order/settlementOrder/generateOrder/index.vue
+++ b/src/views/order/settlementOrder/generateOrder/index.vue
@ -371,10 +371,6 @@ export default {
 </script>

 <style lang="scss" scoped>
-.app-container {
-  padding: 20px;
-}
-
 .page-title {
  margin-bottom: 20px;
  color: #303133;
--- a/src/views/order/settlementOrder/index.vue
+++ b/src/views/order/settlementOrder/index.vue
@ -195,10 +195,6 @@ export default {
 </script>

 <style lang="scss" scoped>
-.app-container {
-  padding: 20px;
-}
-
 .filter-container {
  display: flex;
  align-items: center;
--- a/src/views/order/settlementOrder/orderDetail/index.vue
+++ b/src/views/order/settlementOrder/orderDetail/index.vue
@ -171,9 +171,8 @@ export default {
    SettlementPdf
  },
  data() {
-    const defaultStartDate = new Date();
-    const defaultEndDate = new Date();
    return {
+      orderId: '',
      loading: false,
      scenicAreaOptions: [],
      settlementStatus: 0,
@ -182,9 +181,9 @@ export default {
      query: {
        batchNo: "",
        scenicArea: "",
-        dateRange: [defaultStartDate, defaultEndDate],
+        dateRange: [],
      },
-      defaultDateRange: [defaultStartDate, defaultEndDate],
+      defaultDateRange: [],
      page: {
        current: 1,
        size: 10
@ -209,9 +208,20 @@ export default {
    }))

    // 获取订单详情并处理数据
-    const orderId = this.$route.query.orderId
-    if (orderId) {
+    this.orderId = this.$route.query.orderId
+    if(this.orderId) {
      this.loading = true
+      this.getOrderDetail(this.orderId)
+    } else {
+      this.$message.error('没有提供订单ID')
+    }
+  },
+  methods: {
+    getOrderStatusText,
+    getSettlementStatusText,
+    getOrderStatusClass,
+    getSettlementStatusClass,
+    async getOrderDetail(orderId) {
      try {
        const settleOrderDetail = await getSettleOrderDetail(orderId)
        await Promise.all(settleOrderDetail.map(async (item) => {
@ -224,8 +234,9 @@ export default {
          item.createBy = pilotResponse.name

          // 获取景区名称
-          const scenic = scenicResponse.find(s => s.key === item.attractionId)
-          item.scenicName = scenic ? scenic.value : ''
+          console.log(this.scenicAreaOptions)
+          const scenic = this.scenicAreaOptions.find(s => s.value === item.attractionId)
+          item.scenicName = scenic ? scenic.label : ''
        }))
        this.originalData = settleOrderDetail // 保存原始数据
        this.tableData = settleOrderDetail
@ -239,13 +250,7 @@ export default {
      } finally {
        this.loading = false
      }
-    }
-  },
-  methods: {
-    getOrderStatusText,
-    getSettlementStatusText,
-    getOrderStatusClass,
-    getSettlementStatusClass,
+    },
    handleSearch() {
      this.loading = true
      try {
@ -290,10 +295,10 @@ export default {
    },
    async handleCancelSettlement() {
      try {
-        await updateSettleOrderStatus(this.$route.query.orderId, 3)
+        await updateSettleOrderStatus(this.orderId, 3)
        this.settlementStatus = 3
        this.$message.success('取消结算成功')
-        this.handleSearch() // 刷新数据
+        this.getOrderDetail(this.orderId) // 刷新数据
      } catch (error) {
        console.error('Error canceling settlement:', error)
        this.$message.error('取消结算失败')
@ -307,9 +312,9 @@ export default {
      this.page.current = val;
    },
    async handlePrint() {
-      if (this.$route.query.orderId) {
+      if (this.orderId) {
        try {
-          // Wait for Vue to render the component
+          // 等待VUE渲染组件
          await this.$nextTick()
          await this.$refs.settlementPdf.generatePDF()
        } catch (error) {
@ -322,11 +327,11 @@ export default {
    },
    async handleStatusChange(status) {
      try {
-        await updateSettleOrderStatus(this.$route.query.orderId, status)
+        await updateSettleOrderStatus(this.orderId, status)
        this.settlementStatus = status
        const statusText = status === 1 ? '已确认' : '已完成'
        this.$message.success(`结算单状态已更新为：${statusText}`)
-        this.handleSearch() // 刷新数据
+        this.getOrderDetail(this.orderId) // 刷新数据
      } catch (error) {
        console.error('Error updating settlement status:', error)
        this.$message.error('更新结算状态失败')
@ -337,10 +342,6 @@ export default {
 </script>

 <style lang="scss" scoped>
-.app-container {
-  padding: 20px;
-}
-
 .page-title {
  margin-bottom: 20px;
  font-size: 22px;
--- a/src/views/transport-fee/components/SetFeeModal.vue
+++ b/src/views/transport-fee/components/SetFeeModal.vue
@ -7,21 +7,13 @@
  >
    <!-- 表单区域 -->
    <el-form ref="feeForm" :model="form" :rules="rules" label-width="100px">
-      <!-- 景区名称（只读） -->
-      <el-form-item label="景区名称" prop="scenicName">
-        <el-input v-model="form.scenicName" disabled></el-input>
-      </el-form-item>
-
      <!-- 金额输入（带校验） -->
      <el-form-item label="金额 (KG)" prop="feePerKg">
-        <el-input-number
+        <el-input
          v-model="form.feePerKg"
-          :min="0.01"
-          :step="0.01"
-          :precision="2"
          placeholder="请输入金额"
          style="width: 100%"
-        ></el-input-number>
+        ></el-input>
      </el-form-item>
    </el-form>

@ -34,65 +26,65 @@
 </template>

 <script>
+import { edit } from "@/api/system/scenic";

 export default {
-  name: 'SetFeeModal',
+  name: "SetFeeModal",
  props: {
    visible: {
      type: Boolean,
-      required: true
+      required: true,
    },
    scenicInfo: {
      type: Object,
-      default: () => null
-    }
+      default: () => null,
+    },
  },
  data() {
    return {
      form: {
-        scenicName: '',
        feePerKg: null,
-        id: null
+        id: null,
      },
      rules: {
        feePerKg: [
-          { required: true, message: '请输入金额', trigger: 'blur' },
-          { type: 'number', min: 0.01, message: '金额必须大于 0', trigger: 'blur' }
-        ]
-      }
-    }
+          { required: true, message: "请输入金额", trigger: "blur" },
+        ],
+      },
+    };
  },
  watch: {
    scenicInfo(newVal) {
      if (newVal) {
        this.form = {
-          scenicName: newVal.scenicName || '',
          feePerKg: newVal.feePerKg || null,
-          id: newVal.id || null
-        }
+          id: newVal.id || null,
+        };
      }
-    }
+    },
  },
  methods: {
- async handleSubmit() {
-  try {
-    const valid = await this.$refs.feeForm.validate()
-    if (valid) {
-      // 模拟请求成功（不调用真实 API）
-      console.log('提交的数据:', {
-        id: this.form.id,
-        feePerKg: this.form.feePerKg
-      })
-
-      this.$message.success('设置成功')
-      this.$emit('success')
-      this.handleCancel()
-    }
-  } catch (error) {
-    console.error('表单验证失败', error)
-    this.$message.error('请输入正确的金额')
-  }
-}
-}
-}
+    handleCancel() {
+      this.$emit("update:visible", false);
+      this.$refs.feeForm.resetFields();
+    },
+    async handleSubmit() {
+      try {
+        const valid = await this.$refs.feeForm.validate();
+        if (valid) {
+          await edit({
+            id: this.form.id,
+            price: this.form.feePerKg,
+          });
+          this.$message.success("设置成功");
+          this.$emit("success");
+          this.handleCancel();
+        }
+      } catch (error) {
+        console.error("修改景区价格失败:", error);
+        this.$message.error(error.message || "修改失败");
+      }
+    },
+  },
+};
 </script>
--- a/src/views/transport-fee/index.vue
+++ b/src/views/transport-fee/index.vue
@ -1,27 +1,27 @@
 <template>
  <div class="app-container">
    <!-- 搜索栏 -->
-    <el-card class="box-card">
-      <div class="filter-container">
-        <el-input
-          v-model="query.scenicName"
-          placeholder="请输入景区名称或区域名称"
-          style="width: 200px"
-          clearable
-        />
-        <el-button type="primary" @click="handleSearch">查询</el-button>
-        <el-button @click="handleReset">重置</el-button>
-      </div>
-    </el-card>
+    <div class="filter-container">
+      <el-input
+        v-model="query.scenicName"
+        placeholder="请输入景区名称或区域名称"
+        style="width: 200px"
+        clearable
+      />
+      <el-button type="primary" @click="handleSearch">查询</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>

    <!-- 表格 -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="areaName" label="区域名称" align="left" />
      <el-table-column prop="scenicName" label="景区名称" align="left" />
-      <el-table-column prop="feePerKg" label="金额 / KG" align="left" />
+      <el-table-column prop="feePerKg" label="金额 / KG" align="center" />
      <el-table-column label="操作" width="120" align="center" fixed="right">
        <template slot-scope="scope">
-          <el-button type="primary" size="mini" @click="handleSetFee(scope.row)">设置金额</el-button>
+          <el-button type="primary" size="mini" @click="handleSetFee(scope.row)"
+            >设置金额</el-button
+          >
        </template>
      </el-table-column>
    </el-table>
@ -49,17 +49,18 @@
 </template>

 <script>
-
+import SetFeeModal from "./components/SetFeeModal.vue";
+import { list } from "@/api/system/scenic";
 export default {
-  name: 'TransportFee',
+  name: "TransportFee",
  components: {
-    SetFeeModal
+    SetFeeModal,
  },
  data() {
    return {
      // 查询条件
      query: {
-        scenicName: ''
+        scenicName: "",
      },
      // 表格数据
      tableData: [],
@ -67,74 +68,84 @@ export default {
      page: {
        current: 1,
        size: 10,
-        total: 0
+        total: 0,
      },
      // 弹窗控制
      setFeeVisible: false,
-      currentScenicInfo: null
-    }
+      currentScenicInfo: null,
+    };
  },
  mounted() {
-    this.fetchData()
+    this.fetchData();
  },
  methods: {
-  async fetchData() {
-    // 模拟数据填充
-    this.tableData = [
-      { areaName: '华南区', scenicName: '白云山', feePerKg: 5.5 },
-      { areaName: '华东区', scenicName: '西湖', feePerKg: 4.8 }
-    ]
-    this.page.total = 2
-  }
-},
-
+    async fetchData() {
+      try {
+        const params = {
+          page: this.page.current - 1,
+          size: this.page.size,
+          name: this.query.scenicName,
+        };
+        const { content, totalElements } = await list(params);
+        this.tableData = content.map((item) => ({
+          id: item.id,
+          areaName: item.areaName,
+          scenicName: item.name,
+          feePerKg: item.price ? item.price + '元' : "无",
+        }));
+        this.page.total = parseInt(totalElements);
+      } catch (error) {
+        console.error("获取景区数据失败:", error);
+        this.$message.error("获取景区数据失败");
+      }
+    },
    // 搜索
    handleSearch() {
-      this.page.current = 1
-      this.fetchData()
+      this.page.current = 1;
+      this.fetchData();
    },

    // 重置
    handleReset() {
      this.query = {
-        scenicName: ''
-      }
-      this.page.current = 1
-      this.fetchData()
+        scenicName: "",
+      };
+      this.page.current = 1;
+      this.fetchData();
    },

    // 分页大小变更
    handleSizeChange(size) {
-      this.page.size = size
-      this.fetchData()
+      this.page.size = size;
+      this.fetchData();
    },

    // 当前页变更
    handleCurrentChange(current) {
-      this.page.current = current
-      this.fetchData()
+      this.page.current = current;
+      this.fetchData();
    },

    // 设置金额按钮
    handleSetFee(row) {
-      this.currentScenicInfo = row
-      this.setFeeVisible = true
+      this.currentScenicInfo = {
+        id: row.id,
+        scenicName: row.scenicName,
+        feePerKg: row.feePerKg,
+      };
+      this.setFeeVisible = true;
    },

    // 设置金额成功回调
    handleSetFeeSuccess() {
-      this.setFeeVisible = false
-      this.fetchData()
-    }
-  }
-
+      this.setFeeVisible = false;
+      this.fetchData();
+    },
+  },
+};
 </script>

 <style lang="scss" scoped>
-.app-container {
-  padding: 20px;
-}
-
 .filter-container {
  display: flex;
  align-items: center;