src/api/equipmentManagement/runManagement.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,16 @@
import request from "@/utils/request";

export const getLedgerPage = (params) => {
  return request({
    url: "/device/ledger/page",
    method: "get",
    params,
  });
};
export const editLedger = (data) => {
  return request({
    url: "/device/ledger",
    method: "put",
    data,
  });
};

 src/api/procurementManagement/procurementInvoiceLedger.js

@@ -59,13 +59,13 @@
}

// æŸ¥è¯¢åˆ—表
export function invoiceListPage(query) {
  return request({
    url: "/purchase/registration/listPage",
    method: "get",
    params: query,
  });
}
// export function invoiceListPage(query) {
//   return request({
//     url: "/purchase/registration/listPage",
//     method: "get",
//     params: query,
//   });
// }

export function productRecordPage(query) {
  return request({
@@ -83,11 +83,18 @@
  });
}

export function getProductRecordById(params) {
// export function getProductRecordById(params) {
//   return request({
//     url: "/purchase/registration/getProductRecordById",
//     method: "get",
//     params: params,
//   });
// }
export function getProductRecordById(data) {
  return request({
    url: "/purchase/registration/getProductRecordById",
    method: "get",
    params: params,
     method: "post",
    data: data,
  });
}

@@ -123,3 +130,11 @@
    data: query,
  });
}
// æŸ¥è¯¢åˆ—表
export function invoiceListPage(query) {
  return request({
    url: "/sales/product/listPagePurchaseLedger",
    method: "get",
    params: query,
  });
}

 src/pages.json

