logpm_page/src/views/waybill/orderPackageListDetails.vue

<template>
  <basic-container v-loading="details.loadingObj.pageLoading">
    <div class="avue-crud">
      <!-- 搜索模块 -->
      <div v-h5uShow="!search">
        <!-- 查询模块 -->
        <el-form :inline="true" :model="query" class="header_search" label-width="100px">
          <el-form-item label="运单号">
            <el-input v-model="query.waybillNo" placeholder="请输入运单号" clearable></el-input>
          </el-form-item>

          <el-form-item label="订单自编号">
            <el-input v-model="query.orderCode" placeholder="请输入订单自编号" clearable></el-input>
          </el-form-item>

          <el-form-item label="一级品类">
            <el-input v-model="query.firstPackName" placeholder="请输入运单号" clearable></el-input>
          </el-form-item>

          <el-form-item label="二级品类">
            <el-input
              v-model="query.secondPackName"
              placeholder="请输入运单号"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item label="三级品类">
            <el-input v-model="query.thirdPackName" placeholder="请输入运单号" clearable></el-input>
          </el-form-item>

          <el-form-item label="包条码">
            <el-input
              v-model="query.orderPackageCode"
              placeholder="请输入运单号"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item label="客户车次号">
            <el-input v-model="query.trainNumber" placeholder="请输入运单号" clearable></el-input>
          </el-form-item>

          <el-form-item label="服务号">
            <el-input v-model="query.serviceNum" placeholder="请输入运单号" clearable></el-input>
          </el-form-item>

          <el-form-item label="创建时间">
            <el-date-picker
              v-model="details.timeQuery.createTimeArr"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :shortcuts="shortcuts"
              clearable
            />
          </el-form-item>

          <!-- 查询按钮 -->
          <el-form-item class="el-btn">
            <el-button type="primary" icon="el-icon-search" @click="handleFilterPackageData">
              搜 索
            </el-button>
            <el-button icon="el-icon-delete" @click="searchReset">清 空</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 控件模块 -->
      <el-row>
        <div class="avue-crud__header">
          <!-- 头部左侧按钮模块 -->
          <div class="avue-crud__left">
            <el-button type="primary" icon="Printer" @click="handleBatchBarcode">
              批量打印
            </el-button>
            <el-button type="primary" icon="Position" @click="handleBatchPutInStorage">
              批量入库
            </el-button>
            <el-button type="primary" icon="Delete" @click="handleBatchDelete">批量删除</el-button>
          </div>
          <!-- 头部右侧按钮模块 -->
          <div class="avue-crud__right">
            <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
            <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
            <el-button icon="Search" @click="searchHide" circle></el-button>
          </div>
        </div>
      </el-row>

      <!-- 表格 -->
      <el-row>
        <!-- 列表模块 -->
        <tablecmt
          :columnList="details.packageListColumnList"
          :tableData="details.packageListRenderData"
          :loading="loadingObj.packageListLoading"
          @inputTxt="inputsc"
          @timeCheck="timesc"
          @btnCheck="btnsc"
          @selectCheck="selectsc"
          @selection="selectionChange"
        >
          <template #default="slotProps">
            <template v-if="slotProps.scope.column.label === '操作'">
              <el-text @click="handleShowPackageOrderList(slotProps.scope)"> 包内产品 </el-text>
              <el-text @click="handleShowFlowNode(slotProps.scope)"> 流转节点 </el-text>
              <el-text
                v-if="Number(slotProps.scope.row.packageStatus) === 0"
                @click="handlePutInStorage(slotProps.scope)"
              >
                直接入库
              </el-text>
              <el-text @click="printOrder(slotProps.scope)"> 查看二维码 </el-text>
            </template>
          </template>
        </tablecmt>
      </el-row>

      <!-- 分页模块 -->
      <el-row class="el-fy">
        <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
          <div style="font-size: 14px">勾选数量: {{ selectionList.length }}</div>
        </div>
      </el-row>
    </div>
  </basic-container>

  <!-- 包内产品 -->
  <el-dialog
    title="包内产品"
    v-model="details.popUpShow.packageDetailColumnListVisited"
    width="80%"
    :before-close="beforeClose"
    append-to-body
    :fullscreen="details.fullscreenObj.packageDetailColumnListVisited"
    :show-close="false"
    class="packageDetailColumnListVisited"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header flex-c-sb">
        <h4 :id="titleId" :class="titleClass">包内产品</h4>
        <div class="flex-c-c">
          <!-- 全屏显示按钮 -->
          <el-button type="text" v-if="!details.fullscreenObj.packageDetailColumnListVisited">
            <el-icon class="" @click="handleFullScrean('open', 'packageDetailColumnListVisited')"
              ><FullScreen
            /></el-icon>
          </el-button>
          <el-button type="text" v-else>
            <el-icon class="" @click="handleFullScrean('close', 'packageDetailColumnListVisited')"
              ><CopyDocument
            /></el-icon>
          </el-button>

          <!-- 弹窗关闭按钮 -->
          <el-button type="text">
            <el-icon class="" @click="close"><Close /></el-icon>
          </el-button>
        </div>
      </div>
    </template>
    <tablecmt
      :columnList="details.packageDetailColumnList"
      :tableData="details.packageDetailData"
      :loading="loadingObj.packageListLoading"
      @inputTxt="inputsc"
      @timeCheck="timesc"
      @btnCheck="btnsc"
      @selectCheck="selectsc"
      @selection="selectionChange"
    >
      <template #default="slotProps"> </template>
    </tablecmt>

    <!-- 分页模块 -->
    <el-pagination
      align="right"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="details.packageListPage.pageNum"
      :page-sizes="[30, 50, 80, 120]"
      :page-size="details.packageListPage.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="details.packageListPage.total"
    >
    </el-pagination>
  </el-dialog>

  <!-- 流转节点 -->
  <el-dialog
    title="流转节点"
    v-model="details.popUpShow.flowNodeColumnListVisited"
    width="80%"
    :before-close="beforeClose"
    append-to-body
    :fullscreen="details.fullscreenObj.flowNodeColumnListVisited"
    :show-close="false"
    class="flowNodeColumnListVisited"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header flex-c-sb">
        <h4 :id="titleId" :class="titleClass">流转节点</h4>
        <div class="flex-c-c">
          <!-- 全屏显示按钮 -->
          <el-button type="text" v-if="!details.fullscreenObj.flowNodeColumnListVisited">
            <el-icon class="" @click="handleFullScrean('open', 'flowNodeColumnListVisited')"
              ><FullScreen
            /></el-icon>
          </el-button>
          <el-button type="text" v-else>
            <el-icon class="" @click="handleFullScrean('close', 'flowNodeColumnListVisited')"
              ><CopyDocument
            /></el-icon>
          </el-button>

          <!-- 弹窗关闭按钮 -->
          <el-button type="text">
            <el-icon class="" @click="close"><Close /></el-icon>
          </el-button>
        </div>
      </div>
    </template>
    <tablecmt
      :columnList="details.flowNodeColumnList"
      :tableData="details.flowNodeData"
      :loading="loadingObj.packageListLoading"
      @inputTxt="inputsc"
      @timeCheck="timesc"
      @btnCheck="btnsc"
      @selectCheck="selectsc"
      @selection="selectionChange"
    >
      <template #default="slotProps"> </template>
    </tablecmt>
  </el-dialog>

  <!-- 打印二维码 -->
  <el-dialog
    class="el-dialog-QRCode"
    title="二维码"
    :visible.sync="details.popUpShow.QRCodeVisible"
    width="780px"
    v-model="details.popUpShow.QRCodeVisible"
    :align-center="true"
  >
    <div class="el-dialog-QRCode-container">
      <div v-html="details.html"></div>
    </div>
    <span slot="footer" class="dialog-footer flex-c-c mt10">
      <!--    <el-button type="primary" @click="ddd">导 出</el-button>-->
      <el-button type="primary" @click="printTemplate">打 印</el-button>
      <el-button @click="details.popUpShow.QRCodeVisible = false">取 消</el-button>
    </span>
  </el-dialog>

  <!-- 列表配置显示 -->
  <edittablehead
    @setcolum="setnewcolum"
    @closce="showdrawer"
    :drawerShow="drawerShow"
    :columnList="details.packageListColumnList"
  ></edittablehead>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, computed, onMounted, nextTick, watch } from 'vue';
