JG-ADMIN-TEMP/src/views/plan/order/index.vue

<template>
  <div class="mainContentBox">
    <avue-crud
      ref="crudRef"
      :option="option"
      v-model:page="page"
      v-model:search="search"
      v-model="form"
      :table-loading="loading"
      :permission="permission"
      @search-change="handleQuery"
      @search-reset="resetChange"
      @size-change="handleQuery"
      @current-change="handleQuery"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
      :data="pageData"
    >
      <!--      <template #menu-left="{ size }">
        <el-button type="primary" @click="scan">扫码导入</el-button>
        <el-button type="primary" @click="test">测试数据</el-button>
      </template>-->
      <template #menu-right="{}">
        <el-dropdown split-button v-hasPerm="['plan:order:import']"
          >导入
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="downloadTemplate">
                <i-ep-download />下载模板
              </el-dropdown-item>
              <el-dropdown-item @click="openDialog('obj-import')">
                <i-ep-top />导入数据
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button
          class="ml-3"
          v-hasPerm="['plan:order:export']"
          @click="handleExport"
        >
          <template #icon> <i-ep-download /> </template>导出
        </el-button>
      </template>
      <template #menu="{ size, row, index }">
        <el-button
          v-hasPerm="[buttonPermission.PLAN.BTNS.order_edit]"
          v-if="
            row.orderState === '0' ||
            row.orderState === '1' ||
            row.orderState === '2'
          "
          type="primary"
          link
          size="small"
          @click="handleEdit(row, 0)"
          ><i-ep-edit />编辑
        </el-button>
        <!--        <el-button
            v-if="row.nameplated === 1"
            type="info"
            link
            size="small"
            @click="handleNameplated(row)"
        ><i-ep-edit />铭牌
        </el-button>-->
        <el-button
          v-hasPerm="[buttonPermission.PLAN.BTNS.order_del]"
          v-if="
            row.orderState === '0' ||
            row.orderState === '1' ||
            row.orderState === '2'
          "
          type="danger"
          link
          size="small"
          @click="rowDel(row, 0)"
          ><i-ep-edit />删除
        </el-button>
        <el-button
          type="primary"
          link
          size="small"
          @click="toStock(row.orderCode)"
          ><i-ep-edit />备料
        </el-button>
        <el-button
          type="primary"
          link
          size="small"
          @click="toReturn(row.orderCode)"
          ><i-ep-edit />领料
        </el-button>

        <el-button
            icon="el-icon-setting"
            text
            @click="exportDataZip(row.id)"
            type="primary"
            v-if="row.orderState === '5'"
            :size="size"
        >生产数据包</el-button>
        <!--        <el-button
          type="primary"
          size="small"
          v-if="row.orderState == '5'"
          @click="handleScanCode(row.id)"
          >二维码生成
        </el-button>-->
      </template>
    </avue-crud>
    <el-dialog
      v-model="dialog1.visible"
      :title="dialog1.title"
      width="950px"
      @close="dialog1.visible = false"
    >
      <choice-item-page @material-info="materialInfo" />
    </el-dialog>
    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      width="500px"
      @close="closeDialog"
    >
      <el-form
        v-if="dialog.type === 'obj-import'"
        :model="importData"
        label-width="100px"
      >
        <el-form-item label="Excel文件">
          <el-upload
            ref="uploadRef"
            action=""
            drag
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            :limit="1"
            :auto-upload="false"
            :file-list="importData.fileList"
            :on-change="handleFileChange"
            :on-exceed="handleFileExceed"
          >
            <el-icon class="el-icon--upload">
              <i-ep-upload-filled />
            </el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <template #tip>
              <div style="color: red">文件类型: xls/xlsx</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- 弹窗底部操作按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="dialog2.visible"
      :title="dialog2.title"
      width="950px"
      @close="
        dialog2.visible = false;
        scanArray = [];
        scanCpArray = [];
      "
    >
      <el-input
        @keyup.enter="scanFnc"
        v-model="scanCode"
        style="padding: 20px"
        placeholder="请扫码"
      />

      <div class="scanInfo">
        <el-scrollbar class="scrollbar">
          <div class="item" v-for="(item, index) in scanArray" :key="index">
            <div class="text">扫码Cp: {{ item.cp }}</div>
            <div @click="deleteItem(index)" class="text">
              <el-icon><Delete /></el-icon>
            </div>
          </div>
          <div v-if="scanArray.length < 1">暂无数据</div>
        </el-scrollbar>
        <div class="bottombtn">
          <el-button
            type="primary"
            :disabled="scanArray.length < 1"
            @click="scanSubmit"
            >生 成</el-button
          >
        </div>

        <!-- <vue-qrcode value="1241421gaga" size="45" error-level="H" /> -->
      </div>
    </el-dialog>
    <el-dialog
      v-model="dialog3.visible"
      :title="dialog3.title"
      width="950px"
      @close="
        dialog3.visible = false;
        scanCodeArray = [];
      "
    >
      <div class="scanInfo">
        <div style="padding: 0 20px; text-align: center">
          二维码数量:{{ scanCodeArray.length }}
        </div>
        <el-scrollbar class="scrollbarA">
          <div
            class="box"
            :style="
              scanCodeArray.length == 1 ? '   justify-content: center;' : ''
            "
          >
            <div
              class="scancodeitem"
              v-for="(item, index) in scanCodeArray"
              :key="index"
            >
              <div class="qrcodeItem">
                <vue-qrcode :value="item" size="70" error-level="low" />
              </div>
            </div>
          </div>

          <div v-if="scanCodeArray.length < 1">暂无数据</div>
        </el-scrollbar>
      </div>
    </el-dialog>
    <StockPre v-model="stockState" :orderCode="orderCode" />
    <ReturnPre v-model="returnState" :orderCode="orderCode" />
    <CommonTable
      ref="ctableRef"
      tableTitle="报故单"
      tableType="FAULT"
      @selected-sure="onSelectedFinish"
    />
  </div>
