将开源版本的修改打补丁应用到商业版
This commit is contained in:
wsm
@@ -0,0 +1,235 @@
|
||||
<template>
|
||||
<div class="j-upload-demo-container">
|
||||
<a-card title="SUploadFile 文件上传组件示例" style="margin-bottom: 16px">
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="业务名称">
|
||||
<a-input v-model:value="formData.name" placeholder="请输入业务名称" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="业务密级">
|
||||
<a-radio-group v-model:value="formData.secretLevel">
|
||||
<a-radio :value="1">非密</a-radio>
|
||||
<a-radio :value="2">内部</a-radio>
|
||||
<a-radio :value="3">秘密</a-radio>
|
||||
<a-radio :value="4">机密</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="多文件上传">
|
||||
<a-switch v-model:checked="multipleEnabled" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="文件上传区域">
|
||||
<SUploadFile
|
||||
ref="uploadFileRef"
|
||||
v-model:bussinessId="formData.id"
|
||||
:bussiness-secret-level="formData.secretLevel"
|
||||
:disabled="formData.readOnly"
|
||||
:multiple="multipleEnabled"
|
||||
@upload-success="handleUploadSuccess"
|
||||
@delete-success="handleDeleteSuccess"
|
||||
@upload-error="handleUploadError"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSave" :loading="saving">
|
||||
保存表单（模拟）
|
||||
</a-button>
|
||||
<a-button @click="handleReset">重置</a-button>
|
||||
<a-button type="link" @click="formData.readOnly = !formData.readOnly">
|
||||
{{ formData.readOnly ? '解除禁用' : '禁用组件' }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
|
||||
<a-card title="操作日志" style="margin-bottom: 16px">
|
||||
<div class="state-display">
|
||||
<a-descriptions :column="2" size="small" bordered>
|
||||
<a-descriptions-item label="业务ID">{{ formData.id || '(空 - 新增模式)' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="待关联文件数">
|
||||
<a-badge :count="pendingCount" :number-style="{ backgroundColor: '#faad14' }" />
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="业务模式">
|
||||
<a-tag :color="formData.id ? 'green' : 'orange'">
|
||||
{{ formData.id ? '编辑模式（已有ID）' : '新增模式（无ID）' }}
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="组件状态">
|
||||
<a-tag :color="formData.readOnly ? 'red' : 'green'">
|
||||
{{ formData.readOnly ? '已禁用' : '可操作' }}
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-card title="事件日志">
|
||||
<div class="event-log-wrapper">
|
||||
<a-button size="small" @click="eventLogs = []" style="margin-bottom: 8px">清空日志</a-button>
|
||||
<div class="event-log-list">
|
||||
<div v-for="(log, idx) in eventLogs" :key="idx" class="event-log-item">
|
||||
<a-tag :color="log.type === 'success' ? 'green' : log.type === 'error' ? 'red' : 'blue'" size="small">
|
||||
{{ log.type }}
|
||||
</a-tag>
|
||||
<span class="log-time">{{ log.time }}</span>
|
||||
<span class="log-msg">{{ log.message }}</span>
|
||||
</div>
|
||||
<div v-if="eventLogs.length === 0" class="empty-log">暂无日志</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import SUploadFile from '/@/components/semri/fileComponent/SUploadFile.vue';
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
const uploadFileRef = ref<InstanceType<typeof SUploadFile> | null>(null);
|
||||
const multipleEnabled = ref(true);
|
||||
const saving = ref(false);
|
||||
const pendingCount = ref(0);
|
||||
const eventLogs = ref<any[]>([]);
|
||||
|
||||
const formData = ref({
|
||||
id: '',
|
||||
name: '',
|
||||
secretLevel: 3,
|
||||
readOnly: false,
|
||||
});
|
||||
|
||||
function addLog(type: string, message: string) {
|
||||
const now = new Date();
|
||||
const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
|
||||
eventLogs.value.unshift({ type, message, time });
|
||||
if (eventLogs.value.length > 50) eventLogs.value.pop();
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!formData.value.name) {
|
||||
createMessage.warning('请输入业务名称');
|
||||
return;
|
||||
}
|
||||
|
||||
saving.value = true;
|
||||
addLog('info', '开始保存表单...');
|
||||
|
||||
try {
|
||||
await new Promise(resolve => setTimeout(resolve, 800));
|
||||
|
||||
const isNew = !formData.value.id;
|
||||
if (isNew) {
|
||||
formData.value.id = 'BIZ_' + Date.now();
|
||||
addLog('success', `表单保存成功，生成业务ID: ${formData.value.id}`);
|
||||
} else {
|
||||
addLog('success', `表单更新成功，业务ID: ${formData.value.id}`);
|
||||
}
|
||||
|
||||
if (uploadFileRef.value) {
|
||||
const hasPending = uploadFileRef.value.hasPendingFiles();
|
||||
pendingCount.value = hasPending ? uploadFileRef.value.getPendingFileIds().length : 0;
|
||||
|
||||
if (hasPending) {
|
||||
addLog('info', `发现 ${pendingCount.value} 个待关联文件，开始绑定...`);
|
||||
const bindSuccess = await uploadFileRef.value.bindBussinessId(formData.value.id);
|
||||
if (bindSuccess) {
|
||||
pendingCount.value = 0;
|
||||
addLog('success', '文件关联成功！');
|
||||
} else {
|
||||
addLog('error', '文件关联失败！');
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
addLog('error', `保存失败: ${error.message}`);
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
formData.value = {
|
||||
id: '',
|
||||
name: '',
|
||||
secretLevel: 3,
|
||||
readOnly: false,
|
||||
};
|
||||
pendingCount.value = 0;
|
||||
eventLogs.value = [];
|
||||
addLog('info', '表单已重置');
|
||||
}
|
||||
|
||||
function handleUploadSuccess(result: any) {
|
||||
addLog('success', `上传成功，${result.results?.length || 0} 个文件`);
|
||||
if (uploadFileRef.value) {
|
||||
pendingCount.value = uploadFileRef.value.hasPendingFiles()
|
||||
? uploadFileRef.value.getPendingFileIds().length
|
||||
: 0;
|
||||
}
|
||||
}
|
||||
|
||||
function handleDeleteSuccess(fileId: any) {
|
||||
addLog('success', `删除成功，文件ID: ${fileId}`);
|
||||
}
|
||||
|
||||
function handleUploadError(error: any) {
|
||||
addLog('error', `上传失败: ${error.message || '未知错误'}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.j-upload-demo-container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.state-display {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.event-log-wrapper {
|
||||
.event-log-list {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.event-log-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.log-time {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.log-msg {
|
||||
font-size: 13px;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-log {
|
||||
text-align: center;
|
||||
color: #8c8c8c;
|
||||
font-size: 13px;
|
||||
padding: 16px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user