sgxt_web/src/components/aboutTable/FormMessage.vue

<template>
  <el-form
    ref="elform"
    :model="listQuery"
    :label-width="props.labelWidth"
    :rules="props.rules"
    :inline="true"
    label-position="right"
  >
    <el-form-item
      v-for="item in props.formList"
      :style="item.width && { width: item.width }"
      :prop="item.prop"
      :label="item.label"
      :label-width="item.labelWidth"
      :key="item"
    >
      <!-- input表单 input-->
      <MOSTY.Other
        v-if="item.type == 'input'"
        width="100%"
        clearable
        v-model="listQuery[item.prop]"
        :placeholder="`请输入${item.label}`"
        :disabled="item.disabled"
      />
      <el-input
        v-model="listQuery[item.prop]"
        v-else-if="item.type == 'textarea'"
        type="textarea"
        :rows="3"
        :placeholder="`请输入${item.label}`"
        :disabled="item.disabled"
      />
      <!-- 数值 inputNumber-->
      <el-input
        type="number"
        v-model="listQuery[item.prop]"
        v-else-if="item.type == 'inputNumber'"
        :placeholder="`请输入${item.label}`"
        :disabled="item.disabled"
      />
      <!-- 数值 number-->
      <el-input-number
        v-model="listQuery[item.prop]"
        v-else-if="item.type == 'number'"
        style="width: 100%"
        :min="item.min || 0"
        :max="item.max || 1000"
        :disabled="item.disabled"
      />
      <!--选择 select-->
      <MOSTY.Select
        v-else-if="item.type == 'select'"
        filterable
        :multiple="item.multiple"
        v-model="listQuery[item.prop]"
        :dictEnum="item.options"
        width="100%"
        clearable
        :placeholder="`请选择${item.label}`"
        :disabled="item.disabled"
      />
      <!-- 部门department -->
      <template v-else-if="item.type === '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]"
        :isImg="item.isImg"
        :disabled="item.disabled"
      />
      <!--选择checkbox -->
      <MOSTY.CheckBox
        v-else-if="item.type == 'checkbox'"
        width="100%"
        clearable
        v-model="listQuery[item.prop]"
        :checkList="item.options"
        :placeholder="`请选择${item.label}`"
        :disabled="item.disabled"
      />

      <!-- 单选radio -->
      <el-radio-group
        v-model="listQuery[item.prop]"
        v-else-if="item.type == 'radio'"
        :disabled="item.disabled"
      >
        <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="选择时间"
        style="width: 100%"
        :disabled="item.disabled"
      />
      <el-date-picker
        v-else-if="item.type == 'date'"
        v-model="listQuery[item.prop]"
        type="date"
        value-format="YYYY-MM-DD"
        placeholder="请选择日期"
        style="width: 100%"
        :disabled="item.disabled"
      />
      <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="请选择时间"
        style="width: 100%"
        :disabled="item.disabled"
      />
      <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="选择结束时间"
        style="width: 100%"
        :disabled="item.disabled"
      />
      <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="选择开始日期"
        style="width: 100%"
        :disabled="item.disabled"
      />

      <el-switch
        v-else-if="item.type == 'switch'"
        v-model="listQuery[item.prop]"
        class="ml-2"
        :disabled="item.disabled"
        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({
  //循环的值
  formList: {
    default: [],
    type: Array
  },
  rules: {
    default: {},
    type: Object
  },
  labelWidth: {
    default: "140px",
    type: String
  },
  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 }
);

watch(
  () => props.modelValue,
  (newVal) => {
    // 只有在新值确实变化时才更新（避免空值覆盖）
    if (newVal && Object.keys(newVal).length > 0) {
      listQuery.value = { ...newVal };
    }
  },
  { immediate: true, deep: true }
);

defineExpose({ submit });
</script>