BOM新增修改删除功能开发、以及BOM结构的可编辑

zhangwencui

2026-06-29 4c8d18cc5ed8a7b0e220c91a858d16d0310896df

 src/pages/procurementManagement/procurementLedger/detail.vue

@@ -15,29 +15,31 @@
                  placeholder="自动生成"
                  disabled />
      </up-form-item>
      <up-form-item label="销售合同号"
                    prop="salesContractNo"
                    required
                    @click="showPicker = true">
        <up-input v-model="form.salesContractNo"
                  readonly=""
                  @click="showPicker = true"
                  placeholder="点击选择销售合同号" />
      <up-form-item v-if="showSalesContractBinding"
                    label="销售合同号"
                    prop="salesLedgerId">
        <up-input v-model="salesContractNoText"
                  placeholder="点击选择销售合同号"
                  readonly
                  :disabled="isReadOnly"
                  @click="!isReadOnly && openSalesContractPicker()" />
        <template #right>
          <up-icon name="arrow-right"
                   @click="showPicker = true"></up-icon>
                   v-if="!isReadOnly"
                   @click="openSalesContractPicker()"></up-icon>
        </template>
      </up-form-item>
      <up-form-item label="供应商名称"
                    prop="supplierName"
                    required
                    @click="showCustomerPicker = true">
                    required>
        <up-input v-model="form.supplierName"
                  readonly=""
                  @click="showCustomerPicker = true"
                  readonly
                  :disabled="isReadOnly"
                  @click="!isReadOnly && (showCustomerPicker = true)"
                  placeholder="点击选择供应商" />
        <template #right>
          <up-icon name="arrow-right"
                   v-if="!isReadOnly"
                   @click="showCustomerPicker = true"></up-icon>
        </template>
      </up-form-item>
@@ -45,11 +47,13 @@
                    prop="projectName"
                    required>
        <up-input v-model="form.projectName"
                  :disabled="isReadOnly"
                  placeholder="请输入项目名称" />
      </up-form-item>
      <up-form-item label="付款方式"
                    prop="paymentMethod">
        <up-input v-model="form.paymentMethod"
                  :disabled="isReadOnly"
                  placeholder="请输入付款方式" />
      </up-form-item>
      <up-form-item label="签订日期"
@@ -57,9 +61,11 @@
                    prop="executionDate">
        <up-input v-model="form.executionDate"
                  placeholder="请选择"
                  readonly="" />
                  readonly
                  :disabled="isReadOnly" />
        <template #right>
          <up-icon name="arrow-right"
                   v-if="!isReadOnly"
                   @click="showTimePicker = true"></up-icon>
        </template>
      </up-form-item>
@@ -75,54 +81,19 @@
                  placeholder="请输入"
                  disabled />
      </up-form-item>
      <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 approverNodes"
                :key="stepIndex"
                class="approval-step">
            <view class="step-dot"></view>
            <view class="step-title">
              <text>审批人</text>
            </view>
            <view class="approver-container">
              <view v-if="step.nickName"
                    class="approver-item">
                <view class="approver-avatar">
                  <text class="avatar-text">{{ step.nickName.charAt(0) }}</text>
                  <view class="status-dot"></view>
                </view>
                <view class="approver-info">
                  <text class="approver-name">{{ step.nickName }}</text>
                </view>
                <view class="delete-approver-btn"
                      @click="removeApprover(stepIndex)">×</view>
              </view>
              <view v-else
                    class="add-approver-btn"
                    @click="addApprover(stepIndex)">
                <view class="add-circle">+</view>
                <text class="add-label">选择审批人</text>
              </view>
            </view>
            <view class="step-line"
                  v-if="stepIndex < approverNodes.length - 1"></view>
            <view class="delete-step-btn"
                  v-if="approverNodes.length > 1"
                  @click="removeApprovalStep(stepIndex)">删除节点</view>
          </view>
        </view>
        <view class="add-step-btn">
          <u-button icon="plus"
                    plain
                    type="primary"
                    style="width: 100%"
                    @click="addApprovalStep">新增节点</u-button>
        </view>
      </view>
      <up-form-item label="入库状态"
                    prop="stockInStatus">
        <up-input v-model="form.stockInStatus"
                  placeholder="--"
                  disabled />
      </up-form-item>
      <up-form-item label="备注"
                    prop="remarks">
        <up-textarea v-model="form.remarks"
                     placeholder="请输入备注"
                     auto-height
                     :disabled="isReadOnly" />
      </up-form-item>
      <up-popup :show="showTimePicker"
                mode="bottom"
                @close="showTimePicker = false">