import functions from '@/utils/functions.js';
import dayjs from 'dayjs';
import { mapGetters } from 'vuex';
/** 获取字典 */
import { getDictionaryBiz } from '@/api/system/dict';
import {
  getopenOrderFindAdvanceDetailList,
  getopenOrderIncomingPackage,
  getShowAdvancePackgeCode,
  postDeleteAdvanceDetail,
  postFinaPackageTrackLogList,
} from '@/api/waybill/orderPackageListDetails';
import {
  downloadXls,
  setNodeHeight,
  getHtmls,
  debounce,
  deepClone,
  handleClearTableQuery,
} from '@/utils/util';
import {
  packageListColumnList,
  packageDetailColumnList,
  flowNodeColumnList,
} from '@/option/waybill/orderPackageListDetails';
import print from '@/utils/print';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';

// 获取路由实例
const $router = useRouter();
const $route = useRoute();

const details = reactive<any>({
  /** 是否开启搜索 */
  search: true,
  /** 表格搜索条件 */
  query: {},
  /** 时间选择 */
  timeQuery: {},
  /** 时间快捷选择设置 */
  shortcuts: [
    {
      text: '最近一周',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        return [start, end];
      },
    },
    {
      text: '最近一个月',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        return [start, end];
      },
    },
    {
      text: '最近三个月',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        return [start, end];
      },
    },
  ],
  /** 时间选择器数据 */
  stockupDate: [],
  /** 包明细表头 */
  packageListColumnList: deepClone(packageListColumnList),
  /** 包明细数据 */
  packageListData: [],
  packageListRenderData: [],
  /** 包内产品表头 */
  packageDetailColumnList: deepClone(packageDetailColumnList),
  /** 包内产品数据 */
  packageDetailData: [],
  /** 流转节点表头 */
  flowNodeColumnList: deepClone(flowNodeColumnList),
  /** 流转节点数据 */
  flowNodeData: [],
  /** 页面loading */
  loadingObj: {
    /** 列表加载loading */
    list: false,
    packageListLoading: false,
    /** 页面loading */
    pageLoading: false,
  },
  /** 列表复选框选中的数据 */
  selectionList: [],
  /** 是否显示设置表格 */
  drawerShow: false,
  /** 分页参数 */
  page: {
    pageNum: 1,
    pageSize: 30,
    total: 0,
  },
  /** 包明细分页参数 */
  packageListPage: {
    pageNum: 1,
    pageSize: 30,
    total: 0,
  },
  /** 弹出层显示 */
  popUpShow: {
    /** 流转节点 */
    flowNodeColumnListVisited: false,
    /** 二维码 */
    QRCodeVisible: false,
    /** 包内产品 */
    packageDetailColumnListVisited: false,
  },
  /** 全屏 */
  fullscreenObj: {
    /** 流转节点 */
    flowNodeColumnListVisited: false,
    /** 包内产品 */
    packageDetailColumnListVisited: false,
  },
  /** 列表Dom节点 */
  listNode: '',
  form: {},
  html: '',
});