@@ -492,6 +492,13 @@
      }
    },
    {
      "path": "pages/equipmentManagement/runManagement/index",
      "style": {
        "navigationBarTitleText": "运行管理",
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/equipmentManagement/repair/index",
      "style": {
        "navigationBarTitleText": "设备报修",

 src/pages/cooperativeOffice/noticeManagement/index.vue

@@ -1,6 +1,7 @@
<template>
  <view class="notice-page">
    <PageHeader title="通知公告" @back="goBack" />
    <PageHeader title="通知公告"
                @back="goBack" />
    <!-- æœç´¢è¡¨å• -->
    <!-- <view class="search_form">
      <up-button type="primary" size="small" @click="openForm('add')">新增公告</up-button>
@@ -8,106 +9,108 @@
          åˆ é™¤
        </up-button>
    </view> -->

    <!-- é€šçŸ¥å…¬å‘Šæ¿ -->
    <view class="notice-board">
      <!-- ç»Ÿä¸€é€šçŸ¥åŒºåŸŸ -->
      <view class="notice-section" v-if="totalNoticeCount > 0">
      <view class="notice-section"
            v-if="totalNoticeCount > 0">
        <view class="section-header">
          <h3>� é€šçŸ¥å…¬å‘Š</h3>
          <text class="section-count">{{ totalNoticeCount }}条</text>
        </view>
        <view class="notice-cards">
          <!-- æ”¾å‡é€šçŸ¥ -->
          <view
              v-for="notice in holidayNotices"
              :key="'holiday-' + notice.id"
              class="notice-card holiday-card"
              :class="{ 'urgent': notice.priority === '3' }"
          >
          <view v-for="notice in holidayNotices"
                :key="'holiday-' + notice.id"
                class="notice-card holiday-card"
                :class="{ 'urgent': notice.priority === '3' }">
            <view class="card-header">
              <view class="card-title">
                <view class="holiday-icon">
                  <up-icon name="calendar" size="18" color="#67c23a" />
                  <up-icon name="calendar"
                           size="18"
                           color="#67c23a" />
                </view>
                <text>{{ notice.title }}</text>
              </view>
<!--              <view class="card-actions">-->
<!--                <up-button-->
<!--                  text-->
<!--                  type="primary"-->
<!--                  size="mini"-->
<!--                  @click="handleEdit(notice)"-->
<!--                  :disabled="isNoticeExpired(notice)"-->
<!--                >-->
<!--                  ç¼–辑-->
<!--                </up-button>-->
<!--                <up-button-->
<!--                  text-->
<!--                  type="error"-->
<!--                  size="mini"-->
<!--                  @click="handleDelete(notice.id)"-->
<!--                >-->
<!--                  åˆ é™¤-->
<!--                </up-button>-->
<!--              </view>-->
              <!--              <view class="card-actions">-->
              <!--                <up-button-->
              <!--                  text-->
              <!--                  type="primary"-->
              <!--                  size="mini"-->
              <!--                  @click="handleEdit(notice)"-->
              <!--                  :disabled="isNoticeExpired(notice)"-->
              <!--                >-->
              <!--                  ç¼–辑-->
              <!--                </up-button>-->
              <!--                <up-button-->
              <!--                  text-->
              <!--                  type="error"-->
              <!--                  size="mini"-->
              <!--                  @click="handleDelete(notice.id)"-->
              <!--                >-->
              <!--                  åˆ é™¤-->
              <!--                </up-button>-->
              <!--              </view>-->
            </view>
            <view class="card-content">
              <text>{{ notice.content }}</text>
            </view>
            <view class="card-footer">
              <view class="card-meta">
                <text class="type" :class="'type-' + notice.type">
                <text class="type"
                      :class="'type-' + notice.type">
                  {{ notice.type }}
                </text>
                <text class="priority" :class="'priority-' + notice.priority">
                <text class="priority"
                      :class="'priority-' + notice.priority">
                  {{ getPriorityText(notice.priority) }}
                </text>
                <text class="status" :class="'status-' + getNoticeStatus(notice)">
                <text class="status"
                      :class="'status-' + getNoticeStatus(notice)">
                  {{ getStatusText(getNoticeStatus(notice)) }}
                </text>
              </view>
              <view class="card-info">
                <text class="creator">{{ notice.createUserName }}</text>
                <text class="expiration" v-if="notice.expirationDate">截止日期：{{ notice.expirationDate }}</text>
                <text class="expiration"
                      v-if="notice.expirationDate">截止日期：{{ notice.expirationDate }}</text>
              </view>
            </view>
            <view class="card-remark" v-if="notice.remark">
              <up-icon name="info-circle" size="16" color="#409eff" />
            <view class="card-remark"
                  v-if="notice.remark">
              <up-icon name="info-circle"
                       size="16"
                       color="#409eff" />
              <text>{{ notice.remark }}</text>
            </view>
          </view>
          
          <!-- è®¾å¤‡ç»´ä¿®é€šçŸ¥ -->
          <view
              v-for="notice in maintenanceNotices"
              :key="'maintenance-' + notice.id"
              class="notice-card maintenance-card"
              :class="{ 'urgent': notice.priority === '3' }"
          >
          <view v-for="notice in maintenanceNotices"
                :key="'maintenance-' + notice.id"
                class="notice-card maintenance-card"
                :class="{ 'urgent': notice.priority === '3' }">
            <view class="card-header">
              <view class="card-title">
                <view class="maintenance-icon">
                  <up-icon name="wrench" size="18" color="#e6a23c" />
                  <up-icon name="wrench"
                           size="18"
                           color="#e6a23c" />
                </view>
                <text>{{ notice.title }}</text>
              </view>
              <view class="card-actions">
                <up-button
                  text
                  type="primary"
                  size="mini"
                  @click="handleEdit(notice)"
                  :disabled="isNoticeExpired(notice)"
                >
                <up-button text
                           type="primary"
                           size="mini"
                           @click="handleEdit(notice)"
                           :disabled="isNoticeExpired(notice)">
                  ç¼–辑
                </up-button>
                <up-button
                  text
                  type="error"
                  size="mini"
                  @click="handleDelete(notice.id)"
                >
                <up-button text
                           type="error"
                           size="mini"
                           @click="handleDelete(notice.id)">
                  åˆ é™¤
                </up-button>
              </view>
@@ -117,56 +120,61 @@
            </view>
            <view class="card-footer">
              <view class="card-meta">
                <text class="priority" :class="'priority-' + notice.priority">
                <text class="priority"
                      :class="'priority-' + notice.priority">
                  {{ getPriorityText(notice.priority) }}
                </text>
                <text class="status" :class="'status-' + getNoticeStatus(notice)">
                <text class="status"
                      :class="'status-' + getNoticeStatus(notice)">
                  {{ getStatusText(getNoticeStatus(notice)) }}
                </text>
              </view>
              <view class="card-info">
                <text class="creator">{{ notice.createUserName }}</text>
                <text class="expiration" v-if="notice.expirationDate">截止日期：{{ notice.expirationDate }}</text>
                <text class="expiration"
                      v-if="notice.expirationDate">截止日期：{{ notice.expirationDate }}</text>
              </view>
            </view>
            <view class="card-remark" v-if="notice.remark">
              <up-icon name="info-circle" size="16" color="#409eff" />
            <view class="card-remark"
                  v-if="notice.remark">
              <up-icon name="info-circle"
                       size="16"
                       color="#409eff" />
              <text>{{ notice.remark }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- ç©ºçŠ¶æ€ -->
      <view class="empty-state" v-if="holidayNotices.length === 0 && maintenanceNotices.length === 0">
      <view class="empty-state"
            v-if="holidayNotices.length === 0 && maintenanceNotices.length === 0">
        <text>暂无通知公告</text>
      </view>
    </view>

    <!-- æ–°å¢ž/编辑弹窗 -->
    <up-popup
      v-model:show="dialogVisible"
      mode="bottom"
      :round="18"
      :safeAreaInsetBottom="true"
      @close="resetForm"
    >
    <up-popup v-model:show="dialogVisible"
              mode="bottom"
              :round="18"
              :safeAreaInsetBottom="true"
              @close="resetForm">
      <view class="dialog-container">
        <view class="dialog-header">
          <text class="dialog-title">{{ dialogTitle }}</text>
        </view>
        <view class="dialog-body">
          <up-form
            ref="formRef"
            :model="form"
            :rules="rules"
            labelWidth="80"
          >
            <up-form-item label="公告标题" prop="title">
              <up-input v-model="form.title" placeholder="请输入公告标题" />
          <up-form ref="formRef"
                   :model="form"
                   :rules="rules"
                   labelWidth="80">
            <up-form-item label="公告标题"
                          prop="title">
              <up-input v-model="form.title"
                        placeholder="请输入公告标题" />
            </up-form-item>
            <up-form-item label="公告类型" prop="type">
              <up-input v-model="form.type" placeholder="请输入公告类型" />
            <up-form-item label="公告类型"
                          prop="type">
              <up-input v-model="form.type"
                        placeholder="请输入公告类型" />
            </up-form-item>
            <up-form-item label="状态">
              <up-radio-group v-model="form.status">
@@ -174,58 +182,47 @@
                <up-radio :name="1">正式发布</up-radio>
              </up-radio-group>
            </up-form-item>
            <up-form-item label="优先级" prop="priority">
              <up-select
                v-model="form.priority"
                :options="priorityOptions"
                placeholder="请选择优先级"
              />
            <up-form-item label="优先级"
                          prop="priority">
              <up-select v-model="form.priority"
                         :options="priorityOptions"
                         placeholder="请选择优先级" />
            </up-form-item>
            <up-form-item label="过期时间" prop="expirationDate">
              <up-datetime-picker
                v-model="form.expirationDate"
                mode="date"
                @confirm="onExpireConfirm"
              >
                <up-input
                  :value="form.expirationDate"
                  placeholder="请选择日期"
                  readonly
                />
            <up-form-item label="过期时间"
                          prop="expirationDate">
              <up-datetime-picker v-model="form.expirationDate"
                                  mode="date"
                                  @confirm="onExpireConfirm">
                <up-input :value="form.expirationDate"
                          placeholder="请选择日期"
                          readonly />
              </up-datetime-picker>
            </up-form-item>
            <up-form-item label="公告内容" prop="content">
              <up-textarea
                v-model="form.content"
                placeholder="请输入公告内容"
                :maxlength="500"
                count
              />
            <up-form-item label="公告内容"
                          prop="content">
              <up-textarea v-model="form.content"
                           placeholder="请输入公告内容"
                           :maxlength="500"
                           count />
            </up-form-item>
            <up-form-item label="备注">
              <up-textarea
                v-model="form.remark"
                placeholder="请输入备注信息"
                :maxlength="200"
                count
              />
              <up-textarea v-model="form.remark"
                           placeholder="请输入备注信息"
                           :maxlength="200"
                           count />
            </up-form-item>
          </up-form>
        </view>
        <view class="dialog-footer">
          <up-button
            text="取消"
            type="info"
            plain
            @click="dialogVisible = false"
            :customStyle="{ marginRight: '10px', flex: 1 }"
          />
          <up-button
            text="确定"
            type="primary"
            @click="submitForm"
            :customStyle="{ flex: 1 }"
          />
          <up-button text="取消"
                     type="info"
                     plain
                     @click="dialogVisible = false"
                     :customStyle="{ marginRight: '10px', flex: 1 }" />
          <up-button text="确定"
                     type="primary"
                     @click="submitForm"
                     :customStyle="{ flex: 1 }" />
        </view>
      </view>
    </up-popup>
@@ -233,581 +230,580 @@
</template>

<script setup>
import { onMounted, ref, reactive, toRefs } from "vue";
import { onReachBottom } from "@dcloudio/uni-app";
import PageHeader from "@/components/PageHeader.vue";
import useUserStore from "@/store/modules/user";
import {
  addNotice,
  delNotice,
  getCount,
  listNotice,
  updateNotice
} from "@/api/collaborativeApproval/noticeManagement.js";
  import { onMounted, ref, reactive, toRefs } from "vue";
  import { onReachBottom } from "@dcloudio/uni-app";
  import PageHeader from "@/components/PageHeader.vue";
  import useUserStore from "@/store/modules/user";
  import {
    addNotice,
    delNotice,
    getCount,
    listNotice,
    updateNotice,
  } from "@/api/collaborativeApproval/noticeManagement.js";

const userStore = useUserStore();
  const userStore = useUserStore();

// å“åº”式数据
const data = reactive({
  searchForm: {
    title: "",
    type: undefined,
    status: undefined,
  },
  form: {
    id: undefined,
    title: "",
    type: null,
    content: "",
    status: 0,
    priority: 1,
    remark: "",
        expirationDate: "",
  },
  rules: {
    title: [
      {required: true, message: "公告标题不能为空", trigger: "blur"}
    ],
    type: [
      {required: true, message: "请选择公告类型", trigger: "change"}
    ],
    content: [
      {required: true, message: "公告内容不能为空", trigger: "blur"}
    ],
        expirationDate: [
      {required: true, message: "请选择日期", trigger: "change"}
    ]
  }
});

const {searchForm, form, rules} = toRefs(data);

// é¡µé¢çŠ¶æ€
const dialogVisible = ref(false);
const dialogTitle = ref("");
const selectedIds = ref([]);
const formRef = ref();

const priorityOptions = [
  { label: "普通", value: 1 },
  { label: "重要", value: 2 },
  { label: "紧急", value: 3 },
];

const goBack = () => {
  uni.navigateBack();
};

const onExpireConfirm = (e) => {
  if (!e) return;
  // uview-plus datetime-picker confirm äº‹ä»¶è¿”回的 value
  const value = e.value || e;
  form.value.expirationDate = value;
};


const getPriorityText = (priority) => {
  const priorityMap = {"1": "普通", "2": "重要", "3": "紧急"};
  return priorityMap[priority] || "普通";
};

const getStatusText = (status) => {
  const statusMap = {"0": "草稿", "1": "已发布", "2": "已过期"};
  return statusMap[status] || "未知";
};

const isNoticeExpired = (notice) => {
  if (!notice || !notice.expirationDate) {
    return false;
  }

  const expiration = new Date(notice.expirationDate);

  if (Number.isNaN(expiration.getTime())) {
    return false;
  }

  expiration.setHours(23, 59, 59, 999);

  return new Date() > expiration;
};

const getNoticeStatus = (notice) => {
  const normalizedStatus = notice && notice.status !== undefined && notice.status !== null
      ? String(notice.status)
      : "0";

  return isNoticeExpired(notice) ? "2" : normalizedStatus;
};

const openForm = (type) => {
  if (type === 'add') {
    dialogTitle.value = "新增公告";
    form.value = {
      id: undefined,
  // å“åº”式数据
  const data = reactive({
    searchForm: {
      title: "",
      type: undefined,
      status: undefined,
    },
    form: {
      id: undefined,
      title: "",
      type: null,
      content: "",
      status: 0,
      priority: 1,
      remark: "",
      expirationDate: "",
    };
  }
  dialogVisible.value = true;
};
    },
    rules: {
      title: [{ required: true, message: "公告标题不能为空", trigger: "blur" }],
      type: [{ required: true, message: "请选择公告类型", trigger: "change" }],
      content: [{ required: true, message: "公告内容不能为空", trigger: "blur" }],
      expirationDate: [
        { required: true, message: "请选择日期", trigger: "change" },
      ],
    },
  });

const handleEdit = (row) => {
  if (isNoticeExpired(row)) {
    uni.showToast({
      title: "已过期的公告不可编辑",
      icon: "none"
  const { searchForm, form, rules } = toRefs(data);

  // é¡µé¢çŠ¶æ€
  const dialogVisible = ref(false);
  const dialogTitle = ref("");
  const selectedIds = ref([]);
  const formRef = ref();

  const priorityOptions = [
    { label: "普通", value: 1 },
    { label: "重要", value: 2 },
    { label: "紧急", value: 3 },
  ];

  const goBack = () => {
    uni.navigateBack();
  };

  const onExpireConfirm = e => {
    if (!e) return;
    // uview-plus datetime-picker confirm äº‹ä»¶è¿”回的 value
    const value = e.value || e;
    form.value.expirationDate = value;
  };

  const getPriorityText = priority => {
    const priorityMap = { 1: "普通", 2: "重要", 3: "紧急" };
    return priorityMap[priority] || "普通";
  };

  const getStatusText = status => {
    const statusMap = { 0: "草稿", 1: "已发布", 2: "已过期" };
    return statusMap[status] || "未知";
  };

  const isNoticeExpired = notice => {
    if (!notice || !notice.expirationDate) {
      return false;
    }

    const expiration = new Date(notice.expirationDate);

    if (Number.isNaN(expiration.getTime())) {
      return false;
    }

    expiration.setHours(23, 59, 59, 999);

    return new Date() > expiration;
  };

  const getNoticeStatus = notice => {
    const normalizedStatus =
      notice && notice.status !== undefined && notice.status !== null
        ? String(notice.status)
        : "0";

    return isNoticeExpired(notice) ? "2" : normalizedStatus;
  };

  const openForm = type => {
    if (type === "add") {
      dialogTitle.value = "新增公告";
      form.value = {
        id: undefined,
        title: "",
        type: undefined,
        content: "",
        status: 0,
        priority: 1,
        remark: "",
        expirationDate: "",
      };
    }
    dialogVisible.value = true;
  };

  const handleEdit = row => {
    if (isNoticeExpired(row)) {
      uni.showToast({
        title: "已过期的公告不可编辑",
        icon: "none",
      });
      return;
    }
    dialogTitle.value = "编辑公告";
    form.value = { ...row };
    dialogVisible.value = true;
  };

  const handleDelete = id => {
    if (!id) return;
    uni.showModal({
      title: "提示",
      content: "确认删除这条公告吗？",
      success: res => {
        if (res.confirm) {
          delNotice(id).then(() => {
            uni.showToast({
              title: "删除成功",
              icon: "success",
            });
            resetTable();
          });
        }
      },
    });
    return;
  }
  dialogTitle.value = "编辑公告";
  form.value = {...row};
  dialogVisible.value = true;
};
  };

const handleDelete = (id) => {
  if (!id) return;
  uni.showModal({
    title: "提示",
    content: "确认删除这条公告吗？",
    success: (res) => {
      if (res.confirm) {
        delNotice(id).then(() => {
          uni.showToast({
            title: "删除成功",
            icon: "success"
  // é¢„留批量删除（目前未实现选中逻辑，仅占位）
  const handleDeleteBatch = () => {
    if (!selectedIds.value.length) return;
    uni.showModal({
      title: "提示",
      content: "确认删除选中的公告吗？",
      success: res => {
        if (res.confirm) {
          // æ ¹æ®selectedIds执行批量删除逻辑（可按需扩展）
        }
      },
    });
  };

  const submitForm = () => {
    formRef.value.validate(valid => {
      if (valid) {
        if (form.value.id) {
          // ç¼–辑模式
          updateNotice(form.value).then(res => {
            uni.showToast({
              title: "修改成功",
              icon: "success",
            });
            resetTable();
          });
          resetTable();
        });
      }
    }
  });
};

// é¢„留批量删除（目前未实现选中逻辑，仅占位）
const handleDeleteBatch = () => {
  if (!selectedIds.value.length) return;
  uni.showModal({
    title: "提示",
    content: "确认删除选中的公告吗？",
    success: (res) => {
      if (res.confirm) {
        // æ ¹æ®selectedIds执行批量删除逻辑（可按需扩展）
      }
    }
  });
};

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      if (form.value.id) {
        // ç¼–辑模式
        updateNotice(form.value).then(res => {
          uni.showToast({
            title: "修改成功",
            icon: "success"
        } else {
          // æ–°å¢žæ¨¡å¼
          addNotice(form.value).then(res => {
            uni.showToast({
              title: "新增成功",
              icon: "success",
            });
            resetTable();
          });
          resetTable();
        })
        }
        dialogVisible.value = false;
      }
    });
  };

  const totalNoticeCount = ref(0);
  const fetchCount = () => {
    getCount().then(res => {
      totalNoticeCount.value = res.data.reduce(
        (total, item) => total + item.count,
        0
      );
    });
  };

  const holidayNotices = ref([]);
  const maintenanceNotices = ref([]);
  const holidayNoticePage = ref({
    total: 0,
    current: 1,
    size: 9,
  });

  const maintenanceNoticePage = ref({
    total: 0,
    current: 1,
    size: 9,
  });

  const isLoadingMore = ref(false);

  const fetchHolidayNotices = (append = false) => {
    listNotice({ ...holidayNoticePage.value }).then(res => {
      const records = res?.data?.records || [];
      holidayNoticePage.value.total = res?.data?.total || 0;
      if (append && holidayNotices.value.length) {
        holidayNotices.value = [...holidayNotices.value, ...records];
      } else {
        // æ–°å¢žæ¨¡å¼
        addNotice(form.value).then(res => {
          uni.showToast({
            title: "新增成功",
            icon: "success"
          });
          resetTable();
        })
        holidayNotices.value = records;
      }
      dialogVisible.value = false;
    }
    });
  };

  const fetchMaintenanceNotices = (append = false) => {
    listNotice({ ...holidayNoticePage.value, type: 2 }).then(res => {
      const records = res?.data?.records || [];
      maintenanceNoticePage.value.total = res?.data?.total || 0;
      if (append && maintenanceNotices.value.length) {
        maintenanceNotices.value = [...maintenanceNotices.value, ...records];
      } else {
        maintenanceNotices.value = records;
      }
    });
  };

  const handleCurrentChange = val => {
    holidayNoticePage.value.size = val.limit;
    holidayNoticePage.value.current = val.page;
    maintenanceNoticePage.value.size = val.limit;
    maintenanceNoticePage.value.current = val.page;
    fetchHolidayNotices();
    fetchMaintenanceNotices();
  };

  const resetTable = () => {
    holidayNoticePage.value.current = 1;
    holidayNoticePage.value.size = 9;
    maintenanceNoticePage.value.current = 1;
    maintenanceNoticePage.value.size = 9;
    fetchHolidayNotices();
    fetchMaintenanceNotices();
    fetchCount();
  };

  const resetForm = () => {
    formRef.value?.resetFields();
  };

  // ç”Ÿå‘½å‘¨æœŸ
  onMounted(() => {
    fetchCount();
    fetchHolidayNotices();
    fetchMaintenanceNotices();
  });
};

const totalNoticeCount = ref(0)
const fetchCount = () => {
  getCount().then(res => {
    totalNoticeCount.value = res.data.reduce((total, item) => total + item.count, 0);
  // ä¸Šåˆ’加载更多
  onReachBottom(() => {
    if (isLoadingMore.value) return;
    isLoadingMore.value = true;

    holidayNoticePage.value.current += 1;
    maintenanceNoticePage.value.current += 1;

    Promise.all([
      new Promise(resolve => {
        fetchHolidayNotices(true);
        resolve();
      }),
      new Promise(resolve => {
        fetchMaintenanceNotices(true);
        resolve();
      }),
    ]).finally(() => {
      isLoadingMore.value = false;
    });
  });
}

const holidayNotices = ref([])
const maintenanceNotices = ref([])
const holidayNoticePage = ref({
  total: 0,
  current: 1,
  size: 9
})

const maintenanceNoticePage = ref({
  total: 0,
  current: 1,
  size: 9
})

const isLoadingMore = ref(false)

const fetchHolidayNotices = (append = false) => {
  listNotice({...holidayNoticePage.value}).then(res => {
    const records = res?.data?.records || []
    holidayNoticePage.value.total = res?.data?.total || 0
    if (append && holidayNotices.value.length) {
      holidayNotices.value = [...holidayNotices.value, ...records]
    } else {
      holidayNotices.value = records
    }
  });
};

const fetchMaintenanceNotices = (append = false) => {
  listNotice({...holidayNoticePage.value, type: 2}).then(res => {
    const records = res?.data?.records || []
    maintenanceNoticePage.value.total = res?.data?.total || 0
    if (append && maintenanceNotices.value.length) {
      maintenanceNotices.value = [...maintenanceNotices.value, ...records]
    } else {
      maintenanceNotices.value = records
    }
  });
};

const handleCurrentChange = (val) => {
  holidayNoticePage.value.size = val.limit
  holidayNoticePage.value.current = val.page
  maintenanceNoticePage.value.size = val.limit
  maintenanceNoticePage.value.current = val.page
  fetchHolidayNotices()
  fetchMaintenanceNotices()
};

const resetTable = () => {
  holidayNoticePage.value.current = 1
  holidayNoticePage.value.size = 9
  maintenanceNoticePage.value.current = 1
  maintenanceNoticePage.value.size = 9
  fetchHolidayNotices()
  fetchMaintenanceNotices()
  fetchCount()
};

const resetForm = () => {
  formRef.value?.resetFields();
};

// ç”Ÿå‘½å‘¨æœŸ
onMounted(() => {
  fetchCount()
  fetchHolidayNotices()
  fetchMaintenanceNotices()
});

// ä¸Šåˆ’加载更多
onReachBottom(() => {
  if (isLoadingMore.value) return;
  isLoadingMore.value = true;

  holidayNoticePage.value.current += 1;
  maintenanceNoticePage.value.current += 1;

  Promise.all([
    new Promise((resolve) => {
      fetchHolidayNotices(true);
      resolve();
    }),
    new Promise((resolve) => {
      fetchMaintenanceNotices(true);
      resolve();
    })
  ]).finally(() => {
    isLoadingMore.value = false;
  });
});
</script>

<style scoped>
.notice-page {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
}

.search_form {
  background: #ffffff;
  padding: 12px 16px;
  margin: 8px 12px 12px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.search_title {
  font-weight: 500;
  color: #333;
  margin-right: 8px;
}

.ml10 {
  margin-left: 10px;
}

.notice-board {
  padding: 0 12px 16px;
}

.notice-section {
  margin-bottom: 16px;
}

.section-header {
  display: flex;
  align-items: center;
  margin: 4px 4px 12px;
}

.section-header h3 {
  margin: 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.section-count {
  margin-left: 10px;
  background: #409eff;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.notice-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notice-card {
  background: white;
  border-radius: 12px;
  padding: 14px 14px 10px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
}

.notice-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.holiday-card {
  border-left-color: #67c23a;
}

.maintenance-card {
  border-left-color: #e6a23c;
}

.urgent {
  border-left-color: #f56c6c;
  background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.card-title {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  flex: 1;
}

.holiday-icon {
  color: #67c23a;
  margin-right: 8px;
  font-size: 18px;
}

.maintenance-icon {
  color: #e6a23c;
  margin-right: 8px;
  font-size: 18px;
}

.card-actions {
  display: flex;
  gap: 8px;
}

.card-content {
  margin-bottom: 10px;
}

.card-content text {
  color: #606266;
  line-height: 1.6;
  font-size: 13px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.card-meta {
  display: flex;
  gap: 8px;
}

.type, .priority, .status {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.type-1 {
  background: #f0f9ff;
  color: #0369a1;
}

.type-2 {
  background: #fef3c7;
  color: #d97706;
}

.priority-1 {
  background: #f0f9ff;
  color: #0369a1;
}

.priority-2 {
  background: #fef3c7;
  color: #d97706;
}

.priority-3 {
  background: #fef2f2;
  color: #dc2626;
}

.status-0 {
  background: #f3f4f6;
  color: #6b7280;
}

.status-1 {
  background: #d1fae5;
  color: #059669;
}

.status-2 {
  background: #fef3c7;
  color: #d97706;
}

.card-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 12px;
  color: #909399;
}

.creator {
  font-weight: 500;
  margin-bottom: 2px;
}

.expiration {
  margin-top: 2px;
}

.card-remark {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  font-size: 12px;
  color: #606266;
  border-left: 3px solid #409eff;
}

.empty-state {
  text-align: center;
  padding: 48px 16px;
  color: #999;
  font-size: 13px;
}

.dialog-footer {
  text-align: right;
}

/* ç§»åŠ¨ç«¯å¼¹çª—样式 */
.dialog-container {
  background: #ffffff;
  border-radius: 18px 18px 0 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.dialog-header {
  padding: 16px 20px 8px 20px;
}

.dialog-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.dialog-body {
  flex: 1;
  padding: 0 16px 12px 16px;
  overflow-y: auto;
}

.dialog-footer {
  display: flex;
  padding: 12px 16px 16px 16px;
  border-top: 1px solid #f0f0f0;
}

/* å“åº”式设计 */
@media (max-width: 768px) {
  .search_form {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .search_form > div {
    width: 100%;
  .notice-page {
    min-height: 100vh;
    background: #f5f7fa;
    padding-bottom: 16px;
    display: flex;
    gap: 10px;
    flex-direction: column;
  }
}

  .search_form {
    background: #ffffff;
    padding: 12px 16px;
    margin: 8px 12px 12px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .search_title {
    font-weight: 500;
    color: #333;
    margin-right: 8px;
  }

  .ml10 {
    margin-left: 10px;
  }

  .notice-board {
    padding: 0 12px 16px;
  }

  .notice-section {
    margin-bottom: 16px;
  }

  .section-header {
    display: flex;
    align-items: center;
    margin: 4px 4px 12px;
  }

  .section-header h3 {
    margin: 0;
    color: #303133;
    font-size: 16px;
    font-weight: 600;
  }

  .section-count {
    margin-left: 10px;
    background: #409eff;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
  }

  .notice-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .notice-card {
    background: white;
    border-radius: 12px;
    padding: 14px 14px 10px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
  }

  .notice-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }

  .holiday-card {
    border-left-color: #67c23a;
  }

  .maintenance-card {
    border-left-color: #e6a23c;
  }

  .urgent {
    border-left-color: #f56c6c;
    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
  }

  .card-title {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: #303133;
    flex: 1;
  }

  .holiday-icon {
    color: #67c23a;
    margin-right: 8px;
    font-size: 18px;
  }

  .maintenance-icon {
    color: #e6a23c;
    margin-right: 8px;
    font-size: 18px;
  }

  .card-actions {
    display: flex;
    gap: 8px;
  }

  .card-content {
    margin-bottom: 10px;
  }

  .card-content text {
    color: #606266;
    line-height: 1.6;
    font-size: 13px;
  }

  .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .card-meta {
    display: flex;
    gap: 8px;
  }

  .type,
  .priority,
  .status {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
  }

  .type-1 {
    background: #f0f9ff;
    color: #0369a1;
  }

  .type-2 {
    background: #fef3c7;
    color: #d97706;
  }

  .priority-1 {
    background: #f0f9ff;
    color: #0369a1;
  }

  .priority-2 {
    background: #fef3c7;
    color: #d97706;
  }

  .priority-3 {
    background: #fef2f2;
    color: #dc2626;
  }

  .status-0 {
    background: #f3f4f6;
    color: #6b7280;
  }

  .status-1 {
    background: #d1fae5;
    color: #059669;
  }

  .status-2 {
    background: #fef3c7;
    color: #d97706;
  }

  .card-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 12px;
    color: #909399;
  }

  .creator {
    font-weight: 500;
    margin-bottom: 2px;
  }

  .expiration {
    margin-top: 2px;
  }

  .card-remark {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 12px;
    color: #606266;
    border-left: 3px solid #409eff;
  }

  .empty-state {
    text-align: center;
    padding: 48px 16px;
    color: #999;
    font-size: 13px;
  }

  .dialog-footer {
    text-align: right;
  }

  /* ç§»åŠ¨ç«¯å¼¹çª—样式 */
  .dialog-container {
    background: #ffffff;
    border-radius: 18px 18px 0 0;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
  }

  .dialog-header {
    padding: 16px 20px 8px 20px;
  }

  .dialog-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }

  .dialog-body {
    flex: 1;
    padding: 0 16px 12px 16px;
    overflow-y: auto;
  }

  .dialog-footer {
    display: flex;
    padding: 12px 16px 16px 16px;
    border-top: 1px solid #f0f0f0;
  }

  /* å“åº”式设计 */
  @media (max-width: 768px) {
    .search_form {
      flex-direction: column;
      gap: 15px;
      align-items: flex-start;
    }

    .search_form > div {
      width: 100%;
      display: flex;
      gap: 10px;
    }
  }
</style>

 src/pages/equipmentManagement/repair/add.vue

@@ -1,435 +1,489 @@
<template>
    <view class="repair-add">
        <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
        <PageHeader :title="operationType === 'edit' ? '编辑报修' : '新增报修'" @back="goBack" />
		
        <!-- è¡¨å•å†…容 -->
        <u-form @submit="sendForm" ref="formRef" :rules="formRules" :model="form" label-width="110">
            <!-- åŸºæœ¬ä¿¡æ¯ -->
            <u-cell-group title="基本信息">
                <u-form-item label="设备名称" prop="deviceLedgerId" required border-bottom>
                    <u-input
                        v-model="deviceNameText"
                        placeholder="请选择设备名称"
                        @click="showDevicePicker"
                        clearable
                        readonly=""
                    />
                    <template #right>
                        <u-icon name="scan" @click="startScan" class="scan-icon" />
                    </template>
                </u-form-item>
                <u-form-item label="规格型号" prop="deviceModel" border-bottom>
                    <u-input
                        v-model="form.deviceModel"
                        placeholder="请输入规格型号"
                        clearable
                    />
                </u-form-item>
                <u-form-item label="报修日期" prop="repairTime" required border-bottom>
                    <u-input
                        v-model="form.repairTime"
                        placeholder="请选择报修日期"
                        readonly
                        @click="showDatePicker"
                        clearable
                    />
                    <template #right>
                        <u-icon name="arrow-right" @click="showDatePicker"></u-icon>
                    </template>
                </u-form-item>
                <u-form-item label="报修人" prop="repairName" required border-bottom>
                    <u-input
                        v-model="form.repairName"
                        placeholder="请输入报修人"
                        clearable
                    />
                </u-form-item>
                <u-form-item label="故障现象" prop="remark" required border-bottom>
                    <u-textarea
                        v-model="form.remark"
                        rows="3"
                        placeholder="请输入故障现象"
                        clearable
                        count
                        maxlength="200"
                    />
                </u-form-item>
            </u-cell-group>
			
            <!-- æäº¤æŒ‰é’® -->
            <view class="footer-btns">
                <u-button class="cancel-btn" @click="goBack">取消</u-button>
                <u-button class="save-btn" type="primary" @click="sendForm" :loading="loading">保存</u-button>
            </view>
        </u-form>

        <!-- è®¾å¤‡é€‰æ‹©å™¨ -->
        <up-action-sheet
            :show="showDevice"
            :actions="deviceActionList"
            title="选择设备名称"
            @select="onDeviceSelect"
            @close="showDevice = false"
        />

        <!-- æ—¥æœŸé€‰æ‹©å™¨ -->
        <up-datetime-picker
            :show="showDate"
            v-model="pickerDateValue"
            @confirm="onDateConfirm"
            @cancel="showDate = false"
            mode="date"
        />
    </view>
  <view class="repair-add">
    <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
    <PageHeader :title="operationType === 'edit' ? '编辑报修' : '新增报修'"
                @back="goBack" />
    <!-- è¡¨å•å†…容 -->
    <u-form @submit="sendForm"
            ref="formRef"
            :rules="formRules"
            :model="form"
            label-width="110">
      <!-- åŸºæœ¬ä¿¡æ¯ -->
      <u-cell-group title="基本信息">
        <u-form-item label="设备名称"
                     prop="deviceLedgerId"
                     required
                     border-bottom>
          <u-input v-model="deviceNameText"
                   placeholder="请选择设备名称"
                   @click="showDevicePicker"
                   clearable
                   readonly="" />
          <template #right>
            <u-icon name="scan"
                    @click="startScan"
                    class="scan-icon" />
          </template>
        </u-form-item>
        <u-form-item label="规格型号"
                     prop="deviceModel"
                     border-bottom>
          <u-input v-model="form.deviceModel"
                   placeholder="请输入规格型号"
                   clearable />
        </u-form-item>
        <u-form-item label="报修日期"
                     prop="repairTime"
                     required
                     border-bottom>
          <u-input v-model="form.repairTime"
                   placeholder="请选择报修日期"
                   readonly
                   @click="showDatePicker"
                   clearable />
          <template #right>
            <u-icon name="arrow-right"
                    @click="showDatePicker"></u-icon>
          </template>
        </u-form-item>
        <u-form-item label="报修状态"
                     prop="repairTime"
                     required
                     border-bottom>
          <u-input v-model="repairStatusText"
                   placeholder="请选择报修状态"
                   readonly
                   @click="openRepairStatusPicker"
                   clearable />
          <template #right>
            <u-icon name="arrow-right"
                    @click="openRepairStatusPicker"></u-icon>
          </template>
        </u-form-item>
        <u-form-item label="报修人"
                     prop="repairName"
                     required
                     border-bottom>
          <u-input v-model="form.repairName"
                   placeholder="请输入报修人"
                   clearable />
        </u-form-item>
        <u-form-item label="故障现象"
                     prop="remark"
                     required
                     border-bottom>
          <u-textarea v-model="form.remark"
                      rows="3"
                      placeholder="请输入故障现象"
                      clearable
                      count
                      maxlength="200" />
        </u-form-item>
      </u-cell-group>
      <!-- æäº¤æŒ‰é’® -->
      <view class="footer-btns">
        <u-button class="cancel-btn"
                  @click="goBack">取消</u-button>
        <u-button class="save-btn"
                  type="primary"
                  @click="sendForm"
                  :loading="loading">保存</u-button>
      </view>
    </u-form>
    <!-- è®¾å¤‡é€‰æ‹©å™¨ -->
    <up-action-sheet :show="showDevice"
                     :actions="deviceActionList"
                     title="选择设备名称"
                     @select="onDeviceSelect"
                     @close="showDevice = false" />
    <!-- æ—¥æœŸé€‰æ‹©å™¨ -->
    <up-datetime-picker :show="showDate"
                        v-model="pickerDateValue"
                        @confirm="onDateConfirm"
                        @cancel="showDate = false"
                        mode="date" />
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import PageHeader from '@/components/PageHeader.vue';
import { getDeviceLedger } from '@/api/equipmentManagement/ledger';
import { addRepair, editRepair, getRepairById } from '@/api/equipmentManagement/repair';
import dayjs from "dayjs";
import { formatDateToYMD } from '@/utils/ruoyi';
const showToast = (message) => {
    uni.showToast({
        title: message,
        icon: 'none'
    })
}
  import { ref, computed, onMounted, onUnmounted } from "vue";
  import { onShow } from "@dcloudio/uni-app";
  import PageHeader from "@/components/PageHeader.vue";
  import { getDeviceLedger } from "@/api/equipmentManagement/ledger";
  import {
    addRepair,
    editRepair,
    getRepairById,
  } from "@/api/equipmentManagement/repair";
  import dayjs from "dayjs";
  import { formatDateToYMD } from "@/utils/ruoyi";
  const showToast = message => {
    uni.showToast({
      title: message,
      icon: "none",
    });
  };

defineOptions({
    name: "设备报修表单",
});
  defineOptions({
    name: "设备报修表单",
  });

// è¡¨å•å¼•ç”¨
const formRef = ref(null);
const operationType = ref('add');
const loading = ref(false);
const showDevice = ref(false);
const showDate = ref(false);
const pickerDateValue = ref(Date.now());
  // è¡¨å•å¼•ç”¨
  const formRef = ref(null);
  const operationType = ref("add");
  const loading = ref(false);
  const showDevice = ref(false);
  const showDate = ref(false);
  const pickerDateValue = ref(Date.now());

// è®¾å¤‡é€‰é¡¹
const deviceOptions = ref([]);
const deviceNameText = ref('');
const deviceActionList = computed(() => {
    return deviceOptions.value.map(item => ({
        name: item.deviceName,
        value: item.id
    }));
});
  // è®¾å¤‡é€‰é¡¹
  const deviceOptions = ref([]);
  const deviceNameText = ref("");
  const deviceActionList = computed(() => {
    return deviceOptions.value.map(item => ({
      name: item.deviceName,
      value: item.id,
    }));
  });

// æ‰«ç ç›¸å…³çŠ¶æ€
const isScanning = ref(false);
const scanTimer = ref(null);
  // æ‰«ç ç›¸å…³çŠ¶æ€
  const isScanning = ref(false);
  const scanTimer = ref(null);

// è¡¨å•éªŒè¯è§„则
const formRules = {
    deviceLedgerId: [{ required: true, trigger: "change", message: "请选择设备名称" }],
    repairTime: [{ required: true, trigger: "change", message: "请选择报修日期" }],
    repairName: [{ required: true, trigger: "blur", message: "请输入报修人" }],
    remark: [{ required: true, trigger: "blur", message: "请输入故障现象" }],
};
  // è¡¨å•éªŒè¯è§„则
  const formRules = {
    deviceLedgerId: [
      { required: true, trigger: "change", message: "请选择设备名称" },
    ],
    repairTime: [
      { required: true, trigger: "change", message: "请选择报修日期" },
    ],
    repairName: [{ required: true, trigger: "blur", message: "请输入报修人" }],
    remark: [{ required: true, trigger: "blur", message: "请输入故障现象" }],
  };

// ä½¿ç”¨ ref å£°æ˜Žè¡¨å•æ•°æ®
const form = ref({
    deviceLedgerId: undefined, // è®¾å¤‡ID
    deviceModel: undefined, // è§„格型号
    repairTime: dayjs().format("YYYY-MM-DD"), // æŠ¥ä¿®æ—¥æœŸ
    repairName: undefined, // æŠ¥ä¿®äºº
    remark: undefined, // æ•…障现象
});
  // ä½¿ç”¨ ref å£°æ˜Žè¡¨å•æ•°æ®
  const form = ref({
    deviceLedgerId: undefined, // è®¾å¤‡ID
    deviceModel: undefined, // è§„格型号
    repairTime: dayjs().format("YYYY-MM-DD"), // æŠ¥ä¿®æ—¥æœŸ
    repairName: undefined, // æŠ¥ä¿®äºº
    remark: undefined, // æ•…障现象
  });

// åŠ è½½è®¾å¤‡åˆ—表
const loadDeviceName = async () => {
    try {
        const { data } = await getDeviceLedger();
        deviceOptions.value = data || [];
    } catch (e) {
        showToast('获取设备列表失败');
    }
};
  // æŠ¥ä¿®çŠ¶æ€é€‰é¡¹
  const repairStatusOptions = ref([
    { name: "待维修", value: "0" },
    { name: "完结", value: "1" },
    { name: "失败", value: "2" },
  ]);
  const repairStatusText = ref("");

// è®¾ç½®è®¾å¤‡è§„格型号
const setDeviceModel = (id) => {
    const option = deviceOptions.value.find((item) => item.id === id);
    if (option) {
        form.value.deviceModel = option.deviceModel;
        deviceNameText.value = option.deviceName;
    }
};
  // æ‰“开报修状态选择器
  const openRepairStatusPicker = () => {
    uni.showActionSheet({
      itemList: repairStatusOptions.value.map(item => item.name),
      success: res => {
        form.value.status = repairStatusOptions.value[res.tapIndex].value;
        repairStatusText.value = repairStatusOptions.value[res.tapIndex].name;
      },
    });
  };

// åŠ è½½è¡¨å•æ•°æ®ï¼ˆç¼–辑模式）
const loadForm = async (id) => {
    if (id) {
        operationType.value = 'edit';
        try {
            const { code, data } = await getRepairById(id);
            if (code == 200) {
                form.value.deviceLedgerId = data.deviceLedgerId;
                form.value.deviceModel = data.deviceModel;
                form.value.repairTime = dayjs(data.repairTime).format("YYYY-MM-DD");
                form.value.repairName = data.repairName;
                form.value.remark = data.remark;
                // è®¾ç½®è®¾å¤‡åç§°æ˜¾ç¤º
                const device = deviceOptions.value.find(item => item.id === data.deviceLedgerId);
                if (device) {
                    deviceNameText.value = device.deviceName;
                }
            }
        } catch (e) {
            showToast('获取详情失败');
        }
    } else {
        // æ–°å¢žæ¨¡å¼
        operationType.value = 'add';
    }
};
  // åŠ è½½è®¾å¤‡åˆ—表
  const loadDeviceName = async () => {
    try {
      const { data } = await getDeviceLedger();
      deviceOptions.value = data || [];
    } catch (e) {
      showToast("获取设备列表失败");
    }
  };

// æ‰«æäºŒç»´ç åŠŸèƒ½
const startScan = () => {
    if (isScanning.value) {
        showToast('正在扫描中，请稍候...');
        return;
    }
	
    // è°ƒç”¨uni-app的扫码API
    uni.scanCode({
        scanType: ['qrCode', 'barCode'],
        success: (res) => {
            handleScanResult(res.result);
        },
        fail: (err) => {
            console.error('扫码失败:', err);
            showToast('扫码失败，请重试');
        }
    });
};
  // è®¾ç½®è®¾å¤‡è§„格型号
  const setDeviceModel = id => {
    const option = deviceOptions.value.find(item => item.id === id);
    if (option) {
      form.value.deviceModel = option.deviceModel;
      deviceNameText.value = option.deviceName;
    }
  };

// å¤„理扫码结果
const handleScanResult = (scanResult) => {
    if (!scanResult) {
        showToast('扫码结果为空');
        return;
    }
	
    isScanning.value = true;
    showToast('扫码成功');
	
    // 3秒后处理扫码结果
    scanTimer.value = setTimeout(() => {
        processScanResult(scanResult);
        isScanning.value = false;
    }, 100);
};
function getDeviceIdByRegExp(url) {
    // åŒ¹é…deviceId=后面的数字
    const reg = /deviceId=(\d+)/;
    const match = url.match(reg);
    // å¦‚果匹配到结果，返回数字类型，否则返回null
    return match ? Number(match[1]) : null;
}
  // åŠ è½½è¡¨å•æ•°æ®ï¼ˆç¼–辑模式）
  const loadForm = async id => {
    if (id) {
      operationType.value = "edit";
      try {
        const { code, data } = await getRepairById(id);
        if (code == 200) {
          form.value.deviceLedgerId = data.deviceLedgerId;
          form.value.deviceModel = data.deviceModel;
          form.value.repairTime = dayjs(data.repairTime).format("YYYY-MM-DD");
          form.value.repairName = data.repairName;
          form.value.remark = data.remark;
          repairStatusText.value =
            repairStatusOptions.value.find(item => item.value == data.status)
              ?.name || "";
          // è®¾ç½®è®¾å¤‡åç§°æ˜¾ç¤º
          const device = deviceOptions.value.find(
            item => item.id === data.deviceLedgerId
          );
          if (device) {
            deviceNameText.value = device.deviceName;
          }
        }
      } catch (e) {
        showToast("获取详情失败");
      }
    } else {
      // æ–°å¢žæ¨¡å¼
      operationType.value = "add";
    }
  };

// å¤„理扫码结果并匹配设备
const processScanResult = (scanResult) => {
    const deviceId = getDeviceIdByRegExp(scanResult);
    const matchedDevice = deviceOptions.value.find(item => item.id == deviceId);
	
    if (matchedDevice) {
        // æ‰¾åˆ°åŒ¹é…çš„设备，自动填充
        form.value.deviceLedgerId = matchedDevice.id;
        deviceNameText.value = matchedDevice.deviceName;
        form.value.deviceModel = matchedDevice.deviceModel;
        showToast('设备信息已自动填充');
    } else {
        // æœªæ‰¾åˆ°åŒ¹é…çš„设备
        showToast('未找到匹配的设备，请手动选择');
    }
};
  // æ‰«æäºŒç»´ç åŠŸèƒ½
  const startScan = () => {
    if (isScanning.value) {
      showToast("正在扫描中，请稍候...");
      return;
    }

// æ˜¾ç¤ºè®¾å¤‡é€‰æ‹©å™¨
const showDevicePicker = () => {
    showDevice.value = true;
};
    // è°ƒç”¨uni-app的扫码API
    uni.scanCode({
      scanType: ["qrCode", "barCode"],
      success: res => {
        handleScanResult(res.result);
      },
      fail: err => {
        console.error("扫码失败:", err);
        showToast("扫码失败，请重试");
      },
    });
  };

// ç¡®è®¤è®¾å¤‡é€‰æ‹©
const onDeviceSelect = (e) => {
    form.value.deviceLedgerId = e.value;
    setDeviceModel(e.value);
    showDevice.value = false;
};
  // å¤„理扫码结果
  const handleScanResult = scanResult => {
    if (!scanResult) {
      showToast("扫码结果为空");
      return;
    }

// æ˜¾ç¤ºæ—¥æœŸé€‰æ‹©å™¨
const showDatePicker = () => {
    showDate.value = true;
};
    isScanning.value = true;
    showToast("扫码成功");

// ç¡®è®¤æ—¥æœŸé€‰æ‹©
const onDateConfirm = (e) => {
    form.value.repairTime = formatDateToYMD(e.value);
    pickerDateValue.value = dayjs(e.value).format("YYYY-MM-DD");
    showDate.value = false;
};
    // 3秒后处理扫码结果
    scanTimer.value = setTimeout(() => {
      processScanResult(scanResult);
      isScanning.value = false;
    }, 100);
  };
  function getDeviceIdByRegExp(url) {
    // åŒ¹é…deviceId=后面的数字
    const reg = /deviceId=(\d+)/;
    const match = url.match(reg);
    // å¦‚果匹配到结果，返回数字类型，否则返回null
    return match ? Number(match[1]) : null;
  }

onShow(() => {
    // é¡µé¢æ˜¾ç¤ºæ—¶èŽ·å–参数
    getPageParams();
});
  // å¤„理扫码结果并匹配设备
  const processScanResult = scanResult => {
    const deviceId = getDeviceIdByRegExp(scanResult);
    const matchedDevice = deviceOptions.value.find(item => item.id == deviceId);

onMounted(() => {
    // é¡µé¢åŠ è½½æ—¶èŽ·å–设备列表和参数
    loadDeviceName();
    getPageParams();
});
    if (matchedDevice) {
      // æ‰¾åˆ°åŒ¹é…çš„设备，自动填充
      form.value.deviceLedgerId = matchedDevice.id;
      deviceNameText.value = matchedDevice.deviceName;
      form.value.deviceModel = matchedDevice.deviceModel;
      showToast("设备信息已自动填充");
    } else {
      // æœªæ‰¾åˆ°åŒ¹é…çš„设备
      showToast("未找到匹配的设备，请手动选择");
    }
  };

// ç»„件卸载时清理定时器
onUnmounted(() => {
    if (scanTimer.value) {
        clearTimeout(scanTimer.value);
    }
});
  // æ˜¾ç¤ºè®¾å¤‡é€‰æ‹©å™¨
  const showDevicePicker = () => {
    showDevice.value = true;
  };

// æäº¤è¡¨å•
const sendForm = async () => {
    try {
        // æ‰‹åŠ¨éªŒè¯è¡¨å•
        let isValid = true;
        let errorMessage = '';
        if (!form.value.deviceLedgerId) {
            isValid = false;
            errorMessage = '请选择设备名称';
        } else if (!form.value.repairTime || form.value.repairTime.trim() === '') {
            isValid = false;
            errorMessage = '请选择报修日期';
        } else if (!form.value.repairName || form.value.repairName.trim() === '') {
            isValid = false;
            errorMessage = '请输入报修人';
        } else if (!form.value.remark || form.value.remark.trim() === '') {
            isValid = false;
            errorMessage = '请输入故障现象';
        }
  // ç¡®è®¤è®¾å¤‡é€‰æ‹©
  const onDeviceSelect = e => {
    form.value.deviceLedgerId = e.value;
    setDeviceModel(e.value);
    showDevice.value = false;
  };

        if (!isValid) {
            showToast(errorMessage);
            return;
        }
  // æ˜¾ç¤ºæ—¥æœŸé€‰æ‹©å™¨
  const showDatePicker = () => {
    showDate.value = true;
  };

        loading.value = true;
        const id = getPageId();
  // ç¡®è®¤æ—¥æœŸé€‰æ‹©
  const onDateConfirm = e => {
    form.value.repairTime = formatDateToYMD(e.value);
    pickerDateValue.value = dayjs(e.value).format("YYYY-MM-DD");
    showDate.value = false;
  };

        // å‡†å¤‡æäº¤æ•°æ®
        const submitData = { ...form.value };
  onShow(() => {
    // é¡µé¢æ˜¾ç¤ºæ—¶èŽ·å–参数
    getPageParams();
  });

        const { code } = id
            ? await editRepair({ id: id, ...submitData })
            : await addRepair(submitData);
  onMounted(() => {
    // é¡µé¢åŠ è½½æ—¶èŽ·å–设备列表和参数
    loadDeviceName();
    getPageParams();
  });

        if (code == 200) {
            showToast(`${id ? "编辑" : "新增"}报修成功`);
            setTimeout(() => {
                uni.navigateBack();
            }, 1500);
        } else {
            loading.value = false;
        }
    } catch (e) {
        loading.value = false;
        showToast('表单验证失败');
    }
};
  // ç»„件卸载时清理定时器
  onUnmounted(() => {
    if (scanTimer.value) {
      clearTimeout(scanTimer.value);
    }
  });

// è¿”回上一页
const goBack = () => {
    uni.removeStorageSync('repairId');
    uni.navigateBack();
};
  // æäº¤è¡¨å•
  const sendForm = async () => {
    try {
      // æ‰‹åŠ¨éªŒè¯è¡¨å•
      let isValid = true;
      let errorMessage = "";
      if (!form.value.deviceLedgerId) {
        isValid = false;
        errorMessage = "请选择设备名称";
      } else if (!form.value.repairTime || form.value.repairTime.trim() === "") {
        isValid = false;
        errorMessage = "请选择报修日期";
      } else if (!form.value.repairName || form.value.repairName.trim() === "") {
        isValid = false;
        errorMessage = "请输入报修人";
      } else if (!form.value.remark || form.value.remark.trim() === "") {
        isValid = false;
        errorMessage = "请输入故障现象";
      }

// èŽ·å–页面参数
const getPageParams = () => {
    // ä½¿ç”¨uni.getStorageSync获取id
    const id = uni.getStorageSync('repairId');
	
    // æ ¹æ®æ˜¯å¦æœ‰id参数来判断是新增还是编辑
    if (id) {
        // ç¼–辑模式，获取详情
        loadForm(id);
        // å¯é€‰ï¼šèŽ·å–后清除存储的id，避免影响后续操作
        uni.removeStorageSync('repairId');
    } else {
        // æ–°å¢žæ¨¡å¼
        loadForm();
    }
};
      if (!isValid) {
        showToast(errorMessage);
        return;
      }

// èŽ·å–页面ID
const getPageId = () => {
    // ä½¿ç”¨uni.getStorageSync获取id
    const id = uni.getStorageSync('repairId');
    return id;
};
      loading.value = true;
      const id = getPageId();

      // å‡†å¤‡æäº¤æ•°æ®
      const submitData = { ...form.value };

      const { code } = id
        ? await editRepair({ id: id, ...submitData })
        : await addRepair(submitData);

      if (code == 200) {
        showToast(`${id ? "编辑" : "新增"}报修成功`);
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } else {
        loading.value = false;
      }
    } catch (e) {
      loading.value = false;
      showToast("表单验证失败");
    }
  };

  // è¿”回上一页
  const goBack = () => {
    uni.removeStorageSync("repairId");
    uni.navigateBack();
  };

  // èŽ·å–页面参数
  const getPageParams = () => {
    // ä½¿ç”¨uni.getStorageSync获取id
    const id = uni.getStorageSync("repairId");

    // æ ¹æ®æ˜¯å¦æœ‰id参数来判断是新增还是编辑
    if (id) {
      // ç¼–辑模式，获取详情
      loadForm(id);
      // å¯é€‰ï¼šèŽ·å–后清除存储的id，避免影响后续操作
      uni.removeStorageSync("repairId");
    } else {
      // æ–°å¢žæ¨¡å¼
      loadForm();
    }
  };

  // èŽ·å–页面ID
  const getPageId = () => {
    // ä½¿ç”¨uni.getStorageSync获取id
    const id = uni.getStorageSync("repairId");
    return id;
  };
</script>

<style scoped lang="scss">
@import '@/static/scss/form-common.scss';
.repair-add {
    min-height: 100vh;
    background: #f8f9fa;
    padding-bottom: 5rem;
}
  @import "@/static/scss/form-common.scss";
  .repair-add {
    min-height: 100vh;
    background: #f8f9fa;
    padding-bottom: 5rem;
  }

.footer-btns {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.75rem 0;
    box-shadow: 0 -0.125rem 0.5rem rgba(0,0,0,0.05);
    z-index: 1000;
}
  .footer-btns {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.75rem 0;
    box-shadow: 0 -0.125rem 0.5rem rgba(0, 0, 0, 0.05);
    z-index: 1000;
  }

.cancel-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #FFFFFF;
    width: 6.375rem;
    background: #C7C9CC;
    box-shadow: 0 0.25rem 0.625rem 0 rgba(3,88,185,0.2);
    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
}
  .cancel-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #ffffff;
    width: 6.375rem;
    background: #c7c9cc;
    box-shadow: 0 0.25rem 0.625rem 0 rgba(3, 88, 185, 0.2);
    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
  }

.save-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #FFFFFF;
    width: 14rem;
    background: linear-gradient( 140deg, #00BAFF 0%, #006CFB 100%);
    box-shadow: 0 0.25rem 0.625rem 0 rgba(3,88,185,0.2);
    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
}
  .save-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #ffffff;
    width: 14rem;
    background: linear-gradient(140deg, #00baff 0%, #006cfb 100%);
    box-shadow: 0 0.25rem 0.625rem 0 rgba(3, 88, 185, 0.2);
    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
  }

// å“åº”式调整
@media (max-width: 768px) {
    .submit-section {
        padding: 12px;
    }
}
  // å“åº”式调整
  @media (max-width: 768px) {
    .submit-section {
      padding: 12px;
    }
  }

.tip-text { 
    padding: 4px 16px 0 16px; 
    font-size: 12px; 
    color: #888; 
}
  .tip-text {
    padding: 4px 16px 0 16px;
    font-size: 12px;
    color: #888;
  }

.scan-icon {
    color: #1989fa;
    font-size: 18px;
    margin-left: 8px;
    cursor: pointer;
}
  .scan-icon {
    color: #1989fa;
    font-size: 18px;
    margin-left: 8px;
    cursor: pointer;
  }
</style>

 src/pages/equipmentManagement/repair/maintain.vue

@@ -1,256 +1,297 @@
<template>
    <view class="repair-maintain">
        <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
        <PageHeader title="新增维修" @back="goBack" />
		
        <!-- è¡¨å•å†…容 -->
        <u-form ref="formRef" :model="form" :rules="formRules" label-width="140rpx">
            <!-- åŸºæœ¬ä¿¡æ¯ -->
            <u-cell-group title="维修信息" inset>
                <u-form-item prop="maintenanceName" label="维修人" required>
                    <u-input
                        v-model="form.maintenanceName"
                        placeholder="请输入维修人"
                        clearable
                    />
                </u-form-item>
                <u-form-item prop="maintenanceResult" label="维修结果" required>
                    <u-input
                        v-model="form.maintenanceResult"
                        type="textarea"
                        rows="3"
                        placeholder="请输入维修结果"
                        clearable
                        maxlength="200"
                        show-word-limit
                    />
                </u-form-item>
                <u-form-item label="维修日期" prop="maintenanceTime" required border-bottom>
                    <u-input
                        v-model="form.maintenanceTime"
                        placeholder="请选择维修日期"
                        readonly
                        @click="showDatePicker = true"
                        clearable
                    />
                    <template #right>
                        <u-icon name="arrow-right" @click="showDatePicker = true"></u-icon>
                    </template>
                </u-form-item>
            </u-cell-group>
			
            <!-- æäº¤æŒ‰é’® -->
            <view class="footer-btns">
                <u-button class="cancel-btn" @click="goBack">取消</u-button>
                <u-button class="save-btn" @click="submitForm" :loading="loading">保存</u-button>
            </view>
        </u-form>

        <!-- æ—¥æœŸé€‰æ‹©å™¨ -->
        <up-datetime-picker
            :show="showDatePicker"
            v-model="pickerDateValue"
            mode="datetime"
            title="选择日期"
            format="YYYY-MM-DD HH:mm:ss"
            @confirm="onDateConfirm"
            @cancel="showDatePicker = false"
        />
    </view>
  <view class="repair-maintain">
    <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
    <PageHeader title="新增维修"
                @back="goBack" />
    <!-- è¡¨å•å†…容 -->
    <u-form ref="formRef"
            :model="form"
            :rules="formRules"
            label-width="140rpx">
      <!-- åŸºæœ¬ä¿¡æ¯ -->
      <u-cell-group title="维修信息"
                    inset>
        <u-form-item prop="maintenanceName"
                     label="维修人"
                     required>
          <u-input v-model="form.maintenanceName"
                   placeholder="请输入维修人"
                   clearable />
        </u-form-item>
        <u-form-item prop="maintenanceResult"
                     label="维修结果"
                     required>
          <u-input v-model="form.maintenanceResult"
                   type="textarea"
                   rows="3"
                   placeholder="请输入维修结果"
                   clearable
                   maxlength="200"
                   show-word-limit />
        </u-form-item>
        <u-form-item label="维修状态"
                     prop="repairTime"
                     required
                     border-bottom>
          <u-input v-model="repairStatusText"
                   placeholder="请选择维修状态"
                   readonly
                   @click="openRepairStatusPicker"
                   clearable />
          <template #right>
            <u-icon name="arrow-right"
                    @click="openRepairStatusPicker"></u-icon>
          </template>
        </u-form-item>
        <u-form-item label="维修日期"
                     prop="maintenanceTime"
                     required
                     border-bottom>
          <u-input v-model="form.maintenanceTime"
                   placeholder="请选择维修日期"
                   readonly
                   @click="showDatePicker = true"
                   clearable />
          <template #right>
            <u-icon name="arrow-right"
                    @click="showDatePicker = true"></u-icon>
          </template>
        </u-form-item>
      </u-cell-group>
      <!-- æäº¤æŒ‰é’® -->
      <view class="footer-btns">
        <u-button class="cancel-btn"
                  @click="goBack">取消</u-button>
        <u-button class="save-btn"
                  @click="submitForm"
                  :loading="loading">保存</u-button>
      </view>
    </u-form>
    <!-- æ—¥æœŸé€‰æ‹©å™¨ -->
    <up-datetime-picker :show="showDatePicker"
                        v-model="pickerDateValue"
                        mode="datetime"
                        title="选择日期"
                        format="YYYY-MM-DD HH:mm:ss"
                        @confirm="onDateConfirm"
                        @cancel="showDatePicker = false" />
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import PageHeader from '@/components/PageHeader.vue';
import { addMaintain } from '@/api/equipmentManagement/repair';
import useUserStore from "@/store/modules/user";
import dayjs from "dayjs";
  import { ref, onMounted } from "vue";
  import { onShow } from "@dcloudio/uni-app";
  import PageHeader from "@/components/PageHeader.vue";
  import { addMaintain } from "@/api/equipmentManagement/repair";
  import useUserStore from "@/store/modules/user";
  import dayjs from "dayjs";

defineOptions({
    name: "设备维修表单",
});
  defineOptions({
    name: "设备维修表单",
  });

const userStore = useUserStore();
  const userStore = useUserStore();

// è¡¨å•å¼•ç”¨
const formRef = ref(null);
const loading = ref(false);
const showDatePicker = ref(false);
const pickerDateValue = ref(Date.now());; // ä½¿ç”¨æ—¶é—´æˆ³
  // è¡¨å•å¼•ç”¨
  const formRef = ref(null);
  const loading = ref(false);
  const showDatePicker = ref(false);
  const pickerDateValue = ref(Date.now()); // ä½¿ç”¨æ—¶é—´æˆ³

// è¡¨å•éªŒè¯è§„则
const formRules = {
    maintenanceName: [{ required: true, trigger: "blur", message: "请输入维修人" }],
    maintenanceResult: [{ required: true, trigger: "blur", message: "请输入维修结果" }],
    maintenanceTime: [{ required: true, trigger: "change", message: "请选择维修日期" }],
};
  // è¡¨å•éªŒè¯è§„则
  const formRules = {
    maintenanceName: [
      { required: true, trigger: "blur", message: "请输入维修人" },
    ],
    maintenanceResult: [
      { required: true, trigger: "blur", message: "请输入维修结果" },
    ],
    maintenanceTime: [
      { required: true, trigger: "change", message: "请选择维修日期" },
    ],
  };
  const repairStatusOptions = ref([
    { name: "待维修", value: "0" },
    { name: "完结", value: "1" },
    { name: "失败", value: "2" },
  ]);
  const repairStatusText = ref("完结");
  // æ‰“开报修状态选择器
  const openRepairStatusPicker = () => {
    uni.showActionSheet({
      itemList: repairStatusOptions.value.map(item => item.name),
      success: res => {
        form.value.status = repairStatusOptions.value[res.tapIndex].value;
        repairStatusText.value = repairStatusOptions.value[res.tapIndex].name;
      },
    });
  };
  // ä½¿ç”¨ ref å£°æ˜Žè¡¨å•æ•°æ®
  const form = ref({
    maintenanceName: userStore.nickName || "", // é»˜è®¤ä½¿ç”¨å½“前用户昵称
    maintenanceResult: undefined, // ç»´ä¿®ç»“æžœ
    maintenanceTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // ç»´ä¿®æ—¥æœŸï¼ˆåªæ˜¾ç¤ºæ—¥æœŸï¼‰
  });

// ä½¿ç”¨ ref å£°æ˜Žè¡¨å•æ•°æ®
const form = ref({
    maintenanceName: userStore.nickName || '', // é»˜è®¤ä½¿ç”¨å½“前用户昵称
    maintenanceResult: undefined, // ç»´ä¿®ç»“æžœ
    maintenanceTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // ç»´ä¿®æ—¥æœŸï¼ˆåªæ˜¾ç¤ºæ—¥æœŸï¼‰
});
  // è‡ªå®šä¹‰showToast函数
  const showToast = message => {
    uni.showToast({
      title: message,
      icon: "none",
    });
  };

// è‡ªå®šä¹‰showToast函数
const showToast = (message) => {
  uni.showToast({
    title: message,
    icon: 'none'
  })
};
  // é‡ç½®è¡¨å•æ•°æ®å’Œæ ¡éªŒçŠ¶æ€
  const resetForm = () => {
    form.value = {
      maintenanceName: userStore.nickName || "",
      maintenanceResult: undefined,
      maintenanceTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    };
  };

// é‡ç½®è¡¨å•æ•°æ®å’Œæ ¡éªŒçŠ¶æ€
const resetForm = () => {
    form.value = {
        maintenanceName: userStore.nickName || '',
        maintenanceResult: undefined,
        maintenanceTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    };
};
  const resetFormAndValidate = () => {
    resetForm();
  };

const resetFormAndValidate = () => {
    resetForm();
};
  // æäº¤è¡¨å•
  const submitForm = async () => {
    try {
      // ä½¿ç”¨uview-plus的表单验证方式
      const valid = await formRef.value.validate();
      if (valid) {
        submitFormData();
      }
    } catch (e) {
      showToast("表单验证失败");
    }
  };

// æäº¤è¡¨å•
const submitForm = async () => {
    try {
        // ä½¿ç”¨uview-plus的表单验证方式
        const valid = await formRef.value.validate();
        if (valid) {
            submitFormData();
        }
    } catch (e) {
        showToast('表单验证失败');
    }
};
  // æäº¤è¡¨å•æ•°æ®
  const submitFormData = async () => {
    try {
      loading.value = true;
      const id = getPageId();

// æäº¤è¡¨å•æ•°æ®
const submitFormData = async () => {
    try {
        loading.value = true;
        const id = getPageId();
		
        if (!id) {
            showToast('参数错误');
            loading.value = false;
            return;
        }
		
        // å‡†å¤‡æäº¤æ•°æ®ï¼ŒmaintenanceTime åŠ ä¸Šå½“前时分秒
        const submitData = { ...form.value };
		
        const { code } = await addMaintain({ id: id, ...submitData });
		
        if (code == 200) {
            showToast('新增维修成功');
            resetFormAndValidate();
            setTimeout(() => {
                goBack();
            }, 500);
        } else {
            loading.value = false;
        }
    } catch (e) {
        console.log(e);
		
        loading.value = false;
        showToast('操作失败');
    }
};
      if (!id) {
        showToast("参数错误");
        loading.value = false;
        return;
      }
      form.value.status = Number(form.value.status);
      // å‡†å¤‡æäº¤æ•°æ®ï¼ŒmaintenanceTime åŠ ä¸Šå½“前时分秒
      const submitData = { ...form.value };

// è¿”回上一页
const goBack = () => {
    uni.removeStorageSync('repairId');
    uni.navigateBack();
};
      const { code } = await addMaintain({ id: id, ...submitData });

// èŽ·å–页面ID
const getPageId = () => {
    const id = uni.getStorageSync('repairId');
    return id;
};
      if (code == 200) {
        showToast("新增维修成功");
        resetFormAndValidate();
        setTimeout(() => {
          goBack();
        }, 500);
      } else {
        loading.value = false;
      }
    } catch (e) {
      console.log(e);

// ç¡®è®¤æ—¥æœŸé€‰æ‹©
const onDateConfirm = (e) => {
    form.value.maintenanceTime = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
    pickerDateValue.value = e.value
    showDatePicker.value = false;
};
      loading.value = false;
      showToast("操作失败");
    }
  };

// åˆå§‹åŒ–表单数据
const initForm = () => {
    // è®¾ç½®ç»´ä¿®äººä¸ºå½“前用户昵称
    form.value.maintenanceName = userStore.nickName || '';
    // è®¾ç½®å½“前日期（只包含年月日）
    form.value.maintenanceTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
};
  // è¿”回上一页
  const goBack = () => {
    uni.removeStorageSync("repairId");
    uni.navigateBack();
  };

onShow(() => {
    // é¡µé¢æ˜¾ç¤ºæ—¶åˆå§‹åŒ–表单
    initForm();
});
  // èŽ·å–页面ID
  const getPageId = () => {
    const id = uni.getStorageSync("repairId");
    return id;
  };

onMounted(() => {
    // é¡µé¢åŠ è½½æ—¶åˆå§‹åŒ–表单
    initForm();
});
  // ç¡®è®¤æ—¥æœŸé€‰æ‹©
  const onDateConfirm = e => {
    form.value.maintenanceTime = dayjs(e.value).format("YYYY-MM-DD HH:mm:ss");
    pickerDateValue.value = e.value;
    showDatePicker.value = false;
  };

  // åˆå§‹åŒ–表单数据
  const initForm = () => {
    form.value.status = "1";
    // è®¾ç½®ç»´ä¿®äººä¸ºå½“前用户昵称
    form.value.maintenanceName = userStore.nickName || "";
    // è®¾ç½®å½“前日期（只包含年月日）
    form.value.maintenanceTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
  };

  onShow(() => {
    // é¡µé¢æ˜¾ç¤ºæ—¶åˆå§‹åŒ–表单
    initForm();
  });

  onMounted(() => {
    // é¡µé¢åŠ è½½æ—¶åˆå§‹åŒ–表单
    initForm();
  });
</script>

<style scoped lang="scss">
@import '@/static/scss/form-common.scss';
.repair-maintain {
    min-height: 100vh;
    background: #f8f9fa;
    padding-bottom: 5rem;
}
  @import "@/static/scss/form-common.scss";
  .repair-maintain {
    min-height: 100vh;
    background: #f8f9fa;
    padding-bottom: 5rem;
  }

.footer-btns {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.75rem 0;
    box-shadow: 0 -0.125rem 0.5rem rgba(0,0,0,0.05);
    z-index: 1000;
}
  .footer-btns {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.75rem 0;
    box-shadow: 0 -0.125rem 0.5rem rgba(0, 0, 0, 0.05);
    z-index: 1000;
  }

.cancel-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #FFFFFF;
    width: 6.375rem;
    background: #C7C9CC;
    box-shadow: 0 0.25rem 0.625rem 0 rgba(3,88,185,0.2);
    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
}
  .cancel-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #ffffff;
    width: 6.375rem;
    background: #c7c9cc;
    box-shadow: 0 0.25rem 0.625rem 0 rgba(3, 88, 185, 0.2);
    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
  }

.save-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #FFFFFF;
    width: 14rem;
    background: linear-gradient( 140deg, #00BAFF 0%, #006CFB 100%);
    box-shadow: 0 0.25rem 0.625rem 0 rgba(3,88,185,0.2);
    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
}
  .save-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #ffffff;
    width: 14rem;
    background: linear-gradient(140deg, #00baff 0%, #006cfb 100%);
    box-shadow: 0 0.25rem 0.625rem 0 rgba(3, 88, 185, 0.2);
    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
  }

// å“åº”式调整
@media (max-width: 768px) {
    .submit-section {
        padding: 12px;
    }
}
  // å“åº”式调整
  @media (max-width: 768px) {
    .submit-section {
      padding: 12px;
    }
  }

.tip-text { 
    padding: 4px 16px 0 16px; 
    font-size: 12px; 
    color: #888; 
}
  .tip-text {
    padding: 4px 16px 0 16px;
    font-size: 12px;
    color: #888;
  }
</style>

 src/pages/equipmentManagement/runManagement/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,547 @@
<template>
  <view class="notice-page">
    <PageHeader title="运行管理"
                @back="goBack" />
    <!-- é€šçŸ¥å…¬å‘Šæ¿ -->
    <view class="notice-board">
      <!-- ç»Ÿä¸€é€šçŸ¥åŒºåŸŸ -->
      <view class="notice-section">
        <view class="section-header">
          <h3>设备运行记录</h3>
        </view>
        <view class="notice-cards">
          <!-- æ”¾å‡é€šçŸ¥ -->
          <view v-for="notice in holidayNotices"
                :key="'holiday-' + notice.id"
                class="notice-card holiday-card"
                :class="{ 'urgent': isOverdue(notice) }">
            <view class="card-header">
              <view class="card-title">
                <view class="holiday-icon">
                  <up-icon name="calendar"
                           size="18"
                           color="#67c23a" />
                </view>
                <text>设备名称：{{ notice.deviceName }}</text>
              </view>
              <view class="card-actions warning"
                    v-if="isOverdue(notice)">
                <up-icon name="info-circle"
                         size="16"
                         color="#fff" />
                <text>{{ '超时未启动' }}</text>
              </view>
              <view v-else
                    class="card-actions"
                    :class="getTagType(notice.status)">
                <up-icon :name="getIconName(notice.status)"
                         size="16"
                         color="#fff" />
                <text>{{ notice.status || '未知' }}</text>
              </view>
            </view>
            <view class="card-content">
              <text>规格型号：{{ notice.deviceModel || "-" }}</text>
            </view>
            <view class="card-content">
              <text>计划运行时间：{{ notice.planRuntimeTime || "-" }}</text>
            </view>
            <view class="card-content">
              <text>开始运行时间：{{ notice.startRuntimeTime || "-" }}</text>
            </view>
            <view class="card-content">
              <text>结束运行时间：{{ notice.endRuntimeTime || "-" }}</text>
            </view>
            <view class="card-content">
              <text>运行时长：{{ notice.runtimeDuration || "-" }}</text>
            </view>
            <up-button text
                       v-if="isOverdue(notice)"
                       type="warning"
                       size="small"
                       @click="handleEdit(notice, '启动运行')"
                       :disabled="isNoticeExpired(notice)">
              <up-icon name="play-circle"
                       size="16"
                       style="margin-right: 10rpx;"
                       color="#fff" />
              ç«‹å³å¯åŠ¨
            </up-button>
            <up-button text
                       v-else-if="notice.status"
                       :type="getTagType2(notice.status)"
                       size="small"
                       @click="handleEdit(notice, notice.status === '运行中' ? '停止运行' : '启动运行')"
                       :disabled="isNoticeExpired(notice)">
              <up-icon :name="getIconName2(notice.status)"
                       size="16"
                       color="#fff" />
              {{ notice.status === '运行中' ? '停止运行' : '立即启动' }}
            </up-button>
          </view>
        </view>
      </view>
      <!-- ç©ºçŠ¶æ€ -->
      <view class="empty-state"
            v-if="holidayNotices.length === 0 && maintenanceNotices.length === 0">
        <text>暂无通知公告</text>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { onMounted, ref } from "vue";
  import PageHeader from "@/components/PageHeader.vue";
  import {
    getLedgerPage,
    editLedger,
  } from "@/api/equipmentManagement/runManagement.js";

  // èŽ·å–标签类型
  const getTagType = status => {
    switch (status) {
      case "运行中":
        return "success";
      case "停止运行":
        return "error";
      default:
        return "info";
    }
  };
  const getTagType2 = status => {
    switch (status) {
      case "停止运行":
        return "success";
      case "运行中":
        return "error";
      default:
        return "info";
    }
  };
  // èŽ·å–图标名称
  const getIconName = status => {
    switch (status) {
      case "运行中":
        return "play-circle";
      case "停止运行":
        return "pause-circle";
      default:
        return "question-circle";
    }
  };
  // èŽ·å–图标名称2
  const getIconName2 = status => {
    switch (status) {
      case "停止运行":
        return "play-circle";
      case "运行中":
        return "pause-circle";
      default:
        return "question-circle";
    }
  };
  const goBack = () => {
    uni.navigateBack();
  };
  const isOverdue = notice => {
    if (
      notice.status == "运行中" ||
      !notice.planRuntimeTime ||
      notice.startRuntimeTime
    ) {
      return false;
    }
    const planTime = new Date(notice.planRuntimeTime).getTime();
    const currentTime = new Date().getTime();
    return currentTime > planTime;
  };

  const isNoticeExpired = notice => {
    if (!notice || !notice.expirationDate) {
      return false;
    }

    const expiration = new Date(notice.expirationDate);

    if (Number.isNaN(expiration.getTime())) {
      return false;
    }

    expiration.setHours(23, 59, 59, 999);

    return new Date() > expiration;
  };

  const handleEdit = async (device, status) => {
    try {
      const currentTime = new Date()
        .toLocaleString("zh-CN", {
          year: "numeric",
          month: "2-digit",
          day: "2-digit",
          hour: "2-digit",
          minute: "2-digit",
          second: "2-digit",
          hour12: false,
        })
        .replace(/\//g, "-");

      // æ›´æ–°è®¾å¤‡çŠ¶æ€å’Œç›¸å…³æ—¶é—´å­—段
      if (status === "启动运行") {
        device.status = "运行中";
        device.startRuntimeTime = currentTime;
        device.endRuntimeTime = null; // æ¸…空结束时间
        device.runtimeDuration = null; // æ¸…空运行时长
      } else {
        device.status = "停止运行";
        device.endRuntimeTime = currentTime;
        // è®¡ç®—运行时长
        if (device.startRuntimeTime) {
          const startTime = new Date(device.startRuntimeTime);
          const endTime = new Date(currentTime);
          const duration = endTime - startTime;
          const hours = Math.floor(duration / (1000 * 60 * 60));
          const minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60));
          device.runtimeDuration = `${hours}小时${minutes}分钟`;
        }
      }
      const params = {
        id: device.id,
        status: device.status,
        planRuntimeTime: device.planRuntimeTime,
        startRuntimeTime: device.startRuntimeTime,
        endRuntimeTime: device.endRuntimeTime,
        runtimeDuration: device.runtimeDuration,
      };
      // è°ƒç”¨API更新设备状态
      const response = await editLedger(params);
      if (response.code === 200) {
        showToast(`${device.deviceName} ${status}成功`);
        // åˆ·æ–°åˆ—表
        await fetchHolidayNotices();
      } else {
        showToast(response.msg || "操作失败");
      }
    } catch (error) {
      console.error("更新设备状态失败:", error);
      showToast("操作失败");
    }
  };

  const holidayNotices = ref([]);
  const maintenanceNotices = ref([]);

  const fetchHolidayNotices = (append = false) => {
    getLedgerPage({}).then(res => {
      holidayNotices.value = res?.data?.records || [];
    });
  };

  // ç”Ÿå‘½å‘¨æœŸ
  onMounted(() => {
    fetchHolidayNotices();
  });
</script>

<style scoped>
  .notice-page {
    min-height: 100vh;
    background: #f5f7fa;
    padding-bottom: 16px;
    display: flex;
    flex-direction: column;
  }

  .search_form {
    background: #ffffff;
    padding: 12px 16px;
    margin: 8px 12px 12px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .search_title {
    font-weight: 500;
    color: #333;
    margin-right: 8px;
  }

  .ml10 {
    margin-left: 10px;
  }

  .notice-board {
    padding: 0 12px 16px;
  }

  .notice-section {
    margin-bottom: 16px;
  }

  .section-header {
    display: flex;
    align-items: center;
    margin: 4px 4px 12px;
  }

  .section-header h3 {
    margin: 0;
    color: #303133;
    font-size: 16px;
    font-weight: 600;
  }

  .section-count {
    margin-left: 10px;
    background: #409eff;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
  }

  .notice-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .notice-card {
    background: white;
    border-radius: 12px;
    padding: 14px 14px 10px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
  }

  .notice-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }

  .holiday-card {
    border-left-color: #bec4c3;
  }

  .maintenance-card {
    border-left-color: #e6a23c;
  }

  .urgent {
    border-left-color: #f56c6c;
    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
  }

  .card-title {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: #303133;
    flex: 1;
  }

  .holiday-icon {
    color: #67c23a;
    margin-right: 8px;
    font-size: 18px;
  }

  .maintenance-icon {
    color: #e6a23c;
    margin-right: 8px;
    font-size: 18px;
  }

  .card-actions {
    display: flex;
    gap: 8px;
    padding: 4rpx 8rpx;
    border-radius: 10rpx;
  }

  .card-content {
    margin-bottom: 10px;
  }

  .card-content text {
    color: #606266;
    line-height: 1.6;
    font-size: 13px;
  }

  .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .card-meta {
    display: flex;
    gap: 8px;
  }

  .type,
  .priority,
  .status {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
  }

  .type-1 {
    background: #f0f9ff;
    color: #0369a1;
  }

  .type-2 {
    background: #fef3c7;
    color: #d97706;
  }

  .priority-1 {
    background: #f0f9ff;
    color: #0369a1;
  }

  .priority-2 {
    background: #fef3c7;
    color: #d97706;
  }
  .success {
    background: #67c23a;
    color: #fff;
  }
  .error {
    background: #f56c6c;
    color: #fff;
  }
  .info {
    background: #a8a9aa;
    color: #fff;
  }
  .warning {
    background: #e6a23c;
    color: #fff;
  }

  .priority-3 {
    background: #fef2f2;
    color: #dc2626;
  }

  .status-0 {
    background: #f3f4f6;
    color: #6b7280;
  }

  .status-1 {
    background: #d1fae5;
    color: #059669;
  }

  .status-2 {
    background: #fef3c7;
    color: #d97706;
  }

  .card-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 12px;
    color: #909399;
  }

  .creator {
    font-weight: 500;
    margin-bottom: 2px;
  }

  .expiration {
    margin-top: 2px;
  }

  .card-remark {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 12px;
    color: #606266;
    border-left: 3px solid #409eff;
  }

  .empty-state {
    text-align: center;
    padding: 48px 16px;
    color: #999;
    font-size: 13px;
  }

  .dialog-footer {
    text-align: right;
  }

  /* ç§»åŠ¨ç«¯å¼¹çª—样式 */
  .dialog-container {
    background: #ffffff;
    border-radius: 18px 18px 0 0;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
  }

  .dialog-header {
    padding: 16px 20px 8px 20px;
  }

  .dialog-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }

  .dialog-body {
    flex: 1;
    padding: 0 16px 12px 16px;
    overflow-y: auto;
  }

  .dialog-footer {
    display: flex;
    padding: 12px 16px 16px 16px;
    border-top: 1px solid #f0f0f0;
  }

  /* å“åº”式设计 */
  @media (max-width: 768px) {
    .search_form {
      flex-direction: column;
      gap: 15px;
      align-items: flex-start;
    }

    .search_form > div {
      width: 100%;
      display: flex;
      gap: 10px;
    }
  }
</style>

 src/pages/index.vue

@@ -38,54 +38,54 @@
    <!--            </view>-->
    <!--        </view>-->
    <!-- è¥é”€ç®¡ç†æ¨¡å— -->
    <!--    <view class="common-module marketing-module">-->
    <!--      <view class="module-header">-->
    <!--        <view class="module-title-container">-->
    <!--          <text class="module-title">营销管理</text>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--      <view class="module-content">-->
    <!--        <up-grid :border="false"-->
    <!--                 col="4">-->
    <!--          <up-grid-item v-for="(item, index) in marketingItems"-->
    <!--                        :key="index"-->
    <!--                        @click="handleCommonItemClick(item)">-->
    <!--            <view class="icon-container"-->
    <!--                  :style="{ background: item.bgColor }">-->
    <!--              <up-icon :name="item.icon"-->
    <!--                       :size="58"-->
    <!--                       color="#ffffff"></up-icon>-->
    <!--            </view>-->
    <!--            <text class="item-label">{{item.label}}</text>-->
    <!--          </up-grid-item>-->
    <!--        </up-grid>-->
    <!--      </view>-->
    <!--    </view>-->
    <view class="common-module marketing-module">
      <view class="module-header">
        <view class="module-title-container">
          <text class="module-title">营销管理</text>
        </view>
      </view>
      <view class="module-content">
        <up-grid :border="false"
                 col="4">
          <up-grid-item v-for="(item, index) in marketingItems"
                        :key="index"
                        @click="handleCommonItemClick(item)">
            <view class="icon-container"
                  :style="{ background: item.bgColor }">
              <up-icon :name="item.icon"
                       :size="58"
                       color="#ffffff"></up-icon>
            </view>
            <text class="item-label">{{item.label}}</text>
          </up-grid-item>
        </up-grid>
      </view>
    </view>
    <!--    &lt;!&ndash; é‡‡è´­ç®¡ç†æ¨¡å— &ndash;&gt;-->
    <!--    <view class="common-module purchase-module">-->
    <!--      <view class="module-header">-->
    <!--        <view class="module-title-container">-->
    <!--          <text class="module-title">采购管理</text>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--      <view class="module-content">-->
    <!--        <up-grid :border="false"-->
    <!--                 col="4">-->
    <!--          <up-grid-item v-for="(item, index) in purchaseItems"-->
    <!--                        :key="index"-->
    <!--                        @click="handleCommonItemClick(item)">-->
    <!--            <view class="icon-container"-->
    <!--                  :style="{ background: item.bgColor }">-->
    <!--              <up-icon :name="item.icon"-->
    <!--                       :size="58"-->
    <!--                       color="#ffffff"></up-icon>-->
    <!--            </view>-->
    <!--            <text class="item-label">{{item.label}}</text>-->
    <!--          </up-grid-item>-->
    <!--        </up-grid>-->
    <!--      </view>-->
    <!--    </view>-->
    <!--    &lt;!&ndash; ååŒåŠžå…¬æ¨¡å— &ndash;&gt;-->
    <view class="common-module purchase-module">
      <view class="module-header">
        <view class="module-title-container">
          <text class="module-title">采购管理</text>
        </view>
      </view>
      <view class="module-content">
        <up-grid :border="false"
                 col="4">
          <up-grid-item v-for="(item, index) in purchaseItems"
                        :key="index"
                        @click="handleCommonItemClick(item)">
            <view class="icon-container"
                  :style="{ background: item.bgColor }">
              <up-icon :name="item.icon"
                       :size="58"
                       color="#ffffff"></up-icon>
            </view>
            <text class="item-label">{{item.label}}</text>
          </up-grid-item>
        </up-grid>
      </view>
    </view>
    <!-- &lt;!&ndash; ååŒåŠžå…¬æ¨¡å— &ndash;&gt; -->
    <view class="common-module collaboration-module">
      <view class="module-header">
        <view class="module-title-container">
@@ -163,29 +163,29 @@
      </view>
    </view>
    <!-- è®¾å¤‡ç®¡ç†æ¨¡å— -->
    <!--    <view class="common-module equipment-module">-->
    <!--      <view class="module-header">-->
    <!--        <view class="module-title-container">-->
    <!--          <text class="module-title">设备管理</text>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--      <view class="module-content">-->
    <!--        <up-grid :border="false"-->
    <!--                 col="4">-->
    <!--          <up-grid-item v-for="(item, index) in equipmentItems"-->
    <!--                        :key="index"-->
    <!--                        @click="handleCommonItemClick(item)">-->
    <!--            <view class="icon-container"-->
    <!--                  :style="{ background: item.bgColor }">-->
    <!--              <up-icon :name="item.icon"-->
    <!--                       :size="58"-->
    <!--                       color="#ffffff"></up-icon>-->
    <!--            </view>-->
    <!--            <text class="item-label">{{item.label}}</text>-->
    <!--          </up-grid-item>-->
    <!--        </up-grid>-->
    <!--      </view>-->
    <!--    </view>-->
    <view class="common-module equipment-module">
      <view class="module-header">
        <view class="module-title-container">
          <text class="module-title">设备管理</text>
        </view>
      </view>
      <view class="module-content">
        <up-grid :border="false"
                 col="4">
          <up-grid-item v-for="(item, index) in equipmentItems"
                        :key="index"
                        @click="handleCommonItemClick(item)">
            <view class="icon-container"
                  :style="{ background: item.bgColor }">
              <up-icon :name="item.icon"
                       :size="58"
                       color="#ffffff"></up-icon>
            </view>
            <text class="item-label">{{item.label}}</text>
          </up-grid-item>
        </up-grid>
      </view>
    </view>
  </view>
</template>

@@ -278,88 +278,32 @@

  // ååŒåŠžå…¬åŠŸèƒ½æ•°æ®
  const collaborationItems = reactive([
    // {
    //   icon: "/static/images/icon/gongchuguanli@2x.png",
    //   label: "公出管理",
    // },
    // {
    //   icon: "/static/images/icon/qingjiaguanli@2x.png",
    //   label: "请假管理",
    // },
    // {
    //   icon: "/static/images/icon/chuchaiguanli@2x.png",
    //   label: "出差管理",
    // },
    {
      icon: "/static/images/icon/chuchaiguanli@2x.png",
      icon: "/static/images/icon/gongchuguanli@2x.png",
      label: "考勤管理",
    },
    {
      icon: "/static/images/icon/chuchaiguanli@2x.png",
      icon: "/static/images/icon/baoxiaoguanli.png",
      label: "财务管理",
    },
    // {
    //   icon: "/static/images/icon/chuchaiguanli@2x.png",
    //   label: "报销管理",
    // },
    // {
    //   icon: "/static/images/icon/chuchaiguanli@2x.png",
    //   label: "采购管理",
    // },
    // {
    //   icon: "/static/images/icon/chuchaiguanli@2x.png",
    //   label: "报价管理",
    // },
    // {
    //   icon: "/static/images/icon/chuchaiguanli@2x.png",
    //   label: "出库管理",
    // },
    {
      icon: "/static/images/icon/chuchaiguanli@2x.png",
      icon: "/static/images/icon/huiyiliebiao@2x.png",
      label: "会议管理",
    },
    // {
    //   icon: "/static/images/icon/qingjiaguanli@2x.png",
    //   label: "会议设置",
    // },
    // {
    //   icon: "/static/images/icon/qingjiaguanli@2x.png",
    //   label: "会议列表",
    // },
    // {
    //   icon: "/static/images/icon/qingjiaguanli@2x.png",
    //   label: "会议申请",
    // },
    // {
    //   icon: "/static/images/icon/qingjiaguanli@2x.png",
    //   label: "会议审批",
    // },
    // {
    //   icon: "/static/images/icon/qingjiaguanli@2x.png",
    //   label: "会议发布",
    // },
    // {
    //   icon: "/static/images/icon/qingjiaguanli@2x.png",
    //   label: "会议总结",
    // },
    // {
    //   icon: "/static/images/icon/qingjiaguanli@2x.png",
    //   label: "会议看板",
    // },
    {
      icon: "/static/images/icon/qingjiaguanli@2x.png",
      icon: "/static/images/icon/tongzhigonggao@2x.png",
      label: "通知公告",
    },
    {
      icon: "/static/images/icon/qingjiaguanli@2x.png",
      icon: "/static/images/icon/zhishiku@2x.png",
      label: "知识库",
    },
    {
      icon: "/static/images/icon/qingjiaguanli@2x.png",
      icon: "/static/images/icon/yongyinguanli@2x.png",
      label: "用印管理",
    },
    {
      icon: "/static/images/icon/qingjiaguanli@2x.png",
      icon: "/static/images/icon/guizhangzhidu@2x.png",
      label: "规章制度",
    },
    // {
@@ -407,6 +351,10 @@
    //     icon: '/static/images/icon/shebeitaizhang@2x.png',
    //     label: '设备台账',
    // },
    {
      icon: "/static/images/icon/shbeibaoxiu@2x.png",
      label: "运行管理",
    },
    {
      icon: "/static/images/icon/shbeibaoxiu@2x.png",
      label: "设备报修",
@@ -649,6 +597,11 @@
          url: "/pages/equipmentManagement/ledger/index",
        });
        break;
      case "运行管理":
        uni.navigateTo({
          url: "/pages/equipmentManagement/runManagement/index",
        });
        break;
      case "设备报修":
        uni.navigateTo({
          url: "/pages/equipmentManagement/repair/index",

 src/pages/indexItem.vue

@@ -51,50 +51,50 @@
  ]);
  const caiwu = reactive([
    {
      icon: "/static/images/icon/chuchaiguanli@2x.png",
      icon: "/static/images/icon/baoxiaoguanli.png",
      label: "报销管理",
    },
    {
      icon: "/static/images/icon/chuchaiguanli@2x.png",
      icon: "/static/images/icon/caigouguanli.png",
      label: "采购管理",
    },
    {
      icon: "/static/images/icon/chuchaiguanli@2x.png",
      icon: "/static/images/icon/baojiaguanli.png",
      label: "报价管理",
    },
    {
      icon: "/static/images/icon/chuchaiguanli@2x.png",
      icon: "/static/images/icon/chukuguanli@2x.png",
      label: "出库管理",
    },
  ]);

  const huiyi = reactive([
    {
      icon: "/static/images/icon/qingjiaguanli@2x.png",
      icon: "/static/images/icon/huiyishezhi@2x.png",
      label: "会议设置",
    },
    {
      icon: "/static/images/icon/qingjiaguanli@2x.png",
      icon: "/static/images/icon/huiyiliebiao@2x.png",
      label: "会议列表",
    },
    {
      icon: "/static/images/icon/qingjiaguanli@2x.png",
      icon: "/static/images/icon/huiyishenqing@2x.png",
      label: "会议申请",
    },
    {
      icon: "/static/images/icon/qingjiaguanli@2x.png",
      icon: "/static/images/icon/huiyishenpi@2x.png",
      label: "会议审批",
    },
    {
      icon: "/static/images/icon/qingjiaguanli@2x.png",
      icon: "/static/images/icon/huiyifabu@2x.png",
      label: "会议发布",
    },
    {
      icon: "/static/images/icon/qingjiaguanli@2x.png",
      icon: "/static/images/icon/huiyizongjie@2x.png",
      label: "会议总结",
    },
    {
      icon: "/static/images/icon/qingjiaguanli@2x.png",
      icon: "/static/images/icon/huiyikanban@2x.png",
      label: "会议看板",
    },
  ]);

 src/pages/procurementManagement/paymentEntry/add.vue

@@ -1,278 +1,280 @@
<template>
  <view class="account-detail">
    <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
    <PageHeader title="新增付款" @back="onClickLeft" />
    
    <PageHeader title="新增付款"
                @back="onClickLeft" />
    <!-- è¡¨å•å†…容 -->
    <u-form @submit="onSubmit" ref="formRef" label-width="110" input-align="right" error-message-align="right">
    <u-form @submit="onSubmit"
            ref="formRef"
            label-width="110"
            input-align="right"
            error-message-align="right">
      <!-- åŸºæœ¬ä¿¡æ¯ -->
      <u-cell-group title="基本信息" class="form-section">
        <u-form-item label="采购合同号" class="form-item">
          <u-input
            v-model="form.purchaseContractNumber"
            placeholder="自动填充"
            readonly
          />
      <u-cell-group title="基本信息"
                    class="form-section">
        <u-form-item label="采购合同号"
                     class="form-item">
          <u-input v-model="form.purchaseContractNumber"
                   placeholder="自动填充"
                   readonly />
        </u-form-item>
        <u-form-item label="销售合同号" class="form-item">
          <u-input
            v-model="form.salesContractNo"
            placeholder="自动填充"
            readonly
          />
        <u-form-item label="销售合同号"
                     class="form-item">
          <u-input v-model="form.salesContractNo"
                   placeholder="自动填充"
                   readonly />
        </u-form-item>
        <u-form-item label="供应商名称" class="form-item">
          <u-input
            v-model="form.supplierName"
            placeholder="自动填充"
            readonly
          />
        <u-form-item label="供应商名称"
                     class="form-item">
          <u-input v-model="form.supplierName"
                   placeholder="自动填充"
                   readonly />
        </u-form-item>
        <u-form-item label="发票号" class="form-item">
        <!-- <u-form-item label="发票号" class="form-item">
          <u-input
            v-model="form.invoiceNumber"
            placeholder="自动填充"
            readonly
          />
        </u-form-item>
        <u-form-item label="发票金额(元)" class="form-item">
        </u-form-item> -->
        <!-- <u-form-item label="发票金额(元)" class="form-item">
          <u-input
            v-model="form.invoiceAmount"
            placeholder="自动填充"
            readonly
          />
        </u-form-item>
        </u-form-item> -->
        <view class="tip-text">待付款金额：{{ currentNoReceiptAmount }} å…ƒ</view>
        <u-form-item label="本次付款金额" prop="currentPaymentAmount" required class="form-item">
          <u-input
            v-model="form.currentPaymentAmount"
            type="number"
            placeholder="请输入"
            @blur="changeNum"
            clearable
          />
        <u-form-item label="本次付款金额"
                     prop="currentPaymentAmount"
                     required
                     class="form-item">
          <u-input v-model="form.currentPaymentAmount"
                   type="number"
                   placeholder="请输入"
                   @blur="changeNum"
                   clearable />
        </u-form-item>
        <u-form-item label="付款形式" prop="paymentMethod" required class="form-item">
          <u-input
            v-model="form.paymentMethod"
            placeholder="请选择"
            readonly
            @click="showPaymentTypePicker"
          />
        <u-form-item label="付款形式"
                     prop="paymentMethod"
                     required
                     class="form-item">
          <u-input v-model="form.paymentMethod"
                   placeholder="请选择"
                   readonly
                   @click="showPaymentTypePicker" />
          <template #right>
                    <up-icon
                        name="arrow-right"
                        @click="showPaymentTypePicker"
                    ></up-icon>
                </template>
            <up-icon name="arrow-right"
                     @click="showPaymentTypePicker"></up-icon>
          </template>
        </u-form-item>
        <u-form-item label="付款日期" prop="paymentDate" required class="form-item">
          <u-input
            v-model="form.paymentDate"
            placeholder="请选择"
            readonly
            @click="showDatePicker"
          />
        <u-form-item label="付款日期"
                     prop="paymentDate"
                     required
                     class="form-item">
          <u-input v-model="form.paymentDate"
                   placeholder="请选择"
                   readonly
                   @click="showDatePicker" />
          <template #right>
                    <up-icon
                        name="arrow-right"
                        @click="showDatePicker"
                    ></up-icon>
                </template>
            <up-icon name="arrow-right"
                     @click="showDatePicker"></up-icon>
          </template>
        </u-form-item>
        <u-form-item label="登记人" class="form-item">
          <u-input
            v-model="form.registrant"
            placeholder="自动填充"
            readonly
          />
        <u-form-item label="登记人"
                     class="form-item">
          <u-input v-model="form.registrant"
                   placeholder="自动填充"
                   readonly />
        </u-form-item>
        <u-form-item label="登记日期" prop="registrationtDate" required class="form-item">
          <u-input
            v-model="form.registrationtDate"
            placeholder="请选择"
            readonly
          />
        <u-form-item label="登记日期"
                     prop="registrationtDate"
                     required
                     class="form-item">
          <u-input v-model="form.registrationtDate"
                   placeholder="请选择"
                   readonly />
        </u-form-item>
      </u-cell-group>
      
      <!-- æäº¤æŒ‰é’® -->
      <FooterButtons 
        :loading="loading"
        @cancel="onClickLeft"
        @confirm="onSubmit"
      />
      <FooterButtons :loading="loading"
                     @cancel="onClickLeft"
                     @confirm="onSubmit" />
    </u-form>

    <!-- ä»˜æ¬¾æ–¹å¼é€‰æ‹©å™¨ -->
    <up-action-sheet
      :show="showPaymentType"
      title="选择付款方式"
      :actions="receipt_payment_type"
      @select="onPaymentTypeConfirm"
      @close="showPaymentType = false"
    />

    <up-action-sheet :show="showPaymentType"
                     title="选择付款方式"
                     :actions="receipt_payment_type"
                     @select="onPaymentTypeConfirm"
                     @close="showPaymentType = false" />
    <!-- æ—¥æœŸé€‰æ‹©å™¨ -->
     <up-datetime-picker
                    :show="showDate"
                    v-model="form.paymentDate"
                    @confirm="onDateConfirm"
                    @cancel="showDate = false"
                    mode="date"
                />
    <up-datetime-picker :show="showDate"
                        v-model="form.paymentDate"
                        @confirm="onDateConfirm"
                        @cancel="showDate = false"
                        mode="date" />
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import FooterButtons from '@/components/FooterButtons.vue'
import useUserStore from '@/store/modules/user'
import { useDict } from '@/utils/dict'
import {paymentRegistrationAdd} from "@/api/procurementManagement/paymentEntry";
import { formatDateToYMD } from '@/utils/ruoyi'
  import { ref, onMounted, computed } from "vue";
  import FooterButtons from "@/components/FooterButtons.vue";
  import useUserStore from "@/store/modules/user";
  import { useDict } from "@/utils/dict";
  import { paymentRegistrationAdd } from "@/api/procurementManagement/paymentEntry";
  import { formatDateToYMD } from "@/utils/ruoyi";

// æ›¿æ¢ toast å’Œ notify æ–¹æ³•
const showToast = (message) => {
  uni.showToast({
    title: message,
    icon: 'none'
  })
}
  // æ›¿æ¢ toast å’Œ notify æ–¹æ³•
  const showToast = message => {
    uni.showToast({
      title: message,
      icon: "none",
    });
  };

const showNotify = ({ type, message }) => {
  uni.showToast({
    title: message,
    icon: type === 'warning' ? 'none' : 'success'
  })
}
  const showNotify = ({ type, message }) => {
    uni.showToast({
      title: message,
      icon: type === "warning" ? "none" : "success",
    });
  };

const userStore = useUserStore()
  const userStore = useUserStore();

// è¡¨å•å¼•ç”¨
const formRef = ref()
  // è¡¨å•å¼•ç”¨
  const formRef = ref();

// å“åº”式数据
const loading = ref(false)
const showPaymentType = ref(false)
const showDate = ref(false)
  // å“åº”式数据
  const loading = ref(false);
  const showPaymentType = ref(false);
  const showDate = ref(false);

// è¡¨å•æ•°æ®
const form = ref({
    purchaseContractNumber: '',
  salesContractNo: '',
  supplierName: '',
  invoiceNumber: '',
  invoiceAmount: '',
  taxRate: '',
  currentPaymentAmount: '',
  receiptPaymentType: '',
    paymentMethod: '',
  registrant: '',
    paymentDate: '',
    registrationtDate: '',
  ticketRegistrationId: ''
})
const currentNoReceiptAmount = ref(0)
  // è¡¨å•æ•°æ®
  const form = ref({
    purchaseContractNumber: "",
    salesContractNo: "",
    supplierName: "",
    invoiceNumber: "",
    invoiceAmount: "",
    taxRate: "",
    currentPaymentAmount: "",
    receiptPaymentType: "",
    paymentMethod: "",
    registrant: "",
    paymentDate: "",
    registrationtDate: "",
    ticketRegistrationId: "",
  });
  const currentNoReceiptAmount = ref(0);

// èŽ·å–字典数据
const { receipt_payment_type: dictReceiptPaymentType } = useDict('receipt_payment_type')
  // èŽ·å–字典数据
  const { receipt_payment_type: dictReceiptPaymentType } = useDict(
    "receipt_payment_type"
  );

// è½¬æ¢å­—典数据格式为选择器需要的格式
const receipt_payment_type = computed(() => {
  return dictReceiptPaymentType.value.map(item => ({
    name: item.label,
    value: item.value
  }))
})
  // è½¬æ¢å­—典数据格式为选择器需要的格式
  const receipt_payment_type = computed(() => {
    return dictReceiptPaymentType.value.map(item => ({
      name: item.label,
      value: item.value,
    }));
  });

// è¿”回上一页
const onClickLeft = () => {
    uni.removeStorageSync('invoiceLedgerEditRow');
    uni.navigateBack()
}
  // è¿”回上一页
  const onClickLeft = () => {
    uni.removeStorageSync("invoiceLedgerEditRow");
    uni.navigateBack();
  };

// æ˜¾ç¤ºä»˜æ¬¾æ–¹å¼é€‰æ‹©å™¨
const showPaymentTypePicker = () => {
  showPaymentType.value = true
}
const changeNum = () => {
    if (form.value.currentPaymentAmount > currentNoReceiptAmount.value) {
        form.value.currentPaymentAmount = currentNoReceiptAmount.value
        showToast('不可大于待付款金额')
    }
}
  // æ˜¾ç¤ºä»˜æ¬¾æ–¹å¼é€‰æ‹©å™¨
  const showPaymentTypePicker = () => {
    showPaymentType.value = true;
  };
  const changeNum = () => {
    if (form.value.currentPaymentAmount > currentNoReceiptAmount.value) {
      form.value.currentPaymentAmount = currentNoReceiptAmount.value;
      showToast("不可大于待付款金额");
    }
  };

// ç¡®è®¤ä»˜æ¬¾æ–¹å¼é€‰æ‹©
const onPaymentTypeConfirm = (item) => {
  form.value.receiptPaymentType = item.value
  form.value.paymentMethod = item.name
  showPaymentType.value = false
}
  // ç¡®è®¤ä»˜æ¬¾æ–¹å¼é€‰æ‹©
  const onPaymentTypeConfirm = item => {
    form.value.receiptPaymentType = item.value;
    form.value.paymentMethod = item.name;
    showPaymentType.value = false;
  };

// æ˜¾ç¤ºæ—¥æœŸé€‰æ‹©å™¨
const showDatePicker = () => {
  showDate.value = true
}
  // æ˜¾ç¤ºæ—¥æœŸé€‰æ‹©å™¨
  const showDatePicker = () => {
    showDate.value = true;
  };

// ç¡®è®¤æ—¥æœŸé€‰æ‹©
const onDateConfirm = (e) => {
  form.value.paymentDate = formatDateToYMD(e.value)
  showDate.value = false
}
  // ç¡®è®¤æ—¥æœŸé€‰æ‹©
  const onDateConfirm = e => {
    form.value.paymentDate = formatDateToYMD(e.value);
    showDate.value = false;
  };

// æäº¤è¡¨å•
const onSubmit = () => {
  // è¡¨å•éªŒè¯
  if (!form.value.currentPaymentAmount) {
    showNotify({ type: 'warning', message: '请输入付款金额' })
    return
  // æäº¤è¡¨å•
  const onSubmit = () => {
    // è¡¨å•éªŒè¯
    if (!form.value.currentPaymentAmount) {
      showNotify({ type: "warning", message: "请输入付款金额" });
      return;
    }
    if (!form.value.receiptPaymentType) {
      showNotify({ type: "warning", message: "请选择付款形式" });
      return;
    }
    if (!form.value.paymentDate) {
      showNotify({ type: "warning", message: "请选择付款日期" });
      return;
    }
    loading.value = true;
    paymentRegistrationAdd(form.value)
      .then(() => {
        showToast("提交成功");
        onClickLeft();
      })
      .catch(error => {
        loading.value = false;
      });
  };

  // åˆå§‹åŒ–数据
  const initData = () => {
    const rowStr = uni.getStorageSync("invoiceLedgerEditRow");
    const row = JSON.parse(rowStr);
    form.value = { ...row };
    form.value.ticketRegistrationId = row.id;
    form.value.id = null;
    form.value.id = "";
    currentNoReceiptAmount.value = row.pendingTicketsTotal
      ? parseFloat(row.pendingTicketsTotal).toFixed(2)
      : "0";
    form.value.registrant = userStore.nickName;
    form.value.registrationtDate = getCurrentDate();
    form.value.paymentDate = getCurrentDate();
  };
  // èŽ·å–当前日期并格式化为 YYYY-MM-DD
  function getCurrentDate() {
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, "0"); // æœˆä»½ä»Ž0开始
    const day = String(today.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  }
  if (!form.value.receiptPaymentType) {
    showNotify({ type: 'warning', message: '请选择付款形式' })
    return
  }
  if (!form.value.paymentDate) {
    showNotify({ type: 'warning', message: '请选择付款日期' })
    return
  }
  loading.value = true
    paymentRegistrationAdd(form.value)
    .then(() => {
      showToast('提交成功')
            onClickLeft()
    })
    .catch((error) => {
            loading.value = false
    })
}

// åˆå§‹åŒ–数据
const initData = () => {
    const rowStr = uni.getStorageSync('invoiceLedgerEditRow')
    const row = JSON.parse(rowStr)
    form.value = { ...row };
    form.value.ticketRegistrationId = row.id;
    form.value.id = null;
    form.value.id = "";
    currentNoReceiptAmount.value = row.unPaymentAmountTotal
    form.value.registrant = userStore.nickName
    form.value.registrationtDate = getCurrentDate();
    form.value.paymentDate = getCurrentDate();
}
// èŽ·å–当前日期并格式化为 YYYY-MM-DD
function getCurrentDate() {
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, "0"); // æœˆä»½ä»Ž0开始
    const day = String(today.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
}
onMounted(() => {
  initData()
})
  onMounted(() => {
    initData();
  });
</script>

<style scoped lang="scss">
@import '@/static/scss/form-common.scss';
  @import "@/static/scss/form-common.scss";
  .tip-text {
    font-size: 16px;
    color: #383838;
    margin-top: 10px;
    margin-bottom: 10px;
  }
</style>

 src/pages/procurementManagement/paymentEntry/index.vue

@@ -1,189 +1,216 @@
<template>
    <view class="sales-account">
        <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
        <PageHeader title="付款登记" @back="goBack" />

        <!-- æœç´¢å’Œç­›é€‰åŒºåŸŸ -->
        <view class="search-section">
            <view class="search-bar">
                <view class="search-input">
                    <up-input
                        class="search-text"
                        placeholder="请输入供应商名称/合同号搜索"
                        v-model="searchForm.supplierNameOrContractNo"
                        @change="getList"
                        clearable
                    />
                </view>
                <view class="filter-button" @click="getList">
                    <up-icon name="search" size="24" color="#999"></up-icon>
                </view>
            </view>
			
            <!-- ç­›é€‰å¼€å…³ -->
            <view class="switch-row">
                <text class="switch-label">不显示待付款为0</text>
                <u-switch v-model="searchForm.status" @change="getList" active-color="#2979ff" inactive-color="#e5e5e5"/>
            </view>
        </view>



        <!-- åˆ—表区域 -->
        <view class="ledger-list" v-if="tableData.length > 0">
            <view v-for="(item, index) in tableData" :key="index">
                <view class="ledger-item">
                    <view class="item-header">
                        <view class="item-left">
                            <view class="document-icon">
                                <up-icon name="file-text" size="16" color="#ffffff"></up-icon>
                            </view>
                            <text class="item-id">{{ item.purchaseContractNumber }}</text>
                        </view>
                    </view>
                    <up-divider></up-divider>
                    <view class="item-details">
                        <view class="detail-row">
                            <text class="detail-label">销售合同号</text>
                            <text class="detail-value">{{ item.salesContractNo }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">供应商名称</text>
                            <text class="detail-value">{{ item.supplierName }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">发票号</text>
                            <text class="detail-value">{{ item.invoiceNumber }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">发票金额(元)</text>
                            <text class="detail-value">{{ item.invoiceAmount }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">已付款金额(元)</text>
                            <text class="detail-value">{{ item.paymentAmountTotal || '-' }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">待付款金额(元)</text>
                            <text class="detail-value highlight">{{ formatNumber(item.unPaymentAmountTotal) }}</text>
                        </view>
                    </view>
					
                    <!-- æ“ä½œæŒ‰é’® -->
                    <view class="action-buttons">
                        <u-button
                            type="primary"
                            size="small"
                            class="action-btn"
                            :disabled="item.unPaymentAmountTotal == 0"
                            @click="openForm('add', item)"
                        >
                            æ–°å¢žä»˜æ¬¾
                        </u-button>
                    </view>
                </view>
            </view>
        </view>

        <!-- æ— æ•°æ®æç¤º -->
        <view class="no-data" v-else>
            <text>暂无付款数据</text>
        </view>
    </view>
  <view class="sales-account">
    <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
    <PageHeader title="付款登记"
                @back="goBack" />
    <!-- æœç´¢å’Œç­›é€‰åŒºåŸŸ -->
    <view class="search-section">
      <view class="search-bar">
        <view class="search-input">
          <up-input class="search-text"
                    placeholder="请输入供应商名称/合同号搜索"
                    v-model="searchForm.supplierNameOrContractNo"
                    @change="getList"
                    clearable />
        </view>
        <view class="filter-button"
              @click="getList">
          <up-icon name="search"
                   size="24"
                   color="#999"></up-icon>
        </view>
      </view>
      <!-- ç­›é€‰å¼€å…³ -->
      <view class="switch-row">
        <text class="switch-label">不显示待付款为0</text>
        <u-switch v-model="searchForm.status"
                  @change="getList"
                  active-color="#2979ff"
                  inactive-color="#e5e5e5" />
      </view>
    </view>
    <!-- åˆ—表区域 -->
    <view class="ledger-list"
          v-if="tableData.length > 0">
      <view v-for="(item, index) in tableData"
            :key="index">
        <view class="ledger-item">
          <view class="item-header">
            <view class="item-left">
              <view class="document-icon">
                <up-icon name="file-text"
                         size="16"
                         color="#ffffff"></up-icon>
              </view>
              <text class="item-id">{{ item.purchaseContractNumber }}</text>
            </view>
            <view class="item-tag">
              <u-tag :type="getTagClass(item.statusName)">{{ item.statusName || '--' }}</u-tag>
            </view>
          </view>
          <up-divider></up-divider>
          <view class="item-details">
            <view class="detail-row">
              <text class="detail-label">销售合同号</text>
              <text class="detail-value">{{ item.salesContractNo }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">供应商名称</text>
              <text class="detail-value">{{ item.supplierName }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">发票号</text>
              <text class="detail-value">{{ item.invoiceNumber }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">产品大类</text>
              <text class="detail-value">{{ item.productCategory }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">规格型号</text>
              <text class="detail-value">{{ item.specificationModel }}</text>
            </view>
            <!-- <view class="detail-row">
              <text class="detail-label">发票金额(元)</text>
              <text class="detail-value">{{ item.invoiceAmount }}</text>
            </view> -->
            <view class="detail-row">
              <text class="detail-label">已付款金额(元)</text>
              <text class="detail-value">{{ item.ticketsTotal ? parseFloat(item.ticketsTotal).toFixed(2) : '0' }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">待付款金额(元)</text>
              <text class="detail-value highlight">{{ item.pendingTicketsTotal ? parseFloat(item.pendingTicketsTotal).toFixed(2) : '0' }}</text>
            </view>
          </view>
          <!-- æ“ä½œæŒ‰é’® -->
          <view class="action-buttons">
            <u-button type="primary"
                      size="small"
                      class="action-btn"
                      :disabled="item.unPaymentAmountTotal == 0"
                      @click="openForm('add', item)">
              æ–°å¢žä»˜æ¬¾
            </u-button>
          </view>
        </view>
      </view>
    </view>
    <!-- æ— æ•°æ®æç¤º -->
    <view class="no-data"
          v-else>
      <text>暂无付款数据</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import useUserStore from '@/store/modules/user'
// æ›¿æ¢ toast æ–¹æ³•
const showToast = (message) => {
  uni.showToast({
    title: message,
    icon: 'none'
  })
}
import {onShow} from "@dcloudio/uni-app";
import {invoiceListPage} from "@/api/procurementManagement/procurementInvoiceLedger";
  import { ref } from "vue";
  import useUserStore from "@/store/modules/user";
  // æ›¿æ¢ toast æ–¹æ³•
  const showToast = message => {
    uni.showToast({
      title: message,
      icon: "none",
    });
  };
  import { onShow } from "@dcloudio/uni-app";
  import { invoiceListPage } from "@/api/procurementManagement/procurementInvoiceLedger";

// å“åº”式数据
const tableData = ref([])
const tableLoading = ref(false)
  // å“åº”式数据
  const tableData = ref([]);
  const tableLoading = ref(false);

// æŸ¥è¯¢å‚数设置为-1获取全部数据
const page = ref({
    current: -1,
    size: -1
})
  // æŸ¥è¯¢å‚数设置为-1获取全部数据
  const page = ref({
    current: -1,
    size: -1,
  });

// æœç´¢è¡¨å•
const searchForm = ref({
    supplierNameOrContractNo: '',
    status: true,
    customerName: '',
    customerContractNo: '',
    projectName: ''
})
  // æœç´¢è¡¨å•
  const searchForm = ref({
    supplierNameOrContractNo: "",
    status: true,
    customerName: "",
    customerContractNo: "",
    projectName: "",
  });
  // èŽ·å–标签样式类
  const getTagClass = type => {
    if (!type) {
      return "info";
    }
    if (type == "未完成付款") {
      return "warning";
    } else if (type == "已完成付款") {
      return "success";
    } else {
      return "info";
    }
  };
  // æ ¼å¼åŒ–æ•°å­—
  const formatNumber = value => {
    return parseFloat(value || 0).toFixed(2);
  };

// æ ¼å¼åŒ–æ•°å­—
const formatNumber = (value) => {
    return parseFloat(value || 0).toFixed(2)
}
  // è¿”回上一页
  const goBack = () => {
    uni.navigateBack();
  };

// è¿”回上一页
const goBack = () => {
    uni.navigateBack()
}
  // èŽ·å–列表数据
  const getList = () => {
    showLoadingToast("加载中...");
    tableLoading.value = true;
    invoiceListPage({ ...searchForm.value, ...page.value })
      .then(res => {
        console.log(res.data);
        tableLoading.value = false;
        tableData.value = res.data.records || [];
        closeToast();
      })
      .catch(() => {
        tableLoading.value = false;
        closeToast();
      });
  };

// èŽ·å–列表数据
const getList = () => {
    showLoadingToast('加载中...')
    tableLoading.value = true
    invoiceListPage({ ...searchForm.value, ...page.value }).then((res) => {
        tableLoading.value = false
        tableData.value = res.records || []
        closeToast()
    }).catch(() => {
        tableLoading.value = false
        closeToast()
    })
}
  // æ˜¾ç¤ºåŠ è½½æç¤º
  const showLoadingToast = message => {
    uni.showLoading({
      title: message,
      mask: true,
    });
  };

// æ˜¾ç¤ºåŠ è½½æç¤º
const showLoadingToast = (message) => {
    uni.showLoading({
        title: message,
        mask: true
    });
};
  // å…³é—­æç¤º
  const closeToast = () => {
    uni.hideLoading();
  };

// å…³é—­æç¤º
const closeToast = () => {
    uni.hideLoading();
};
  // æ‰“开新增表单
  const openForm = (type, item) => {
    if (item.unPaymentAmountTotal == 0) {
      showToast("无需再付款");
      return;
    }
    uni.setStorageSync("operationType", type);
    uni.setStorageSync("invoiceLedgerEditRow", JSON.stringify(item));
    uni.navigateTo({ url: "/pages/procurementManagement/paymentEntry/add" });
  };

// æ‰“开新增表单
const openForm = (type, item) => {
    if (item.unPaymentAmountTotal == 0) {
        showToast('无需再付款')
        return
    }
    uni.setStorageSync('operationType', type);
    uni.setStorageSync('invoiceLedgerEditRow', JSON.stringify(item))
    uni.navigateTo({ url: '/pages/procurementManagement/paymentEntry/add' })
}

onShow(() => {
    getList()
})
  onShow(() => {
    getList();
  });
</script>

<style scoped lang="scss">
@import '@/styles/procurement-common.scss';
  @import "@/styles/procurement-common.scss";

// ä»˜æ¬¾ç™»è®°ç‰¹æœ‰æ ·å¼
.detail-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
  // ä»˜æ¬¾ç™»è®°ç‰¹æœ‰æ ·å¼
  .detail-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
</style>

 src/pages/procurementManagement/procurementInvoiceLedger/detail.vue

@@ -1,224 +1,271 @@
<template>
    <view class="account-detail">
        <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
        <PageHeader title="编辑来票台账" @back="goBack" />

        <up-form @submit="submitForm" ref="formRef" label-width="120" :model="form">
            <up-form-item label="采购合同号" prop="purchaseContractNumber">
                <up-input v-model="form.purchaseContractNumber" placeholder="自动生成" disabled />
            </up-form-item>
            <up-form-item label="销售合同号" prop="salesContractNo">
                <up-input v-model="form.salesContractNo" placeholder="自动生成" disabled />
            </up-form-item>
            <up-form-item label="含税单价(元)" prop="taxInclusiveUnitPrice">
                <up-input v-model="form.taxInclusiveUnitPrice" placeholder="自动生成" disabled />
            </up-form-item>
            <up-form-item label="创建时间" prop="createdAt">
                <up-input v-model="form.createdAt" placeholder="自动生成" disabled />
            </up-form-item>
            <up-form-item label="发票号" prop="invoiceNumber">
                <up-input v-model="form.invoiceNumber" placeholder="请输入" disabled />
            </up-form-item>
            <up-form-item label="来票数" prop="ticketsNum" required :rules="rules.ticketsNum">
                <up-input
                    v-model="form.ticketsNum"
                    type="number"
                    placeholder="请输入"
                    @blur="inputTicketsNum"
                />
            </up-form-item>
            <up-form-item label="本次来票金额(元)" prop="ticketsAmount" required :rules="rules.ticketsAmount">
                <up-input
                    v-model="form.ticketsAmount"
                    type="number"
                    placeholder="请输入"
                    @blur="inputTicketsAmount"
                />
            </up-form-item>
            <view class="tip-text">未来票数：{{ formatAmount(form.futureTickets) }} å…ƒ</view>

            <!-- ä½¿ç”¨å…¬å…±åº•éƒ¨æŒ‰é’®ç»„件 -->
            <FooterButtons
                show
                cancelText="取消"
                confirmText="保存"
                @cancel="goBack"
                @confirm="onSubmit"
            />
        </up-form>
    </view>
  <view class="account-detail">
    <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
    <PageHeader title="编辑来票台账"
                @back="goBack" />
    <up-form @submit="submitForm"
             ref="formRef"
             label-width="120"
             :model="form">
      <up-form-item label="采购合同号"
                    prop="purchaseContractNumber">
        <up-input v-model="form.purchaseContractNumber"
                  placeholder="自动生成"
                  disabled />
      </up-form-item>
      <up-form-item label="销售合同号"
                    prop="salesContractNo">
        <up-input v-model="form.salesContractNo"
                  placeholder="自动生成"
                  disabled />
      </up-form-item>
      <up-form-item label="含税单价(元)"
                    prop="taxInclusiveUnitPrice">
        <up-input v-model="form.taxInclusiveUnitPrice"
                  placeholder="自动生成"
                  disabled />
      </up-form-item>
      <up-form-item label="创建时间"
                    prop="createdAt">
        <up-input v-model="form.createdAt"
                  placeholder="自动生成"
                  disabled />
      </up-form-item>
      <up-form-item label="发票号"
                    prop="invoiceNumber">
        <up-input v-model="form.invoiceNumber"
                  placeholder="请输入"
                  disabled />
      </up-form-item>
      <up-form-item label="来票数"
                    prop="ticketsNum"
                    required
                    :rules="rules.ticketsNum">
        <up-input v-model="form.ticketsNum"
                  type="number"
                  placeholder="请输入"
                  @blur="inputTicketsNum" />
      </up-form-item>
      <up-form-item label="本次来票金额(元)"
                    prop="ticketsAmount"
                    required
                    :rules="rules.ticketsAmount">
        <up-input v-model="form.ticketsAmount"
                  type="number"
                  placeholder="请输入"
                  @blur="inputTicketsAmount" />
      </up-form-item>
      <view class="tip-text">未来票数：{{ formatAmount(form.futureTickets) }} å…ƒ</view>
      <!-- ä½¿ç”¨å…¬å…±åº•éƒ¨æŒ‰é’®ç»„件 -->
      <FooterButtons show
                     cancelText="取消"
                     confirmText="保存"
                     @cancel="goBack"
                     @confirm="onSubmit" />
    </up-form>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import dayjs from 'dayjs'
import useUserStore from '@/store/modules/user'
import { getToken } from '@/utils/auth'
import { invoiceLedgerSaveOrUpdate } from '@/api/salesManagement/invoiceLedger.js'
import config from '@/config.js'
import {getProductRecordById, updateRegistration} from "@/api/procurementManagement/procurementInvoiceLedger";
import PageHeader from '@/components/PageHeader.vue';
import FooterButtons from '@/components/FooterButtons.vue';
  import { ref, onMounted } from "vue";
  import dayjs from "dayjs";
  import useUserStore from "@/store/modules/user";
  import { getToken } from "@/utils/auth";
  import { invoiceLedgerSaveOrUpdate } from "@/api/salesManagement/invoiceLedger.js";
  import config from "@/config.js";
  import {
    getProductRecordById,
    updateRegistration,
  } from "@/api/procurementManagement/procurementInvoiceLedger";
  import PageHeader from "@/components/PageHeader.vue";
  import FooterButtons from "@/components/FooterButtons.vue";

const userStore = useUserStore()
  const userStore = useUserStore();

const formRef = ref()
let form = ref({
    salesLedgerId: '',
    customerId: '',
    invoiceNo: '',
    invoiceTotal: '',
    taxRate: '',
    invoicePerson: '',
    invoiceDate: '',
    customerName: '',
    fileList: [],
    createTime: '',
    taxInclusiveTotalPrice: '',
    taxInclusiveUnitPrice: ''
})
const fileList = ref([])
const currentId = ref('')
const temFutureTickets = ref(0)
  const formRef = ref();
  let form = ref({
    salesLedgerId: "",
    customerId: "",
    invoiceNo: "",
    invoiceTotal: "",
    taxRate: "",
    invoicePerson: "",
    invoiceDate: "",
    customerName: "",
    fileList: [],
    createTime: "",
    taxInclusiveTotalPrice: "",
    taxInclusiveUnitPrice: "",
  });
  const fileList = ref([]);
  const currentId = ref("");
  const temFutureTickets = ref(0);

// è¡¨å•æ ¡éªŒè§„则
const rules = {
    ticketsNum: [
        { required: true, message: '请输入来票数', trigger: 'blur' }
    ],
    ticketsAmount: [
        { required: true, message: '请输入本次来票金额', trigger: 'blur' }
    ]
};
  // è¡¨å•æ ¡éªŒè§„则
  const rules = {
    ticketsNum: [{ required: true, message: "请输入来票数", trigger: "blur" }],
    ticketsAmount: [
      { required: true, message: "请输入本次来票金额", trigger: "blur" },
    ],
  };

const goBack = () => {
    uni.removeStorageSync('invoiceLedgerEditRow');
    uni.navigateBack()
}
const inputTicketsNum = () => {
    // ç¡®ä¿å«ç¨Žå•ä»·å­˜åœ¨ä¸”不为零
    if (!form.value.taxInclusiveUnitPrice || Number(form.value.taxInclusiveUnitPrice) === 0) {
        uni.showToast({
            title: "含税单价不能为零或未定义",
            icon: 'none'
        });
        return;
    }
    if (Number(form.value.ticketsNum) > Number(temFutureTickets.value)) {
        uni.showToast({
            title: "来票数不得大于未来票数",
            icon: 'none'
        });
        form.value.ticketsNum = temFutureTickets.value
    }
	
    // ç¡®ä¿æ‰€æœ‰æ•°å€¼éƒ½è½¬æ¢ä¸ºæ•°å­—类型进行计算
    const ticketsAmount = Number(form.value.ticketsNum) * Number(form.value.taxInclusiveUnitPrice);
    const futureTickets = Number(temFutureTickets.value) - Number(form.value.ticketsNum);
    form.value.futureTickets = Number(futureTickets.toFixed(2));
    form.value.ticketsAmount = Number(ticketsAmount.toFixed(2));
};
const inputTicketsAmount = () => {
    // ç¡®ä¿å«ç¨Žå•ä»·å­˜åœ¨ä¸”不为零
    if (!form.value.taxInclusiveUnitPrice || Number(form.value.taxInclusiveUnitPrice) === 0) {
        uni.showToast({
            title: "含税单价不能为零或未定义",
            icon: 'none'
        });
        return;
    }
	
    if (Number(form.value.ticketsAmount) > Number(form.value.futureTickets*form.value.taxInclusiveUnitPrice)) {
        uni.showToast({
            title: "本次来票金额不得大于总金额",
            icon: 'none'
        });
        form.value.ticketsAmount = (form.value.futureTickets*form.value.taxInclusiveUnitPrice).toFixed(2)
        const ticketsNum = Number(form.value.ticketsAmount) / Number(form.value.taxInclusiveUnitPrice);
        form.value.ticketsNum = Number(ticketsNum.toFixed(2))
        return;
    }
	
    // ç¡®ä¿æ‰€æœ‰æ•°å€¼éƒ½è½¬æ¢ä¸ºæ•°å­—类型进行计算
    const ticketsNum = Number(form.value.ticketsAmount) / Number(form.value.taxInclusiveUnitPrice);
    form.value.ticketsNum = Number(ticketsNum.toFixed(2));
};
const formatAmount = (val) => {
    if (val === undefined || val === null || val === '') return '0.00'
    const num = Number(val)
    if (Number.isNaN(num)) return '0.00'
    return num.toFixed(2)
}
  const goBack = () => {
    uni.removeStorageSync("invoiceLedgerEditRow");
    uni.navigateBack();
  };
  const inputTicketsNum = () => {
    // ç¡®ä¿å«ç¨Žå•ä»·å­˜åœ¨ä¸”不为零
    if (
      !form.value.taxInclusiveUnitPrice ||
      Number(form.value.taxInclusiveUnitPrice) === 0
    ) {
      uni.showToast({
        title: "含税单价不能为零或未定义",
        icon: "none",
      });
      return;
    }
    if (Number(form.value.ticketsNum) > Number(temFutureTickets.value)) {
      uni.showToast({
        title: "来票数不得大于未来票数",
        icon: "none",
      });
      form.value.ticketsNum = temFutureTickets.value;
    }

const loadDetail = async (id) => {
    try {
        uni.showLoading({
            title: '加载中...'
        });
        const res = await getProductRecordById({ id })
        const data = res?.data || res
        form.value = { ...data }
        temFutureTickets.value = data.futureTickets;
        fileList.value = data?.fileList || []
        if (!form.value.invoicePerson) {
            form.value.invoicePerson = userStore.nickName
        }
        if (!form.value.invoiceDate) {
            form.value.invoiceDate = dayjs().format('YYYY-MM-DD')
        }
        uni.hideLoading();
    } catch (e) {
        uni.hideLoading();
        uni.showToast({
            title: '加载失败',
            icon: 'none'
        });
    }
}
    // ç¡®ä¿æ‰€æœ‰æ•°å€¼éƒ½è½¬æ¢ä¸ºæ•°å­—类型进行计算
    const ticketsAmount =
      Number(form.value.ticketsNum) * Number(form.value.taxInclusiveUnitPrice);
    const futureTickets =
      Number(temFutureTickets.value) - Number(form.value.ticketsNum);
    form.value.futureTickets = Number(futureTickets.toFixed(2));
    form.value.ticketsAmount = Number(ticketsAmount.toFixed(2));
  };
  const inputTicketsAmount = () => {
    // ç¡®ä¿å«ç¨Žå•ä»·å­˜åœ¨ä¸”不为零
    if (
      !form.value.taxInclusiveUnitPrice ||
      Number(form.value.taxInclusiveUnitPrice) === 0
    ) {
      uni.showToast({
        title: "含税单价不能为零或未定义",
        icon: "none",
      });
      return;
    }

const submitForm = async () => {
    try {
        // æäº¤è¡¨å•çš„具体逻辑
        await updateRegistration(form.value)
        uni.showToast({
            title: '提交成功',
            icon: 'success'
        });
        setTimeout(() => { goBack() }, 800)
    } catch (e) {
        uni.showToast({
            title: '提交失败，请重试',
            icon: 'none'
        });
    }
}
    if (
      Number(form.value.ticketsAmount) >
      Number(form.value.futureTickets * form.value.taxInclusiveUnitPrice)
    ) {
      uni.showToast({
        title: "本次来票金额不得大于总金额",
        icon: "none",
      });
      form.value.ticketsAmount = (
        form.value.futureTickets * form.value.taxInclusiveUnitPrice
      ).toFixed(2);
      const ticketsNum =
        Number(form.value.ticketsAmount) /
        Number(form.value.taxInclusiveUnitPrice);
      form.value.ticketsNum = Number(ticketsNum.toFixed(2));
      return;
    }

// è¡¨å•æäº¤
const onSubmit = () => {
    formRef.value.validate().then(() => {
        // è¡¨å•éªŒè¯é€šè¿‡ï¼Œæäº¤è¡¨å•
        submitForm();
    }).catch(error => {
        // è¡¨å•éªŒè¯å¤±è´¥
        console.log('表单验证失败', error);
    });
};
    // ç¡®ä¿æ‰€æœ‰æ•°å€¼éƒ½è½¬æ¢ä¸ºæ•°å­—类型进行计算
    const ticketsNum =
      Number(form.value.ticketsAmount) / Number(form.value.taxInclusiveUnitPrice);
    form.value.ticketsNum = Number(ticketsNum.toFixed(2));
  };
  const formatAmount = val => {
    if (val === undefined || val === null || val === "") return "0.00";
    const num = Number(val);
    if (Number.isNaN(num)) return "0.00";
    return num.toFixed(2);
  };

onMounted(() => {
    const rowStr = uni.getStorageSync('invoiceLedgerEditRow')
    if (rowStr) {
        try {
            const row = JSON.parse(rowStr)
            currentId.value = row.id
            loadDetail(currentId.value)
        } catch (e) {
            // ignore
        }
    }
});
  const loadDetail = async (id, purchaseLedgerId, productModelId) => {
    try {
      uni.showLoading({
        title: "加载中...",
      });
      const res = await getProductRecordById({
        id: id,
        purchaseLedgerId: purchaseLedgerId,
        productModelId: productModelId,
      });
      const data = res?.data || res;
      form.value = { ...data };
      temFutureTickets.value = data.futureTickets;
      fileList.value = data?.fileList || [];
      if (!form.value.invoicePerson) {
        form.value.invoicePerson = userStore.nickName;
      }
      if (!form.value.invoiceDate) {
        form.value.invoiceDate = dayjs().format("YYYY-MM-DD");
      }
      uni.hideLoading();
    } catch (e) {
      uni.hideLoading();
      uni.showToast({
        title: "加载失败",
        icon: "none",
      });
    }
  };

  const submitForm = async () => {
    try {
      // æäº¤è¡¨å•çš„具体逻辑
      await updateRegistration(form.value);
      uni.showToast({
        title: "提交成功",
        icon: "success",
      });
      setTimeout(() => {
        goBack();
      }, 800);
    } catch (e) {
      uni.showToast({
        title: "提交失败，请重试",
        icon: "none",
      });
    }
  };

  // è¡¨å•æäº¤
  const onSubmit = () => {
    formRef.value
      .validate()
      .then(() => {
        // è¡¨å•éªŒè¯é€šè¿‡ï¼Œæäº¤è¡¨å•
        submitForm();
      })
      .catch(error => {
        // è¡¨å•éªŒè¯å¤±è´¥
        console.log("表单验证失败", error);
      });
  };
  const purchaseLedgerId = ref("");
  const productModelId = ref({});

  onMounted(() => {
    const rowStr = uni.getStorageSync("invoiceLedgerEditRow");
    if (rowStr) {
      try {
        const row = JSON.parse(rowStr);
        currentId.value = row.id;
        purchaseLedgerId.value = row.purchaseLedgerId;
        productModelId.value = row.productModelId;
        loadDetail(currentId.value, purchaseLedgerId.value, productModelId.value);
      } catch (e) {
        // ignore
      }
    }
  });
</script>

<style scoped lang="scss">
@import '@/static/scss/form-common.scss';
  @import "@/static/scss/form-common.scss";
</style>


 src/pages/procurementManagement/receiptPaymentHistory/index.vue

@@ -1,79 +1,86 @@
<template>
    <view class="sales-account">
        <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
        <PageHeader title="付款流水" @back="goBack" />
		
        <!-- æœç´¢åŒºåŸŸ -->
        <view class="search-section">
            <view class="search-bar">
                <view class="search-input">
                    <up-input
                        class="search-text"
                        placeholder="请输入供应商名称"
                        v-model="searchForm.searchText"
                        @change="getList"
                        clearable
                    />
                </view>
                <view class="search-button" @click="getList">
                    <up-icon name="search" size="24" color="#999"></up-icon>
                </view>
            </view>
        </view>
        <!-- ç»Ÿè®¡ä¿¡æ¯ -->
        <view class="summary-info" v-if="tableData.length > 0">
            <view class="summary-item">
                <text class="summary-label">总记录数</text>
                <text class="summary-value">{{ tableData.length }}</text>
            </view>
            <view class="summary-item">
                <text class="summary-label">总金额</text>
                <text class="summary-value highlight">{{ formatAmount(totalAmount) }}</text>
            </view>
        </view>
        <!-- ä»˜æ¬¾åŽ†å²åˆ—表 -->
        <view class="history-list" v-if="tableData.length > 0">
            <view v-for="(item, index) in tableData" :key="index">
                <view class="history-item">
                    <view class="item-header">
                        <view class="item-left">
                            <view class="document-icon">
                                <up-icon name="file-text" size="16" color="#ffffff"></up-icon>
                            </view>
                            <text class="item-id">{{ item.purchaseContractNumber }}</text>
                        </view>
                        <view class="item-tag" :class="getTagClass(item.paymentMethod)">
                            <text class="tag-text">{{ item.paymentMethod }}</text>
                        </view>
                    </view>
                    <up-divider></up-divider>
                    <view class="item-details">
                        <view class="detail-row">
                            <text class="detail-label">供应商名称</text>
                            <text class="detail-value">{{ item.supplierName }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">付款金额(元)</text>
                            <text class="detail-value highlight">{{ formatAmount(item.currentPaymentAmount) }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">付款日期</text>
                            <text class="detail-value">{{ item.paymentDate }}</text>
                        </view>
                        <up-divider></up-divider>
                        <view class="detail-info">
                            <view class="detail-row">
                                <text class="detail-label">登记人</text>
                                <text class="detail-value">{{ item.registrant }}</text>
                            </view>
                            <view class="detail-row">
                                <text class="detail-label">登记日期</text>
                                <text class="detail-value">{{ item.registrationtDate }}</text>
                            </view>
                        </view>
                        <!-- æ“ä½œæŒ‰é’® -->
                        <view class="action-buttons">
                            <u-button
  <view class="sales-account">
    <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
    <PageHeader title="付款流水"
                @back="goBack" />
    <!-- æœç´¢åŒºåŸŸ -->
    <view class="search-section">
      <view class="search-bar">
        <view class="search-input">
          <up-input class="search-text"
                    placeholder="请输入供应商名称"
                    v-model="searchForm.searchText"
                    @change="getList"
                    clearable />
        </view>
        <view class="search-button"
              @click="getList">
          <up-icon name="search"
                   size="24"
                   color="#999"></up-icon>
        </view>
      </view>
    </view>
    <!-- ç»Ÿè®¡ä¿¡æ¯ -->
    <view class="summary-info"
          v-if="tableData.length > 0">
      <view class="summary-item">
        <text class="summary-label">总记录数</text>
        <text class="summary-value">{{ tableData.length }}</text>
      </view>
      <view class="summary-item">
        <text class="summary-label">总金额</text>
        <text class="summary-value highlight">{{ formatAmount(totalAmount) }}</text>
      </view>
    </view>
    <!-- ä»˜æ¬¾åŽ†å²åˆ—表 -->
    <view class="history-list"
          v-if="tableData.length > 0">
      <view v-for="(item, index) in tableData"
            :key="index">
        <view class="history-item">
          <view class="item-header">
            <view class="item-left">
              <view class="document-icon">
                <up-icon name="file-text"
                         size="16"
                         color="#ffffff"></up-icon>
              </view>
              <text class="item-id">{{ item.purchaseContractNumber }}</text>
            </view>
            <view class="item-tag"
                  :class="getTagClass(item.paymentMethod)">
              <text class="tag-text">{{ item.paymentMethod }}</text>
            </view>
          </view>
          <up-divider></up-divider>
          <view class="item-details">
            <view class="detail-row">
              <text class="detail-label">供应商名称</text>
              <text class="detail-value">{{ item.supplierName }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">付款金额(元)</text>
              <text class="detail-value highlight">{{ formatAmount(item.currentPaymentAmount) }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">付款日期</text>
              <text class="detail-value">{{ item.paymentDate }}</text>
            </view>
            <up-divider></up-divider>
            <view class="detail-info">
              <view class="detail-row">
                <text class="detail-label">登记人</text>
                <text class="detail-value">{{ item.registrant }}</text>
              </view>
              <view class="detail-row">
                <text class="detail-label">登记日期</text>
                <text class="detail-value">{{ item.registrationtDate }}</text>
              </view>
            </view>
            <!-- æ“ä½œæŒ‰é’® -->
            <view class="action-buttons">
              <!-- <u-button
                                type="primary"
                                size="small"
                                class="action-btn"
@@ -81,124 +88,160 @@
                                @click="openForm(item)"
                            >
                                ç¼–辑付款
                            </u-button>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view v-else class="no-data">
            <text>暂无付款历史数据</text>
        </view>
    </view>
                            </u-button> -->
              <u-button type="error"
                        size="small"
                        class="action-btn"
                        :disabled="item.registrant !== userStore.nickName"
                        @click="deleteItem(item)">
                åˆ é™¤
              </u-button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else
          class="no-data">
      <text>暂无付款历史数据</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import {paymentHistoryListPage} from "@/api/procurementManagement/paymentEntry";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore()
  import { ref, computed } from "vue";
  import { onShow } from "@dcloudio/uni-app";
  import { paymentHistoryListPage } from "@/api/procurementManagement/paymentEntry";
  import { delPaymentRegistration } from "@/api/procurementManagement/procurementInvoiceLedger";
  import useUserStore from "@/store/modules/user";
  const userStore = useUserStore();

// æœç´¢è¡¨å•
const searchForm = ref({
    searchText: '',
});
  // æœç´¢è¡¨å•
  const searchForm = ref({
    searchText: "",
  });

// è¡¨æ ¼æ•°æ®
const tableData = ref([]);
  // è¡¨æ ¼æ•°æ®
  const tableData = ref([]);

// åˆ†é¡µå‚æ•°
const page = ref({
    current: -1,
    size: -1,
});
  // åˆ†é¡µå‚æ•°
  const page = ref({
    current: -1,
    size: -1,
  });

const totalAmount = computed(() => {
    return tableData.value.reduce((sum, item) => {
        return sum + (parseFloat(item.receiptPaymentAmount) || 0);
    }, 0);
});
  const totalAmount = computed(() => {
    return tableData.value.reduce((sum, item) => {
      return sum + (parseFloat(item.receiptPaymentAmount) || 0);
    }, 0);
  });

// è¿”回上一页
const goBack = () => {
    uni.navigateBack();
};
  // è¿”回上一页
  const goBack = () => {
    uni.navigateBack();
  };
  const deleteItem = item => {
    uni.showModal({
      title: "确认删除",
      content: `是否确认删除该数据吗？`,
      success: res => {
        if (res.confirm) {
          // è°ƒç”¨åˆ é™¤æŽ¥å£
          delPaymentRegistration([item.id])
            .then(() => {
              uni.showToast({
                title: "删除成功",
                icon: "success",
              });
              // åˆ·æ–°åˆ—表
              getList();
            })
            .catch(() => {
              uni.showToast({
                title: "删除失败",
                icon: "error",
              });
            });
        }
      },
    });
  };
  // æŸ¥è¯¢åˆ—表
  const getList = () => {
    showLoadingToast("加载中...");
    const params = {
      ...searchForm.value,
      ...page.value,
    };
    paymentHistoryListPage(params)
      .then(res => {
        tableData.value = res.records;
        closeToast();
      })
      .catch(() => {
        closeToast();
        uni.showToast({
          title: "查询失败",
          icon: "error",
        });
      });
  };

// æŸ¥è¯¢åˆ—表
const getList = () => {
    showLoadingToast('加载中...')
    const params = {
        ...searchForm.value,
        ...page.value
    };
    paymentHistoryListPage(params).then((res) => {
        tableData.value = res.records;
        closeToast()
    }).catch(() => {
        closeToast()
        uni.showToast({
            title: '查询失败',
            icon: 'error'
        });
    });
};
  // èŽ·å–标签样式类
  const getTagClass = type => {
    if (type == "电汇") {
      return "tag-electric";
    } else if (type == "承兑") {
      return "tag-acceptance";
    } else {
      return "tag-unknown";
    }
  };

// èŽ·å–标签样式类
const getTagClass = (type) => {
    if (type == '电汇') {
        return "tag-electric";
    } else if (type == '承兑') {
        return "tag-acceptance";
    } else {
        return "tag-unknown";
    }
};
  // æ ¼å¼åŒ–金额
  const formatAmount = amount => {
    return amount ? parseFloat(amount).toFixed(2) : "0.00";
  };

// æ ¼å¼åŒ–金额
const formatAmount = (amount) => {
    return amount ? parseFloat(amount).toFixed(2) : '0.00';
};
  // æ˜¾ç¤ºåŠ è½½æç¤º
  const showLoadingToast = message => {
    uni.showLoading({
      title: message,
      mask: true,
    });
  };

// æ˜¾ç¤ºåŠ è½½æç¤º
const showLoadingToast = (message) => {
    uni.showLoading({
        title: message,
        mask: true
    });
};
  // å…³é—­æç¤º
  const closeToast = () => {
    uni.hideLoading();
  };

// å…³é—­æç¤º
const closeToast = () => {
    uni.hideLoading();
};

// æ‰“开编辑表单
const openForm = (item) => {
    uni.setStorageSync('invoiceLedgerEditRow', JSON.stringify(item))
    uni.navigateTo({ url: '/pages/procurementManagement/paymentEntry/edit' })
}
onShow(() => {
    // é¡µé¢æ˜¾ç¤ºæ—¶åˆ·æ–°åˆ—表
    getList();
});
  // æ‰“开编辑表单
  const openForm = item => {
    uni.setStorageSync("invoiceLedgerEditRow", JSON.stringify(item));
    uni.navigateTo({ url: "/pages/procurementManagement/paymentEntry/edit" });
  };
  onShow(() => {
    // é¡µé¢æ˜¾ç¤ºæ—¶åˆ·æ–°åˆ—表
    getList();
  });
</script>

<style scoped lang="scss">
@import '@/styles/procurement-common.scss';
  @import "@/styles/procurement-common.scss";

// ä»˜æ¬¾æµæ°´ç‰¹æœ‰æ ·å¼
.action-buttons {
    padding: 12px 0 0 0; // ä¸Žå…¬å…±æ ·å¼ä¸­çš„ 0 0 16px 0 ä¸åŒ
}
  // ä»˜æ¬¾æµæ°´ç‰¹æœ‰æ ·å¼
  .action-buttons {
    padding: 12px 0 0 0; // ä¸Žå…¬å…±æ ·å¼ä¸­çš„ 0 0 16px 0 ä¸åŒ
  }

.item-tag {
    padding: 2px 8px; // ä¸Žå…¬å…±æ ·å¼ä¸­çš„ 2px 4px ä¸åŒ
}
  .item-tag {
    padding: 2px 8px; // ä¸Žå…¬å…±æ ·å¼ä¸­çš„ 2px 4px ä¸åŒ
  }

.tag-text {
    font-size: 14px; // ä¸Žå…¬å…±æ ·å¼ä¸­çš„ 11px ä¸åŒ
    color: #ffffff;
    font-weight: 500;
}
  .tag-text {
    font-size: 14px; // ä¸Žå…¬å…±æ ·å¼ä¸­çš„ 11px ä¸åŒ
    color: #ffffff;
    font-weight: 500;
  }
</style>

 src/pages/sales/invoiceLedger/index.vue

@@ -1,616 +1,629 @@
<template>
    <view class="sales-account">
        <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
        <PageHeader title="开票台账" @back="goBack" />
		
        <!-- æœç´¢å’Œç­›é€‰åŒºåŸŸï¼ˆä¿æŒä¸Žé”€å”®å°è´¦é£Žæ ¼ä¸€è‡´ï¼‰ -->
        <view class="search-section">
            <view class="search-bar">
                <view class="search-input">
                    <up-input
                        class="search-text"
                        placeholder="请输入客户名称/合同号搜索"
                        v-model="searchForm.searchText"
                        @change="handleQuery"
                        clearable
                    />
                </view>
                <!--                <view class="filter-button" @click="showFilter = true">-->
                <!--                    <up-icon name="list" size="24" color="#999"></up-icon>-->
                <!--                </view>-->
                <view class="filter-button" @click="handleQuery">
                    <up-icon name="search" size="24" color="#999"></up-icon>
                </view>
            </view>
        </view>
		
        <!-- åˆ—表区域 -->
        <view class="ledger-list" v-if="ledgerList.length > 0">
            <view v-for="(item, index) in ledgerList" :key="index">
                <view class="ledger-item">
                    <view class="item-header">
                        <view class="item-left">
                            <view class="document-icon">
                                <up-icon name="file-text" size="16" color="#ffffff"></up-icon>
                            </view>
                            <text class="item-id">{{ item.salesContractNo }}</text>
                        </view>
                    </view>
                    <up-divider></up-divider>
                    <view class="item-details">
                        <view class="detail-row">
                            <text class="detail-label">客户名称</text>
                            <text class="detail-value">{{ item.customerName }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">客户合同号</text>
                            <text class="detail-value">{{ item.customerContractNo }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">项目</text>
                            <text class="detail-value">{{ item.projectName }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">产品大类</text>
                            <text class="detail-value">{{ item.productCategory }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">规格型号</text>
                            <text class="detail-value">{{ item.specificationModel }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">发票号</text>
                            <text class="detail-value">{{ item.invoiceNo || '-' }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">发票金额(元)</text>
                            <text class="detail-value highlight">{{ formatAmount(item.invoiceTotal) }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">税率(%)</text>
                            <text class="detail-value">{{ item.taxRate }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">录入人</text>
                            <text class="detail-value">{{ item.invoicePerson }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">录入日期</text>
                            <text class="detail-value">{{ formatDateTime(item.createTime) }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">开票日期</text>
                            <text class="detail-value">{{ item.invoiceDate || '-' }}</text>
                        </view>
                    </view>
                    <view class="action-buttons">
                        <up-button
                            type="primary"
                            size="small"
                            class="action-btn"
                            :disabled="item.invoicePerson !== userStore.nickName"
                            @click="openEdit(item)"
                        >
                            ç¼–辑
                        </up-button>
                        <up-button
                            type="error"
                            size="small"
                            plain
                            class="action-btn"
                            :disabled="item.invoicePerson !== userStore.nickName"
                            @click="handleDelete(item)"
                        >
                            åˆ é™¤
                        </up-button>
<!--                        <up-button-->
<!--                            size="small"-->
<!--                            plain-->
<!--                            class="action-btn"-->
<!--                            v-if="item.invoiceFileName"-->
<!--                            @click="openFileActions(item.commonFiles || [])"-->
<!--                        >-->
<!--                            æŸ¥çœ‹é™„件-->
<!--                        </up-button>-->
<!--                        <up-button-->
<!--                            type="primary"-->
<!--                            size="small"-->
<!--                            class="action-btn"-->
<!--                            v-else-->
<!--                            :disabled="item.invoicePerson !== userStore.nickName"-->
<!--                            @click="openUpload(item)"-->
<!--                        >-->
<!--                            ä¸Šä¼ -->
<!--                        </up-button>-->
                    </view>
                </view>
            </view>
        </view>
        <view v-else class="no-data">
            <text>暂无开票台账数据</text>
        </view>
		
        <!-- ç­›é€‰å¼¹çª— -->
        <up-popup v-model="showFilter" mode="bottom" round><up-transition>
            <view class="filter-popup">
                <up-cell-group title="筛选条件" inset>
                    <up-input
                        label="开票日期"
                        readonly
                        placeholder="请选择日期范围"
                        @click="showInvoiceRange = true"
                        v-model="invoiceRangeLabel"
                    />
                    <up-input
                        label="录入日期"
                        readonly
                        @click="showCreateDatePicker = true"
                        v-model="searchForm.createTimeStart"
                    />
                    <view class="switch-row">
                        <text class="switch-label">不显示有发票行</text>
                        <up-switch v-model="searchForm.status" size="20" />
                    </view>
                </up-cell-group>
                <view class="filter-actions">
                    <up-button @click="resetFilter">重置</up-button>
                    <up-button type="primary" @click="confirmFilter">确定</up-button>
                </view>
            </view>
        </up-transition></up-popup>
		
        <!-- æ—¥åŽ†ï¼šå¼€ç¥¨æ—¥æœŸèŒƒå›´ -->
        <up-popup v-model="showInvoiceRange" mode="bottom"><up-transition>
            <up-datetime-picker
                mode="date"
                type="range"
                title="选择开票日期范围"
                @confirm="onInvoiceRangeConfirm"
                @cancel="showInvoiceRange = false"
            />
        </up-transition></up-popup>
		
        <!-- æ—¥æœŸï¼šå½•å…¥æ—¥æœŸ -->
        <up-popup v-model="showCreateDatePicker" mode="bottom"><up-transition>
            <up-datetime-picker
                mode="date"
                type="selector"
                v-model="currentCreateDate"
                title="选择录入日期"
                @confirm="onCreateDateConfirm"
                @cancel="showCreateDatePicker = false"
            />
        </up-transition></up-popup>
		
		
		
        <!-- å•è¡Œä¸Šä¼ å¼¹çª—（无表单） -->
        <up-popup v-model="showUpload" mode="bottom" round><up-transition>
            <view class="upload-container">
                <up-cell-group title="上传附件（仅支持 pdf，最大10MB，最多10个）" inset>
                    <up-upload
                        accept="pdf"
                        multiple
                        :maxCount="10"
                        :afterRead="afterReadRowUpload"
                        :beforeRead="beforeReadPdf"
                    >
                        <up-button type="primary">点击上传</up-button>
                    </up-upload>
                    <view class="uploaded-list" v-if="fileList.length">
                        <view class="uploaded-item" v-for="(f, idx) in fileList" :key="idx">
                            <text class="file-name">{{ f.name || getFileNameFromUrl(f.url) }}</text>
                            <up-button size="mini" type="error" plain @click="removeUploaded(idx)">移除</up-button>
                        </view>
                    </view>
                </up-cell-group>
                <view class="filter-actions">
                    <up-button @click="showUpload = false">取消</up-button>
                    <up-button type="primary" @click="confirmUpload">确认</up-button>
                </view>
            </view>
        </up-transition></up-popup>
		
        <!-- é™„件列表选择 -->
        <up-action-sheet v-model="showFileSheet" :actions="fileActions" cancel-text="取消" close-on-click-action @select="onSelectFile">
            <view class="up-action-sheet__cancel" @click="showFileSheet = false">
                å–消
            </view>
        </up-action-sheet>
    </view>
  <view class="sales-account">
    <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
    <PageHeader title="开票台账"
                @back="goBack" />
    <!-- æœç´¢å’Œç­›é€‰åŒºåŸŸï¼ˆä¿æŒä¸Žé”€å”®å°è´¦é£Žæ ¼ä¸€è‡´ï¼‰ -->
    <view class="search-section">
      <view class="search-bar">
        <view class="search-input">
          <up-input class="search-text"
                    placeholder="请输入客户名称/合同号搜索"
                    v-model="searchForm.searchText"
                    @change="handleQuery"
                    clearable />
        </view>
        <!--                <view class="filter-button" @click="showFilter = true">-->
        <!--                    <up-icon name="list" size="24" color="#999"></up-icon>-->
        <!--                </view>-->
        <view class="filter-button"
              @click="handleQuery">
          <up-icon name="search"
                   size="24"
                   color="#999"></up-icon>
        </view>
      </view>
    </view>
    <!-- åˆ—表区域 -->
    <view class="ledger-list"
          v-if="ledgerList.length > 0">
      <view v-for="(item, index) in ledgerList"
            :key="index">
        <view class="ledger-item">
          <view class="item-header">
            <view class="item-left">
              <view class="document-icon">
                <up-icon name="file-text"
                         size="16"
                         color="#ffffff"></up-icon>
              </view>
              <text class="item-id">{{ item.salesContractNo }}</text>
            </view>
          </view>
          <up-divider></up-divider>
          <view class="item-details">
            <view class="detail-row">
              <text class="detail-label">客户名称</text>
              <text class="detail-value">{{ item.customerName }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">客户合同号</text>
              <text class="detail-value">{{ item.customerContractNo }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">项目</text>
              <text class="detail-value">{{ item.projectName }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">产品大类</text>
              <text class="detail-value">{{ item.productCategory }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">规格型号</text>
              <text class="detail-value">{{ item.specificationModel }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">发票号</text>
              <text class="detail-value">{{ item.invoiceNo || '-' }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">发票金额(元)</text>
              <text class="detail-value highlight">{{ formatAmount(item.invoiceTotal) }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">税率(%)</text>
              <text class="detail-value">{{ item.taxRate }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">录入人</text>
              <text class="detail-value">{{ item.invoicePerson }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">录入日期</text>
              <text class="detail-value">{{ formatDateTime(item.createTime) }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">开票日期</text>
              <text class="detail-value">{{ item.invoiceDate || '-' }}</text>
            </view>
          </view>
          <view class="action-buttons">
            <up-button type="primary"
                       size="small"
                       class="action-btn"
                       :disabled="item.invoicePerson !== userStore.nickName"
                       @click="openEdit(item)">
              ç¼–辑
            </up-button>
            <up-button type="error"
                       size="small"
                       plain
                       class="action-btn"
                       :disabled="item.invoicePerson !== userStore.nickName"
                       @click="handleDelete(item)">
              åˆ é™¤
            </up-button>
            <!--                        <up-button-->
            <!--                            size="small"-->
            <!--                            plain-->
            <!--                            class="action-btn"-->
            <!--                            v-if="item.invoiceFileName"-->
            <!--                            @click="openFileActions(item.commonFiles || [])"-->
            <!--                        >-->
            <!--                            æŸ¥çœ‹é™„件-->
            <!--                        </up-button>-->
            <!--                        <up-button-->
            <!--                            type="primary"-->
            <!--                            size="small"-->
            <!--                            class="action-btn"-->
            <!--                            v-else-->
            <!--                            :disabled="item.invoicePerson !== userStore.nickName"-->
            <!--                            @click="openUpload(item)"-->
            <!--                        >-->
            <!--                            ä¸Šä¼ -->
            <!--                        </up-button>-->
          </view>
        </view>
      </view>
    </view>
    <view v-else
          class="no-data">
      <text>暂无开票台账数据</text>
    </view>
    <!-- ç­›é€‰å¼¹çª— -->
    <up-popup v-model="showFilter"
              mode="bottom"
              round><up-transition>
        <view class="filter-popup">
          <up-cell-group title="筛选条件"
                         inset>
            <up-input label="开票日期"
                      readonly
                      placeholder="请选择日期范围"
                      @click="showInvoiceRange = true"
                      v-model="invoiceRangeLabel" />
            <up-input label="录入日期"
                      readonly
                      @click="showCreateDatePicker = true"
                      v-model="searchForm.createTimeStart" />
            <view class="switch-row">
              <text class="switch-label">不显示有发票行</text>
              <up-switch v-model="searchForm.status"
                         size="20" />
            </view>
          </up-cell-group>
          <view class="filter-actions">
            <up-button @click="resetFilter">重置</up-button>
            <up-button type="primary"
                       @click="confirmFilter">确定</up-button>
          </view>
        </view>
      </up-transition></up-popup>
    <!-- æ—¥åŽ†ï¼šå¼€ç¥¨æ—¥æœŸèŒƒå›´ -->
    <up-popup v-model="showInvoiceRange"
              mode="bottom"><up-transition>
        <up-datetime-picker mode="date"
                            type="range"
                            title="选择开票日期范围"
                            @confirm="onInvoiceRangeConfirm"
                            @cancel="showInvoiceRange = false" />
      </up-transition></up-popup>
    <!-- æ—¥æœŸï¼šå½•å…¥æ—¥æœŸ -->
    <up-popup v-model="showCreateDatePicker"
              mode="bottom"><up-transition>
        <up-datetime-picker mode="date"
                            type="selector"
                            v-model="currentCreateDate"
                            title="选择录入日期"
                            @confirm="onCreateDateConfirm"
                            @cancel="showCreateDatePicker = false" />
      </up-transition></up-popup>
    <!-- å•è¡Œä¸Šä¼ å¼¹çª—（无表单） -->
    <up-popup v-model="showUpload"
              mode="bottom"
              round><up-transition>
        <view class="upload-container">
          <up-cell-group title="上传附件（仅支持 pdf，最大10MB，最多10个）"
                         inset>
            <up-upload accept="pdf"
                       multiple
                       :maxCount="10"
                       :afterRead="afterReadRowUpload"
                       :beforeRead="beforeReadPdf">
              <up-button type="primary">点击上传</up-button>
            </up-upload>
            <view class="uploaded-list"
                  v-if="fileList.length">
              <view class="uploaded-item"
                    v-for="(f, idx) in fileList"
                    :key="idx">
                <text class="file-name">{{ f.name || getFileNameFromUrl(f.url) }}</text>
                <up-button size="mini"
                           type="error"
                           plain
                           @click="removeUploaded(idx)">移除</up-button>
              </view>
            </view>
          </up-cell-group>
          <view class="filter-actions">
            <up-button @click="showUpload = false">取消</up-button>
            <up-button type="primary"
                       @click="confirmUpload">确认</up-button>
          </view>
        </view>
      </up-transition></up-popup>
    <!-- é™„件列表选择 -->
    <up-action-sheet v-model="showFileSheet"
                     :actions="fileActions"
                     cancel-text="取消"
                     close-on-click-action
                     @select="onSelectFile">
      <view class="up-action-sheet__cancel"
            @click="showFileSheet = false">
        å–消
      </view>
    </up-action-sheet>
  </view>
</template>

<script setup>
import {reactive, ref} from 'vue'
import dayjs from 'dayjs'
import PageHeader from '@/components/PageHeader.vue'
import useUserStore from '@/store/modules/user'
import {getToken} from '@/utils/auth'
import config from '@/config.js'
import {
    commitFile,
    delInvoiceLedgerByRegProductId,
    registrationProductPage
} from '@/api/salesManagement/invoiceLedger.js'
import {onShow} from "@dcloudio/uni-app";
  import { reactive, ref } from "vue";
  import dayjs from "dayjs";
  import PageHeader from "@/components/PageHeader.vue";
  import useUserStore from "@/store/modules/user";
  import { getToken } from "@/utils/auth";
  import config from "@/config.js";
  import {
    commitFile,
    delInvoiceLedgerByRegProductId,
    registrationProductPage,
  } from "@/api/salesManagement/invoiceLedger.js";
  import { onShow } from "@dcloudio/uni-app";

const showToast = (message) => {
    uni.showToast({
        title: message,
        icon: 'none'
    })
}
const showLoadingToast = (message) => {
    uni.showLoading({
        title: message,
        mask: true
    })
}
const closeToast = () => {
    uni.hideLoading()
}
  const showToast = message => {
    uni.showToast({
      title: message,
      icon: "none",
    });
  };
  const showLoadingToast = message => {
    uni.showLoading({
      title: message,
      mask: true,
    });
  };
  const closeToast = () => {
    uni.hideLoading();
  };

const userStore = useUserStore()
  const userStore = useUserStore();

// åˆ—表与查询
const ledgerList = ref([])
const page = reactive({ current: -1, size: -1 })
const searchForm = reactive({
    searchText: '',
    status: false,
    createTimeStart: ''
})
  // åˆ—表与查询
  const ledgerList = ref([]);
  const page = reactive({ current: -1, size: -1 });
  const searchForm = reactive({
    searchText: "",
    status: false,
    createTimeStart: "",
  });

// é¡¶éƒ¨äº¤äº’
const showFilter = ref(false)
const showInvoiceRange = ref(false)
const showCreateDatePicker = ref(false)
const invoiceRangeLabel = ref('')
const currentCreateDate = ref([new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()])
  // é¡¶éƒ¨äº¤äº’
  const showFilter = ref(false);
  const showInvoiceRange = ref(false);
  const showCreateDatePicker = ref(false);
  const invoiceRangeLabel = ref("");
  const currentCreateDate = ref([
    new Date().getFullYear(),
    new Date().getMonth() + 1,
    new Date().getDate(),
  ]);

const currentId = ref('')
const fileList = ref([]) // è¡Œä¸Šä¼ æˆ–通用上传列表
  const currentId = ref("");
  const fileList = ref([]); // è¡Œä¸Šä¼ æˆ–通用上传列表

// è¡Œä¸Šä¼ å¼¹çª—
const showUpload = ref(false)
  // è¡Œä¸Šä¼ å¼¹çª—
  const showUpload = ref(false);

// é™„件查看
const showFileSheet = ref(false)
const fileActions = ref([])
let currentFilesToOpen = []
  // é™„件查看
  const showFileSheet = ref(false);
  const fileActions = ref([]);
  let currentFilesToOpen = [];

const formatAmount = (val) => {
    if (val === undefined || val === null || val === '') return '0.00'
    const num = Number(val)
    if (Number.isNaN(num)) return '0.00'
    return num.toFixed(2)
}
const formatDateTime = (val) => {
    if (!val) return ''
    return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
}
  const formatAmount = val => {
    if (val === undefined || val === null || val === "") return "0.00";
    const num = Number(val);
    if (Number.isNaN(num)) return "0.00";
    return num.toFixed(2);
  };
  const formatDateTime = val => {
    if (!val) return "";
    return dayjs(val).format("YYYY-MM-DD HH:mm:ss");
  };

const goBack = () => {
    uni.navigateBack()
}
  const goBack = () => {
    uni.navigateBack();
  };

const handleQuery = () => {
    getList()
}
  const handleQuery = () => {
    getList();
  };

const getList = async () => {
    try {
        showLoadingToast('加载中...')
        const { invoiceDate, ...rest } = searchForm
        const res = await registrationProductPage({ ...rest, ...page })
        // å…¼å®¹ä¸åŒè¿”回结构
        ledgerList.value = res?.data?.records || res?.records || res?.data || []
        closeToast()
    } catch (e) {
        closeToast()
        showToast('获取列表失败')
    }
}
  const getList = async () => {
    try {
      showLoadingToast("加载中...");
      const { invoiceDate, ...rest } = searchForm;
      const res = await registrationProductPage({ ...rest, ...page });
      // å…¼å®¹ä¸åŒè¿”回结构
      ledgerList.value = res?.data?.records || res?.records || res?.data || [];
      closeToast();
    } catch (e) {
      closeToast();
      showToast("获取列表失败");
    }
  };

// ç­›é€‰é€»è¾‘
const resetFilter = () => {
    searchForm.searchText = ''
    searchForm.status = false
    const start = dayjs().startOf('month').format('YYYY-MM-DD')
    const end = dayjs().endOf('month').format('YYYY-MM-DD')
    searchForm.invoiceDate = [start, end]
    searchForm.invoiceDateStart = start
    searchForm.invoiceDateEnd = end
    searchForm.createTimeStart = ''
    invoiceRangeLabel.value = ''
}
const confirmFilter = () => {
    showFilter.value = false
    getList()
}
const onInvoiceRangeConfirm = ({ selectedValues }) => {
    try {
        const start = dayjs(selectedValues[0]).format('YYYY-MM-DD')
        const end = dayjs(selectedValues[1]).format('YYYY-MM-DD')
        searchForm.invoiceDateStart = start
        searchForm.invoiceDateEnd = end
        invoiceRangeLabel.value = `${start} è‡³ ${end}`
        showInvoiceRange.value = false
    } catch (err) {
        showInvoiceRange.value = false
    }
}
const onCreateDateConfirm = ({ selectedValues }) => {
    try {
        searchForm.createTimeStart = selectedValues.join('-')
        currentCreateDate.value = selectedValues
        showCreateDatePicker.value = false
    } catch (err) {
        showCreateDatePicker.value = false
    }
}
  // ç­›é€‰é€»è¾‘
  const resetFilter = () => {
    searchForm.searchText = "";
    searchForm.status = false;
    const start = dayjs().startOf("month").format("YYYY-MM-DD");
    const end = dayjs().endOf("month").format("YYYY-MM-DD");
    searchForm.invoiceDate = [start, end];
    searchForm.invoiceDateStart = start;
    searchForm.invoiceDateEnd = end;
    searchForm.createTimeStart = "";
    invoiceRangeLabel.value = "";
  };
  const confirmFilter = () => {
    showFilter.value = false;
    getList();
  };
  const onInvoiceRangeConfirm = ({ selectedValues }) => {
    try {
      const start = dayjs(selectedValues[0]).format("YYYY-MM-DD");
      const end = dayjs(selectedValues[1]).format("YYYY-MM-DD");
      searchForm.invoiceDateStart = start;
      searchForm.invoiceDateEnd = end;
      invoiceRangeLabel.value = `${start} è‡³ ${end}`;
      showInvoiceRange.value = false;
    } catch (err) {
      showInvoiceRange.value = false;
    }
  };
  const onCreateDateConfirm = ({ selectedValues }) => {
    try {
      searchForm.createTimeStart = selectedValues.join("-");
      currentCreateDate.value = selectedValues;
      showCreateDatePicker.value = false;
    } catch (err) {
      showCreateDatePicker.value = false;
    }
  };

// ç¼–辑逻辑改为跳转新页面
const openEdit = (row) => {
    try {
        uni.setStorageSync('invoiceLedgerEditRow', JSON.stringify(row))
        uni.navigateTo({ url: '/pages/sales/invoiceLedger/detail' })
    } catch (e) {
        showToast('跳转失败')
    }
}
  // ç¼–辑逻辑改为跳转新页面
  const openEdit = row => {
    try {
      uni.setStorageSync("invoiceLedgerEditRow", JSON.stringify(row));
      uni.navigateTo({ url: "/pages/sales/invoiceLedger/detail" });
    } catch (e) {
      showToast("跳转失败");
    }
  };

// åˆ é™¤
const handleDelete = (row) => {
    uni.showModal({
        title: '删除确认',
        content: '该发票台账将被删除，是否确认删除？',
        success: async (res) => {
            if (res.confirm) {
                try {
                    showLoadingToast('处理中...')
                    await delInvoiceLedgerByRegProductId(row.id)
                    closeToast()
                    showToast('删除成功')
                    getList()
                } catch (e) {
                    closeToast()
                    showToast('删除失败，请重试')
                }
            }
        }
    })
}
  // åˆ é™¤
  const handleDelete = row => {
    uni.showModal({
      title: "删除确认",
      content: "该发票台账将被删除，是否确认删除？",
      success: async res => {
        if (res.confirm) {
          try {
            showLoadingToast("处理中...");
            await delInvoiceLedgerByRegProductId(row.id);
            closeToast();
            showToast("删除成功");
            getList();
          } catch (e) {
            closeToast();
            showToast("删除失败，请重试");
          }
        }
      },
    });
  };

// è¡Œä¸Šä¼ 
const openUpload = (row) => {
    currentId.value = row.id
    fileList.value = []
    showUpload.value = true
}
const confirmUpload = async () => {
    try {
        const payload = { fileList: fileList.value, id: currentId.value }
        showLoadingToast('提交中...')
        await commitFile(payload)
        closeToast()
        showToast('提交成功')
        showUpload.value = false
        fileList.value = []
        currentId.value = ''
        getList()
    } catch (e) {
        closeToast()
        showToast('提交失败，请重试')
    }
}
  // è¡Œä¸Šä¼ 
  const openUpload = row => {
    currentId.value = row.id;
    fileList.value = [];
    showUpload.value = true;
  };
  const confirmUpload = async () => {
    try {
      const payload = { fileList: fileList.value, id: currentId.value };
      showLoadingToast("提交中...");
      await commitFile(payload);
      closeToast();
      showToast("提交成功");
      showUpload.value = false;
      fileList.value = [];
      currentId.value = "";
      getList();
    } catch (e) {
      closeToast();
      showToast("提交失败，请重试");
    }
  };

// ä¸Šä¼ ç›¸å…³
const beforeReadPdf = (file) => {
    // å…¼å®¹å¤šæ–‡ä»¶
    const files = Array.isArray(file) ? file : [file]
    for (const f of files) {
        const sizeOk = f.size <= 10 * 1024 * 1024
        const ext = (f.name || '').split('.').pop()?.toLowerCase()
        if (ext !== 'pdf') {
            showToast('仅支持pdf文件')
            return false
        }
        if (!sizeOk) {
            showToast('上传文件大小不能超过10MB')
            return false
        }
    }
    return true
}
  // ä¸Šä¼ ç›¸å…³
  const beforeReadPdf = file => {
    // å…¼å®¹å¤šæ–‡ä»¶
    const files = Array.isArray(file) ? file : [file];
    for (const f of files) {
      const sizeOk = f.size <= 10 * 1024 * 1024;
      const ext = (f.name || "").split(".").pop()?.toLowerCase();
      if (ext !== "pdf") {
        showToast("仅支持pdf文件");
        return false;
      }
      if (!sizeOk) {
        showToast("上传文件大小不能超过10MB");
        return false;
      }
    }
    return true;
  };

const uploadSingleFile = async (fileObj) => {
    return new Promise((resolve, reject) => {
        showLoadingToast('正在上传...')
        uni.uploadFile({
            url: config.baseUrl + '/invoiceLedger/uploadFile',
            filePath: fileObj.url || fileObj.file?.path || fileObj.tempFilePath,
            name: 'file',
            header: { Authorization: 'Bearer ' + getToken() },
            success: (res) => {
                closeToast()
                try {
                    const data = JSON.parse(res.data || '{}')
                    if (data.code === 200) {
                        resolve(data.data)
                    } else {
                        reject(new Error(data.msg || '上传失败'))
                    }
                } catch (err) {
                    reject(err)
                }
            },
            fail: (err) => {
                closeToast()
                reject(err)
            }
        })
    })
}
  const uploadSingleFile = async fileObj => {
    return new Promise((resolve, reject) => {
      showLoadingToast("正在上传...");
      uni.uploadFile({
        url: config.baseUrl + "/invoiceLedger/uploadFile",
        filePath: fileObj.url || fileObj.file?.path || fileObj.tempFilePath,
        name: "file",
        header: { Authorization: "Bearer " + getToken() },
        success: res => {
          closeToast();
          try {
            const data = JSON.parse(res.data || "{}");
            if (data.code === 200) {
              resolve(data.data);
            } else {
              reject(new Error(data.msg || "上传失败"));
            }
          } catch (err) {
            reject(err);
          }
        },
        fail: err => {
          closeToast();
          reject(err);
        },
      });
    });
  };

const afterReadEditUpload = async (file) => {
    try {
        const files = Array.isArray(file) ? file : file?.file ? [file] : [file]
        for (const f of files) {
            const uploaded = await uploadSingleFile(f)
            fileList.value.push(uploaded)
        }
        showToast('上传成功')
    } catch (e) {
        showToast('上传失败')
    }
}
  const afterReadEditUpload = async file => {
    try {
      const files = Array.isArray(file) ? file : file?.file ? [file] : [file];
      for (const f of files) {
        const uploaded = await uploadSingleFile(f);
        fileList.value.push(uploaded);
      }
      showToast("上传成功");
    } catch (e) {
      showToast("上传失败");
    }
  };

const afterReadRowUpload = async (file) => {
    try {
        const files = Array.isArray(file) ? file : file?.file ? [file] : [file]
        for (const f of files) {
            const uploaded = await uploadSingleFile(f)
            fileList.value.push(uploaded)
        }
        showToast('上传成功')
    } catch (e) {
        showToast('上传失败')
    }
}
  const afterReadRowUpload = async file => {
    try {
      const files = Array.isArray(file) ? file : file?.file ? [file] : [file];
      for (const f of files) {
        const uploaded = await uploadSingleFile(f);
        fileList.value.push(uploaded);
      }
      showToast("上传成功");
    } catch (e) {
      showToast("上传失败");
    }
  };

const removeUploaded = (index) => {
    fileList.value.splice(index, 1)
}
  const removeUploaded = index => {
    fileList.value.splice(index, 1);
  };

const getFileNameFromUrl = (url) => {
    try {
        if (!url) return ''
        return decodeURIComponent(url.split('/').pop())
    } catch (e) {
        return url
    }
}
  const getFileNameFromUrl = url => {
    try {
      if (!url) return "";
      return decodeURIComponent(url.split("/").pop());
    } catch (e) {
      return url;
    }
  };

// é™„件查看
const openFileActions = (commonFiles) => {
    currentFilesToOpen = commonFiles || []
    fileActions.value = (commonFiles || []).map((f, idx) => ({ name: getFileNameFromUrl(f.url || ''), index: idx }))
    showFileSheet.value = true
}
const onSelectFile = async (action) => {
    try {
        const item = currentFilesToOpen[action.index]
        if (!item || !item.url) return
        showLoadingToast('下载中...')
        uni.downloadFile({
            url: item.url,
            success: (res) => {
                closeToast()
                if (res.statusCode === 200) {
                    uni.openDocument({ filePath: res.tempFilePath })
                } else {
                    showToast('下载失败')
                }
            },
            fail: () => {
                closeToast()
                showToast('下载失败')
            }
        })
    } catch (e) {
        closeToast()
        showToast('打开失败')
    }
}
  // é™„件查看
  const openFileActions = commonFiles => {
    currentFilesToOpen = commonFiles || [];
    fileActions.value = (commonFiles || []).map((f, idx) => ({
      name: getFileNameFromUrl(f.url || ""),
      index: idx,
    }));
    showFileSheet.value = true;
  };
  const onSelectFile = async action => {
    try {
      const item = currentFilesToOpen[action.index];
      if (!item || !item.url) return;
      showLoadingToast("下载中...");
      uni.downloadFile({
        url: item.url,
        success: res => {
          closeToast();
          if (res.statusCode === 200) {
            uni.openDocument({ filePath: res.tempFilePath });
          } else {
            showToast("下载失败");
          }
        },
        fail: () => {
          closeToast();
          showToast("下载失败");
        },
      });
    } catch (e) {
      closeToast();
      showToast("打开失败");
    }
  };

onShow(() => {
    getList()
})
  onShow(() => {
    getList();
  });
</script>

<style scoped lang="scss">
@import '@/styles/sales-common.scss';
  @import "@/styles/sales-common.scss";

// å¼€ç¥¨å°è´¦ç‰¹æœ‰æ ·å¼
.filter-popup {
    padding: 12px 12px 20px;
}
  // å¼€ç¥¨å°è´¦ç‰¹æœ‰æ ·å¼
  .filter-popup {
    padding: 12px 12px 20px;
  }

.switch-row {
    padding: 12px 16px;
}
  .switch-row {
    padding: 12px 16px;
  }

.filter-actions {
    display: flex;
    gap: 12px;
    padding: 12px 16px 16px;
    justify-content: space-between;
}
  .filter-actions {
    display: flex;
    gap: 12px;
    padding: 12px 16px 16px;
    justify-content: space-between;
  }

.edit-container {
    padding-bottom: 5rem;
}
  .edit-container {
    padding-bottom: 5rem;
  }

.uploaded-list {
    padding: 8px 16px 0 16px;
}
  .uploaded-list {
    padding: 8px 16px 0 16px;
  }

.uploaded-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
}
  .uploaded-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
  }

.file-name {
    font-size: 12px;
    color: #333;
    margin-right: 8px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
  .file-name {
    font-size: 12px;
    color: #333;
    margin-right: 8px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

.tip-text {
    padding: 4px 16px 0 16px;
    font-size: 12px;
    color: #888;
}
  .tip-text {
    padding: 4px 16px 0 16px;
    font-size: 12px;
    color: #888;
  }

.footer-btns {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.75rem 0;
    box-shadow: 0 -0.125rem 0.5rem rgba(0,0,0,0.05);
    z-index: 1000;
}
  .footer-btns {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.75rem 0;
    box-shadow: 0 -0.125rem 0.5rem rgba(0, 0, 0, 0.05);
    z-index: 1000;
  }

.cancel-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #FFFFFF;
    width: 6.375rem;
    background: #C7C9CC;
    box-shadow: 0 0.25rem 0.625rem 0 rgba(3,88,185,0.2);
    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
}
  .cancel-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #ffffff;
    width: 6.375rem;
    background: #c7c9cc;
    box-shadow: 0 0.25rem 0.625rem 0 rgba(3, 88, 185, 0.2);
    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
  }

.save-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #FFFFFF;
    width: 14rem;
    background: linear-gradient( 140deg, #00BAFF 0%, #006CFB 100%);
    box-shadow: 0 0.25rem 0.625rem 0 rgba(3,88,185,0.2);
    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
}
  .save-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #ffffff;
    width: 14rem;
    background: linear-gradient(140deg, #00baff 0%, #006cfb 100%);
    box-shadow: 0 0.25rem 0.625rem 0 rgba(3, 88, 185, 0.2);
    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
  }
</style>

 src/pages/sales/invoicingRegistration/index.vue

@@ -1,252 +1,256 @@
<template>
    <view class="sales-account">
        <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
        <PageHeader title="开票登记" @back="goBack" />
		
        <!-- æœç´¢å’Œç­›é€‰åŒºåŸŸ -->
        <view class="search-section">
            <view class="search-bar">
                <view class="search-input">
                    <up-input
                        class="search-text"
                        placeholder="请输入客户名称搜索"
                        v-model="customerName"
                        clearable
                        @change="getList"
                    />
                </view>
                <view class="filter-button" @click="getList">
                    <up-icon name="search" size="24" color="#999"></up-icon>
                </view>
            </view>
        </view>
		
        <!-- é”€å”®å°è´¦ç€‘布流 -->
        <view class="ledger-list" v-if="total > 0">
            <view v-for="(item, index) in ledgerList" :key="index">
                <view class="ledger-item">
                    <view class="item-header">
                        <view class="item-left">
                            <view class="document-icon">
                                <up-icon name="file-text" size="16" color="#ffffff"></up-icon>
                            </view>
                            <text class="item-id">{{ item.salesContractNo }}</text>
                        </view>
                    </view>
                    <up-divider></up-divider>
					
                    <view class="item-details">
                        <view class="detail-row">
                            <text class="detail-label">客户名称</text>
                            <text class="detail-value">{{ item.customerName }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">客户合同号</text>
                            <text class="detail-value">{{ item.customerContractNo }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">业务员</text>
                            <text class="detail-value">{{ item.salesman }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">项目名称</text>
                            <text class="detail-value">{{ item.projectName }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">合同金额(元)</text>
                            <text class="detail-value highlight">{{ item.contractAmount }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">已开票金额(元)</text>
                            <text class="detail-value highlight">{{ item.invoiceTotal }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">未开票金额(元)</text>
                            <text class="detail-value redlight">{{ item.noInvoiceAmountTotal }}</text>
                        </view>
                    </view>
					
                    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
                    <view class="action-buttons">
                        <up-button
                            type="primary"
                            size="small"
                            @click="handleAddInvoice(item)"
                            class="action-btn"
                            :disabled="item.noInvoiceAmountTotal == 0"
                        >
                            æ–°å¢žå¼€ç¥¨
                        </up-button>
                        <up-button
                            size="small"
                            @click="handleViewDetail(item)"
                            class="action-btn"
                        >
                            æŸ¥çœ‹è¯¦æƒ…
                        </up-button>
                    </view>
                </view>
            </view>
        </view>
        <view v-else class="no-data">
            <text>暂无销售台账数据</text>
        </view>
    </view>
  <view class="sales-account">
    <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
    <PageHeader title="开票登记"
                @back="goBack" />
    <!-- æœç´¢å’Œç­›é€‰åŒºåŸŸ -->
    <view class="search-section">
      <view class="search-bar">
        <view class="search-input">
          <up-input class="search-text"
                    placeholder="请输入客户名称搜索"
                    v-model="customerName"
                    clearable
                    @change="getList" />
        </view>
        <view class="filter-button"
              @click="getList">
          <up-icon name="search"
                   size="24"
                   color="#999"></up-icon>
        </view>
      </view>
    </view>
    <!-- é”€å”®å°è´¦ç€‘布流 -->
    <view class="ledger-list"
          v-if="total > 0">
      <view v-for="(item, index) in ledgerList"
            :key="index">
        <view class="ledger-item">
          <view class="item-header">
            <view class="item-left">
              <view class="document-icon">
                <up-icon name="file-text"
                         size="16"
                         color="#ffffff"></up-icon>
              </view>
              <text class="item-id">{{ item.salesContractNo }}</text>
            </view>
          </view>
          <up-divider></up-divider>
          <view class="item-details">
            <view class="detail-row">
              <text class="detail-label">客户名称</text>
              <text class="detail-value">{{ item.customerName }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">客户合同号</text>
              <text class="detail-value">{{ item.customerContractNo }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">业务员</text>
              <text class="detail-value">{{ item.salesman }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">项目名称</text>
              <text class="detail-value">{{ item.projectName }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">合同金额(元)</text>
              <text class="detail-value highlight">{{ item.contractAmount }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">已开票金额(元)</text>
              <text class="detail-value highlight">{{ item.invoiceTotal }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">未开票金额(元)</text>
              <text class="detail-value redlight">{{ item.noInvoiceAmountTotal }}</text>
            </view>
          </view>
          <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
          <view class="action-buttons">
            <up-button type="primary"
                       size="small"
                       @click="handleAddInvoice(item)"
                       class="action-btn"
                       :disabled="item.noInvoiceAmountTotal == 0">
              æ–°å¢žå¼€ç¥¨
            </up-button>
            <up-button size="small"
                       @click="handleViewDetail(item)"
                       class="action-btn">
              æŸ¥çœ‹è¯¦æƒ…
            </up-button>
          </view>
        </view>
      </view>
    </view>
    <view v-else
          class="no-data">
      <text>暂无销售台账数据</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import {ledgerListPage} from "@/api/salesManagement/salesLedger";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore()
  import { ref } from "vue";
  import { onShow } from "@dcloudio/uni-app";
  import { ledgerListPage } from "@/api/salesManagement/salesLedger";
  import useUserStore from "@/store/modules/user";
  const userStore = useUserStore();

// æœç´¢å…³é”®è¯
const customerName = ref('');
  // æœç´¢å…³é”®è¯
  const customerName = ref("");

// é”€å”®å°è´¦æ•°æ®
const ledgerList = ref([]);
const total = ref(0);
  // é”€å”®å°è´¦æ•°æ®
  const ledgerList = ref([]);
  const total = ref(0);

// è¿”回上一页
const goBack = () => {
    uni.navigateBack();
};
// æŸ¥è¯¢åˆ—表
const getList = () => {
    showLoadingToast('加载中...')
    const page = {
        current: -1,
        size: -1
    }
    ledgerListPage({...page, customerName: customerName.value}).then((res) => {
        ledgerList.value = res.records;
        total.value = res.total;
        closeToast()
    }).catch(() => {
        closeToast()
    });
};
  // è¿”回上一页
  const goBack = () => {
    uni.navigateBack();
  };
  // æŸ¥è¯¢åˆ—表
  const getList = () => {
    showLoadingToast("加载中...");
    const page = {
      current: -1,
      size: -1,
    };
    ledgerListPage({ ...page, customerName: customerName.value })
      .then(res => {
        ledgerList.value = res.records;
        // total.value = res.total;
        total.value = 100;
        closeToast();
      })
      .catch(() => {
        closeToast();
      });
  };

// æ˜¾ç¤ºåŠ è½½æç¤º
const showLoadingToast = (message) => {
    uni.showLoading({
        title: message,
        mask: true
    });
};
  // æ˜¾ç¤ºåŠ è½½æç¤º
  const showLoadingToast = message => {
    uni.showLoading({
      title: message,
      mask: true,
    });
  };

// å…³é—­æç¤º
const closeToast = () => {
    uni.hideLoading();
};
  // å…³é—­æç¤º
  const closeToast = () => {
    uni.hideLoading();
  };

// å¤„理新增开票
const handleAddInvoice = (item) => {
    try {
        // å­˜å‚¨é€‰ä¸­çš„合同信息
        uni.setStorageSync('editData', JSON.stringify(item));
		
        // è·³è½¬åˆ°æ–°å¢žå¼€ç¥¨é¡µé¢
        uni.navigateTo({
            url: '/pages/sales/invoicingRegistration/add'
        });
    } catch (error) {
        console.error('处理新增开票失败:', error);
        uni.showToast({
            title: '操作失败，请重试',
            icon: 'error'
        });
    }
};
  // å¤„理新增开票
  const handleAddInvoice = item => {
    try {
      // å­˜å‚¨é€‰ä¸­çš„合同信息
      uni.setStorageSync("editData", JSON.stringify(item));

// å¤„理查看详情
const handleViewDetail = (item) => {
    try {
        // å­˜å‚¨æ•°æ®
        uni.setStorageSync('editData', JSON.stringify(item));
		
        // è·³è½¬åˆ°è¯¦æƒ…页面
        uni.navigateTo({
            url: '/pages/sales/invoicingRegistration/view'
        });
    } catch (error) {
        console.error('处理查看详情失败:', error);
        uni.showToast({
            title: '操作失败，请重试',
            icon: 'error'
        });
    }
};
      // è·³è½¬åˆ°æ–°å¢žå¼€ç¥¨é¡µé¢
      uni.navigateTo({
        url: "/pages/sales/invoicingRegistration/add",
      });
    } catch (error) {
      console.error("处理新增开票失败:", error);
      uni.showToast({
        title: "操作失败，请重试",
        icon: "error",
      });
    }
  };

onShow(() => {
    // é¡µé¢æ˜¾ç¤ºæ—¶åˆ·æ–°åˆ—表
    getList();
});
  // å¤„理查看详情
  const handleViewDetail = item => {
    try {
      // å­˜å‚¨æ•°æ®
      uni.setStorageSync("editData", JSON.stringify(item));

      // è·³è½¬åˆ°è¯¦æƒ…页面
      uni.navigateTo({
        url: "/pages/sales/invoicingRegistration/view",
      });
    } catch (error) {
      console.error("处理查看详情失败:", error);
      uni.showToast({
        title: "操作失败，请重试",
        icon: "error",
      });
    }
  };

  onShow(() => {
    // é¡µé¢æ˜¾ç¤ºæ—¶åˆ·æ–°åˆ—表
    getList();
  });
</script>

<style scoped lang="scss">
@import '@/styles/sales-common.scss';
  @import "@/styles/sales-common.scss";

// å¼€ç¥¨ç™»è®°ç‰¹æœ‰æ ·å¼
.nav-icon {
    width: 24px;
    height: 24px;
    background: #2979ff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
  // å¼€ç¥¨ç™»è®°ç‰¹æœ‰æ ·å¼
  .nav-icon {
    width: 24px;
    height: 24px;
    background: #2979ff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.nav-text {
    font-size: 14px;
    color: #2979ff;
    font-weight: 500;
}
  .nav-text {
    font-size: 14px;
    color: #2979ff;
    font-weight: 500;
  }

.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
}
  .header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
  }

.page-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    pointer-events: auto;
}
  .page-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    pointer-events: auto;
  }

.header-right {
    display: flex;
    align-items: center;
}
  .header-right {
    display: flex;
    align-items: center;
  }

.status-bar {
    display: flex;
    align-items: center;
    gap: 4px;
}
  .status-bar {
    display: flex;
    align-items: center;
    gap: 4px;
  }

.signal, .wifi, .battery {
    width: 16px;
    height: 8px;
    background: #333;
    border-radius: 2px;
}
  .signal,
  .wifi,
  .battery {
    width: 16px;
    height: 8px;
    background: #333;
    border-radius: 2px;
  }

.detail-value.redlight {
    color: red;
    font-weight: 500;
}
  .detail-value.redlight {
    color: red;
    font-weight: 500;
  }

.fab-button {
    bottom: 30px; // ä¸Žå…¶ä»–页面的 calc(30px + env(safe-area-inset-bottom)) ä¸åŒ
}
  .fab-button {
    bottom: 30px; // ä¸Žå…¶ä»–页面的 calc(30px + env(safe-area-inset-bottom)) ä¸åŒ
  }
</style>

 src/pages/sales/receiptPayment/index.vue

@@ -1,204 +1,215 @@
<template>
    <view class="sales-account">
        <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
        <PageHeader title="回款登记" @back="goBack" />
		
        <!-- æœç´¢å’Œç­›é€‰åŒºåŸŸ -->
        <view class="search-section">
            <view class="search-bar">
                <view class="search-input">
                    <up-input
                        class="search-text"
                        placeholder="请输入客户名称搜索"
                        v-model="searchForm.customerName"
                        @change="getList"
                        clearable
                    />
                </view>
                <view class="filter-button" @click="getList">
                    <up-icon name="search" size="24" color="#999"></up-icon>
                </view>
            </view>
			
            <!-- ç­›é€‰å¼€å…³ -->
            <view class="switch-row">
                <text class="switch-label">不显示待回款为0</text>
                <up-switch v-model="searchForm.status" @change="getList" size="18"/>
            </view>
        </view>
		
		
		
        <!-- åˆ—表区域 -->
        <view class="ledger-list" v-if="tableData.length > 0">
            <view v-for="(item, index) in tableData" :key="index">
                <view class="ledger-item">
                    <view class="item-header">
                        <view class="item-left">
                            <view class="document-icon">
                                <up-icon name="file-text" size="16" color="#ffffff"></up-icon>
                            </view>
                            <text class="item-id">{{ item.salesContractNo }}</text>
                        </view>
                    </view>
                    <up-divider></up-divider>
                    <view class="item-details">
                        <view class="detail-row">
                            <text class="detail-label">客户名称</text>
                            <text class="detail-value">{{ item.customerName }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">客户合同号</text>
                            <text class="detail-value">{{ item.customerContractNo }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">项目名称</text>
                            <text class="detail-value">{{ item.projectName }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">产品大类</text>
                            <text class="detail-value">{{ item.productCategory }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">发票号</text>
                            <text class="detail-value">{{ item.invoiceNo || '-' }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">发票金额(元)</text>
                            <text class="detail-value highlight">{{ formatNumber(item.invoiceTotal) }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">税率(%)</text>
                            <text class="detail-value">{{ item.taxRate }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">回款金额(元)</text>
                            <text class="detail-value highlight">{{ formatNumber(item.receiptPaymentAmountTotal) }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">待回款金额(元)</text>
                            <text class="detail-value danger">{{ formatNumber(item.noReceiptAmount) }}</text>
                        </view>
                    </view>
					
                    <!-- æ“ä½œæŒ‰é’® -->
                    <view class="action-buttons">
                        <up-button
                            type="primary"
                            size="small"
                            class="action-btn"
                            :disabled="item.noReceiptAmount == 0"
                            @click="openForm(item)"
                        >
                            æ–°å¢žå›žæ¬¾
                        </up-button>
                    </view>
                </view>
            </view>
        </view>
		
        <!-- æ— æ•°æ®æç¤º -->
        <view class="no-data" v-else>
            <text>暂无回款数据</text>
        </view>
    </view>
  <view class="sales-account">
    <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
    <PageHeader title="回款登记"
                @back="goBack" />
    <!-- æœç´¢å’Œç­›é€‰åŒºåŸŸ -->
    <view class="search-section">
      <view class="search-bar">
        <view class="search-input">
          <up-input class="search-text"
                    placeholder="请输入客户名称搜索"
                    v-model="searchForm.customerName"
                    @change="getList"
                    clearable />
        </view>
        <view class="filter-button"
              @click="getList">
          <up-icon name="search"
                   size="24"
                   color="#999"></up-icon>
        </view>
      </view>
      <!-- ç­›é€‰å¼€å…³ -->
      <view class="switch-row">
        <text class="switch-label">不显示待回款为0</text>
        <up-switch v-model="searchForm.status"
                   @change="getList"
                   size="18" />
      </view>
    </view>
    <!-- åˆ—表区域 -->
    <view class="ledger-list"
          v-if="tableData.length > 0">
      <view v-for="(item, index) in tableData"
            :key="index">
        <view class="ledger-item">
          <view class="item-header">
            <view class="item-left">
              <view class="document-icon">
                <up-icon name="file-text"
                         size="16"
                         color="#ffffff"></up-icon>
              </view>
              <text class="item-id">{{ item.salesContractNo }}</text>
            </view>
            <view class="item-tag">
              <u-tag :type="getTagClass(item.statusName)">{{ item.statusName || '--' }}</u-tag>
            </view>
          </view>
          <up-divider></up-divider>
          <view class="item-details">
            <view class="detail-row">
              <text class="detail-label">客户名称</text>
              <text class="detail-value">{{ item.customerName }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">客户合同号</text>
              <text class="detail-value">{{ item.customerContractNo }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">项目名称</text>
              <text class="detail-value">{{ item.projectName }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">产品大类</text>
              <text class="detail-value">{{ item.productCategory }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">发票号</text>
              <text class="detail-value">{{ item.invoiceNo || '-' }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">发票金额(元)</text>
              <text class="detail-value highlight">{{ formatNumber(item.invoiceTotal) }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">税率(%)</text>
              <text class="detail-value">{{ item.taxRate }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">回款金额(元)</text>
              <text class="detail-value highlight">{{ formatNumber(item.receiptPaymentAmountTotal) }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">待回款金额(元)</text>
              <text class="detail-value danger">{{ formatNumber(item.noReceiptAmount) }}</text>
            </view>
          </view>
          <!-- æ“ä½œæŒ‰é’® -->
          <view class="action-buttons">
            <up-button type="primary"
                       size="small"
                       class="action-btn"
                       :disabled="item.noReceiptAmount == 0"
                       @click="openForm(item)">
              æ–°å¢žå›žæ¬¾
            </up-button>
          </view>
        </view>
      </view>
    </view>
    <!-- æ— æ•°æ®æç¤º -->
    <view class="no-data"
          v-else>
      <text>暂无回款数据</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import {
    bindInvoiceNoRegPage,
} from '@/api/salesManagement/receiptPayment'
import useUserStore from '@/store/modules/user'
  import { ref } from "vue";
  import { bindInvoiceNoRegPage } from "@/api/salesManagement/receiptPayment";
  import useUserStore from "@/store/modules/user";

// æ˜¾ç¤ºæç¤ºä¿¡æ¯
const showToast = (message) => {
    uni.showToast({
        title: message,
        icon: 'none'
    })
}
  // æ˜¾ç¤ºæç¤ºä¿¡æ¯
  const showToast = message => {
    uni.showToast({
      title: message,
      icon: "none",
    });
  };

// æ˜¾ç¤ºåŠ è½½æç¤º
const showLoadingToast = (message) => {
    uni.showLoading({
        title: message,
        mask: true
    });
};
  // æ˜¾ç¤ºåŠ è½½æç¤º
  const showLoadingToast = message => {
    uni.showLoading({
      title: message,
      mask: true,
    });
  };

// å…³é—­åŠ è½½æç¤º
const closeToast = () => {
    uni.hideLoading();
};
  // å…³é—­åŠ è½½æç¤º
  const closeToast = () => {
    uni.hideLoading();
  };

import {onShow} from "@dcloudio/uni-app";
  import { onShow } from "@dcloudio/uni-app";

// å“åº”式数据
const tableData = ref([])
const tableLoading = ref(false)
  // å“åº”式数据
  const tableData = ref([]);
  const tableLoading = ref(false);

// æŸ¥è¯¢å‚数设置为-1获取全部数据
const page = ref({
    current: -1,
    size: -1
})
  // æŸ¥è¯¢å‚数设置为-1获取全部数据
  const page = ref({
    current: -1,
    size: -1,
  });

// æœç´¢è¡¨å•
const searchForm = ref({
    customerName: '',
    status: true,
    customerContractNo: '',
    projectName: ''
})
  // æœç´¢è¡¨å•
  const searchForm = ref({
    customerName: "",
    status: true,
    customerContractNo: "",
    projectName: "",
  });
  // èŽ·å–标签样式类
  const getTagClass = type => {
    if (!type) {
      return "info";
    }
    if (type == "未完成回款") {
      return "warning";
    } else {
      return "success";
    }
  };
  // æ ¼å¼åŒ–æ•°å­—
  const formatNumber = value => {
    return parseFloat(value || 0).toFixed(2);
  };

// æ ¼å¼åŒ–æ•°å­—
const formatNumber = (value) => {
    return parseFloat(value || 0).toFixed(2)
}
  // è¿”回上一页
  const goBack = () => {
    uni.navigateBack();
  };

// è¿”回上一页
const goBack = () => {
    uni.navigateBack()
}
  // èŽ·å–列表数据
  const getList = () => {
    showLoadingToast("加载中...");
    bindInvoiceNoRegPage({ ...searchForm.value, ...page.value })
      .then(res => {
        tableData.value = res.data.records || [];
      })
      .catch(() => {
        showToast("获取数据失败");
      })
      .finally(() => {
        closeToast();
      });
  };

// èŽ·å–列表数据
const getList = () => {
    showLoadingToast('加载中...')
    bindInvoiceNoRegPage({ ...searchForm.value, ...page.value })
        .then((res) => {
            tableData.value = res.data.records || []
        })
        .catch(() => {
            showToast('获取数据失败')
        })
        .finally(() => {
            closeToast()
        })
}
  // æ‰“开新增表单
  const openForm = item => {
    if (item.noReceiptAmount == 0) {
      showToast("无需再回款");
      return;
    }
    uni.setStorageSync("invoiceLedgerEditRow", JSON.stringify(item));
    uni.navigateTo({ url: "/pages/sales/receiptPayment/add" });
  };

// æ‰“开新增表单
const openForm = (item) => {
    if (item.noReceiptAmount == 0) {
        showToast('无需再回款')
        return
    }
    uni.setStorageSync('invoiceLedgerEditRow', JSON.stringify(item))
    uni.navigateTo({ url: '/pages/sales/receiptPayment/add' })
}

onShow(() => {
    getList()
})
  onShow(() => {
    getList();
  });
</script>

<style scoped lang="scss">
@import '@/styles/sales-common.scss';
  @import "@/styles/sales-common.scss";

// å›žæ¬¾ç™»è®°ç‰¹æœ‰æ ·å¼
.detail-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
  // å›žæ¬¾ç™»è®°ç‰¹æœ‰æ ·å¼
  .detail-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
</style>

 src/pages/sales/receiptPaymentHistory/index.vue

@@ -1,87 +1,94 @@
<template>
    <view class="receipt-payment-history">
        <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
        <PageHeader title="回款流水" @back="goBack" />
		
        <!-- æœç´¢åŒºåŸŸ -->
        <view class="search-section">
            <view class="search-bar">
                <view class="search-input">
                    <up-input
                        class="search-text"
                        placeholder="请输入客户名称搜索"
                        v-model="searchForm.searchText"
                        @change="getList"
                        clearable
                    />
                </view>
                <view class="search-button" @click="getList">
                    <up-icon name="search" size="24" color="#999"></up-icon>
                </view>
            </view>
        </view>
        <!-- ç»Ÿè®¡ä¿¡æ¯ -->
        <view class="summary-info" v-if="tableData.length > 0">
            <view class="summary-item">
                <text class="summary-label">总记录数</text>
                <text class="summary-value">{{ tableData.length }}</text>
            </view>
            <view class="summary-item">
                <text class="summary-label">总金额</text>
                <text class="summary-value highlight">{{ formatAmount(totalAmount) }}</text>
            </view>
        </view>
        <!-- å›žæ¬¾åŽ†å²åˆ—表 -->
        <view class="history-list" v-if="tableData.length > 0">
            <view v-for="(item, index) in tableData" :key="index">
                <view class="history-item">
                    <view class="item-header">
                        <view class="item-left">
                            <view class="document-icon">
                                <up-icon name="file-text" size="16" color="#ffffff"></up-icon>
                            </view>
                            <text class="item-id">{{ item.salesContractNo }}</text>
                        </view>
                        <view class="item-tag" :class="getTagClass(item.receiptPaymentType)">
                            <text class="tag-text">{{ formatReceiptType(item.receiptPaymentType) }}</text>
                        </view>
                    </view>
                    <up-divider></up-divider>
                    <view class="item-details">
                        <view class="detail-row">
                            <text class="detail-label">客户合同号</text>
                            <text class="detail-value">{{ item.customerContractNo }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">客户名称</text>
                            <text class="detail-value">{{ item.customerName }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">项目名称</text>
                            <text class="detail-value">{{ item.projectName }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">回款日期</text>
                            <text class="detail-value">{{ item.receiptPaymentDate }}</text>
                        </view>
                        <view class="detail-row">
                            <text class="detail-label">回款金额(元)</text>
                            <text class="detail-value highlight">{{ formatAmount(item.receiptPaymentAmount) }}</text>
                        </view>
                        <up-divider></up-divider>
                        <view class="detail-info">
                            <view class="detail-row">
                                <text class="detail-label">登记人</text>
                                <text class="detail-value">{{ item.registrant }}</text>
                            </view>
                            <view class="detail-row">
                                <text class="detail-label">登记日期</text>
                                <text class="detail-value">{{ item.createTime }}</text>
                            </view>
                        </view>
                        <!-- æ“ä½œæŒ‰é’® -->
                        <view class="action-buttons">
                            <u-button
  <view class="receipt-payment-history">
    <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
    <PageHeader title="回款流水"
                @back="goBack" />
    <!-- æœç´¢åŒºåŸŸ -->
    <view class="search-section">
      <view class="search-bar">
        <view class="search-input">
          <up-input class="search-text"
                    placeholder="请输入客户名称搜索"
                    v-model="searchForm.searchText"
                    @change="getList"
                    clearable />
        </view>
        <view class="search-button"
              @click="getList">
          <up-icon name="search"
                   size="24"
                   color="#999"></up-icon>
        </view>
      </view>
    </view>
    <!-- ç»Ÿè®¡ä¿¡æ¯ -->
    <view class="summary-info"
          v-if="tableData.length > 0">
      <view class="summary-item">
        <text class="summary-label">总记录数</text>
        <text class="summary-value">{{ tableData.length }}</text>
      </view>
      <view class="summary-item">
        <text class="summary-label">总金额</text>
        <text class="summary-value highlight">{{ formatAmount(totalAmount) }}</text>
      </view>
    </view>
    <!-- å›žæ¬¾åŽ†å²åˆ—表 -->
    <view class="history-list"
          v-if="tableData.length > 0">
      <view v-for="(item, index) in tableData"
            :key="index">
        <view class="history-item">
          <view class="item-header">
            <view class="item-left">
              <view class="document-icon">
                <up-icon name="file-text"
                         size="16"
                         color="#ffffff"></up-icon>
              </view>
              <text class="item-id">{{ item.salesContractNo }}</text>
            </view>
            <view class="item-tag"
                  :class="getTagClass(item.receiptPaymentType)">
              <text class="tag-text">{{ formatReceiptType(item.receiptPaymentType) }}</text>
            </view>
          </view>
          <up-divider></up-divider>
          <view class="item-details">
            <view class="detail-row">
              <text class="detail-label">客户合同号</text>
              <text class="detail-value">{{ item.customerContractNo }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">客户名称</text>
              <text class="detail-value">{{ item.customerName }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">项目名称</text>
              <text class="detail-value">{{ item.projectName }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">回款日期</text>
              <text class="detail-value">{{ item.receiptPaymentDate }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">回款金额(元)</text>
              <text class="detail-value highlight">{{ formatAmount(item.receiptPaymentAmount) }}</text>
            </view>
            <up-divider></up-divider>
            <view class="detail-info">
              <view class="detail-row">
                <text class="detail-label">登记人</text>
                <text class="detail-value">{{ item.registrant }}</text>
              </view>
              <view class="detail-row">
                <text class="detail-label">登记日期</text>
                <text class="detail-value">{{ item.createTime }}</text>
              </view>
            </view>
            <!-- æ“ä½œæŒ‰é’® -->
            <view class="action-buttons">
              <!-- <u-button
                                type="primary"
                                size="small"
                                class="action-btn"
@@ -89,152 +96,184 @@
                                @click="openForm(item)"
                            >
                                ç¼–辑回款
                            </u-button>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view v-else class="no-data">
            <text>暂无回款历史数据</text>
        </view>
    </view>
                            </u-button> -->
              <u-button type="error"
                        size="small"
                        class="action-btn"
                        :disabled="item.registrant !== userStore.nickName"
                        @click="delitem(item)">
                åˆ é™¤
              </u-button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else
          class="no-data">
      <text>暂无回款历史数据</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { receiptPaymentHistoryListPage } from "@/api/salesManagement/receiptPayment.js";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore()
  import { ref, computed } from "vue";
  import { onShow } from "@dcloudio/uni-app";
  import {
    receiptPaymentHistoryListPage,
    receiptPaymentDel,
  } from "@/api/salesManagement/receiptPayment.js";
  import useUserStore from "@/store/modules/user";
  const userStore = useUserStore();

// æœç´¢è¡¨å•
const searchForm = ref({
    searchText: '',
});
  // æœç´¢è¡¨å•
  const searchForm = ref({
    searchText: "",
  });

// è¡¨æ ¼æ•°æ®
const tableData = ref([]);
  // è¡¨æ ¼æ•°æ®
  const tableData = ref([]);

// åˆ†é¡µå‚æ•°
const page = ref({
    current: -1,
    size: -1,
});
  // åˆ†é¡µå‚æ•°
  const page = ref({
    current: -1,
    size: -1,
  });

const totalAmount = computed(() => {
    return tableData.value.reduce((sum, item) => {
        return sum + (parseFloat(item.receiptPaymentAmount) || 0);
    }, 0);
});
  const totalAmount = computed(() => {
    return tableData.value.reduce((sum, item) => {
      return sum + (parseFloat(item.receiptPaymentAmount) || 0);
    }, 0);
  });

// è¿”回上一页
const goBack = () => {
    uni.navigateBack();
};
  // è¿”回上一页
  const goBack = () => {
    uni.navigateBack();
  };
  const delitem = item => {
    uni.showModal({
      title: "确认删除",
      content: `确定删除该回款记录吗？`,
      success: res => {
        if (res.confirm) {
          // è°ƒç”¨åˆ é™¤æŽ¥å£
          receiptPaymentDel([item.id]).then(() => {
            uni.showToast({
              title: "删除成功",
              icon: "success",
            });
            // åˆ·æ–°åˆ—表
            getList();
          });
        }
      },
    });
  };

// æŸ¥è¯¢åˆ—表
const getList = () => {
    showLoadingToast('加载中...')
    const params = {
        ...searchForm.value,
        ...page.value
    };
    receiptPaymentHistoryListPage(params).then((res) => {
        tableData.value = res.records;
        closeToast()
    }).catch(() => {
        closeToast()
        uni.showToast({
            title: '查询失败',
            icon: 'error'
        });
    });
};
  // æŸ¥è¯¢åˆ—表
  const getList = () => {
    showLoadingToast("加载中...");
    const params = {
      ...searchForm.value,
      ...page.value,
    };
    receiptPaymentHistoryListPage(params)
      .then(res => {
        tableData.value = res.records;
        closeToast();
      })
      .catch(() => {
        closeToast();
        uni.showToast({
          title: "查询失败",
          icon: "error",
        });
      });
  };

// æ˜¾ç¤ºåŠ è½½æç¤º
const showLoadingToast = (message) => {
    uni.showLoading({
        title: message,
        mask: true
    });
};
  // æ˜¾ç¤ºåŠ è½½æç¤º
  const showLoadingToast = message => {
    uni.showLoading({
      title: message,
      mask: true,
    });
  };

// å…³é—­æç¤º
const closeToast = () => {
    uni.hideLoading();
};
  // å…³é—­æç¤º
  const closeToast = () => {
    uni.hideLoading();
  };

// æ ¼å¼åŒ–回款方式
const formatReceiptType = (type) => {
    if (type == 0) {
        return "电汇";
    } else if (type == 1) {
        return "承兑";
    } else {
        return "未知";
    }
};
  // æ ¼å¼åŒ–回款方式
  const formatReceiptType = type => {
    if (type == 0) {
      return "电汇";
    } else if (type == 1) {
      return "承兑";
    } else {
      return "未知";
    }
  };

// èŽ·å–标签样式类
const getTagClass = (type) => {
    if (type == 0) {
        return "tag-electric";
    } else if (type == 1) {
        return "tag-acceptance";
    } else {
        return "tag-unknown";
    }
};
  // èŽ·å–标签样式类
  const getTagClass = type => {
    if (type == 0) {
      return "tag-electric";
    } else if (type == 1) {
      return "tag-acceptance";
    } else {
      return "tag-unknown";
    }
  };

// æ ¼å¼åŒ–金额
const formatAmount = (amount) => {
    return amount ? parseFloat(amount).toFixed(2) : '0.00';
};
// æ‰“开编辑表单
const openForm = (item) => {
    uni.setStorageSync('invoiceLedgerEditRow', JSON.stringify(item))
    uni.navigateTo({ url: '/pages/sales/receiptPayment/edit' })
}
onShow(() => {
    // é¡µé¢æ˜¾ç¤ºæ—¶åˆ·æ–°åˆ—表
    getList();
});
  // æ ¼å¼åŒ–金额
  const formatAmount = amount => {
    return amount ? parseFloat(amount).toFixed(2) : "0.00";
  };
  // æ‰“开编辑表单
  const openForm = item => {
    uni.setStorageSync("invoiceLedgerEditRow", JSON.stringify(item));
    uni.navigateTo({ url: "/pages/sales/receiptPayment/edit" });
  };
  onShow(() => {
    // é¡µé¢æ˜¾ç¤ºæ—¶åˆ·æ–°åˆ—表
    getList();
  });
</script>

<style scoped lang="scss">
@import '@/styles/sales-common.scss';
  @import "@/styles/sales-common.scss";

// å›žæ¬¾æµæ°´ç‰¹æœ‰æ ·å¼
.receipt-payment-history {
    min-height: 100vh;
    background: #f8f9fa;
    position: relative;
}
  // å›žæ¬¾æµæ°´ç‰¹æœ‰æ ·å¼
  .receipt-payment-history {
    min-height: 100vh;
    background: #f8f9fa;
    position: relative;
  }

.action-buttons {
    padding: 12px 0 0 0; // ä¸Žå…¬å…±æ ·å¼ä¸­çš„ 0 0 16px 0 ä¸åŒ
}
  .action-buttons {
    padding: 12px 0 0 0; // ä¸Žå…¬å…±æ ·å¼ä¸­çš„ 0 0 16px 0 ä¸åŒ
  }

.item-tag {
    padding: 2px 8px; // ä¸Žå…¬å…±æ ·å¼ä¸­çš„ 2px 4px ä¸åŒ
}
  .item-tag {
    padding: 2px 8px; // ä¸Žå…¬å…±æ ·å¼ä¸­çš„ 2px 4px ä¸åŒ
  }

.tag-electric {
    background: #4caf50;
}
  .tag-electric {
    background: #4caf50;
  }

.tag-acceptance {
    background: #ff9800;
}
  .tag-acceptance {
    background: #ff9800;
  }

.tag-unknown {
    background: #9e9e9e;
}
  .tag-unknown {
    background: #9e9e9e;
  }

.tag-text {
    font-size: 14px; // ä¸Žå…¬å…±æ ·å¼ä¸­çš„ 11px ä¸åŒ
    color: #ffffff;
    font-weight: 500;
}
  .tag-text {
    font-size: 14px; // ä¸Žå…¬å…±æ ·å¼ä¸­çš„ 11px ä¸åŒ
    color: #ffffff;
    font-weight: 500;
  }
</style>

 src/pages/sales/receiptPaymentLedger/detail.vue

@@ -1,307 +1,315 @@
<template>
    <view class="receipt-payment-detail">
        <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
        <PageHeader title="客户往来详情" @back="goBack" />
		
        <!-- ç»Ÿè®¡ä¿¡æ¯ -->
        <view class="summary-info" v-if="tableData.length > 0">
            <view class="summary-item">
                <text class="summary-label">总记录数</text>
                <text class="summary-value">{{ tableData.length }}</text>
            </view>
            <view class="summary-item">
                <text class="summary-label">开票总金额</text>
                <text class="summary-value">{{ formatAmount(invoiceTotal) }}</text>
            </view>
            <view class="summary-item">
                <text class="summary-label">回款总金额</text>
                <text class="summary-value highlight">{{ formatAmount(receiptTotal) }}</text>
            </view>
            <view class="summary-item">
                <text class="summary-label">应收总金额</text>
                <text class="summary-value danger">{{ formatAmount(unReceiptTotal) }}</text>
            </view>
        </view>
		
        <!-- å›žæ¬¾è®°å½•æ˜Žç»†åˆ—表 -->
        <view class="detail-list" v-if="tableData.length > 0">
            <view v-for="(item, index) in tableData" :key="index" class="detail-item">
                <view class="item-header">
                    <view class="item-left">
                        <view class="record-icon">
                            <up-icon name="file-text" size="16" color="#ffffff"></up-icon>
                        </view>
                        <text class="item-index">{{ index + 1 }}</text>
                    </view>
                    <view class="item-date">{{ item.happenTime }}</view>
                </view>
                <up-divider></up-divider>
                <view class="item-details">
                    <view class="detail-row">
                        <text class="detail-label">开票金额(元)</text>
                        <text class="detail-value">{{ formatAmount(item.invoiceAmount) }}</text>
                    </view>
                    <view class="detail-row">
                        <text class="detail-label">回款金额(元)</text>
                        <text class="detail-value highlight">{{ formatAmount(item.receiptAmount) }}</text>
                    </view>
                    <view class="detail-row">
                        <text class="detail-label">应收金额(元)</text>
                        <text class="detail-value danger">{{ formatAmount(item.unReceiptAmount) }}</text>
                    </view>
                </view>
            </view>
        </view>
        <view v-else class="no-data">
            <text>暂无回款记录</text>
        </view>
    </view>
  <view class="receipt-payment-detail">
    <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
    <PageHeader title="客户往来详情"
                @back="goBack" />
    <!-- ç»Ÿè®¡ä¿¡æ¯ -->
    <view class="summary-info"
          v-if="tableData.length > 0">
      <view class="summary-item">
        <text class="summary-label">总记录数</text>
        <text class="summary-value">{{ tableData.length }}</text>
      </view>
      <view class="summary-item">
        <text class="summary-label">开票总金额</text>
        <text class="summary-value">{{ formatAmount(invoiceTotal) }}</text>
      </view>
      <view class="summary-item">
        <text class="summary-label">回款总金额</text>
        <text class="summary-value highlight">{{ formatAmount(receiptTotal) }}</text>
      </view>
      <view class="summary-item">
        <text class="summary-label">应收总金额</text>
        <text class="summary-value danger">{{ formatAmount(unReceiptTotal) }}</text>
      </view>
    </view>
    <!-- å›žæ¬¾è®°å½•æ˜Žç»†åˆ—表 -->
    <view class="detail-list"
          v-if="tableData.length > 0">
      <view v-for="(item, index) in tableData"
            :key="index"
            class="detail-item">
        <view class="item-header">
          <view class="item-left">
            <view class="record-icon">
              <up-icon name="file-text"
                       size="16"
                       color="#ffffff"></up-icon>
            </view>
            <text class="item-index">{{ index + 1 }}</text>
          </view>
          <view class="item-date">{{ item.happenTime }}</view>
        </view>
        <up-divider></up-divider>
        <view class="item-details">
          <view class="detail-row">
            <text class="detail-label">开票金额(元)</text>
            <text class="detail-value">{{ formatAmount(item.invoiceTotal) }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">回款金额(元)</text>
            <text class="detail-value highlight">{{ formatAmount(item.receiptPaymentAmount) }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">应收金额(元)</text>
            <text class="detail-value danger">{{ formatAmount(item.unReceiptPaymentAmount) }}</text>
          </view>
        </view>
      </view>
    </view>
    <view v-else
          class="no-data">
      <text>暂无回款记录</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { customerInteractions } from "@/api/salesManagement/receiptPayment.js";
  import { ref, computed, onMounted } from "vue";
  import { onShow } from "@dcloudio/uni-app";
  import { customerInteractions } from "@/api/salesManagement/receiptPayment.js";

// å®¢æˆ·ä¿¡æ¯
const customerId = ref('');
  // å®¢æˆ·ä¿¡æ¯
  const customerId = ref("");

// è¡¨æ ¼æ•°æ®
const tableData = ref([]);
  // è¡¨æ ¼æ•°æ®
  const tableData = ref([]);

const invoiceTotal = computed(() => {
    return tableData.value.reduce((sum, item) => {
        return sum + (parseFloat(item.invoiceAmount) || 0);
    }, 0);
});
  const invoiceTotal = computed(() => {
    return tableData.value.reduce((sum, item) => {
      return sum + (parseFloat(item.invoiceTotal) || 0);
    }, 0);
  });

const receiptTotal = computed(() => {
    return tableData.value.reduce((sum, item) => {
        return sum + (parseFloat(item.receiptAmount) || 0);
    }, 0);
});
  const receiptTotal = computed(() => {
    return tableData.value.reduce((sum, item) => {
      return sum + (parseFloat(item.receiptPaymentAmount) || 0);
    }, 0);
  });

const unReceiptTotal = computed(() => {
    return tableData.value.reduce((sum, item) => {
        return sum + (parseFloat(item.unReceiptAmount) || 0);
    }, 0);
});
  const unReceiptTotal = computed(() => {
    return tableData.value.reduce((sum, item) => {
      return sum + (parseFloat(item.unReceiptPaymentAmount) || 0);
    }, 0);
  });

// è¿”回上一页
const goBack = () => {
    uni.removeStorageSync('customerId')
    uni.navigateBack();
};
  // è¿”回上一页
  const goBack = () => {
    uni.removeStorageSync("customerId");
    uni.navigateBack();
  };

// èŽ·å–页面参数
const getPageParams = () => {
    // ä»Žæœ¬åœ°å­˜å‚¨èŽ·å–客户ID
    const storedCustomerId = uni.getStorageSync('customerId');
    if (storedCustomerId) {
        customerId.value = storedCustomerId;
    }
};
  // èŽ·å–页面参数
  const getPageParams = () => {
    // ä»Žæœ¬åœ°å­˜å‚¨èŽ·å–客户ID
    const storedCustomerId = uni.getStorageSync("customerId");
    if (storedCustomerId) {
      customerId.value = storedCustomerId;
    }
  };

// æŸ¥è¯¢åˆ—表
const getList = () => {
    if (!customerId.value) {
        uni.showToast({
            title: '客户信息缺失',
            icon: 'error'
        });
        return;
    }
	
    showLoadingToast('加载中...')
    const param = {
        customerId: customerId.value,
        current: -1,
        size: -1
    };
	
    customerInteractions(param).then((res) => {
        tableData.value = res.data;
        closeToast()
    }).catch(() => {
        closeToast()
        uni.showToast({
            title: '查询失败',
            icon: 'error'
        });
    });
};
  // æŸ¥è¯¢åˆ—表
  const getList = () => {
    if (!customerId.value) {
      uni.showToast({
        title: "客户信息缺失",
        icon: "error",
      });
      return;
    }

// æ ¼å¼åŒ–金额
const formatAmount = (amount) => {
    return amount ? parseFloat(amount).toFixed(2) : '0.00';
};
    showLoadingToast("加载中...");
    const param = {
      customerId: customerId.value,
      current: -1,
      size: -1,
    };

// æ˜¾ç¤ºåŠ è½½æç¤º
const showLoadingToast = (message) => {
    uni.showLoading({
        title: message,
        mask: true
    });
};
    customerInteractions(param)
      .then(res => {
        tableData.value = res.data;
        closeToast();
      })
      .catch(() => {
        closeToast();
        uni.showToast({
          title: "查询失败",
          icon: "error",
        });
      });
  };

// å…³é—­æç¤º
const closeToast = () => {
    uni.hideLoading();
};
  // æ ¼å¼åŒ–金额
  const formatAmount = amount => {
    return amount ? parseFloat(amount).toFixed(2) : "0.00";
  };

onShow(() => {
    // é¡µé¢æ˜¾ç¤ºæ—¶èŽ·å–参数并刷新列表
    getPageParams();
    getList();
});
  // æ˜¾ç¤ºåŠ è½½æç¤º
  const showLoadingToast = message => {
    uni.showLoading({
      title: message,
      mask: true,
    });
  };

onMounted(() => {
    // é¡µé¢åŠ è½½æ—¶èŽ·å–参数并刷新列表
    getPageParams();
    getList();
});
  // å…³é—­æç¤º
  const closeToast = () => {
    uni.hideLoading();
  };

  onShow(() => {
    // é¡µé¢æ˜¾ç¤ºæ—¶èŽ·å–参数并刷新列表
    getPageParams();
    getList();
  });

  onMounted(() => {
    // é¡µé¢åŠ è½½æ—¶èŽ·å–参数并刷新列表
    getPageParams();
    getList();
  });
</script>

<style scoped lang="scss">
.receipt-payment-detail {
    min-height: 100vh;
    background: #f8f9fa;
    position: relative;
}
  .receipt-payment-detail {
    min-height: 100vh;
    background: #f8f9fa;
    position: relative;
  }

.u-divider {
    margin: 0 !important;
}
  .u-divider {
    margin: 0 !important;
  }

.summary-info {
    background: #ffffff;
    margin: 20px 20px 0 20px;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
  .summary-info {
    background: #ffffff;
    margin: 20px 20px 0 20px;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
	
    &:last-child {
        margin-bottom: 0;
    }
}
  .summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;

.summary-label {
    font-size: 14px;
    color: #666;
}
    &:last-child {
      margin-bottom: 0;
    }
  }

.summary-value {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}
  .summary-label {
    font-size: 14px;
    color: #666;
  }

.summary-value.highlight {
    color: #2979ff;
    font-weight: 600;
}
  .summary-value {
    font-size: 14px;
    color: #333;
    font-weight: 500;
  }

.summary-value.danger {
    color: #ff4757;
    font-weight: 600;
}
  .summary-value.highlight {
    color: #2979ff;
    font-weight: 600;
  }

.detail-list {
    padding: 20px;
}
  .summary-value.danger {
    color: #ff4757;
    font-weight: 600;
  }

.detail-item {
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 0 16px;
}
  .detail-list {
    padding: 20px;
  }

.item-header {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
  .detail-item {
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 0 16px;
  }

.item-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
  .item-header {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

.record-icon {
    width: 24px;
    height: 24px;
    background: #2979ff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
  .item-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

.item-index {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}
  .record-icon {
    width: 24px;
    height: 24px;
    background: #2979ff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.item-date {
    font-size: 12px;
    color: #666;
}
  .item-index {
    font-size: 14px;
    color: #333;
    font-weight: 500;
  }

.item-details {
    padding: 16px 0;
}
  .item-date {
    font-size: 12px;
    color: #666;
  }

.detail-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 8px;
	
    &:last-child {
        margin-bottom: 0;
    }
}
  .item-details {
    padding: 16px 0;
  }

.detail-label {
    font-size: 12px;
    color: #777777;
    min-width: 60px;
}
  .detail-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 8px;

.detail-value {
    font-size: 12px;
    color: #000000;
    text-align: right;
    flex: 1;
    margin-left: 16px;
}
    &:last-child {
      margin-bottom: 0;
    }
  }

.detail-value.highlight {
    color: #2979ff;
    font-weight: 500;
}
  .detail-label {
    font-size: 12px;
    color: #777777;
    min-width: 60px;
  }

.detail-value.danger {
    color: #ff4757;
    font-weight: 500;
}
  .detail-value {
    font-size: 12px;
    color: #000000;
    text-align: right;
    flex: 1;
    margin-left: 16px;
  }

.no-data {
    padding: 40px 0;
    text-align: center;
    color: #999;
}
  .detail-value.highlight {
    color: #2979ff;
    font-weight: 500;
  }

  .detail-value.danger {
    color: #ff4757;
    font-weight: 500;
  }

  .no-data {
    padding: 40px 0;
    text-align: center;
    color: #999;
  }
</style>

 src/static/images/icon/baojiaguanli.png

 src/static/images/icon/baoxiaoguanli.png

 src/static/images/icon/caigouguanli.png

 src/static/images/icon/chukuguanli@2x.png

 src/static/images/icon/guizhangzhidu@2x.png

 src/static/images/icon/huiyifabu@2x.png

 src/static/images/icon/huiyikanban@2x.png

 src/static/images/icon/huiyiliebiao@2x.png

 src/static/images/icon/huiyishenpi@2x.png

 src/static/images/icon/huiyishenqing@2x.png

 src/static/images/icon/huiyishezhi@2x.png

 src/static/images/icon/huiyizongjie@2x.png

 src/static/images/icon/tongzhigonggao@2x.png

 src/static/images/icon/yongyinguanli@2x.png

 src/static/images/icon/zhishiku@2x.png