[feat](容器平台配置): 接口对接完成

src/page/main/config/cloud-platform/index.vue

@@ -23,13 +23,13 @@
             :paddingLeft="32"
             :indexWidth="108"
             :stripe="true">
-            <template v-slot:name="{ row }">
+            <template v-slot:platform_name="{ row }">
               <span class="can_click_text" @click="viewDetail(row)">
-                {{ row.name }}
+                {{ row.platform_name }}
               </span>
             </template>
-            <template v-slot:created_time="{ row }">
-              {{ row.created_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
+            <template v-slot:platform_type="{ row }">
+              {{ ["", "自有平台", "第三方平台"][row.platform_type] }}
             </template>
             <template v-slot:action="{ row }">
               <bg-table-btn
@@ -77,27 +77,43 @@
         :rules="rules"
         label-width="130px"
         style="margin-top: 24px">
-        <el-form-item label="平台类型" prop="type">
-          <el-radio-group v-model="formData.type">
-            <el-radio v-for="(item, index) in typeList" :key="'type' + index" :label="item.value">
+        <el-form-item label="平台类型" prop="platform_type">
+          <el-radio-group v-model="formData.platform_type">
+            <el-radio v-for="(item, index) in typeList" :key="'platform_type' + index" :label="item.value">
               {{ item.name }}
             </el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="平台名称" prop="name">
-          <el-input v-model.trim="formData.name" placeholder="请输入平台名称" maxlength="50" show-word-limit />
+        <el-form-item label="平台名称" prop="platform_name">
+          <el-input v-model.trim="formData.platform_name" placeholder="请输入平台名称" maxlength="50" show-word-limit />
         </el-form-item>
-        <el-form-item label="平台帐号" prop="account" v-if="formData.type == 1">
-          <el-input v-model.trim="formData.account" placeholder="请输入aPaaS在该平台注册的帐号" maxlength="50" show-word-limit />
+        <el-form-item label="平台帐号" prop="platform_account" v-if="formData.platform_type == 1">
+          <el-input
+            v-model.trim="formData.platform_account"
+            placeholder="请输入aPaaS在该平台注册的帐号"
+            maxlength="50"
+            show-word-limit />
         </el-form-item>
-        <el-form-item label="工作组名称" prop="group_name" v-if="formData.type == 1">
-          <el-input v-model.trim="formData.group_name" placeholder="请输入aPaaS在该平台注册申请的工作组名称" maxlength="50" show-word-limit />
+        <el-form-item label="工作组名称" prop="work_group" v-if="formData.platform_type == 1">
+          <el-input
+            v-model.trim="formData.work_group"
+            placeholder="请输入aPaaS在该平台注册申请的工作组名称"
+            maxlength="50"
+            show-word-limit />
         </el-form-item>
-        <el-form-item label="服务地址" prop="address" v-if="formData.type == 1">
-          <el-input v-model.trim="formData.address" placeholder="请输入服务地址URL" maxlength="100" show-word-limit />
+        <el-form-item label="服务地址" prop="service_url" v-if="formData.platform_type == 1">
+          <el-input
+            v-model.trim="formData.service_url"
+            placeholder="请输入服务地址URL"
+            maxlength="100"
+            show-word-limit />
         </el-form-item>
-        <el-form-item label="服务地址TOKEN" prop="address_toekn" v-if="formData.type == 1">
-          <el-input v-model.trim="formData.address_toekn" placeholder="请输入服务地址的TOKEN参数" maxlength="100" show-word-limit />
+        <el-form-item label="服务地址TOKEN" prop="service_token" v-if="formData.platform_type == 1">
+          <el-input
+            v-model.trim="formData.service_token"
+            placeholder="请输入服务地址的TOKEN参数"
+            maxlength="100"
+            show-word-limit />
         </el-form-item>
         <el-form-item label="APISERVER" prop="apiserver">
           <el-input
@@ -106,12 +122,16 @@
             maxlength="100"
             show-word-limit />
         </el-form-item>
-        <el-form-item label="SERVER TOKEN" prop="server_token">
-          <el-input v-model.trim="formData.server_token" placeholder="请输入SERVER TOKEN参数" maxlength="100" show-word-limit />
+        <el-form-item label="SERVER TOKEN" prop="token">
+          <el-input
+            v-model.trim="formData.token"
+            placeholder="请输入SERVER TOKEN参数"
+            maxlength="100"
+            show-word-limit />
         </el-form-item>
-        <el-form-item label="描述" prop="desc">
+        <el-form-item label="描述" prop="platform_desc">
           <el-input
-            v-model.trim="formData.desc"
+            v-model.trim="formData.platform_desc"
             placeholder="请输入描述"
             maxlength="300"
             show-word-limit
@@ -135,7 +155,7 @@
             <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-checklist"></bg-icon>
             测试链接
           </el-button>
-          <el-button type="primary" @click="postData">保存</el-button>
+          <el-button type="primary" :disabled="!testSuccess" @click="postData">保存</el-button>
         </div>
       </template>
     </el-dialog>
@@ -174,15 +194,15 @@ const state = reactive({
   headers: [
     {
       label: "容器平台名称",
-      prop: "name",
+      prop: "platform_name",
     },
     {
       label: "平台类型",
-      prop: "type_name",
+      prop: "platform_type",
     },
     {
       label: "描述",
-      prop: "desc",
+      prop: "platform_desc",
       minWidth: 346,
     },
     {
@@ -203,31 +223,31 @@ const state = reactive({
   ],
   tableRows: [],
   tableTotal: 0,
-  actionRow: {},
-  delDialog: false,
-  dialogType: 1,
-  addDialog: false,
+  actionRow: {}, // 当前选中的数据
+  delDialog: false, // 删除弹窗
+  dialogType: 1, // 1-新增 2-编辑
+  addDialog: false, // 新增/编辑弹窗
   formData: {
-    type: 1,
-    name: "",
-    account: "",
-    group_name: "",
-    address: "",
-    address_toekn: "",
+    platform_type: 1,
+    platform_name: "",
+    platform_account: "",
+    work_group: "",
+    service_url: "",
+    service_token: "",
     apiserver: "",
-    server_token: "",
-    desc: "",
+    token: "",
+    platform_desc: "",
   },
   rules: {
-    name: [{ required: true, message: "平台名称不能为空", trigger: "blur" }],
-    type: [{ required: true, message: "请选择平台类型", trigger: "change" }],
-    account: [{ required: true, message: "平台帐号不能为空", trigger: "blur" }],
-    group_name: [{ required: true, message: "工作组名称不能为空", trigger: "blur" }],
-    address: [{ required: true, message: "服务地址URL不能为空", trigger: "blur" }],
-    address_toekn: [{ required: true, message: "服务地址的TOKEN参数不能为空", trigger: "blur" }],
+    platform_name: [{ required: true, message: "平台名称不能为空", trigger: "blur" }],
+    platform_type: [{ required: true, message: "请选择平台类型", trigger: "change" }],
+    platform_account: [{ required: true, message: "平台帐号不能为空", trigger: "blur" }],
+    work_group: [{ required: true, message: "工作组名称不能为空", trigger: "blur" }],
+    service_url: [{ required: true, message: "服务地址URL不能为空", trigger: "blur" }],
+    service_token: [{ required: true, message: "服务地址的TOKEN参数不能为空", trigger: "blur" }],
     apiserver: [{ required: true, message: "APISERVER参数不能为空", trigger: "blur" }],
-    server_token: [{ required: true, message: "SERVER TOKEN参数不能为空", trigger: "blur" }],
-    desc: [{ required: true, message: "描述不能为空", trigger: "blur" }],
+    token: [{ required: true, message: "SERVER TOKEN参数不能为空", trigger: "blur" }],
+    platform_desc: [{ required: true, message: "描述不能为空", trigger: "blur" }],
   },
   typeList: [
     {
@@ -239,7 +259,7 @@ const state = reactive({
       value: 2,
     },
   ],
-  detailDialog: false,
+  detailDialog: false, // 详情弹窗
   platfromInfo: [
     {
       name: "平台类型",
@@ -287,92 +307,47 @@ const state = reactive({
       nameWidth: 144,
     },
   ],
+  testSuccess: false, // 测试链接结果
 });
 const getRoleRows = () => {
   let params = { ...state.filter };
-  console.log(params);
-  state.tableRows = [
-    {
-      id: 1,
-      type: 1,
-      name: "比格容器云平台",
-      account: "admin",
-      group_name: "beagle",
-      type_name: "自有平台",
-      desc: "这是一个由比格大数据公司自主研发的一款云原生容器平台这是一个由比格大数据公司自主研发的一款云原生容器平台",
-      created_by: "王先生",
-      created_time: "2020-01-01 00:00:00",
-      address: "https://cloud1.wodcloud.com/",
-      address_token: "11112321123123123123",
-      apiserver: "https://apaas1.wodcloud.com/",
-      server_token: "1234567bqsid123k12s0h1d3uhf493fh02hd3h38ff",
-    },
-    {
-      id: 2,
-      type: 2,
-      name: "阿里云平台",
-      type_name: "第三方平台",
-      desc: "阿里云平台",
-      created_by: "王先生",
-      created_time: "2020-01-01 00:00:00",
-      apiserver: "https://apaas2.wodcloud.com/",
-      server_token: "abcdefgbqsis0h1d3uhf493fh02hdd102h9s3h38ff",
-    },
-    {
-      id: 3,
-      type: 2,
-      name: "腾讯云平台",
-      type_name: "第三方平台",
-      desc: "这是腾讯云平台啊",
-      created_by: "王先生",
-      created_time: "2020-01-01 00:00:00",
-      apiserver: "https://apaas3.wodcloud.com",
-      server_token: "bqsid123k12s0h1d3uhf493fh02hddsaassdsh38ff",
-    },
-  ];
-  state.tableTotal = 3;
-  // axios.get(`/apaas/system/v5/role/list`, { params }).then((res) => {
-  //   if (res.data.code == 200) {
-  //     state.tableRows = res.data.data || [];
-  //     state.tableTotal = res.data.total;
-  //   } else {
-  //     ElMessage.error(res.data.data);
-  //   }
-  // });
-}; // 获取角色列表
-
+  axios.get(`/apaas/application/v5/platform/list`, { params }).then((res) => {
+    if (res.data.code == 200) {
+      state.tableRows = res.data.data || [];
+      state.tableTotal = res.data.total;
+    } else {
+      ElMessage.error(res.data.data);
+    }
+  });
+}; // 获取列表
 const changePage = (val) => {
   state.filter.page = val;
   getRoleRows();
 }; // 改变页码
-
 const changeSize = (val) => {
   state.filter.limit = val;
   changePage(1);
 }; // 改变每页条数
-
 const changeSearch = (val) => {
   state.filter.search = val;
   changePage(1);
 }; // 表格关键字筛选
-
 const register = () => {
   resetForm();
   state.dialogType = 1;
   state.addDialog = true;
 }; // 新增
-
 const resetForm = () => {
   state.formData = {
-    type: 1,
-    name: "",
-    account: "",
-    group_name: "",
-    address: "",
-    address_toekn: "",
+    platform_type: 1,
+    platform_name: "",
+    platform_account: "",
+    work_group: "",
+    service_url: "",
+    service_token: "",
     apiserver: "",
-    server_token: "",
-    desc: "",
+    token: "",
+    platform_desc: "",
   };
   if (bgForm.value) {
     nextTick(() => {
@@ -383,51 +358,89 @@ const resetForm = () => {
       });
     });
   }
-};
-const viewDetail = (row) => {
-  state.platfromInfo[0].value = row.type_name
-  state.platfromInfo[1].value = row.name
-  state.platfromInfo[2].value = row.account
-  state.platfromInfo[3].value = row.group_name
-  state.platfromInfo[4].value = row.address
-  state.platfromInfo[5].value = row.address_token
-  state.platfromInfo[6].value = row.apiserver
-  state.platfromInfo[7].value = row.server_token
-  state.platfromInfo[8].value = row.desc
-  if (row.type == 2) {
-    state.platfromInfo.splice(2,4)
+}; // 重置表单
+const viewDetail = async (row) => {
+  let { data } = await getDetail(row.id);
+  if (data.code == 200) {
+    state.platfromInfo[0].value = ["", "自有平台", "第三方平台"][data.data.platform_type];
+    state.platfromInfo[1].value = data.data.platform_name;
+    state.platfromInfo[2].value = data.data.platform_account;
+    state.platfromInfo[3].value = data.data.work_group;
+    state.platfromInfo[4].value = data.data.service_url;
+    state.platfromInfo[5].value = data.data.service_token;
+    state.platfromInfo[6].value = data.data.apiserver;
+    state.platfromInfo[7].value = data.data.token;
+    state.platfromInfo[8].value = data.data.platform_desc;
+    if (data.data.platform_type == 2) {
+      state.platfromInfo.splice(2, 4);
     }
     state.detailDialog = true;
-  console.log(row, "查看详情");
+  } else {
+    ElMessage.error(data.data);
+  }
 }; // 查看详情
-
-const edit_row = (row) => {
+const getDetail = (id) => {
+  return axios.get(`/apaas/application/v5/platform/detail/${id}`);
+}; // 获取详情
+const edit_row = async (row) => {
   resetForm();
+  let { data } = await getDetail(row.id);
+  if (data.code == 200) {
+    Object.assign(state.formData, data.data);
     state.dialogType = 2;
     state.addDialog = true;
+  } else {
+    ElMessage.error(data.data);
+  }
 }; // 编辑
-
-const testUrl = () => {};
-const postData = () => {};
-
+const testUrl = () => {
+  bgForm.value.validate((valid) => {
+    if (valid) {
+      let params = {
+        ...state.formData,
+      };
+      axios.post(`/apaas/application/v5/platform/check`, params).then((res) => {
+        if (res.data.code == 200) {
+          ElMessage.success("链接测试通过！");
+          state.testSuccess = true;
+        } else {
+          ElMessage.error(res.data.data);
+        }
+      });
+    }
+  });
+}; // 测试链接
+const postData = () => {
+  let params = {
+    ...state.formData,
+  };
+  let url = ["", "/apaas/application/v5/platform/add", "/apaas/application/v5/platform/update"];
+  axios.post(url[state.dialogType], params).then((res) => {
+    if (res.data.code == 200) {
+      ElMessage.success(res.data.msg);
+      state.addDialog = false;
+      state.testSuccess = false;
+      changePage(1);
+    } else {
+      ElMessage.error(res.data.data);
+    }
+  });
+}; // 新建/编辑数据
 const delete_row = (row) => {
   state.actionRow = row;
   state.delDialog = true;
 }; // 删除
-
 const deleteData = () => {
-  console.log(state.actionRow);
+  axios.delete(`/apaas/application/v5/platform/${state.actionRow.id}`).then((res) => {
+    if (res.data.code == 200) {
+      ElMessage.success(res.data.msg);
       state.delDialog = false;
-  // axios.delete(`/apaas/system/v5/role/delete`, { data: { ids: [...ids] } }).then((res) => {
-  //   if (res.data.code == 200) {
-  //     ElMessage.success(res.data.msg);
-  //     state.delDialog = false;
-  //     changePage(1);
-  //   } else {
-  //     ElMessage.error(res.data.data);
-  //   }
-  // });
-};
+      changePage(1);
+    } else {
+      ElMessage.error(res.data.data);
+    }
+  });
+}; // 确认删除
 onBeforeMount(() => {
   getRoleRows();
 });
@@ -445,6 +458,7 @@ const {
   typeList,
   detailDialog,
   platfromInfo,
+  testSuccess,
 } = toRefs(state);
 </script>
 

vite.config.js

-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
 
-const path = require('path')
+const path = require("path");
 
-function resolve_path (dir) {
-  return path.join(__dirname, './', dir)
+function resolve_path(dir) {
+  return path.join(__dirname, "./", dir);
 }
 
-
 export default {
-  plugins: [
-    vue()
-  ],
+  plugins: [vue()],
   //本地运行基础路径，如：http://localhost:5173/apaas/ui/
   base: "/apaas/manage/ui/",
-  clearScreen:false,
-  resolve:{
+  clearScreen: false,
+  resolve: {
     //别名，代码引入时方便引入
-    alias:{
-      '@':resolve_path('src'),
-    }
+    alias: {
+      "@": resolve_path("src"),
+    },
   },
-  css:{
-    devSourcemap:true,//代码编排，调试时是否能看到源码
+  css: {
+    devSourcemap: true, //代码编排，调试时是否能看到源码
   },
-  server:{
-    host:'0.0.0.0',//host配置，0.0.0.0会添加本地ip，开启局域网访问路径
-    hmr:true,//热更新
+  server: {
+    host: "0.0.0.0", //host配置，0.0.0.0会添加本地ip，开启局域网访问路径
+    hmr: true, //热更新
     proxy: {
       // 选项写法
-      '/apaas/system':{
-        target: 'https://apaas5.wodcloud.com/apaas/system', // 所要代理的目标地址
-        rewrite: path => path.replace(/^\/apaas\/system/, ''), // 重写传过来的path路径，比如 `/api/index/1?id=10&name=zs`（注意:path路径最前面有斜杠（/），因此，正则匹配的时候不要忘了是斜杠（/）开头的；选项的 key 也是斜杠（/）开头的）
+      "/apaas/system": {
+        target: "https://apaas5.wodcloud.com/apaas/system", // 所要代理的目标地址
+        rewrite: (path) => path.replace(/^\/apaas\/system/, ""), // 重写传过来的path路径，比如 `/api/index/1?id=10&name=zs`（注意:path路径最前面有斜杠（/），因此，正则匹配的时候不要忘了是斜杠（/）开头的；选项的 key 也是斜杠（/）开头的）
         changeOrigin: true, // true/false, Default: false - changes the origin of the host header to the target URL
-        secure: false,//解决证书缺失问题
+        secure: false, //解决证书缺失问题
       },
-      '/apaas/portal/ui':{
-        target: 'https://apaas5.wodcloud.com/apaas/portal/ui', // 所要代理的目标地址
-        rewrite: path => path.replace(/^\/apaas\/portal\/ui/, ''), // 重写传过来的path路径，比如 `/api/index/1?id=10&name=zs`（注意:path路径最前面有斜杠（/），因此，正则匹配的时候不要忘了是斜杠（/）开头的；选项的 key 也是斜杠（/）开头的）
+      "/apaas/portal/ui": {
+        target: "https://apaas5.wodcloud.com/apaas/portal/ui", // 所要代理的目标地址
+        rewrite: (path) => path.replace(/^\/apaas\/portal\/ui/, ""), // 重写传过来的path路径，比如 `/api/index/1?id=10&name=zs`（注意:path路径最前面有斜杠（/），因此，正则匹配的时候不要忘了是斜杠（/）开头的；选项的 key 也是斜杠（/）开头的）
         changeOrigin: true, // true/false, Default: false - changes the origin of the host header to the target URL
-        secure: false,//解决证书缺失问题
+        secure: false, //解决证书缺失问题
       },
-      '/apaas/service':{
-        target: 'https://apaas5.wodcloud.com/apaas/service', // 所要代理的目标地址
-        rewrite: path => path.replace(/^\/apaas\/service/, ''), // 重写传过来的path路径，比如 `/api/index/1?id=10&name=zs`（注意:path路径最前面有斜杠（/），因此，正则匹配的时候不要忘了是斜杠（/）开头的；选项的 key 也是斜杠（/）开头的）
+      "/apaas/service": {
+        target: "https://apaas5.wodcloud.com/apaas/service", // 所要代理的目标地址
+        rewrite: (path) => path.replace(/^\/apaas\/service/, ""), // 重写传过来的path路径，比如 `/api/index/1?id=10&name=zs`（注意:path路径最前面有斜杠（/），因此，正则匹配的时候不要忘了是斜杠（/）开头的；选项的 key 也是斜杠（/）开头的）
         changeOrigin: true, // true/false, Default: false - changes the origin of the host header to the target URL
-        secure: false,//解决证书缺失问题
+        secure: false, //解决证书缺失问题
       },
-      '/apaas/common':{
-        target: 'https://apaas5.wodcloud.com/apaas/common', // 所要代理的目标地址
-        rewrite: path => path.replace(/^\/apaas\/common/, ''), // 重写传过来的path路径，比如 `/api/index/1?id=10&name=zs`（注意:path路径最前面有斜杠（/），因此，正则匹配的时候不要忘了是斜杠（/）开头的；选项的 key 也是斜杠（/）开头的）
+      "/apaas/common": {
+        target: "https://apaas5.wodcloud.com/apaas/common", // 所要代理的目标地址
+        rewrite: (path) => path.replace(/^\/apaas\/common/, ""), // 重写传过来的path路径，比如 `/api/index/1?id=10&name=zs`（注意:path路径最前面有斜杠（/），因此，正则匹配的时候不要忘了是斜杠（/）开头的；选项的 key 也是斜杠（/）开头的）
         changeOrigin: true, // true/false, Default: false - changes the origin of the host header to the target URL
-        secure: false,//解决证书缺失问题
+        secure: false, //解决证书缺失问题
       },
-    }
+      "/apaas/application/v5": {
+        target: "https://apaas5.wodcloud.com/apaas/application/v5",
+        rewrite: (path) => path.replace(/^\/apaas\/application\/v5/, ""),
+        changeOrigin: true,
+        secure: false,
       },
-  build:{
-    outDir:'dist/apaas/manage/ui',//打包输出文件夹
-    assetsDir:'static',//打包输出静态文件
     },
-  
-}
+  },
+  build: {
+    outDir: "dist/apaas/manage/ui", //打包输出文件夹
+    assetsDir: "static", //打包输出静态文件
+  },
+};