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="props.type === '模板' ? '模板名称' : '标签名称'"
        prop="name"
        :rules="[
          {
            required: true,
            message: '输入模板名称',
            trigger: 'blur',
          },
        ]"
      >
        <el-input placeholder="请输入模板名称" v-model="form.name" />
      </el-form-item>

      <el-form-item
        :label="props.type === '模板' ? '模板代码' : '标签代码'"
        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="0" :inactive-value="1" />
      </el-form-item>

      <div style="margin-top: 100px; margin-left: 180px">
        <el-button style="margin-left: 50px" @click="resetForm(ruleDrawerRef)">重置</el-button>
        <el-button style="margin-left: 50px" @click="submitDrawer(ruleDrawerRef)" type="primary"
          >提交</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';
  import { cloneDeep } from 'lodash-es';

  export interface FormModelCommon {
    id?: number;
    code: string;
    name: string;
    status: number;
    remark: string;
  }
  export type CreateType = 'create' | 'edit';
  const props = defineProps<{ detail: FormModelCommon; type: string }>();
  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,
  // });

  const form = ref<FormModelCommon>({
    id: undefined,
    name: '',
    code: '',
    remark: '',
    status: 0,
  });

  const getValue = () => {
    const dataForm = cloneDeep(props.detail);
    form.value.id = dataForm.id;
    form.value.name = dataForm.name;
    form.value.code = dataForm.code;
    form.value.remark = dataForm.remark;
    form.value.status = dataForm.status;
  };

  watch(
    () => props.detail,
    () => {
      getValue();
    },
    { immediate: true },
  );

  const ruleDrawerRef = ref<FormInstance>();

  function resetForm(formE1: FormInstance | undefined) {
    if (!formE1) return;
    formE1.resetFields();
    form.value.name = '';
    form.value.code = '';
    form.value.remark = '';
    form.value.status = 0;
    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>