feat(taskConfig): access tool processing api

Author: martsimq

src/api/index.ts

@@ -6,4 +6,5 @@
 
 // 手动修改 Mock 接口
 // export * from "./job.ts"
-export * from "./mock.ts"
+export * from "./mock.ts";
+export * from "./qgis.ts";

src/components/taskConfig/index.vue

@@ -2,18 +2,49 @@
 import { Close } from "@element-plus/icons-vue";
 import { useTaskStore } from "@/store/task.ts";
 import { storeToRefs } from "pinia";
+import { reactive, ref } from "vue";
+import { process } from "@/api";
 
 const taskStore = useTaskStore();
 const { tool } = storeToRefs(taskStore);
 
-const onCancel = () => {
-  taskStore.close();
-};
-const onExecute = () => {
-  alert("execute!");
-};
+const argConfig = reactive<
+  {
+    name: string;
+    description: string;
+    type: string;
+    input: string;
+  }[]
+>([]);
+
+const processConfig = reactive<{
+  [key: string]: string;
+}>({});
+
+interface Response {
+  message: string;
+  output: string;
+  error: 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()) {
+    processConfig[arg.name] = arg.input;
+  }
+  console.log(processConfig);
+  res.value = (await process(id, processConfig)).data as Response;
+  console.log(res.value);
+}
 
-// console.log(argCfg.value);
+function onCancel() {
+  taskStore.close();
+}
 </script>
 <template>
   <el-card
@@ -31,28 +62,40 @@ const onExecute = () => {
     <el-form label-position="top" style="margin: 20px">
       <el-descriptions direction="vertical" :column="1">
         <el-descriptions-item label="Tool name">
-          {{ tool.id + "  " + tool.name }}
+          {{ tool.name }}
         </el-descriptions-item>
         <el-descriptions-item label="Tool description">
           {{ tool.description }}
         </el-descriptions-item>
       </el-descriptions>
       <el-form-item label="Args">
-        <el-table :data="tool.args" header-cell-class-name="header-cell-class">
+        <el-table :data="argConfig" header-cell-class-name="header-cell-class">
           <el-table-column prop="name" label="Name" />
           <el-table-column prop="description" label="Description" />
-          <el-table-column :prop="' '" label="Input" />
+          <el-table-column prop="input" label="Input">
+            <template #default="scope">
+              <el-input
+                v-model="scope.row.input"
+                style="height: 100%; width: 100%"
+                type="textarea"
+                autosize
+                placeholder="Please input"
+              />
+            </template>
+          </el-table-column>
         </el-table>
       </el-form-item>
-      <el-descriptions direction="vertical" :column="1">
+      <el-descriptions v-if="res" direction="vertical" :column="1">
         <el-descriptions-item label="Result">
-          {{ "resutl" }}
+          {{ res?.message }}
         </el-descriptions-item>
       </el-descriptions>
       <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">Execute </el-button>
+          <el-button type="primary" @click="onExecute(tool.id, argConfig)"
+            >Execute
+          </el-button>
         </div>
       </el-form-item>
     </el-form>