采购台账重构

zhangwencui

13 小时以前 b973bcee308e99b5fd8a69640f11069e810346f4

 src/pages/sales/salesAccount/view.vue

@@ -1,15 +1,8 @@
<template>
  <view class="account-view">
    <!-- 顶部标题栏 -->
      <van-nav-bar
         title="台账详情"
         left-text="返回"
         left-arrow
         @click-left="goBack"
         fixed
         placeholder
      />

    <!-- 使用通用页面头部组件 -->
    <PageHeader title="台账详情"
                @back="goBack" />
    <!-- 基本信息展示 -->
    <view class="info-section">
      <view class="section-title">基本信息</view>
@@ -52,18 +45,22 @@
        </view>
      </view>
    </view>

    <!-- 产品信息展示 -->
    <view class="product-section" v-if="productData && productData.length > 0">
    <view class="product-section"
          v-if="productData && productData.length > 0">
      <view class="section-title">产品信息</view>
      <view class="product-card" v-for="(product, idx) in productData" :key="idx">
      <view class="product-card"
            v-for="(product, idx) in productData"
            :key="idx">
        <view class="product-header">
          <view class="product-title">
            <van-icon name="description" color="#2979ff" size="15" />
            <!-- 替换 van-icon 为 u-icon -->
            <u-icon name="file-text"
                    color="#2979ff"
                    size="15" />
            <text class="product-productCategory">产品 {{ idx + 1 }}</text>
          </view>
        </view>
        
        <view class="product-info">
          <view class="info-grid">
            <view class="info-item">
@@ -74,6 +71,10 @@
              <text class="info-label">规格型号</text>
              <text class="info-value">{{ product.specificationModel }}</text>
            </view>
            <!-- <view class="info-item">
              <text class="info-label">绑定机器</text>
              <text class="info-value">{{ product.speculativeTradingName }}</text>
            </view> -->
            <view class="info-item">
              <text class="info-label">单位</text>
              <text class="info-value">{{ product.unit }}</text>
@@ -106,210 +107,192 @@
        </view>
      </view>
    </view>

    <!-- 无产品信息提示 -->
    <view class="no-product" v-else>
    <view v-else
          class="no-product">
      <text>暂无产品信息</text>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { getSalesLedgerWithProducts } from "@/api/salesManagement/salesLedger";
  import { onMounted, ref } from "vue";
  import { getSalesLedgerWithProducts } from "@/api/salesManagement/salesLedger";
  import PageHeader from "@/components/PageHeader.vue";

// 表单数据
const form = ref({
  id: '',
  salesContractNo: '',
  customerContractNo: '',
  customerId: '',
  customerName: '',
  projectName: '',
  executionDate: '',
  paymentMethod: '',
  entryPerson: '',
  entryPersonName: '',
  entryDate: '',
  salesman: ''
});
  // 获取页面参数
  const editData = ref(null);

// 产品数据
const productData = ref([]);

// 编辑数据
const editData = ref(null);

// 返回上一页
const goBack = () => {
  // 清理本地存储的数据
  uni.removeStorageSync('editData');
  uni.navigateBack();
};

