Leo_Ding/GPU_Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实名认证

Browse Source
This commit is contained in:
Leo_Ding 2026-01-06 18:30:25 +08:00
parent b8c5436584
commit da3ffcb355
7 changed files with 241 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/apis/admin.ts
View File

@ -11,3 +11,5 @@ export const useList = (params:any) => request.get('/v1/order/use_list',{params}
export const hostCaseList = (params:any) => request.get('/v1/host_case/case_list',{params})
// 镜像列表
export const getImageList = (params:any) => request.get('/v1/image/image_list',{params})
// 删除镜像
export const delImageItem = (params:any) => request.delete(`/v1/image/delete_image/${params.image_id}`)

10
src/apis/certification.ts Normal file
View File

@ -0,0 +1,10 @@
// 认证接口
import request from '@/utils/index'
// 个人认证
export const personalCertification = (params:any) => request.put('/v1/certification/Personal_certification', params)
// 企业认证
export const enterpriseCertification = (params:any) => request.put('/v1/certification/company_certification', params)
// 获取认证信息
export const certificationInfoApi = () => request.get('/v1/certification/certification_info')

126
src/views/admin/account/enterRealAuth/index.vue
View File

@ -13,8 +13,8 @@
<div style="width: 100%;height: 1px;background: #c9c9c9;margin-bottom: 30px;"></div>
<!-- 表单 -->
<a-form ref="formRef" :model="formState" layout="horizontal" class="auth-form" style="max-width: 600px;">
<a-form-item label="企业证件类型：" name="certType" :rules="[{ required: true, message: '请选择企业证件类型' }]">
<a-select v-model:value="formState.certType" placeholder="请选择">
<a-form-item label="企业证件类型：" name="companyDocumentType" :rules="[{ required: true, message: '请选择企业证件类型' }]">
<a-select v-model:value="formState.companyDocumentType" placeholder="请选择">
<a-select-option value="business_license">营业执照</a-select-option>
<!-- 可扩展其他类型 -->
</a-select>
@ -29,32 +29,33 @@
<div style="margin-top: 8px">上传营业执照</div>
</div>
</a-upload>
<div v-if="formState.businessLicenseUrl" class="upload-preview">
<img :src="formState.businessLicenseUrl" alt="营业执照" />
<div v-if="formState.company_license" class="upload-preview">
<img :src="formState.company_license" alt="营业执照" />
</div>
</div>
</div>
<div class="upload-tips">支持 jpg、jpeg、png 格式图片，大小不超过 10M</div>
</a-form-item>
<a-form-item label="企业名称" name="enterpriseName" :rules="[{ required: true, message: '请输入企业名称' }]">
<a-input v-model:value="formState.enterpriseName" placeholder="请输入企业名称" />
<a-form-item label="企业名称" name="company_name" :rules="[{ required: true, message: '请输入企业名称' }]">
<a-input v-model:value="formState.company_name" placeholder="请输入企业名称" />
</a-form-item>
<a-form-item label="统一社会信用代码" name="creditCode" :rules="[{ required: true, message: '请输入统一社会信用代码' }]">
<a-input v-model:value="formState.creditCode" placeholder="请输入统一社会信用代码" />
<a-form-item label="统一社会信用代码" name="unified_social_credit_code"
:rules="[{ required: true, message: '请输入统一社会信用代码' }]">
<a-input v-model:value="formState.unified_social_credit_code" placeholder="请输入统一社会信用代码" />
</a-form-item>
<hr class="dashed-line" style="border-top: 1px dashed #c9c9c9; margin: 20px 0;">
<a-form-item label="您的身份" name="identity" :rules="[{ required: true, message: '请输入真实姓名' }]">
<a-radio-group v-model:value="formState.identity" name="identity">
<a-radio value="1">企业法人</a-radio>
<a-radio value="2">被授权人</a-radio>
<a-radio value="LegalPerson">企业法人</a-radio>
<a-radio value="AuthorizedPerson">被授权人</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="真实姓名" name="realName" :rules="[{ required: true, message: '请输入真实姓名' }]">
<a-input v-model:value="formState.realName" placeholder="请输入真实姓名" />
</a-form-item>
<a-form-item label="企业证件类型：" name="certType" :rules="[{ required: true, message: '请选择企业证件类型' }]">
<a-select v-model:value="formState.certType" placeholder="请选择">
<a-select-option value="business_license">中国大陆二代居民身份证</a-select-option>
<a-form-item label="证件类型：" name="documentType" :rules="[{ required: true, message: '请选择企业证件类型' }]">
<a-select v-model:value="formState.documentType" placeholder="请选择">
<a-select-option value="身份证">中国大陆二代居民身份证</a-select-option>
<!-- 可扩展其他类型 -->
</a-select>
</a-form-item>
@ -68,8 +69,8 @@
<div style="margin-top: 8px">拍摄身份证正面</div>
</div>
</a-upload>
<div v-if="formState.businessLicenseUrl" class="upload-preview">
<img :src="formState.businessLicenseUrl" alt="身份证正面" />
<div v-if="formState.id_card_front" class="upload-preview">
<img :src="formState.id_card_front" alt="身份证正面" />
</div>
</div>
<div>
@ -80,32 +81,33 @@
<div style="margin-top: 8px">拍摄身份证正面</div>
</div>
</a-upload>
<div v-if="formState.businessLicenseUrl" class="upload-preview">
<img :src="formState.businessLicenseUrl" alt="身份证正面" />
<div v-if="formState.id_card_back" class="upload-preview">
<img :src="formState.id_card_back" alt="身份证反面" />
</div>
</div>
</div>
<div class="upload-tips">支持 jpg、jpeg、png 格式图片，大小不超过 10M</div>
</a-form-item>
<a-form-item label="身份证号" name="enterpriseName"
<a-form-item label="身份证号" name="id_card"
:rules="[{ required: true, message: '请输入身份证号' }, { pattern: /^\d{17}[\dXx]$/, message: '请输入有效的18位身份证号码' }]">
<a-input v-model:value="formState.enterpriseName" placeholder="请输入身份证号" />
<a-input v-model:value="formState.id_card" placeholder="请输入身份证号" />
</a-form-item>
<a-form-item label="证件有效期" name="creditCode"
:rules="[{ required: true, message: '请选择证件有效期' }, { type: 'array', message: '请选择证件有效期' }]">
<a-range-picker v-model:value="formState.creditCode" style="width: 100%;" />
</a-form-item>
<a-form-item label="授权书" name="book" :rules="[{ required: true, message: '请上传授权书' }]">
<a-form-item v-if="formState.identity === 'AuthorizedPerson'" label="授权书" name="book"
:rules="[{ required: true, message: '请上传授权书' }]">
<a-upload name="file" list-type="picture-card" :show-upload-list="false" :before-upload="beforeUpload"
@change="handleBusinessLicenseChange" accept="image/png,image/jpeg">
<div class="upload-placeholder">
<div style="margin-top: 8px">上传授权书</div>
</div>
</a-upload>
<div v-if="formState.businessLicenseUrl" class="upload-preview">
<img :src="formState.businessLicenseUrl" alt="授权书" />
<div v-if="formState.power_of_attorney" class="upload-preview">
<img :src="formState.power_of_attorney" alt="授权书" />
</div>
<div style="color:#1677ff;">
<DownloadOutlined />
@ -127,7 +129,7 @@
</a-checkbox>
</div>
<div style="margin-top: 20px;text-align: center;">
<a-button type="primary" @click="handleSubmit" block>立即认证</a-button>
<a-button type="primary" @click="handleSubmit" block :loading="btnLoading">立即认证</a-button>
</div>
</a-form>
</div>
@ -137,8 +139,6 @@
import {
ref,
reactive,
UploadChangeParam,
UploadFile
} from 'vue';
import {
message,
@ -153,42 +153,56 @@ import {
} from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { enterpriseCertification } from '@/apis/certification';
import SmsCodeInput from '@/components/SmsCodeInput.vue';
import { fetchUserInfo } from '@/apis/modules/login';
import dayjs from 'dayjs'
const router = useRouter();
// 表单引用
const formRef = ref<FormInstance>();
const btnLoading = ref(false);
// 表单数据
interface FormState {
certType: string | null;
businessLicenseUrl: string | null;
enterpriseName: string;
creditCode: string;
identity: 'legal_representative' | 'authorized_person' | null;
idCardFrontUrl: string | null;
idCardBackUrl: string | null;
companyDocumentType: string | null;
documentType: string | null;
company_name: string;
unified_social_credit_code: string;
identity: 'LegalPerson' | 'AuthorizedPerson' | null;
name: string;
idNumber: string;
agreed: boolean;
phone: string;
code: string;
realName: string;
company_license: string | null;
power_of_attorney: string | null;
id_card_back: string | null;
id_card_front: string | null;
id_card: string | null;
certification_start?: string;
certification_end?: string;
creditCode?: any[];
}
const formState = reactive<FormState>({
certType: null,
businessLicenseUrl: null,
enterpriseName: '',
creditCode: '',
identity: null,
idCardFrontUrl: null,
idCardBackUrl: null,
companyDocumentType: '',
documentType: null,
company_name: '',
unified_social_credit_code: '',
identity: 'LegalPerson',
id_card_back: "",
id_card_front: "",
name: '',
idNumber: '',
agreed: false,
phone: '',
code: '',
realName: '',
company_license: "",
power_of_attorney: "",
id_card: "",
certification_start: '',
certification_end: ''
});
// 文件大小限制：10MB
@ -212,7 +226,7 @@ const handleBusinessLicenseChange = (info: UploadChangeParam<UploadFile>) => {
if (info.file.status === 'done') {
// 模拟获取 URL（实际应调用上传接口）
const url = URL.createObjectURL(info.file.originFileObj!);
formState.businessLicenseUrl = url;
formState.id_card_front = url;
}
};
@ -234,7 +248,7 @@ const handleIdCardBackChange = (info: UploadChangeParam<UploadFile>) => {
// 自定义校验函数
const validateBusinessLicense = () => {
if (!formState.businessLicenseUrl) {
if (!formState.id_card_front) {
return Promise.reject(new Error('请上传证件照'));
}
return Promise.resolve();
@ -256,17 +270,35 @@ const validateIdCardBack = () => {
// 提交
const handleSubmit = async () => {
formRef.value?.validateFields().then(async () => {
try {
await formRef.value?.validateFields();
if (!formState.agreed) {
message.error('请阅读并同意协议');
return;
}
message.success('提交成功！');
// TODO: 调用 API 提交表单
} catch (error) {
console.log('Validation failed:', error);
btnLoading.value = true;
formState.id_card_front = 'https://example.com/id_card_front.jpg'
formState.id_card_back = 'https://example.com/id_card_back.jpg'
if (formState.creditCode) {
formState.certification_start = dayjs(formState.creditCode[0]).format('YYYY-MM-DD');
formState.certification_end = dayjs(formState.creditCode[1]).format('YYYY-MM-DD');
}
const res = await enterpriseCertification(formState);
btnLoading.value = false;
message.success('认证提交成功');
const userRes = await fetchUserInfo();
localStorage.setItem('userInfo', JSON.stringify(userRes));
router.push('/layout/admin/realnameAuth');
} catch (error: any) {
console.log('Validation failed:', error);
message.error(error)
btnLoading.value = false;
}
});
// TODO: 调用 API 提交表单
};
// 取消

70
src/views/admin/account/personalRealAuth/index.vue
View File

@ -14,12 +14,12 @@
<!-- 表单 -->
<a-form ref="formRef" :model="formState" layout="horizontal" class="auth-form" style="max-width: 600px;">
<a-form-item label="真实姓名" name="realName" :rules="[{ required: true, message: '请输入真实姓名' }]">
<a-input v-model:value="formState.realName" placeholder="请输入真实姓名" />
<a-form-item label="真实姓名" name="name" :rules="[{ required: true, message: '请输入真实姓名' }]">
<a-input v-model:value="formState.name" placeholder="请输入真实姓名" />
</a-form-item>
<a-form-item label="企业证件类型：" name="certType" :rules="[{ required: true, message: '请选择企业证件类型' }]">
<a-select v-model:value="formState.certType" placeholder="请选择">
<a-select-option value="business_license">中国大陆二代居民身份证</a-select-option>
<a-form-item label="证件类型：" name="documentType" :rules="[{ required: true, message: '请选择证件类型' }]">
<a-select v-model:value="formState.documentType" placeholder="请选择">
<a-select-option value="身份证">中国大陆二代居民身份证</a-select-option>
<!-- 可扩展其他类型 -->
</a-select>
</a-form-item>
@ -33,8 +33,8 @@
<div style="margin-top: 8px">拍摄身份证正面</div>
</div>
</a-upload>
<div v-if="formState.businessLicenseUrl" class="upload-preview">
<img :src="formState.businessLicenseUrl" alt="身份证正面" />
<div v-if="formState.id_card_back" class="upload-preview">
<img :src="formState.id_card_back" alt="身份证正面" />
</div>
</div>
<div>
@ -42,20 +42,20 @@
@change="handleBusinessLicenseChange" accept="image/png,image/jpeg" class="avatar-uploader2">
<div class="upload-placeholder">
<img src="@/assets/camer.png" alt="" srcset="" width="30px">
<div style="margin-top: 8px">拍摄身份证正面</div>
<div style="margin-top: 8px">拍摄身份证反面</div>
</div>
</a-upload>
<div v-if="formState.businessLicenseUrl" class="upload-preview">
<img :src="formState.businessLicenseUrl" alt="身份证正面" />
<div v-if="formState.id_card_front" class="upload-preview">
<img :src="formState.id_card_front" alt="身份证反面" />
</div>
</div>
</div>
<div class="upload-tips">支持 jpg、jpeg、png 格式图片，大小不超过 10M</div>
</a-form-item>
<a-form-item label="身份证号" name="enterpriseName"
<a-form-item label="身份证号" name="id_card"
:rules="[{ required: true, message: '请输入身份证号' }, { pattern: /^\d{17}[\dXx]$/, message: '请输入有效的18位身份证号码' }]">
<a-input v-model:value="formState.enterpriseName" placeholder="请输入身份证号" />
<a-input v-model:value="formState.id_card" placeholder="请输入身份证号" />
</a-form-item>
<a-form-item label="证件有效期" name="creditCode"
@ -81,7 +81,7 @@
</a-checkbox>
</div>
<div style="margin-top: 20px;text-align: center;">
<a-button type="primary" @click="handleSubmit" block>立即认证</a-button>
<a-button type="primary" @click="handleSubmit" block :btnLoading="btnLoading">立即认证</a-button>
</div>
</a-form>
</div>
@ -91,8 +91,6 @@
import {
ref,
reactive,
UploadChangeParam,
UploadFile
} from 'vue';
import {
message,
@ -106,16 +104,20 @@ import {
} from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { personalCertification } from '@/apis/certification';
import SmsCodeInput from '@/components/SmsCodeInput.vue';
import { fetchUserInfo } from '@/apis/modules/login';
import dayjs from 'dayjs'
const router = useRouter();
const btnLoading = ref(false);
// 表单引用
const formRef = ref<FormInstance>();
// 表单数据
interface FormState {
certType: string | null;
documentType: string | null;
businessLicenseUrl: string | null;
enterpriseName: string;
id_card: string;
creditCode: string;
identity: 'legal_representative' | 'authorized_person' | null;
idCardFrontUrl: string | null;
@ -125,12 +127,16 @@ interface FormState {
agreed: boolean;
phone: string;
code: string;
certification_start: string;
certification_end: string;
id_card_front: string;
id_card_back: string;
}
const formState = reactive<FormState>({
certType: null,
documentType: null,
businessLicenseUrl: null,
enterpriseName: '',
id_card: '',
creditCode: '',
identity: null,
idCardFrontUrl: null,
@ -140,6 +146,10 @@ const formState = reactive<FormState>({
agreed: false,
phone: '',
code: '',
certification_start: '',
certification_end: '',
id_card_front: '',
id_card_back: '',
});
// 文件大小限制：10MB
@ -207,17 +217,31 @@ const validateIdCardBack = () => {
// 提交
const handleSubmit = async () => {
formRef.value?.validateFields().then(async () => {
try {
await formRef.value?.validateFields();
btnLoading.value = true;
if (!formState.agreed) {
message.error('请阅读并同意协议');
return;
}
message.success('提交成功！');
// TODO: 调用 API 提交表单
} catch (error) {
formState.id_card_front = 'https://example.com/id_card_front.jpg'
formState.id_card_back = 'https://example.com/id_card_back.jpg'
formState.certification_start = dayjs(formState.creditCode[0]).format('YYYY-MM-DD');
formState.certification_end = dayjs(formState.creditCode[1]).format('YYYY-MM-DD');
await personalCertification(formState);
message.success('认证提交成功');
const userRes = await fetchUserInfo();
localStorage.setItem('userInfo', JSON.stringify(userRes));
router.push('/layout/admin/realnameAuth');
btnLoading.value = false;
} catch (error: any) {
message.error(error);
btnLoading.value = false;
console.log('Validation failed:', error);
}
// TODO: 调用 API 提交表单
});
};
// 取消

126
src/views/admin/account/realnameAuth/index.vue
View File

@ -5,17 +5,42 @@
<h1>实名认证</h1>
<p>请选择您的认证类型</p>
</div>
<div class="auth-container">
<div v-if="userInfo.certificationStatus==='CERTIFICATION_DFFILED'">认证审核中...</div>
<div v-if="userInfo.certificationStatus==='CERTIFICATION_FAILED'">认证失败</div>
<a-card v-if="userInfo.certificationStatus==='CERTIFICATION_PASSED'">
<template #title>
<div class="card-title">
<span>{{ certificationInfo.certificationType }}</span>
</div>
</template>
<div class="auth-explanation" style="display: flex;justify-content: flex-start;gap: 100px;">
<div>
<p><span>认证类型</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>{{ certificationInfo.certificationType }}</span></p>
<p><span>认证类型</span>&nbsp;&nbsp;&nbsp;&nbsp;<span></span><span>{{ certificationInfo.idCard }}</span></p>
<p><span>认证人</span>&nbsp;&nbsp;&nbsp;&nbsp;<span></span><span>{{ certificationInfo.name }}</span></p>
<p>
<a-button type="primary">变更为企业认证</a-button>
</p>
</div>
<div>
<p><span>认证时间</span><span>2025-11-18</span></p>
<p><span>身份证号</span><span>放假就佛法家</span></p>
<!-- <p><span>认证人</span><span>用户名</span></p> -->
</div>
<div>
<img src="@/assets/renzheng.png" alt="认证图片" width="120px">
</div>
</div>
</a-card>
<div class="auth-container" v-if="userInfo.certificationStatus==='PENDING_CERTIFICATION'">
<!-- 个人认证 -->
<a-card class="auth-card" :bordered="true">
<a-card >
<template #title>
<div class="card-title">
<UserOutlined class="title-icon" />
<span>个人认证</span>
</div>
</template>
<div class="auth-content" @click="openPersonalAuthModal">
<div class="option-list">
<div class="option-item">
@ -28,9 +53,8 @@
</div>
</div>
</a-card>
<!-- 企业认证 -->
<a-card class="auth-card" :bordered="true">
<a-card :bordered="true">
<template #title>
<div class="card-title">
<BankOutlined class="title-icon" />
@ -61,50 +85,11 @@
</div>
</a-card>
</div>
<!-- 个人实名认证弹窗 -->
<a-modal
v-model:open="personalAuthModalVisible"
title="实名认证"
width="500px"
:footer="null"
@cancel="closePersonalAuthModal"
>
<div style="padding: 24px;">
<!-- 提示信息 -->
<div
style="margin-bottom: 24px; padding: 12px; background: #fff7e6; border: 1px solid #fda4af; color: #f59e0b; border-radius: 4px; font-size: 14px; line-height: 1.5;"
>
<span style="color: #f59e0b; margin-right: 8px;">⚠️</span>
您的实名认证信息将会加密保存，不会泄露给第三方
</div>
<!-- 姓名输入 -->
<div style="margin-bottom: 24px; display: flex; align-items: center; gap: 8px;">
<span style="color: red;">*</span>
<label style="font-size: 14px; color: #333;"> ：</label>
<a-input v-model:value="personalForm.realName" placeholder="请输入您的姓名" style="flex: 1;" />
</div>
<!-- 身份证号输入 -->
<div style="margin-bottom: 24px; display: flex; align-items: center; gap: 8px;">
<span style="color: red;">*</span>
<label style="font-size: 14px; color: #333;">身份证号：</label>
<a-input v-model:value="personalForm.idCard" placeholder="请输入您的身份证号" style="flex: 1;" />
</div>
<!-- 按钮区 -->
<div style="text-align: right; padding: 16px 0;">
<a-button @click="closePersonalAuthModal">取消</a-button>
<a-button type="primary" @click="submitPersonalAuth" style="margin-left: 8px;">确定</a-button>
</div>
</div>
</a-modal>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ref, reactive,onMounted } from 'vue';
import { message } from 'ant-design-vue';
import {
UserOutlined,
@ -113,11 +98,15 @@ import {
ClockCircleOutlined
} from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { on } from 'events';
import { get } from 'http';
import{certificationInfoApi} from '@/apis/certification';
const router = useRouter();
// 控制个人认证弹窗
const personalAuthModalVisible = ref(false);
const certificationInfo = ref<any>({
});
const userInfo=ref<any>({
certificationStatus:'PENDING_CERTIFICATION'
});
// 表单数据
const personalForm = reactive({
realName: '',
@ -126,7 +115,6 @@ const personalForm = reactive({
// 打开个人认证弹窗
const openPersonalAuthModal = () => {
// personalAuthModalVisible.value = true;
router.push('/layout/admin/personalRealAuth');
};
@ -138,37 +126,35 @@ const goEnterRealAuth = () => {
// 关闭弹窗并重置表单
const closePersonalAuthModal = () => {
personalAuthModalVisible.value = false;
personalForm.realName = '';
personalForm.idCard = '';
};
// 提交认证
const submitPersonalAuth = () => {
if (!personalForm.realName.trim()) {
message.error('请输入真实姓名');
return;
}
if (!personalForm.idCard.trim()) {
message.error('请输入身份证号');
return;
}
const idCardRegex = /^\d{17}[\dXx]$/;
if (!idCardRegex.test(personalForm.idCard)) {
message.error('请输入有效的18位身份证号码');
return;
}
message.success('实名认证提交成功！');
closePersonalAuthModal();
const getCertificationInfo = async () => {
try {
const res=await certificationInfoApi();
certificationInfo.value=res;
} catch (error) {
message.error('获取认证信息失败');
}
};
onMounted(() => {
// const userInfoStr = localStorage.getItem('userInfo');
// if (userInfoStr) {
// userInfo.value=JSON.parse(userInfoStr);
// if(userInfo.value.certificationStatus==='CERTIFICATION_PASSED'){
// getCertificationInfo();
// }
// }
})
</script>
<style scoped>
.real-name-auth-page {
padding: 24px;
background-color: #f5f7fa;
min-height: 100vh;
/* min-height: 100vh; */
}
.header {

29
src/views/admin/image/editDialog.vue
View File

@ -7,54 +7,39 @@
<label class="label">名称：</label>
<span class="value">{{ imgInfo.name }}</span>
</a-col>
<!-- CPU类型 -->
<a-col :span="12">
<label class="label">CPU类型：</label>
<span class="value">{{ imgInfo.cpu_type }}</span>
</a-col>
<!-- CUDA版本 -->
<a-col :span="12">
<label class=" label">CUDA版本：</label>
<span class="value">{{ imgInfo.cuda_version }}</span>
</a-col>
<!-- GPU类型 -->
<a-col :span="12">
<label class="label">GPU类型：</label>
<span class="value">{{ imgInfo.gpu_type }}</span>
</a-col>
<!-- 镜像 Hash -->
<a-col :span="24">
<label class="label">镜像 Hash：</label>
<span class="value">{{ imgInfo.image_hash }}</span>
<span class="value">{{ imgInfo.imageHash }}</span>
</a-col>
<!-- 镜像路径 -->
<a-col :span="24">
<label class="label">镜像路径：</label>
<span class="value">{{ imgInfo.image_path }}</span>
<span class="value">{{ imgInfo.imagePath }}</span>
</a-col>
<!-- 镜像大小 -->
<a-col :span="12">
<label class="label">镜像大小：</label>
<span class="value">{{ imgInfo.image_size }} GB</span>
<span class="value">{{ imgInfo.imageSize }} GB</span>
</a-col>
<!-- 镜像类型 -->
<a-col :span="12">
<label class="label">镜像类型：</label>
<span class="value">{{ imgInfo.image_type }}</span>
<span class="value">{{ imgInfo.imageType }}</span>
</a-col>
<!-- 状态 -->
<a-col :span="12">
<label class="label">状态：</label>
<a-tag >
<a-tag :color="imgInfo.status == 'enabled' ? 'green' : 'red'">
{{ imgInfo.status == 'enabled' ? '启用' : '禁用' }}
</a-tag>
</a-col>
<!-- 镜像是否公开 -->
<a-col :span="12">
<label class="label">镜像是否公开：</label>
<a-tag :color="imgInfo.image_is_public ? 'green' : 'red'">
{{ imgInfo.image_is_public ? '是' : '否' }}
<a-tag :color="imgInfo.imageIsPublic ? 'green' : 'red'">
{{ imgInfo.imageIsPublic ? '是' : '否' }}
</a-tag>
</a-col>
</a-row>

33
src/views/admin/image/index.vue
View File

@ -37,8 +37,8 @@
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'status'">
<a-tag v-if="record.status == 'enabled'" color="green">可用</a-tag>
<a-tag v-if="record.status == 'disabled'" color="red">不可用</a-tag>
<a-tag v-if="record.status == 'enabled'" color="green">启用</a-tag>
<a-tag v-if="record.status == 'disabled'" color="red">禁用</a-tag>
</template>
<template v-if="column.dataIndex === 'imageIsPublic'">
<a-tag v-if="record.imageIsPublic" color="green">公开</a-tag>
@ -64,10 +64,10 @@
import editDialog from './editDialog.vue';
import { ref, reactive, onMounted, computed, } from 'vue';
import {
message,
message,Modal,
} from 'ant-design-vue';
import apis from '@/apis';
import { getImageList } from '@/apis/admin';
import { getImageList, delImageItem } from '@/apis/admin';
import { on } from 'events';
// 表格列定义
interface ImageItem {
@ -143,8 +143,29 @@ const handleView = (record: ImageItem) => {
editDialogRef.value.openDialog(record);
};
const handleDelete = (record: ImageItem) => {
message.info(`删除镜像: ${record.name}`);
const handleDelete = (record:any) => {
Modal.confirm({
title: "确认删除该镜像吗？",
okText: "确认",
onOk: () => {
return new Promise((resolve, reject) => {
; (async () => {
try {
const res:any= await delImageItem({image_id: record.id}).catch(() => {
throw new Error()
})
if (res.code === 0) {
resolve(true)
message.success('删除成功')
await getDataList()
}
} catch (error) {
reject()
}
})()
})
},
})
};
// 计算当前页数据