From 990fc81b375c88c7d21ec766c18dfa217a0c50da Mon Sep 17 00:00:00 2001
From: ann <aannzee@gmail.com>
Date: Tue, 3 Sep 2024 16:47:29 +0800
Subject: [PATCH] fix

---
 public/locales/en.json                        |   3 +-
 public/locales/zh.json                        |   3 +-
 src/api/task/task.js                          |  10 +
 src/router/modules/taskManagement.js          |   7 +
 .../taskManagement/aiList/createInstance.vue  | 223 ++++++++++++++++++
 src/views/taskManagement/aiList/taskList.vue  |   2 +-
 6 files changed, 245 insertions(+), 3 deletions(-)
 create mode 100644 src/views/taskManagement/aiList/createInstance.vue

diff --git a/public/locales/en.json b/public/locales/en.json
index 5280de8..3c7937c 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -563,6 +563,7 @@
     "operation": "Single Operation",
     "allOperation": "All Operation",
     "selectInstance": "Select Instance",
-    "selectSubInstance": "Select SubInstance"
+    "selectSubInstance": "Select SubInstance",
+    "instanceDes": "Instance Description"
   }
 }
\ No newline at end of file
diff --git a/public/locales/zh.json b/public/locales/zh.json
index 990816e..2ccd924 100644
--- a/public/locales/zh.json
+++ b/public/locales/zh.json
@@ -563,6 +563,7 @@
     "operation": "单独操作",
     "allOperation": "全部操作",
     "selectInstance": "选择主实例",
-    "selectSubInstance": "选择子实例"
+    "selectSubInstance": "选择子实例",
+    "instanceDes": "实例描述"
   }
 }
\ No newline at end of file
diff --git a/src/api/task/task.js b/src/api/task/task.js
index 8ba1d12..d3c59d3 100644
--- a/src/api/task/task.js
+++ b/src/api/task/task.js
@@ -67,6 +67,13 @@ export const addDeductiveTextTask = (data) => {
     data
   })
 }
