一些向web对齐

zhangwencui

3 天以前 f670b79094c95d791fc43c8fc8b5858ebf8426dc

 src/pages/cooperativeOffice/collaborativeApproval/index.vue

@@ -4,6 +4,14 @@
    <!-- 使用通用页面头部组件 -->
    <PageHeader :title="pageTitle"
                @back="goBack" />
    <!-- 审批类型切换（从菜单直接进入时可切换；经 index1~8 进入时不展示） -->
    <view v-if="showTypeTabs"
          class="type-tabs-wrap">
      <up-tabs :list="typeTabList"
               :current="activeTypeIndex"
               line-color="#ed8d05"
               @click="onTypeTabClick" />
    </view>
    <!-- 搜索和筛选区域 -->
    <view class="search-section">
      <view class="search-bar">
@@ -13,6 +21,14 @@
                    v-model="searchForm.approveId"
                    clearable />
        </view>
        <view class="filter-chip"
              :class="{ 'filter-chip--active': searchForm.approveStatus !== '' }"
              @click="openStatusSheet">
          <text class="filter-chip-text">{{ approveStatusText }}</text>
          <up-icon name="arrow-down"
                   size="14"
                   color="#999"></up-icon>
        </view>
        <view class="search-button"
              @click="getList">
          <up-icon name="search"
@@ -21,6 +37,11 @@
        </view>
      </view>
    </view>
    <up-action-sheet :show="showStatusSheet"
                     title="审批状态"
                     :actions="statusActions"
                     @select="onSelectStatus"
                     @close="showStatusSheet = false" />
    <!-- 审批列表 -->
    <view class="ledger-list"
          v-if="ledgerList.length > 0">
@@ -105,7 +126,6 @@
                    编辑
                  </u-button>
                  <u-button type="info"
                            v-if="item.approveType == 5 || item.approveType == 6 || item.approveType == 7"
                            size="small"
                            class="action-btn detail"
                            @click="handleDetailClick(item)">
@@ -131,7 +151,7 @@
    </view>
    <!-- 浮动操作按钮 -->
    <view class="fab-button"
          v-if="props.approveType != 5 && props.approveType != 6 && props.approveType != 7"
          v-if="activeApproveType != 5 && activeApproveType != 6 && activeApproveType != 7"
          @click="handleAdd">
      <up-icon name="plus"
               size="24"
@@ -141,13 +161,23 @@
</template>

