eas_webadmin/src/views/management/crouse/component/table-action-modal.vue

<template>
	<n-modal v-model:show="modalVisible" preset="card" :title="title" class="w-700px">
		<n-form ref="formRef" label-placement="left" :label-width="80" :model="formModel" :rules="rules">
			<n-grid :cols="24" :x-gap="18">
				<!-- <n-form-item-grid-item :span="12" label="id" path="createUid">
          <n-input-number v-model:value="formModel.createUid"  />
        </n-form-item-grid-item> -->
				<n-form-item-grid-item :span="12" label="学科名称" path="name">
					<n-input v-model:value="formModel.name" />
				</n-form-item-grid-item>
				<n-form-item-grid-item :span="12" label="学科描述" path="description">
					<n-input v-model:value="formModel.description" clearable />
				</n-form-item-grid-item>
				<n-form-item-grid-item :span="12" label="学科分类" path="categoryId">
					<n-input v-model:value="formModel.categoryId" />
				</n-form-item-grid-item>
				<n-form-item-grid-item :span="12" label="创建用户ID" path="createUid">
					<n-input-number v-model:value="formModel.createUid" />
				</n-form-item-grid-item>
				<n-form-item-grid-item :span="12" label="状态" path="disabled">
					<n-input v-model:value="formModel.disabled" :options="userStatusOptions" />
				</n-form-item-grid-item>
			</n-grid>
			<n-space class="w-full pt-16px" :size="24" justify="end">
				<n-button class="w-72px" @click="closeModal">取消</n-button>
				<n-button class="w-72px" type="primary" v-if="props.type === 'add'" @click="handleSubmit">添加</n-button>
				<n-button class="w-72px" type="primary" v-if="props.type === 'edit'" @click="handleupdate">修改</n-button>
			</n-space>
		</n-form>
	</n-modal>
</template>

<script setup lang="ts">
import { ref, computed, reactive, watch, inject } from 'vue';
import type { FormInst, FormItemRule } from 'naive-ui';
import { addSubject, updateSubjects, SelectByConditionParams } from '~/src/service/api/crouse';
import { userStatusOptions } from '@/constants';
import { createRequiredFormRule } from '@/utils';
import dayjs from 'dayjs';

const init = inject('init');

export interface Props {
	/** 弹窗可见性 */
	visible: boolean;
	/**
	 * 弹窗类型
	 * add: 新增
	 * edit: 编辑
	 */
	type?: 'add' | 'edit';
	/** 编辑的表格行数据 */
	editData?: SelectByConditionParams | null;
}

export type ModalType = NonNullable<Props['type']>;

defineOptions({ name: 'TableActionModal' });

const props = withDefaults(defineProps<Props>(), {
	type: 'add' || 'edit',
	editData: null
});

interface Emits {
	(e: 'update:visible', visible: boolean): void;
}

const emit = defineEmits<Emits>();
// const emits = defineEmits()
const modalVisible = computed({
	get() {
		return props.visible;
	},
	set(visible) {
		emit('update:visible', visible);
	}
});
const closeModal = () => {
	modalVisible.value = false;
};

const title = computed(() => {
	const titles: Record<ModalType, string> = {
		add: '添加用户',
		edit: '编辑用户'
	};
	return titles[props.type];
});
const formRef = ref<HTMLElement & FormInst>();

type FormModel = Pick<UserManagement1.User, 'inputValue' | 'id' | 'name' | 'description' | 'categoryId' | 'createTime' | 'modifyTime' | 'createUid' | 'disabled'>;

const formModel = reactive<FormModel>(createDefaultFormModel());

const rules: Record<keyof FormModel, FormItemRule | FormItemRule[]> = {
	id: createRequiredFormRule('请输入id'),
	name: createRequiredFormRule('请输入用户名'),
	description: createRequiredFormRule('请输入年龄'),
	categoryId: createRequiredFormRule('请选择性别'),
	createTime: createRequiredFormRule('请选择用户状态'),
	modifyTime: createRequiredFormRule('请选择用户状态'),
	createUid: createRequiredFormRule('请选择用户状态'),
	disabled: createRequiredFormRule('请选择用户状态'),
	inputValue: createRequiredFormRule('请选择用户状态')
};

function createDefaultFormModel(): FormModel {
	return {
		id: 0,
		name: '',
		description: '',
		categoryId: '',
		createTime: '',
		modifyTime: '',
		createUid: 0,
		disabled: '',
		inputValue: '',
	};
}

function handleUpdateFormModel(model: Partial<FormModel>) {
	Object.assign(formModel, model);
}

function handleUpdateFormModelByModalType() {
	const handlers: Record<ModalType, () => void> = {
		add: () => {
			const defaultFormModel = createDefaultFormModel();
			handleUpdateFormModel(defaultFormModel);
		},
		edit: () => {
			if (props.editData) {
				handleUpdateFormModel(props.editData);
			}
		}
	};

	handlers[props.type]();
}

function initYe() {
	init();
}

async function handleSubmit() {
	await formRef.value?.validate();

	addSubject(formModel).then(() => {
		initYe();
		window.$message?.success('新增成功!');
	})
	closeModal();
}

async function handleupdate() {
	await formRef.value?.validate();
	window.$message?.success('修改成功!');
	// formModel.modifyTime = Date()
	const timer = dayjs().format('YYYY-MM-DD HH:mm:ss')
	handleUpdateFormModel({ modifyTime: timer });
	updateSubjects(formModel).then(() => {
		initYe();
	})
	closeModal();

}
watch(
	() => props.visible,
	newValue => {
		if (newValue) {
			handleUpdateFormModelByModalType();
		}
	}
);
</script>

<style scoped></style>