vxe-table封装多条件查询组件

1、multiQuery.vue
引用了queryButton 组件

<template>
  <div >
    <div sclass="button-row">
      <queryButton @insertEvent="insertEvent" @doSubmit="doSubmit" @reset="reset" @save="openForm" @cancel="cancel"/>
    </div>
    <!-- 表格 -->
    <vxe-table
      ref="queryTable"
      :data="form.conditionVoList"
      :edit-config="{trigger: 'click', mode: 'cell'}"
      :max-height="400"
      style="margin-top:3px"
      show-overflow
      resizable
      @edit-actived="editActivedEvent"
      @cell-click="increase">
      <vxe-table-column name="icon" fixed="left" width="40" title="删除" >
        <template slot-scope="scope" >
          <svg-icon icon-class="delete" @click.native="deleteRow(scope.row)" />
        </template>
      </vxe-table-column>
      <vxe-table-column :edit-render="{name: 'input', attrs: {disabled: false}}" min-width="90" field="associate" title="条件间联系" >
        <template v-if="form.conditionVoList.indexOf(scope.row)!==0 " slot-scope="scope" >
          <el-select v-model="scope.row.associate" placeholder="请选择" @change="autoAdd(scope.row)">
            <el-option
              v-for="item in associates"
              :disabled="form.conditionVoList.indexOf(scope.row)===0"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column :edit-render="{name: 'input', attrs: {disabled: false}}" min-width="90" field="column" title="查询条件">
        <template scope="scope">
          <el-select v-model="scope.row.column" filterable placeholder="请选择" @change="selectCon">
            <el-option
              v-for="(item,index) in conditions"
              :key="index"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column :edit-render="{name: 'input', attrs: {disabled: false}}" min-width="90" field="type" title="条件值关系" >
        <template slot-scope="scope">
          <el-select v-model="scope.row.type" placeholder="请选择">
            <el-option
              v-for="item in types"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column :edit-render="{name: 'input', attrs: {disabled: false}}" min-width="80" field="value" title="查询值" >
        <template slot-scope="scope" >
          <template v-if="scope.row.column==='site_status'">
            <el-select v-model="scope.row.value" clearable placeholder="请选择" @change="selectStatus">
              <el-option
                v-for="item in dictMap.site_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </template>
          <template v-else>
            <el-input v-model="scope.row.value" />
          </template>
        </template>
      </vxe-table-column>
    </vxe-table>
    <!-- 条件保存表单组件 -->
    <creatQueryForm ref="creatQueryForm" @saveQuery="saveQuery"/>
    <!-- 展示列表 -->
    <h4>历史保存条件</h4>
    <vxe-table
      ref="listTable"
      :data="list"
      :edit-config="{trigger: 'click', mode: 'cell'}"
      :max-height="300"
      show-overflow
      resizable
      @edit-actived="editActivedEvent1"
      @cell-click="queryCon">
      <vxe-table-column name="icon" fixed="left" width="40" title="删除" >
        <template slot-scope="scope" >
          <svg-icon icon-class="delete" @click.native="deleteQuery(scope.row)" />
        </template>
      </vxe-table-column>
      <vxe-table-column :edit-render="{name: 'input', attrs: {disabled: true}}" min-width="60" field="name" title="名字" />
      <vxe-table-column :edit-render="{name: 'input', attrs: {disabled: true}}" min-width="60" field="description" title="描述" />
    </vxe-table>
  </div>
