school-developer/src/views/professional/teacherbase/status-lock-dialog.vue

<template>
	<el-dialog v-model="visible" title="锁定状态管理" width="600px" class="status-lock-dialog" @close="handleClose">
		<div class="status-lock-content">
			<div class="status-lock-description">
				<el-icon class="status-lock-icon"><Lock /></el-icon>
				<span>请选择需要锁定的模块，锁定后将无法进行编辑操作</span>
			</div>

			<el-form :model="form" label-width="120px" class="status-lock-form">
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="职称管理">
							<el-switch
								inline-prompt
								v-model="form.title"
								active-text="已锁定"
								inactive-text="未锁定"
								active-color="#f56c6c"
								inactive-color="#67c23a"
							>
							</el-switch>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="职业资格">
							<el-switch inline-prompt v-model="form.job" active-text="已锁定" inactive-text="未锁定" active-color="#f56c6c" inactive-color="#67c23a">
							</el-switch>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="教师资格证">
							<el-switch
								inline-prompt
								v-model="form.teacherTitle"
								active-text="已锁定"
								inactive-text="未锁定"
								active-color="#f56c6c"
								inactive-color="#67c23a"
							>
							</el-switch>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="学历学位">
							<el-switch
								inline-prompt
								v-model="form.acade"
								active-text="已锁定"
								inactive-text="未锁定"
								active-color="#f56c6c"
								inactive-color="#67c23a"
							>
							</el-switch>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="综合表彰">
							<el-switch
								inline-prompt
								v-model="form.remix"
								active-text="已锁定"
								inactive-text="未锁定"
								active-color="#f56c6c"
								inactive-color="#67c23a"
							>
							</el-switch>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="岗位晋升">
							<el-switch
								inline-prompt
								v-model="form.work"
								active-text="已锁定"
								inactive-text="未锁定"
								active-color="#f56c6c"
								inactive-color="#67c23a"
							>
							</el-switch>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<template #footer>
			<div class="status-lock-footer">
				<el-button @click="handleClose">取消</el-button>
				<el-button type="primary" v-if="canEdit" @click="handleSubmit">保存</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { Lock } from '@element-plus/icons-vue';

interface Props {
	modelValue: boolean;
	formData?: any;
	canEdit?: boolean;
}

interface Emits {
	(e: 'update:modelValue', value: boolean): void;
	(e: 'submit', data: any): void;
}

const props = withDefaults(defineProps<Props>(), {
	formData: () => ({
		title: false,
		job: true,
		teacherTitle: true,
		acade: true,
		remix: true,
		work: true,
	}),
	canEdit: false,
});

const emit = defineEmits<Emits>();

const visible = ref(false);
const form = ref<any>({
	title: false,
	job: true,
	teacherTitle: true,
	acade: true,
	remix: true,
	work: true,
});

watch(
	() => props.modelValue,
	(val) => {
		visible.value = val;
		if (val && props.formData) {
			form.value = { ...props.formData };
		} else {
			form.value = {
				title: false,
				job: true,
				teacherTitle: true,
				acade: true,
				remix: true,
				work: true,
			};
		}
	}
);

watch(visible, (val) => {
	emit('update:modelValue', val);
});

const handleClose = () => {
	visible.value = false;
};

const handleSubmit = () => {
	emit('submit', { ...form.value });
};
</script>

<style scoped lang="scss">
.status-lock-dialog {
	.status-lock-content {
		padding: 20px 0;
	}

	.status-lock-description {
		display: flex;
		align-items: center;
		padding: 16px;
		margin-bottom: 24px;
		background: #fef0f0;
		border: 1px solid #fbc4c4;
		border-radius: 6px;
		color: #f56c6c;
		font-size: 14px;

		.status-lock-icon {
			margin-right: 8px;
			font-size: 18px;
			color: #f56c6c;
		}
	}

	.status-lock-form {
		:deep(.el-form-item) {
			margin-bottom: 24px;
		}
	}

	.status-lock-footer {
		display: flex;
		justify-content: flex-end;
		gap: 12px;
	}
}
</style>