storage/src/view/provider-manage/provider-shipment-manage/my-modal-old.vue

<!--未被引用-->
<template>
  <modal v-model="modal" class-name="vertical-center-modal" width="1000px">
    <div class="content">
      <div class="title">出货管理</div>
      <div class="row">
        <div class="col">
          <div class="label">件号：</div>
          <div class="value">{{ data.materialCode }}</div>
        </div>
        <div class="col">
          <div class="label">物料名称：</div>
          <div class="value">{{ data.materialName }}</div>
        </div>
        <div class="col">
          <div class="label">规格：</div>
          <div class="value">{{ data.spec }}</div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">采购数量：</div>
          <div class="value">{{ data.purchaseQty }}</div>
        </div>
        <div class="col">
          <div class="label">单价：</div>
          <div class="value">{{ data.price }}</div>
        </div>
        <div class="col">
          <div class="label">合同金额：</div>
          <div class="value">{{ data.totalAmount }}</div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">二维码个数：</div>
          <div class="value">{{ tableData.tagCount  }}</div>
        </div>
        <div class="col">
          <div class="label">生成总数量：</div>
          <div class="value">{{ tableData.totalQty  }}</div>
        </div>
        <div class="col">
          <div class="label">已发货：</div>
          <div class="value">{{ tableData.hadShipQty }}</div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">未发货：</div>
          <div class="value">{{ tableData.unShipQty }}</div>
        </div>
        <div class="col"></div>
        <div class="col"></div>
      </div>
      <div class="table">
        <my-table
          ref="table"
          :data="tableData.qrCodeItems"
          :columns="columns"
          :table-filter="tableFilter"
          selectKey="id"
          :table-page="params"
          height="300"
          @event-handle="eventHandle"
          @on-select="getSelect"
          @on-change="changePage"
          >
        </my-table>
      </div>
    </div>
    <div class="footer" slot="footer">
      <Button @click="cancel" class="btn" type="primary">关闭</Button>
    </div>
    <!-- 导入码单 -->
    <modal v-model="importShow" class-name="vertical-center-modal" width="500px">
      <div class="title" slot="header">导入码单</div>
      <div class="footer" slot="footer">
        <Button @click="importCfm" class="btn" type="primary" size="small">提交</Button>
        <Button @click="importCancel" class="btn">取消</Button>
      </div>
      <div class="sub-content">
        <div class="wrap">
          <div class="row">
            <div class="col" style="align-items: center">
              <div class="label">码单文件：</div>

              <Upload action="" ref="uploadFileFlag" :before-upload="beforeFile">
                <Button icon="ios-cloud-upload-outline">
                  上传文件
                </Button>
              </Upload>
            </div>
          </div>
          <div class="row" v-if="importFileName">
            <div class="col" style="position:relative;">
              {{ importFileName }}
              <Icon type="md-close" style="position:absolute;right: 0;" @click="removeFile" />
            </div>
          </div>
