166 lines
5.0 KiB
Vue
166 lines
5.0 KiB
Vue
<template>
|
||
<el-dialog v-model="visible" title="资质文件管理" width="650px" destroy-on-close>
|
||
<el-form
|
||
ref="formRef"
|
||
:model="formData"
|
||
:rules="rules"
|
||
label-width="110px"
|
||
v-loading="loading"
|
||
style="padding: 10px 20px"
|
||
>
|
||
<el-form-item label="租户名称">
|
||
<el-input v-model="tenantName" disabled />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="资质类型" prop="type">
|
||
<el-select v-model="formData.type" placeholder="请选择资质类型" style="width: 100%">
|
||
<el-option label="营业执照" value="business_license" />
|
||
<el-option label="开户许可证" value="bank_account_permit" />
|
||
<el-option label="行业许可证" value="industry_license" />
|
||
<el-option label="其他资质" value="others" />
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="资质图片" prop="file_url">
|
||
<el-upload
|
||
class="avatar-uploader"
|
||
action="/api/platform/common/upload"
|
||
:show-file-list="false"
|
||
:on-success="handleUploadSuccess"
|
||
:before-upload="beforeAvatarUpload"
|
||
name="file"
|
||
>
|
||
<img v-if="formData.file_url" :src="formData.file_url" class="qualification-img" />
|
||
<el-icon v-else class="uploader-icon"><Plus /></el-icon>
|
||
</el-upload>
|
||
<div class="upload-tip">支持 jpg/png 格式，大小不超过 2MB</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="有效期至" prop="expire_time">
|
||
<el-date-picker
|
||
v-model="formData.expire_time"
|
||
type="date"
|
||
placeholder="选择过期日期"
|
||
style="width: 100%"
|
||
value-format="YYYY-MM-DD"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="备注说明">
|
||
<el-input v-model="formData.remark" type="textarea" placeholder="请输入备注信息" />
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<template #footer>
|
||
<el-button @click="visible = false">取消</el-button>
|
||
<el-button type="primary" :loading="submitting" @click="submitForm">保存资质</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive } from 'vue';
|
||
import { ElMessage } from 'element-plus';
|
||
import { Plus } from '@element-plus/icons-vue';
|
||
// 假设你有对应的资质接口
|
||
// import { saveQualification, getQualificationDetail } from '@/api/tenant';
|
||
|
||
const visible = ref(false);
|
||
const loading = ref(false);
|
||
const submitting = ref(false);
|
||
const tenantName = ref('');
|
||
const formRef = ref();
|
||
|
||
const formData = reactive({
|
||
tid: null,
|
||
type: '',
|
||
file_url: '',
|
||
expire_time: '',
|
||
remark: ''
|
||
});
|
||
|
||
const rules = {
|
||
type: [{ required: true, message: '请选择资质类型', trigger: 'change' }],
|
||
file_url: [{ required: true, message: '请上传资质图片', trigger: 'change' }],
|
||
expire_time: [{ required: true, message: '请选择有效期', trigger: 'change' }]
|
||
};
|
||
|
||
// 打开弹窗
|
||
const open = (row: any) => {
|
||
visible.value = true;
|
||
tenantName.value = row.tenant_name;
|
||
formData.tid = row.id;
|
||
|
||
// 如果后端有资质详情接口，可以在此获取回显数据
|
||
// fetchDetail(row.id);
|
||
};
|
||
|
||
// 上传前的校验
|
||
const beforeAvatarUpload = (rawFile: any) => {
|
||
if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
|
||
ElMessage.error('图片必须是 JPG 或 PNG 格式!');
|
||
return false;
|
||
} else if (rawFile.size / 1024 / 1024 > 2) {
|
||
ElMessage.error('图片大小不能超过 2MB!');
|
||
return false;
|
||
}
|
||
return true;
|
||
};
|
||
|
||
// 上传成功回调
|
||
const handleUploadSuccess = (response: any) => {
|
||
// 根据你后端的上传接口返回结构调整
|
||
formData.file_url = response.data.url;
|
||
ElMessage.success('上传成功');
|
||
};
|
||
|
||
const submitForm = async () => {
|
||
await formRef.value.validate();
|
||
submitting.value = true;
|
||
try {
|
||
// 模拟提交
|
||
console.log('提交的数据：', formData);
|
||
ElMessage.success('资质保存成功');
|
||
visible.value = false;
|
||
} finally {
|
||
submitting.value = false;
|
||
}
|
||
};
|
||
|
||
defineExpose({ open });
|
||
</script>
|
||
|
||
<style scoped>
|
||
.avatar-uploader {
|
||
border: 1px dashed #d9d9d9;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
width: 178px;
|
||
height: 178px;
|
||
transition: border-color 0.3s;
|
||
}
|
||
.avatar-uploader:hover {
|
||
border-color: #409eff;
|
||
}
|
||
.uploader-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
width: 178px;
|
||
height: 178px;
|
||
text-align: center;
|
||
line-height: 178px !important;
|
||
}
|
||
.qualification-img {
|
||
width: 178px;
|
||
height: 178px;
|
||
display: block;
|
||
object-fit: contain;
|
||
}
|
||
.upload-tip {
|
||
font-size: 12px;
|
||
color: #999;
|
||
margin-top: 8px;
|
||
}
|
||
</style> |