AIManage/src/views/simulationEvaluation/components/addStep3.vue

<template>
    <el-card style="margin-top:12px" class="simulation-add-add-step31">
        <template #header>已选择模型</template>
        <el-row class="model-info">
            <el-col :span="8">
                <span>模型名称:</span>
                <span>{{ modelInfo.model_name }}</span>
            </el-col>
            <el-col :span="8">
                <span>模型类型:</span>
                <span>{{ modelInfo.modl_net_type }}</span>
            </el-col>
            <el-col :span="8">
                <span>互联名称:</span>
                <span>{{ modelInfo.connection_name }}</span>
            </el-col>
        </el-row>
        <div class="param-file">
            <span class="sp-label">推理参数文件:</span>
            <span class="sp-form">
                <el-upload ref="uploadRef" class="upload-demo upload-demo-1" :on-change="handleFileChange"
                    :on-remove="handleFileRemove" :on-exceed="handleFileExceed" :auto-upload="false" :limit="1"
                    accept="application/json">
                    <el-button type="primary"><el-icon class="el-icon--upload"> <i-ep-upload-filled />
                        </el-icon>选择文件</el-button>
                    <template #tip>
                        <div class="el-upload__tip">
                            请上传大小不超过 <strong style="color: red">10M</strong>，格式为
                            <strong style="color: red">json</strong> 的文件
                        </div>
                    </template>
                </el-upload>
                <JsonEditorVue v-if="info.file" class="json-editor" v-model="info.jsonData" :modeList="['code']"
                    language="zh-CN" :expanded-on-start="true" @change="updateJson"></JsonEditorVue>
            </span>
        </div>
    </el-card>

</template>

<script setup>
import 'jsoneditor'
import JsonEditorVue from 'json-editor-vue3'
const info = reactive({
    jsonData: {},
    file: null
})
const props = defineProps({
    modelInfo: {
        type: Object,
        require: true,
        default: null,
    },
});

const uploadRef = ref();
function handleFileChange(file) {
    if (typeof FileReader === "undefined") {
        this.$message({
            type: "info",
            message: "您的浏览器不支持文件读取。",
        });
        return;
    }
    uploadFile(file).then((res) => {
        if (isJSON(res, true)) {
            if (info.file) {
                ElMessageBox.confirm("确认是替换当前编辑的内容?", "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(function () {
                    info.jsonData = JSON.parse(res);
                 });
            } else {
                info.jsonData = JSON.parse(res);               
            }
            info.file=file;
            uploadRef.value.clearFiles();
        }
    });
}
/** 解析json */
function isJSON(str, showMsg) {
    try {
        // 尝试解析输入的字符串
        JSON.parse(str);
        if (showMsg) {
            ElMessage.success("JSON文件解析成功");
        }
        return true;
        // 成功解析
    } catch (error) {
        // 解析失败
        if (showMsg) {
            ElMessage.error("JSON文件解析失败");
        }
        return false;
    }
}
function updateJson(val){
    info.jsonData=val;
}
// 文件读取
function uploadFile(file) {
    return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        reader.readAsArrayBuffer(file.raw);
        reader.onload = function (e) {
            var ints = new Uint8Array(e.target.result); //要使用读取的内容，所以将读取内容转化成Uint8Array
            let snippets = new TextDecoder("UTF-8").decode(ints); //二进制缓存区内容转化成中文（即也就是读取到的内容）
            resolve(snippets);
        };
    });
}
function handleFileRemove() {
    debugger
}
function handleFileExceed() {
}
function checkForm(){
    if(info.file){
        return info.jsonData
    }else{
        ElMessage.error("请选择推理参数文件！");
        return null
    }
}
defineExpose({
    checkForm
})
</script>
<style lang="scss" scoped>
.model-info {
    font-size: 12px;
    color: #666;
}
</style>
<style lang="scss">
.simulation-add-add-step31 {
    .param-file {
        margin-top: 20px;
        display: flex;

        .sp-label {
            display: block;
            width: 120px;
            font-weight: bold;
            color: #666;
            font-size: 16px;
        }

        .sp-form {
            display: block;
            flex-grow: 1;
        }

        .json-editor {
            height: 45vh;

            .jsoneditor-modes {
                display: none;
            }

            .full-screen {
                right: 10px !important;
            }

            .jsoneditor-poweredBy {
                display: none;
            }

            .jsoneditor-menu {
                background-color: #409eff;
            }
        }
    }
}
</style>