chore: type declaration

src/api/index.ts

@@ -8,3 +8,5 @@
 // export * from "./job.ts"
 export * from "./mock.ts";
 export * from "./qgis.ts";
+
+// TODO: interface definition of api

src/api/job.ts

@@ -3,29 +3,31 @@
  * @Author: Chris
  * @Date: 2024/7/1
  */
-import {AxiosInstanceConfig, createAxiosInstance} from "@/api/axios.ts";
+import { AxiosInstanceConfig, createAxiosInstance } from "@/api/axios.ts";
 
 const BASE_URL = "http://121.196.198.27:32580/";
 
 const axiosConfig: AxiosInstanceConfig = {
   baseURL: BASE_URL,
   timeout: 100000,
-}
+};
 
-const axiosInstance = createAxiosInstance(axiosConfig)
+const axiosInstance = createAxiosInstance(axiosConfig);
 
 /**
  * 获取 Job
  * @param data
  */
-export function fetchJob(data: any) {
-  return axiosInstance.post("gis_agent_backend/simple/task_plan/", data)
+export function fetchJob(data: string) {
+  return axiosInstance.post("gis_agent_backend/simple/task_plan/", data);
 }
 
 /**
  * 根据 toolId 获取工具
  * @param toolId
  */
 export function fetchTool(toolId: string) {
-  return axiosInstance.get("gis_agent_backend/test_tool/get_tool/?tool_id=" + toolId)
-}
+  return axiosInstance.get(
+    "gis_agent_backend/test_tool/get_tool/?tool_id=" + toolId,
+  );
+}

src/api/mock.ts

@@ -7,7 +7,7 @@
 import { MOCK_JOB, MOCK_TOOL } from "@/constant";
 
 export const fetchJob = (task: string) =>