</template>
<script setup lang="ts">
import { checkPerm } from "@/directive/permission";
import type { UploadInstance } from "element-plus";
import { genFileId } from "element-plus";
import dictDataUtil from "@/common/configs/dictDataUtil";
import buttonPermission from "@/common/configs/buttonPermission";
import {
  addOrder,
  deleteOrders,
  downloadTemplateApi,
  exportOrder,
  exportDataInfo,
  getOrderPage,
  importOrder,
  updateOrder,
  getExpandAlias,
  scanImport,
  getScanCode,
  getTestCode,
} from "@/api/order";
import { ref } from "vue";
import _ from "lodash-es";
import ChoiceItemPage from "@/views/base/materials/components/choice-item-page.vue";
import ReturnPre from "./components/returnPre.vue";
import StockPre from "./components/stockPre.vue";
const stockState = ref(false);
const returnState = ref(false);
const orderCode = ref("");
const toStock = (code: string) => {
  orderCode.value = code;
  stockState.value = true;
};
const toReturn = (code: string) => {
  orderCode.value = code;
  returnState.value = true;
};
// 弹窗对象
const dialog = reactive({
  visible: false,
  type: "order-form",
  width: 800,
  title: "",
});
const ctableRef = ref(null);
const search = ref({});
const option = ref({});
const pageData = ref([]);
const form = ref({});
const page = ref({ total: 0, currentPage: 1, pageSize: 10 });
const loading = ref(false);
const uploadRef = ref<UploadInstance>(); // 上传组件
// 导入数据
const importData = reactive({
  file: undefined,
  fileList: [],
});

