charge-java/admin-web/src/components/form/ExtForm.vue

<template>
  <div class="dynamic-form-container layout-pd">
    <el-card shadow="hover">
      <el-form
          :model="form"
          :rules="rules"
          ref="formRulesOneRef"
          size="default" label-width="0px" class="mt35">
        <el-row :gutter="35">
          <el-col
              :xs="val.xs"
              :sm="val.sm"
              :md="val.md"
              :lg="val.md"
              :xl="val.xl"
              class="mb20"
              v-for="(val, key) in state.cols"
              :key="key">
            <template v-if="val.type !== ''">
              <el-form-item
                  :label="val.label"
                  :prop="val.prop"
                  :rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: val.type === 'input' ? 'blur' : 'change' }]"
                  v-if="val.type !== ''">
                <el-input
                    v-if="val.type === 'text'"
                    v-model="form[val.prop]"
                    :placeholder="val.placeholder"
                    clearable
                    style="width: 100%"
                    :disabled="val.disabled">
                </el-input>
                <el-date-picker
                    v-model="form[val.prop]"
                    type="date"
                    :placeholder="val.placeholder"
                    v-else-if="val.type === 'date'"
                    style="width: 100%"
                    :disabled="val.disabled"
                >
                </el-date-picker>
                <el-select
                    v-model="form[val.prop]"
                    :placeholder="val.placeholder"
                    v-else-if="val.type === 'select'"
                    style="width: 100%"
                    :disabled="val.disabled"
                >
                  <el-option v-for="item in val.options" :key="item.value" :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
                <el-input
                    type="textarea"
                    v-model="form[val.prop]"
                    :placeholder="val.placeholder"
                    clearable
                    v-if="val.type === 'textarea'"
                    style="width: 100%"
                    :disabled="val.disabled"
                ></el-input>
              </el-form-item>
            </template>
            <template v-else>
              <el-row :gutter="35" v-for="(v, k) in form.list" :key="k">
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                  <el-form-item label="年度" :prop="`list[${k}].year`"
                                :rules="[{ required: true, message: `年度不能为空`, trigger: 'blur' }]">
                    <template #label>
                      <el-button type="primary" circle size="small" @click="onAddRow" v-if="k === 0">
                        <el-icon>
                          <ele-Plus/>
                        </el-icon>
                      </el-button>
                      <el-button type="danger" circle size="small" @click="onDelRow(k)" v-else>
                        <el-icon>
                          <ele-Delete/>
                        </el-icon>
                      </el-button>
                      <span class="ml10">年度</span>
                    </template>
                    <el-input v-model="form.list[k].year" style="width: 100%" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                  <el-form-item label="月度" :prop="`list[${k}].month`"
                                :rules="[{ required: true, message: `月度不能为空`, trigger: 'blur' }]">
                    <el-input v-model="form.list[k].month" style="width: 100%" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                  <el-form-item label="日度" :prop="`list[${k}].day`"
                                :rules="[{ required: true, message: `日度不能为空`, trigger: 'blur' }]">
                    <el-input v-model="form.list[k].day" style="width: 100%" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>
          </el-col>
        </el-row>
      </el-form>
      <el-row class="flex mt15">
        <div class="flex-margin">
          <el-button size="default" @click="onResetForm(formRulesOneRef)">
            <el-icon>
              <ele-RefreshRight/>
            </el-icon>
            重置
          </el-button>
          <el-button size="default" type="success" @click="onQueryChange">
            <SvgIcon name="ele-Search"/>
            查询
          </el-button>
          <slot name="extra"></slot>
        </div>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="ExtForm">
import {reactive, ref, computed,onMounted} from 'vue';
import {ElMessage} from 'element-plus';
import type {FormInstance} from 'element-plus';
import fieldUtil from "/@/utils/field";

const emit = defineEmits(['change', 'update:value']);
const props = defineProps({
  columns: {
    type: Array<IField>
  },
  value: {
    type: Object,
    require: true
  },
  importConfig: {
    type: Object,
  }
})

const form = computed(() => {
  return {...props.value}
})
const rules = computed(() => {
  return [];
})

// 定义变量内容
const formRulesOneRef = ref<FormInstance>();
const state = reactive({
  cols: [],
  form: {
    name: '',
    email: '',
    autograph: '',
    occupation: '',
    list: [
      {
        year: '',
        month: '',
        day: '',
      },
    ],
    remarks: '',
  },
});

onMounted(()=>{
  console.log(props.columns)
  state.cols = fieldUtil.toFormQueryField(props.columns);
  console.log(state.cols)
})

const onQueryChange = () => {
  emit("update:value", form);
  emit("change")
}

// 重置表单
const onResetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  emit("update:value", {})
  emit("change")
};
</script>