<template>
  <div class="cargoPage">
    <el-form ref="cargoForm" class="form-header" label-position="right" label-width="auto" size="small"
      :model="formData">
      <el-row type="flex" style="flexWrap: wrap !important">
        <el-col :span="6">
          <el-form-item label="配舱航班日期">
            <el-date-picker class="formItem" v-model="cargoPlaneTime" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" :value-format="valueFormat" clearable>
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="海关回执状态">
            <el-select v-model="formData.customsReceiptStatusId" class="formItem" filterable multiple clearable
              placeholder="不限">
              <el-option v-for="item in findConditionData.cargoCustomsReturnStatus" :label="item.chineseName"
                :value="item.id" :key="item.id">
                <Tooltips :content="item.chineseName" :refName="item.code"></Tooltips>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="申报类别">
            <el-select placeholder="不限" v-model="formData.typeId" class="formItem" clearable>
              <el-option v-for="item in findConditionData.cargoType" :label="item.chineseName" :value="item.id"
                :key="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="服务类型">
            <el-select v-model="formData.serviceTypeId" class="formItem" filterable multiple clearable placeholder="不限">
              <el-option v-for="item in findConditionData.cargoServiceType" :label="item.chineseName" :value="item.id"
                :key="item.id">
                <Tooltips :content="item.chineseName" :refName="item.code"></Tooltips>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="运单号">
            <el-input ref='userInfo' type="textarea" v-model="formData.waybillNo" class="formItem"
              placeholder="请输入运单号（回车间隔）" :rows="4" :maxlength="12000" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="配载航班号">
            <el-input type="textarea" v-model="cargoPlaneNo" class="formItem" placeholder="AC001;AC002" :rows="4"
              clearable @change="planeNoChange"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="URSA">
            <el-input type="textarea" v-model="ursa" class="formItem" placeholder="S_;P_;E2" :rows="4" clearable>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="站点">
            <el-input type="textarea" v-model="siteName" class="formItem" placeholder="PVG;PEK" :rows="4" clearable>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col v-show="formShow">
          <el-row type="flex" style="flexWrap: wrap !important">
            <el-col :span="6">
              <el-form-item label="ACCS原航班日期">
                <el-date-picker class="formItem" v-model="flightTime" type="daterange" range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期" :value-format="valueFormat" clearable>
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="ACCS原航班号">
                <el-input type="text" v-model="fltNo" class="formItem" placeholder="请输入ACCS航班号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="取件日期">
                <el-date-picker class="formItem" v-model="formData.pickUpDate" type="date" placeholder="选择日期"
                  :value-format="valueFormat" clearable>
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建日期">
                <el-date-picker class="formItem" v-model="createDate" type="daterange" range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期" :value-format="valueFormat" clearable>
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="ACCSpool">
                <el-select placeholder="不限" v-model="formData.accsPool" class="formItem" clearable>
                  <el-option value="Pre-MDE" key="Pre-MDE">
                  </el-option>
                  <el-option value="OSPR" key="OSPR">
                  </el-option>
                  <el-option value="Manifest" key="Manifest">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="货物状态">
                <el-select placeholder="不限" v-model="formData.statusId" class="formItem" filterable clearable>
                  <el-option v-for="item in findConditionData.cargoStatus" :label="item.chineseName" :value="item.id"
                    :key="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否自动">
                <el-select placeholder="不限" v-model="formData.allocationTypeId" class="formItem" clearable>
                  <el-option label="手动" value="1"> </el-option>
                  <el-option label="自动" value="2"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="配舱状态">
                <el-select placeholder="不限" v-model="formData.hasFlight" class="formItem" clearable>
                  <el-option label="已配" value="1"> </el-option>
                  <el-option label="未配" value="0"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <template slot="label">
                  <div style="display:inline-block">配载航线
                    <el-tooltip class="item" effect="dark" content="选择航线需要先输入配载航班号，才能选择对应得航线" placement="top-start">
                      <span class="el-icon-warning" style="color:#1890ff;font-size:16px"></span>
                    </el-tooltip>
                  </div>
                </template>
                <el-select class="formItem" v-model="formData.cargoPlaneRoute" placeholder="不限"
                  :disabled="routeList.length == 0" clearable @change="routeSelectChange"
                  :key="formData.cargoPlaneRoute">
                  <el-option v-for="(item, index) in routeList" :label="item" :value="item" :key="item">
                    <Tooltips :content="item" :refName="item"></Tooltips>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <div class="pl10 mt20">
        <el-button type="primary" icon="el-icon-search" size="small" :loading="tableLoading" @click="select(0)">查询
        </el-button>
        <el-button v-hasPermi="['base:cargo:export']" :type="downLoadingTip.downloading ? 'warning' : 'primary'"
          size="small" @click="xlse(0)" :disabled="tableData.length == 0" :loading="downLoadingTip.downloading">{{
          downLoadingTip.downloading ? downLoadingTip.tip : "导出本页查询结果"
          }}</el-button>
        <el-button v-hasPermi="['base:cargo:export']" :type="downLoadingTip.downloading ? 'warning' : 'primary'"
          size="small" @click="xlse(1)" :disabled="tableData.length == 0" :loading="downLoadingTip.downloading">{{
          downLoadingTip.downloading ? downLoadingTip.tip : "导出全部查询结果"
          }}</el-button>
        <el-button type="primary" size="small" :disabled="selectTable.length == 0" v-hasPermi="['base:cargo:release']"
          @click="release">释放舱位</el-button>
        <span class="ml20" style="color: #ffba00">全部导出上限80000条数据</span>
        <el-progress v-if="progress != 0" class="progress" :stroke-width="12" :show-text="true" :percentage="progress"
          :status="progress == 100 ? 'success' : 'warning'"></el-progress>
        <div class="tips">
          <span style="paddingRight: 50px">总重量:{{ allWeight }}</span>
          <span>总件数:{{ allQty }}</span>
        </div>
        <div class="formShow">
          <el-tooltip :content="formShow ? '隐藏查询条件' : '显示查询条件'" placement="top">
            <el-button class="mr20" icon="el-icon-search" size="mini" @click="formShow = !formShow" circle></el-button>
          </el-tooltip>
          <el-tooltip content="表格设置" placement="top">
            <HeaderSetting tableName="cargo" class="mr20" style="float:right;line-height: 48px;"
              @close="headerSetClose"></HeaderSetting>
          </el-tooltip>
        </div>
      </div>
    </el-form>
    <Tables ref="newTables" ductName="cargo" :data="tableData" :headerData="tableHeader" :selection="true" :order="true"
      :totalCount="totalCount" :loading="tableLoading" :limitSize="limitSize" :limitStart="limitStart" :page="page"
      :shiftKey="shiftKey" :pageSizes="[100]" :height="tableHeight" @sizeChange="sizeChange" @tableSelect="tableSelect"
      @tableSelectAll="tableSelectAll" @currentChange="currentChange" @sortChange="sortChange">
      <template v-slot:waybillNo="scope">
        <el-link type="primary" @click="logView(scope.row)">
          {{
          scope.row.waybillNo
          }}<i class="el-icon-link"></i> </el-link>
      </template>
    </Tables>
    <el-dialog title="舱位释放结果" width="80%" :visible.sync="dialogVisible" :close-on-click-modal="false"
      :show-close="false" :append-to-body="true">
      <el-table :data="selectTable" size="mini" border stripe highlight-current-row style="width: 100%">
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <el-table-column v-for="(item, index) in releaseHeader" header-align="center" :align="item.align"
          :prop="item.value" :label="item.name" :width="item.width" :key="index" :show-overflow-tooltip="true">
        </el-table-column>
      </el-table>
      <div slot="footer">
        <el-button type="primary" @click="close">确 定</el-button>
      </div>
    </el-dialog>
    <Dialog :dialogVisible="openView" :cargoData="cargoLog" @close="viewClose" />
  </div>
