pss_front_vue/src/layout-content/CustomSearch.vue

<template>
  <div class="search-container">
    <el-row :gutter="10" type="flex" class="search-items" justify="end">
      <el-col v-for="(item, index) in propCfg" :key="index" :span="6">
        <el-select
          v-if="item.type === $GCFG.typeSel"
          :key="index"
          v-model="searchForm[item.prop]"
          style="width: 100%"
          :placeholder="getPropPH(item, businessKey, 'search')"
          :size="$GCFG.size"
          clearable
          @change="selectChg($event, item)"
        >
          <el-option
            v-for="selItem in dictMap[item.prop]"
            :key="selItem[item.dict.props.value]"
            :label="selItem[item.dict.props.label]"
            :value="selItem[item.dict.props.value]"
          />
        </el-select>
        <el-date-picker
          v-if="item.type === $GCFG.typeDateTime"
          :key="index"
          v-model="searchForm[item.prop]"
          :placeholder="getPropPH(item, businessKey, 'search')"
          :size="$GCFG.size"
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
        <el-input
          v-if="item.type === $GCFG.typeOrg"
          ref="deptName"
          :key="index"
          v-model="searchForm[$GCFG.getOrgObjKeyFlag(item.prop)].name"
          :placeholder="getPropPH(item, businessKey, 'search')"
          :size="$GCFG.size"
          suffix-icon="el-icon-search"
          @click.native="showOfficeDialog(searchForm, item)"
        />
        <el-input
          v-if="item.type === $GCFG.typeInput"
          :key="index"
          v-model="searchForm[item.prop]"
          :placeholder="getPropPH(item, businessKey, 'search')"
          :size="$GCFG.size"
        />
      </el-col>
    </el-row>
    <div class="btn-container">
      <el-button
        :size="$GCFG.size"
        type="primary"
        icon="el-icon-search"
        @click="search()"
      >{{ $GPROP.searchBtn }}</el-button>
      <el-button
        :size="$GCFG.size"
        icon="el-icon-refresh"
        @click="search('reset')"
      >{{ $GPROP.resetBtn }}</el-button>
    </div>
  </div>
</template>
<script>
import common from './mixins/common'
import props from './mixins/props'
import org from './mixins/org'
import { initDicts } from './core/dictService'
export default {
  name: 'CustomSearch',
  mixins: [common, props, org],
  data() {
    return {
      searchForm: {}
    }
  },
  created() {
    this.initSearchForm()
  },
  methods: {
    search(isReset) {
      this.$emit('search-change', isReset)
    },
    initSearchForm() {
      for (const item of this.propCfg) {
        if (item.type === this.$GCFG.typeOrg) {
          const keyFlag = this.$GCFG.getOrgObjKeyFlag(item.prop)
          this.$set(this.searchForm, item.prop, '')
          this.$set(this.searchForm, keyFlag, {})
          this.$set(this.searchForm[keyFlag], 'id', '')
          this.$set(this.searchForm[keyFlag], 'name', '')
          continue
        }
        this.$set(this.searchForm, item.prop, '')
      }
    },
    selectChg(id, item) {
      const that = this
      if (item.cascader && item.cascader.length > 0) {
        item.cascader.forEach((cascaderItem) => {
          that.searchForm[cascaderItem] = ''
          that.dictMap[cascaderItem] = []
          initDicts(item.cascaderObj[cascaderItem], id, false, (data) => {
            that.dictMap[cascaderItem] = data
          })
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.search-container {
  display: flex;
  width: 100%; // 占满整个可用空间
  justify-content: space-between; // 从右边到左边布局

  .btn-container {
    padding-left: 10px;
    flex: 0 0 auto; // 仅占用本身所需要的最小空间
  }

  .search-items {
    flex: 1; // 占用剩余的所有空间
  }
}
</style>