sl-sfy-safety/src/views/system/tenant/components/AddTenantDrawer.vue

<template>
  <el-drawer
    v-model="props.showAddTenantDrawer"
    size="450"
    :title="`${mode === 'add' ? '添加' : '编辑'}租户`"
    @close="emit('closeDrawer')"
  >
    <el-form
      :model="tenantForm"
      :rules="rules"
      ref="tenantFormRef"
      label-placement="left"
      :label-width="80"
    >
      <el-form-item label="租户名称" prop="tenantName">
        <el-input placeholder="请输入租户名称" v-model="props.tenantForm.tenantName" />
      </el-form-item>
      <el-form-item label="租户编码" prop="tenantCode">
        <el-input placeholder="请输入租户编码" v-model="props.tenantForm.tenantCode" />
      </el-form-item>
      <el-form-item label="上级租户" v-if="props.mode === 'add'">
        <el-input :placeholder="props.tenantForm.parentName" disabled />
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker
          v-model="tenantForm.startTime"
          type="datetime"
          clearable
          placeholder="请选择开始时间"
          value-format="YYYY-MM-DD hh:mm:ss"
        />
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker
          v-model="tenantForm.endTime"
          type="datetime"
          clearable
          placeholder="请选择结束时间"
          value-format="YYYY-MM-DD hh:mm:ss"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="resetForm(tenantFormRef)">重置</el-button>
      <el-button type="primary" @click="submitForm(tenantFormRef)">提交</el-button>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import {
    ElDrawer,
    ElForm,
    ElFormItem,
    ElInput,
    ElDatePicker,
    ElButton,
    ElMessage,
  } from 'element-plus';
  import type { FormInstance, FormRules } from 'element-plus';
  import type { tenantFormType } from '@/types/tenant/type';
  import { saveTenantApi, updateTenantApi } from '@/api/tenant/index';

  const props = defineProps<{
    showAddTenantDrawer: boolean;
    tenantForm: tenantFormType;
    mode: 'add' | 'edit';
  }>();
  const emit = defineEmits(['closeDrawer', 'loadTenantTable']);

  const tenantFormRef = ref<FormInstance>();

  const rules: FormRules = {
    tenantName: {
      required: true,
      message: '请填写租户名称',
      trigger: 'blur',
    },
    tenantCode: {
      required: true,
      message: '请填写租户编码',
      trigger: 'blur',
    },
    startTime: {
      required: true,
      message: '请选择租户生效时间',
      trigger: 'change',
    },
    endTime: {
      required: true,
      message: '请选择租户失效时间',
      trigger: 'change',
    },
  };

  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid) => {
      if (valid) {
        if (props.mode === 'add') {
          saveTenantApi(props.tenantForm).then(() => {
            emit('closeDrawer');
            emit('loadTenantTable');
            ElMessage({
              type: 'success',
              message: '添加租户成功',
            });
          });
        } else {
          updateTenantApi(props.tenantForm).then(() => {
            emit('closeDrawer');
            emit('loadTenantTable');
            ElMessage({
              type: 'success',
              message: '修改租户成功',
            });
          });
        }
      }
    });
  };

  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
  };
</script>