block-identity-auth/ui/src/pages/load/index.vue

<template>
		<el-form
			label-position="right"
			:model="form"
			:rules="rules"
			ref="formRef"
			label-width="auto"
		>
			<!-- 表单内容 -->
			<div style="width: 60%;margin: 0 auto">
				<el-form-item label="名称:" prop="name">
					<el-input
						v-model="form.name"
						placeholder="请输入证书名称"
						class="block-input"
					>
						<template #prefix>
							<i class="el-icon-document"></i>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item label="公司/组织:" prop="company">
					<el-input
						v-model="form.company"
						placeholder="请输入公司/组织"
						class="block-input"
					>
						<template #prefix>
							<i class="el-icon-document"></i>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item label="部门:" prop="department">
					<el-input
						v-model="form.department"
						placeholder="请输入部门"
						class="block-input"
					>
						<template #prefix>
							<i class="el-icon-document"></i>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item label="角色:" prop="role">
					<el-input
						v-model="form.role"
						placeholder="请输入角色"
						class="block-input"
					>
						<template #prefix>
							<i class="el-icon-document"></i>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item label="资质证明:" prop="role">
					<el-upload
						class="upload-demo"
						style="width: 100%"
						drag
						:action="state.path"
						multiple
						limit=1
						:on-success="handleSuccess"

					>
						<el-icon class="el-icon--upload"><upload-filled /></el-icon>
					</el-upload>
				</el-form-item>

				<el-form-item label="生效时间:" prop="issueDate">
						<el-date-picker
							style="width: 100%"
							v-model="form.issueDate"
							type="datetime"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
						/>
				</el-form-item>

				<el-form-item label="过期时间:" prop="expireDate">
					<el-date-picker
						style="width: 100%"
						v-model="form.expireDate"
						type="datetime"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
					/>
				</el-form-item>
				<el-form-item label="公钥:" prop="hex">
					<el-input
						v-model="form.hex"
						placeholder="请输入公钥"
						class="block-input"
					>
						<template #prefix>
							<i class="el-icon-document"></i>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm">提交</el-button>
					<el-button @click="resetForm">删除</el-button>
				</el-form-item>
			</div>
		</el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox, UploadProps } from 'element-plus'
import type { FormInstance } from 'element-plus'
const formRef = ref<FormInstance>()
const form = reactive(<any>{})

const state = reactive({
	path:import.meta.env.VITE_API_FRONT_BASE_URL + "/api/upload",
})

const rules = {
	certificateNumber: [{ required: true, message: '请输入证书编号', trigger: 'blur' }],
	issueDate: [{ required: true, message: '请选择签发日期', trigger: 'change' }],
	expireDate: [{ required: true, message: '请选择过期日期', trigger: 'change' }],
	certificateData: [{ required: true, message: '请输入证书详情', trigger: 'blur' }]
}

const submitForm = () => {
	if (!formRef.value) return
	formRef.value.validate(async (valid: boolean) => {
		if (valid) {
			ElMessageBox.confirm(
				'<div class="confirm-box">\
					<i class="el-icon-warning-outline"></i>\
					<h3>请确认证书信息</h3>\
					<p>数据上链后不可修改，请仔细核对以下信息：</p>\
					<ul>\
						<li>名称：'+form.name+'</li>\
            <li>签发日期：'+form.issueDate+'</li>\
          </ul>\
        </div>',
				'确认上链',
				{
					confirmButtonText: '确认提交',
					cancelButtonText: '返回修改',
					type: 'warning',
					dangerouslyUseHTMLString: true,
					customClass: 'chain-confirm-dialog'
				}
			).then(async () => {
				const submissionData = {
					...form,
					is_block: 1
				}
				frontRequest.post('/api/certificate', submissionData).then(() => {
					ElMessage.success({
						message: '证书上链成功',
						duration: 3000,
						customClass: 'chain-success-msg'
					})
					resetForm()
				})
			}).catch(() => {})
		} else {
			ElMessage.error({
				message: '请完善表单信息',
				customClass: 'form-error-msg'
			})
		}
	})
}

const resetForm = () => {
	if (formRef.value) {
		formRef.value.resetFields()
	}
}


// 上传成功后的回调
const handleSuccess: UploadProps['onSuccess'] = (
	response,
	uploadFile
) => {
	form.img =  response.data.path
	ElMessage.success('上传成功')

}

</script>
<style scoped lang="scss">


</style>


<route lang="json">
{
"meta": {
"layout": "front"
}
}
</route>