CABaggageData2.0/src/views/baggageManagement/components/arrival/index.vue

<!--
 * @Author: zk
 * @Date: 2022-01-17 10:39:22
 * @LastEditTime: 2022-03-15 16:26:13
 * @LastEditors: your name
 * @Description: 进港01
-->
<template>
  <div class="arrival-one">
    <!--功能区-表单-->
    <div class="arrival-form">
      <el-form
        ref="form"
        :inline="true"
        :model="formData"
        :rules="rules"
        class="form"
      >
        <el-form-item prop="currentAirport">
          <el-cascader
            v-model="formData.currentAirport"
            style="width:144px;"
            placeholder="全部机场"
            size="small"
            :options="currentAirportOptions"
            :props="currentAirportProps"
            collapse-tags
            clearable
            filterable
            @change="setCurrentAirport"
          />
        </el-form-item>
        <el-form-item prop="relatedAirport">
          <el-cascader
            v-model="formData.relatedAirport"
            style="width:136px;"
            size="small"
            :options="relatedAirportOptions"
            :props="relatedAirportProps"
            placeholder="全部起飞站"
            collapse-tags
            clearable
            filterable
            @change="onSubmit"
          />
        </el-form-item>
        <el-form-item prop="inboundCarrier">
          <el-cascader
            v-model="formData.inboundCarrier"
            style="width:164px;"
            size="small"
            :options="inboundCarrierOptions"
            :props="inboundCarrierProps"
            placeholder="全部航司"
            collapse-tags
            clearable
            filterable
            @change="onSubmit"
          />
        </el-form-item>
        <el-form-item prop="craftType">
          <el-cascader
            v-model="formData.craftType"
            style="width:120px;"
            size="small"
            :options="craftTypeOptions"
            :props="craftTypeProps"
            placeholder="全部机型"
            collapse-tags
            clearable
            filterable
            @change="onSubmit"
          />
        </el-form-item>
        <el-form-item prop="flightAttr">
          <el-cascader
            v-model="formData.flightAttr"
            style="width:120px;"
            size="small"
            :options="flightAttrOptions"
            :props="flightAttrProps"
            placeholder="国际/国内"
            collapse-tags
            clearable
            filterable
            @change="onSubmit"
          />
        </el-form-item>
        <el-form-item prop="startDate">
          <el-date-picker
            v-model="formData.startDate"
            style="width:216px;"
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="开始时间"
            @change="setStartDate"
          />
        </el-form-item>
        <el-form-item prop="endDate">
          <el-date-picker
            v-model="formData.endDate"
            style="width:216px;"
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="结束时间"
            @change="setEndDate"
          />
        </el-form-item>
        <el-form-item prop="search">
          <el-input
            v-model="formData.search"
            style="width:240px;margin-left:105px;"
            size="small"
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            clearable
            @clear="inputClear"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="onSubmit"
          >搜索</el-button>
        </el-form-item>
        <el-form-item v-is="['i_showTransit']">
          <el-switch
            v-model="formData.switch"
            style="margin-left:40px;"
            active-text="显示中转"
          />
        </el-form-item>
        <el-form-item v-is="['i_timeIcon']">
          <el-dropdown>
            <img
              class="checkTime msgImg"
              src="../../../../assets/departure/ic_time.png"
            >
            <el-dropdown-menu
              slot="dropdown"
              class="time-zone"
            >
              <el-dropdown-item>国内Local/国际UTC</el-dropdown-item>
              <el-dropdown-item>Local</el-dropdown-item>
              <el-dropdown-item>UTC</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item v-is="['i_columnSettings']">
          <img
            class="msgImg"
            src="../../../../assets/departure/ic_setting.png"
            @click="show"
          >
        </el-form-item>
      </el-form>
    </div>
    <!--表格-->
    <div
      v-loading="loading"
      class="arrival-table"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-table
        ref="table"
        :row-class-name="tableRowClassName"
        :data="tableData"
        class="table"
        :height="computedTableHeight"
        show-summary
        :summary-method="summaryMethod"
        border
        stripe
        @row-click="rowClick"
      >
        <el-table-column
          v-for="(item,index) in tableColsCopy"
          :key="index"
          :prop="item.statCode"
          :label="item.statName"
        >
          <el-table-column
            v-for="(p,i) in item.children"
            :key="i"
            :prop="p.statCode"
            :label="p.statName"
            :width="item.width"
            :formatter="tableFormat"
          />
        </el-table-column>
      </el-table>
    </div>
    <!--列设置-->
    <Dialog
      :flag="dialogFlag"
      class="dialog-check-cols"
    >
      <div class="col-dialog">
        <div class="title">列设置</div>
        <div class="content">
          <el-tree
            :data="tableCols"
            :class="colsCheckClass"
            show-checkbox
            node-key="index"
            :default-expand-all="true"
            :props="{
              label: 'statName',
              children: 'children'
            }"
            :default-checked-keys="checkedKeysTemp"
            @check="handleCheck"
          />
        </div>
        <div class="foot right t30">
          <el-button
            size="medium"
            class="r24"
            type="primary"
            @click="onCheck"
          >确定</el-button>
          <el-button
            size="medium"
            @click="hide"
          >取消</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import Dialog from '@/layout/components/Dialog'
