Tmr-Multilingual/.svn/pristine/bf/bf1f608d09099d0f122fcccf3e655441260c3040.svn-base

<template>
  <el-form-item :label="$t('chart.filters')">
    <!-- <el-tag v-for="(item,index) in currentFilters" :key="index" closable @close="handleClosefilter(index)" @click="handleEditFilter(item)">
      {{ generateFilterSentence(item) }}
    </el-tag> -->

    <el-tag v-for="(item,index) in currentFilters" :key="index" closable @close="handleClosefilter(index)">
      {{ item.value.chi_value }} {{ item.filterOperator }} {{ item.value.value1 }}
    </el-tag>
    <el-button :disabled="disabled" class="save" style="width: 150px;" @click="visible=true">
      添加筛选条件
    </el-button>

    <el-dialog :visible="visible" width="500px" title="添加筛选条件" :before-close="handleClose">
      <el-form label-width="150px">
        <el-form-item label="筛选字段" class="el-form-item">
          <el-select v-model="filteCol" size="mini" placeholder="请选择筛选字段" style="width: 220px;" @change="comment_change">
            <!-- <el-option v-for="item in sharedState.allCols" :key="item.Column" :label="item.Column" :value="item.Column" /> -->
            <el-option v-for="item in sharedState.allCols" :key="item.Column" :label="item.Comment" :value="item.Column" />
          </el-select>
        </el-form-item>

        <el-form-item label="筛选操作符" class="el-form-item">
          <el-select v-model="filterOperator" size="mini" placeholder="请选择筛选字段" style="width: 220px;">
            <el-option v-for="item in filterOperatorOpts" :key="item.name" :label="`${item.name} (${item.operator})`" :value="item.operator" />
          </el-select>
        </el-form-item>

        <el-form-item v-if="currentOperatorParamNum===-1" :label="$t('chart.comparedValue')" class="el-form-item">
          <el-tag v-for="(item,index) in arrValue" :key="index" closable @close="handleRemove">
            {{ item }}
          </el-tag>
          <el-input v-model="value3" size="mini" type="text" style="width: 220px;" />
          <el-button size="mini" type="primary" @click="handleAdd">
            Add
          </el-button>
        </el-form-item>

        <el-form-item v-else :label="$t('chart.comparedValue')" class="el-form-item">
          <el-input v-model="value1" size="mini" type="text" style="width: 220px;" />
          <span v-show="currentOperatorParamNum===2">~</span>
          <el-input v-show="currentOperatorParamNum===2" v-model="value2" style="width: 220px;" type="text" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="downminCancel" size="mini" style="right: 90px;" @click="visible=false">取消</el-button>
        <el-button class="miniPrimary" size="mini" type="primary" @click="handleConfirm">确认</el-button>
      </div>
    </el-dialog>
  </el-form-item>
</template>
<script>
import { getFilterOperator, dataType } from '@/utils/configs'
import { buildFilterSentence } from '@/utils/buildSentence'
import store from '../store'

export default {
  props: {
    roles: {
      default: Array
    },
    disabled: {
      default: false
    },
    filters: {
      type: Array
    }
  },
  data() {
    return {
      visible: false,
      filterOperatorOpts: getFilterOperator(),
      filterStrs: [],
      filteCol: undefined,
      filterOperator: undefined,
      value1: undefined,
      value2: undefined,
      value3: undefined,
      arrValue: [],
      currentFilters: [],
      sharedState: store.state,

      eng_value: '',
      chi_value: ''
    }
  },
  computed: {
    currentOperatorParamNum() {
      const a = getFilterOperator().find(item => item.operator === this.filterOperator)
      return a ? a.paramNum : 1
    },
    lang() {
      return this.$store.state.app.lang
    }
  },
  watch: {
    filters: {
      deep: true,
      handler(value) {
        console.log(value, '====value2')
        this.currentFilters = value
      }
    },
    lang(val) {
      this.filterOperatorOpts = getFilterOperator()
    }
  },

  methods: {
    comment_change(e) {
      console.log(e)

      var eng_value = e
      var chi_value = ''

      this.sharedState.allCols.forEach(function(i) {
        if (i.Column == eng_value) {
          chi_value = i.Comment
        }
      })
      this.chi_value = chi_value
      console.log('英文参数', eng_value, '中文参数', chi_value)
    },
    handleClose() {
      this.visible = false
    },
    handleClosefilter(index) {
      this.currentFilters.splice(index, 1)
      this.handleSubmit()
    },
    handleEditFilter(filter) {
      this.visible = true
      this.filteCol = filter.filteCol
      this.filterOperator = filter.filterOperator
      this.value1 = filter.value.value1
      this.value2 = filter.value.value2
      this.arrValue = filter.value.arrValue
    },
    handleAdd() {
      this.arrValue.push(this.value3)
      this.value3 = undefined
    },
    handleRemove(value) {
      this.arrValue.splice(this.arrValue.indexOf(value), 1)
    },
    handleConfirm() {
      if (!this.filteCol || !this.filterOperator) {
        this.$message({
          type: 'warning',
          message: this.$t('chart.filterCantBeEmpty')
        })
        return
      }
      const filterObj = {
        filteCol: this.filteCol,
        colType: this.sharedState.allCols.find(item => item.Column === this.filteCol).Type,
        filterOperator: this.filterOperator,
        value: {
          value1: this.value1,
          value2: this.value2,
          arrValue: this.arrValue,
          chi_value: this.chi_value
        },
        operatorParamNum: this.operatorParamNum(this.filterOperator)
      }
      const filterIndex = this.currentFilters.findIndex(item => {
        return item.filteCol === this.filteCol && item.filterOperator === this.filterOperator
      })
      if (filterIndex >= 0) {
        this.currentFilters.splice(filterIndex, 1, filterObj)
      } else {
        this.currentFilters.push(filterObj)
      }
      this.handleSubmit()
    },
    handleSubmit() {
      const filterStrs = this.currentFilters.map(buildFilterSentence)

      console.log('this.currentFilters====子组件', this.currentFilters)
      this.$emit('change', filterStrs.join(' and '))
      this.$emit('update: filters', this.currentFilters)
      this.visible = false
    },
    generateFilterSentence(item) {
      return buildFilterSentence(item)
    },
    operatorParamNum(operator) {
      const a = getFilterOperator().find(item => item.operator === operator)
      return a ? a.paramNum : 1
    },
    needQuotation(col) {
      const colType = this.sharedState.allCols.find(item => item.Column === col).Type
      if (colType.indexOf('(') >= 0) {
        return dataType.find(type => type.name === colType.split('(')[0].toLowerCase()).needQuotation
      } else {
        return dataType.find(type => type.name === colType.toLowerCase()).needQuotation
      }
    },
    addQuotation(valueObj) {
      return {
        value1: `'${valueObj.value1}'`,
        value2: `'${valueObj.value2}'`,
        chi_value: `'${valueObj.chi_value}'`,

        arrValue: valueObj.arrValue.map(value => `'${value}'`)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 20px;
}
</style>