admin-ui/src/views/modules/tenant/edit.vue

<template>
	<el-dialog class="api-edit" v-model="showDialog" :title="`${formData.id ? '编辑租户' : '新增租户'}`" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
		<el-form ref="formRef" :model="formData" :rules="ruleForm" label-width="85px" @keyup.enter="onSubmit" v-if="showDialog">
			<el-form-item label="租户名称" prop="name">
				<el-input v-model="formData.name" placeholder="请输入租户名称" />
			</el-form-item>
			<el-form-item label="租户编码" prop="code">
				<el-input v-model="formData.code" placeholder="请输入租户编码" />
			</el-form-item>
			<el-form-item label="系统名称" prop="systemName">
				<el-input v-model="formData.systemName" placeholder="请输入系统名称" />
			</el-form-item>
			<el-form-item label="系统版权" prop="systemCopyright">
				<el-input v-model="formData.systemCopyright" placeholder="请输入系统版权" />
			</el-form-item>
			<el-form-item label="系统LOGO（小图标）" prop="logoMini">
				<upload-vue :img="formData.logoMini" @set-img="setImg('logoMini', $event)"></upload-vue>
			</el-form-item>
			<el-form-item label="登录展示图" prop="logoPic">
				<upload-vue :img="formData.logoPic" @set-img="setImg('logoPic', $event)"></upload-vue>
			</el-form-item>
			<el-form-item label="系统LOGO" prop="logo">
				<upload-vue :img="formData.logo" @set-img="setImg('logo', $event)"></upload-vue>
			</el-form-item>
			<el-form-item label="简介" prop="description">
				<el-input v-model="formData.description" type="textarea" :rows="3" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="cancel">取消</el-button>
				<el-button type="primary" @click="onSubmit">确定</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import api from '/@/api/modules/tenant';
import { ruleRequired } from '/@/utils/validator';
import { ElMessage, UploadProps } from 'element-plus';
import UploadVue from '/@/components/upload/index.vue';

const emit = defineEmits(['getList']);

const showDialog = ref(false);
const formRef = ref();

const baseForm: any = {
	id: undefined,
	name: '',
	code: '',
	systemName: '',
	systemCopyright: '',
	description: '',
};

const formData = reactive<any>(JSON.parse(JSON.stringify(baseForm)));

const ruleForm = {
	name: [ruleRequired('租户名称不能为空', 'change')],
	code: [ruleRequired('租户编码不能为空', 'change')],
};

const onSubmit = async () => {
	await formRef.value.validate();

	const theApi = formData.id ? api.edit : api.add;

	await theApi(formData);

	ElMessage.success('操作成功');
	resetForm();
	showDialog.value = false;
	emit('getList');
};

const resetForm = async () => {
	const types = formData.types
	Object.assign(formData, { ...JSON.parse(JSON.stringify(baseForm)) });
	formRef.value && formRef.value.resetFields(formData);
};
const cancel = async () => {
	resetForm()
	showDialog.value = false
};

const open = async (row: any) => {
	resetForm();
	if(row) Object.assign(formData, row)
	showDialog.value = true;
};

const setImg = (key: string, val: string) => {
	formData[key] = val
}

defineExpose({ open });
</script>