[feat](容器平台配置): 静态页面及弹窗交互

src/assets/css/index.css

@@ -711,6 +711,19 @@ border-radius:8px;
   background-color: #e1e4fb;
   border-color: #e1e4fb;
 }
+.apaas_button .el-button--info {
+  color: #fff;
+  background-color: #404a62;
+  border-color: #404a62;
+}
+.apaas_button .el-button--info:hover{
+  background-color: #5c6579;
+  border-color: #5c6579;
+}
+.apaas_button .el-button--info:active{
+  background-color: #363f53;
+  border-color: #363f53;
+}
 
 .apaas_button .el-button--danger {
   color: #fff;

src/bg-ui/bg-table.vue

@@ -20,7 +20,7 @@
     <el-table-column type="selection" :selectable="selectable" width="38" v-if="select">
       <!-- checkbox -->
     </el-table-column>
-    <el-table-column v-if="isIndex" type="index" :label="indexLabel" width="54" align="left">
+    <el-table-column v-if="isIndex" type="index" :label="indexLabel" :width="indexWidth" align="left">
       <!-- 序号 -->
     </el-table-column>
     <el-table-column
@@ -98,6 +98,10 @@ const props = defineProps({
     typr: Boolean,
     default: "",
   }, // 决定多选框是否禁用的字段
+  indexWidth: {
+    type: Number,
+    default: 54,
+  },
 });
 
 const table = ref(null);

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