+export const createDeployTask = (data) => {
+  return request({
+    url: '/pcm/v1/inference/createDeployTask',
+    method: 'post',
+    data
+  })
+}
 
 export const chatApi = (data) => {
   return request({
@@ -85,6 +92,9 @@ export const getModelName = (type) => {
   return request({ url: '/pcm/v1/inference/modelNames?type=' + type, method: 'get' })
 }
 
+export const getClustersByModel = (params) => {
+  return request({ url: '/pcm/v1/inference/getAdaptersByModel', method: 'get', params })
+}
 export const getInstanceListByModelType = (params) => {
   return request({ url: '/pcm/v1/inference/getDeployTasksByType', method: 'get', params })
 }
diff --git a/src/router/modules/taskManagement.js b/src/router/modules/taskManagement.js
index a87c3af..e0e6dcd 100644
--- a/src/router/modules/taskManagement.js
+++ b/src/router/modules/taskManagement.js
@@ -15,6 +15,13 @@ const taskManagementRouter = {
       meta: { activeMenu: '/taskManagement/taskList' },
       hidden: true
     },
+    {
+      path: 'createInstance',
+      component: () => import('@/views/taskManagement/aiList/createInstance'),
+      name: 'createInstance',
+      meta: { activeMenu: '/taskManagement/taskList' },
+      hidden: true
+    },
     {
       path: 'detail',
       component: () => import('@/views/taskManagement/taskList/detail'),
diff --git a/src/views/taskManagement/aiList/createInstance.vue b/src/views/taskManagement/aiList/createInstance.vue
new file mode 100644
index 0000000..5d109aa
--- /dev/null
+++ b/src/views/taskManagement/aiList/createInstance.vue
@@ -0,0 +1,223 @@
+<template>
+  <el-card v-loading="loading" class="list-detail">
+    <el-page-header :content="$t('message.create')" @back="goBack" />
+    <h2>{{ $t('page.instance') + $t('message.create') }}</h2>
+    <div class="formcontainer">
+      <div class="taskForm">
+        <el-form
+          ref="formData"
+          class="form-wrap"
+          label-position="left"
+          :model="formData"
+          :rules="formDataRules"
+        >
+          <el-form-item :label="$t('page.instanceName')" prop="taskName">
+            <el-input
+              v-model="formData.taskName"
+              :placeholder="$t('page.inputWarn')"
+              :max-length="30"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('page.instanceDes')" prop="taskDesc">
+            <el-input
+              v-model="formData.taskDesc"
+              :max-length="100"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('page.modelType')" prop="modelType">
+            <el-select v-model="formData.modelType" style="width: 280px;margin-right: 10px;">
+              <el-option v-for="item in modelTypeList" :key="item" :label="item" :value="item" />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('page.modelName')" prop="modelName">
+            <el-select v-model="formData.modelName" style="width: 280px;margin-right: 10px;">
+              <el-option v-for="item in modelNameList" :key="item" :label="item" :value="item" />
+            </el-select>
+          </el-form-item>
+          <div>
+            <el-form-item :label="$t('page.selectCluster')" prop="aiClusterIds">
+              <!-- <el-select v-model="formData.aiClusterIds" style="width: 280px;margin-right: 10px;">
+                <el-option v-for="item in formData.staticWeightMap" :key="item.id" :label="item.key" :value="item.id" />
+              </el-select> -->
+              <table class="tableInput">
+                <tr v-for="env in clusterList" :key="env.adapterId">
+                  <td>
+                    <el-checkbox v-model="env.selected" size="small" />
+                    {{ env.taskName }}</td>
+                  <td>
+                    <el-select v-model="env.selectedclusters" style="width: 280px;margin-right: 10px;" multiple>
+                      <el-option v-for="item in env.clusters" :key="item.clusterId" :label="item.clusterName" :value="item.clusterId" />
+                    </el-select>
+                  </td>
+                </tr>
+              </table>
+            </el-form-item>
+          </div>
+
+        </el-form>
+
+      </div>
+    </div>
+    <el-row type="flex" justify="end">
+      <el-col :span="2.5">
+        <el-button size="medium" @click="goBack">{{ $t("message.cancel") }}</el-button>
+        <el-button size="medium" type="primary" @click="saveForm">{{ $t("message.create") }}</el-button>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<script>
+// import List from '@/components/list'
+import { getClusterList } from '@/api/container/cluster'
+import { mapGetters } from 'vuex'
+import { getModelType, getModelName, createDeployTask, getClustersByModel } from '@/api/task/task'
+
+// import jobForm from './components/jobForm.vue'
+export default {
+  // components: { List },
+  data() {
+    return {
+      getClusterList,
+      tableListData: [],
+      isEdit: false,
+      loading: false,
+      submitLoading: false,
+      selectCluster: false,
+      strategySetting: false,
+      formData: {
+        taskName: '',
+        taskDesc: '',
+        modelName: '',
+        modelType: '',
+        adapterClusterMap: []
+      },
+      clusterList: {
+      },
+      modelTypeList: [],
+      modelNameList: []
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'dict'
+    ]),
+    columns() {
+      return this.setColumn()
+    },
+    formDataRules() {
+      return {
+        taskName: [
+          { required: true, message: this.$t('check.input') + this.$t('message.name') }
+          // {
+          //   pattern: /^[a-z]([-a-z0-9]*[a-z0-9])?$/,
+          //   message: this.$t('check.inputInvalid')
+          // }
+          // { validator: this.nameValidator }
+        ],
+        taskDesc: [
+          { required: true, message: this.$t('check.input') + this.$t('page.taskDes') }
+        ],
+        modelType: [{ required: true, message: this.$t('check.requireSelect'), trigger: 'change' }],
+        modelName: [{ required: true, message: this.$t('check.requireSelect'), trigger: 'change' }]
+      }
+    }
+  },
+  watch: {
+    'formData.modelType'(val) {
+      if (val) {
+        this.formData.modelName = ''
+        getModelName(val).then(e => {
+          this.modelNameList = e.data.models
+        })
+      }
+    },
+    'formData.modelName'(val) {
+      if (val && this.formData.modelType) {
+        this.clusterList = {}
+        getClustersByModel({ modelType: this.formData.modelType, modelName: val }).then(e => {
+          this.clusterList = e.data.adapters
+        })
+      }
+    }
+  },
+  mounted() {
+    getModelType().then(e => {
+      this.modelTypeList = e.data.types
+    })
+  },
+  methods: {
+    getCluster() {
+      const query = { 'type': this.taskType === 'application' ? '0' : (this.taskType === 'aiBase' || this.taskType === 'aiCard') ? '1' : this.taskType === 'hpcBase' ? '2' : '0', 'adapterId': this.formData.adapterId, pageNum: 1, pageSize: 1000 }
+      this.getClusterList(query).then(e => {
+        this.currentClusterList = e.data.list || []
+      })
+    },
+    goBack() {
+      this.$router.push({ path: '/taskManagement/aiList' })
+    },
+    saveForm() {
+      this.$refs.formData.validate((valid) => {
+        if (valid) {
+          console.log(this.clusterList)
+          this.formData.adapterClusterMap = {}
+          this.clusterList.forEach(e => {
+            if (e.selected) {
+              this.formData.adapterClusterMap[e.adapterId] = e.selectedclusters
+            }
+          })
+          createDeployTask(this.formData).then(e => {
+            this.$message.success(this.$t('page.createdSuccess'))
+            this.$router.push({ path: '/taskManagement/aiList' })
+          }).catch(e => {
+            this.submitLoading = false
+          })
+          console.log(this.formData)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.formcontainer{
+    margin-bottom: 24px;
+}
+.taskForm{
+  border: 1px solid #2B3948;
+  padding: 20px;
+}
+.tableInput{
+  width: 50%;
+  border: 1px solid gray;
+  border-collapse: collapse;
+  .el-form-item{
+    margin: 0!important;
+  }
+  td, th{
+    padding: 1em;
+    border-left: 1px solid gray;
+
+  }
+  td:first-child, th:first-child{
+    border-left: 0;
+  }
+  tr{
+    border-top: 1px solid gray;
+  }
+  tr:first-child {
+    border-top: 0;
+  }
+}
+.sliderSet{
+  .el-slider__marks-text:last-child{
+    width: 100px!important;
+  }
+  .el-slider__marks-text:first-child{
+    text-align: right;
+    padding-left: 2rem;
+  }
+}
+</style>
+
diff --git a/src/views/taskManagement/aiList/taskList.vue b/src/views/taskManagement/aiList/taskList.vue
index 41061d0..b419340 100644
--- a/src/views/taskManagement/aiList/taskList.vue
+++ b/src/views/taskManagement/aiList/taskList.vue
@@ -263,7 +263,7 @@ export default {
       this.$router.push({ path: `detail`, query: { id: row.id }})
     },
     createItem() {
-      this.$router.push({ path: `create` })
+      this.$router.push({ path: `createInstance` })
     },
     handleClick() {
       console.log('switch')