import terminalMixin from '../../mixins/terminal'
import formMixin from '../../mixins/form'
import tableColsMixin from '../../mixins/tableCols'

export default {
  name: 'ArrivalTerminalView',
  components: { Dialog },
  mixins: [terminalMixin, formMixin, tableColsMixin],
  data() {
    return {
      // 初始表头
      tableCols: [
        {
          statCode: 'flightInfo',
          statName: '航班信息',
          children: [
            {
              statCode: 'FlightNO',
              statName: '航班号',
              width: 91
            },
            {
              statCode: 'FlightDate',
              statName: '执飞日期',
              width: 105
            },
            {
              statCode: 'PlanLandingTime',
              statName: '到港时间',
              width: 115
            },
            {
              statCode: 'PlanDepartureApt',
              statName: '起飞航站',
              width: 71
            },
            {
              statCode: 'LandingBuild',
              statName: '到达航站楼',
              width: 65
            },
            {
              statCode: 'Carousel',
              statName: '行李转盘',
              width: 68
            },
            {
              statCode: 'StandForLanding',
              statName: '停机位',
              width: 68
            }
          ]
        },
        {
          statCode: 'depatureInfo',
          statName: '始飞站行李信息',
          children: [
            {
              statCode: 'checkin',
              statName: '值机',
              width: 72
            },
            {
              statCode: 'expect_load',
              statName: '预计装载',
              width: 101
            },
            {
              statCode: 'loadflight',
              statName: '已装载',
              width: 65
            }
          ]
        },
        {
          statCode: 'arriveInfo',
          statName: '到达行李信息',
          children: [
            {
              statCode: 'reach',
              statName: '到达',
              width: 88
            },
            {
              statCode: 'did_not_arrive',
              statName: '未到达',
              width: 76
            },
            {
              statCode: 'special',
              statName: '特殊',
              width: 88
            },
            {
              statCode: 'claim',
              statName: '理赔',
              width: 83
            }
          ]
        },
        {
          statCode: 'uninstallInfo',
          statName: '卸载状态',
          children: [
            {
              statCode: 'uninstalled',
              statName: '已卸载',
              width: 83
            },
            {
              statCode: 'to_be_uninstalled',
              statName: '待卸载',
              width: 80
            }
          ]
        },
        {
          statCode: 'stopBaggage',
          statName: '终止行李',
          children: [
            {
              statCode: 'terminateArrive',
              statName: '到达',
              width: 79
            },
            {
              statCode: 'terminatedNotArrived',
              statName: '未到达',
              width: 82
            }
          ]
        },
        {
          statCode: 'TransferBaggage',
          statName: '转运行李',
          children: [
            {
              statCode: 'delivered',
              statName: '已交运',
              width: 89
            },
            {
              statCode: 'not_shipped',
              statName: '未交运',
              width: 89
            }
          ]
        },
        {
          statCode: 'disBaggage',
          statName: '行李分布',
          children: [
            {
              statCode: 'container',
              statName: '容器',
              width: 97
            },
            {
              statCode: 'bulk',
              statName: '散装',
              width: 101
            }
          ]
        }
      ]
    }
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex < 2) {
        return 'bgl-hui'
      }
    },
    // 获取表单下拉框数据
    getFormData(params) {
      this.relatedAirportQuery({
        ...params,
        type: 'IN'
      })
      this.inboundCarrierQuery(params)
      this.craftTypeQuery(params)
      this.flightAttrQuery(params)
    },
    // 获取表格数据
    getTableData(params) {
      this.integratedQuery({
        ...params,
        type: 'IN'
      })
    },
    initTableData(tableData) {
      this.tableData = this._.sortBy(tableData, ['FlightDate', 'PlanLandingTime'])
    }
  }
}
</script>

<style lang="scss" scoped>
.arrival-form {
  padding-top: 11px;
  ::v-deep .form {
    .el-form-item {
      margin-bottom: 0px;
      margin-right: 8px;
      button,
      input,
      optgroup,
      select,
      textarea {
        font-family: Helvetica, 'Microsoft YaHei';
        font-size: 14px;
      }
      .el-switch__label {
        color: #303133;
      }
      .el-form-item__error {
        z-index: 10;
      }
    }
    .checkTime {
      margin: 0 16px;
    }
    .msgImg {
      cursor: pointer;
      position: relative;
      top: 6px;
    }
  }
}
.arrival-table {
  width: calc(100vw - 60px);
  ::v-deep .table {
    width: 100%;
    .cell {
      padding: 0;
      text-align: center;
      font-family: Helvetica, 'Microsoft YaHei';
      font-size: 14px;
      letter-spacing: 0;
    }
    .el-table__header-wrapper {
      .cell {
        font-weight: bold;
        color: #101116;
      }
      .has-gutter {
        tr {
          .bgl-huang {
            background: #fcf0b1;
          }
        }
      }
    }
    .el-table__body-wrapper {
      tr.bgl-hui {
        background: #d2d6df;
        td {
          background: #d2d6df;
        }
        &:nth-child(5) {
          position: relative;
          &::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background: #e83f82;
          }
        }
      }
    }
  }
}
::v-deep .dialog-check-cols .el-tree {
  &.has-children .el-tree-node > .el-tree-node__children {
    display: flex;
    flex-wrap: wrap;
  }
  &.no-children {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>