// 填充表单数据
const fillFormData = () => {
  if (!editData.value) return;
  
  // 获取完整的产品信息
  getSalesLedgerWithProducts({ id: editData.value.id, type: 1 }).then((res) => {
    productData.value = res.productData || [];
  const form = ref({
    id: "",
    salesContractNo: "",
    customerContractNo: "",
    customerId: "",
    customerName: "",
    projectName: "",
    executionDate: "",
    paymentMethod: "",
    entryPerson: "",
    entryPersonName: "",
    entryDate: "",
    salesman: "",
  });
  
  // 填充基本信息
  form.value.salesContractNo = editData.value.salesContractNo || '';
  form.value.customerContractNo = editData.value.customerContractNo || '';
  form.value.customerName = editData.value.customerName || '';
  form.value.projectName = editData.value.projectName || '';
  form.value.executionDate = editData.value.executionDate || '';
  form.value.paymentMethod = editData.value.paymentMethod || '';
  form.value.salesman = editData.value.salesman || '';
  form.value.entryPerson = editData.value.entryPerson || '';
  form.value.entryPersonName = editData.value.entryPersonName || '';
  form.value.entryDate = editData.value.entryDate || '';
  form.value.id = editData.value.id || '';
  form.value.customerId = editData.value.customerId || '';
};

onMounted(() => {
  // 获取编辑数据并填充表单
  const editDataStr = uni.getStorageSync('editData');
  if (editDataStr) {
    try {
      editData.value = JSON.parse(editDataStr);
      // 使用 nextTick 确保数据加载完成后再填充
      setTimeout(() => {
        fillFormData();
      }, 100);
    } catch (error) {
      console.error('解析编辑数据失败:', error);
  // 产品数据
  const productData = ref([]);

  // 返回上一页
  const goBack = () => {
    // 清理本地存储的数据
    uni.removeStorageSync("editData");
    uni.navigateBack();
  };

  // 填充表单数据
  const fillFormData = () => {
    if (!editData.value) return;

    // 获取完整的产品信息
    getSalesLedgerWithProducts({ id: editData.value.id, type: 1 }).then(res => {
      productData.value = res.productData || [];
      form.value = { ...res };
    });
  };

  onMounted(() => {
    // 获取编辑数据并填充表单
    const editDataStr = uni.getStorageSync("editData");
    if (editDataStr) {
      try {
        editData.value = JSON.parse(editDataStr);
        // 使用 nextTick 确保数据加载完成后再填充
        setTimeout(() => {
          fillFormData();
        }, 100);
      } catch (error) {
        console.error("解析编辑数据失败:", error);
      }
    }
  }
});
  });
</script>

<style scoped lang="scss">
.account-view {
  min-height: 100vh;
  background: #f8f9fa;
  padding-bottom: 2rem;
}
  .account-view {
    min-height: 100vh;
    background: #f8f9fa;
    padding-bottom: 2rem;
  }

.header {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 1rem 1.25rem;
  border-bottom: 0.0625rem solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
  /* 兼容 iOS 刘海/灵动岛安全区 */
  padding-top: env(safe-area-inset-top);
}
  .header {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 1rem 1.25rem;
    border-bottom: 0.0625rem solid #f0f0f0;
    position: sticky;
    top: 0;
    z-index: 100;
  }

.title {
  flex: 1;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333;
}
  .title {
    flex: 1;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
  }

.info-section {
  background: #fff;
  margin: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04);
}
  .info-section {
    background: #fff;
    margin: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.04);
  }

.section-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 0.0625rem solid #e8e8e8;
}
  .product-section {
    background: #fff;
    margin: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.04);
  }

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
  .section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 0.0625rem solid #e8e8e8;
  }

.info-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
  .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

.info-label {
  font-size: 0.75rem;
  color: #666;
  font-weight: 400;
}
  .info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

.info-value {
  font-size: 0.875rem;
  color: #333;
  font-weight: 500;
}
  .info-label {
    font-size: 0.75rem;
    color: #666;
    font-weight: 400;
  }

.info-value.highlight {
  color: #2979ff;
  font-weight: 600;
}
  .info-value {
    font-size: 0.875rem;
    color: #333;
    font-weight: 500;
  }

.product-section {
  background: #fff;
  margin: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04);
}
  .info-value.highlight {
    color: #2979ff;
    font-weight: 600;
  }

.product-card {
  background: #f8f9fa;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}
  .product-card {
    background: #f8f9fa;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 0.0625rem solid #e8e8e8;
  }

.product-card:last-child {
  margin-bottom: 0;
}
  .product-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 0.0625rem solid #e8e8e8;
  }

.product-header {
  display: flex;
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 0.0625rem solid #e8e8e8;
  margin-bottom: 1rem;
}
  .product-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

.product-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
  .product-productCategory {
    font-size: 0.875rem;
    font-weight: 500;
    color: #333;
  }

.product-productCategory {
  font-size: 0.875rem;
  font-weight: 500;
  color: #333;
}
  .product-info .info-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

.product-info .info-grid {
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.no-product {
  text-align: center;
  padding: 2rem;
  color: #999;
  font-size: 0.875rem;
}
  .no-product {
    text-align: center;
    padding: 2rem;
    color: #999;
    font-size: 0.875rem;
  }
</style>