sgxt_web/src/views/backOfficeSystem/ces/components/QueryFormPanel.vue

<template>
  <section class="query-wrap">
    <div class="query-title">{{ title }}</div>
    <div class="query-grid">
      <div v-for="field in renderFields" :key="field.key" class="query-cell">
        <div class="cell-label">{{ field.label }}</div>
        <div class="cell-control" :class="{ 'is-checkbox': field.type === 'checkbox' }">
          <el-input clearable v-if="field.type === 'input'" v-model="formState[field.key]" class="control-input"
            :placeholder="field.placeholder || ''" />
          <el-input clearable v-else-if="field.type === 'number'" v-model="formState[field.key]" class="control-input"
            type="number" :placeholder="field.placeholder || ''" />
          <el-select clearable v-else-if="field.type === 'select'" v-model="formState[field.key]" class="control-select"
            :placeholder="field.placeholder || '请选择'" :multiple="field.multiple || false" collapse-tags
            collapse-tags-tooltip>
            <el-option v-for="item in field.options || []" :key="item.value ?? item" :label="item.label ?? item"
              :value="item.value ?? item" />
          </el-select>
          <el-date-picker clearable v-else-if="field.type === 'date'" v-model="formState[field.key]"
            class="control-date" type="date" :placeholder="field.placeholder || '请选择日期'" value-format="YYYY-MM-DD" />
          <el-date-picker clearable v-else-if="field.type === 'datetime'" v-model="formState[field.key]"
            class="control-date" type="datetime" :placeholder="field.placeholder || '请选择时间'"
            value-format="YYYY-MM-DD HH:mm:ss" />
          <el-date-picker clearable v-else-if="field.type === 'daterange'" v-model="formState[field.key]"
            class="control-date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            value-format="YYYY-MM-DD" />
          <el-date-picker clearable v-else-if="field.type === 'datetimerange'" v-model="formState[field.key]"
            class="control-date" type="datetimerange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
          <template v-else-if="field.type === 'department'">
            <MOSTY.Department clearable v-model="formState[field.key]" class="control-select" />
          </template>
          <div v-else-if="field.type === 'checkbox'" class=" checkbox-wrap">
            <el-checkbox v-model="formState[field.key]" />
          </div>
        </div>
      </div>
    </div>
    <div class="query-action">
      <div>
        <slot name="but"></slot>
      </div>
      <div>
        <el-button size="small" type="primary" @click="handleSearch">{{ searchText }}</el-button>
        <el-button size="small" type="button" @click="handleReset">重置 </el-button>
      </div>
    </div>
  </section>
</template>

<script setup>
import { computed, reactive, watch } from 'vue'
import * as MOSTY from "@/components/MyComponents/index";
const props = defineProps({
  title: {
    type: String,
    default: '查询条件'
  },
  searchText: {
    type: String,
    default: '查询'
  },
  fields: {
    type: Array,
    default: () => []
  },
  searchArr: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['search', 'submit', 'reset'])
const formState = reactive({})

const renderFields = computed(() => {
  const source = props.searchArr.length ? props.searchArr : props.fields
  return source.map((field) => ({
    ...field,
    key: field.key || field.prop,
    type: field.type || field.showType || 'input'
  })).filter((field) => field.key)
})

const getResetValue = (field) => {
  if (field.defaultVal !== undefined) {
    return Array.isArray(field.defaultVal) ? [...field.defaultVal] : field.defaultVal
  }
  if (field.type === 'checkbox') {
    return false
  }
  if (field.type === 'daterange' || field.type === 'datetimerange') {
    return []
  }
  if (field.type === 'select') {
    if (field.multiple) {
      return []
    }
    return null
  }
  return ''
}

const buildResetPayload = () => {
  const payload = {}
  renderFields.value.forEach((field) => {
    payload[field.key] = getResetValue(field)
  })
  return payload
}

const setFormState = (value = {}) => {
  Object.keys(formState).forEach((key) => {
    delete formState[key]
  })
  renderFields.value.forEach((field) => {
    if (value[field.key] !== undefined) {
      formState[field.key] = Array.isArray(value[field.key]) ? [...value[field.key]] : value[field.key]
      return
    }
    formState[field.key] = getResetValue(field)
  })
}

const getFormSnapshot = () => {
  const snapshot = {}
  renderFields.value.forEach((field) => {
    const value = formState[field.key]
    if (Array.isArray(value)) {
      snapshot[field.key] = [...value]
      return
    }
    snapshot[field.key] = value
  })
  return snapshot
}

const handleSearch = () => {
  const payload = getFormSnapshot()
  emit('search', payload)
  emit('submit', payload)
}

const handleReset = () => {
  const payload = buildResetPayload()
  setFormState(payload)
  emit('reset', true)
  emit('search', payload)
  emit('submit', payload)
}

watch(
  renderFields,
  () => {
    setFormState(buildResetPayload())
  },
  { immediate: true }
)

defineExpose({
  formState,
  handleSearch,
  handleReset
})
</script>

<style scoped lang="scss">
.query-wrap {
  border: 1px solid #b8d3ff;
  background: #fff;
}

.query-title {
  height: 32px;
  background: linear-gradient(to right, #9ed7ff, #e6f0f8);
  line-height: 32px;
  padding-left: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #0d2148;
  border-bottom: 1px solid #b8d3ff;
}

.query-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.query-cell {
  display: flex;
  min-height: 40px;
  border-right: 1px solid #b8d3ff;
  border-bottom: 1px solid #b8d3ff;
}

.query-cell:nth-child(4n) {
  border-right: 0;
}

.cell-label {
  width: 130px;
  flex-shrink: 0;
  border-right: 1px solid #b8d3ff;
  font-size: 14px;
  color: #0d2148;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.cell-control {
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.cell-control.is-checkbox {
  justify-content: center;
  padding: 0;
}

.control-input,
.control-select,
.control-date {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

:deep(.control-input .el-input__wrapper),
:deep(.control-select .el-select__wrapper),
:deep(.control-date .el-input__wrapper) {
  width: 100%;
  max-width: 100%;
  min-height: 28px;
  border-radius: 0;
  box-shadow: 0 0 0 1px #b8d3ff inset;
}

:deep(.control-date.el-date-editor) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

:deep(.control-date.el-date-editor .el-range-input) {
  min-width: 0;
}

:deep(.control-input .el-input__inner),
:deep(.control-select .el-select__placeholder),
:deep(.control-date .el-input__inner) {
  font-size: 14px;
  color: #0d2148;
}

:deep(.control-date .el-range-input) {
  font-size: 14px;
  color: #0d2148;
}

:deep(.control-date .el-range__icon),
:deep(.control-date .el-range__close-icon) {
  line-height: 1;
}

.checkbox-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

:deep(.checkbox-wrap .el-checkbox) {
  margin-right: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

:deep(.checkbox-wrap .el-checkbox__inner) {
  width: 14px;
  height: 14px;
}

.query-action {
  height: 36px;
  display: flex;
  // justify-content: flex-end;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
}

.search-btn {
  height: 26px;
  min-width: 70px;
  border: 1px solid #0f5bbd;
  background: #0f5bbd;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
</style>