提交代码
姜玉琦
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