@@ -132,18 +103,24 @@
                            @cancel="showTimePicker = false"
                            mode="date" />
      </up-popup>
      <!-- 销售合同号选择 -->
      <up-action-sheet :show="showPicker"
                       :actions="salesContractActionList"
                       title="选择销售合同号"
                       @select="onSalesmanSelect"
                       @close="showPicker = false" />
      <!-- 供应商选择 -->
      <up-action-sheet :show="showCustomerPicker"
                       :actions="supplierActionList"
                       title="选择供应商"
                       @select="onCustomerSelect"
                       @close="showCustomerPicker = false" />
      <!-- 模板选择 -->
      <up-action-sheet :show="showTemplatePicker"
                       :actions="templateActionList"
                       title="选择模板"
                       @select="onTemplateSelect"
                       @close="showTemplatePicker = false" />
      <!-- 销售合同号选择 -->
      <up-action-sheet :show="showSalesContractPicker"
                       :actions="salesContractActionList"
                       title="选择销售合同号"
                       @select="onSalesContractSelect"
                       @close="showSalesContractPicker = false" />
      <!-- 产品大类选择器 -->
      <up-popup :show="showCategoryPicker"
                mode="bottom">
@@ -208,7 +185,7 @@
            </view>
            <!-- 操作按钮 -->
            <view class="product-actions"
                  v-if="canEditProducts">
                  v-if="canEditProducts && canEditProductRow(product)">
              <up-button type="error"
                         size="mini"
                         @click="removeProduct(idx)"
@@ -227,11 +204,11 @@
              <up-input v-model="product.productCategory"
                        readonly
                        placeholder="请选择"
                        :disabled="!canEditProducts"
                        :disabled="!canEditProductRow(product)"
                        @click="openCategoryPicker(idx)" />
              <template #right>
                <up-icon name="arrow-right"
                         v-if="canEditProducts"
                         v-if="canEditProducts && canEditProductRow(product)"
                         @click="openCategoryPicker(idx)"></up-icon>
              </template>
            </up-form-item>
@@ -243,11 +220,11 @@
              <up-input v-model="product.specificationModel"
                        readonly
                        placeholder="请选择"
                        :disabled="!canEditProducts"
                        :disabled="!canEditProductRow(product)"
                        @click="openSpecificationPicker(idx)" />
              <template #right>
                <up-icon name="arrow-right"
                         v-if="canEditProducts"
                         v-if="canEditProducts && canEditProductRow(product)"
                         @click="openSpecificationPicker(idx)"></up-icon>
              </template>
            </up-form-item>
@@ -257,7 +234,7 @@
                          required
                          :rules="productRules">
              <up-input v-model="product.unit"
                        :disabled="!canEditProducts"
                        :disabled="!canEditProductRow(product)"
                        placeholder="请输入" />
            </up-form-item>
            <!-- 税率 -->
@@ -268,11 +245,11 @@
              <up-input v-model="product.taxRate"
                        readonly
                        placeholder="请选择"
                        :disabled="!canEditProducts"
                        :disabled="!canEditProductRow(product)"
                        @click="openTaxRatePicker(idx)" />
              <template #right>
                <up-icon name="arrow-right"
                         v-if="canEditProducts"
                         v-if="canEditProducts && canEditProductRow(product)"
                         @click="openTaxRatePicker(idx)"></up-icon>
              </template>
            </up-form-item>
@@ -283,7 +260,7 @@
                          :rules="productRules">
              <up-input v-model="product.taxInclusiveUnitPrice"
                        type="number"
                        :disabled="!canEditProducts"
                        :disabled="!canEditProductRow(product)"
                        placeholder="请输入"
                        @blur="formatTaxPrice(idx)" />
            </up-form-item>
@@ -294,7 +271,7 @@
                          :rules="productRules">
              <up-input v-model="product.quantity"
                        type="number"
                        :disabled="!canEditProducts"
                        :disabled="!canEditProductRow(product)"
                        placeholder="请输入"
                        @blur="formatAmount(idx)" />
            </up-form-item>