-  new Promise((resolve, _reject) => {
+  new Promise<{ data: any }>((resolve, _reject) => {
     setTimeout(
       () =>
         resolve({
@@ -23,7 +23,7 @@ export const fetchJob = (task: string) =>
   });
 
 export const fetchTool = (_toolId: string) =>
-  new Promise((resolve, _reject) => {
+  new Promise<{ data: any }>((resolve, _reject) => {
     setTimeout(
       () =>
         resolve({

src/components/taskConfig/index.vue → src/components/TaskConfig.vue

@@ -4,10 +4,10 @@ import { useTaskStore } from "@/store/task.ts";
 import { storeToRefs } from "pinia";
 import { reactive, ref } from "vue";
 import { downloadFile, process } from "@/api";
+import { Response } from "@/type.ts";
 
 const taskStore = useTaskStore();
 const { tool } = storeToRefs(taskStore);
-
 const argConfig = reactive<
   {
     name: string;
@@ -16,44 +16,40 @@ const argConfig = reactive<
     input: string;
   }[]
 >([]);
-
 const processConfig = reactive<{
   [key: string]: string;
 }>({});
-
-interface Response {
-  code: string;
-  message: string;
-  data: { OUTPUT: string };
-}
-
 let res = ref<Response>();
 
-for (const [, arg] of tool.value.args.entries()) {
-  argConfig.push(Object.assign(arg, { input: "" }));
-}
-
-async function onExecute(id: string, input: typeof argConfig) {
-  for (const [, arg] of input.entries()) {
+async function onExecute(id: string | undefined, input: typeof argConfig) {
+  input.forEach((arg) => {
     processConfig[arg.name] = arg.input;
+  });
+  if (id) {
+    res.value = (await process(id, processConfig)).data as Response;
   }
-  console.log(processConfig);
-  res.value = (await process(id, processConfig)).data as Response;
-  console.log(res.value);
 }
 
 function onCancel() {
   taskStore.close();
 }
 
 async function download() {
-  console.log(res.value);
-  const response = await downloadFile(res.value!.data.OUTPUT);
-  const url = window.URL.createObjectURL(new Blob([response.data]));
-  const link = document.createElement("a");
-  link.href = url;
-  link.setAttribute("download", "sample.txt");
-  link.click();
+  console.log("download: ", res.value);
+  if (res.value?.data?.OUTPUT) {
+    const response = await downloadFile(res.value.data.OUTPUT || "");
+    const url = window.URL.createObjectURL(new Blob([response.data]));
+    const link = document.createElement("a");
+    link.href = url;
+    link.setAttribute("download", "sample.txt");
+    link.click();
+  }
+}
+
+if (tool.value) {
+  tool.value.args.forEach((arg) => {
+    argConfig.push(Object.assign(arg, { input: "" }));
+  });
 }
 </script>
 <template>
@@ -72,10 +68,10 @@ async function download() {
     <el-form label-position="top" style="margin: 20px">
       <el-descriptions direction="vertical" :column="1">
         <el-descriptions-item label="Tool name">
-          {{ tool.name }}
+          {{ tool?.name }}
         </el-descriptions-item>
         <el-descriptions-item label="Tool description">
-          {{ tool.description }}
+          {{ tool?.description }}
         </el-descriptions-item>
       </el-descriptions>
       <el-form-item label="Args">
@@ -103,7 +99,7 @@ async function download() {
               type="primary"
               :icon="Download"
               circle
-              v-if="res.message"
+              v-if="res.data?.OUTPUT"
               style="float: right"
               @click="download()"
             />
@@ -115,7 +111,7 @@ async function download() {
       <el-form-item>
         <div style="width: 100%; display: flex; justify-content: space-between">
           <el-button @click="onCancel">Cancel</el-button>
-          <el-button type="primary" @click="onExecute(tool.id, argConfig)"
+          <el-button type="primary" @click="onExecute(tool?.id, argConfig)"
             >Execute
           </el-button>
         </div>
@@ -125,7 +121,6 @@ async function download() {
 </template>
 
 <style scoped lang="less">
-@import "./index.less";
 .header-cell-class {
   background-color: aqua;
   border-color: aqua;

src/pages/Home/components/RightBox.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import WorkflowChart from "@/components/WorkflowChart.vue";
-import TaskConfig from "@/components/taskConfig/index.vue";
+import TaskConfig from "@/components/TaskConfig.vue";
 import { useTaskStore } from "@/store/task.ts";
 import { useSessionStore } from "@/store/session.ts";
 

src/store/job.ts

@@ -1,14 +1,14 @@
-import {defineStore} from "pinia";
-import {job2G6TreeGraph, jobLeafNode2G6Graph} from "@/utils/graphUtil.ts";
-import {computed} from "vue";
-import {fetchJob} from "@/api";
-import {Task} from "@/type.ts";
+import { defineStore } from "pinia";
+import { job2G6TreeGraph, jobLeafNode2G6Graph } from "@/utils/graphUtil.ts";
+import { computed } from "vue";
+import { fetchJob } from "@/api";
+import { Task } from "@/type.ts";
 
 export const useJobStore = defineStore("job", () => {
   let _job: Task;
 
   async function updateData(question: string) {
-    const res = ((await fetchJob(question)) as { data: any }).data;
+    const res = (await fetchJob(question)).data;
     // localData = (await axios.fetchJob(`{"question":"${question}"}`)).data;
     console.debug("res", res);
     _job = convertData(res);
@@ -30,5 +30,5 @@ export const useJobStore = defineStore("job", () => {
 
   const workflowData = computed(() => jobLeafNode2G6Graph(_job));
 
-  return {updateData, breakdownData, workflowData};
+  return { updateData, breakdownData, workflowData };
 });

src/store/task.ts

@@ -4,19 +4,17 @@ import { Task } from "@/type.ts";
 import { fetchTool } from "@/api";
 
 export const useTaskStore = defineStore("node", () => {
-  let _task = ref<Task>({} as Task);
+  let _task = ref<Task>();
 
-  const tool = computed(() => _task.value.tool);
+  const tool = computed(() => _task.value?.tool);
 
   let isShowed = ref(false);
 
   async function updateData(task: Task) {
     _task.value = task;
     // TODO Fetch the tool
     // const res = await fetchTool(node.tool.id).data;
-    _task.value.tool = (
-      (await fetchTool(_task.value.tool.id)) as { data: any }
-    ).data;
+    _task.value.tool = (await fetchTool(_task.value.tool.id)).data;
     console.log(_task.value);
   }
 

src/type.ts

@@ -32,14 +32,12 @@ export class Tool {
   }
 }
 
-export type Node = {
-  id: string;
-  name: string;
-  description: string;
-  // props: Task;
-  args: {
-    name: string;
-    description: string;
-    required: boolean;
-  }[];
-};
+export interface Response {
+  code: string;
+  message: string;
+  data: ResponseData;
+}
+
+interface ResponseData {
+  OUTPUT?: string;
+}