优化出入库功能，新增对未完全入库和出库商品的检查，更新相关API接口以支持审批人字段的统一命名

yyb

2 天以前 a6baad20258a61d9ce9a786029ca4cb63a7c992e

 src/pages/inventoryManagement/scanIn/index.vue

@@ -13,7 +13,7 @@
        </view>
        <view class="module-info">
          <text class="module-label">合格入库</text>
          <text class="module-desc">扫描合格产品信息</text>
          <text class="module-desc">扫描合格产品进行入库</text>
        </view>
      </view>
      <view class="module-card"
@@ -25,124 +25,467 @@
        </view>
        <view class="module-info">
          <text class="module-label">不合格入库</text>
          <text class="module-desc">录入不合格品记录</text>
          <text class="module-desc">记录不合格品的入库</text>
        </view>
      </view>
    </view>
    <view class="form-content"
          v-if="showForm">
      <u-form ref="formRef"
              :model="form"
              :rules="formRules"
              label-width="100px">
        <u-form-item label="入库类型"
                     border-bottom>
          <u-tag :text="type === 'qualified' ? '合格入库' : '不合格入库'"
                 :type="type === 'qualified' ? 'success' : 'error'"></u-tag>
        </u-form-item>
        <u-form-item label="产品名称"
                     border-bottom>
          <u-input v-model="form.productName"
                   readonly
                   border="none"></u-input>
        </u-form-item>
        <u-form-item label="规格型号"
                     border-bottom>
          <u-input v-model="form.productModelName"
                   readonly
                   border="none"></u-input>
        </u-form-item>
        <u-form-item label="单位"
                     border-bottom>
          <u-input v-model="form.unit"
                   readonly
                   border="none"></u-input>
        </u-form-item>
        <u-form-item label="入库数量"
                     prop="qualitity"
                     required
                     border-bottom>
          <u-number-box v-model="form.qualitity"
                        :min="1"
                        :step="1"></u-number-box>
        </u-form-item>
        <u-form-item label="预警数量"
                     prop="warnNum"
                     v-if="type === 'qualified'"
                     border-bottom>
          <u-number-box v-model="form.warnNum"
                        :min="0"
                        :step="1"></u-number-box>
        </u-form-item>
        <u-form-item label="备注"
                     prop="remark"
                     border-bottom>
          <u-textarea v-model="form.remark"
                      placeholder="请输入备注"
                      count></u-textarea>
        </u-form-item>
      </u-form>
      <view class="footer-btns">
        <u-button class="cancel-btn"
                  @click="cancelForm">取消</u-button>
        <u-button class="save-btn"
                  @click="handleSubmit"
                  :loading="loading">确认入库</u-button>
    <scroll-view v-if="showForm"
                 scroll-y
                 class="detail-scroll">
      <view class="detail-card"
            v-for="(item, idx) in recordList"
            :key="idx">
        <view class="detail-card-title"
              :class="{
                'detail-card-title--collapsible': recordList.length > 1,
                'is-collapsed': recordList.length > 1 && !isCardExpanded(idx),
              }"
              @click="recordList.length > 1 && toggleCardDetail(idx)">
          <view class="detail-card-title-text">
            <text class="detail-card-title-no">{{ cardTitleMain }}</text>
            <text v-if="recordList.length > 1"
                  class="detail-card-title-seq">（{{ idx + 1 }}/{{ recordList.length }}）</text>
          </view>
          <u-icon v-if="recordList.length > 1"
                  :name="isCardExpanded(idx) ? 'arrow-up' : 'arrow-down'"
                  color="#999"
                  size="18"></u-icon>
        </view>
        <view v-show="recordList.length > 1 && !isCardExpanded(idx)"
              class="detail-card-summary"
              @click="toggleCardDetail(idx)">
          <view class="kv-row kv-row--summary"
                v-for="row in summaryFieldRows"
                :key="'sum-' + row.key">
            <text class="kv-label">{{ row.label }}</text>
            <view class="kv-value kv-value--tag"
                  v-if="row.key === 'approveStatus'">
              <u-tag :type="approveStatusTagType(item)"
                     size="small">{{ formatApproveStatus(item) }}</u-tag>
            </view>
            <view class="kv-value kv-value--tag"
                  v-else-if="row.key === 'productStockStatus'">
              <u-tag :type="productStockStatusTagType(item.productStockStatus)"
                     size="small">{{ formatProductStockStatus(item.productStockStatus) }}</u-tag>
            </view>
            <text class="kv-value"
                  v-else>{{ formatCell(item, row, idx) }}</text>
          </view>
          <text class="summary-tip">点击查看全部</text>
        </view>
        <view v-show="isCardExpanded(idx)"
              class="detail-card-body">
          <view class="kv-row"
                v-for="row in detailFieldRows"
                :key="row.key">
            <text class="kv-label">{{ row.label }}</text>
            <view class="kv-value kv-value--tag"
                  v-if="row.key === 'approveStatus'">
              <u-tag :type="approveStatusTagType(item)"
                     size="small">{{ formatApproveStatus(item) }}</u-tag>
            </view>
            <view class="kv-value kv-value--tag"
                  v-else-if="row.key === 'productStockStatus'">
              <u-tag :type="productStockStatusTagType(item.productStockStatus)"
                     size="small">{{ formatProductStockStatus(item.productStockStatus) }}</u-tag>
            </view>
            <text class="kv-value"
                  v-else>{{ formatCell(item, row, idx) }}</text>
          </view>
        </view>
        <view v-if="!isFullyStocked(item)"
              class="stocked-qty-block">
          <view class="kv-row stocked-qty-row">
            <text class="kv-label">入库数量</text>
            <view class="kv-value stocked-qty-input-wrap">
              <up-input :key="'stocked-' + idx"
                        v-model="item.operateQuantity"
                        type="number"
                        placeholder="请输入入库数量"
                        clearable
                        border="surround"
                        @blur="onStockedQtyBlur(item)" />
            </view>
          </view>
        </view>
      </view>
    </view>
      <view class="approval-process">
        <view class="approval-header">
          <text class="approval-title">审核流程</text>
          <text class="approval-desc">每个步骤只能选择一个审批人</text>
        </view>
        <view class="approval-steps">
          <view v-for="(step, stepIndex) in stockApproverNodes"
                :key="step.id"
                class="approval-step">
            <view class="step-title">
              <text>审批人</text>
            </view>
            <view class="approver-container">
              <view v-if="step.userName"
                    class="approver-item">
                <view class="approver-avatar">
                  <text class="avatar-text">{{ step.userName.charAt(0) }}</text>
                </view>
                <view class="approver-info">
                  <text class="approver-name">{{ step.userName }}</text>
                </view>
                <view class="delete-approver-btn"
                      @click="removeApprover(stepIndex)">×</view>
              </view>
              <view v-else
                    class="add-approver-btn"
                    @click="openApproverPicker(stepIndex)">
                <view class="add-circle">+</view>
                <text class="add-label">选择审批人</text>
              </view>
            </view>
            <view class="delete-step-btn"
                  v-if="stockApproverNodes.length > 1"
                  @click="removeStockApproverNode(stepIndex)">删除节点</view>
          </view>
        </view>
        <view class="add-step-btn">
          <u-button icon="plus"
                    plain
                    type="primary"
                    style="width: 100%"
                    @click="addStockApproverNode">新增节点</u-button>
        </view>
      </view>

      <view class="footer-btns">
        <u-button class="footer-cancel-btn"
                  @click="cancelForm">返回</u-button>
        <u-button class="footer-confirm-btn"
                  :loading="submitLoading"
                  @click="confirmInbound">确认入库</u-button>
      </view>
    </scroll-view>

  </view>
