From c7eddc7a1c4fd5960d2fde5ce077e6631591a11e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=9C=E7=8E=89=E7=90=A6?=
 <7507756+jiang_yuqi@user.noreply.gitee.com>
Date: Sun, 14 Jul 2024 22:28:40 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/manage/otherTool/add.vue | 208 +++++++++++++++++++++++++++++
 1 file changed, 208 insertions(+)
 create mode 100644 src/views/manage/otherTool/add.vue

diff --git a/src/views/manage/otherTool/add.vue b/src/views/manage/otherTool/add.vue
new file mode 100644
index 0000000..99e78f7
--- /dev/null
+++ b/src/views/manage/otherTool/add.vue
@@ -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>