提交代码
姜玉琦
parent
9460b1401c
commit
c7eddc7a1c
|
|
@ -0,0 +1,208 @@
|
||||||
|
<!-- 用户管理 -->
|
||||||
|
<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-row>
|
||||||
|
<el-col :lg="24" :xs="24">
|
||||||
|
<el-form label-width="100px">
|
||||||
|
<el-table :data="listOpt.unregistedList" style="width: 100%" stripe>
|
||||||
|
<el-table-column label="选择" width="60" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-radio
|
||||||
|
v-model="formData.unregisted"
|
||||||
|
:label="scope.row.uuid"
|
||||||
|
@change.native="getCurrentRow(scope.row)"
|
||||||
|
>{{ "" }}</el-radio
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="tool_name" label="工具名称" align="left" />
|
||||||
|
<el-table-column prop="ip" label="IP地址" align="left" />
|
||||||
|
<el-table-column prop="tool_type" label="工具类型" align="left">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag
|
||||||
|
v-for="item in listOpt.typeList"
|
||||||
|
v-show="item.type == scope.row.tool_type"
|
||||||
|
effect="plain"
|
||||||
|
>
|
||||||
|
{{ item.name }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="cmpt_hardware_type" label="硬件类型" align="left" />
|
||||||
|
<el-table-column prop="uuid" label="ID编号" align="left" />
|
||||||
|
<el-table-column prop="manufacturer" label="厂商名称" align="left" />
|
||||||
|
<el-table-column prop="tool_version" label="服务程序版本" align="left" />
|
||||||
|
<el-table-column prop="connection_state" label="连接状态" align="left">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag
|
||||||
|
v-if="scope.row.connection_state == '已连接'"
|
||||||
|
type="success"
|
||||||
|
effect="dark"
|
||||||
|
>
|
||||||
|
{{ scope.row.connection_state }}
|
||||||
|
</el-tag>
|
||||||
|
<el-tag v-else type="danger" effect="dark">
|
||||||
|
{{ scope.row.connection_state }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-form>
|
||||||
|
</el-col>
|
||||||
|
<el-col :lg="12" :xs="24"> </el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
|
<el-card v-loading="loading" style="margin-top: 12px">
|
||||||
|
<el-row>
|
||||||
|
<el-col :lg="12" :xs="24">
|
||||||
|
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
|
||||||
|
<el-form-item label="工具链名称" prop="tool_name">
|
||||||
|
<el-input v-model="formData.tool_name" placeholder="请输入工具链名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="工具链描述" prop="tool_desc">
|
||||||
|
<el-input
|
||||||
|
v-model="formData.tool_desc"
|
||||||
|
:rows="2"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="请输入工具链描述"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-col>
|
||||||
|
<el-col :lg="12" :xs="24"> </el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="card-footer">
|
||||||
|
<el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
|
||||||
|
<el-button @click="closeBack"><i-ep-close />取 消</el-button>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useUserStore } from "@/store";
|
||||||
|
import ToolChainshApi from "@/api/tool";
|
||||||
|
const router = useRouter();
|
||||||
|
const formRef = ref(ElForm); // 表单
|
||||||
|
const loading = ref(false); // 加载状态
|
||||||
|
|
||||||
|
// 用户表单数据
|
||||||
|
const formData = reactive({
|
||||||
|
unregisted: null,
|
||||||
|
});
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
|
// 基础数据列表
|
||||||
|
let listOpt = reactive({
|
||||||
|
typeList: [
|
||||||
|
{
|
||||||
|
type: "quantizer",
|
||||||
|
name: "量化工具",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "compiler",
|
||||||
|
name: "编译工具",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "label",
|
||||||
|
name: "标注工具",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "other",
|
||||||
|
name: "其他工具",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
unregistedList: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
// 校验规则
|
||||||
|
const rules = reactive({
|
||||||
|
tool_name: [{ required: true, message: "工具链名称不能为空", trigger: "blur" }],
|
||||||
|
tool_desc: [{ required: true, message: "工具链描述不能为空", trigger: "blur" }],
|
||||||
|
});
|
||||||
|
|
||||||
|
/** 表单提交 */
|
||||||
|
const handleSubmit = useThrottleFn(() => {
|
||||||
|
formRef.value.validate((valid: any) => {
|
||||||
|
if (valid) {
|
||||||
|
if (!formData.unregisted) {
|
||||||
|
ElMessage.error("请选择要注册的工具链");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
loading.value = true;
|
||||||
|
ToolChainshApi.addTool(formData)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.data.code == 0) {
|
||||||
|
ElMessage.success("保存成功");
|
||||||
|
closeBack();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, 3000);
|
||||||
|
|
||||||
|
/** 选中未注册工具链 */
|
||||||
|
function getCurrentRow(row: { [key: string]: any }) {
|
||||||
|
formData.uuid = row.uuid;
|
||||||
|
formData.tool_type = row.tool_type;
|
||||||
|
formData.cmpt_hardware_type = row.cmpt_hardware_type;
|
||||||
|
formData.manufacturer = row.manufacturer;
|
||||||
|
formData.tool_version = row.tool_version;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 返回默认页面 */
|
||||||
|
function closeBack() {
|
||||||
|
router.replace({ path: "/tester/otherTool" });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化选项列表
|
||||||
|
const initData = () => {
|
||||||
|
ToolChainshApi.unregistedList().then((res) => {
|
||||||
|
listOpt.unregistedList = res.data.data.UnregistedList || [];
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
Loading…
Reference in New Issue