const { search, query, shortcuts, loadingObj, selectionList, drawerShow } = toRefs(details);

/** vuex */
const permission = computed(() => mapGetters(['permission', 'tagWel', 'tagList']));
console.log('permission :>> ', permission);

onMounted(() => {
  const timer = setTimeout(() => {
    details.listNode = document.querySelector('.maboxhi');
    details.listNode.style.transition = 'all .3s ease-out';
    clearTimeout(timer);
  }, 100);
});

/** 请求页面数据 */
const onLoad = async (params = {}) => {
  try {
    const {
      query: { id },
    } = $route;

    details.loadingObj.packageListLoading = true;

    // 获取暂存单列表
    const res = await getopenOrderFindAdvanceDetailList(details.page, {
      ...details.query,
      ...params,
      advanceId: id,
    });

    const { code, data } = res.data;

    if (code !== 200) return;

    details.packageListData = data || [];
    handleFilterPackageData();
  } catch (error) {
  } finally {
    details.loadingObj.packageListLoading = false;
  }
};

const initPage = () => {
  details.page.pageNum = 1;
  onLoad();
};

/** 搜索 */
const searchChange = () => {
  initPage();
};

/** 清空表单 */
const searchReset = () => {
  details.query = {};
  details.timeQuery = {};
  handleClearTableQuery(details.packageListColumnList);
  handleFilterPackageData();
};

