kd-aiot-frontend-wms/src/views/warehouseManagement/outgoingManagement/add.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <header-title title="基本信息"></header-title>
      <el-form
        :model="formData"
        ref="formName"
        label-width="110px"
        :rules="rules"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="出库场景" prop="bizType">
              <el-select
                filterable
                placeholder="请选择"
                v-model="formData.bizType"
                clearable
                @change="handleBizSceneChange"
              >
                <el-option
                  v-for="item in outputSceneState"
                  :key="item.code"
                  :value="item.code + ''"
                  :label="item.label"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="单据来源" prop="sourceBizNo">
              <el-input
                placeholder="请选择"
                v-model="formData.sourceBizNo"
                @click.native="openDocumentSourceDialog"
              >
                <el-button
                  @click="clearDocumentSource"
                  slot="append"
                  icon="el-icon-circle-close"
                ></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出库物品类型" prop="extInfo.assetType">
              <el-select
                style="width: 100%"
                multiple
                v-model="formData.extInfo.assetType"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in goodsLists"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出库登记人">
              <el-input
                placeholder="登记人"
                disabled
                v-model="formData.extInfo.createUserName"
                clearable /></el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="领料人部门" prop="verifyDeptName">
              <selectTree
                ref="tree"
                class="form-ipt"
                size="medium"
                style="width: 100%"
                :value="formData.extInfo.verifyDeptCode"
                clearable
                :options="treeList"
                :props="{
                  value: 'code',
                  label: 'name',
                  children: 'children'
                }"
                @getValue="auditorDeptClick"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="领料人" prop="fromId">
              <el-select
                v-model="formData.fromId"
                filterable
                placeholder="请选择领料人"
              >
                <el-option
                  v-for="item in llrLsit"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  @click.native="userSlected(item)"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
          <!-- <el-col :span="6">
            <el-form-item label="领料人联系方式" prop="fromUserPhone">
              <el-input
                placeholder="请输入"
                disabled
                v-model="formData.extInfo.fromUserPhone"
                clearable /></el-form-item
          ></el-col> -->
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="formData.remark"
                placeholder="请详细说明"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div>
        <el-button
          style="margin-bottom: 20px; float: right; margin-right: 20px"
          type="primary"
          @click="addStock"
          >添加</el-button
        >
      </div>
      <div class="material">
        <div>
          <header-title title="物品清单"></header-title>
          <div class="mt10 form-table">
            <el-table
              ref="productListTable"
              :data="productList"
              border
              tooltip-effect="dark"
              :max-height="300"
              :header-cell-style="rowClass"
            >
              <el-table-column label="序号" type="index" width="50">
              </el-table-column>
              <el-table-column
                label="编码"
                prop="categoryCode"
                align="center"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                label="名称"
                align="center"
                prop="categoryName"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                v-if="clientEnvironmentId == 4"
                label="级别"
                prop="level"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="型号"
                align="center"
                prop="categoryModel"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                label="规格"
                align="center"
                prop="specification"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                label="牌号"
                align="center"
                prop="brandNum"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                v-for="(item, index) in newColumns"
                :label="item.label"
                :align="item.align"
                :prop="item.prop"
                :show-overflow-tooltip="item.showOverflowTooltip"
              ></el-table-column>
              <el-table-column
                label="批次号"
                prop="batchNo"
                align="center"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                label="包装数量"
                v-if="clientEnvironmentId == 3"
                prop="packingQuantity"
                align="center"
              >
                <template slot-scope="{ row, $index }">
                  {{ row.packingQuantity }} {{ row.packingUnit }}
                </template>
              </el-table-column>
              <el-table-column
                v-else
                label="包装数量"
                prop="packingQuantity"
                width="80"
              ></el-table-column>
              <el-table-column
                v-if="clientEnvironmentId == 3"
                label="最小包装单元"
                align="center"
                width="120"
                prop="minPackingQuantity"
              >
                <template slot-scope="{ row, $index }">
                  {{ row.minPackingQuantity }} {{ row.measureUnit }} /{{
                    row.packingUnit
                  }}
                </template>
              </el-table-column>
              <el-table-column
                v-else
                label="包装单位"
                prop="packingUnit"
              ></el-table-column>
              <el-table-column
                label="计量数量"
                prop="measureQuantity"
                width="100"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="计量单位"
                prop="measureUnit"
                align="center"
              >
                <template slot-scope="{ row, $index }">
                  <template>
                    {{ row.measureUnit }}
                  </template>
                </template>
              </el-table-column>
              <el-table-column
                label="重量"
                prop="weight"
                align="center"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                label="重量单位"
                prop="weightUnit"
                align="center"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column label="单价" prop="price" align="center">
                <template slot-scope="{ row }">
                  <template>
                    {{ row.price ? row.price : '-' + '元' }}/{{
                      row.measureUnit
                    }}
                  </template>
                </template>
              </el-table-column>

              <el-table-column
                label="金额"
                align="center"
                prop="contentImage"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="{ row, $index }">
                  {{ row.totalMoney ? row.totalMoney : 0 }}
                </template>
              </el-table-column>

              <el-table-column
                v-if="clientEnvironmentId == 4"
                label="采购原因"
                align="center"
                prop="purpose"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                v-if="clientEnvironmentId == 4"
                label="采购原因"
                align="center"
                prop="purpose"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                label="仓库"
                prop="warehouseName"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
            </el-table>
          </div>
          <header-title class="mt20" title="包装清单"></header-title>
          <div class="mt10 form-table">
            <el-table
              ref="showPackingListTable"
              :data="showPackingList"
              tooltip-effect="dark"
              :max-height="300"
              border
              :row-class-name="tableRowClassName"
              :header-cell-style="rowClass"
              v-el-table-infinite-scroll="pickingHandleScroll"
            >
              <el-table-column label="序号" type="index" width="50">
              </el-table-column>
              <el-table-column
                label="编码"
                prop="categoryCode"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                label="名称"
                prop="categoryName"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                label="批次号"
                prop="batchNo"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                label="发货条码"
                prop="barcodes"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                label="包装编码"
                prop="packageNo"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                label="包装数量"
                prop="packingQuantity"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                label="包装单位"
                prop="packingUnit"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                label="计量数量"
                prop="measureQuantity"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                label="计量单位"
                prop="measureUnit"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                label="物料代号"
                prop="materielDesignation"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                label="客户代号"
                prop="clientCode"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                label="刻码"
                prop="engrave"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                label="重量"
                prop="weight"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                label="重量单位"
                prop="weightUnit"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                label="质检结果"
                prop="result"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="{ row }">
                  <span>{{ qualityResults[row.result] }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="质检状态"
                prop="status"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="{ row }">
                  <span>{{ qualityStatus[row.status] }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="生产日期"
                prop="productionDate"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                label="采购日期"
                prop="purchaseDate"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="mt20">
          <header-title class="mt20" title="物料明细"></header-title>
          <el-table
            ref="multipleTable"
            :data="showMaterialList"
            tooltip-effect="dark"
            :max-height="300"
            :row-class-name="tableRowClassName"
            :header-cell-style="rowClass"
            border
            style="width: 100%"
            stripe
            height="300px"
            v-el-table-infinite-scroll="materielHandleScroll"
          >
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column
              label="编码"
              prop="categoryCode"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="名称"
              prop="categoryName"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column label="批次号" prop="batchNo"></el-table-column>
            <el-table-column
              label="物料编码"
              prop="materialCode"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="发货条码"
              prop="barcodes"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="计量数量"
              prop="minPackingCount"
            ></el-table-column>
            <el-table-column
              label="计量单位"
              prop="measuringUnit"
            ></el-table-column>
            <el-table-column label="物料代号" prop="materielDesignation">
            </el-table-column>
            <el-table-column label="客户代号" prop="clientCode">
            </el-table-column>
            <el-table-column label="刻码" prop="engrave"> </el-table-column>
            <el-table-column width="100" label="重量" prop="weight">
            </el-table-column>
            <el-table-column label="重量单位" prop="weightUnit">
            </el-table-column>
            <el-table-column label="质检结果" prop="result" width="120">
              <template slot-scope="{ row }">
                <span>{{ qualityResults[row.result] }}</span>
              </template>
            </el-table-column>
            <el-table-column label="质检状态" prop="status" width="120">
              <template slot-scope="{ row }">
                <span>{{ qualityStatus[row.status] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="center mt20">
        <el-button type="primary" @click="handleSave" :loading="saveLoading"
          >保存</el-button
        >
        <el-button @click="$router.go(-1)">返回</el-button>
      </div>
    </el-card>
    <AssetsDialog
      ref="assetsDialogRef"
      :treeIds="formData.extInfo.assetType"
      @detailData="detailData"
    />
    <outboundRequisitionDialog
      ref="outboundRequisitionDialogRef"
      @detailData="outboundRequisitionSelection"
      type="2"
    />
  </div>
</template>

<script>
  import storageApi from '@/api/warehouseManagement/index.js';
  import elTableInfiniteScroll from 'el-table-infinite-scroll';
  import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';
  import { getTreeByGroup } from '@/api/classifyManage';
  import { outputSceneState } from '@/utils/dict/index';
  import outboundRequisitionDialog from '../components/outboundRequisitionDialog.vue';
  import selectTree from '@/components/selectTree';
  import AssetsDialog from '../components/AssetsDialog.vue';
  import { deepClone } from '@/utils';
  export default {
    components: {
      selectTree,
      AssetsDialog,
      outboundRequisitionDialog
    },
    directives: {
      'el-table-infinite-scroll': elTableInfiniteScroll
    },
    data() {
      return {
        newColumns: [], // 动态表头
        goodsLists: [], // 商品列表
        qualityStatus: {
          0: '未质检',
          1: '已质检'
        }, // 质检状态 0未检 1已检
        qualityResults: {
          1: '合格',
          2: '不合格'
        }, // 质检结果 1合格 2不合格
        productList: [], // 产品列表
        showPackingList: [], // 展示的包装列表
        packingList: [], // 包装列表
        showMaterialList: [], // 展示物料列表
        materialList: [], // 物料列表
        extInfo: {}, // 扩展信息
        pageSize: 20,
        pickingPageNum: 1,
        materielPageNum: 1,
        dimension: '3',
        outputSceneState: outputSceneState.filter(
          (item) => item.code != '4' && item.code != '11'
        ), // 出库场景状态
        saveLoading: false,
        treeList: [],
        formData: {
          extInfo: {
            assetType: [], //物品类型id
            assetTypeName: '', //物品类型名称
            deptCode: '', //部门code
            deptName: '', //部门名称
            verifyDeptCode: '', //审核部门编码
            verifyDeptName: '', //审核部门名称
            deliveryName: '', //送货人名称
            fromUserPhone: '', //送货人电话
            sourceBizNo: '', //销售订单
            urgent: '', //紧急状态
            supplierId: '', //供应商ID
            supplierName: '', //供应商名称
            createUserName: '', //创建人名字
            contentImage: [] //图片数组
          },
          fromUser: '', //送货人
          bizType: '', //物品类型
          verifyId: '', //审核人Id
          verifyName: '', //审核人名称
          createUserId: '',
          remark: ''
        },
        rules: {
          bizType: {
            required: true,
            message: '请选择出库场景',
            trigger: 'change'
          },
          fromId: {
            required: true,
            message: '请选择领料人',
            trigger: 'change'
          }
        },
        llrLsit: []
      };
    },
    computed: {
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      }
    },
    async created() {
      this.getFieldModel();
      this.getListItems();
      this.initUserInfo();
      this.initDeptData();
      let queryObj = this.$route.query;
      console.log('queryObj------', queryObj);
      if (queryObj.ids) {
        this.formData.bizType = queryObj.bizType;
        this.formData.extInfo.assetType = queryObj.assetType.split(',');
        let data = await storageApi.getHierarchyList({
          ids: this.$route.query.ids,
          type: 3
        });
        this.detailData(data, 3);
      }
    },
    methods: {
      outboundRequisitionSelection(data, dimension, query) {
        this.formData.sourceBizNo = query.sourceBizNo;
        this.formData.bizType = query.bizType;
        this.formData.extInfo.assetType = query.assetType.split(',');
        this.detailData(data, dimension);
      },
      // 获取动态表头
      getFieldModel() {
        storageApi.fieldModel({ fieldModel: 't_main_category' }).then((res) => {
          let newRes = res.map((m) => {
            return {
              prop: 'extField.' + m.prop,
              label: m.label,
              align: 'center',
              showOverflowTooltip: true
            };
          });
          this.newColumns = [...newRes];
        });
      },
      userSlected(data) {
        console.log(data);
        this.formData.fromId = data.id;
        this.formData.fromUser = data.name;
        this.formData.fromUserPhone = data.phone;
      },
      clearDocumentSource() {
        console.log('清空');
      },
      pickingHandleScroll() {
        console.log('---------pickingHandleScroll------------');
        if (this.showPackingList.length < this.packingList.length) {
          if (this.packingList.length > this.pageSize) {
            this.pickingPageNum += 1;
          }
          this.pickingFetchData();
        }
      },
      pickingFetchData() {
        const start = (this.pickingPageNum - 1) * this.pageSize;
        const end = start + this.pageSize;
        this.showPackingList = this.showPackingList.concat(
          this.packingList.slice(start, end)
        );
      },
      materielHandleScroll() {
        console.log('---------materielHandleScroll------------');
        if (this.showMaterialList.length < this.materialList.length) {
          if (this.materialList.length > this.pageSize) {
            this.materielPageNum += 1;
          }
          this.materielFetchData();
        }
      },
      materielFetchData() {
        const start = (this.materielPageNum - 1) * this.pageSize;
        const end = start + this.pageSize;
        this.showMaterialList = this.showMaterialList.concat(
          this.materialList.slice(start, end)
        );
        console.log(this.showMaterialList);
      },
      // 获取物品列表
      async getListItems() {
        const { data } = await getTreeByGroup({ type: 2 });
        this.goodsLists = data;
      },
      // 打开单据来源弹窗
      openDocumentSourceDialog() {
        this.$refs.outboundRequisitionDialogRef.open();
      },
      tableRowClassName({ row, rowIndex }) {
        console.log(row);
        if (row.result == 1) {
          return 'warning-row';
        } else {
          return '';
        }
      },
      detailData(data, dimension) {
        this.dimension = dimension;
        this.formData.outInDetailList = data;
        this.productList = data.map((productItem) => {
          return {
            ...productItem,
            outInDetailRecordRequestList:
              productItem.outInDetailRecordRequestList.map((packingItem) => {
                return {
                  ...packingItem,
                  categoryName: productItem.categoryName,
                  categoryCode: productItem.categoryCode,
                  materialDetailList: packingItem.materialDetailList.map(
                    (materialItem) => {
                      return {
                        ...materialItem,
                        categoryName: productItem.categoryName,
                        categoryCode: productItem.categoryCode
                      };
                    }
                  )
                };
              })
          };
        });
        // 获取包装维度数据
        const arr = [];
        for (const key in this.productList) {
          for (const k in this.productList[key].outInDetailRecordRequestList) {
            arr.push({
              ...this.productList[key].outInDetailRecordRequestList[k]
            });
          }
        }
        this.packingList = arr;
        // 获取物料维度数据
        let iArr = [];
        arr.forEach((item) => {
          item.materialDetailList.forEach((ele) => {
            iArr.push({ ...ele });
          });
        });
        this.materialList = iArr;
      },
      handleSave() {
        this.$refs.formName.validate(async (valid) => {
          if (valid) {
            if (!this.productList?.length) {
              return this.$message.error('请添加出库明细！');
            }
            let obj = deepClone({ ...this.formData, type: 2 });

            obj.extInfo.sourceBizNo = obj.sourceBizNo;
            obj.fromType = obj.type;
            this.saveLoading = true;
            // 处理物品类型assetType
            obj.extInfo.assetType = obj.extInfo.assetType.join(',');
            // 处理仓库id
            let warehouseId = [];
            let warehouseName = [];
            let warehouseIds = this.productList
              .map((item) => item.warehouseId)
              .flat();
            let warehouseNames = this.productList
              .map((item) => item.warehouseName)
              .flat();
            warehouseIds.forEach((item, index) => {
              if (!warehouseId.includes(item)) {
                warehouseId.push(item);
                warehouseName.push(warehouseNames[index]);
              }
            });
            obj.warehouseIds = warehouseId;
            obj.warehouseNames = warehouseName;
            console.log('2222', obj);
            try {
              const res = await storageApi.outStorage(obj);
              if (res.code == 0) {
                await storageApi.submitInsideTwo({ outInIds: res.data });
                this.$router.push('/warehouseManagement/outgoingManagement');
                this.$message.success('保存成功！');
              }
              this.saveLoading = false;
            } catch (error) {
              this.saveLoading = false;
              this.$message.error('保存失败！');
            }
          } else {
            this.$message.error('请选择领料人！');
          }
        });
      },

      onClear() {
        this.formData.sourceBizNo = '';
        this.warehousingMaterialList = [];
        this.$refs.trees.valueTitle = '';
        this.formData.clientName = '';
        this.formData.clientUser = '';
        this.formData.clientPhone = '';
        this.$forceUpdate();
      },

      rowClass({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 1) {
          return {
            display: 'none',
            background: '#EEEEEE'
          };
        }
        return { background: '#0000' };
      },
      // 部门点击事件
      async auditorDeptClick(data) {
        console.log(data);
        this.formData.extInfo.verifyDeptCode = data?.id;
        this.formData.extInfo.verifyDeptName = data?.name;
        this.formData.verifyId = '';
        this.formData.verifyName = '';
        this.$refs.formName.validateField('verifyDeptName');
        if (data) {
          this.getStaffList(data);
        }
      },

      async getStaffList(data) {
        let res = await warehouseDefinition.getUserPage({
          groupId: data.id,
          size: 9999,
          page: 1
        });
        this.llrLsit = res.list;
      },
      // 初始化用户信息
      async initUserInfo() {
        const res = await warehouseDefinition.tree();
        let info = JSON.parse(localStorage.getItem('info'));
        let obj = res.find(
          (item) => item.id === info.deptIds[info.deptIds.length - 1]
        );
        if (!obj) return;
        this.formData.extInfo.deptCode = obj.id;
        this.formData.extInfo.deptName = obj.name;
        this.formData.extInfo.createUserName = info.name;
        this.formData.createUserId = info.userId;
      },
      // 初始化部门数据
      async initDeptData() {
        const res = await warehouseDefinition.tree();
        this.treeList = this.$util.toTreeData({
          data: res,
          idField: 'id',
          parentIdField: 'parentId'
        });
      },
      addStock() {
        if (
          !(
            this.formData.extInfo.assetType &&
            this.formData.extInfo.assetType.length > 0
          )
        )
          return this.$message.error('请选择出库产品类型');
        if (!this.formData.bizType && this.formData.bizType !== 0)
          return this.$message.error('请选择出库场景');

        this.$refs.assetsDialogRef.open();
      },
      handleBizSceneChange() {
        if (this.formData.extInfo.assetType == 7) {
          this.formData.extInfo.sourceBizNo = '';
        }
        this.formData.sourceBizNo = '';
      }
    },
    watch: {
      packingList: {
        handler(newVal) {
          console.log('包装列表', newVal);
          console.log('当前包装列表加载页数', this.pickingPageNum);
          this.showPackingList = newVal.slice(
            0,
            this.pageSize * (this.pickingPageNum > 0 ? this.pickingPageNum : 1)
          );
        },
        deep: true
      },
      materialList: {
        handler(newVal) {
          console.log('物料列表', newVal);
          console.log('当前物料列表加载页数', this.materielPageNum);
          this.showMaterialList = newVal.slice(
            0,
            this.pageSize *
              (this.materielPageNum > 0 ? this.materielPageNum : 1)
          );
        },
        deep: true
      }
    }
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-row {
    display: flex;
    flex-wrap: wrap;
  }
  ::v-deep.form-table {
    .el-form-item {
      margin-bottom: 0;
    }
    .el-input__inner {
      padding: 0 10px;
    }
  }

  .p20 {
    padding: 20px;
  }
  .el-select,
  .el-date-editor {
    width: 100%;
  }
  .el-form-item {
    margin-bottom: 22px;
  }
  .material {
    margin-top: 20px;
    .flex {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      align-items: center;
      .red {
        color: #ff4949;
      }
    }
  }
  .mt10 {
    margin-top: 10px;
  }
  .mt20 {
    margin-top: 20px;
  }
  .center {
    text-align: center;
  }
</style>