</template>

<script setup>
  import { ref, reactive } from "vue";
  import { ref, computed, onMounted, onUnmounted } from "vue";
  import PageHeader from "@/components/PageHeader.vue";
  import {
    createStockInventory,
    getStockInventoryListPage,
  } from "@/api/inventoryManagement/stockInventory.js";
  import {
    createStockUnInventory,
    getStockUninventoryListPage,
  } from "@/api/inventoryManagement/stockUninventory.js";
  import { productList as salesProductList } from "@/api/salesManagement/salesLedger";
  import modal from "@/plugins/modal";
  import { QUALITY_TYPE, CONTRACT_KIND } from "../scanOut/scanOut.constants";
  import { useScanOutFieldRows } from "../scanOut/scanOut.fields";
  import {
    defaultStockedQuantityFromRow,
    resolveQrContractKind,
    resolveListTypeForDetail,
    resolveContractNo,
    buildSalesLedgerProductList,
    hasAnyPositiveStockedQty,
    resolveSubmitSceneKey,
  } from "../scanOut/scanOut.logic";
  import { createSubmitConfig } from "./scanIn.submit";

  const showForm = ref(false);
  const type = ref("qualified"); // qualified | unqualified
  const loading = ref(false);
  const formRef = ref(null);
  const type = ref(QUALITY_TYPE.qualified);
  const recordList = ref([]);
  const expandedByIndex = ref({});
  const scanContractNo = ref("");
  const contractKind = ref(CONTRACT_KIND.sales);
  const scanLedgerId = ref(null);
  const submitLoading = ref(false);
  const stockApproverNodes = ref([{ id: 1, userId: null, userName: "" }]);
  let nextApproverNodeId = 2;
  const submitConfigByScene = createSubmitConfig(scanLedgerId);

  const form = ref({
    productId: undefined,
    productModelId: undefined,
    productName: "",
    productModelName: "",
    unit: "",
    qualitity: 1,
    warnNum: 0,
    remark: "",
  const cardTitleMain = computed(() => {
    const no = scanContractNo.value?.trim();
    return no || "—";
  });

  const formRules = {
    qualitity: [
      {
        required: true,
        type: "number",
        message: "请输入入库数量",
        trigger: ["blur", "change"],
      },
    ],
  const isCardExpanded = idx => {
    if (recordList.value.length <= 1) return true;
    return !!expandedByIndex.value[idx];
  };

  const toggleCardDetail = idx => {
    if (recordList.value.length <= 1) return;
    expandedByIndex.value = {
      ...expandedByIndex.value,
      [idx]: !expandedByIndex.value[idx],
    };
  };

  const { detailFieldRows: rawDetailFieldRows, summaryFieldRows: rawSummaryFieldRows } = useScanOutFieldRows(
    contractKind,
    "inbound"
  );
  const shouldShowInboundQuantityField = key => {
    if (type.value === QUALITY_TYPE.qualified) return key !== "unqualifiedStockedQuantity";
    if (type.value === QUALITY_TYPE.unqualified)
      return key !== "stockedQuantity" && key !== "remainingQuantity";
    return true;
  };
  const detailFieldRows = computed(() =>
    rawDetailFieldRows.value.filter(row => shouldShowInboundQuantityField(row.key))
  );
  const summaryFieldRows = computed(() =>
    rawSummaryFieldRows.value.filter(row => shouldShowInboundQuantityField(row.key))
  );

  const emptyDash = v => {
    if (v === null || v === undefined || v === "") return "-";
    return v;
  };

  const formatApproveStatus = row => {
    const a = row.approveStatus;
    const noShipInfo = !row.shippingDate || !row.shippingCarNumber;
    const hasShipInfo = !!(row.shippingDate || row.shippingCarNumber);
    if ((a === 1 || a === "1") && noShipInfo) return "充足";
    if ((a === 0 || a === "0") && hasShipInfo) return "已出库";
    return "不足";
  };

  const formatProductStockStatus = v => {
    if (v == 1) return "部分入库";
    if (v == 2) return "已入库";
    if (v == 0) return "未出库";
    return "不足";
  };

  const approveStatusTagType = row => {
    const a = row.approveStatus;
    const noShipInfo = !row.shippingDate || !row.shippingCarNumber;
    const hasShipInfo = !!(row.shippingDate || row.shippingCarNumber);
    if ((a === 1 || a === "1") && noShipInfo) return "success";
    if ((a === 0 || a === "0") && hasShipInfo) return "success";
    return "error";
  };

  const productStockStatusTagType = v => {
    if (v == 1) return "warning";
    if (v == 2) return "success";
    if (v == 0) return "info";
    return "error";
  };

  const formatHeavyBox = v => {
    if (v === 1 || v === true || v === "1") return "是";
    if (v === 0 || v === false || v === "0") return "否";
    return emptyDash(v);
  };

  const shouldValidateStockStatus = computed(() => {
    return (
      contractKind.value === CONTRACT_KIND.sales &&
      type.value === QUALITY_TYPE.qualified
    );
  });

  const isFullyStocked = item => {
    if (!shouldValidateStockStatus.value) return false;
    const s = item?.productStockStatus;
    return s == 2 || s === "2";
  };

  const onStockedQtyBlur = item => {
    if (isFullyStocked(item)) return;
    const raw = item.operateQuantity;
    if (raw === null || raw === undefined || String(raw).trim() === "") {
      item.operateQuantity = "0";
      return;
    }
    const n = Number(String(raw).trim());
    if (Number.isNaN(n)) {
      item.operateQuantity =
        type.value === QUALITY_TYPE.unqualified ? "0" : defaultStockedQuantityFromRow(item, "inbound");
      return;
    }
    item.operateQuantity = String(Math.max(0, n));
  };

  const hasEditableInboundItems = computed(() => {
    if (!recordList.value?.length) return false;
    return recordList.value.some(item => !isFullyStocked(item));
  });

  const formatCell = (item, row, idx) => {
    if (row.key === "index") {
      const v = item.index;
      if (v !== null && v !== undefined && v !== "") return String(v);
      return String(idx + 1);
    }
    if (row.key === "approveStatus") return formatApproveStatus(item);
    if (row.key === "productStockStatus")
      return formatProductStockStatus(item.productStockStatus);
    if (row.key === "heavyBox") return formatHeavyBox(item.heavyBox);
    if (row.key === "remainingQuantity") {
      const v = item.remainingQuantity;
      return emptyDash(v);
    }
    if (row.key === "remainingShippedQuantity") {
      const v = item.remainingShippedQuantity;
      return emptyDash(v);
    }
    if (row.key === "shippedQuantity") {
      const v = item.shippedQuantity;
      return emptyDash(v);
    }
    if (row.key === "unqualifiedShippedQuantity") {
      const v =
        item.unqualifiedShippedQuantity ??
        item.unQualifiedShippedQuantity ??
        item.unqualifiedShippedQty ??
        item.unqualifiedOutboundQuantity;
      return emptyDash(v);
    }
    if (row.key === "stockedQuantity") {
      const v = item.stockedQuantity;
      return emptyDash(v);
    }
    if (row.key === "unqualifiedStockedQuantity") {
      const v =
        item.unqualifiedStockedQuantity ??
        item.unQualifiedStockedQuantity ??
        item.unqualifiedStockedQty ??
        item.unqualifiedInboundQuantity;
      return emptyDash(v);
    }
    if (row.key === "availableQuality") {
      const v = item.availableQuality ?? item.availableQuantity;
      return emptyDash(v);
    }
    if (row.key === "returnQuality") {
      const v = item.returnQuality ?? item.returnQuantity;
      return emptyDash(v);
    }
    return emptyDash(item[row.key]);
  };

  const resetDetailView = () => {
    showForm.value = false;
    scanContractNo.value = "";
    contractKind.value = CONTRACT_KIND.sales;
    scanLedgerId.value = null;
    expandedByIndex.value = {};
    recordList.value = [];
    stockApproverNodes.value = [{ id: 1, userId: null, userName: "" }];
  };

  onMounted(() => {
    uni.$on("selectContact", handleSelectContact);
  });

  onUnmounted(() => {
    uni.$off("selectContact", handleSelectContact);
  });

  const addStockApproverNode = () => {
    stockApproverNodes.value.push({
      id: nextApproverNodeId++,
      userId: null,
      userName: "",
    });
  };

  const removeStockApproverNode = index => {
    if (stockApproverNodes.value.length <= 1) {
      modal.msgError("至少保留一个审批节点");
      return;
    }
    stockApproverNodes.value.splice(index, 1);
  };

  const removeApprover = stepIndex => {
    if (!stockApproverNodes.value[stepIndex]) return;
    stockApproverNodes.value[stepIndex].userId = null;
    stockApproverNodes.value[stepIndex].userName = "";
  };

  const openApproverPicker = index => {
    uni.setStorageSync("stepIndex", index);
    uni.navigateTo({
      url: "/pages/cooperativeOffice/collaborativeApproval/contactSelect?approveType=9",
    });
  };

  const handleSelectContact = data => {
    const { stepIndex, contact } = data || {};
    if (stepIndex === null || stepIndex === undefined) return;
    const idx = Number(stepIndex);
    if (Number.isNaN(idx) || !stockApproverNodes.value[idx]) return;
    stockApproverNodes.value[idx].userId = contact?.userId ?? null;
    stockApproverNodes.value[idx].userName = contact?.nickName || contact?.userName || "";
  };

  const validateApproverNodes = () => {
    const hasEmptyNode = stockApproverNodes.value.some(node => !node.userId);
    if (hasEmptyNode) {
      modal.msgError("请为每个审批节点选择审批人");
      return false;
    }
    return true;
  };

  const submitInbound = async () => {
    if (scanLedgerId.value == null || scanLedgerId.value === "") {
      modal.msgError("缺少订单信息，请重新扫码");
      return;
    }
    if (!hasEditableInboundItems.value) {
      modal.msgError("该产品已经全部入库");
      return;
    }
    const salesLedgerProductList = buildSalesLedgerProductList(recordList.value);
    if (!hasAnyPositiveStockedQty(salesLedgerProductList)) {
      modal.msgError("请至少填写一行大于 0 的入库数量");
      return;
    }
    const sceneKey = resolveSubmitSceneKey(contractKind.value, type.value);
    const currentSubmitConfig = submitConfigByScene[sceneKey];
    if (!currentSubmitConfig) {
      modal.msgError("暂不支持当前入库场景");
      return;
    }
    const runApi = currentSubmitConfig.runApi;
    const approveUserIds = stockApproverNodes.value.map(node => node.userId).join(",");
    const payload = currentSubmitConfig.payloadBuilder(
      salesLedgerProductList,
      approveUserIds
    );
    try {
      submitLoading.value = true;
      modal.loading("提交中...");
      const res = await runApi(payload);
      modal.closeLoading();
      if (res.code === 200) {
        modal.msgSuccess("入库成功");
        resetDetailView();
      } else {
        modal.msgError(res.msg || "提交失败");
      }
    } catch (e) {
      modal.closeLoading();
      console.error("扫码入库提交失败", e);
    } finally {
      submitLoading.value = false;
    }
  };

  const confirmInbound = () => {
    if (!validateApproverNodes()) return;
    submitInbound();
  };

  const goBack = () => {
    if (showForm.value) {
      showForm.value = false;
      resetDetailView();
    } else {
      uni.navigateBack();
    }
  };

  const cancelForm = () => {
    showForm.value = false;
    resetDetailView();
  };

  const startScan = scanType => {
@@ -151,7 +494,7 @@
      success: res => {
        handleScanResult(res.result);
      },
      fail: err => {
      fail: () => {
        modal.msgError("扫码失败");
      },
    });
@@ -159,52 +502,49 @@

  const handleScanResult = async result => {
    try {
      // 解析二维码数据
      const scanData = JSON.parse(result);
      if (!scanData.id) {
        modal.msgError("无效的二维码数据");
        return;
      }

      // 直接从二维码信息中获取产品详情
      form.value.productId = scanData.productId; // 如果二维码中有 productId
      form.value.productName = scanData.productName;
      form.value.productModelId = scanData.id; // 二维码中的 id 是产品型号 ID
      form.value.productModelName = scanData.model;
      form.value.unit = scanData.unit;
      form.value.qualitity = 1;
      form.value.warnNum = 0;
      form.value.remark = "";

      showForm.value = true;
    } catch (error) {
      console.error("解析二维码失败", error);
      modal.msgError("解析二维码失败，请确保扫码内容正确");
    }
  };

  const handleSubmit = async () => {
    try {
      const valid = await formRef.value.validate();
      if (!valid) return;

      loading.value = true;
      const apiCall =
        type.value === "qualified"
          ? createStockInventory
          : createStockUnInventory;

      const res = await apiCall(form.value);
      if (res.code === 200) {
        modal.msgSuccess("入库成功");
        setTimeout(() => {
          showForm.value = false;
        }, 1500);
      const kind = resolveQrContractKind(scanData);
      contractKind.value = kind;
      scanLedgerId.value = scanData.id;
      scanContractNo.value = resolveContractNo(scanData, kind);
      const listType = resolveListTypeForDetail(kind);
      modal.loading("获取产品库存详情...");
      const res = await salesProductList({
        salesLedgerId: scanData.id,
        type: listType,
      });
      modal.closeLoading();
      if (res.code === 200 && res.data && res.data.length > 0) {
        recordList.value = res.data.map(row => ({
          ...row,
          unqualifiedShippedQuantity:
            row.unqualifiedShippedQuantity ??
            row.unQualifiedShippedQuantity ??
            row.unqualifiedShippedQty ??
            row.unqualifiedOutboundQuantity,
          unqualifiedStockedQuantity:
            row.unqualifiedStockedQuantity ??
            row.unQualifiedStockedQuantity ??
            row.unqualifiedStockedQty ??
            row.unqualifiedInboundQuantity,
          operateQuantity:
            type.value === QUALITY_TYPE.unqualified ? "0" : defaultStockedQuantityFromRow(row, "inbound"),
        }));
        expandedByIndex.value = {};
        showForm.value = true;
      } else {
        scanLedgerId.value = null;
        modal.msgError("未查询到明细数据");
      }
    } catch (error) {
      console.error("提交失败", error);
    } finally {
      loading.value = false;
      modal.closeLoading();
      scanLedgerId.value = null;
      console.error("处理扫码结果失败", error);
      modal.msgError("扫码处理失败，请重试");
    }
  };
</script>
@@ -277,31 +617,261 @@
    color: #999;
  }

  .form-content {
  .detail-scroll {
    max-height: calc(100vh - 120rpx);
    box-sizing: border-box;
  }

  .detail-card {
    background-color: #fff;
    margin: 20rpx;
    padding: 30rpx;
    padding: 28rpx;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  }

  .detail-card-title {
    font-size: 30rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid #eee;
  }

  .detail-card-title--collapsible {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .detail-card-title--collapsible.is-collapsed {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }

  .detail-card-title-text {
    flex: 1;
    min-width: 0;
    margin-right: 16rpx;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
  }

  .detail-card-title-no {
    word-break: break-all;
    line-height: 1.4;
  }

  .detail-card-title-seq {
    flex-shrink: 0;
    font-size: 26rpx;
    font-weight: 500;
    color: #888;
    margin-left: 8rpx;
  }

  .detail-card-body {
    padding-top: 4rpx;
  }

  .detail-card-summary {
    padding-top: 8rpx;
  }

  .kv-row--summary {
    padding: 12rpx 0;
    font-size: 26rpx;
  }

  .summary-tip {
    display: block;
    font-size: 24rpx;
    color: #999;
    text-align: center;
    padding: 20rpx 0 8rpx;
  }

  .kv-row {
    display: flex;
    align-items: flex-start;
    padding: 16rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    font-size: 28rpx;
  }

  .kv-label {
    flex-shrink: 0;
    width: 220rpx;
    color: #888;
    line-height: 1.5;
  }

  .kv-value {
    flex: 1;
    color: #1a1a1a;
    line-height: 1.5;
    word-break: break-all;
    text-align: right;
  }

  .kv-value--tag {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .stocked-qty-block {
    margin-top: 8rpx;
    padding-top: 8rpx;
    border-top: 1rpx solid #f0f0f0;
  }

  .stocked-qty-row {
    border-bottom: none;
    align-items: center;
  }

  .stocked-qty-input-wrap {
    min-width: 0;
  }

  .footer-btns {
    margin-top: 60rpx;
    display: flex;
    justify-content: space-between;
    padding-bottom: 40rpx;
    align-items: center;
    gap: 24rpx;
    padding: 20rpx 40rpx 60rpx;
  }

  .cancel-btn {
    width: 30%;
  .footer-cancel-btn {
    flex: 1;
    background-color: #f5f5f5;
    color: #666;
    border: none;
  }

  .save-btn {
    width: 65%;
  .footer-confirm-btn {
    flex: 1;
    background: linear-gradient(140deg, #00baff 0%, #006cfb 100%);
    color: #fff;
    border: none;
  }

  .approval-process {
    background: #fff;
    margin: 20rpx;
    border-radius: 16rpx;
    padding: 24rpx;
  }

  .approval-header {
    margin-bottom: 16rpx;
  }

  .approval-title {
    font-size: 30rpx;
    font-weight: 600;
    color: #333;
    display: block;
  }

  .approval-desc {
    font-size: 24rpx;
    color: #999;
    margin-top: 6rpx;
  }

  .approval-step {
    margin-bottom: 18rpx;
  }

  .step-title text {
    font-size: 24rpx;
    color: #666;
  }

  .approver-container {
    display: flex;
    align-items: center;
    margin-top: 10rpx;
  }

  .approver-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12rpx;
    padding: 12rpx 0;
  }

  .approver-avatar {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    background: #f3f4f6;
    border: 2rpx solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .avatar-text {
    font-size: 24rpx;
    color: #374151;
    font-weight: 600;
  }

  .approver-info {
    flex: 1;
  }

  .approver-name {
    font-size: 28rpx;
    color: #333;
  }

  .delete-approver-btn {
    font-size: 32rpx;
    color: #ff4d4f;
    padding: 0 8rpx;
  }

  .add-approver-btn {
    display: flex;
    align-items: center;
    gap: 10rpx;
    color: #3b82f6;
    padding: 10rpx 0;
  }

  .add-circle {
    width: 52rpx;
    height: 52rpx;
    border: 2rpx dashed #a0aec0;
    border-radius: 50%;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34rpx;
    line-height: 1;
  }

  .add-label {
    font-size: 26rpx;
  }

  .delete-step-btn {
    color: #ff4d4f;
    font-size: 24rpx;
    margin-top: 8rpx;
  }

  .add-step-btn {
    margin-top: 8rpx;
  }
</style>