SMAirports/src/components/generateEcharts/components/echart/statisticsHeader.vue

<template>
  <div class="flight-statistics-header">
    <template v-if="title">
      <div class="title">{{ title }}</div>
      <div class="status" v-if="asShow">
        <div :class="picShow ? 'st_pic' : 'st_pics'" @click="picup"></div>
        <div :class="!picShow ? 'st_tab' : 'st_tabs'" @click="picups"></div>
      </div>
    </template>
    <el-form ref="form" class="form" :model="formData">
      <el-form-item v-for="item in formItems" :key="item.prop" :prop="item.prop" :label="item.label" :style="{
          width: item.width || '120px',
        }">
        <template v-if="item.inputType === 'input'">
          <el-input v-model="formData[item.prop]" :size="item.size || 'small'" :placeholder="item.placeholder || '请输入'" :clearable="item.clearable" />
        </template>
        <template v-if="item.inputType === 'select'">
          <el-select v-model="formData[item.prop]" :filterable="item.filterable" :default-first-option="item.filterable" :size="item.size || 'small'" :placeholder="item.placeholder || '请选择'" :multiple="item.multiple" :collapse-tags="item.multiple" :clearable="item.clearable" :disabled="item.disabled" @change="
              (value) => {
                item.changeHandler && call(item.changeHandler, value);
              }
            ">
            <el-option v-for="option in item.options" :key="option.value" :value="option.value" :label="option.label" />
          </el-select>
        </template>
        <template v-if="item.inputType === 'datePicker'">
          <el-date-picker v-model="formData[item.prop]" :size="item.size || 'small'" type="daterange" value-format="yyyy-MM-dd"  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
        </template>
        <template v-if="item.inputType === 'datetimerange'">
          <el-date-picker v-model="formData[item.prop]" type="datetimerange" range-separator="至" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </template>
        <template v-if="item.inputType === 'erdatime'">
          <template v-if="item.haveDisabled">
            <el-date-picker value-format="YYYY-MM-DD" v-model="formData[item.prop]" type="date" :disabled-date="item.disabledDate" placeholder="选择日期">
            </el-date-picker>
          </template>
          <template v-else>
            <el-date-picker value-format="YYYY-MM-DD" v-model="formData[item.prop]" type="date" placeholder="选择日期">
            </el-date-picker>
          </template>
        </template>
        <template v-if="item.inputType === 'cascader'">
          <el-cascader v-model="formData[item.prop]" :size="item.size || 'small'" :placeholder="item.placeholder || '请选择'" :options="item.options" :props="item.props" :clearable="item.clearable" :disabled="item.disabled" @change="
              (value) => {
                item.changeHandler && call(item.changeHandler, value);
              }
            " />
        </template>
      </el-form-item>
      <el-form-item v-if="formItems.length">
        <el-button type="primary" size="small" @click="getData">{{
          buttonText
        }}</el-button>
      </el-form-item>
      <el-form-item v-if="withExport">
        <img src="@/assets/nav/ic_export.png" title="导出" class="btn-icon-only" @click="exportClickHandler" />
      </el-form-item>
      <el-form-item v-if="withSetting">
        <img src="@/assets/nav/ic_setting.png" title="节点设置" class="btn-icon-only" @click="settingClickHandler" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Query } from "@/api/webApi";
