refactor: 优化销售账户页面的明细展示和交互逻辑

yyb

2 天以前 b01f86dddbefbd03da6b6fa478ddecc02aabd203

refactor: 优化销售账户页面的明细展示和交互逻辑

- 更新明细项的折叠状态管理，支持单条记录默认展开
- 增强用户体验，添加详细信息的预览和切换功能
- 统一空值处理逻辑，提升信息展示的清晰度
- 调整样式以改善界面布局和可读性

 src/pages/sales/salesAccount/out.vue

@@ -22,20 +22,45 @@
    <view class="detail-list"
          v-if="tableData.length > 0">
      <view v-for="(item, index) in tableData"
            :key="index"
            :key="rowKey(item, index)"
            class="detail-item">
        <view class="item-header">
        <view class="item-header"
              @click="toggleRow(item, index)">
          <view class="item-left">
            <view class="record-icon">
              <up-icon name="file-text"
                       size="16"
                       color="#ffffff"></up-icon>
            </view>
            <text class="item-index">{{ item.productCategory }}</text>
            <view class="item-title-wrap">
              <text class="item-index">{{ item.productCategory || "产品" }}</text>
            </view>
          </view>
          <view class="item-header-right">
            <text class="toggle-text">{{ rowExpanded(item, index) ? "收起" : "展开" }}</text>
            <up-icon :name="rowExpanded(item, index) ? 'arrow-up' : 'arrow-down'"
                     size="16"
                     color="#999999"></up-icon>
          </view>
        </view>
        <up-divider></up-divider>
        <view class="item-details">
        <view v-if="!rowExpanded(item, index)"
              class="item-preview">
          <view class="detail-row">
            <text class="detail-label">楼层编号</text>
            <text class="detail-value">{{ dv(item.floorCode) }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">规格型号</text>
            <text class="detail-value">{{ dv(item.specificationModel) }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">数量</text>
            <text class="detail-value">{{ dv(item.quantity) }}</text>
          </view>
        </view>
        <view v-else
              class="item-details">
          <view class="detail-row">
            <text class="detail-label">楼层编号</text>
            <text class="detail-value">{{ dv(item.floorCode) }}</text>
@@ -148,8 +173,27 @@
  // 表格数据
  const tableData = ref([]);

  const dv = v =>
    v === null || v === undefined || v === "" ? "-" : v;
  /** 每条明细折叠状态：仅一条时默认展开，多条时默认收起 */
  const expandedRows = ref({});

  const rowKey = (item, index) =>
    item?.id != null && item?.id !== "" ? `id-${item.id}` : `idx-${index}`;

  const rowExpanded = (item, index) => !!expandedRows.value[rowKey(item, index)];

  const toggleRow = (item, index) => {
    const k = rowKey(item, index);
    expandedRows.value = {
      ...expandedRows.value,
      [k]: !expandedRows.value[k],
    };
  };

  const dv = v => {
    if (v === null || v === undefined || v === "") return "-";
    if (typeof v === "boolean") return v ? "是" : "否";
    return v;
  };

  // 返回上一页
  const goBack = () => {
@@ -173,7 +217,14 @@
      type: 1,
    })
      .then(res => {
        tableData.value = res.data;
        const list = res.data || res.records || [];
        tableData.value = list;
        if (list.length === 1) {
          const k = rowKey(list[0], 0);
          expandedRows.value = { [k]: true };
        } else {
          expandedRows.value = {};
        }
        closeToast();
      })
      .catch(() => {
@@ -276,12 +327,49 @@
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .item-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .item-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }

  .toggle-text {
    font-size: 12px;
    color: #2979ff;
  }

  .item-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
  }

  .item-preview {
    padding: 12px 0 16px;
  }

  .preview-tip {
    margin-top: 8px;
    margin-bottom: 0 !important;
    justify-content: center;
  }

  .preview-tip-text {
    font-size: 11px;
    color: #bbb;
  }

  .record-icon {