/** 展开列表控件 */
const showdrawer = (_flag?: boolean) => {
  details.drawerShow = _flag;
};

/** 是否开启搜索区 */
const searchHide = () => {
  details.search = !details.search;
  setNodeHeight(details.listNode, '', true);
};

const handleFilterPackageData = debounce(() => {
  let _filterArr = [];

  const _regArr = {};

  for (const key in details.query) {
    const value = details.query[key];

    if (value) _regArr[key] = new RegExp('^' + value);
  }

  if (Object.keys(_regArr).length === 0 && Object.keys(details.timeQuery).length === 0)
    return (details.packageListRenderData = details.packageListData);

  for (let i = 0; i < details.packageListData.length; i++) {
    const value = details.packageListData[i];

    let _flag = true;
    for (let key in _regArr) {
      if (!_regArr[key].test(value[key])) _flag = false;
      if (!_flag) break;
    }

    if (!_flag) continue;

    for (let key in details.timeQuery) {
      const item = details.timeQuery[key];
      if (!item) continue;

      const _startTime = Date.parse(item[0]);
      const _endTime = Date.parse(item[1]) + 1000 * 60 * 60 * 24 - 1;

      const _time = Date.parse(value[key.replace('Arr', '')]);

      if (_time !== _time) _flag = false;
      else if (_time < _startTime || _time > _endTime) _flag = false;

      if (!_flag) break;
    }
    if (_flag) _filterArr.push(value);
  }

  details.packageListRenderData = _filterArr;
}, 10);

/** 表格表头输入框搜索 */
const inputsc = (value, { prop }) => {
  // 动态设置正则
  details.query[prop] = value;

  if (value === '') delete details.query[prop];

  handleFilterPackageData();
};

/** 表格表头时间选择 */
const timesc = (index, row) => {
  console.log(index, row);
  if (!!index) {
    index = dayjs(index).format('YYYY-MM-DD');
  }
  details.query[row.prop] = index;
  if (!index) {
    delete details.query[row.prop];
  }
  initPage();
};

/** 表格表头输入框搜索 */
const btnsc = () => {};

/** 表格表头下拉框选择 */
const selectsc = (index, row) => {
  details.query[row.prop] = index;
  if (!index && index !== 0) delete details.query[row.prop];
  if (row.prop === 'certificateTypeName') {
    details.query['certificateType'] = index;
    if (!index) delete details.query['certificateType'];
  }
  initPage();
};

/** 表格表头复选框选择 */
const selectionChange = (list: any) => {
  details.selectionList = list;
};

/** 每页数量改变执行的回调 */
const sizeChange = (pageSize: number) => {
  details.page.pageSize = pageSize;
  initPage();
};

/** 页码改变执行的回调 */
const currentChange = () => {};

/**
 * 设置列表 -- 固定函数
 * 弹窗的勾选回调，用于更改头部数组
 * 固定搭配，只需要更换   columnList
 *  */