import { Format } from "@/utils/validate";
export default {
  name: "StatisticsHeader",
  props: {
    asShow: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: "",
    },
    items: {
      type: Array,
      default: undefined,
    },
    customItems: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Object,
      default: undefined,
    },
    buttonText: {
      type: String,
      default: "查询",
    },
    withExport: {
      type: Boolean,
      default: true,
    },
    withSetting: {
      type: Boolean,
      default: false,
    },
    eledata: {
      type: String,
      default: "",
    },
    action: {
      type: Number,
      default: true,
    },
  },
  data () {
    return {
      picShow: true,
      formData: {
        range: "",
        inOrOut: "",
        interval: "",
        airline: [],
        area: "",
        airport: [],
        terminal: "",
        dateTime: "",
        flightType: "",
        baggageType: "",
        passengerType: [],
      },
      formItems: [
        {
          prop: "range",
          inputType: "select",
          placeholder: "统计范围",
          requiredWarning: "请先选择统计范围",
          options: [
            {
              value: "全部",
              label: "全部",
            },
            {
              value: "航线",
              label: "航线",
            },
            {
              value: "基地分公司",
              label: "基地分公司",
            },
            {
              value: "航站",
              label: "航站",
            },
            {
              value: "航站楼",
              label: "航站楼",
            },
          ],
          changeHandler (value) {
            this.formData.inOrOut = "";
            // this.formData.interval = ''
            this.formData.area = "";
            this.formData.airline = "";
            this.formData.airport = "";
            this.formData.terminal = "";
            this.setInOrOutOptions(value);
            const airlineItem = this.formItems.find(
              (item) => item.prop === "airline"
            );
            const areaItem = this.formItems.find(
              (item) => item.prop === "area"
            );
            const airportItem = this.formItems.find(
              (item) => item.prop === "airport"
            );
            const terminalItem = this.formItems.find(
              (item) => item.prop === "terminal"
            );
            airlineItem && (airlineItem.disabled = true);
            areaItem && (areaItem.disabled = true);
            airportItem && (airportItem.disabled = true);
            terminalItem && (terminalItem.disabled = true);
            switch (value) {
              case "航线":
                airlineItem && (airlineItem.disabled = false);
                break;
              case "基地分公司":
                areaItem && (areaItem.disabled = false);
                break;
              case "航站":
                airportItem && (airportItem.disabled = false);
                break;
              case "航站楼":
                terminalItem && (terminalItem.disabled = false);
                break;
              default:
                break;
            }
          },
        },
        {
          prop: "inOrOut",
          inputType: "select",
          placeholder: "进出港",
          requiredWarning: "请先选择进出港",
          clearable: true,
          options: [],
        },
        {
          prop: "interval",
          inputType: "select",
          placeholder: "时间维度",
          requiredWarning: "请先选择统计时间维度",
          clearable: true,
          options: [
            {
              value: "日",
              label: "按日统计",
            },
            {
              value: "月",
              label: "按月统计",
            },
            {
              value: "季",
              label: "按季统计",
            },
            {
              value: "年",
              label: "按年统计",
            },
          ],
        },
        {
          prop: "dateTime",
          inputType: "datePicker",
          width: "240px",
          requiredWarning: "请先选择统计时间范围",
        },
        {
          prop: "airline",
          inputType: "select",
          placeholder: "航线",
          width: "180px",
          filterable: true,
          clearable: true,
          multiple: true,
          disabled: true,
          queryId: '',
          setKey: "a2",
          options: [],
        },
        {
          prop: "area",
          inputType: "select",
          placeholder: "基地分公司",
          filterable: true,
          clearable: true,
          disabled: true,
          queryId:'',
          setKey: "a5",
          options: [],
        },
        {
          prop: "airport",
          inputType: "select",
          placeholder: "航站",
          width: "150px",
          filterable: true,
          clearable: true,
          multiple: true,
          disabled: true,
          queryId: '',
          setKey: "a2",
          options: [],
        },
        {
          prop: "terminal",
          inputType: "select",
          placeholder: "航站楼",
          filterable: true,
          clearable: true,
          disabled: true,
          queryId: '',
          setKey: "a2",
          options: [],
        },
      ],
    };
  },
  watch: {
    asShow: {
      handler (val) {
        // console.log(val);
      },
      deep: true,
      immediate: true,
    },
    items: {
      handler (val) {
        val && (this.formItems = val);
      },
      deep: true,
      immediate: true,
    },
    formData: {
      handler (val) {
        if (this.action === 14 || this.action === 2 || this.action === 19) {
          this.$emit("fore", val);
        }
      },
      deep: true,
      immediate: true,
    },
    data: {
      handler (val) {
        val && (this.formData = val);
      },
      deep: true,
      immediate: true,
    },
    eledata: {
      handler (val) {
        this.formData = {};
      },
      deep: true,
      immediate: true,
    },
  },
  created () {
    this.customItems.forEach((item) => {
      if (typeof item.itemIndex === "number") {
        if (item.prop) {
          this.formItems.splice(item.itemIndex, item.replaceNum, item);
        } else {
          this.formItems.splice(item.itemIndex, item.replaceNum);
        }
      } else {
        this.formItems.push(item);
      }
    });
    this.formItems.forEach((item) => {
      if (item.queryId && item.setKey) {
        this.getOptions(item.queryId, item.setKey, item.prop);
      }
      if (item.defaultOption) {
        this.formData[item.prop] = item.defaultOption;
      }
    });
  },
  mounted () {
  },
  methods: {
    picup () {
      this.picShow = false;
      this.$emit("upset", this.picShow);
    },
    picups () {
      this.picShow = true;
      this.$emit("upset", this.picShow);
    },
    call (func, ...args) {
      func.call(this, ...args);
    },
    getData () {
      try {
        this.formItems.forEach((item) => {
          if (
            item.requiredWarning &&
            (!this.formData[item.prop] || this.formData[item.prop].length === 0)
          ) {
            throw new Error(item.requiredWarning);
          }
        });
      } catch (error) {
        this.$message.warning(error.message);
        return;
      }
      if (this.formData.range === "航线" && !this.formData.airline) {
        this.$message.warning("请先选择航线");
        return;
      } else if (this.formData.range === "航站" && !this.formData.airport) {
        this.$message.warning("请先选择航站");
        return;
      } else if (this.formData.range === "基地分公司" && !this.formData.area) {
        this.$message.warning("请先选择基地分公司");
        return;
      }
      this.$emit("getFormData", this.formData);
    },
    exportClickHandler () {
      this.$emit("export");
    },
    settingClickHandler () {
      this.$emit("setting");
    },
    setInOrOutOptions (range) {
      const theInOrOutItem = this.formItems.find(
        (item) => item.prop === "inOrOut"
      );
      switch (range) {
        case "全部":
        case "航线":
          theInOrOutItem.options = [
            {
              label: "全部",
              value: "全部",
            },
          ];
          this.formData.inOrOut = "全部";
          this.formItems[1].disabled = true;
          break;
        case "基地分公司":
        case "航站":
        case "航站楼":
          theInOrOutItem.options = [
            {
              value: "全部",
              label: "全部",
            },
            {
              value: "进港",
              label: "进港",
            },
            {
              value: "离港",
              label: "出港",
            },
          ];
          this.formItems[1].disabled = false;
          break;
        default:
          theInOrOutItem.options = [];
          this.formItems[1].disabled = false;
          break;
      }
    },
    async getOptions (queryId, setKey, prop) {
      try {
        const { code, returnData, message } = await Query({
          id: queryId,
          dataContent: [],
        });
        if (Number(code) === 0) {
          const arr = returnData.listValues.map((element) => ({
            label: element[setKey],
            value: element[setKey],
          }));
          const theItem = this.formItems.find((item) => item.prop === prop);
          theItem.options = arr;
        } else {
          this.$message.error(message);
        }
      } catch (error) {
        this.$message.error("失败");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.flight-statistics-header {
  // padding-top: 24px;
  // min-height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  .status {
    position: absolute;
    left: 144px;
    display: flex;
    align-items: center;
    > .st_pic {
      width: 32px;
      height: 32px;
      border-radius: 4px;
      // background: url("../../../../assets/nav/ic_table_default.png") no-repeat;
      background-size: 100% 100%;
      margin-right: 8px;
      cursor: pointer;
    }
    > .st_pics {
      width: 32px;
      height: 32px;
      border-radius: 4px;
      // background: url("../../../../assets/nav/ic_table_check.png") no-repeat;
      background-size: 100% 100%;
      margin-right: 8px;
      cursor: pointer;
    }
    > .st_tab {
      width: 32px;
      height: 32px;
      border-radius: 4px;
      // background: url("../../../../assets/nav/ic_chart_default.png") no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
    > .st_tabs {
      width: 32px;
      height: 32px;
      border-radius: 4px;
      // background: url("../../../../assets/nav/ic_chart_check.png") no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
  .title {
    margin-right: 24px;
    padding-left: 16px;
    // min-width: 190px;
    height: 32px;
    line-height: 32px;
    font-size: 18px;
    font-family: Helvetica, "Microsoft YaHei";
    font-weight: bold;
    white-space: nowrap;
    position: relative;
    color: #fff;
    &::before {
      content: "";
      width: 4px;
      height: 20px;
      background: #66b1ff;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
  }
  ::v-deep .form {
    display: flex;
    flex-wrap: wrap;
    > .el-form-item {
      margin-bottom: 24px;
      // width: 185px;
      &:not(:last-child) {
        margin-right: 8px;
      }
      &:nth-last-child(2),
      &:nth-last-child(3) {
        margin-right: 16px;
      }
      .el-form-item__content {
        height: 32px;
        line-height: 30px;
        .el-input {
          &.is-disabled .el-input__inner {
            border: none;
          }
          .el-input__inner {
            border-radius: 4px;
            font-family: Helvetica, "Microsoft YaHei";
            color: #303133;
            border-color: #ffffff;
            &:hover {
              border-color: #c0c4cc;
            }
            &:focus {
              border-color: #409eff;
            }
          }
        }
        .el-date-editor--daterange.el-input,
        .el-date-editor--daterange.el-input__inner,
        .el-date-editor--timerange.el-input,
        .el-date-editor--timerange.el-input__inner {
          width: 100%;
          border-radius: 4px;
          border-color: #ffffff;
          color: #303133;
          font-family: Helvetica, "Microsoft YaHei";
          &:hover {
            border-color: #c0c4cc;
          }
          &.is-active {
            border-color: #409eff;
          }
          .el-input__icon {
            color: #303133;
          }
          .el-range-separator {
            line-height: 28px;
          }
        }
        .el-select,
        .el-cascader {
          .el-input {
            .el-icon-arrow-up::before {
              content: "\e78f";
            }
            .el-icon-arrow-down::before {
              content: "\e790";
            }
            &:not(.is-disabled) {
              .el-input__icon,
              .el-input__inner::-webkit-input-placeholder {
                color: #303133;
              }
            }
          }
        }
        .el-button {
          border-radius: 4px;
          font-family: Helvetica, "Microsoft YaHei";
        }
        .btn-icon-only {
          width: 24px;
          height: 24px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>