const exportDataZip = (id) => {
  exportDataInfo(0,id).then((response) => {
    downFile(response);
  });
};
const materialInfo = (value) => {
  form.value.materialCode = value.materialCode;
  form.value.materialName = value.materialName;
  form.value.materialModel = value.spec;
  dialog1.visible = false;
};
const dialog1 = reactive({
  title: "物料选择",
  visible: false,
});
const dialog2 = reactive({
  title: "扫码导入",
  visible: false,
});
const dialog3 = reactive({
  title: "二维码详情",
  visible: false,
});
const permission = reactive({
  delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
  addBtn: checkPerm(buttonPermission.PLAN.BTNS.order_add),
  editBtn: checkPerm(buttonPermission.PLAN.BTNS.order_edit),
  menu: true,
});
const crudRef = ref(null); //crudRef.value 获取avue-crud对象
option.value = {
  border: true,
  index: true, //是否显示第几项
  indexLabel: "序号",
  indexWidth: "55px",
  searchIcon: true,
  editBtn: false,
  delBtn: false,
  searchMenuSpan: 8,
  align: "center",
  menuAlign: "center",
  search: true,
  refreshBtn: false,
  from: {
    width: "300",
  },
  column: [
    {
      label: "订单编号",
      prop: "orderCode",
      search: true,
      width: 130,
      overHidden: true,
      display: false,
    },
    {
      label: "订单名称",
      prop: "orderName",
      search: true,
      width: 150,
      overHidden: true,
      rules: [
        {
          required: true,
          message: "订单名称不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "ERP号",
      prop: "erpCode",
      search: true,
      width: 130,
      overHidden: true,
      rules: [
        {
          required: true,
          message: "订单编号不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "订单类型",
      prop: "orderType",
      type: "select", //类型为下拉选择框
      width: 100,
      overHidden: true,
      editDisabled: true,
      dicUrl: dictDataUtil.request_url + dictDataUtil.TYPE_CODE.plan_order_type,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
      searchClearable: false, //可清空的输入框,默认为true
      filterable: true, //添加filterable属性即可启用搜索功能
      rules: [
        {
          required: true,
          message: "订单类型不能为空",
          trigger: "trigger",
        },
      ],
      change: ({ value, column }) => {
        if (value === "2") {
          option.value.column.forEach((item) => {
            if (item.prop == "trackingNumber") {
              item.display = true;
            }
            if (item.prop == "materialCode") {
              item.disabled = true;
            }
            if (item.prop == "orderNum") {
              item.disabled = true;
            }
          });
        }
        if (value === "1" || value === '0') {
          option.value.column.forEach((item) => {
            if (item.prop == "trackingNumber") {
              item.display = false;
            }
            if (item.prop == "materialCode") {
              item.disabled = false;
            }
            if (item.prop == "orderNum") {
              item.disabled = false;
            }
          });
        }
      },
    },
    {
      label: "报故单",
      prop: "trackingNumber",
      width: 100,
      display: false,
      click: ({ value, column }) => {
        if (ctableRef.value) {
          ctableRef.value.startSelect();
        }
      },
      rules: [
        {
          required: true,
          message: "报故单不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "报故单id",
      prop: "faultId",
      width: 100,
      display: false,
      hide: true,
    },
    {
      label: "产品编码",
      prop: "materialCode",
      search: true,
      width: 130,
      overHidden: true,
      rules: [
        {
          required: true,
          message: "订单编号不能为空",
          trigger: "trigger",
        },
      ],
      click: ({ value, column }) => {
        if (column.boxType) {
          dialog1.visible = true;
        }
      },
      change: ({ value, column }) => {
        if (value != form.value.materialCode && value) {
          dialog1.visible = true;
        }
      },
    },
    {
      label: "产品名称",
      prop: "materialName",
      search: true,
      width: 130,
      overHidden: true,
      rules: [
        {
          required: true,
          message: "产品名称不能为空",
          trigger: "trigger",
        },
      ],
      disabled: true,
    },
    {
      label: "产品规格",
      width: 130,
      overHidden: true,
      search: true,
      disabled: true,
      prop: "materialModel",
    },
    {
      label: "订单状态",
      prop: "orderState",
      display: false,
      search: true,
      width: 100,
      overHidden: true,
      type: "select", //类型为下拉选择框
      dicUrl:
        dictDataUtil.request_url + dictDataUtil.TYPE_CODE.plan_order_state,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
      searchClearable: false, //可清空的输入框,默认为true
      filterable: true, //添加filterable属性即可启用搜索功能
    },

    {
      label: "订单数量",
      prop: "orderNum",
      type: "number",
      width: 100,
      overHidden: true,
      min: 1,
      max: 99999,
      rules: [
        {
          required: true,
          message: "订单数量不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "排产数量",
      prop: "scheduledNum",
      width: 100,
      overHidden: true,
      display: false,
    },
    {
      label: "优先级",
      prop: "priority",
      width: 100,
      overHidden: true,
      type: "select", //类型为下拉选择框
      dicUrl:
        dictDataUtil.request_url + dictDataUtil.TYPE_CODE.plan_order_priority,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
      searchClearable: false, //可清空的输入框,默认为true
      filterable: true, //添加filterable属性即可启用搜索功能
      rules: [
        {
          required: true,
          message: "订单类型不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "交付日期",
      prop: "deliverTime",
      type: "date",
      width: 100,
      overHidden: true,
      format: "YYYY-MM-DD", //前端展示格式
      valueFormat: "YYYY-MM-DD", //设置后端接收的日期格式
      rules: [
        {
          required: true,
          message: "请选择交付日期",
          trigger: "trigger",
        },
      ],
      disabledDate(time) {
        return time.getTime() < new Date().setDate(new Date().getDate() - 1);
      },
    },
    /* {
      label: "所属公司",
      prop: "companyId",
      width: 100,
      overHidden: true,
      type: "select", //类型为下拉选择框
      dicUrl: import.meta.env.VITE_APP_BASE_API + "/api/v1/sys/dept/orgList",
      props: {
        label: "deptName",
        value: "id",
      },
      rules: [
        {
          required: true,
          message: "请选择所属公司",
          trigger: "trigger",
        },
      ],
    },*/
    {
      label: "项目号",
      width: 100,
      overHidden: true,
      prop: "projectCode",
    },
    {
      label: "绑定铭牌",
      prop: "nameplated",
      width: "100",
      type: "radio", //类型为单选框
      dicData: [
        {
          label: "否",
          value: 0,
        },
        {
          label: "是",
          value: 1,
        },
      ],
      value: 0,
    },
    {
      label: "生产类型",
      prop: "produceType",
      width: 100,
      overHidden: true,
      type: "select", //类型为下拉选择框
      dicUrl: dictDataUtil.request_url + dictDataUtil.TYPE_CODE.produce_type,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
      rules: [
        {
          required: true,
          message: "请选择生产类型",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "备注",
      prop: "remark",
      width: 100,
      overHidden: true,
      minRows: 2, //最小行/最小值
      type: "textarea", //类型为多行文本域框
      maxlength: 512, //最大输入长度
    },
    {
      label: "创建时间",
      prop: "created",
      width: "140",
      overHidden: true,
      display: false,
      type: "datetime",
      valueFormat: "yyyy-MM-dd HH:mm:ss",
    },
    {
      label: "创建人",
      prop: "creator",
      display: false,
      width: 80,
      overHidden: true,
    },
  ],
};
function useScanCode() {
  const scanCodeArray = ref([]);
  const test = async () => {
    const { data, code } = await getTestCode();
    let data1 = [];
    data1.push(JSON.stringify(data[0]));
    scanCodeArray.value = data1;
    dialog3.visible = true;
  };
  const handleScanCode = async (id: string) => {
    const { data, code } = await getScanCode(id);
    scanCodeArray.value = data;
    dialog3.visible = true;
  };
  return { scanCodeArray, handleScanCode, test };
}
const { scanCodeArray, handleScanCode, test } = useScanCode();
//扫码板块

function useScan() {
  const scanCode = ref("");
  const scanArray = ref([]);
  const scanCpArray = ref([]);
  const scanStatus = ref(false);
  const deleteItem = (index: any) => {
    scanArray.value.splice(index, 1);
  };
  const scan = () => {
    dialog2.visible = true;
  };
  const scanFnc = () => {
    if (scanCode.value) {
      // scanCode.value =
      //   '{"id":"453b5261e07745f2b7f4a042171f0644","tp":"10","cp":"1", "data":"PD94bWwgdmVyc2lvbj0iMS4wliBlbmNvZGluZz0iROlyMzEylj8+PFI+PERBIEIEPSJhc2QyMzRhZGYzNDJkZGZhc3NzliBOcDOiNSlgY3A9liEiPjxsaXN0IE5hPSJCT00iPjxCT00gdHk9lkkiPjxBPuS6p+WTgeWei+WPtzQT48Qj7lm77li7c8L0|+PEM+5qOA6agM5L6d5o2uPC9DPjxUSj"}';
      let obj = {};
      obj = JSON.parse(scanCode.value);
      if (!_.includes(scanCpArray.value, obj.cp)) {
        scanArray.value.push(obj);
        scanCpArray.value.push(obj.cp);
        ElMessage.success("扫码成功");
      } else {
        ElMessage.error("请勿重复扫码");
      }
      //判定是否重复扫码
    } else {
      ElMessage.error("请正确扫码");
    }
    scanCode.value = "";
  };
  const scanSubmit = async () => {
    const { data, code } = await scanImport({
      planOrderImportList: scanArray.value,
    });
    if (code == "200") {
      ElMessage.success("导入成功！");
      dialog2.visible = false;
      scanArray.value = [];
      scanCpArray.value = [];
      handleQuery(null, null);
    }
  };
  return {
    scanCode,
    scanArray,
    scanCpArray,
    scanStatus,
    scan,
    scanFnc,
    deleteItem,
    scanSubmit,
  };
}
const {
  scanCode,
  scanArray,
  scanCpArray,
  scanStatus,
  scanSubmit,
  scan,
  scanFnc,
  deleteItem,
} = useScan();
const queryExpandAlias = () => {
  getExpandAlias(dictDataUtil.EXPAND_FIELD_TABLE.plan_order_info).then(
    (data: any) => {
      if (data.data) {
        data.data.forEach((item: any) => {
          option.value.column.push({
            label: item.label,
            prop: item.field,
            width: 100,
            overHidden: true,
          });
        });
      }
    }
  );
};
const resetChange = () => {
  handleQuery(null, null);
};
const handleQuery = (params, done) => {
  // console.log(JSON.stringify(option.value.column));
  loading.value = true;
  const querySearch = {
    pageSize: page.value.pageSize,
    pageNo: page.value.currentPage,
    ...params,
  };
  getOrderPage(querySearch)
    .then(({ data }) => {
      pageData.value = data.records;
      page.value.total = data.totalCount;
      page.value.currentPage = data.pageNo;
      page.value.pageSize = data.pageSize;
    })
    .finally(() => {
      loading.value = false;
      if (done) {
        done();
      }
    });
};
const rowSave = (form, done, loading) => {
  loading();
  addOrder(form).then((data: any) => {
    ElMessage({
      message: data.msg,
      type: "success",
    });
    done();
    handleQuery(null, null);
  });
};
const rowUpdate = (form: any, index: any, done: any, loading: any) => {
  loading();
  updateOrder(form).then((data: any) => {
    ElMessage({
      message: data.msg,
      type: "success",
    });
    done();
    handleQuery(null, null);
  });
};
const handleNameplated = (row) => {
  ElMessage.warning("功能开发中");
};
const rowDel = (form: any, index) => {
  ElMessageBox.confirm("当前操作会删除数据,你确认要继续吗?")
    .then(() => {
      deleteOrders([form.id])
        .then((data: any) => {
          ElMessage({
            message: data.msg,
            type: "success",
          });
          handleQuery(null, null);
        })
        .finally(() => {});
    })
    .catch(() => {
      // catch error
    });
};
const openDialog = (type: any) => {
  dialog.visible = true;
  dialog.type = type;
  if (dialog.type === "obj-import") {
    // 导入弹窗
    dialog.title = "数据导入";
    dialog.width = 600;
  }
};
const closeDialog = () => {
  dialog.visible = false;
  if (dialog.type === "obj-import") {
    importData.file = undefined;
    importData.fileList = [];
  }
};
const downloadTemplate = () => {
  downloadTemplateApi().then((response) => {
    downFile(response);
  });
};
const handleEdit = (row: any, index: any) => {
  crudRef.value && crudRef.value.rowEdit(row, index);
};
/** 弹窗提交 */
const handleSubmit = () => {
  importOrder(importData).then((data: any) => {
    ElMessage({
      message: data.msg,
      type: "success",
    });
    dialog.visible = false;
    handleQuery(null, null);
  });
};
/** Excel文件 Change */
const handleFileChange = (file: any) => {
  importData.file = file.raw;
};
/** 文件下载 */
const downFile = (response: any) => {
  const fileData = response.data;
  const fileName = decodeURI(
    response.headers["content-disposition"].split(";")[1].split("=")[1]
  );
  const fileType =
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
  const blob = new Blob([fileData], { type: fileType });
  const downloadUrl = window.URL.createObjectURL(blob);
  const downloadLink = document.createElement("a");
  downloadLink.href = downloadUrl;
  downloadLink.download = fileName;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
  window.URL.revokeObjectURL(downloadUrl);
};
/** Excel文件 Exceed  */
const handleFileExceed = (files: any) => {
  uploadRef.value!.clearFiles();
  const file = files[0];
  file.uid = genFileId();
  uploadRef.value!.handleStart(file);
  importData.file = file;
};
/** 导出 */
const handleExport = () => {
  exportOrder(search.value).then((response: any) => {
    if(response.code !== '200'){
      ElMessage.error(response.msg);
    }else{
      downFile(response);
    }
  });
};
onMounted?.(() => {
  queryExpandAlias();
  handleQuery(null, null);
});

/** 选择报故单 */
const onSelectedFinish = (selectedValue) => {
  form.value.materialCode = selectedValue.materialCode;
  form.value.materialName = selectedValue.materialName;
  form.value.materialModel = selectedValue.spec;
  form.value.faultId = selectedValue.id;
  form.value.trackingNumber = selectedValue.trackingNumber;
  form.value.orderNum = selectedValue.unqualifiedNum;
};
</script>

<style lang="scss" scoped>
.scanInfo {
  width: 100%;

  .scrollbar {
    padding: 20px;
    height: 350px;
    .item {
      margin: 20px 0;
      width: 100%;
      background-color: #80808030;
      border-radius: 16px;
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      .el-icon {
        width: 50px;
        height: 50px;
        color: red;
        cursor: pointer;
      }
    }
    .scancodeitem {
      width: 300px;
      height: 300px;
      margin: 0 20px;
      display: inline-block;
      border-radius: 16px;
      border: 1px solid black;
      padding-top: 10px;
      .qrcodeItem {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .bottombtn {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .scrollbarA {
    padding: 20px;
    height: 350px;
    .box {
      display: flex;
      align-items: center;

      .item {
        margin: 20px 0;
        width: 100%;
        background-color: #80808030;
        border-radius: 16px;
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        .el-icon {
          width: 50px;
          height: 50px;
          color: red;
          cursor: pointer;
        }
      }
      .scancodeitem {
        width: 300px;
        height: 300px;
        margin: 0 20px;
        display: inline-block;
        border-radius: 16px;
        border: 1px solid black;
        padding-top: 10px;
        .qrcodeItem {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
</style>