WZC2/fe/PC/src/components/searchPage/index.vue

<template>
<!-- 组件功能：搜索页面，filterSelect后面放大镜页面 -->
  <el-dialog
    class="searchPageComponents"
    :title="formTitle"
    v-if="displayDialog"
    :visible="true"
    :fullscreen="true"
    :modal="false"
    :modal-append-to-body="false"
    :show-close="false"
  >
    <div class="searchDialog">
      <div class="searchSXButton">
        <el-button
          type="primary"
          icon="el-icon-finished"
          size="mini"
          @click="handleSubmit"
          style="width:180px"
        >筛选
        </el-button>
      </div>
      <umyTable
        ref="searchTable"
        :tableLoading="tableLoading"
        :tableData="searchTableData"
        :selectionTable="selectionTable"
        :tableColumns="searchTableColumns | DialogTable"
        :setUTableHeight="setUTableHeight"
        @handleSelectionChange="prepareFormData"
      ></umyTable>
      <pagination
        :totalCount="searchTotalCount"
        :pagesizeProps="supplierItemPage.MaxResultCount"
        @SizeChange="SizeChange"
        @CurrentChange="CurrentChange"
      ></pagination>
      <div class="formButton">
        <currenButton
          :buttonsAllIsRight="buttonsAllIsRight"
          :Butttondata="editHandle"
          @tableButtonClick="tableButtonClick"
        ></currenButton>
      </div>
    </div>
    <div class="filterPage" v-if="modal">
      <!-- 筛选 -->
      <conditionFilters
        :displayDialog="dialog"
        :screenData="screenData"
        :tableColumns="searchTableColumns"
        @screenFormClick="screenFormClick"
        @filterColumnChange="filterColumnChange"
        @screenDelete="screenDelete"
        @screenPush="screenPush"
        :filterActionOptions="filterActionOptions"
      ></conditionFilters>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    //是否需要遮罩层
    // modal: {
    //   type: Boolean,
    //   default: () => {
    //     return true
    //   }
    // },
    //loading
    tableLoading: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    // 已app-main高度为100%  需要减掉的高度
    setUTableHeight: {
      type: Number,
      default: () => {
        return 220;
      }
    },
    // 按钮整体靠右
    buttonsAllIsRight:{
      type: Boolean,
      default: false
    },
    //名称
    formTitle: {
      type: String,
      default: ''
    },
    //是否弹窗
    displayDialog: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    //Table表头数据
    searchTableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    //Table表身绑定
    searchTableColumns: {
      type: Array,
      default: () => {
        return []
      }
    },
    //Table总数
    searchTotalCount: {
      type: Number,
      default: () => {
        return 0
      }
    },
    //Table每页显示数量
    supplierItemPage: {
      type: Object,
      default: () => {
        return {
          MaxResultCount: 20,
          SkipCount: 0
        }
      }
    },
    //Table选中数据
    selectionTable: {
      type: Boolean,
      default: true
    },
    //Table是否支持多选
    isMoreSelectTable: {
      type: Boolean,
      default: false
    },
    // 筛选条件自定义（等于/不等于/大于/小于等数据）
    filterActionOptions:{
      type: Array,
      default: null
    },
    //确认筛选后续操作
    advancedFilter: {
      type: Function,
      default: () => {
        return () => {
          return {}
        }
      }
    },
    //初始化筛选数据
    filterPageListParams: {
      type: Array,
      default: () => {
        return []
      }
    },
    editHandle: {
      type: Array,
      default: () => {
        return [
          { label: "取消", name: "cancel" },
          { label: "确定", type: "primary", name: "determine" },
        ]
      }
    }
  },
  data () {
    return {
      modal: false,
      dialog: {
        screenDialog: false
      },
      //筛选
      screenData: {
        filters: [{
          logic: "And",
          column: "",
          action: "==",
          value: ""
        }]
      },
    }
  },
  methods: {
    // 高级筛选-选择对象更改
    filterColumnChange(item){
      this.$emit("filterColumnChange", item)
    },
    //table选择当前行数据
    prepareFormData (val) {
      this.$parent.isMoreSelectTable = this.isMoreSelectTable
      this.$emit('handleSelectionChange', val)
    },
    //改变每页最大数
    SizeChange (val) {
      this.$emit('SizeChange', val)
    },
    //改变当前页
    CurrentChange (val) {
      this.$emit('CurrentChange', val)
    },
    //table按钮点击事件
    tableButtonClick (val) {
      this.$emit('tableButtonClick', val, this.$refs.searchTable)
    },
    //点击筛选按钮
    handleSubmit () {
      let filter = JSON.parse(JSON.stringify(this.filterPageListParams))
      let newFilter = this.supplierItemPage.condition.filters
      this.dialog.screenDialog = true
      this.screenData.filters = []
      if (newFilter.length != 0) {
        filter.forEach((element, index) => {
          newFilter[index].hide = true
        });
        this.screenData.filters.push(...newFilter)
      } else {
        let data = [{
          logic: "And",
          column: "",
          action: "==",
          value: ""
        }]
        this.screenData.filters = data
      }
      this.$emit('sxBtnClickHandle',this.screenData.filters)
      this.modal = true
    },
    // 设置this.screenData.filters的值
    setScreenDataFilters (data){
      this.screenData.filters = data
    },
    //筛选
    screenFormClick (val) {
      let filter = JSON.parse(JSON.stringify(this.filterPageListParams))
      if (val[0] == 0) {
        if (filter.length != 0) {
          this.supplierItemPage.condition.filters = filter
        } else {
          this.supplierItemPage.condition.filters = []
        }
        this.dialog.screenDialog = false;
        this.advancedFilter()
      } else if (val[0] == 1) {
        val[1].clearValidate()
        this.dialog.screenDialog = false;
      } else {
        val[1].validate((valid, newFilter) => {
          if (valid) {
            this.supplierItemPage.condition.filters = []
            this.screenData.filters.forEach((element, index) => {
              // delete element.hide //todo:如果打开这个盘点要特殊处理（514-519行）
              this.supplierItemPage.condition.filters.push(element)
            })
            this.dialog.screenDialog = false;
            this.advancedFilter()
          } else {
            this.$errorMsg('请按照提示继续操作')
            return false;
          }
        });
      }
      this.modal = false
    },
    //添加筛选条件
    screenPush () {
      let data = {
        logic: "And",
        column: "",
        action: "==",
        value: ""
      }
    //   if (this.screenData.filters.length <= this.searchTableColumns.length) {
        this.screenData.filters.push(data)
    //   } else {
        // this.$errorMsg('筛选条件数不足！')
    //   }
    },
    //删除筛选条件
    screenDelete (val) {
      if (this.screenData.filters.length == 1) {
        this.$warningMsg('必须保留一条筛选条件！')
      } else {
        this.$confirm('您确定删除吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.screenData.filters.splice(val, 1)
        }).catch((err) => {
          console.log(err)
        });
      }
    },
  }

}
</script>

<style  lang="scss">
.searchPageComponents {
  .el-dialog__body{
    height: calc(100% - 55px) !important;
    padding: 0 20px;
  }
  .currenButton{
    padding: 0;
  }
  .searchDialog{
    height: 100%;
  }
  .pagination{
    padding: 30px 10px 20px 10px;
  }
  .formButton{
    padding-top: 0 !important;
  }
  .el-dialog__header{
    padding-top: 10px;
  }
  .currenButton .el-button{
    margin: 0;
    margin-left: 10px;
  }
}
</style>
<style lang="scss" scoped>
.searchSXButton {
  padding-bottom: 10px
}
.el-dialog__wrapper{
  position: absolute !important;
}
</style>