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

<template>
	<div class="system-menu-container layout-padding">
		<ProTable ref="tableRef" :request-api="certificatePageGet" :columns="columns" :pagination="true" 
			:tool-button="false">
			<template #tools>
				<el-button v-auth="'certificate:add'" type="primary" icon="ele-Plus" @click="onOpenMenu"> 新增 </el-button>
			</template>
			<template #index="scope">
				{{ scope.$index + 1 }}
			</template>
			
			<template #remark="scope">
				<img :src="scope.row.remark" style="width: 100px;" />
			</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="'certificate: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="'certificate: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="name" >
					<el-input v-model="formData.name" placeholder="请输入证书名称"></el-input>
				</el-form-item>


				<!-- 证书模板 -->
				<el-form-item label="证书模板" prop="remark">
					<el-upload class="avatar-uploader" action="/api/file/upload"
						:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="formData.remark" :src="formData.remark" 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';
import { certificatePageGet, certificateAddPost ,certificateEditPut ,certificateDeleteDelete} from '/@/api/match/certificate';

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

const formData = ref({
	name: '',
	remark: '',
})

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

});

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

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

const onOpenMenu = (id) => {
	dialogTitle.value = id ? '编辑' : '新增';
	formData.value = {
		name: '',
		remark: '',
	};
	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.remark = response[0].url;
}

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 certificateEditPut(formData.value);
			} else {
				res = await certificateAddPost(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>