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.text" :label-width="item.labelWidth"   :key="item">
        <!-- input表单 -->
        <MOSTY.Other v-if="item.type == 'input'" width="100%" clearable v-model="listQuery[item.prop]" :placeholder="`请输入${item.text}`"/>
        <el-input v-model="listQuery[item.prop]" v-else-if="item.type == 'textarea'" :placeholder="`请输入${item.text}`" />
        <!-- Select选择 -->
        <MOSTY.Select
          v-else-if="item.type == 'select'"
          width="100%"
          clearable
          v-model="listQuery[item.prop]"
          :dictEnum="item.optionList"
          :placeholder="`请选择${item.text}`"
        />

        <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.optionList"
          :placeholder="`请选择${item.text}`"
        />
        <el-radio-group v-model="listQuery[item.prop]" v-else-if="item.type == 'radio'">
          <el-radio
            v-for="obj in item.optionList"
            :key="obj.value"
            :label="obj.value"
            >{{ obj.label }}</el-radio
          >
        </el-radio-group>
        <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 { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
  import * as MOSTY from "@/components/MyComponents/index";
  import { ref, defineProps, defineEmits, defineExpose } from "vue";
  const props = defineProps({
    //循环的值
    formData: {
      default: [],
      type: Array
    },
    propName: {
      default: "",
      type: String
    },
    rules: {
      default: {},
      type: Object
    }
  });
  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);
    });
  };
  defineExpose({ submit });
  </script>