改造字典管理的headers的处理逻辑, 完善端口管理字典

src/bg-ui/bg-table.vue

@@ -24,11 +24,11 @@
       <!-- 序号 -->
     </el-table-column>
     <el-table-column
-      v-for="(header, index) in headers"
+      v-for="(header) in headers"
       :width="header.width"
       :min-width="header.minWidth"
       :align="header.align"
-      :key="'col_' + index"
+      :key="'col_' + header.prop"
       :fixed="header.fixed"
       show-overflow-tooltip>
       <template v-slot:header>

src/page/main/config/dict/index.vue

@@ -25,15 +25,22 @@
       </div>
       <div class="flex_right">
         <div class="main_container">
-          <bg-filter-group @search="changeSearch" v-model="filter.search" placeholder="请输入关键字">
-            <template v-slot:left_action v-if="nodeClassifyId != '263758a4-0349-4d49-a816-e8ff8d33a8bb'">
+          <bg-filter-group
+            @search="changeSearch"
+            v-model="filter.search"
+            placeholder="请输入关键字">
+            <template
+              v-slot:left_action
+              v-if="nodeClassifyId != '263758a4-0349-4d49-a816-e8ff8d33a8bb'">
               <div class="apaas_button">
                 <el-button type="primary" @click="backDict" v-if="dictLevel != 1">
                   <!-- <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon> -->
                   返回上级
                 </el-button>
                 <el-button type="primary" @click="register">
-                  <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon>
+                  <bg-icon
+                    style="font-size: 12px; color: #fff; margin-right: 8px"
+                    icon="#bg-ic-add"></bg-icon>
                   新增
                 </el-button>
               </div>
@@ -60,9 +67,14 @@
           </bg-filter-group>
           <div class="table_container">
             <div class="table bg-scroll">
-              <bg-table ref="bgTable" :headers="isLang && dictLevel == 1 ? langHeaders : headers" :rows="tableRows" :isIndex="true" :stripe="true">
+              <bg-table
+                ref="bgTable"
+                :headers="headers"
+                :rows="tableRows"
+                :isIndex="true"
+                :stripe="true">
                 <template v-slot:name="{ row }">
-                  <span class="can_click_text" @click="getChildren(row)" v-if="isLang && dictLevel == 1">
+                  <span class="can_click_text" @click="getChildren(row)" v-if="row.children">
                     {{ row.name }}
                   </span>
                   <span v-else>
@@ -81,17 +93,33 @@
                 </template>
                 <template v-slot:action="{ row }">
                   <!-- 除技术类型之外的字典可以删除 -->
-                  <bg-table-btns2 :limit="3" v-if="nodeClassifyId !== '263758a4-0349-4d49-a816-e8ff8d33a8bb'">
-                    <bg-table-btn @click="edit_row(row)" :disabled="row.state == 1">编辑</bg-table-btn>
-                    <bg-table-btn @click="delete_row(row)" :disabled="row.state == 1">删除</bg-table-btn>
-                    <bg-table-btn @click="moveRow(row, 1)" :disabled="!row.canMoveUp">上移</bg-table-btn>
-                    <bg-table-btn @click="moveRow(row, 2)" :disabled="!row.canMoveDown">下移</bg-table-btn>
+                  <bg-table-btns2
+                    :limit="3"
+                    v-if="nodeClassifyId !== '263758a4-0349-4d49-a816-e8ff8d33a8bb'">
+                    <bg-table-btn @click="edit_row(row)" :disabled="row.state == 1"
+                      >编辑</bg-table-btn
+                    >
+                    <bg-table-btn @click="delete_row(row)" :disabled="row.state == 1"
+                      >删除</bg-table-btn
+                    >
+                    <bg-table-btn @click="moveRow(row, 1)" :disabled="!row.canMoveUp"
+                      >上移</bg-table-btn
+                    >
+                    <bg-table-btn @click="moveRow(row, 2)" :disabled="!row.canMoveDown"
+                      >下移</bg-table-btn
+                    >
                   </bg-table-btns2>
                   <!-- 技术类型字典不可删除 -->
                   <bg-table-btns2 :limit="3" v-else>
-                    <bg-table-btn @click="edit_row(row)" :disabled="row.state == 1">编辑</bg-table-btn>
-                    <bg-table-btn @click="moveRow(row, 1)" :disabled="!row.canMoveUp">上移</bg-table-btn>
-                    <bg-table-btn @click="moveRow(row, 2)" :disabled="!row.canMoveDown">下移</bg-table-btn>
+                    <bg-table-btn @click="edit_row(row)" :disabled="row.state == 1"
+                      >编辑</bg-table-btn
+                    >
+                    <bg-table-btn @click="moveRow(row, 1)" :disabled="!row.canMoveUp"
+                      >上移</bg-table-btn
+                    >
+                    <bg-table-btn @click="moveRow(row, 2)" :disabled="!row.canMoveDown"
+                      >下移</bg-table-btn
+                    >
                   </bg-table-btns2>
                 </template>
               </bg-table>
@@ -108,7 +136,11 @@
       </div>
     </div>
     <!-- 新增/编辑弹窗 -->
