YD_Event.Web/src/views/match/book/index.vue

<template>
	<div class="system-menu-container layout-padding">
		<ProTable ref="tableRef" :request-api="SysMenuApi.page" :columns="columns" :pagination="false" 
			:tool-button="false">
			<template #tools>
				<el-button v-auth="'sysmenu:add'" type="primary" icon="ele-Plus" @click="onOpenMenu"> 新增 </el-button>
			</template>
			<template #index="scope">
				{{ scope.$index + 1 }}
			</template>
			<template #name="scope">
				<span class="ml10">{{ $t(scope.row.name) }}</span>
			</template>
			<template #img="scope">
				<img :src="scope.row.img" class="img" />
			</template>
			<template #status="scope">
				<el-tag :type="scope.row.status === 0 ? 'success' : 'danger'"> {{ scope.row.status === 0 ? '启用' : '禁用'
				}}</el-tag>
			</template>
			<template #action="scope">
				<el-button v-auth="'sysmenu:edit'" icon="ele-Edit" size="small" text type="primary"
					@click="onOpenMenu(scope.row.id)"> 编辑 </el-button>
				<el-popconfirm title="确认删除吗？" @confirm="onDeleteMenu(scope.row.id)">
					<template #reference>
						<el-button v-auth="'sysmenu:delete'" icon="ele-Delete" size="small" text type="danger"> 删除
						</el-button>
					</template>
				</el-popconfirm>
			</template>
		</ProTable>

		<!-- 弹窗 -->
		<el-dialog title="新增" v-model="isShowDialog" width="60%">
			<el-form ref="formRef" :model="formData" :rules="formRules" label-width="200px" 
				style="width: 80%;margin-bottom: 30px;max-width: 600px" v-if="isShowDialog">

				<!-- 证书名称 -->
				<el-form-item label="证书名称" prop="projectName" >
					<el-input v-model="formData.projectName" placeholder="请输入项目名称"></el-input>
				</el-form-item>


				<!-- 证书模板 -->
				<el-form-item label="证书模板" prop="fee">
					<el-upload class="avatar-uploader" action=""
						:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="formData.fee" :src="formData.fee" class="avatar" />
						<el-icon v-else class="avatar-uploader-icon">
						<Plus />
						</el-icon>
					</el-upload>
				</el-form-item>


			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel">取消</el-button>
					<el-button type="primary" @click="onSubmit">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="sysMenu">
import { defineAsyncComponent, ref, reactive } from 'vue';
import { ElMessage, ElForm } from 'element-plus';
import SysMenuApi from '/@/api/SysMenuApi';
import { auths } from '/@/utils/authFunction';
import ProTable from '/@/components/ProTable/index.vue';

// 定义表单引用类型
const formRef = ref();

const formData = ref({
	projectName: '30秒单摇',
	projectType: 'personal_speed',
	participantCount: '',
	description: '',
	fee: '100',
	durationMinutes: '',
	phone: '30'
})

const formRules = ref({
	projectName: [
		{ required: true, message: '请输入证书名称', trigger: 'blur' }
	],
	fee: [
		{ required: true, message: '请上传证书模版', trigger: 'blur' }
	],

});

const columns = ref([
	{
		prop: 'index',
		label: '序号',
		align: 'center',
	},
	{
		prop: 'name',
		label: '证书名称',
		align: 'center',
		search: {
			el: 'input',
		},
	},
	{ prop: 'img', label: '证书' },
	{ prop: 'action', label: '操作', align: 'center', fixed: 'right', isShow: auths(['sysmenu:delete', 'sysmenu:edit']) },
]);

const isShowDialog = ref(false);
const dialogTitle = ref('新增');

const onOpenMenu = (id) => {
	dialogTitle.value = id ? '编辑' : '新增';
	formData.value = {
		projectName: '',
		projectType: '',
		participantCount: '',
		description: '',
		fee: '',
		durationMinutes: '',
		phone: ''
	};
	isShowDialog.value = true;
};

//删除菜单
const onDeleteMenu = async (id) => {
	const { succeeded, errors } = await SysMenuApi.delete({ id });
	if (succeeded) {
		ElMessage.success('删除成功');
	} else {
		ElMessage.error(errors);
	}
};

const handleAvatarSuccess = (  response,
  uploadFile) => {
  formData.value.fee = URL.createObjectURL(uploadFile.raw)
}

const beforeAvatarUpload = () => {
  // if (rawFile.type !== 'image/jpeg') {
  //   ElMessage.error('Avatar picture must be JPG format!')
  //   return false
  // } else if (rawFile.size / 1024 / 1024 > 2) {
  //   ElMessage.error('Avatar picture size can not exceed 2MB!')
  //   return false
  // }
  return true
}


// 表单提交
const onSubmit = () => {
	if (!formRef.value) return;

	formRef.value.validate(async (valid) => {
		if (!valid) return;

		// try {
		// 	let res;
		// 	if (formData.value.id) {
		// 		res = await SysMenuApi.add(formData.value);
		// 	} else {
		// 		res = await SysMenuApi.add(formData.value);
		// 	}

		// 	if (res.succeeded) {
		// 		ElMessage.success(dialogTitle.value + '成功');
		// 		isShowDialog.value = false;
		// 	} else {
		// 		ElMessage.error(res.errors);
		// 	}
		// } catch (error) {
		// 	console.error(error);
		// }
	});
};

// 取消
const onCancel = () => {
	isShowDialog.value = false;
};
</script>
<style scoped lang="scss">
.dialog-footer {
	margin-top: 80px;
}

/* 时长组合框样式 */
.duration-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.duration-row .el-input {
	width: 120px;
}

.duration-separator {
	color: #606266;
	font-size: 14px;
}

.duration-label {
	color: #909399;
	font-size: 14px;
}


</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>