</template>
<script>
import { queryTable, userQuery, creatQuery, userQueryList, deletUserQuery } from '@/api/public'
import queryButton from '@/views/components/queryButton'
import creatQueryForm from '@/views/components/creatQueryForm'
import initDict from '@/mixins/initDict'
export default {
  components: { queryButton, creatQueryForm },
  mixins: [initDict],
  props: {
    tableColumns: {
      type: Array,
      default: () => []
    },
    tableName: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      addCondition: false,
      // 多条件查询
      conditions: [],
      height: 625,
      form: {
        table: this.tableName,
        conditionVoList: []
      },
      types: [
        {
          label: '大于',
          value: 'gt'
        },
        {
          label: '等于',
          value: 'eq'
        },
        {
          label: '小于',
          value: 'lt'
        }, {
          label: '包含',
          value: 'like'
        }
      ],
      associates: [
        {
          label: '并且',
          value: 'and'
        },
        {
          label: '或者',
          value: 'or'
        }
      ],
      list: [],
      temp: {
        name: '',
        description: ''
      }
    }
  },
  mounted() {
    this.getCondition()
    this.height = document.documentElement.clientHeight - 200
  },
  methods: {
    // 初始方法
    getCondition() {
      queryTable(this.tableName).then(res => {
        this.conditions = res.map(item => {
          return { label: item.zcolumnName, value: item.columnName }
        })
      })
      // userQuery(this.tableName).then(res => {
      //   this.form = res
      //   this.form.conditionVoList.sort(this.compare)
      //   console.log(this.form.conditionVoList, '返回值')
      // })
      userQueryList(this.tableName).then(res => {
        console.log(res, '查询保存的用户条件列表')
        this.list = res
      })
      const length = this.form.conditionVoList.length
      if (length === 0) {
        this.insertEvent()
      }
      this.getDictMap('site_status')
    },
    // 排序
    compare(obj1, obj2) {
      var val1 = obj1.sortNumber
      var val2 = obj2.sortNumber
      if (val1 < val2) {
        return -1
      } else if (val1 > val2) {
        return 1
      } else {
        return 0
      }
    },
    // 增加行
    insertEvent() {
      const index = this.form.conditionVoList.length
      this.form.conditionVoList.push({
        column: '',
        type: '',
        value: '',
        associate: '',
        id: '',
        sortNumber: Number(index + 1)
      })
    },
    // vxe表格   单元格点击事件
    increase(data) {
      const index = this.form.conditionVoList.indexOf(data.row)
      const length = this.form.conditionVoList.length
      if ((index === length - 1) && data.row.value !== '') {
        this.insertEvent()
      }
    },
    // 条件联系选择后就自动增加行
    autoAdd() {
      const index = this.form.conditionVoList.indexOf(arguments[0])
      const length = this.form.conditionVoList.length
      if (index === length - 1) {
        this.insertEvent()
      }
    },
    // 查询条件选择值
    selectCon() {
      console.log(arguments[0], '查询条件site_status')
    },
    selectStatus() {
      console.log(arguments[0], '查询条件值', this.form.conditionVoList)
    },
    // vxe表格  控制单元格禁用状态
    editActivedEvent({ row }) {
      const qTable = this.$refs.queryTable
      const aColumn = qTable.getColumnByField('associate') // 条件之间的联系
      if (this.form.conditionVoList.indexOf(row) === 0) {
        aColumn.editRender.attrs.disabled = true
      }
    },
    // 点击查询按钮
    doSubmit() {
      console.log(this.form)
      for (let i = 0; i < this.form.conditionVoList.length; i++) {
        if (!this.form.conditionVoList[i].value) {
          this.form.conditionVoList.splice(i, 1)
        }
      }
      this.$emit('mQuery', this.form)
    },
    // 删除行
    deleteRow() {
      const index = this.form.conditionVoList.indexOf(arguments[0])
      this.form.conditionVoList.splice(index, 1)
    },
    // 点击刷新按钮
    reset() {
      this.getCondition()
      this.temp = {
        name: '',
        description: ''
      }
      this.form.conditionVoList = [{
        column: '',
        type: '',
        value: '',
        associate: '',
        id: '',
        sortNumber: 1
      }]
    },
    // 打开保存条件表单
    openForm() {
      console.log(this.temp, '保存')
      this.$refs.creatQueryForm.form = this.temp
      this.$refs.creatQueryForm.dialog = true
    },
    // 保存用户的查询条件  修改和新增查询条件到历史保存条件中
    saveQuery() {
      console.log(arguments[0], '保存数据名字表单')
      for (let i = 0; i < this.form.conditionVoList.length; i++) {
        if (!this.form.conditionVoList[i].column) {
          this.form.conditionVoList.splice(i, 1)
        }
      }
      this.addCondition = true
      if (this.form.conditionVoList.length) {
        this.form.name = arguments[0].name
        this.form.description = arguments[0].description
      } else {
        return this.$message({
          message: '没有条件可保存',
          type: 'warning'
        })
      }
      this.form.table = this.tableName
      creatQuery(this.form).then(res => {
        console.log(res, '保存成功后返回值')
        this.initList()
      })
    },
    initList() {
      userQueryList(this.tableName).then(res => {
        this.list = res
      })
    },
    // 关闭查询表单
    cancel() {
      this.$emit('close')
    },
    // list中的方法
    queryCon() {
      this.temp.name = arguments[0].row.name
      this.temp.description = arguments[0].row.description
      console.log(this.temp, 'temp对象')
      const conditionVoList = arguments[0].row.conditionVoList
      console.log(conditionVoList, '排序前')
      this.form.conditionVoList = conditionVoList.map(item => {
        return { column: item.column, type: item.type, value: item.value, associate: item.associate, id: item.id, sortNumber: item.sortNumber }
      })
      this.form.conditionVoList.sort(this.compare)
      console.log(this.form.conditionVoList, '排序后')
    },
    deleteQuery() {
      this.$confirm('此操作将永久删除该保存条件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletUserQuery(arguments[0].name, arguments[0].table).then(res => {
          console.log(res, '删除数据')
          this.getCondition()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch((err) => {
        console.log(err)
      })
    },
    // vxe表格  控制单元格禁用状态
    editActivedEvent1({ row }) {
      const lTable = this.$refs.listTable
      const aColumn = lTable.getColumnByField('name') // 名字
      if (this.list.indexOf(row) === 0) {
        aColumn.editRender.attrs.disabled = true
      }
    }
  }
}
</script>

<style lang="scss" >

</style>

2、效果图