@@ -305,7 +282,7 @@
                          :rules="productRules">
              <up-input v-model="product.taxInclusiveTotalPrice"
                        type="number"
                        :disabled="!canEditProducts"
                        :disabled="!canEditProductRow(product)"
                        placeholder="请输入"
                        @blur="formatTaxTotal(idx)" />
            </up-form-item>
@@ -316,9 +293,15 @@
                          :rules="productRules">
              <up-input v-model="product.taxExclusiveTotalPrice"
                        type="number"
                        :disabled="!canEditProducts"
                        :disabled="!canEditProductRow(product)"
                        placeholder="请输入"
                        @blur="formatNoTaxTotal(idx)" />
            </up-form-item>
            <up-form-item label="入库审核状态"
                          prop="stockInApprovalStatus">
              <up-input v-model="product.stockInApprovalStatus"
                        placeholder="--"
                        disabled />
            </up-form-item>
            <!-- 发票类型 -->
            <up-form-item label="发票类型"
@@ -328,11 +311,11 @@
              <up-input v-model="product.invoiceType"
                        readonly
                        placeholder="请选择"
                        :disabled="!canEditProducts"
                        :disabled="!canEditProductRow(product)"
                        @click="openInvoiceTypePicker(idx)" />
              <template #right>
                <up-icon name="arrow-right"
                         v-if="canEditProducts"
                         v-if="canEditProducts && canEditProductRow(product)"
                         @click="openInvoiceTypePicker(idx)"></up-icon>
              </template>
            </up-form-item>
@@ -343,7 +326,7 @@
                          :rules="productRules">
              <up-input v-model="product.warnNum"
                        type="number"
                        :disabled="!canEditProducts"
                        :disabled="!canEditProductRow(product)"
                        placeholder="请输入" />
            </up-form-item>
            <up-form-item label="是否质检"
@@ -351,16 +334,16 @@
                          required
                          :rules="productRules">
              <u-radio-group v-model="product.isChecked"
                             :disabled="!canEditProducts"
                             :disabled="!canEditProductRow(product)"
                             placement="row"
                             @change="groupChange">
                <u-radio :customStyle="{marginRight: '40rpx'}"
                         label="是"
                         :disabled="!canEditProducts"
                         :disabled="!canEditProductRow(product)"
                         :name="true">
                </u-radio>
                <u-radio label="否"
                         :disabled="!canEditProducts"
                         :disabled="!canEditProductRow(product)"
                         :name="false">
                </u-radio>
              </u-radio-group>
@@ -369,6 +352,12 @@
        </view>
      </view>
      <!-- 使用公共底部按钮组件 -->
      <view v-if="operationType === 'add' && !isReadOnly"
            class="footer-template-tool"
            @click="openTemplatePicker()">
        <text class="footer-template-tool__label">模板</text>
        <text class="footer-template-tool__value">{{ templateName || '选择' }}</text>
      </view>
      <FooterButtons :show="operationType !== 'view' && !isApprovalPassed"
                     cancelText="取消"
                     confirmText="保存"
@@ -389,8 +378,10 @@
    createPurchaseNo,
    getOptions,
    getPurchaseById,
    getSalesNo,
    approveProcessGetInfo,
    getPurchaseTemplateList,
    getProductInfoByContractNo,
    getSalesNo,
  } from "@/api/procurementManagement/procurementLedger";
  import { delProduct } from "@/api/salesManagement/salesLedger";
  import PageHeader from "@/components/PageHeader.vue";
