feat:ASW-180 playbook 修改页面开发

4 files changed, 106 insertions, 16 deletions

diff --git a/src/axios/api/playbook.js b/src/axios/api/playbook.js
index 1bf2c17..b6f4202 100644
--- a/src/axios/api/playbook.js
+++ b/src/axios/api/playbook.js
@@ -14,6 +14,19 @@ export const playbookListApi = async (workspaceId, data) => {
   }
 };
 
+// playbook 详情
+export const playbookDetailApi = async (workspaceId, id) => {
+  try {
+    const res = await axiosInstance({
+      url: `/api/v1/workspace/${workspaceId}/playbook/${id}`,
+      method: 'GET',
+    });
+    return res.data;
+  } catch (err) {
+    return err.data;
+  }
+};
+
 // playbook新增
 export const playbookAddApi = async (workspaceId, data) => {
   try {
@@ -29,6 +42,20 @@ export const playbookAddApi = async (workspaceId, data) => {
   }
 };
 
+// playbook修改
+export const playbookEditApi = async (workspaceId, id,  data) => {
+  try {
+    const res = await axiosInstance({
+      url: `/api/v1/workspace/${workspaceId}/playbook/${id}`,
+      method: 'PUT',
+      data: data
+    });
+    return res.data;
+  } catch (err) {
+    return err.data;
+  }
+};
+
 // playbook删除
 export const playbookDeleteApi = async (workspaceId, data) => {
   try {
diff --git a/src/router/permissions.js b/src/router/permissions.js
index db9d8d1..c5814ff 100644
--- a/src/router/permissions.js
+++ b/src/router/permissions.js
@@ -237,6 +237,14 @@ const systemRoutes = {
       },
     },
     {
+      path: '/:workspace?/playbooks/:id/edit',
+      name: 'playbook_edit',
+      component: () => import('@/views/playbooks/detail.vue'),
+      meta: {
+        permission: 'playbook_edit',
+      },
+    },
+    {
       path: '/:workspace?/runners',
       name: 'runners',
       component: () => import('@/views/runners/index.vue'),
diff --git a/src/views/playbooks/detail.vue b/src/views/playbooks/detail.vue
index 1b1b686..3050128 100644
--- a/src/views/playbooks/detail.vue
+++ b/src/views/playbooks/detail.vue
@@ -1,6 +1,15 @@
 <template>
   <div id="playbooks_edit" class="detail" v-loading="loading">
-    <p class="detail-title">
+    <div class="detail-breadcrumb" v-if="routeParams.id">
+      <span class="detail-breadcrumb-left">
+        <span @click="jumpBack" class="application-back">
+          {{ t('overall.playbooks') }}
+        </span>
+        <span> / </span>
+        <span>{{ name }}</span>
+      </span>
+    </div>
+    <p class="detail-title" v-else>
       <span>{{ t('playbook.new_playbook') }}</span>
     </p>
     <div class="detail-content playbook-content">
@@ -9,7 +18,7 @@
         <el-form
           ref="ruleFormRef"
           :model="ruleForm"
-          :rules="rules"
+          :rules="routeParams.id ? editRules : rules"
           label-position="left"
           label-width="auto"
         >
@@ -30,7 +39,7 @@
             prop="type"
             size="default"
           >
-            <el-select v-model="ruleForm.type">
+            <el-select v-model="ruleForm.type" :disabled="routeParams.id ? true : false">
               <el-option
                 v-for="type in typeList"
                 :key="type.value"
@@ -55,7 +64,7 @@
             />
           </el-form-item>
           <!-- playbook file -->
-          <el-form-item
+          <el-form-item v-if="!routeParams.id"
             :label="t('playbook.file') + ':'"
             prop="file"
             size="default"
@@ -107,8 +116,8 @@
 
 <script setup>
 import { useRouter } from 'vue-router';
-import { ref, reactive, computed } from 'vue';
-import { playbookAddApi } from '@/axios/api';
+import { ref, reactive, computed, onBeforeMount } from 'vue';
+import { playbookAddApi, playbookDetailApi, playbookEditApi } from '@/axios/api';
 import { ElMessage } from 'element-plus';
 import { useI18n } from 'vue-i18n';
 import { useSystemStore } from '@/store/index';
@@ -121,6 +130,13 @@ const workspace = computed(() => {
   return systemStore.workspace;
 });
 
+let routeParams = null;
+const disposeRoute = () => {
+  let currentRoute = router.currentRoute.value;
+  routeParams = currentRoute.params;
+};
+disposeRoute();
+
 // base
 const ruleFormRef = ref(null);
 const ruleForm = reactive({
@@ -150,6 +166,10 @@ const rules = reactive({
   file: [{ required: true, validator: uploadFileChange, trigger: 'change' }],
 });
 
+const editRules = reactive({
+  name: [{ required: true, message: t('validator.required'), trigger: 'blur' }],
+});
+
 const uploadFile = ref(null);
 const uploadFileList = ref([]);
 const uploadChange = (file, fileList) => {
@@ -170,14 +190,15 @@ const save = async () => {
     if (valid) {
       let params = new FormData();
       params.append('name', ruleForm.name);
-      params.append('type', ruleForm.type);
-      params.append(
-        'description',
-        ruleForm.description ? ruleForm.description : ''
-      );
-      params.append('file', uploadFile.value.raw);
-      let res = await playbookAddApi(workspace.value.id, params);
-
+      params.append('description',ruleForm.description ? ruleForm.description : '');
+      let res = null
+      if(!routeParams.id) {
+        params.append('type', ruleForm.type);
+        params.append('file', uploadFile.value.raw);
+        res = await playbookAddApi(workspace.value.id, params);
+      } else {
+        res = await playbookEditApi(workspace.value.id, routeParams.id, params);
+      }
       if (res.code == 200) {
         jumpBack();
         ElMessage.success(t('message.save_success'));
@@ -189,8 +210,6 @@ const save = async () => {
   submitting.value = false;
 };
 
-const loading = ref(false);
-
 const jumpBack = () => {
   router.push({
     name: 'playbooks',
@@ -199,6 +218,26 @@ const jumpBack = () => {
     },
   });
 };
+
+const name = ref('');
+const loading = ref(false);
+const getData = async () => {
+  loading.value = true;
+  let res = await playbookDetailApi(workspace.value.id, routeParams.id);
+  if (res.code == 200) {
+    Object.assign(ruleForm, res.data.record);
+    name.value = ruleForm.name;
+  } else {
+    ElMessage.error(res.msg || res.error);
+  }
+  loading.value = false;
+};
+
+onBeforeMount(() => {
+  if (routeParams.id) {
+    getData();
+  }
+});
 </script>
 
 <style lang="scss">
diff --git a/src/views/playbooks/index.vue b/src/views/playbooks/index.vue
index f842cd2..42c1b57 100644
--- a/src/views/playbooks/index.vue
+++ b/src/views/playbooks/index.vue
@@ -103,6 +103,12 @@
               <div class="more-icon"><i class="asw-icon icon-more cp"></i></div>
               <template #dropdown>
                 <el-dropdown-menu>
+                  <div v-has="'playbook_edit'">
+                    <el-dropdown-item key="edit"  @click="tableEdit(scope.row)">
+                      <i class="asw-icon icon-edit cp"></i>
+                      {{t('overall.edit')}}
+                    </el-dropdown-item>
+                  </div>
                   <div v-has="'playbook_download'">
                     <el-dropdown-item
                       key="retry"
@@ -256,6 +262,16 @@ const newPlaybook = () => {
   });
 };
 
+// 编辑
+const tableEdit = async (row) => {
+  router.push({
+    name: 'playbook_edit',
+    params: {
+      id: row.id,
+    },
+  });
+};
+
 // 删除
 const tableDelete = (row) => {
   ElMessageBox.confirm(