sgxt_web/src/components/aboutTable/FormMessage.vue

<template>
  <el-form ref="elform" :model="listQuery" :label-width="140" :rules="props.rules" :inline="true" label-position="right">
    <el-form-item v-for="item in props.formData" :style="{ width: item.width }" :prop="item.prop" :label="item.label" :label-width="item.labelWidth"   :key="item">
      <!-- input表单 -->
      <MOSTY.Other v-if="item.type == 'input'" width="100%" clearable v-model="listQuery[item.prop]" :placeholder="`请输入${item.label}`"/>
      <el-input v-model="listQuery[item.prop]" v-else-if="item.type == 'textarea'" :placeholder="`请输入${item.label}`" />
      <!-- Select选择 -->
      <MOSTY.Select
        v-else-if="item.type == 'select'"
        width="100%"
        clearable
        v-model="listQuery[item.prop]"
        :dictEnum="item.options"
        :placeholder="`请选择${item.label}`"/>
      <template v-else-if="item.showType === 'department'">
        <MOSTY.Department clearable v-model="listQuery[item.prop]" />
      </template>
      <!-- Upload选择 -->
      <MOSTY.Upload v-else-if="item.type == 'upload'" width="100%" v-model="listQuery[item.prop]"/>
      <!-- CheckBox选择 -->
      <MOSTY.CheckBox v-else-if="item.type == 'checkbox'" width="100%" clearable v-model="listQuery[item.prop]" :checkList="item.options" :placeholder="`请选择${item.label}`"/>

      <!-- 单选 -->
      <el-radio-group v-model="listQuery[item.prop]" v-else-if="item.type == 'radio'">
        <el-radio v-for="obj in item.options" :key="obj.value" :label="obj.value" >{{ obj.label }}</el-radio>
      </el-radio-group>

      <!-- 时间选择 -->
      <el-time-picker v-else-if="item.type == 'time'" v-model="listQuery[item.prop]" placeholder="选择时间"/>
      <el-date-picker v-else-if="item.type == 'date'" v-model="listQuery[item.prop]" type="date" value-format="YYYY-MM-DD" :placeholder="请选择时间"/>
      <el-date-picker v-else-if="item.type == 'datetime'" v-model="listQuery[item.prop]" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" :placeholder="请选择时间"/>
      <el-date-picker v-else-if="item.type == 'datetimerange'" v-model="listQuery[item.prop]" type="datetimerange" :shortcuts="shortcuts" range-separator="To" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="选择开始时间" end-placeholder="选择结束时间"/>
      <el-date-picker v-else-if="item.type == 'daterange'" v-model="listQuery[item.prop]" type="daterange" range-separator="To" value-format="YYYY-MM-DD" start-placeholder="选择开始日期" end-placeholder="选择开始日期" />
      
      <el-switch v-else-if="item.type == 'switch'" v-model="listQuery[item.prop]" class="ml-2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
      
      <template v-else-if="item.type === 'slot'">
        <slot :name="item.prop"></slot>
      </template>
    </el-form-item>
  </el-form>
</template>
  <script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { ref, defineProps, defineEmits, defineExpose, watch } from "vue";
const props = defineProps({
  //循环的值
  formData: {
    default: [],
    type: Array
  },
  propName: {
    default: "",
    type: String
  },
  rules: {
    default: {},
    type: Object
  },
  modelValue: {
    type: Object,
    default: {}
  },
});
const elform = ref();
const listQuery = ref({});
const emits = defineEmits(["update:modelValue"]);
// 提交
const submit = (resfun) => {
  elform.value.validate((valid) => {
    if (!valid) return false;
    resfun(listQuery.value);
  });
};

watch(() => listQuery.value,(newVal) => {
    emits('update:modelValue', newVal)
  },{ immediate: true, deep: true }
);
defineExpose({ submit });
</script>