<!--          <div class="row">-->
<!--            <div class="col">-->
<!--              <span style="color: red;margin-right: 10px">导入码单模板下载</span>-->
<!--              <a href="https://fzjx.oss-cn-hangzhou.aliyuncs.com/order/20211014/211014041759903892.xlsx">点击下载</a>-->
<!--            </div>-->
<!--          </div>-->
        </div>
      </div>
    </modal>
    <!-- 添加二维码 -->
    <modal v-model="addShow" class-name="vertical-center-modal" width="500px">
      <div class="title" slot="header">添加二维码</div>
      <div class="footer" slot="footer">
        <Button @click="addQrCfm" class="btn" type="primary" size="small">提交</Button>
        <Button @click="addQrCancel" class="btn">取消</Button>
      </div>
      <div class="sub-content">
        <div class="wrap">
          <div class="row">
            <div class="col">
              <div class="label">合同编号：</div>
              <div class="value">{{ data.purchaseBillNo }}</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">物料编码：</div>
              <div class="value">{{ data.materialCode }}</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">物料名称：</div>
              <div class="value">{{ data.materialName }}</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">物料规格：</div>
              <div class="value">{{ data.spec }}</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">物料单位：</div>
              <div class="value">{{ data.unitName }}</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">物料长度：</div>
              <div class="value">
                <Input v-model="addQrInputWidth" size="small" @on-enter="addQrCfm"/>
              </div>
            </div>
          </div>
        </div>
        <div class="row" v-if="addQrType === 'dispatch'" style="padding: 10px 20px;">
          <div class="col">
            <div class="label">添加个数：</div>
            <div class="value">
              <Input v-model="addQrInputNum" size="small" @on-enter="addQrCfm"/>
            </div>
          </div>
        </div>
      </div>
    </modal>
    <!-- 出货 -->
    <modal v-model="shipmentShow" class-name="vertical-center-modal" width="500px">
      <div class="title" slot="header">请输入物流信息</div>
      <div class="sub-content" style="padding: 20px">
        <div class="row">
          <div class="col">
            <div class="label">出货方式：</div>
            <div class="value">
              <RadioGroup v-model="shipmentType">
                <Radio label="0">
                  <span>物流公司</span>
                </Radio>
                <Radio label="1">
                  <span>包车</span>
                </Radio>
              </RadioGroup>
            </div>
          </div>
        </div>
        <div class="row" v-if="shipmentType === '0'">
          <div class="col">
            <div class="label">物流名称：</div>
            <div class="value">
              <Select v-model="shipmentExpress" filterable size="small">
                <Option value="中通">中通</Option>
                <Option value="申通">申通</Option>
                <Option value="顺丰">顺丰</Option>
                <Option value="德邦">德邦</Option>
              </Select>
            </div>
          </div>
          <div class="col">
            <div class="label">物流单号：</div>
            <div class="value">
              <Input v-model="shipmentOrderNo" size="small"/>
            </div>
          </div>
        </div>
        <div class="row" v-if="shipmentType === '1'">
          <div class="col">
            <div class="label">司机姓名：</div>
            <div class="value">
              <Input v-model="shipmentName" size="small"/>
            </div>
          </div>
          <div class="col">
            <div class="label">联系电话：</div>
            <div class="value">
              <Input v-model="shipmentPhone" size="small"/>
            </div>
          </div>
        </div>
        <div class="row" v-if="shipmentType === '1'">
          <div class="col">
            <div class="label">车牌号码：</div>
            <div class="value">
              <Input v-model="shipmentCarNo" size="small"/>
            </div>
          </div>
          <div class="col"></div>
        </div>
        <div class="row">
          <div class="col" style="align-items: flex-start">
            <div class="label">备注：</div>
            <div class="value">
              <Input v-model="shipmentRemark" type="textarea"/>
            </div>
          </div>
        </div>
        </div>
        <div class="footer" slot="footer">
          <Button @click="shipmentCfm" class="btn" type="primary" size="small">提交</Button>
          <Button @click="shipmentCancel" class="btn">取消</Button>
        </div>
    </modal>
    <!-- 打印二维码标签内容 -->
    <div class="print-wrap">
      <div ref="print">
        <div
          v-for="(item, index) in printList"
          :key="index"
          class="print"
          style="box-sizing: border-box;height: calc(150mm - 21px);width: calc(100mm - 20px);
          margin: 10px;border: 1px solid #000;page-break-after: always;
          ">
          <div class="top"
               style="height: 200px;display: flex;align-items: center;
               border-bottom: 1px solid #000;box-sizing: border-box;overflow: hidden;"
          >
            <div class="left" style="padding: 10px;display: flex;align-items: center;justify-content: center;flex-direction: column">
              <vue-qr :text="item.qrCode" :size="120" :margin="0"></vue-qr>
              {{ item.number }}
            </div>
            <div class="right"
                 style="height: 100%;
                 padding: 10px;
                 flex: 2;
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 font-size: 12px;
                 border-left: 1px solid #000;
              ">
              RFID标签粘贴区