<script setup>
  import { ref, toRefs, reactive } from "vue";
  import { ref, toRefs, reactive, computed } from "vue";
  import PageHeader from "@/components/PageHeader.vue";
  import { approveProcessListPage } from "@/api/collaborativeApproval/approvalProcess";
  import { onLoad, onShow } from "@dcloudio/uni-app";
  import useUserStore from "@/store/modules/user";

  // 接收父组件传递的 approveType 参数
  /** 审批状态筛选（与 Web approvalProcess 列表一致） */
  const APPROVE_STATUS_OPTIONS = [
    { value: "", label: "全部状态" },
    { value: 0, label: "待审核" },
    { value: 1, label: "审核中" },
    { value: 2, label: "审核完成" },
    { value: 3, label: "审核未通过" },
    { value: 4, label: "已重新提交" },
  ];

  // 接收父组件传递的 approveType 参数（index1~8 固定类型；0 表示未指定）
  const props = defineProps({
    approveType: {
      type: Number,
@@ -155,22 +185,50 @@
    },
  });

  // 映射 approveType 到对应的页面标题
  const getPageTitle = type => {
    const titleMap = {
      1: "公出管理",
      2: "请假管理",
      3: "出差管理",
      4: "报销管理",
      5: "采购管理",
      6: "报价管理",
      7: "发货审批",
      8: "危险作业审批",
    };
    return titleMap[type] || "审批管理";
  // 审批类型标题
  const APPROVE_TYPE_LABELS = {
    1: "公出管理",
    2: "请假管理",
    3: "出差管理",
    4: "报销管理",
    5: "采购审批",
    6: "报价审批",
    7: "发货审批",
    8: "危险作业审批",
  };

  const pageTitle = getPageTitle(props.approveType);
  /** 可切换的协同审批类型（与 Web approvalProcess Tab 一致） */
  const TYPE_TAB_VALUES = [1, 2, 3, 4, 5, 6, 7];

  /** 父级传入的固定类型；0 表示未指定，可由页内 Tab 切换 */
  const fixedApproveType = computed(() => Number(props.approveType) || 0);
  const activeApproveType = ref(fixedApproveType.value || 1);

  const showTypeTabs = computed(() => fixedApproveType.value === 0);

  const typeTabList = computed(() =>
    TYPE_TAB_VALUES.map(value => ({ name: APPROVE_TYPE_LABELS[value] }))
  );

  const activeTypeIndex = computed(() => {
    const idx = TYPE_TAB_VALUES.indexOf(activeApproveType.value);
    return idx >= 0 ? idx : 0;
  });

  const pageTitle = computed(
    () => APPROVE_TYPE_LABELS[activeApproveType.value] || "协同审批"
  );

  const onTypeTabClick = item => {
    activeApproveType.value = TYPE_TAB_VALUES[item?.index ?? 0] || 1;
    searchForm.value.approveId = "";
    searchForm.value.approveStatus = "";
    getList();
  };

  /** 列表行自带 approveType，缺失时回退当前 Tab */
  const currentItemApproveType = item =>
    Number(item?.approveType) || activeApproveType.value;

  const userStore = useUserStore();
  // 数据
@@ -178,9 +236,33 @@
  const data = reactive({
    searchForm: {
      approveId: "",
      approveStatus: "",
    },
  });
  const { searchForm } = toRefs(data);

  const showStatusSheet = ref(false);

  const statusActions = computed(() =>
    APPROVE_STATUS_OPTIONS.map(opt => ({ name: opt.label, value: opt.value }))
  );

  const approveStatusText = computed(() => {
    const hit = APPROVE_STATUS_OPTIONS.find(
      opt => String(opt.value) === String(searchForm.value.approveStatus)
    );
    return hit?.label || "全部状态";
  });

  const openStatusSheet = () => {
    showStatusSheet.value = true;
  };

  const onSelectStatus = action => {
    searchForm.value.approveStatus = action?.value ?? "";
    showStatusSheet.value = false;
    getList();
  };

  // 返回上一页
  const goBack = () => {
@@ -195,7 +277,7 @@
    };
    approveProcessListPage({
      ...page,
      approveType: props.approveType,
      approveType: activeApproveType.value,
      ...searchForm.value,
    })
      .then(res => {
@@ -263,7 +345,7 @@
    uni.setStorageSync("invoiceLedgerEditRow", JSON.stringify(item));
    uni.setStorageSync("operationType", "edit");
    uni.setStorageSync("approveId", item.approveId);
    uni.setStorageSync("approveType", props.approveType);
    uni.setStorageSync("approveType", currentItemApproveType(item));
    uni.navigateTo({
      url: "/pages/cooperativeOffice/collaborativeApproval/detail",
    });
@@ -274,7 +356,7 @@
    uni.setStorageSync("invoiceLedgerEditRow", JSON.stringify(item));
    uni.setStorageSync("operationType", "detail");
    uni.setStorageSync("approveId", item.approveId);
    uni.setStorageSync("approveType", props.approveType);
    uni.setStorageSync("approveType", currentItemApproveType(item));
    uni.navigateTo({
      url: "/pages/cooperativeOffice/collaborativeApproval/detail",
    });
@@ -283,23 +365,27 @@
  // 添加新记录
  const handleAdd = () => {
    uni.setStorageSync("operationType", "add");
    uni.setStorageSync("approveType", props.approveType);
    uni.setStorageSync("approveType", activeApproveType.value);
    uni.navigateTo({
      url: `/pages/cooperativeOffice/collaborativeApproval/detail?approveType=${props.approveType}`,
      url: `/pages/cooperativeOffice/collaborativeApproval/detail?approveType=${activeApproveType.value}`,
    });
  };
  // 点击审核
  const approve = item => {
    const type = currentItemApproveType(item);
    uni.setStorageSync("approveId", item.approveId);
    uni.setStorageSync("approveType", props.approveType);
    uni.setStorageSync("approveType", type);
    uni.navigateTo({
      url:
        "/pages/cooperativeOffice/collaborativeApproval/approve?approveType=" +
        props.approveType,
        type,
    });
  };

  onLoad(options => {
    // index1~8 传固定类型；菜单直接进入时可用 ?approveType= 指定，默认公出管理
    activeApproveType.value =
      Number(options?.approveType) || fixedApproveType.value || 1;
    // 解析approveId
    if (options.approveId) {
      searchForm.value.approveId = options.approveId;
@@ -319,11 +405,49 @@
    margin: 0 !important;
  }

  // 审批类型切换
  .type-tabs-wrap {
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    padding: 0 8px;
  }

  // 文档图标样式 - 覆盖公共样式中的背景色
  .document-icon {
    background: #ed8d05;
  }

  // 状态筛选 chip
  .filter-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 8px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;

    &--active {
      border-color: #2979ff;
      background: #f0f6ff;
    }
  }

  .filter-chip-text {
    font-size: 12px;
    color: #606266;
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .filter-chip--active .filter-chip-text {
    color: #2979ff;
  }

  // 浮动按钮样式 - 覆盖公共样式中的背景色
  .fab-button {
    background: #ed8d05;