admin-frontend/src/components/OmageForm/index.vue

<!--
 * @Author: Gui
 * @Date: 2023-03-01 19:20:44
 * @LastEditors: guicheng 1625811865@qq.com
 * @LastEditTime: 2025-03-12 16:28:04
 * @Description: kxs files
 * @filePath: 
-->
<script setup lang="ts">
import { ref, watch } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { ElMessage } from "element-plus";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";

const props = defineProps({
  formData: {
    type: Object,
    default: () => {}
  },
  refresh: {
    type: Boolean,
    default: true
  },
  loading: {
    type: Boolean,
    default: false
  },
  size: {
    type: String,
    default: "default"
  },
  formWidth: {
    type: String,
    default: "!w-[230px]"
  },
  labelWidth: {
    type: String,
    default: "100px"
  },
  labelPosition: {
    type: String,
    default: "left"
  },
  searchAll: {
    type: Boolean,
    default: true
  },
  searchText: {
    type: String,
    default: "搜索"
  }
});
// 表单实例
const formRef = ref();
// 循环挂载每一个表单值
const formState = ref({});
// 传入的搜索方法
const emit = defineEmits(["search"]);
// 提交表单
const onSearch = type => {
  // 对空值做处理
  const object = {};
  for (const key in formState.value) {
    if (Object.prototype.hasOwnProperty.call(formState.value, key)) {
      object[key] = formState.value[key] || "";
    }
  }
  if (type === "all") {
    // all类型表单提交
    formRef.value.resetFields();
    emit("search", {}, type);
  } else {
    // search类型表单提交并做表单校验
    formRef.value.validate(async valid => {
      if (valid) {
        emit("search", object, type);
      } else {
        //表单校验失败回调
        ElMessage({
          message: "请输入完整表单信息",
          type: "error"
        });
      }
    });
  }
};
// 格式化表单校验规则;
const rules = ref({});

watch(props.formData, () => {
  for (const key in props.formData) {
    if (Object.prototype.hasOwnProperty.call(props.formData, key)) {
      formState.value[key] = props.formData[key]["value"];
      const rule = props.formData[key]["rules"];
      if (rule) {
        rules.value[key] = rule;
      }
    }
  }
});

// 抛出当前组件表单实例
defineExpose(
  new Proxy(
    {},
    {
      get(_target, prop) {
        return formRef.value?.[prop];
      },
      has(_target, prop) {
        return prop in formRef.value;
      }
    }
  )
);
</script>

<template>
  <div class="bg-bg_color pl-8 pt-4 pr-8">
    <el-form
      :inline="true"
      :model="formState"
      :label-position="labelPosition"
      :label-width="labelWidth"
      class="w-[99/100]"
      ref="formRef"
      :rules="rules"
    >
      <template v-for="(value, key, i) in formData" :key="i">
        <el-form-item :label="value.label" :prop="key">
          <el-input
            v-if="value.type === 'input' || value.type === ''"
            v-model="formState[key]"
            :placeholder="`请输入${value.label}`"
            clearable
            :size="size"
            :class="formWidth"
          />
          <el-select
            v-if="value.type === 'select'"
            v-model="formState[key]"
            :placeholder="`请选择${value.label}`"
            :size="size"
            :multiple="value.disposition?.multiple || false"
            clearable
            :class="formWidth"
          >
            <el-option
              v-for="item in value.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-date-picker
            v-if="value.type === 'picker'"
            v-model="formState[key]"
            :type="value.disposition?.type || 'datetime'"
            :placeholder="`请选择${value.label}`"
            :range-separator="value.disposition['range-separator'] || '-'"
            :start-placeholder="
              value.disposition['start-placeholder'] || '开始时间'
            "
            :end-placeholder="
              value.disposition['end-placeholder'] || '结束时间'
            "
            clearable
            :class="formWidth"
          />
          <el-input-number
            v-if="value.type === 'number'"
            v-model="formState[key]"
            :min="1"
            :max="10"
          />
        </el-form-item>
      </template>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon(Search)"
          :loading="loading"
          @click="onSearch('search')"
          >{{ searchText }}</el-button
        >
      </el-form-item>
      <el-form-item v-if="searchAll">
        <el-button
          type="primary"
          :icon="useRenderIcon(Refresh)"
          :loading="loading"
          @click="onSearch('all')"
          >全部</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<style scoped></style>