+<!-- 角色管理 -->
+<template>
+  <div class="detail_container">
+    <bg-breadcrumb></bg-breadcrumb>
+    <div class="main_container">
+      <bg-filter-group @search="changeSearch" v-model="filter.search" placeholder="请输入容器平台名称">
+        <template v-slot:left_action>
+          <div class="apaas_button">
+            <el-button class="register_btn" type="primary" @click="register">
+              <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon>
+              新增
+            </el-button>
+          </div>
+        </template>
+      </bg-filter-group>
+      <div class="table_container">
+        <div class="table bg-scroll">
+          <bg-table
+            ref="Bgtable"
+            :headers="headers"
+            :rows="tableRows"
+            isIndex
+            :paddingLeft="32"
+            :indexWidth="108"
+            :stripe="true">
+            <template v-slot:name="{ row }">
+              <span class="can_click_text" @click="viewDetail(row)">
+                {{ row.name }}
+              </span>
+            </template>
+            <template v-slot:created_time="{ row }">
+              {{ row.created_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
+            </template>
+            <template v-slot:action="{ row }">
+              <bg-table-btn
+                class="can_click_text"
+                :click="
+                  () => {
+                    edit_row(row);
+                  }
+                ">
+                编辑
+              </bg-table-btn>
+              <bg-table-btn
+                class="can_click_text"
+                :click="
+                  () => {
+                    delete_row(row);
+                  }
+                "
+                :disabled="row.state == 1 || row.role_type == 1">
+                删除
+              </bg-table-btn>
+            </template>
+          </bg-table>
+        </div>
+        <bg-pagination
+          :page="filter.page"
+          :size="filter.limit"
+          :total="tableTotal"
+          @change-page="changePage"
+          @change-size="changeSize">
+        </bg-pagination>
+      </div>
+    </div>
+    <!-- 新增/编辑弹窗 -->
+    <el-dialog
+      class="dialog-box"
+      :title="dialogType == 1 ? '新增' : '编辑'"
+      :close-on-click-modal="false"
+      v-model="addDialog"
+      width="614px">
+      <el-form
+        class="bg_form"
+        ref="bgForm"
+        :model="formData"
+        :rules="rules"
+        label-width="100px"
+        style="margin-top: 24px">
+        <el-form-item label="平台名称" prop="name">
+          <el-input v-model.trim="formData.name" placeholder="请输入平台名称" maxlength="50" show-word-limit />
+        </el-form-item>
+        <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">
+              {{ item.name }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="服务地址" prop="address" v-if="formData.type == 1">
+          <el-input v-model.trim="formData.address" placeholder="请输入服务地址URL" maxlength="300" show-word-limit />
+        </el-form-item>
+        <el-form-item label="APISERVER" prop="apiserver" v-else>
+          <el-input
+            v-model.trim="formData.apiserver"
+            placeholder="请输入APISERVER参数"
+            maxlength="300"
+            show-word-limit />
+        </el-form-item>
+        <el-form-item label="TOKEN" prop="token_value">
+          <el-input v-model.trim="formData.token_value" placeholder="请输入TOKEN参数" maxlength="300" show-word-limit />
+        </el-form-item>
+        <el-form-item label="描述" prop="desc">
+          <el-input
+            v-model.trim="formData.desc"
+            placeholder="请输入描述"
+            maxlength="100"
+            show-word-limit
+            :rows="4"
+            type="textarea" />
+        </el-form-item>
+      </el-form>
+      <template v-slot:footer>
+        <div class="apaas_button">
+          <el-button
+            type="default"
+            @click="
+              () => {
+                addDialog = false;
+                dialogType = 0;
+              }
+            "
+            >取消</el-button
+          >
+          <el-button type="info" @click="testUrl">
+            <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>
+        </div>
+      </template>
+    </el-dialog>
+    <!-- 平台详情 -->
+    <el-dialog class="dialog_box" title="平台详情" v-model="detailDialog" width="600px">
+      <div>
+        <bg-info class="info_box" :data="platfromInfo" :col="1"></bg-info>
+      </div>
+    </el-dialog>
+    <!-- 删除弹窗 -->
+    <el-dialog class="dialog_box" title="提示" v-model="delDialog" width="400px">
+      <div>删除后，aPaaS平台将不再与该容器平台对接，确认删除吗？</div>
+      <template v-slot:footer>
+        <div class="apaas_button">
+          <el-button type="default" @click="delDialog = false">取 消</el-button>
+          <el-button type="primary" @click="deleteData">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { reactive, toRefs, ref, onBeforeMount, nextTick } from "vue";
+import axios from "../../../../request/http.js";
+import { ElMessage } from "element-plus";
+import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
+const Bgtable = ref(null);
+const bgForm = ref(null);
+const state = reactive({
+  filter: {
+    page: 1,
+    limit: 10,
+    search: "",
+  },
+  headers: [
+    {
+      label: "容器平台名称",
+      prop: "name",
+    },
+    {
+      label: "平台类型",
+      prop: "type_name",
+    },
+    {
+      label: "描述",
+      prop: "desc",
+      minWidth: 346,
+    },
+    {
+      label: "创建人",
+      prop: "created_by",
+    },
+    {
+      label: "创建时间",
+      prop: "created_time",
+      width: 276,
+    },
+    {
+      label: "操作",
+      prop: "action",
+      width: 130,
+      fixed: "right",
+    },
+  ],
+  tableRows: [],
+  tableTotal: 0,
+  actionRow: {},
+  delDialog: false,
+  dialogType: 1,
+  addDialog: false,
+  formData: {
+    name: "",
+    type: 1,
+    address: "",
+    apiserver: "",
+    token_value: "",
+    desc: "",
+  },
+  rules: {
+    name: [{ required: true, message: "平台名称不能为空", trigger: "blur" }],
+    type: [{ required: true, message: "请选择平台类型", trigger: "change" }],
+    address: [{ required: true, message: "服务地址URL不能为空", trigger: "blur" }],
+    apiserver: [{ required: true, message: "APISERVER参数不能为空", trigger: "blur" }],
+    token_value: [{ required: true, message: "TOKEN参数不能为空", trigger: "blur" }],
+    desc: [{ required: true, message: "描述不能为空", trigger: "blur" }],
+  },
+  typeList: [
+    {
+      name: "自有平台",
+      value: 1,
+    },
+    {
+      name: "第三方平台",
+      value: 2,
+    },
+  ],
+  detailDialog: false,
+  platfromInfo: [
+    {
+      name: "平台名称",
+      value: "",
+      nameWidth: 144,
+    },
+    {
+      name: "平台类型",
+      value: "",
+      nameWidth: 144,
+    },
+    {
+      name: "服务地址",
+      value: "",
+      nameWidth: 144,
+    },
+    {
+      name: "TOKEN",
+      value: "",
+      nameWidth: 144,
+    },
+    {
+      name: "描述",
+      value: "",
+      nameWidth: 144,
+    },
+  ],
+});
+const getRoleRows = () => {
+  let params = { ...state.filter };
+  console.log(params);
+  state.tableRows = [
+    {
+      id: 1,
+      name: "比格容器云平台",
+      type_name: "自有平台",
+      desc: "这是一个由比格大数据公司自主研发的一款云原生容器平台这是一个由比格大数据公司自主研发的一款云原生容器平台",
+      created_by: "王先生",
+      created_time: "2020-01-01 00:00:00",
+      address: "https://cloud1.wodcloud.com/",
+      token_value: "1234567bqsid123k12s0h1d3uhf493fh02hd3h38ff",
+    },
+    {
+      id: 2,
+      name: "阿里云平台",
+      type_name: "第三方平台",
+      desc: "阿里云平台",
+      created_by: "王先生",
+      created_time: "2020-01-01 00:00:00",
+      address: "https://cloud2.wodcloud.com/",
+      token_value: "abcdefgbqsis0h1d3uhf493fh02hdd102h9s3h38ff",
+    },
+    {
+      id: 3,
+      name: "腾讯云平台",
+      type_name: "第三方平台",
+      desc: "这是腾讯云平台啊",
+      created_by: "王先生",
+      created_time: "2020-01-01 00:00:00",
+      address: "https://cloud3.wodcloud.com/",
+      token_value: "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);
+  //   }
+  // });
+}; // 获取角色列表
+
+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 = {
+    name: "",
+    type: 1,
+    address: "",
+    apiserver: "",
+    token_value: "",
+    desc: "",
+  };
+  if (bgForm.value) {
+    nextTick(() => {
+      bgForm.value.validate((valid) => {
+        if (!valid) {
+          bgForm.value.clearValidate();
+        }
+      });
+    });
+  }
+};
+const viewDetail = (row) => {
+  state.platfromInfo[0].value = row.name
+  state.platfromInfo[1].value = row.type_name
+  state.platfromInfo[2].value = row.address
+  state.platfromInfo[3].value = row.token_value
+  state.platfromInfo[4].value = row.desc
+  state.detailDialog = true;
+  console.log(row, "查看详情");
+}; // 查看详情
+
+const edit_row = (row) => {
+  resetForm();
+  state.dialogType = 2;
+  state.addDialog = true;
+}; // 编辑
+
+const testUrl = () => {};
+const postData = () => {};
+
+const delete_row = (row) => {
+  state.actionRow = row;
+  state.delDialog = true;
+}; // 删除
+
+const deleteData = () => {
+  console.log(state.actionRow);
+  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);
+  //   }
+  // });
+};
+onBeforeMount(() => {
+  getRoleRows();
+});
+
+const {
+  filter,
+  headers,
+  tableRows,
+  tableTotal,
+  delDialog,
+  dialogType,
+  addDialog,
+  formData,
+  rules,
+  typeList,
+  detailDialog,
+  platfromInfo,
+} = toRefs(state);
+</script>
+
+<style lang="scss" scoped>
+.detail_container {
+  width: 100%;
+  padding: 0 24px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  .main_container {
+    flex-grow: 1;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    background-color: #fff;
+    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
+    border-radius: 6px;
+    margin: 0 0 16px;
+    position: relative;
+    height: calc(100% - 62px);
+    .table_container {
+      height: calc(100% - 70px);
+      padding: 0 16px;
+      .table {
+        max-height: calc(100% - 64px);
+      }
+    }
+  }
+}
+</style>
+<style>
+.dialog-box .el-dialog__body {
+  padding: 0 24px;
+}
+.bg-info {
+  text-align: left;
+}
+</style>