CA3.0/src/views/statisticsCharts/components/statisticsHeaderNew.vue

<template>
  <div class="flight-statistics-header">
    <template v-if="title">
      <div class="title">{{ title }}</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="change()">
            <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 === '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" />
        </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 { TempQuery } from '@/api/temp'
import { mapGetters } from 'vuex'
export default {
  name: 'StatisticsHeader',
  props: {
    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
    }
  },
  data() {
    return {
      formData: {
      },
      formItems: []
    }
  },
  computed: {
    ...mapGetters(['savedFormDataMap']),
    formDataObj() {
      return JSON.parse(JSON.stringify(this.formData))
    }
  },
  watch: {
    items: {
      handler(val) {
        val && (this.formItems = val)
      },
      deep: true,
      immediate: true
    },
    data: {
      handler(val) {
        val && (this.formData = val)
      },
      deep: true,
      immediate: true
    },
    formDataObj: {
      handler(val, oldVal) {
        this.formItems.forEach(item => {
          if (item.changeHandler && String(val[item.prop]) !== String(oldVal[item.prop])) {
            item.changeHandler.call(this, val[item.prop])
          }
        })
      },
      deep: 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)
      }
    })
    const savedFormData = this.savedFormDataMap[this.$route.name]
    const obj = {}
    this.formItems.forEach(item => {
      if (item.queryId && item.setKey) {
        this.getOptions(item.queryId, item.setKey, item.prop, item.authId)
      }
      // if (savedFormData?.[item.prop]) {
      //   obj[item.prop] = savedFormData[item.prop]
      // } else if (item.defaultOption) {
      //   obj[item.prop] = item.defaultOption
      // }
      // if(savedFormData?.['fd1']&&savedFormData?.['fd2']){
      //   obj['fd1,fd2'] = [savedFormData['fd1'],savedFormData['fd2']]
      // }
      // console.log(obj)
    })
    if (savedFormData) {
      this.formData = savedFormData
      this.getData()
    }
    // this.$emit('update:data', this.formData)
  },
  methods: {
    change() {
      // console.log(this.formData)
    },
    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', _.cloneDeep(this.formData))
      this.$store.dispatch('savedSettings/saveFormData', {
        formData: _.cloneDeep(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 '航线':
          if (theInOrOutItem) {
            theInOrOutItem.options = [
              {
                label: '全部',
                value: '全部'
              }
            ]
            theInOrOutItem.disabled = true
          }
          this.formData.inOrOut = '全部'
          break
        case '基地分公司':
        case '航站':
        case '航站楼':
          if (theInOrOutItem) {
            theInOrOutItem.options = [
              {
                value: '全部',
                label: '全部'
              },
              {
                value: '进港',
                label: '进港'
              },
              {
                value: '离港',
                label: '离港'
              }
            ]
            theInOrOutItem.disabled = false
          }
          break
        default:
          if (theInOrOutItem) {
            theInOrOutItem.options = []
            theInOrOutItem.disabled = false
          }
          break
      }
    },
    async getOptions(queryId, setKey, prop, authId) {
      console.log(queryId)
      const p = {
        serviceId: queryId,
        dataContent: [],
        event: '0',
        pageSize: '9999',
      }
      if (queryId != '8200233') {
        p['authId'] = authId
      }
      try {
        const { code, returnData, message } = await TempQuery(p)
        if (Number(code) === 0) {
          const arr = returnData.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;

  .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;

    &::before {
      content: "";
      width: 4px;
      height: 20px;
      background: #2d67e3;
      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: 32px;
          height: 32px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>