const setnewcolum = (newarr, headarr, type) => {
  if (type == 1) {
    details.packageListColumnList = newarr;
    functions.setStorage(window.location.pathname + 'checkList', headarr);
  } else if (type == 2) {
    details.packageListColumnList = newarr;
    functions.setStorage(window.location.pathname + 'flexList', headarr);
  } else if (type == 3) {
    details.packageListColumnList = newarr;
    functions.setStorage(window.location.pathname + 'sortlist', headarr);
  }
};

/** 弹出层开启前清除数据 */
const beforeClose = done => {
  done();
  details.form = {};
  details.selectionList = [];
  details.view = false;
};

/** 查看包内产品 */
const handleShowPackageOrderList = ({ row }) => {
  // details.popUpShow.packageDetailColumnListVisited = true;

  // nextTick(() => {
  //   // 获取弹窗内表格元素节点, 并设置高度
  //   const _node: any = document.querySelector('.packageDetailColumnListVisited .maboxhi');
  //   if (!_node) return;
  //   _node.style.height = '550px';
  //   console.log('_node :>> ', _node);
  // });
  return ElMessage.warning({ message: '暂未开放' });
};

/** 修改客户信息 */
const editClientInfo = () => {
  if (details.selectionList.length !== 0) {
    return ElMessage({
      type: 'warning',
      message: '最少选择一条数据',
    });
  }
  //   editClientInfoVisible;
  details.popUpShow.editClientInfoVisible = true;
};

/**
 * 是否开启全屏
 * @params(_type) 开启或关闭
 */
const handleFullScrean = (_type: 'open' | 'close', _name: string) => {
  let _node = '';
  if (_name) _node = document.querySelector(`.${_name} .maboxhi`);

  switch (_name) {
    // 包内产品
    case 'packageDetailColumnListVisited':
      details.fullscreenObj.packageDetailColumnListVisited =
        !details.fullscreenObj.packageDetailColumnListVisited;

      if (_type === 'close') {
        if (_node) setNodeHeight(_node, '500px');
      } else {
        if (_node) setNodeHeight(_node);
      }
      break;

    default:
      details.fullscreenObj[_name] = !details.fullscreenObj[_name];
      if (_type === 'close') {
        if (_node) setNodeHeight(_node, '500px');
      } else {
        if (_node) setNodeHeight(_node);
      }
      break;
  }
};

/** 单列查看包条码 */
const printOrder = async ({ row }) => {
  try {
    details.loadingObj.pageLoading = true;
    details.html = '';
    let qr = {
      orderPackageCodes: row.orderPackageCode,
    };
    const res = await getShowAdvancePackgeCode(qr);
    const { code, data } = res.data;
    if (code !== 200) return;

    details.popUpShow.QRCodeVisible = true;
    details.html = getHtmls(data.dataList, data.templateHtml);
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.pageLoading = false;
  }
};

/** 打印包条码 */
const printTemplate = () => {
  const orderNodeList = document.querySelectorAll('.el-dialog-QRCode .el-dialog__body>div>div>div');
  print(orderNodeList);
};

/** 入库 */
const handlePutInStorage = ({ row }) => {
  console.log('row :>> ', row);
  ElMessageBox.confirm('确认直接入库吗?', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const submitData = {
        orderPackageCode: row.orderPackageCode,
        /** 直接入库 */
        incomingType: '3',
      };

      const res = await getopenOrderIncomingPackage(submitData);
      const { code } = res.data;

      if (code !== 200) return;
      initPage();
      ElMessage({
        type: 'success',
        message: '入库成功',
      });
    })
    .catch(() => {});
};