@@ -400,20 +391,38 @@
  const operationType = ref("");
  const editData = ref(null);
  const formRef = ref(null);
  // 审批通过（approvalStatus === 3）后，禁止编辑/删除产品
  const showSalesContractBinding = false;

  // 审批通过（approvalStatus === 3）后，整单禁止编辑（含产品、基本信息、审批流程）
  const isApprovalPassed = computed(() => {
    const status = editData.value?.approvalStatus ?? form.value?.approvalStatus;
    return Number(status) === 3;
  });
  const isStockInFully = computed(() => {
    const status = editData.value?.stockInStatus ?? form.value?.stockInStatus;
    return status === "完全入库";
  });
  const canEditProducts = computed(() => {
    return operationType.value !== "view" && !isApprovalPassed.value;
    return (
      operationType.value !== "view" &&
      !isApprovalPassed.value &&
      !isStockInFully.value
    );
  });
  // 是否整体只读：查看模式 或 已审批通过
  const isReadOnly = computed(() => {
    return (
      operationType.value === "view" ||
      isApprovalPassed.value ||
      isStockInFully.value
    );
  });

  const userStore = useUserStore();
  const form = ref({
    id: "",
    salesContractNo: "",
    purchaseContractNumber: "",
    salesLedgerId: "",
    supplierId: "",
    supplierName: "",
    projectName: "",
@@ -423,21 +432,20 @@
    entryDate: "",
    approveUserIds: "",
    executionDate: "",
    stockInStatus: "",
    remarks: "",
  });
  const showTimePicker = ref(false);
  const showPicker = ref(false);
  const showCustomerPicker = ref(false);
  const salesContractList = ref([]);
  const supplierList = ref([]);
  const productData = ref([]);
  const currentDate = ref(Date.now());
  // 计算销售合同号选择列表
  const salesContractActionList = computed(() => {
    return salesContractList.value.map(item => ({
      name: item.text,
      value: item.value,
    }));
  });
  const templateList = ref([]);
  const templateName = ref("");
  const showTemplatePicker = ref(false);
  const salesContractList = ref([]);
  const showSalesContractPicker = ref(false);
  const salesContractNoText = ref("");

  // 计算供应商选择列表（只保留 isWhite === 0 的供应商）
  const supplierActionList = computed(() => {
@@ -447,6 +455,20 @@
        name: item.text,
        value: item.value,
      }));
  });

  const templateActionList = computed(() => {
    return templateList.value.map(item => ({
      name: item.templateName,
      value: item.templateName,
    }));
  });

  const salesContractActionList = computed(() => {
    return salesContractList.value.map(item => ({
      name: item.salesContractNo,
      value: item.id,
    }));
  });

  // 选择器相关变量
