君歌 1.部署修改

gaoluyang

2026-06-16 ffe58e0cf73fa61d8b05de09645c5d8d89007ce5

 src/views/productionManagement/workOrderManagement/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,707 @@
<template>
  <div class="app-container">
    <div class="search_form mb20">
      <div class="search-row">
        <div class="search-item">
          <span class="search_title">工单编号：</span>
          <el-input v-model="searchForm.workOrderNo"
                    style="width: 240px"
                    placeholder="请输入"
                    @change="handleQuery"
                    clearable
                    prefix-icon="Search" />
        </div>
        <div class="search-item">
          <span class="search_title">生产订单号：</span>
          <el-input v-model="searchForm.npsNo"
                    style="width: 240px"
                    placeholder="请输入"
                    @change="handleQuery"
                    clearable
                    prefix-icon="Search" />
        </div>
        <div class="search-item">
          <el-button type="primary"
                     @click="handleQuery">搜索</el-button>
        </div>
        <div class="search-item">
          <el-switch v-model="filterMine"
                     active-text="仅看我的"
                     @change="handleQuery" />
        </div>
      </div>
    </div>
    <div class="table_list">
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                :tableLoading="tableLoading"
                @pagination="pagination">
        <template #completionStatus="{ row }">
          <el-progress :percentage="toProgressPercentage(row?.completionStatus)"
                       :color="progressColor(toProgressPercentage(row?.completionStatus))"
                       :status="toProgressPercentage(row?.completionStatus) >= 100 ? 'success' : ''" />
        </template>
      </PIMTable>
    </div>
    <!-- æµè½¬å¡å¼¹çª— -->
    <el-dialog v-model="transferCardVisible"
               title="流转卡"
               width="1000px">
      <div class="transfer-card-title">工单流转卡</div>
      <div class="transfer-card-container">
        <div class="transfer-card-info">
          <div class="info-group">
            <div class="info-item">
              <span class="info-label">工单编号</span>
              <span class="info-value">{{ transferCardRowData.workOrderNo }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">产品名称</span>
              <span class="info-value">{{ transferCardRowData.productName }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">规格型号</span>
              <span class="info-value">{{ transferCardRowData.model }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">计划开始时间</span>
              <span class="info-value">{{ transferCardRowData.planStartTime }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">计划结束时间</span>
              <span class="info-value">{{ transferCardRowData.planEndTime }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">备注</span>
              <span class="info-value">{{ transferCardRowData.remark }}</span>
            </div>
          </div>
          <div class="info-group">
            <div class="info-item">
              <span class="info-label">需求数量</span>
              <span class="info-value">{{ transferCardRowData.planQuantity }}</span>
            </div>
            <div class="info-item">
              <span class="info-value">{{ transferCardRowData.completeQuantity }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">良品数量</span>
              <span class="info-value">0</span>
            </div>
            <div class="info-item">
              <span class="info-label">不良品数</span>
              <span class="info-value">0</span>
            </div>
            <div class="info-item">
              <span class="info-label">实际开始时间</span>
              <span class="info-value">{{ transferCardRowData.actualStartTime }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">实际结束时间</span>
              <span class="info-value">{{ transferCardRowData.actualEndTime }}</span>
            </div>
          </div>
        </div>
        <div class="transfer-card-qr">
          <div class="qr-container">
            <img :src="transferCardQrUrl"
                 alt="流转卡二维码"
                 style="width: 200px; height: 200px;" />
          </div>
        </div>
      </div>
      <div class="print-button-container"
           style=" text-align: center;
      margin-bottom: 40px;">
        <el-button type="primary"
                   style="margin-top: 20px;"
                   @click="printTransferCard">打印流转卡</el-button>
      </div>
    </el-dialog>
    <!-- æŠ¥å·¥å¼¹çª—（结束报工用） -->
    <el-dialog v-model="reportDialogVisible"
               title="结束报工"
               width="500px">
      <el-form ref="reportFormRef"
               :model="reportForm"
               :rules="reportFormRules"
               label-width="120px">
        <el-form-item label="待生产数量">
          <el-input v-model="reportForm.planQuantity"
                    readonly
                    style="width: 300px" />
        </el-form-item>
        <el-form-item label="生产合格数量"
                      prop="quantity">
          <el-input v-model.number="reportForm.quantity"
                    type="number"
                    min="0"
                    step="1"
                    style="width: 300px"
                    placeholder="请输入生产合格数量"
                    @input="handleQuantityInput" />
        </el-form-item>
        <el-form-item label="报废数量"
                      prop="scrapQty">
          <el-input v-model.number="reportForm.scrapQty"
                    type="number"
                    min="0"
                    step="1"
                    style="width: 300px"
                    placeholder="请输入报废数量"
                    @input="handleScrapQtyInput" />
        </el-form-item>
        <el-form-item label="班组信息">
          <el-select v-model="reportForm.userId"
                     style="width: 300px"
                     placeholder="请选择班组信息"
                     clearable
                     filterable
                     @change="handleUserChange">
            <el-option v-for="user in userOptions"
                       :key="user.userId"
                       :label="user.nickName"
                       :value="user.userId" />
          </el-select>
        </el-form-item>
        <el-form-item label="工时"
                      v-if="currentReportRowData?.type == 0"
                      prop="workHour">
          <el-input v-model.number="reportForm.workHour"
                    type="number"
                    min="0"
                    style="width: 280px"
                    placeholder="请输入工时" /><span style="margin-left:10px"
                class="param-unit">h</span>
        </el-form-item>
        <div v-if="params.length > 0"
             class="param-grid"
             v-loading="paramLoading">
          <el-form-item v-for="param in params"
                        :key="param.id"
                        :label="param.paramName"
                        :label-width="120"
                        class="param-item">
            <template v-if="param.paramType == '1'">
              <div class="param-input-group">
                <el-input-number v-model="reportForm.paramGroups[param.id]"
                                 controls-position="right"
                                 :key="param.id"
                                 style="width: 250px"
                                 class="param-input" />
                <span v-if="param.unit && param.unit != '/'"
                      class="param-unit">{{ param.unit }}</span>
              </div>
            </template>
            <template v-else-if="param.paramType == '2'">
              <div class="param-input-group">
                <el-input v-model="reportForm.paramGroups[param.id]"
                          :key="param.id"
                          style="width: 250px"
                          class="param-input" />
                <span v-if="param.unit && param.unit != '/'"
                      class="param-unit">{{ param.unit }}</span>
              </div>
            </template>
            <template v-else-if="param.paramType == '3'">
              <div class="param-input-group">
                <el-select v-model="reportForm.paramGroups[param.id]"
                           placeholder="请选择"
                           :key="param.id"
                           class="param-select"
                           style="width: 250px">
                  <el-option v-for="option in dictOptions[param.paramFormat] || []"
                             :key="option.dictLabel"
                             :label="option.dictLabel"
                             :value="option.dictLabel" />
                </el-select>
                <span v-if="param.unit && param.unit != '/'"
                      class="param-unit">{{ param.unit }}</span>
              </div>
            </template>
            <template v-else-if="param.paramType == '4'">
              <div class="param-input-group">
                <el-date-picker :value-format="param.paramFormat.replace('yyyy', 'YYYY').replace('dd', 'DD')"
                                :format="param.paramFormat.replace('yyyy', 'YYYY').replace('dd', 'DD')"
                                :key="param.id"
                                :type="param.paramFormat=='yyyy-MM-dd'?'date':'datetime'"
                                v-model="reportForm.paramGroups[param.id]"
                                class="param-input"
                                style="width: 250px" />
                <span v-if="param.unit && param.unit != '/'"
                      class="param-unit">{{ param.unit }}</span>
              </div>
            </template>
            <template v-else>
              <div class="param-input-group">
                <el-input v-model="reportForm.paramGroups[param.id]"
                          :key="param.id"
                          class="param-input" />
                <span v-if="param.unit && param.unit != '/'"
                      class="param-unit">{{ param.unit }}</span>
              </div>
            </template>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary"
                     @click="handleFinishWork">确定</el-button>
          <el-button @click="reportDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <MaterialDialog v-model="materialDialogVisible"
                    :row-data="currentMaterialOrderRow"
                    @refresh="getList" />
    <FileList v-if="fileDialogVisible"
              v-model:visible="fileDialogVisible"
              :editable="!currentWorkOrderRow?.endOrder"
              :record-type="'production_operation_task'"
              :record-id="currentWorkOrderId" />
  </div>
</template>

<script setup>
  import { onMounted, ref, nextTick } from "vue";
  import { ElMessageBox } from "element-plus";
  import dayjs from "dayjs";
  import {
    productWorkOrderPage,
    addProductMain,
    startWork,
    downProductWorkOrder,
  } from "@/api/productionManagement/workOrder.js";
  import { findProcessParamListOrder } from "@/api/productionManagement/productProcessRoute.js";
  import { getUserProfile, userListNoPageByTenantId } from "@/api/system/user.js";
  import { getDicts } from "@/api/system/dict/data";
  import QRCode from "qrcode";
  import { getCurrentInstance, reactive, toRefs } from "vue";
  import MaterialDialog from "./components/MaterialDialog.vue";
  const FileList = defineAsyncComponent(() =>
    import("@/components/Dialog/FileList.vue")
  );

  import useUserStore from "@/store/modules/user";
  const { proxy } = getCurrentInstance();
  const userStore = useUserStore();

  const isCompleted = row => {
    const status = Number(row?.completionStatus);
    return Number.isFinite(status) && status >= 100;
  };

  const canOperate = row => !row.endOrder && !isCompleted(row);

  const tableColumn = ref([
    { label: "工单类型", prop: "workOrderType", width: "80" },
    { label: "工单编号", prop: "workOrderNo", width: "140" },
    { label: "生产订单号", prop: "npsNo", width: "140" },
    { label: "产品名称", prop: "productName", width: "140" },
    { label: "规格", prop: "model" },
    { label: "单位", prop: "unit" },
    { label: "工序名称", prop: "operationName", width: "100" },
    { label: "需求数量", prop: "planQuantity", width: "140" },
    { label: "完成数量", prop: "completeQuantity", width: "140" },
    { label: "完成进度", prop: "completionStatus", dataType: "slot", slot: "completionStatus", width: "140" },
    { label: "计划开始时间", prop: "planStartTime", width: "140" },
    { label: "计划结束时间", prop: "planEndTime", width: "140" },
    { label: "实际开始时间", prop: "actualStartTime", width: "140" },
    { label: "实际结束时间", prop: "actualEndTime", width: "140" },
    {
      label: "操作", width: "260", align: "center", dataType: "action", fixed: "right",
      operation: [
        {
          name: "流转卡",
          clickFun: row => { downloadAndPrintWorkOrder(row); },
        },
        {
          name: "附件",
          clickFun: row => { openWorkOrderFiles(row); },
        },
        {
          name: "开始报工",
          showHide: row => canOperate(row) && !row.actualStartTime,
          disabled: row => {
            if (row.planQuantity <= 0) return true;
            if (!row.userIds) return false;
            try {
              const userIds = typeof row.userIds === "string" ? JSON.parse(row.userIds) : row.userIds;
              if (Array.isArray(userIds)) {
                return !userIds.some(id => String(id) === String(userStore.id));
              }
              return true;
            } catch (e) { return true; }
          },
          clickFun: row => { handleStartWork(row); },
        },
        {
          name: "结束报工",
          showHide: row => canOperate(row) && !!row.actualStartTime,
          clickFun: row => { showReportDialog(row); },
        },
      ],
    },
  ]);
  const tableData = ref([]);
  const tableLoading = ref(false);
  const transferCardVisible = ref(false);
  const transferCardRowData = ref(null);
  const reportDialogVisible = ref(false);
  const fileDialogVisible = ref(false);
  const currentWorkOrderId = ref(null);
  const reportFormRef = ref(null);
  const userOptions = ref([]);
  const reportForm = reactive({
    planQuantity: 0,
    quantity: null,
    scrapQty: null,
    userName: "",
    workOrderId: "",
    reportWork: "",
    productProcessRouteItemId: "",
    userId: "",
    productMainId: null,
    productionOrderRoutingOperationId: "",
    productionOrderId: "",
    workHour: 0,
    paramGroups: {},
  });

  const params = ref({});
  const dictOptions = ref({});
  const paramLoading = ref(false);

  const validateQuantity = (rule, value, callback) => {
    if (value === null || value === undefined || value === "") {
      callback(new Error("请输入生产合格数量"));
      return;
    }
    const num = Number(value);
    if (isNaN(num) || !Number.isInteger(num) || num < 0) {
      callback(new Error("生产合格数量必须大于等于0"));
      return;
    }
    callback();
  };
  const validateScrapQty = (rule, value, callback) => {
    if (value === null || value === undefined || value === "") {
      callback();
      return;
    }
    const num = Number(value);
    if (isNaN(num) || !Number.isInteger(num) || num < 0) {
      callback(new Error("报废数量必须大于等于0"));
      return;
    }
    callback();
  };
  const reportFormRules = {
    quantity: [{ required: true, validator: validateQuantity, trigger: "blur" }],
    scrapQty: [{ validator: validateScrapQty, trigger: "blur" }],
  };

  const handleQuantityInput = value => {
    if (value === "" || value === null || value === undefined) { reportForm.quantity = null; return; }
    const num = Number(value);
    if (isNaN(num)) return;
    if (num < 0) { reportForm.quantity = null; return; }
    if (!Number.isInteger(num)) {
      const intValue = Math.floor(num);
      if (intValue < 0) { reportForm.quantity = null; return; }
      reportForm.quantity = intValue;
      return;
    }
    reportForm.quantity = num;
  };

  const handleScrapQtyInput = value => {
    if (value === "" || value === null || value === undefined) { reportForm.scrapQty = null; return; }
    const num = Number(value);
    if (isNaN(num)) return;
    if (num < 0) { reportForm.scrapQty = null; return; }
    if (!Number.isInteger(num)) { reportForm.scrapQty = Math.floor(num); return; }
    reportForm.scrapQty = num;
  };

  const filterMine = ref(false);
  const currentReportRowData = ref(null);
  const materialDialogVisible = ref(false);
  const currentMaterialOrderRow = ref(null);
  const page = reactive({ current: 1, size: 100, total: 0 });

  const data = reactive({
    searchForm: { workOrderNo: "", npsNo: "" },
  });
  const { searchForm } = toRefs(data);

  const toProgressPercentage = val => {
    const n = Number(val);
    if (!Number.isFinite(n)) return 0;
    if (n <= 0) return 0;
    if (n >= 100) return 100;
    return parseFloat(n.toFixed(2));
  };
  const progressColor = percentage => {
    const p = toProgressPercentage(percentage);
    if (p < 30) return "#f56c6c";
    if (p < 50) return "#e6a23c";
    if (p < 80) return "#409eff";
    return "#67c23a";
  };

  const handleQuery = () => { page.current = 1; getList(); };
  const pagination = obj => { page.current = obj.page; page.size = obj.limit; getList(); };

  const getList = () => {
    tableLoading.value = true;
    const params = { ...searchForm.value, ...page };
    if (filterMine.value) { params.filterMine = true; }
    productWorkOrderPage(params)
      .then(res => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        page.total = res.data.total;
      })
      .catch(() => { tableLoading.value = false; });
  };

  const downloadAndPrintWorkOrder = async row => {
    if (!row || !row.id) {
      proxy.$modal.msgError("缺少工单ID，无法下载流转卡");
      return;
    }
    try {
      const blob = await downProductWorkOrder(row.id);
      if (!blob) { proxy.$modal.msgError("未获取到流转卡文件"); return; }
      const fileBlob = blob instanceof Blob ? blob : new Blob([blob], { type: blob.type || "application/octet-stream" });
      const url = window.URL.createObjectURL(fileBlob);
      const iframe = document.createElement("iframe");
      iframe.style.position = "fixed";
      iframe.style.right = "0"; iframe.style.bottom = "0";
      iframe.style.width = "0"; iframe.style.height = "0"; iframe.style.border = "0";
      iframe.src = url;
      document.body.appendChild(iframe);
      iframe.onload = () => {
        try { iframe.contentWindow?.focus(); iframe.contentWindow?.print(); }
        catch (e) { window.open(url); }
      };
    } catch (e) {
      console.error("下载工单流转卡失败", e);
      proxy.$modal.msgError("下载工单流转卡失败");
    }
  };

  const printTransferCard = () => { window.print(); };
  const currentWorkOrderRow = ref(null);

  const openWorkOrderFiles = row => {
    currentWorkOrderId.value = row.id;
    currentWorkOrderRow.value = row;
    fileDialogVisible.value = true;
  };

  const handleStartWork = row => {
    proxy.$modal
      .confirm("确认开始报工？", "提示", { type: "info" })
      .then(async () => {
        try {
          await startWork({
            productionOperationTaskId: row.id,
            userId: userStore.id,
          });
          proxy.$modal.msgSuccess("开始报工成功");
          getList();
        } catch (e) {
          proxy.$modal.msgError("开始报工失败");
        }
      })
      .catch(() => {});
  };

  const showReportDialog = async row => {
    currentReportRowData.value = row;
    const planQuantity = Number(row.planQuantity || 0);
    const completeQuantity = Number(row.completeQuantity || 0);
    const remainingQuantity = Math.max(0, planQuantity - completeQuantity);
    reportForm.planQuantity = remainingQuantity;
    reportForm.quantity = row.quantity !== undefined && row.quantity !== null ? row.quantity : null;
    reportForm.productProcessRouteItemId = row.productProcessRouteItemId;
    reportForm.workOrderId = row.id;
    reportForm.reportWork = row.reportWork;
    reportForm.productMainId = row.productMainId;
    reportForm.scrapQty = row.scrapQty !== undefined && row.scrapQty !== null ? row.scrapQty : null;
    reportForm.productionOrderRoutingOperationId = row.productionOrderRoutingOperationId;
    reportForm.productionOrderId = row.productionOrderId;
    reportForm.workHour = row.type == 0 ? (row.workHour || 0) : 0;
    nextTick(() => {
      reportFormRef.value?.clearValidate();
      if (row.productionOrderRoutingOperationId && row.productionOrderId) {
        loadParams(row.productionOrderRoutingOperationId, row.productionOrderId);
      }
    });
    if (userStore.id) {
      reportForm.userId = userStore.id;
      reportForm.userName = userStore.name || userStore.nickName || "";
    }
    getUserProfile()
      .then(res => {
        if (res.code === 200 && res.data) {
          reportForm.userId = res.data.userId;
          reportForm.userName = res.data.nickName || res.data.userName || "";
        }
      })
      .catch(err => { console.error("获取用户信息失败", err); });

    reportDialogVisible.value = true;
  };

  const openMaterialDialog = row => {
    currentMaterialOrderRow.value = row;
    materialDialogVisible.value = true;
  };

  const handleFinishWork = () => {
    reportFormRef.value?.validate(valid => {
      if (!valid) return;

      if (reportForm.planQuantity <= 0) {
        ElMessageBox.alert("待生产数量为0，无法报工", "提示", { confirmButtonText: "确定" });
        return;
      }
      if (reportForm.quantity === null || reportForm.quantity === undefined || reportForm.quantity === "") {
        ElMessageBox.alert("请输入生产合格数量", "提示", { confirmButtonText: "确定" });
        return;
      }
      const quantity = Number(reportForm.quantity);
      if (isNaN(quantity) || quantity < 0) {
        ElMessageBox.alert("生产合格数量必须大于等于0", "提示", { confirmButtonText: "确定" });
        return;
      }
      const scrapQty = Number(reportForm.scrapQty);
      if (!isNaN(scrapQty) && scrapQty < 0) {
        ElMessageBox.alert("报废数量不能小于0", "提示", { confirmButtonText: "确定" });
        return;
      }

      const productionOperationParamList = params.value.map(param => ({
        ...param,
        inputValue: reportForm.paramGroups[param.id] ?? "",
      }));

      addProductMain({
        quantity,
        scrapQty: isNaN(scrapQty) ? 0 : scrapQty,
        userId: reportForm.userId,
        userName: reportForm.userName,
        productionOperationTaskId: reportForm.workOrderId,
        productProcessRouteItemId: reportForm.productProcessRouteItemId,
        reportWork: reportForm.reportWork,
        productMainId: reportForm.productMainId,
        productionOrderRoutingOperationId: reportForm.productionOrderRoutingOperationId,
        productionOrderId: reportForm.productionOrderId,
        workHour: reportForm.workHour,
        productionOperationParamList: productionOperationParamList,
      })
        .then(() => {
          proxy.$modal.msgSuccess("结束报工成功");
          reportDialogVisible.value = false;
          getList();
        })
        .catch(() => {
          ElMessageBox.alert("结束报工失败", "提示", { confirmButtonText: "确定" });
        });
    });
  };

  const handleUserChange = val => {
    const user = userOptions.value.find(item => item.userId === val);
    reportForm.userName = user ? user.nickName : "";
  };

  const getDictOptions = async dictType => {
    if (!dictType) return [];
    if (dictOptions.value[dictType]) return dictOptions.value[dictType];
    try {
      const res = await getDicts(dictType);
      if (res.code === 200) { dictOptions.value[dictType] = res.data; return res.data; }
      return [];
    } catch (error) { console.error("获取字典数据失败:", error); return []; }
  };

  const loadParams = (productionOrderRoutingOperationId, productionOrderId) => {
    paramLoading.value = true;
    findProcessParamListOrder({ productionOrderRoutingOperationId, productionOrderId })
      .then(res => {
        if (res.code === 200) {
          const paramList = res.data || [];
          params.value = paramList;
          reportForm.paramGroups = {};
          paramList.forEach(param => {
            if (!reportForm.paramGroups[param.id]) { reportForm.paramGroups[param.id] = ""; }
            if (param.paramType == "3" && param.paramFormat) { getDictOptions(param.paramFormat); }
          });
        }
      })
      .catch(err => { console.error("获取工序参数失败:", err); })
      .finally(() => { paramLoading.value = false; });
  };

  onMounted(() => {
    userStore.getInfo();
    getList();
    userListNoPageByTenantId().then(res => {
      if (res.code === 200) { userOptions.value = res.data; }
    });
  });
</script>

<style scoped lang="scss">
  .search-row { display: flex; align-items: center; gap: 12px; }
  .search-item { display: flex; align-items: center; }
  .search_title { margin-right: 8px; font-size: 14px; color: #606266; }
  .transfer-card-title { text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 20px; color: #303133; }
  .transfer-card-container { display: flex; justify-content: space-between; padding: 20px; }
  .transfer-card-info { flex: 1; margin-right: 20px; }
  .info-group { margin-bottom: 20px; }
  .info-item { display: flex; margin-bottom: 10px; }
  .info-label { width: 100px; font-weight: bold; color: #606266; }
  .info-value { flex: 1; color: #303133; }
  .transfer-card-qr { display: flex; flex-direction: column; align-items: center; }
  .qr-container { text-align: center; }
  .print-button-container { text-align: center; margin-top: 20px; }
  .param-grid { margin-top: 10px; border-top: 1px solid #ebe9f3; padding-top: 10px; }
  .param-item { margin-bottom: 12px; }
  .param-input-group { display: flex; align-items: center; gap: 8px; }
  .param-input { flex: 1; }
  .param-select { flex: 1; }
  .param-unit { color: #909399; font-size: 12px; min-width: 30px; }
</style>

<style lang="scss">
  @media print {
    @page { size: landscape; }
    body * { visibility: hidden; }
    .el-dialog__wrapper, .el-dialog, .el-dialog__body,
    .transfer-card-title, .transfer-card-container, .transfer-card-container *,
    .info-item, .info-label, .info-value { visibility: visible; }
    .print-button-container { visibility: hidden; }
    .el-dialog__wrapper { position: absolute; top: 0; left: 0; right: 0; margin: 0; }
    .el-dialog { width: 100% !important; max-width: 800px; margin: 0 auto !important; }
    .el-dialog__header, .el-dialog__footer { display: none; }
    .el-dialog__body { padding: 20px; }
    .transfer-card-container { height: auto; display: flex; gap: 20px; }
    .transfer-card-info {
      .info-group { width: 100%; float: none; margin-bottom: 20px; }
      .info-item { display: flex; margin-bottom: 10px;
        .info-label { width: 100px; font-weight: bold; margin-right: 15px; white-space: nowrap; }
        .info-value { flex: 1; word-break: break-word; }
      }
    }
    .transfer-card-qr { width: 160px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
    .qr-container img { width: 140px !important; height: 140px !important; }
  }
</style>