boying-vue/src/views/modules/common/search.vue

<template>
  <div class="search">
    <el-dialog
      :close-on-click-modal="false"
      :show-close="false"
      :close-on-press-escape="false" title="查询条件"
      :visible.sync="visible"
      width="500px" v-drag>
      <el-table
        :height="height"
        :data="userColumnList"
        border
        style="width: 100%;">
        <el-table-column
          v-for="(item,index) in columnList" :key="index"
          :sortable="item.columnSortable"
          :prop="item.columnProp"
          :header-align="item.headerAlign"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :align="item.align"
          :fixed="item.fixed==''?false:item.fixed"
          :min-width="item.columnWidth"
          :label="item.columnLabel">
          <template slot-scope="scope">
          <span v-if="item.columnProp == 'queryConditions'">
            <span v-if="scope.row.queryType=='date'">
               <el-select v-model="scope.row.queryConditions">
                  <el-option value="=" label="="></el-option>
              </el-select>
            </span>
           <span v-if="scope.row.queryType=='number'">
              <el-select v-model="scope.row.queryConditions">
                  <el-option value="=" label="="></el-option>
              </el-select>
            </span>
            <span v-if="scope.row.queryType=='string'">
              <el-select v-model="scope.row.queryConditions">
                  <el-option value="=" label="="></el-option>
                  <el-option value="like" label="like"></el-option>
              </el-select>
            </span>
          </span>
          <span v-else-if="item.columnProp == 'queryValue'">
             <span class="searchTime" v-if="scope.row.queryType=='date'">
               <el-date-picker value-format="yyyy-MM-dd" style="width: 100%" v-model="scope.row.queryValue" value="="></el-date-picker>
            </span>
            <span v-if="scope.row.queryType=='string'">
               <el-input style="width: 100%" v-model="scope.row.queryValue"></el-input>
            </span>
            <span v-if="scope.row.queryType=='number'">
               <el-input style="width: 100%" oninput ="value=value.replace(/[^0-9.]/g,'')" v-model="scope.row.queryValue"></el-input>
            </span>
          </span>
            <span v-else>
           {{ scope.row[item.columnProp] }}
          </span>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="searchCriteria()">搜索</el-button>
        <el-button @click="visible = false">关闭</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>

import {
  getTableDefaultListLanguage,
  getTableUserListLanguage
} from "@/api/table.js"

export default {
  data() {
    return {
      height: 350,
      // 用户table 配置集合
      userColumnList: [],
      queryTable: {},
      visible: false,
      columnList: [
        {
          userId: this.$store.state.user.name,
          functionId: 9002,
          serialNumber: '9002SearchDescription',
          tableId: "9002Search",
          tableName: "搜索条件",
          columnProp: "queryDescription",
          headerAlign: "type",
          align: "left",
          columnLabel: "属性描述",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        // {
        //   userId: this.$store.state.user.name,
        //   functionId: 9002,
        //   serialNumber: '9002SearchAttributes',
        //   tableId: "9002Search",
        //   tableName: "搜索条件",
        //   columnProp: "queryAttributes",
        //   headerAlign: "center",
        //   align: "left",
        //   columnLabel: "查询属性",
        //   columnHidden: false,
        //   columnImage: false,
        //   columnSortable: false,
        //   sortLv: 0,
        //   status: true,
        //   fixed: '',
        //   columnWidth: 100
        // },
        // {
        //   userId: this.$store.state.user.name,
        //   functionId: 9002,
        //   serialNumber: '9002SearchType',
        //   tableId: "9002Search",
        //   tableName: "搜索条件",
        //   columnProp: "queryType",
        //   headerAlign: "center",
        //   align: "left",
        //   columnLabel: "属性类型",
        //   columnHidden: false,
        //   columnImage: false,
        //   columnSortable: false,
        //   sortLv: 0,
        //   status: true,
        //   fixed: '',
        //   columnWidth: 40
        // },
        // {
        //   userId: this.$store.state.user.name,
        //   functionId: 9002,
        //   serialNumber: '9002SearchConditions',
        //   tableId: "9002Search",
        //   tableName: "搜索条件",
        //   columnProp: "queryConditions",
        //   headerAlign: "center",
        //   align: "left",
        //   columnLabel: "查询条件",
        //   columnHidden: false,
        //   columnImage: false,
        //   columnSortable: false,
        //   sortLv: 0,
        //   status: true,
        //   fixed: '',
        //   columnWidth: 50
        // },
        {
          userId: this.$store.state.user.name,
          functionId: 9002,
          serialNumber: '9002SearchValue',
          tableId: "9002Search",
          tableName: "搜索条件",
          columnProp: "queryValue",
          headerAlign: "type",
          align: "left",
          columnLabel: "查询值",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: 200,
          sortLv: 0,
          status: true,
          fixed: '',

        }
      ],
    }
  },
  methods: {
    // 确认搜索条件
    searchCriteria() {
      // const loading = this.$loading({
      //   lock: true,
      //   text: '查询中',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // });
      var filter = this.userColumnList.filter(item => item.queryValue!="");
      this.$emit('childByValue', filter)
      setTimeout(() => {
        // loading.close();
      }, 2000);
    },
    // 获取 用户的配置
    init(queryTable) {
      this.queryTable = queryTable
      this.visible = true
      getTableUserListLanguage(queryTable).then(({data}) => {
        if (data.code == 0) {
          if (data.rows.length <= 0) {
            getTableDefaultListLanguage(queryTable).then(({data}) => {
              this.userColumnList = data.rows.map( item => {
                let data = {
                  queryAttributes: item.columnProp,
                  queryDescription: item.columnLabel,
                  queryValue: '',
                  queryConditions: '',
                  queryType: item.columnType
                }
                return data
              })
            })
          }else {
            this.userColumnList = data.rows.map( item => {
              let data = {
                queryAttributes: item.columnProp,
                queryDescription: item.columnLabel,
                queryValue: '',
                queryConditions: '',
                queryType: item.columnType
              }
              return data
            })
          }

        }
      })

    },

  }
}
</script>
<style lang="scss">

.search .el-table .cell {
  height: 24px;
}

.search .el-input--medium .el-input__inner {
  height: 24px;
  line-height: 20px;
}

.el-input--medium .el-input__icon {
  line-height: 26px;
}

</style>