359 lines
11 KiB
Vue
359 lines
11 KiB
Vue
<!-- 用户管理 -->
|
||
<template>
|
||
<div class="app-container model-detail">
|
||
<!-- 用户新增/编辑表单 -->
|
||
<el-card v-loading="loading">
|
||
<template #header
|
||
><svg-icon
|
||
icon-class="pause"
|
||
style="width: 20px; height: 20px"
|
||
/>工具链基本信息</template
|
||
>
|
||
<el-form ref="baseFormRef" :model="baseForm" :rules="baseRules" label-width="100px">
|
||
<el-row>
|
||
<el-col :lg="12" :xs="12">
|
||
<el-form-item label="工具链名称" prop="tool_name">
|
||
<el-input v-model="baseForm.tool_name" disabled placeholder="请输入工具链名称" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :lg="12" :xs="12">
|
||
<el-form-item label="厂商名称" prop="tool_name">
|
||
<el-input v-model="baseForm.tool_name" disabled placeholder="请输入厂商名称" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :lg="12" :xs="12">
|
||
<el-form-item label="工具链类型" prop="tool_name">
|
||
<el-input v-model="baseForm.tool_name" disabled placeholder="请输入工具链类型" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :lg="12" :xs="12">
|
||
<el-form-item label="ID编号" prop="tool_name">
|
||
<el-input v-model="baseForm.tool_name" disabled placeholder="请输入ID编号" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :lg="12" :xs="12">
|
||
<el-form-item label="工具链版本" prop="tool_name">
|
||
<el-input v-model="baseForm.tool_name" disabled placeholder="请输入工具链版本" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :lg="12" :xs="12">
|
||
<el-form-item label="硬件类型" prop="tool_name">
|
||
<el-input v-model="baseForm.tool_name" disabled placeholder="请输入硬件类型" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :lg="12" :xs="12">
|
||
<el-form-item label="工具链描述" prop="tool_desc">
|
||
<el-input
|
||
v-model="baseForm.tool_desc"
|
||
:rows="2"
|
||
type="textarea"
|
||
placeholder="请输入工具链描述"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :lg="12" :xs="12"></el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</el-card>
|
||
<el-row style="padding: 10px 15px;">
|
||
<el-col :lg="24" :xs="24">
|
||
<el-button type="primary" @click="handlePushParams"><i-ep-plus />添加运行参数</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
<el-card v-loading="loading">
|
||
<template #header
|
||
><svg-icon
|
||
icon-class="pause"
|
||
style="width: 20px; height: 20px"
|
||
/>工具链运行参数信息</template
|
||
>
|
||
<el-form ref="formRef" :model="baseForm" :rules="rules" label-width="100px">
|
||
|
||
<el-row>
|
||
<el-col :lg="12" :xs="12">
|
||
<el-form-item label="工具链名称" prop="tool_name">
|
||
<el-input v-model="baseForm.tool_name" disabled placeholder="请输入工具链名称" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :lg="12" :xs="12">
|
||
<el-form-item label="厂商名称" prop="tool_name">
|
||
<el-input v-model="baseForm.tool_name" disabled placeholder="请输入厂商名称" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :lg="12" :xs="12">
|
||
<el-form-item label="工具链类型" prop="tool_name">
|
||
<el-input v-model="baseForm.tool_name" disabled placeholder="请输入工具链类型" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :lg="12" :xs="12">
|
||
<el-form-item label="ID编号" prop="tool_name">
|
||
<el-input v-model="baseForm.tool_name" disabled placeholder="请输入ID编号" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :lg="12" :xs="12">
|
||
<el-form-item label="工具链版本" prop="tool_name">
|
||
<el-input v-model="baseForm.tool_name" disabled placeholder="请输入工具链版本" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :lg="12" :xs="12">
|
||
<el-form-item label="硬件类型" prop="tool_name">
|
||
<el-input v-model="baseForm.tool_name" disabled placeholder="请输入硬件类型" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :lg="12" :xs="12">
|
||
<el-form-item label="工具链描述" prop="tool_desc">
|
||
<el-input
|
||
v-model="baseForm.tool_desc"
|
||
:rows="2"
|
||
type="textarea"
|
||
placeholder="请输入工具链描述"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :lg="12" :xs="12"></el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</el-card>
|
||
<el-card class="card-footer">
|
||
<el-button @click="closeBack"><i-ep-close />取 消</el-button>
|
||
</el-card>
|
||
<el-dialog v-model="dialogFormVisible" title="添加工具链运行参数" width="880" v-loading="formLoading">
|
||
<el-form ref="formRef" :model="form" :rules="rules" label-width="108px">
|
||
<el-form-item label="运行参数名称" prop="params_name">
|
||
<el-input v-model="form.params_name" placeholder="请输入运行参数名称" />
|
||
</el-form-item>
|
||
<el-form-item label="运行参数描述" prop="params_desc">
|
||
<el-input
|
||
v-model="form.params_desc"
|
||
:rows="3"
|
||
type="textarea"
|
||
placeholder="请输入运行参数描述"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="运行参数文件" prop="params_content">
|
||
<el-upload
|
||
ref="uploadRef"
|
||
class="upload-demo"
|
||
: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>
|
||
</el-form-item>
|
||
<el-form-item v-if="fileStatus">
|
||
<el-input
|
||
v-model="form.params_content"
|
||
:rows="10"
|
||
type="textarea"
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="dialogFormVisible = false"><i-ep-close />取消</el-button>
|
||
<el-button type="primary" @click="handleSubmitFile">
|
||
<i-ep-check />确认
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import ToolChainshApi from "@/api/tool";
|
||
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
|
||
// 基础表单
|
||
const baseForm = reactive({});
|
||
const baseFormRef = ref(ElForm); // 表单
|
||
const loading = ref(false); // 加载状态
|
||
// 校验规则
|
||
const baseRules = reactive({
|
||
tool_name: [{ required: true, message: "工具链名称不能为空", trigger: "blur" }],
|
||
tool_desc: [{ required: true, message: "工具链描述不能为空", trigger: "blur" }],
|
||
});
|
||
|
||
// 表单数据
|
||
const form = reactive({});
|
||
const formRef = ref(ElForm); // 表单
|
||
const fileStatus = ref(false); // 文件状态
|
||
const formLoading = ref(false); // 表单加载状态
|
||
const dialogFormVisible = ref(false); // 弹窗加载状态
|
||
// 校验规则
|
||
const rules = reactive({
|
||
params_name: [{ required: true, message: "运行参数名称不能为空", trigger: "blur" }],
|
||
params_desc: [{ required: true, message: "运行参数描述不能为空", trigger: "blur" }],
|
||
params_content: [{ required: true, message: "运行参数文件不能为空", trigger: "blur" }],
|
||
});
|
||
|
||
/** 表单提交 */
|
||
const handleSubmitFile = useThrottleFn(() => {
|
||
formRef.value.validate((valid: any) => {
|
||
if (valid) {
|
||
ElMessage.success("保存成功");
|
||
//formLoading.value = true;
|
||
// ToolChainshApi.editTool(form.tool_id,form)
|
||
// .then((res) => {
|
||
// if (res.data.code == 0) {
|
||
// ElMessage.success("修改成功");
|
||
// handleQuery();
|
||
// }
|
||
// })
|
||
// .finally(() => {
|
||
// dialogFormVisible.value = false;
|
||
// formLoading.value = false;
|
||
// });
|
||
}
|
||
});
|
||
}, 3000);
|
||
|
||
/** 添加运行参数 */
|
||
function handlePushParams(){
|
||
form.value = {};
|
||
dialogFormVisible.value = true;
|
||
}
|
||
|
||
// 文件上传
|
||
function handleFileChange(file) {
|
||
//先创建一个读文件的对象 FileReader
|
||
let reader = new FileReader();
|
||
//判断浏览器是否支持 FileReader
|
||
if (typeof FileReader === "undefined") {
|
||
this.$message({
|
||
type: "info",
|
||
message: "您的浏览器不支持文件读取。",
|
||
});
|
||
return;
|
||
}
|
||
uploadFile(file).then((res) => {
|
||
if (isJSON(res)) {
|
||
let jsonStr = JSON.stringify(res);
|
||
form.params_content = jsonStr;
|
||
formRef.value.validateField("params_content");
|
||
fileStatus.value = true;
|
||
}
|
||
});
|
||
}
|
||
|
||
/** 解析json */
|
||
function isJSON(str) {
|
||
try {
|
||
// 尝试解析输入的字符串
|
||
JSON.parse(str);
|
||
ElMessage.success("JSON文件解析成功");
|
||
return true;
|
||
// 成功解析
|
||
} catch (error) {
|
||
// 解析失败
|
||
ElMessage.error("JSON文件解析失败");
|
||
uploadRef.value.clearFiles();
|
||
fileStatus.value = false;
|
||
form.params_content = "";
|
||
return false;
|
||
}
|
||
}
|
||
|
||
// 文件读取
|
||
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() {
|
||
form.params_content = "";
|
||
fileStatus.value = false;
|
||
}
|
||
|
||
// 超出限制，清空文件列表
|
||
function handleFileExceed() {
|
||
uploadRef.value.clearFiles();
|
||
ElMessage.warning("已清空文件列表,请重新上传！");
|
||
handleFileRemove();
|
||
}
|
||
|
||
/** 返回默认页面 */
|
||
function closeBack() {
|
||
router.replace({ path: "/tester/otherTool" });
|
||
}
|
||
|
||
/** 初始化数据 */
|
||
function initData(){
|
||
let id=route.query.id;
|
||
var row = localStorage.getItem('toolChainsKey-'+id);
|
||
if(!row){
|
||
ElMessage.error("未找到相关数据，请从列表页进入详情");
|
||
closeBack();
|
||
}
|
||
baseForm = row;
|
||
}
|
||
|
||
onMounted(() => {
|
||
//initData();
|
||
});
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.model-detail {
|
||
:deep(.el-card__header) {
|
||
padding: 8px 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.sp-file {
|
||
color: #29d;
|
||
}
|
||
.tb-base-info {
|
||
line-height: 30px;
|
||
}
|
||
:deep(.svg-icon) {
|
||
margin-right: 8px;
|
||
}
|
||
.card-footer {
|
||
position: fixed;
|
||
width: calc(100% - 215px);
|
||
bottom: 0px;
|
||
:deep(.el-card__body) {
|
||
padding: 10px;
|
||
.el-pagination {
|
||
justify-content: end;
|
||
}
|
||
}
|
||
}
|
||
</style>
|