-    <el-dialog class="dialog_box" :title="addType == 1 ? '新增' : '编辑'" v-model="addDialog" width="758px">
+    <el-dialog
+      class="dialog_box"
+      :title="addType == 1 ? '新增' : '编辑'"
+      v-model="addDialog"
+      width="758px">
       <el-form ref="bgForm" :model="formData" :rules="rules" label-width="80px" class="bg_form">
         <el-form-item label="名称" prop="name">
           <el-input
@@ -176,21 +208,15 @@
 </template>
 
 <script setup>
-import { reactive, ref, onBeforeMount, toRefs, computed, watch, nextTick } from "vue";
-import { useRouter } from "vue-router";
+import { reactive, ref, onBeforeMount, toRefs, computed, watch, nextTick, watchEffect } from "vue";
 import { ElMessage } from "element-plus";
 import axios from "../../../../request/http.js";
 import { Search } from "@element-plus/icons-vue";
 import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
 const bgForm = ref(null);
-const state = reactive({
-  bgForm,
-  typeList: [], // 分类数据
-  typeKeyword: "", // 分类删选关键词
-  nodeClassifyId: null, // 当前选中分类的uuid  用于新增字典
-  nodeId: null, // 当前选中分类的id  用于请求列表
-  timer: null, // 定时器
-  headers: [
+
+const headers = computed(() => {
+  let _headers = [
     {
       label: "名称",
       prop: "name",
@@ -215,37 +241,29 @@ const state = reactive({
       width: 176,
       fixed: "right",
     },
-  ], // 表格数据表头
-  langHeaders: [
-    {
-      label: "名称",
-      prop: "name",
-    },
-    {
+  ];
+
+  if (state.nodeClassifyId === "59315100-5c2a-4381-83fe-32934605f0a9") {
+    _headers.splice(1, 0, {
       label: "版本数",
       prop: "total_children",
-    },
-    {
-      label: "描述",
-      prop: "describe",
-      minWidth: 360,
-    },
-    {
-      label: "更新时间",
-      prop: "updated_time",
-      width: 220,
-    },
-    {
-      label: "是否启用",
-      prop: "state",
-    },
-    {
-      label: "操作",
-      prop: "action",
-      width: 176,
-      fixed: "right",
-    },
-  ],
+    });
+  }
+  if (state.nodeClassifyId === "b3a083ee-a8c1-8ca4-f9a1-ea01692a0f1a") {
+    _headers.splice(1, 0, {
+      label: "服务名称",
+      prop: "service_name",
+    });
+  }
+  return _headers;
+});
+const state = reactive({
+  bgForm,
+  typeList: [], // 分类数据
+  typeKeyword: "", // 分类删选关键词
+  nodeClassifyId: null, // 当前选中分类的uuid  用于新增字典
+  nodeId: null, // 当前选中分类的id  用于请求列表
+  timer: null, // 定时器
   tableRows: [], // 表格数据
   tableTotal: 0, // 表格数据条数
   filter: {
@@ -289,27 +307,23 @@ const state = reactive({
   fatherRow: null,
 });
 
-const isLang = computed(() => {
-  return state.nodeClassifyId == "59315100-5c2a-4381-83fe-32934605f0a9"
-})
-
-const dictLevel = ref(1)
+const dictLevel = ref(1);
 
 const getChildren = (row) => {
-  dictLevel.value = 2
-  state.tableRows = row.children || []
-  state.tableTotal = row.total_children
-  state.fatherRow = row
-}
+  dictLevel.value = 2;
+  state.tableRows = row.children || [];
+  state.tableTotal = row.total_children;
+  state.fatherRow = row;
+};
 const backDict = () => {
-  dictLevel.value = 1
-  state.fatherRow = null
+  dictLevel.value = 1;
+  state.fatherRow = null;
   changePage(1);
-}
+};
 const nodeClick = (item) => {
   state.nodeId = item.id;
-  dictLevel.value = 1
-  state.fatherRow = null
+  dictLevel.value = 1;
+  state.fatherRow = null;
   state.nodeClassifyId = item.classify_id;
   state.filter = {
     state: "",
@@ -380,14 +394,16 @@ const getTableRows = () => {
     })
     .then((res) => {
       if (res.data.code == 200) {
-        let data = res.data.data || []
+        let data = res.data.data || [];
         if (dictLevel.value == 1) {
           state.tableRows = data;
           state.tableTotal = res.data.total;
-        }else {
-          let row = data.filter(e => {return e.dict_id == state.fatherRow.dict_id})
-          state.tableRows = row[0].children
-          state.tableTotal = row[0].total_children
+        } else {
+          let row = data.filter((e) => {
+            return e.dict_id == state.fatherRow.dict_id;
+          });
+          state.tableRows = row[0].children;
+          state.tableTotal = row[0].total_children;
         }
         if (state.tableRows.length > 0) {
           state.tableRows.forEach((e) => {
@@ -455,7 +471,7 @@ const edit_row = (row) => {
           name: state.actionRow.name,
           describe: state.actionRow.describe,
           state: state.actionRow.state,
-          p_dict_id: state.actionRow.p_dict_id
+          p_dict_id: state.actionRow.p_dict_id,
         };
       } else {
         ElMessage.error(res.data.data);
@@ -580,7 +596,6 @@ const {
   typeList,
   typeKeyword,
   nodeClassifyId,
-  headers,
   tableRows,
   tableTotal,
   filter,
@@ -590,7 +605,6 @@ const {
   addDialog,
   formData,
   rules,
-  langHeaders,
 } = toRefs(state);
 </script>