/** 批量入库 */
const handleBatchPutInStorage = () => {
  if (details.selectionList.length === 0) return ElMessage.error('最少选择一条数据');

  let orderPackageCodes = [];
  const _flag = details.selectionList.every(val => {
    if (Number(val.packageStatus) === 1) {
      return false;
    }
    orderPackageCodes.push(val.orderPackageCode);
    return true;
  });

  if (!_flag) return ElMessage.error('请选择未入库的数据');

  ElMessageBox.confirm('确认直接入库吗?', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      try {
        details.loadingObj.pageLoading = true;

        const submitData = {
          orderPackageCode: orderPackageCodes.join(','),
          /** 直接入库 */
          incomingType: '3',
        };

        const res = await getopenOrderIncomingPackage(submitData);
        const { code } = res.data;

        if (code !== 200) return;
        initPage();
        ElMessage({
          type: 'success',
          message: '入库成功',
        });
      } catch (error) {
        console.log('error :>> ', error);
      } finally {
        details.loadingObj.pageLoading = false;
      }
    })
    .catch(() => {});
};

/** 显示流转节点 */
const handleShowFlowNode = async ({ row }) => {
  try {
    details.loadingObj.pageLoading = true;

    const response = await postFinaPackageTrackLogList({ orderPackageCode: row.orderPackageCode });
    const { code, data } = response.data;

    if (code !== 200) return;
    details.flowNodeData = data;

    details.popUpShow.flowNodeColumnListVisited = true;
    nextTick(() => {
      // 获取弹窗内表格元素节点, 并设置高度
      const _node: any = document.querySelector('.flowNodeColumnListVisited .maboxhi');
      if (!_node) return;
      _node.style.height = '550px';
      console.log('_node :>> ', _node);
    });
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.pageLoading = false;
  }
};

/** 批量删除 */
const handleBatchDelete = () => {
  if (details.selectionList.length === 0) return ElMessage.error('请选择需要删除的数据');

  ElMessageBox.confirm('确认删除吗?', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    try {
      details.loadingObj.pageLoading = true;

      const submitData = { advanceDetailIds: details.selectionList.map(item => item.id) };

      const res = await postDeleteAdvanceDetail(submitData);
      const { code } = res.data;

      if (code !== 200) return;
      initPage();
      ElMessage({
        type: 'success',
        message: '删除成功',
      });
    } catch (error) {
      console.log('error :>> ', error);
    } finally {
      details.loadingObj.pageLoading = false;
    }
  });
};

/** 批量查看二维码 */
const handleBatchBarcode = async () => {
  if (details.selectionList.length === 0)
    return ElMessage.warning({ message: '请选择需要查看的数据' });
  try {
    details.loadingObj.pageLoading = true;

    let qr = {
      orderPackageCodes: details.selectionList.map(val => val.orderPackageCode).join(','),
    };

    const res = await getShowAdvancePackgeCode(qr);

    if (res.data.code !== 200) return;
    details.popUpShow.QRCodeVisible = true;
    console.log(res.data);
    details.html = '';
    details.html = getHtmls(res.data.data.dataList, res.data.data.templateHtml);
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.pageLoading = false;
  }
};

watch(
  () => $route,
  () => {
    console.log('$route :>> ', $route);
    if ($route.path !== '/waybill/orderPackageListDetails') return;

    initPage();
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.fo-fl {
  display: flex;
  flex-wrap: wrap;
  zoom: 0.9;
}

// 日期选择器
:deep(.el-date-editor.el-input) {
  height: 100% !important;
  width: 100% !important;
}

:deep(.el-range-editor.el-input__wrapper) {
  height: 100% !important;
}

// 新增行
.add_row {
  display: flex;
  justify-content: space-between;
}

.add_row_title {
  text-align: center;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}

// 统计行
.statistics_row {
  margin: 10px 0;
  font-size: 14px;
  zoom: 0.9;
  display: flex;

  > div {
    margin-right: 20px;
  }
}

// 卡片容器
.crad_container {
  display: flex;

  .card_container_item {
    flex: 1;
    // padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;

    &:first-child {
      margin-right: 20px;
    }

    .card_container_item_title {
      padding: 10px;
      border-bottom: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .card_container_item_box {
      padding: 10px;
    }
  }
}

.el-dialog-QRCode-container {
  max-height: 80vh;
  overflow-y: scroll;
}
</style>