可信代码库-组织管理企业认证页面开发

This commit is contained in:
付民康
2025-06-06 09:37:55 +08:00
parent 30b1a772a2
commit 0e4e65ec37
3 changed files with 408 additions and 2 deletions

View File

@@ -403,7 +403,7 @@ const getQuestionHistory = async () => {
const {data} = await axios.post(VITE_AI_API_HOST + '/api/conversationList', {
"userId": props.username,
"list_type": "history",
"is_manage": true,
"is_manage": false,
"page": page.value.pageNum,
"size": page.value.size,
"search": searchText.value
@@ -423,7 +423,7 @@ const getQuestionCollection = async () => {
const {data} = await axios.post(VITE_AI_API_HOST + '/api/conversationList', {
"userId": props.username,
"list_type": "collection",
"is_manage": true,
"is_manage": false,
"page": page.value.pageNum,
"size": page.value.size,
"search": searchText.value

View File

@@ -5,6 +5,31 @@
<div class="text-[14px] w-full flex items-center justify-between">
<div class="font-bold mb-[16px]">基础信息</div>
<div>
<!-- <d-icon style="margin-right: 4px;color: rgb(61, 204, 166)" v-if="!isEdit" class="font-normal" name="right-o" operable @click="editIconClick">-->
<!-- <template #suffix>-->
<!-- <span>已认证</span>-->
<!-- </template>-->
<!-- </d-icon>-->
<d-icon style="margin-right: 4px;color: rgb(245, 152, 51)" v-if="!isEdit" class="font-normal" name="warning-o" operable @click="editIconClick">
<template #suffix>
<span>未认证</span>
</template>
</d-icon>
<!-- <d-icon style="margin-right: 4px;color: rgb(249, 95, 91)" v-if="!isEdit" class="font-normal" name="error-o" operable @click="editIconClick">-->
<!-- <template #suffix>-->
<!-- <span>驳回</span>-->
<!-- </template>-->
<!-- </d-icon>-->
<!-- <d-icon style="margin-right: 4px;color: rgb(254, 204, 85)" v-if="!isEdit" class="font-normal" name="warning-o" operable @click="editIconClick">-->
<!-- <template #suffix>-->
<!-- <span>审核中</span>-->
<!-- </template>-->
<!-- </d-icon>-->
<d-icon v-if="!isEdit" class="font-normal" style="margin-right: 4px" name="classroom-post-results-large" operable @click="showModal">
<template #suffix>
<span>申请企业认证</span>
</template>
</d-icon>
<d-icon v-if="!isEdit" class="font-normal" name="edit" operable @click="editIconClick">
<template #suffix>
<span>编辑</span>
@@ -214,12 +239,15 @@
<d-button @click="closeDeleteMemberModal">取消</d-button>
</div>
</d-modal>
<QyrzModal ref="qyrzRef"/>
</template>
<script setup lang="ts">
import { reactive, ref, shallowRef,watch } from 'vue';
import { Message } from 'vue-devui';
import NoData from '@/components/NoData/NoData.vue';
import QyrzModal from './QyrzModal.vue';
import {
createOrganizationApi,
deleteOrganizationMemberApi, getGroupjoinedListApi,
@@ -263,6 +291,7 @@ const createFormData = reactive({
organizationProfile: '' // 组织简介
});
const createFormRef = ref();
const qyrzRef = ref();
const createOrganizationLoading = ref(false);
const isEdit = ref(false);
@@ -274,6 +303,14 @@ let originMemberList: OrganizationMemberItemType[] = [];
let filterMemberList: OrganizationMemberItemType[] = [];
const memberTableData = shallowRef<OrganizationMemberItemType[]>([]);
function showModal(row) {
if (qyrzRef.value) {
qyrzRef.value.open();
}
}
const pager = reactive({
pageSize: 10,
pageIndex: 1,

View File

@@ -0,0 +1,369 @@
<template>
<d-modal v-model="visible" class="w-[900px] repo-setting-modal">
<template #header>
<gc-modal-header>
<span class="text-G900 text-base font-bold leading-[24px]">企业认证</span>
</gc-modal-header>
<div class="line bg-G200"></div>
</template>
<d-form ref="formRef" layout="vertical" :label-align="'end'" :data="newFormData" :rules="rules">
<d-row :gutter="32" class="mb-3">
<d-col :span="12">
<d-form-item field="primaryKey" label="主键">
<d-input
placeholder="请输入主键"
v-model="newFormData.primaryKey"
:rules="[{ required: true, message: '请填写主键' }]"
/>
</d-form-item>
</d-col>
<d-col :span="12">
<d-form-item field="applicant" label="申请人">
<d-input
placeholder="请输入申请人"
v-model="newFormData.applicant"
:rules="[{ required: true, message: '请填写申请人' }]"
/>
</d-form-item>
</d-col>
</d-row>
<d-row :gutter="32" class="mb-3">
<d-col :span="12">
<d-form-item field="enterpriseName" label="企业名称">
<d-input
placeholder="请输入企业名称"
v-model="newFormData.enterpriseName"
:rules="[{ required: true, message: '请填写企业名称' }]"
/>
</d-form-item>
</d-col>
<d-col :span="12">
<d-form-item field="creditCode" label="统一信用代码">
<d-input
placeholder="请输入统一信用代码"
v-model="newFormData.creditCode"
:rules="[{ required: true, message: '请填写统一信用代码' }]"
/>
</d-form-item>
</d-col>
</d-row>
<d-row :gutter="32" class="mb-3">
<d-col :span="12">
<d-form-item field="website" label="企业官网">
<d-input
placeholder="请输入企业官网"
v-model="newFormData.website"
:rules="[{ required: true, message: '请填写企业官网' }]"
/>
</d-form-item>
</d-col>
<d-col :span="12">
<d-form-item field="industry" label="所属行业">
<d-input
placeholder="请输入所属行业"
v-model="newFormData.industry"
:rules="[{ required: true, message: '请填写所属行业' }]"
/>
</d-form-item>
</d-col>
</d-row>
<d-row :gutter="32" class="mb-3">
<d-col :span="12">
<d-form-item field="introduction" label="企业简介">
<d-input
placeholder="请输入企业简介"
v-model="newFormData.introduction"
:rows="2"
type="textarea"
:rules="[{ required: true, message: '请填写企业简介' }]"
/>
</d-form-item>
</d-col>
</d-row>
<d-row :gutter="32" class="mb-3">
<d-col :span="12">
<d-form-item field="businessLicense" label="营业执照">
<div class="img-container" v-if="!showUpload">
<img class="img-preview" :src="businessLicenseUrl" alt="营业执照预览" />
<div class="delete-img" @click="handleDel">
<d-icon name="delete" size="14px"></d-icon>
</div>
</div>
<d-upload class="upload-demo-new" accept=".png,.jpg,.jpeg" :upload-options="uploadOptions" :before-upload="beforeUpload" v-if="showUpload">
<div class="upload-trigger">
<div><d-icon name="multi-picture" size="20px"></d-icon></div>
<div style="margin-top: 8px;">
添加图片
</div>
</div>
</d-upload>
</d-form-item>
</d-col>
</d-row>
<d-row :gutter="32" class="mb-3">
<d-col :span="12">
<d-form-item field="contactEmail" label="联系人邮箱">
<d-input
placeholder="请输入联系人邮箱"
v-model="newFormData.contactEmail"
:rules="[{ required: true, message: '请填写联系人邮箱' }, { type: 'email', message: '请输入正确的邮箱格式' }]"
/>
</d-form-item>
</d-col>
<d-col :span="12">
<d-form-item field="contactName" label="联系人姓名">
<d-input
placeholder="请输入联系人姓名"
v-model="newFormData.contactName"
:rules="[{ required: true, message: '请填写联系人姓名' }]"
/>
</d-form-item>
</d-col>
</d-row>
<d-row :gutter="32" class="mb-3">
<d-col :span="12">
<d-form-item field="contactPhone" label="联系电话">
<d-input
placeholder="请输入联系电话"
v-model="newFormData.contactPhone"
:rules="[{ required: true, message: '请填写联系电话' }, { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }]"
/>
</d-form-item>
</d-col>
</d-row>
</d-form>
<template #footer>
<div class="flex justify-center px-[24px] pb-[24px] gap-2">
<d-button variant="solid" @click="handleConfirm">确定</d-button>
<d-button @click="handleCancel">取消</d-button>
</div>
</template>
</d-modal>
</template>
<script setup>
import { ref, nextTick } from 'vue';
import NoData from '@/components/NoData/NoData.vue';
import { Message } from 'vue-devui';
const visible = ref(false);
const formRef = ref(null);
const businessLicenseUrl = ref(''); // 营业执照预览URL
// 表单校验规则(全部设为必填)
const rules = ref({
primaryKey: [{ required: true, message: '请填写主键', trigger: 'blur' }],
applicant: [{ required: true, message: '请填写申请人', trigger: 'blur' }],
enterpriseName: [{ required: true, message: '请填写企业名称', trigger: 'blur' }],
creditCode: [
{ required: true, message: '请填写统一信用代码', trigger: 'blur' },
{ pattern: /^[0-9A-Z]{18}$/, message: '统一信用代码格式不正确', trigger: 'blur' }
],
website: [
{ required: true, message: '请填写企业官网', trigger: 'blur' },
{ pattern: /^https?:\/\/.+$/, message: '网址格式不正确', trigger: 'blur' }
],
industry: [{ required: true, message: '请填写所属行业', trigger: 'blur' }],
introduction: [{ required: true, message: '请填写企业简介', trigger: 'blur' }],
businessLicense: [{ required: true, message: '请上传营业执照', trigger: 'change' }],
contactEmail: [
{ required: true, message: '请填写联系人邮箱', trigger: 'blur' },
{ type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
],
contactName: [{ required: true, message: '请填写联系人姓名', trigger: 'blur' }],
contactPhone: [
{ required: true, message: '请填写联系电话', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
]
});
// 表单数据与field保持一致
const newFormData = ref({
primaryKey: '', // 主键
applicant: '', // 申请人
enterpriseName: '', // 企业名称
creditCode: '', // 统一信用代码
website: '', // 企业官网
industry: '', // 所属行业
introduction: '', // 企业简介
businessLicense: '', // 营业执照存储上传后的URL或ID
contactEmail: '', // 联系人邮箱
contactName: '', // 联系人姓名
contactPhone: '', // 联系电话
});
// 图片上传
const showUpload = ref(true);
const uploadOptions = ref({
uri: 'https://run.mocky.io/v3/132b3ea3-23ea-436b-aed4-c43ef9d116f0',
});
const beforeUpload = (file) => {
const reader = new FileReader();
reader.onload = async () => {
showUpload.value = false;
businessLicenseUrl.value = reader.result; // 保存预览URL
newFormData.value.businessLicense = reader.result; // 保存到表单数据
await nextTick();
};
reader.readAsDataURL(file[0].file);
return false; // 阻止默认上传行为
};
const handleDel = () => {
showUpload.value = true;
businessLicenseUrl.value = '';
newFormData.value.businessLicense = ''; // 清空表单数据
};
// 暴露给父组件的方法
defineExpose({
open,
close,
resetForm // 新增重置表单方法
});
// 打开模态框(支持传入初始数据)
function open(initialData = {}) {
// 重置表单状态
resetForm();
// 填充初始数据(如果有)
if (Object.keys(initialData).length) {
Object.assign(newFormData.value, initialData);
// 如果有营业执照数据,显示预览
if (initialData.businessLicense) {
showUpload.value = false;
businessLicenseUrl.value = initialData.businessLicense;
}
}
visible.value = true;
}
// 关闭模态框
function close() {
visible.value = false;
}
// 重置表单
function resetForm() {
// 清空表单数据
newFormData.value = {
primaryKey: '',
applicant: '',
enterpriseName: '',
creditCode: '',
website: '',
industry: '',
introduction: '',
businessLicense: '',
contactEmail: '',
contactName: '',
contactPhone: '',
};
// 重置上传状态
showUpload.value = true;
businessLicenseUrl.value = '';
// 重置表单校验状态
formRef.value?.resetFields();
}
// 提交表单
const handleConfirm = () => {
formRef.value.validate((isValid, invalidFields) => {
if (isValid) {
// 表单验证通过,处理提交逻辑
console.log('提交表单数据:', newFormData.value);
// 这里应该调用实际的API
// await submitEnterpriseData(newFormData.value);
Message.success('提交成功');
close();
} else {
// 显示第一个错误字段的提示
const firstError = Object.values(invalidFields)[0]?.[0]?.message;
Message.error(firstError || '请完善表单信息');
}
});
};
function handleCancel() {
close();
}
</script>
<style lang="scss" scoped>
.repo-setting-modal {
width: 600px;
}
.card-key {
display: inline-block;
color: #666;
margin-right: 8px;
}
.card-val {
color: #333;
}
.upload-demo-new .upload-trigger {
background-color: #f2f2f2;
border: 1px dashed #d9d9d9;
border-radius: 6px;
box-sizing: border-box;
width: 100px;
height: 100px;
text-align: center;
cursor: pointer;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
.upload-demo-new .upload-trigger .link {
color: #5e7ce0;
}
.img-container {
position: relative;
width: 100px;
height: 100px;
}
.img-preview {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
}
.delete-img {
position: absolute;
top: 4px;
right: 4px;
width: 16px;
height: 16px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
color: white;
}
</style>