</template>

<script>
import { findConditionData, findCargoData, releaseCargo, getFlightsRoutes } from "@/api/cargoSelect";
import { downLoadXlsx } from "@/utils/zipdownload";
import Dialog from "./dialog.vue";

export default {
  name: "QueryCargo",
  components: {
    Dialog
  },
  data() {
    return {
      formData: {
        fltDateStart: "",
        fltDateEnd: "",
        prematchFltDateStart: "",
        prematchFltDateEnd: "",
        createTimeStart: null,
        createTimeEnd: null,
        pickUpDate: null,
        hasFlight: null,
        waybillNo: "",
        siteName: "",
        fltNo: "",
        mawbCode: "",
        ursa: "",
        typeId: null,
        statusId: null,
        serviceTypeId: null,
        allocationTypeId: null,
        kindToAllocFlightId: null,
        historyAllocaCargoTypeId: null,
        dataSources: "",
        customsReceiptStatusId: null,
        big: null,
        cargoPlaneNo: null,
        cargoPlaneStart: null,
        cargoPlaneEnd: null,
        cargoPlaneRoute: null,
        limitStart: 1,
        limitSize: 100,
      }, //表单数据
      tableHeader: [], //表头数据
      releaseHeader: [
        {
          name: "提示信息",
          value: "msg",
          width: "550",
          align: "center",
        },
        {
          name: "口岸代码",
          value: "portName",
          width: "",
          align: "center",
        },
        {
          name: "运单号",
          value: "waybillNo",
          width: "",
          align: "center",
        },
        {
          name: "释放状态",
          value: "releasing",
          width: "",
          align: "center",
        },
        {
          name: "ACCSpool",
          value: "accsPool",
          width: "",
          align: "center",
        },
        {
          name: "货物状态",
          value: "statusName",
          width: "",
          align: "center",
        },
        {
          name: "ACCS原航班号",
          value: "fltNoAccs",
          width: "",
          align: "center",
        },
        {
          name: "ACCS原航班日期",
          value: "fltDateAccs",
          width: "",
          align: "center",
        },
      ],
      findConditionData: {}, //货物查询条件
      tableData: [], //表格数据
      cargoLog: {},
      routeList: [],
      allWeight: 0,//总重量
      allQty: 0,//总件数
      shiftKey: false,
      valueFormat: "yyyy-MM-dd",
      tableLoading: false,
      downLoadingTip: {
        tip: "",
        downloading: false,
      }, //导出状态
      totalCount: 0,
      selectTable: [],
      flightTime: [],
      prepalyFlightTime: [],
      cargoPlaneTime: [],
      createDate: [],
      limitStart: 1,
      limitSize: 100, //无限制-1
      page: 1,
      progress: 0,
      tableHeight: null,
      dialogVisible: false,
      openView: false,
      formShow: true, //菜单隐藏
    };
  },
  created() {
    this.findCondition()
    if (this.$store.getters.tableHeader) {
      this.tableHeader = this.$store.getters.tableHeader['cargo']
    } else {
      this.tableHeader = this.tableHeaders['cargo']
    }
  },

  activated() {
    this.selectTable = []
    this.cargoTotal()
    if (this.$route.params.fltNo) {
      //判断进入页面是否带参，确定是否是index跳转
      this.formData = {
        fltDateStart: "",
        fltDateEnd: "",
        prematchFltDateStart: "",
        prematchFltDateEnd: "",
        createTimeStart: null,
        createTimeEnd: null,
        pickUpDate: null,
        hasFlight: null,
        waybillNo: "",
        siteName: "",
        fltNo: "",
        mawbCode: "",
        ursa: "",
        typeId: null,
        statusId: null,
        serviceTypeId: null,
        allocationTypeId: null,
        kindToAllocFlightId: null,
        historyAllocaCargoTypeId: null,
        dataSources: "",
        customsReceiptStatusId: null,
        big: null,
        cargoPlaneNo: null,
        cargoPlaneStart: null,
        cargoPlaneEnd: null,
        limitStart: 1,
        limitSize: 100,
      }
      this.cargoPlaneTime = [this.$route.params.fltDate, this.$route.params.fltDate]
      this.formData.cargoPlaneStart = this.$route.params.fltDate
      this.formData.cargoPlaneEnd = this.$route.params.fltDate
      this.formData.cargoPlaneNo = this.$route.params.fltNo
      this.formData.cargoPlaneRoute = this.$route.params.route
      this.planeNoChange(this.formData.cargoPlaneNo)
      this.select(0)
    } else {
      //否则请求原页面缓存状态
      if (this.$store.state.tagsView.cachedViews.length > 0) {
        this.$store.state.tagsView.cachedViews.forEach(item => {
          if (item === 'QueryCargo') {
            this.findCondition()
            this.totalCount > 0 ? this.select() : ''
          }
        })
      }
    }
  },

  deactivated() {
    this.tableData = []
  },

  mounted() {
    window.addEventListener("keydown", (code) => {
      if (code.keyCode === 16 && code.shiftKey) {
        this.shiftKey = true;
      }
    });
    window.addEventListener("keyup", (code) => {
      if (code.keyCode === 16) {
        this.shiftKey = false;
      }
    });
    this.tableHeight = window.innerHeight - this.$refs.cargoForm.$el.offsetHeight - 50
  },
  watch: {
    $route: {
      handler(to, from) {
        if (to.name === 'Index') {
          this.formData = {
            fltDateStart: "",
            fltDateEnd: "",
            prematchFltDateStart: "",
            prematchFltDateEnd: "",
            createTimeStart: null,
            createTimeEnd: null,
            pickUpDate: null,
            hasFlight: null,
            waybillNo: "",
            siteName: "",
            fltNo: "",
            mawbCode: "",
            ursa: "",
            typeId: null,
            statusId: null,
            serviceTypeId: null,
            allocationTypeId: null,
            kindToAllocFlightId: null,
            historyAllocaCargoTypeId: null,
            dataSources: "",
            customsReceiptStatusId: null,
            big: null,
            cargoPlaneNo: null,
            cargoPlaneStart: null,
            cargoPlaneEnd: null,
            limitStart: 1,
            limitSize: 100,
          }
          this.cargoPlaneTime = [from.params.fltDate, from.params.fltDate]
          this.formData.cargoPlaneStart = from.params.fltDate
          this.formData.cargoPlaneEnd = from.params.fltDate
          this.formData.cargoPlaneNo = from.params.fltNo
          this.formData.cargoPlaneRoute = from.params.route
          this.planeNoChange(this.formData.cargoPlaneNo)
          this.select(0)
        }
      }
    },
    formShow(val, oldVal) {
      this.tableHeight = window.innerHeight - this.$refs.cargoForm.$el.offsetHeight - 120
    },
  },
  methods: {
    clear() {
      this.$refs.cargoForm.resetFields();
    },
    // 查询条件
    async findCondition() {
      findConditionData().then((res) => {
        if (res.code == 200) {
          this.findConditionData = res.data;
        } else {
          this.msgWarning('查询条件不存在')
        }
      });
    },
    //查询
    async select(val) {
      this.tableData = [];
      this.allWeight = 0;
      this.allQty = 0;
      this.tableLoading = true;
      this.dataInfo();
      if (val === 0) {
        this.formData.limitStart = 1;
        this.limitStart = 1;
        this.page = 1;
      }
      findCargoData(this.formData)
        .then((res) => {
          setTimeout(() => {
            if (res.code == 200) {
              this.tableData = res.data.list;
              this.totalCount = res.data.totalCount;
              if (res.data.list.length > 0) {
                for (let i = 0; i < this.tableData.length; i++) {
                  this.tableData[i].index = i;
                }
              } else {
                this.msgWarning('未查询到数据')
              }
            } else {
              this.msgWarning(res.msg)
            }
            this.tableLoading = false;
          })
        })
        .catch(() => {
          this.tableLoading = false;
        });
      this.$refs.newTables.clearTable();
      this.cargoTotal();
    },
    //释放仓位
    release() {
      let idList = []
      this.selectTable.map(item => {
        item.msg = ''
        idList.push(item.id)
      })
      releaseCargo(idList).then(res => {
        if (res.code === 200) {
          this.msgSuccess(res.msg)
          this.select()
        } else if (res.code === 201) {
          this.selectTable.map(item => {
            res.data['success'].map(val => {
              val === item.id ? item.msg = item.msg + '操作成功,正在释放中。' : ''
            })
            res.data['accsPoolFlase'].map(val => {
              val === item.id ? item.msg = item.msg + 'Manifest状态不能释放。' : ''
            })
            res.data['existReleasing'].map(val => {
              val === item.id ? item.msg = item.msg + '正在释放中，请勿重复释放。' : ''
            })
            res.data['noFlight'].map(val => {
              val === item.id ? item.msg = item.msg + '已释放仓位。' : ''
            })
            res.data['pushFalse'].map(val => {
              val === item.id ? item.msg = item.msg + '该货物配舱结果已回推ACCS，不能释放。' : ''
            })
          })
          this.dialogVisible = true
        } else {
          this.msgWarning(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    //关闭弹窗
    close() {
      this.dialogVisible = false
      this.selectTable = []
      this.select()
    },
    //数据初始化
    dataInfo() {
      if (this.formData.serviceTypeId != null && this.formData.serviceTypeId.length < 1) {
        this.formData.serviceTypeId = null
      }
      if (
        this.formData.customsReceiptStatusId != null &&
        this.formData.customsReceiptStatusId.length < 1
      ) {
        this.formData.customsReceiptStatusId = null;
      }
      if (this.createDate != null && this.createDate.length > 0) {
        this.formData.createTimeStart = this.createDate[0];
        this.formData.createTimeEnd = this.createDate[1];
      } else {
        this.formData.createTimeStart = null;
        this.formData.createTimeEnd = null;
      }
      if (this.prepalyFlightTime != null && this.prepalyFlightTime.length > 0) {
        this.formData.prematchFltDateStart = this.prepalyFlightTime[0];
        this.formData.prematchFltDateEnd = this.prepalyFlightTime[1];
      } else {
        this.formData.prematchFltDateStart = "";
        this.formData.prematchFltDateEnd = "";
      }
      if (this.flightTime != null && this.flightTime.length > 0) {
        this.formData.fltDateStart = this.flightTime[0];
        this.formData.fltDateEnd = this.flightTime[1];
      } else {
        this.formData.fltDateStart = "";
        this.formData.fltDateEnd = "";
      }
      if (this.cargoPlaneTime != null && this.cargoPlaneTime.length > 0) {
        this.formData.cargoPlaneStart = this.cargoPlaneTime[0];
        this.formData.cargoPlaneEnd = this.cargoPlaneTime[1];
      } else {
        this.formData.cargoPlaneStart = null;
        this.formData.cargoPlaneEnd = null;
      }
      if (this.formData.waybillNo) {
        this.formData.waybillNo = this.formData.waybillNo.trim();
      }
      if (this.formData.hasFlight == "") {
        this.formData.hasFlight = null
      }
      this.formData.limitStart = this.limitStart;
      this.formData.limitSize = 100;
    },
    //总和
    cargoTotal() {
      this.allWeight = 0;
      this.allQty = 0;
      if (this.selectTable.length > 0) {
        this.selectTable.forEach((item) => {
          this.allWeight = this.allWeight + item.actualWeight;
          this.allQty = this.allQty + item.qty;
        });
        this.allWeight = this.allWeight.toFixed(2);
        this.allQty = this.allQty.toFixed();
      }
    },
    //表格多选
    tableSelect(val) {
      this.selectTable = val.selection;
      this.cargoTotal();
    },
    //表格全选
    tableSelectAll(val) {
      this.selectTable = val;
      this.cargoTotal();
    },
    //分页
    currentChange(val) {
      this.formData.limitStart = val.start;
      this.limitStart = val.start;
      this.page = val.page;
      this.select();
    },
    //配载航班号获取航线
    planeNoChange(val) {
      getFlightsRoutes(val.split(';')).then(res => {
        if (res.code === 200) {
          this.routeList = res.data
        } else {
          this.msgWarning(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    routeSelectChange(val) {
      this.$forceUpdate()
      // this.formData.cargoPlaneRoute = val
    },
    //排序
    sortChange(val) {
      let data = [];
      let nullData = [];
      this.tableData.forEach((item) => {
        if (item[val.prop]) {
          data.push(item);
        } else {
          nullData.push(item);
        }
      });
      data = data.sort(this.$refs.newTables.compare(val.prop, val.order));
      if (val.order != "ascending") {
        this.tableData = nullData.concat(data);
      } else {
        this.tableData = data.concat(nullData);
      }
      this.tableData.forEach((item, index = 0) => {
        item.index = index;
      });
    },
    sizeChange(val) {
      this.limitSize = val
      this.select(0);
    },
    // 导出表格
    xlse(page) {
      this.progress = 1;
      this.downLoadingTip.downloading = true;
      let cargoXlse = { title: "货物导出表", cargoConditionDto: {} };
      this.dataInfo();
      cargoXlse.cargoConditionDto = this.formData;
      cargoXlse.cargoConditionDto.limitSize = this.limitSize;

      if (page == 0) {
        this.downLoadingTip.tip = "正在导出本页结果集";
        cargoXlse.cargoConditionDto.limitStart = this.limitStart;
        downLoadXlsx("/cargo/excel", cargoXlse, "货物表")
          .then(() => {
            this.downLoadingTip.downloading = false;
            this.downLoadingTip.tip = "";
            this.progress = 100;
          })
          .catch(() => {
            this.downLoadingTip.downloading = false;
            this.downLoadingTip.tip = "";
          });
      } else {
        if (this.totalCount < 80000) {
          this.downLoadingTip.tip = "正在导出全部结果集请耐心等待";
          cargoXlse.cargoConditionDto.limitStart = 0;
          cargoXlse.cargoConditionDto.limitSize = -1;
          downLoadXlsx("/cargo/excel", cargoXlse, "货物表")
            .then(() => {
              this.downLoadingTip.downloading = false;
              this.downLoadingTip.tip = "";
              this.progress = 100;
            })
            .catch(() => {
              this.downLoadingTip.downloading = false;
              this.downLoadingTip.tip = "";
            });
        } else {
          this.downLoadingTip.downloading = false;
          this.msgWarning('导出数据量过大，请不要超过8万条')
        }
      }
    },
    //查看日志
    logView(val) {
      this.cargoLog = val
      this.openView = true
    },
    //关闭日志
    viewClose() {
      this.openView = false
    },
    //设置关闭
    headerSetClose(val) {
      if (val == 1) {
        this.tableHeader = []
        this.tableData = []
        this.$nextTick(() => {
          this.tableHeader = this.$store.getters.tableHeader['cargo']
          this.select()
        })
      }
    }
  },
  computed: {
    fltNo: {
      get: function () {
        return this.formData.fltNo;
      },
      set: function (val) {
        this.formData.fltNo = this.upCase(val);
      },
    },
    siteName: {
      get: function () {
        return this.formData.siteName;
      },
      set: function (val) {
        this.formData.siteName = this.upCase(val);
      },
    },
    ursa: {
      get: function () {
        return this.formData.ursa;
      },
      set: function (val) {
        this.formData.ursa = this.upCase(val);
      },
    },
    cargoPlaneNo: {
      get: function () {
        return this.formData.cargoPlaneNo;
      },
      set: function (val) {
        this.formData.cargoPlaneNo = this.upCase(val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.tips {
  display: inline-block;
  color: #606266;
  font-size: 14px;
  margin-top: 10px;
  margin-left: 50px;
}

.progress {
  width: 200px;
  display: inline-block;
  margin: 0 0 0 20px;
}

.formShow {
  width: max-content;
  height: 48px;
  line-height: 48px;
  font-weight: 900;
  color: rgb(64, 158, 255);
  font-size: 14px;
  float: right;
  margin-right: 5px;
}
</style>