@@ -504,9 +526,6 @@

  // 表单校验规则
  const rules = {
    salesContractNo: [
      { required: true, message: "请选择销售合同号", trigger: "blur" },
    ],
    supplierName: [
      { required: true, message: "请选择供应商名称", trigger: "blur" },
    ],
@@ -571,22 +590,17 @@
      taxInclusiveTotalPrice: "",
      taxExclusiveTotalPrice: "",
      invoiceType: "",
      stockInApprovalStatus: "",
      availableQuality: "",
      returnQuality: "",
      isChecked: false,
      warnNum: "",
    });
  };

  // 销售合同号选择事件
  const onSalesmanSelect = item => {
    form.value.salesContractNo = item.name;
    // 查找对应的id
    const selectedItem = salesContractList.value.find(
      contract => contract.text === item.name
    );
    if (selectedItem) {
      form.value.salesLedgerId = selectedItem.value;
    }
    showPicker.value = false;
  const canEditProductRow = product => {
    if (!canEditProducts.value) return false;
    return product?.stockInApprovalStatus !== "完全入库";
  };

  // 供应商选择事件
@@ -605,6 +619,7 @@
  const removeProduct = idx => {
    if (!canEditProducts.value) return;
    const row = productData.value[idx];
    if (!canEditProductRow(row)) return;

    // 新增模式或还未落库的产品，直接前端删除
    if (operationType.value === "add" || !row?.id) {
@@ -648,26 +663,113 @@
  // 显示选择器
  const openCategoryPicker = idx => {
    if (!canEditProducts.value) return;
    if (!canEditProductRow(productData.value[idx])) return;
    currentProductIndex.value = idx;
    showCategoryPicker.value = true;
  };

  const openSpecificationPicker = idx => {
    if (!canEditProducts.value) return;
    if (!canEditProductRow(productData.value[idx])) return;
    currentProductIndex.value = idx;
    showSpecificationPicker.value = true;
  };

  const openTaxRatePicker = idx => {
    if (!canEditProducts.value) return;
    if (!canEditProductRow(productData.value[idx])) return;
    currentProductIndex.value = idx;
    showTaxRatePicker.value = true;
  };

  const openInvoiceTypePicker = idx => {
    if (!canEditProducts.value) return;
    if (!canEditProductRow(productData.value[idx])) return;
    currentProductIndex.value = idx;
    showInvoiceTypePicker.value = true;
  };

  const normalizeProductRow = row => {
    const source = row || {};
    return {
      id: source.id,
      productCategory: source.productCategory || "",
      specificationModel: source.specificationModel || "",
      productModelId: source.productModelId || source.materialModelId || "",
      unit: source.unit || "",
      taxRate: source.taxRate ?? "",
      taxInclusiveUnitPrice: source.taxInclusiveUnitPrice ?? "",
      quantity: source.quantity ?? "",
      taxInclusiveTotalPrice: source.taxInclusiveTotalPrice ?? "",
      taxExclusiveTotalPrice: source.taxExclusiveTotalPrice ?? "",
      invoiceType: source.invoiceType || "",
      stockInApprovalStatus: source.stockInApprovalStatus || "",
      availableQuality: source.availableQuality ?? "",
      returnQuality: source.returnQuality ?? "",
      isChecked:
        typeof source.isChecked === "boolean"
          ? source.isChecked
          : Boolean(source.isChecked),
      warnNum: source.warnNum ?? "",
    };
  };

  const openTemplatePicker = async () => {
    if (isReadOnly.value) return;
    if (!templateList.value.length) {
      const res = await getPurchaseTemplateList();
      if (res && res.code === 200 && Array.isArray(res.data)) {
        templateList.value = res.data;
      }
    }
    showTemplatePicker.value = true;
  };

  const onTemplateSelect = item => {
    const selected = templateList.value.find(t => t.templateName === item.name);
    if (!selected) {
      showTemplatePicker.value = false;
      return;
    }
    templateName.value = selected.templateName || "";
    if (selected.supplierId) form.value.supplierId = selected.supplierId;
    if (selected.supplierName) form.value.supplierName = selected.supplierName;
    if (selected.projectName) form.value.projectName = selected.projectName;
    if (selected.paymentMethod) form.value.paymentMethod = selected.paymentMethod;
    const list =
      selected.productList ||
      selected.productData ||
      selected.purchaseLedgerProductList ||
      [];
    productData.value = Array.isArray(list) ? list.map(normalizeProductRow) : [];
    showTemplatePicker.value = false;
  };

  const openSalesContractPicker = async () => {
    if (isReadOnly.value) return;
    if (!salesContractList.value.length) {
      const res = await getSalesNo();
      if (res && res.code === 200 && Array.isArray(res.data)) {
        salesContractList.value = res.data;
      } else if (Array.isArray(res)) {
        salesContractList.value = res;
      }
    }
    showSalesContractPicker.value = true;
  };

  const onSalesContractSelect = async item => {
    form.value.salesLedgerId = item.value;
    salesContractNoText.value = item.name || "";
    showSalesContractPicker.value = false;
    const res = await getProductInfoByContractNo({
      contractNo: form.value.salesLedgerId,
    });
    if (res && res.code === 200 && Array.isArray(res.data)) {
      productData.value = res.data.map(normalizeProductRow);
    } else if (Array.isArray(res)) {
      productData.value = res.map(normalizeProductRow);
    }
  };

  // 选择器确认事件
@@ -891,6 +993,21 @@
  };

  const onSubmit = () => {
    // 审批通过的台账禁止再次修改
    if (isApprovalPassed.value) {
      uni.showToast({
        title: "已审批通过的台账不允许修改",
        icon: "none",
      });
      return;
    }
    if (isStockInFully.value) {
      uni.showToast({
        title: "完全入库的台账不允许修改",
        icon: "none",
      });
      return;
    }
    const hasEmptyApprover = approverNodes.value.some(node => !node.userId);
    if (hasEmptyApprover) {
      uni.showToast({
@@ -909,10 +1026,6 @@
        icon: "none",
      });
      return;
    }
    // 如果salesLedgerId为空，则不传递salesContractNo
    if (!form.value.salesLedgerId) {
      form.value.salesContractNo = "";
    }
    if (operationType.value == "add") {
      delete form.value.id;
@@ -950,9 +1063,17 @@
  const fillFormData = () => {
    if (!editData.value) return;
    getPurchaseById({ id: editData.value.id, type: 2 }).then(res => {
      productData.value = res.productData;
      if (res && res.approveUserIds) {
        const userIds = res.approveUserIds.split(",");
      const data = res?.data ? res.data : res || {};
      const products =
        data.purchaseLedgerProductList ||
        res?.productData ||
        data.productData ||
        [];
      productData.value = Array.isArray(products)
        ? products.map(normalizeProductRow)
        : [];
      if (data && data.approveUserIds) {
        const userIds = data.approveUserIds.split(",");
        approverNodes.value = userIds.map((userId, idx) => {
          const userIdNum = parseInt(userId.trim());
          // 从userList中找到对应的用户信息
@@ -975,27 +1096,24 @@
    // 填充基本信息
    form.value.purchaseContractNumber =
      editData.value.purchaseContractNumber || "";
    form.value.salesContractNo = editData.value.salesContractNo || "";
    form.value.supplierName = editData.value.supplierName || "";
    form.value.projectName = editData.value.projectName || "";
    form.value.paymentMethod = editData.value.paymentMethod || "";
    form.value.salesLedgerId = editData.value.salesLedgerId || "";
    form.value.recorderId = editData.value.recorderId || "";
    form.value.recorderName = editData.value.recorderName || "";
    form.value.entryDate = editData.value.entryDate || "";
    form.value.id = editData.value.id || "";
    form.value.supplierId = editData.value.supplierId || "";
    form.value.executionDate = editData.value.executionDate || "";
  };

  const getSalesNoList = () => {
    getSalesNo().then(res => {
      // 将用户数据组装成 picker 需要的格式
      salesContractList.value = res.map(user => ({
        text: user.salesContractNo,
        value: user.id,
      }));
    });
    form.value.stockInStatus = editData.value.stockInStatus || "";
    form.value.remarks = editData.value.remarks || "";
    form.value.salesLedgerId = editData.value.salesLedgerId || "";
    if (showSalesContractBinding && form.value.salesLedgerId) {
      const match = salesContractList.value.find(
        i => i.id === form.value.salesLedgerId
      );
      if (match) salesContractNoText.value = match.salesContractNo || "";
    }
  };

  const getOptionsLIst = () => {
@@ -1048,8 +1166,6 @@
    userListNoPageByTenantId().then(res => {
      userList.value = res.data;
    });
    // 获取销售合同号列表
    getSalesNoList();
    // 获取供应商列表
    getOptionsLIst();
    // 获取产品大类tree数据
@@ -1059,6 +1175,15 @@
      setUserInfo();
      createPurchaseNo().then(res => {
        form.value.purchaseContractNumber = res.data;
      });
    }
    if (showSalesContractBinding) {
      getSalesNo().then(res => {
        if (res && res.code === 200 && Array.isArray(res.data)) {
          salesContractList.value = res.data;
        } else if (Array.isArray(res)) {
          salesContractList.value = res;
        }
      });
    }

@@ -1096,6 +1221,7 @@
  };

  const addApprover = stepIndex => {
    if (isReadOnly.value) return;
    // 跳转到联系人选择页面
    uni.setStorageSync("stepIndex", stepIndex);
    uni.navigateTo({
@@ -1104,18 +1230,21 @@
  };

  const addApprovalStep = () => {
    if (isReadOnly.value) return;
    // 添加新的审批步骤
    approverNodes.value.push({ userId: null, nickName: null });
    console.log(approverNodes.value, "approverNodes.value");
  };

  const removeApprover = stepIndex => {
    if (isReadOnly.value) return;
    // 移除审批人
    approverNodes.value[stepIndex].userId = null;
    approverNodes.value[stepIndex].nickName = null;
  };

  const removeApprovalStep = stepIndex => {
    if (isReadOnly.value) return;
    // 确保至少保留一个审批步骤
    if (approverNodes.value.length > 1) {
      approverNodes.value.splice(stepIndex, 1);
@@ -1512,4 +1641,34 @@
    color: #3b82f6;
    font-size: 14px;
  }
</style>

  .footer-template-tool {
    position: fixed;
    right: 12px;
    bottom: 78px;
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  }

  .footer-template-tool__label {
    font-size: 12px;
    color: #6b7280;
  }

  .footer-template-tool__value {
    font-size: 12px;
    color: #006cfb;
    font-weight: 600;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>