<!--              <div class="row" style="font-size: 18px;font-weight: bold;">物料编码：{{ item.materialCode }}</div>-->
<!--              <div class="row" style="font-size: 18px;font-weight: bold;">物料名称：{{ item.materialName }}</div>-->
<!--              <div class="row" style="font-size: 18px;font-weight: bold;">标签编码：{{ item.rfidCode }}</div>-->
<!--              <div class="row" style="font-size: 18px;font-weight: bold;">门幅：{{ item.width  }}</div>-->
<!--              <div class="row" style="font-size: 18px;font-weight: bold;">克重：{{ item.unitWeight }}</div>-->
<!--              <div class="row" style="font-size: 18px;font-weight: bold;">长度：{{ item.quantity }}米</div>-->
            </div>
          </div>
          <div class="bottom"
               style="
                  height: calc(100% - 200px);
                  "
          >
            <div
              style="border-bottom: 1px solid #000;
              padding: 0 10px;
              width: calc(100% - 20px);
              height: 35%;
              word-break:break-all;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: space-around;
              "
            >
              <div class="row" style="font-size: 18px;font-weight: bold;">合同编号：{{ data.purchaseBillNo }}</div>
              <div class="row" style="font-size: 18px;font-weight: bold;">供应商：{{ data.supplierName }}</div>
              <div class="row" style="font-size: 18px;font-weight: bold;">出货日期：{{ item.createdTime }}</div>
            </div>
            <div style="border-bottom: 1px solid #000;padding: 0 10px;width: calc(100% - 20px);height: 25%;display: flex;align-items: center;justify-content: center;font-size: 24px;font-weight: bold;text-align: center;">
              {{ item.materialName }}
            </div>
            <div style="border-bottom: 1px solid #000;padding: 0 10px;width: calc(100% - 20px);height: 25%;display: flex;align-items: center;justify-content: center;font-size: 38px;font-weight: bold;text-align: center;">
              数量：{{ item.quantity }}
            </div>
            <div style="width: 100%;
              height: 15%;
              display: flex;justify-content: space-between;align-items: center;;
            ">
              <div style="font-size: 24px;font-weight: bold;text-align: center;flex: 1;">门幅：{{ item.width }}</div>
              <div style="font-size: 24px;font-weight: bold;text-align: center;flex: 1;">克重：{{ item.unitWeight }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </modal>
</template>

<script>
import {
  GetSupplierQRCode,
  AddSupplierQRCode,
  AddSupplierShipOut,
  DeleteSupplierQRCode,
  PrinterSupplierQRCode,
  CompletePurchase
} from '@/api/supplierShip'
import MyTable from '_c/my-table/my-table'
import VueQr from 'vue-qr'
import excel from '@/libs/excel'
export default {
  name: 'my-modal',
  data () {
    return {
      tipShow: false,
      importFileName: '',
      importData: [],
      uploadFile: null,
      stockTagIds: [], // 表格勾选的id
      printList: [], // 打印数据
      tableData: [],
      shipmentCarNo: '',
      shipmentPhone: '',
      shipmentName: '',
      shipmentType: '0',
      shipmentExpress: '',
      shipmentOrderNo: '',
      shipmentRemark: '',
      addQrInputNum: '',
      addQrInputWidth: '',
      addQrType: '', // add单个添加 dispatch批量添加
      show: false, // 合同信息
      addShow: false, // 添加二维码
      importShow: false, // 导入码单
      shipmentShow: false, // 出货
      modal: false,
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '二维码编码',
          key: 'number',
          width: 100,
          align: 'center'
        },
        {
          title: '物料编码',
          key: 'materialCode',
          minWidth: 150
        },
        {
          title: '物料名称',
          key: 'materialName',
          minWidth: 200
        },
        {
          title: '物料数量',
          key: 'quantity',
          minWidth: 150
        },
        {
          title: '生成时间',
          key: 'createdTime',
          minWidth: 150
        },
        {
          title: '打印状态',
          key: 'hadPrinter',
          minWidth: 120,
          align: 'center',
          fixed: 'right',
          render: (h, params) => {
            return h('span', params.row.hadPrinter ? '已打印' : '未打印')
          },
          renderHeader: (h, params) => {
            let _this = this
            return h('div', [
              h('span', '打印状态'),
              _this.$createElement('Poptip',
                {
                  ref: 'filter-tip',
                  props: {
                    transfer: true
                  }
                },
                [
                  h('Icon', {
                    props: {
                      type: 'ios-funnel'
                    },
                    style: {
                      padding: '0 2px'
                    }
                  }),
                  _this.$createElement('div',
                    {
                      slot: 'content'
                    },
                    [
                      h('div',
                        {
                          class: 'tip-item',
                          style: {
                            padding: '10px',
                            textAlign: 'center',
                            cursor: 'pointer',
                            borderBottom: '1px solid #eee'
                          },
                          on: {
                            click () {
                              _this.$refs['filter-tip'].cancel()
                              _this.params.hadPrinter = ''
                              _this.getSupplierQRCode()
                            }
                          }
                        },
                        '全部'),
                      h('div',
                        {
                          class: 'tip-item',
                          style: {
                            padding: '10px',
                            textAlign: 'center',
                            cursor: 'pointer',
                            borderBottom: '1px solid #eee'
                          },
                          on: {
                            click () {
                              _this.$refs['filter-tip'].cancel()
                              _this.params.hadPrinter = false
                              _this.getSupplierQRCode()
                            }
                          }
                        },
                        '未打印'),
                      h('div',
                        {
                          class: 'tip-item',
                          style: {
                            textAlign: 'center',
                            cursor: 'pointer',
                            padding: '10px'
                          },
                          on: {
                            click () {
                              _this.$refs['filter-tip'].cancel()
                              _this.params.hadPrinter = true
                              _this.getSupplierQRCode()
                            }
                          }
                        },
                        '已打印')
                    ]
                  )
                ]
              )
            ])
          }
        },
        {
          title: '出货状态',
          key: 'hadShipment',
          minWidth: 100,
          align: 'center',
          fixed: 'right',
          render: (h, params) => {
            return h('span', params.row.hadShipment ? '已出货' : '未出货')
          },
          renderHeader: (h, params) => {
            let _this = this
            return h('div', [
              h('span', '出货状态'),
              _this.$createElement('Poptip',
                {
                  ref: 'filter-tip2',
                  props: {
                    transfer: true
                  },
                  attrs: {
                    width: '150px'
                  }
                },
                [
                  h('Icon', {
                    props: {
                      type: 'ios-funnel'
                    },
                    style: {
                      padding: '0 2px'
                    }
                  }),
                  _this.$createElement('div',
                    {
                      slot: 'content'
                    },
                    [
                      h('div',
                        {
                          class: 'tip-item',
                          style: {
                            padding: '10px',
                            textAlign: 'center',
                            cursor: 'pointer',
                            borderBottom: '1px solid #eee'
                          },
                          on: {
                            click () {
                              _this.$refs['filter-tip2'].cancel()
                              _this.params.hadShipment = ''
                              _this.getSupplierQRCode()
                            }
                          }
                        },
                        '全部'),
                      h('div',
                        {
                          class: 'tip-item',
                          style: {
                            padding: '10px',
                            textAlign: 'center',
                            cursor: 'pointer',
                            borderBottom: '1px solid #eee'
                          },
                          on: {
                            click () {
                              _this.$refs['filter-tip2'].cancel()
                              _this.params.hadShipment = false
                              _this.getSupplierQRCode()
                            }
                          }
                        },
                        '未出货'),
                      h('div',
                        {
                          class: 'tip-item',
                          style: {
                            textAlign: 'center',
                            cursor: 'pointer',
                            padding: '10px'
                          },
                          on: {
                            click () {
                              _this.$refs['filter-tip2'].cancel()
                              _this.params.hadShipment = true
                              _this.getSupplierQRCode()
                            }
                          }
                        },
                        '已出货')
                    ]
                  )
                ]
              )
            ])
          }
        }
      ],
      tableFilter: [
        {
          name: 'span',
          text: '物料详情',
          style: {
            fontSize: '14px',
            fontWeight: 'bold'
          }
        },
        {
          name: 'Button',
          type: 'error',
          text: '删除',
          e: 'del',
          align: 'right'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '出货',
          e: 'shipment',
          align: 'right'
        },
        // {
        //   name: 'Button',
        //   type: 'primary',
        //   text: '结束合同',
        //   e: 'over',
        //   align: 'right'
        // },
        {
          name: 'Button',
          type: 'primary',
          text: '打印二维码',
          width: '100px',
          e: 'print',
          align: 'right'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '导入码单',
          width: '100px',
          e: 'importExcel',
          align: 'right'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '批量添加',
          e: 'addDispath',
          align: 'right'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '添加二维码',
          width: '100px',
          e: 'addQr',
          align: 'right'
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  components: {
    MyTable,
    VueQr
  },
  props: {
    data: {
      type: Object,
      default () {
        return {}
      }
    },
    value: {
      type: Boolean,
      default: false,
      require: true
    }
  },
  watch: {
    value: {
      handler (n) {
        this.modal = n
      },
      immediate: true
    },
    modal (n) {
      this.$emit('input', n)
      if (n) {
        this.getSupplierQRCode()
      }
    }
  },
  methods: {
    test () {
      
    },
    /* 移出文件 */
    importCancel () {
      this.importFileName = ''
      this.importData = []
      this.importShow = false
    },
    /* 移出文件 */
    removeFile () {
      this.importFileName = ''
      this.importData = []
    },
    /* 获取上传文件 */
    beforeFile (file) {
      const fileExt = file.name.split('.').pop().toLocaleLowerCase()
      this.uploadFile = file
      if (fileExt === 'xlsx' || fileExt === 'xls') {
        this.readFile(file)
        this.file = file
      } else {
        this.$Notice.warning({
          title: '文件类型错误',
          desc: '文件：' + file.name + '不是EXCEL文件，请选择后缀为.xlsx或者.xls的EXCEL文件。'
        })
      }
      return false
    },
    readFile (file) {
      const reader = new FileReader()
      reader.readAsArrayBuffer(file)
      reader.onloadstart = e => {
      }
      reader.onprogress = e => {
      }
      reader.onerror = e => {
        this.$Message.error('文件读取出错')
      }
      reader.onload = e => {
        const data = e.target.result
        const { results } = excel.read(data, 'array') // 这里的tableData就是拿到的excel表格中的数据
        console.log('?????exceldata--------------')
        console.log(results)
        let array = []
        results.forEach((item, index) => {
          if (Object.values(item)[0] === '卷号') {
            let data = Object.values(results[index + 1])
            data.shift()
            array.push(...data)
          }
        })
        this.importData = array
        this.importFileName = file.name
        console.log(array)
      }
    },
    getSelect (data) {
      console.log('table----data')
      console.log(data)
      this.printList = []
      this.printList = [ ...data ]
      // this.stockTagIds = data.filter(item => !item.hadPrinter).map(item => item.id)
      // this.stockTagIds = data.map(item => item.id)
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getSupplierQRCode()
    },
    // 获取物料列表
    getSupplierQRCode () {
      GetSupplierQRCode({
        ...this.params,
        purchaseBillNo: this.data.purchaseBillNo
      }).then(res => {
        if (res.code === 0) {
          this.printList = []
          this.tableData = []
          this.$refs.table.tempList = []
          this.tableData = res.result
          this.params.total = res.result.tagCount
        }
      })
    },
    // 检索条件事件处理
    eventHandle (option) {
      switch (option._evnet) {
        case 'addQr':
          this.addQrType = 'add'
          this.addShow = true
          break
        case 'addDispath':
          this.addQrType = 'dispatch'
          this.addShow = true
          break
        case 'shipment':
          this.shipmentShow = true
          break
        case 'del':
          if (this.printList.length === 0) {
            return this.$Message.error('请选择数据！')
          }
          this.$MyModal.show({ text: '是否删除？' }).$on('confirm', () => {
            DeleteSupplierQRCode({
              stockTagIds: this.printList.map(item => item.id)
            }).then(res => {
              if (res.code === 0) {
                this.$Message.info(res.msg)
                this.printList = []
                this.$refs.table.clearTempList()
                this.getSupplierQRCode()
              }
            })
          })
          break
        case 'print':
          this.print()
          break
        case 'importExcel':
          this.importShow = true
          break
        case 'over':
          if (this.printList.length === 0) {
            return this.$Message.error('请选择数据！')
          }
          CompletePurchase()
          break
      }
    },
    print () {
      let arr = this.printList.filter(item => !item.hadPrinter).map(item => item.id)
      console.log(this.printList)
      console.log(arr)
      if (arr.length > 0) {
        PrinterSupplierQRCode({
          stockTagIds: arr
        }).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg || '打印成功！')
            this.printList = []
            this.getSupplierQRCode()
          }
        })
      }
      if (this.printList.length > 0) {
        // 未改成vue-easy-print
        this.$print(this.$refs.print)
      }
    },
    cancel () {
      this.stockTagIds = []
      this.printList = []
      this.modal = false
    },
    addQrCancel () {
      this.addQrInputWidth = ''
      this.addQrInputNum = ''
      this.addShow = false
    },
    shipmentCancel () {
      this.shipmentType = '0'
      this.shipmentExpress = ''
      this.shipmentOrderNo = ''
      this.shipmentRemark = ''
      this.shipmentName = ''
      this.shipmentPhone = ''
      this.shipmentCarNo = ''
      this.shipmentShow = false
    },
    shipmentCfm () {
      let arr = this.printList.filter(item => !item.hadShipment).map(item => item.id)
      if (arr.length === 0) {
        return this.$Message.error('暂无需要出货的物料！')
      }
      AddSupplierShipOut({
        purchaseBillNo: this.data.purchaseBillNo,
        shipOutWay: this.shipmentType,
        expressShipNo: this.shipmentOrderNo,
        expressName: this.shipmentExpress,
        driverName: this.shipmentName,
        contactTel: this.shipmentPhone,
        plateNumber: this.shipmentCarNo,
        remark: this.shipmentRemark,
        stockTagIds: arr
      }).then(res => {
        if (res.code === 0) {
          this.$Message.info(res.msg || '出货成功！')
          this.getSupplierQRCode()
          this.shipmentCancel()
        }
      })
    },
    // 二维码添加
    addQrCfm () {
      if (!this.addQrInputWidth) {
        return this.$Message.error('请输入物料长度')
      }
      AddSupplierQRCode({
        purchaseBillNo: this.data.purchaseBillNo,
        quantity: this.addQrInputWidth,
        addNum: this.addQrInputNum || 1
      }).then(res => {
        if (res.code === 0) {
          this.$Message.info(res.msg || '添加成功！')
          this.getSupplierQRCode()
          this.addQrInputWidth = ''
          this.addQrInputNum = ''
        }
      })
    },
    // 码单添加
    importCfm () {
      if (this.importData.length === 0) {
        return this.$Message.error('导入码单数据为空！')
      }
      AddSupplierQRCode({
        purchaseBillNo: this.data.purchaseBillNo,
        supAddQRCodeWay: 1, // 0手动添加 1excel导入,
        lengthItems: this.importData
      }).then(res => {
        if (res.code === 0) {
          this.$Message.info(res.msg || '添加成功！')
          this.getSupplierQRCode()
          this.importShow = false
          this.importFileName = ''
          this.importData = []
        }
      })
    }
  },
  beforeUpdate () {

  }
}
</script>

