supply-front/src/views/supply/pickup/check.vue

<template>
  <div class="app-container">
    <div v-show="!isShowPrint">
      <div class="main-title" style="margin-top: 0">
        <div class="title">仓库提货确认</div>
      </div>

      <div>
        <el-form ref="screenForm" :model="screenForm" label-width="96px" size="mini" label-position="right">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-form-item label="提货方式">
                <el-radio-group v-model="check" @change="handleReset">
                  <el-radio :label="1">商家自提</el-radio>
                  <el-radio :label="0">物流公司</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <template v-if="!check">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="8" :lg="6">
                <el-form-item label="物流公司" prop="logisticsId">
                  <el-select v-model="screenForm.logisticsId" placeholder="全部" style="width: 100%">
                    <el-option
                      :label="item.logisticsCompany"
                      :value="item.id"
                      v-for="(item, index) in companyList"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :lg="6">
                <el-form-item label="经销商" prop="customerId">
                  <!-- v-select-loadmore:[myData]="loadmore" -->
                  <el-select v-model="screenForm.customerId" placeholder="选择经销商" clearable filterable>
                    <el-option v-for="item in dealerList2" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :lg="6">
                <el-form-item label="仓库" prop="warehouse">
                  <el-select v-model="screenForm.warehouse" placeholder="选择仓库" clearable filterable>
                    <el-option v-for="item in warehouseList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :lg="6">
                <el-button size="mini" type="primary" @click="getList">查 询</el-button>
              </el-col>
            </el-row>
          </template>
          <template v-else>
            <el-row :gutter="20">
              <el-col :xs="24" :sm="8" :lg="6">
                <el-form-item label="提货人手机号" prop="phone">
                  <el-input v-model="screenForm.phone" placeholder="请输入提货人手机号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="3" :lg="3">
                <el-button size="mini" type="primary" @click="getCode" :disabled="!screenForm.phone || countDown != 60"
                  >{{ countDown == 60 ? getCodeText : '重新获取(' + countDown + 's)' }}
                </el-button>
              </el-col>
              <el-col :xs="24" :sm="8" :lg="8">
                <el-form-item label="验证码" prop="code">
                  <el-input v-model="screenForm.code" placeholder="请输入验证码"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="3" :lg="3">
                <el-button
                  size="mini"
                  type="primary"
                  :disabled="!screenForm.phone || !screenForm.code"
                  @click="getPickupManInfo"
                  >确 认
                </el-button>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :xs="24" :sm="8" :lg="8">
                <el-form-item label="提货人姓名" prop="name">
                  <!-- <el-input v-model="screenForm.name" placeholder="请通过手机验证获取" ></el-input> -->
                  <el-select
                    style="width: 100%"
                    v-model="screenForm.name"
                    placeholder="请选提货人姓名"
                    clearable
                    filterable
                    @change="onChage"
                  >
                    <el-option
                      v-for="item in userList"
                      :key="item.id"
                      :label="`${item.takerName} - ${item.customerName}`"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :lg="8">
                <el-form-item label="提货人身份证" prop="idCard">
                  <el-input v-model="screenForm.idCard" placeholder="请通过手机验证获取" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :xs="24" :sm="8" :lg="8">
                <el-form-item label="经销商" prop="customerName">
                  <el-input v-model="screenForm.customerName" placeholder="经销商" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :lg="8">
                <el-form-item label="仓库" prop="warehouse">
                  <el-select
                    v-model="screenForm.warehouse"
                    placeholder="请选择仓库"
                    filterable
                    clearable
                    style="width: 100%"
                  >
                    <el-option
                      :label="item.name"
                      :value="item.id"
                      v-for="(item, index) in warehouseList"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="5" :lg="5">
                <el-button size="mini" type="primary" @click="getList">查 询</el-button>
              </el-col>
            </el-row>
          </template>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-form-item prop="status" label-width="0">
                <el-radio-group v-model="screenForm.status" size="mini" @change="getList()">
                  <el-radio-button v-for="(item, index) in statusList" :key="index" :label="item.value"
                    >{{ item.label }}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div>
        <el-form :model="screenForm" ref="form" label-width="120px" size="mini">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="8" :lg="8">
              <el-form-item label="申请发货单号">
                <el-input v-model="screenForm.invoiceId" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="8">
              <el-button size="mini" type="primary" @click="getList">查 询</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="main-title">
        <div class="title">提货单</div>
        <div class="fr">
          <ExportButton :disabled="disableExport" :exUrl="'pick/storeExport'" :exParams="exParams" />
        </div>
      </div>

      <div class="mymain-container">
        <div class="table">
          <el-table
            ref="table"
            v-loading="listLoading"
            :data="dataList"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            stripe
            @select="handleSelect"
            @select-all="handleSelectAll"
          >
            <el-table-column align="left" type="selection" width="55"></el-table-column>
            <!-- <el-table-column align="left" label="操作" width="100" fixed="left">
              <template slot-scope="scope">
                <el-button type="text" @click="toPrint(scope.row)">打印</el-button>
              </template>
            </el-table-column> -->
            <el-table-column align="left" label="状态" min-width="100" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.printNum ? '已打单(' + scope.row.printNum + ')' : '未打单' }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="是否上楼" prop="isUp" min-width="160" show-overflow-tooltip >
              <template v-slot="row">
                {{ row.isUp=='YES'?'是':'否' }}
              </template>
            </el-table-column>
          <el-table-column align="left" label="是否卸货" prop="isDischarge" min-width="160" show-overflow-tooltip >
            <template v-slot="row">
                {{ row.isDischarge=='YES'?'是':'否' }}
              </template>
          </el-table-column>
            <el-table-column align="left" label="信息密钥" prop="informationKey" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copyText="scope.row.informationKey" />
                <span>{{ scope.row.informationKey }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="经销商编码"
              prop="customerNumber"
              min-width="100"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <CopyButton :copyText="scope.row.customerNumber" />
                <span>{{ scope.row.customerNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="经销商名称" prop="customerName" min-width="250" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copyText="scope.row.customerName" />
                <span>{{ scope.row.customerName }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="预约日期" prop="pickTime" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.pickTime | dateToDayFilter }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="提货时段" min-width="100" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.pickStatus == '1' ? '上午' : '下午' }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="销售订单号" prop="mainOrderId" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton
                  :copyText="
                    scope.row.orderType === 'TRADE' ||
                    scope.row.orderType === 'HOME' ||
                    scope.row.orderType === 'REQUISITION_TRADE' ||
                    scope.row.orderType === 'REQUISITION_HOME'
                      ? scope.row.enginOrderNo
                      : scope.row.mainOrderId
                  "
                />
                <span>{{
                  scope.row.orderType === 'TRADE' ||
                  scope.row.orderType === 'HOME' ||
                  scope.row.orderType === 'REQUISITION_TRADE' ||
                  scope.row.orderType === 'REQUISITION_HOME'
                    ? scope.row.enginOrderNo
                    : scope.row.mainOrderId
                }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="发货申请单号" prop="invoiceId" min-width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copyText="scope.row.invoiceId" />
                <span>{{ scope.row.invoiceId }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="销售类型"
              prop="saleTypeName"
              min-width="100"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column align="left" label="物料编码" prop="materialCode" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copyText="scope.row.materialCode" />
                <span>{{ scope.row.materialCode }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="产品编码"
              prop="materialOldNumber"
              min-width="140"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <CopyButton :copyText="scope.row.materialOldNumber" />
                <span>{{ scope.row.materialOldNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="产品名称" prop="materialName" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copyText="scope.row.materialName" />
                <span>{{ scope.row.materialName }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="规格型号" prop="specification" min-width="350" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copyText="scope.row.specification" />
                <span>{{ scope.row.specification }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="单位"
              prop="unit"
              min-width="100"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="left"
              label="数量"
              prop="refundableQty"
              min-width="100"
              show-overflow-tooltip
            ></el-table-column>
            <!-- <el-table-column align="left" label="单价" prop="price" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" label="金额" prop="payAmount" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" label="使用返利金额" prop="payRebateAmount" min-width="120" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" label="格力折扣" prop="totalDiscAmount" min-width="100" show-overflow-tooltip></el-table-column> -->
            <el-table-column
              align="left"
              label="仓库"
              prop="correspondName"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column align="left" label="提货方式" prop="pickType" min-width="100" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.pickType == '1' ? '自提' : '物流快递' }}
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="提货人/物流公司"
              prop="takerName"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{ scope.row.pickType == '1' ? scope.row.takerName : scope.row.pickLogistics }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="pagination clearfix">
        <div class="fr">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[200, 300, 500]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal"
          >
          </el-pagination>
        </div>
      </div>

      <div class="page-footer">
        <div class="footer">
          <el-button
            type="primary"
            @click="toPrint"
            :disabled="tableSelection.length < 1"
            v-if="$checkBtnRole('print', $route.meta.roles)"
            >打印发货单
          </el-button>
        </div>
      </div>
    </div>

    <el-dialog
      title="密码确认"
      :visible.sync="isShowDialog"
      :show-close="false"
      width="40%"
      :close-on-click-modal="false"
    >
      <el-form ref="dialogForm" :model="dialogForm" :rules="dialogFormRules" label-position="right" label-width="70px">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :lg="24">
            <el-form-item label="密码" prop="password">
              <el-input v-model="dialogForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="12">
            <el-form-item label="操作人" prop="createMan">
              <el-input v-model="dialogForm.createMan" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="12" style="height: 51px">
            <el-form-item label="操作日期" prop="createDate">
              <el-date-picker
                v-model="dialogForm.createDate"
                readonly
                type="date"
                value-format="yyyy-MM-dd"
                style="width: 100%"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialogForm">取 消</el-button>
        <el-button type="primary" @click="submitDialogForm">确 定</el-button>
      </div>
    </el-dialog>
    <print-preview ref="preView" />

    <!-- <PickupPrint :listItem="queryItem" v-if="isShowPrint" @backListFormDetail="backList" /> -->
  </div>
</template>

<script>
import {
  getPickupList,
  getCode,
  getCompanyList,
  getPickupManInfo,
  checkPassword,
  getWarehouseList,
  getDetailPrintDisString
} from '@/api/supply/pickup'
import print from '@/mixin/print'

import { getDealerList, getListCustomer } from '@/api/basic_data/dealer'

import PickupPrint from '@/views/supply/pickup/components/pickup_print'

import printPreview from './components/design/preview.vue'

export default {
  components: {
    PickupPrint,
    printPreview
  },
  mixins: [print],
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      dataList: null, // 列表数据
      listLoading: false, // 列表加载loading
      screenForm: {
        // 筛选表单数据
        phone: '',
        code: '',
        name: '',
        idCard: '',
        manId: '',
        status: 0,
        customerName: '',
        warehouse: '',
        customerId: '',
        logisticsId: '',
        storeId: '',
        invoiceId: ''
      },
      statusList: [
        { label: '未打单', value: 0 },
        { label: '已打单', value: 1 }
      ],
      warehouseList: [],

      getCodeText: '获取验证码',
      countDown: 60,
      timer: null,
      myData: {
        class: '.el-select-dropdown .el-select-dropdown__wrap'
      },
      tableSelection: [],
      companyList: [],
      queryItem: {},
      isShowPrint: false,
      dealerList: [],
      isShowDialog: false,
      dialogForm: {
        password: '',
        createMan: '',
        createDate: ''
      },
      dialogFormRules: {
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      userList: [],
      isShowDialog: false,
      radio: 0,
      check: 1,
      logisticsArr: [],
      pageNum: 1,
      listTotal: 0,
      dealerList2: [],
      // 限制导出
      disableExport: true
    }
  },

  computed: {
    exParams() {
      return {
        ...this.screenForm,
        correspondId:this.screenForm.warehouse,
        takerId: this.screenForm.manId, 
        status: this.screenForm.status,
      }
    }
  },
  watch: {
    'screenForm.warehouse'() {
      if (this.check == 1) {
        this.disableExport = !(this.screenForm.manId && this.screenForm.warehouse)
      } else {
        this.disableExport = !(this.screenForm.logisticsId && this.screenForm.warehouse)
      }
    }
  },
  created() {
    this.getDealerList()
    this.getCompanyList()
    this.getWarehouseList()
  },
  // activated(){
  //   this.initPrint()
  // },
  mounted() {
    this.initPrint()
  },
  methods: {
    handleReset() {
      this.screenForm.customerId = ''
      this.screenForm.logisticsId = ''
      this.screenForm.warehouse = ''
      this.screenForm.invoiceId = ''
      this.screenForm.status = '0'
      this.dataList = []
      this.listTotal = 0
      this.listLoading = false
    },
    getDate() {
      var date = new Date()
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate
      return currentdate
    },
    async getDealerList() {
      const res = await getDealerList({ pageNum: 1, pageSize: -1 })
      // this.dealerList = [...this.dealerList,...res.data.records];
      this.dealerList2 = res.data.records
      this.dealerList = res.data.records
      this.listTotal = res.data.total
    },
    loadmore() {
      let len = Math.ceil(this.listTotal / 50)
      if (this.pageNum <= len) {
        this.pageNum++
        this.getDealerList()
      }
    },
    // 获取物流公司列表
    getCompanyList() {
      getCompanyList({
        pageNum: 1,
        pageSize: -1
      }).then(res => {
        this.companyList = res.data.records
      })
    },
    getLogisticsId(e) {
      if (this.companyList.length) {
        const item = this.companyList.find(k => k.id === e)
      this.screenForm.company = item.logisticsCompany
      }
  
    },
    // 获取仓库列表
    getWarehouseList() {
      getWarehouseList({
        pageNum: 1,
        pageSize: -1
      }).then(res => {
        this.warehouseList = res.data.records
      })
    },

    // 获取短信验证码
    getCode() {
      getCode({ mobile: this.screenForm.phone }).then(res => {
        this.$successMsg('短信已发送')
        this.countDown--
        this.timer = setInterval(() => {
          this.countDown--
          if (this.countDown == 0) {
            this.countDown = 60
            this.getCodeText = '重新获取'
            clearInterval(this.timer)
          }
        }, 1000)
      })
    },

    // 获取提货人信息
    getPickupManInfo() {
      getPickupManInfo({
        mobile: this.screenForm.phone,
        code: this.screenForm.code
      }).then(res => {
        this.$successMsg('验证成功')
        this.screenForm.name = `${res.data[0].takerName} - ${res.data[0].customerName}`
        this.screenForm.idCard = res.data[0].identity
        this.screenForm.manId = res.data[0].id
        this.screenForm.customerName = res.data[0].customerName
        this.screenForm.customerId = res.data[0].customerId
        this.userList = res.data
        this.getListCustomer()
      })
    },

    onChage(e) {
      const userInfo = this.userList.filter(k => {
        return e === k.id
      })
      this.screenForm.name = `${userInfo[0].takerName} - ${userInfo[0].customerName}`
      this.screenForm.idCard = userInfo[0].identity
      this.screenForm.manId = userInfo[0].id
      this.screenForm.customerName = userInfo[0].customerName
      this.screenForm.customerId = userInfo[0].customerId
    },

    getListCustomer() {
      getListCustomer({
        keyword: '',
        phone: this.screenForm.phone,
        pageNum: 1,
        pageSize: -1
      }).then(res => {
        this.dealerList = res.data.records
        // this.screenForm.customerNumber = this.dataList[0].number
      })
    },

    // 查询列表
    getList() {
      if (this.check == '1') {
        if (!this.screenForm.manId) {
          return this.$errorMsg('请先查询提货人信息')
        }
      } else {
        if (!this.screenForm.logisticsId) {
          return this.$errorMsg('请选择物流公司')
        }
      }
      if (!this.screenForm.warehouse) {
        return this.$errorMsg('请选择仓库')
      }
      this.listLoading = true

      const params = {
        pageNum: this.currentPage,
        pageSize: 200,
        // takerId: this.screenForm.manId,
        status: this.screenForm.status,
        takerPhone: this.screenForm.phone,
        // customerName:this.screenForm.customerName,
        correspondId: this.screenForm.warehouse,
        customerId: this.screenForm.customerId,
        logisticsId: this.screenForm.logisticsId,
        invoiceId: this.screenForm.invoiceId
      }
      getPickupList(params).then(res => {
        this.dataList = res.data.records
        this.listTotal = res.data.total
        this.listLoading = false
      })
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getList()
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },

    backList() {
      this.queryItem = {}
      this.isShowPrint = false
    },

    handleSelect(selection, row) {
      this.$refs.table.toggleRowSelection(row)
      this.dataList.forEach(item => {
        if (item.informationKey === row.informationKey) {
          this.$refs.table.toggleRowSelection(item)
        }
      })
      this.tableSelection = this.$refs.table.selection
    },

    handleSelectAll(selection) {
      this.tableSelection = this.$refs.table.selection
    },

    // 检查是否一致
    isAllEqual(array) {
      if (array.length > 0) {
        return !array.some(function (item, index) {
          return item.informationKey !== array[0].informationKey
        })
      } else {
        return true
      }
    },

    // 点击打印
    async toPrint() {
      const params = []
      const len = this.tableSelection.length
      this.queryItem = this.tableSelection
      for (let i = len; i > 0; i--) {
        params.push({
          id: this.tableSelection[i - 1].id,
          invoiceId: this.tableSelection[i - 1].invoiceId
        })
      }
      const { data } = await getDetailPrintDisString(params)
      console.log(data)
      if (data) {
        this.$confirm(<p class="text">{data}</p>, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'text'
        }).then(() => {
          if (this.tableSelection[0].printNum) {
            this.dialogForm.createMan = JSON.parse(localStorage.getItem('supply_user')).nickName
            this.dialogForm.createDate = this.getDate()
            this.isShowDialog = true
          }
        })
      } else {
        this.getDateil(this.tableSelection, 'getDtailPrintDis', this.check).then(res => {
          this.tableSelection = []
          this.$endLoading()
          this.$refs.preView.show(this.hiprintTemplate, this.outputData)
        })
      }
    },

    // 关闭弹窗
    cancelDialogForm() {
      this.isShowDialog = false
      this.$refs.dialogForm.resetFields()
    },

    // 提交 弹窗
    submitDialogForm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          let params = {
            shipId: this.queryItem[0].invoiceId,
            password: this.dialogForm.password
          }
          checkPassword(params).then(res => {
            this.getDateil(this.tableSelection, 'getDtailPrintDis', this.check).then(res => {
              this.$endLoading()
              this.$refs.preView.show(this.hiprintTemplate, this.outputData)
            })
            this.cancelDialogForm()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  border-bottom: 1px solid #dcdfe6;
  margin-bottom: 20px;

  .title {
    font-size: 16px;
    font-weight: 600;
    padding-left: 10px;
  }
}

.text {
  word-break: break-all !important;
  height: 200px;
  overflow-y: auto;
}
</style>