sl-sfy-safety/src/views/system-config/template/DrawerCommon.vue

<template>
  <div>
    <el-form ref="ruleDrawerRef" :model="form" label-width="100px">
      <el-form-item label="模板名称" prop="name" :rules="[
        {
          required: true,
          message: '输入模板名称',
          trigger: 'blur',
        },
      ]">
        <el-input placeholder="请输入模板名称" v-model="form.name" />
      </el-form-item>

      <el-form-item label="模板代码" prop="code" :rules="[
        {
          required: true,
          message: '输入模板代码',
          trigger: 'blur',
        },
      ]">
        <el-input placeholder="请输入模板代码" v-model="form.code" />
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input placeholder="请输入备注" v-model="form.remark" />
      </el-form-item>

      <el-form-item label="模板上传">
        <el-upload>
          <el-button disabled>上传</el-button>
        </el-upload>
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-switch v-model="form.status" active-value=1 inactive-value=0 />
      </el-form-item>

      <div style="margin-top: 100px; margin-left: 250px">
        <el-button style="margin-left: 50px" @click="resetForm(ruleDrawerRef)">重置</el-button>
        <el-button style="margin-left: 50px" @click="submitDrawer(ruleDrawerRef)">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { FormInstance } from 'element-plus';
import { onMounted } from 'vue';


export interface FormModelCommon {
  id: number;
  code: string;
  name: string;
  status: number;
  remark: string;
}
export type CreateType = 'create' | 'edit';
const props = defineProps<{ detail: FormModelCommon }>();
const emit = defineEmits(['submitDrawer']);
const form = ref<FormModelCommon>({
  id: props.detail.id,
  name: props.detail.name,
  code: props.detail.code,
  remark: props.detail.remark,
  status: props.detail.status,
});

watch(
  () => props.detail,
  (newdetail) => {
    form.value = newdetail;
  },
  { immediate: true },
);

const ruleDrawerRef = ref<FormInstance>();

function resetForm(formE1: FormInstance | undefined) {
  if (!formE1) return;
  formE1.resetFields();
  console.log('resetForm');

}

function submitDrawer(formEl: FormInstance | undefined) {
  console.log('common-', form, props.detail.code)
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      const drawerData = {
        id: form.value.id,
        name: form.value.name,
        code: form.value.code,
        remark: form.value.remark,
        status: form.value.status,
      };
      emit('submitDrawer', drawerData);

    } else {
      console.log('error submit!', fields);
    }
  });
}

onMounted(() => {
  console.log('drawercommon-form', form);
  console.log('drawercommon-props', props.detail);
});
</script>

<style scoped></style>