<style lang="less" scoped>
.content {
  overflow: hidden;
  padding: 20px 40px;
  font-size: 14px;
  .title {
    padding-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }
  .row {
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .col {
      flex: 1;
      display: flex;
      align-items: flex-start;
      .label {
      }
      .value {
        flex: 1;
      }
    }
  }
  .text {
    padding: 10px 0;
  }
  .table {
    //height: ~"calc(100% - 100px)";
    overflow: auto;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #dcdee2;
  }
}
.sub-content {
  padding: 0 20px;
  .title {
    padding: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }
  .wrap {
    margin: 10px;
    padding: 10px 20px;
    border: 1px solid #dcdee2;
    border-radius: 5px;
  }
  .row {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    &:last-child {
      margin-bottom: 0;
    }
    .col {
      margin-right: 5px;
      flex: 1;
      display: flex;
      align-items: flex-start;
      .label {
        width: 70px;
      }
      .value {
        width: ~"calc(100% - 70px)";
      }
    }
  }
}
.print-wrap {
  width: 100vw;
  height: 100vh;
  display: none;
  img {
    width: 50%;
  }
}
/deep/ .ivu-modal-body {
  padding: 0;
  max-height: 80vh;
  overflow: auto;
  border-radius: 20px 20px 0 0;
}
/deep/ .ivu-upload-list {
  display: none;
}
/deep/ .tip-item {
  &:hover {
    background: #eeeeee;
  }
}
</style>