a-common-list/packages/advanced-query/src/query.js

基于vxe-table封装的自定义可配置表格

/**
 * lz，2022-09-26 10:12
 * 高级查询
 */
import { Modal } from '../../modal'
import { Form } from '../../form'
import { FormItem } from '../../form-item'
// 引入axios用于请求接口
import { axios } from '../../ya-wei-list/src/request'
import {
  Radio as elRadio,
  Checkbox as elCheckbox,
  Input as elInput,
  DatePicker as elDatePicker,
  Switch as elSwitch,
  Select as elSelect,
  Option as elOption,
  Cascader as elCascader
} from 'element-ui'

export default {
  inheritAttrs: false,
  name: 'advancedQuery',
  data () {
    return {
      // 表单数据
      formData: {},
      // 表单校验规则
      formRules: {},
      // 数据库查询出的
      dataBase: []
    }
  },
  props: {
    // 是否显示
    visible: {
      type: Boolean,
      default: false
    },
    // 数据回显用
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 表格配置key
    tableKey: {
      type: String,
      require: true
    },
    // 渲染页面用
    option: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  model: {
    prop: 'visible',
    event: 'updateVisible'
  },
  // 监听属性 类似于data概念",
  computed: {},
  // 监控data中的数据变化",
  watch: {
    visible (val) {
      if (val) this.init()
    }
  },
  methods: {
    // 通过接口调用获取高级查询数据
    async queryByCode () {
      const configName = this.tableKey
      if (configName) {
        const res = await axios.request({
          url: '/dict-common/queryByConfigName',
          method: 'GET',
          params: {
            configName
          }
        })
        this.dataBase = res.data
      }
    },
    init () {
      this.formData = {}
      const data = this.data
      this.formData = { ...data }
      this.queryByCode()
      // console.log(JSON.stringify(this.option))
    },
    submit () {
      this.$emit('submit', this.formData)
      this.updateVisible(false)
    },
    submitCallback (data) {
      const str = this.isEdit ? '修改' : '添加'
      if (data.success) {
        this.$XModal.message({ status: 'success', content: `${str}成功` })
        this.reload()
        this.updateVisible(false)
      } else {
        this.$XModal.message({ status: 'warning', content: data.message || `${str}失败` })
      }
    },
    updateVisible (flag) {
      this.$emit('updateVisible', flag)
    },
    getDom (item, type, h) {
      let render = null
      switch (type) {
        case 'Radio': // 单选框
          break
        case 'Checkbox': // 多选框
          break
        case 'String': // 文本输入框
          break
        case 'Number': // 数字输入框
          break
        case 'Date': // 日期选择器
          break
        case 'Switch': // 开关
          break
        case 'Select': // 下拉选择
          break
        case 'Cascader': // 级联选择
          break
        default:
          render = this.renderInput(item, h)
      }
      return render || this.renderInput(item, h)
    },
    setFormData (item, e) {
      const data = { ...this.formData }
      data[item.field.fieldName] = e
      this.formData = data
    },
    // 渲染下拉
    renderSelect (item, h) {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      const that = this
      return h(elSelect, {
        attrs: {
          value: that.formData[item.field.fieldName],
          placeholder: '请选择'
        },
        on: {
          input: (e) => {
            that.setFormData(item, e)
          }
        }
      }, [])
    },
    // 渲染表格
    renderInput (item, h) {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      const that = this
      return h(elInput, {
        attrs: {
          value: that.formData[item.field.fieldName],
          placeholder: '请输入'
        },
        on: {
          input: (e) => {
            that.setFormData(item, e)
          }
        }
      })
    }
  },
  render (h) {
    // eslint-disable-next-line @typescript-eslint/no-this-alias
    const that = this
    return h('div', { class: 'advanced-query' }, [
      h(Modal, {
        attrs: { value: this.visible, showFooter: true, width: 1000, title: '高级查询' },
        on: {
          input: (flag) => {
            that.updateVisible(flag)
          }
        }
      }, [
        h(Form, {
          attrs: { data: this.formData, rules: this.formRules, titleAlign: 'right', titleWidth: '100' }
        }, this.option.filter(item => item.superShow === 1 || item.superShow === '1')
          .map(item => {
            return h(FormItem, {
              attrs: {
                field: item.configName,
                title: item.fieldCn,
                span: item.fieldCol || 12,
                itemRender: {}
              },
              scopedSlots: {
                default () {
                  const type = item.fieldShowType
                  if (type) {
                    return that.getDom(item, type, h)
                  } else {
                    return that.renderInput(item, h)
                  }
                }
              }
            })
          }))
      ])
    ])
  }
}