feat: 增加数据中心的标签管理页面，及对用的按钮列表权限，及接口管理中新增对应接口

src/api/datahub/index.ts

@@ -112,4 +112,11 @@ export default {
       deploy: (data: object) => put('/compute/publish', data),
       checkDeploy: (params: object) => get('/compute/checkComputeIndexDeploy', params)
    },
+   tags: {
+      getTree: (data: object) => get('/tag/tree', data),
+      add: (data: object) => post('/tag/add', data),
+      edit: (data: object) => put('/tag/edit', data),
+      detail: (id: number) => get('/tag/detail', { id }),
+      del: (id: number) => del('/tag/del', { id }),
+   }
 }

src/i18n/lang/en.ts

@@ -277,6 +277,7 @@ export default {
 			indexManagement: "Index Management",
 			dataModeling: "Data Modeling",
 			dataSourceManagement: "Data Source Management",
+			tags: "Tags",
 		},
 		developmentTools: {
 			title: "Development Tools",

src/i18n/lang/zh-cn.ts

@@ -279,7 +279,7 @@ export default {
 			indexManagement: "指数管理",
 			dataModeling: "数据建模",
 			dataSourceManagement: "数据源管理",
-
+			tags: "标签管理"
 		},
 		developmentTools: {
 			title: "开发工具",

src/i18n/lang/zh-tw.ts

@@ -286,7 +286,7 @@ export default {
 			indexManagement: "指數管理",
 			dataModeling: "數據建模",
 			dataSourceManagement: "數據源管理",
-
+			tags: "標籤管理"
 		},
 		developmentTools: {
 			title: "開發工具",

src/theme/element.scss

@@ -215,7 +215,7 @@
 }
 .el-dialog__body {
 	max-height: calc(90vh - 111px) !important;
-	min-height: 50vh !important;
+	min-height: 200px !important;
 	overflow-y: auto;
 	overflow-x: hidden;
 }

src/views/system/api/index.vue

@@ -142,17 +142,50 @@ const onDel = (row: ApiRow) => {
 };
 
 // const autoAddList = [
-// 	{
-// 		menuIds: [240],
-// 		name: "插件测试",
-// 		types: 2,
-// 		apiTypes: "IOT",
-// 		address: "/api/v1/plugin/test",
-// 		method: "POST",
-// 		remark: "",
-// 		status: 1,
-// 		parentId: 708,
-// 	},
+//   {
+//     menuIds: [241],
+//     name: "标签新增",
+//     types: 2,
+//     apiTypes: "IOT",
+//     address: "/api/v1/tag/add",
+//     method: "POST",
+//     remark: "",
+//     status: 1,
+//     parentId: 748,
+//   },
+//   {
+//     menuIds: [241],
+//     name: "标签删除",
+//     types: 2,
+//     apiTypes: "IOT",
+//     address: "/api/v1/tag/del",
+//     method: "DELETE",
+//     remark: "",
+//     status: 1,
+//     parentId: 748,
+//   },
+//   {
+//     menuIds: [241],
+//     name: "标签修改",
+//     types: 2,
+//     apiTypes: "IOT",
+//     address: "/api/v1/tag/edit",
+//     method: "PUT",
+//     remark: "",
+//     status: 1,
+//     parentId: 748,
+//   },
+//   {
+//     menuIds: [241],
+//     name: "标签详情",
+//     types: 2,
+//     apiTypes: "IOT",
+//     address: "/api/v1/tag/detail",
+//     method: "GET",
+//     remark: "",
+//     status: 1,
+//     parentId: 748,
+//   },
 // ];
 
 // function autoAddApi() {

src/views/system/datahub/tags/component/edit.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="system-edit-dept-container">
+    <el-dialog :title="(formData.id ? '修改' : '添加') + '标签'" v-model="isShowDialog" width="600px">
+      <el-form ref="formRef" :model="formData" :rules="rules" v-if="isShowDialog" label-width="90px">
+        <div class="flex-row">
+          <el-form-item label="标签名称" prop="name" class="flex1">
+            <el-input v-model.trim="formData.name" show-word-limit placeholder="请输入标签名称" clearable></el-input>
+          </el-form-item>
+          <el-form-item label="英文标识" prop="code" class="flex1">
+            <el-input v-model.trim="formData.code" show-word-limit placeholder="请输入英文标识" clearable></el-input>
+          </el-form-item>
+        </div>
+        <div class="flex-row">
+          <el-form-item label="父级标签" prop="parentId" class="flex1">
+            <el-cascader :options="treeData" :props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name' }" placeholder="请选择组织" clearable class="w100" v-model="formData.parentId">
+              <template #default="{ node, data }">
+                <span>{{ data.name }}</span>
+                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+              </template>
+            </el-cascader>
+          </el-form-item>
+          <el-form-item label="标签颜色" prop="color" class="flex1">
+            <el-select v-model.trim="formData.color" placeholder="请选择标签颜色" clearable style="width: 100%">
+              <el-option v-for="item in colorList" :label="item.label" :key="item.value" :value="item.value">
+                <template #default>
+                  <div class="flex items-center">
+                    <div class="color" :style="{ backgroundColor: item.color }"></div>
+                    {{ item.label }}
+                  </div>
+                </template>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+        <el-form-item label="描述" prop="description">
+          <el-input v-model="formData.description" type="textarea" show-word-limit placeholder="请输入描述" clearable></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="closeDialog">取 消</el-button>
+          <el-button type="primary" @click="onSubmit">{{ formData.id ? "修 改" : "添 加" }}</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+import api from "/@/api/datahub";
+import { ElMessage } from "element-plus";
+
+const emit = defineEmits(["update"]);
+
+defineProps({
+  colorList: {
+    type: Array as () => { value: string; label: string; color: string }[],
+    default: () => [],
+  },
+});
+
+const baseForm = {
+  id: null,
+  parentId: -1, // 父级标签
+  name: "", // 标签名称
+  code: "", // 标签英文标识
+  color: "", // 标签颜色
+  description: "", // 标签描述
+};
+
+const isShowDialog = ref(false);
+const treeData = ref([]);
+const formRef = ref();
+const formData = reactive({ ...baseForm });
+const rules = {
+  name: [{ required: true, message: "标签名称不能为空", trigger: "blur" }],
+  code: [{ required: true, message: "标签英文标识不能为空", trigger: "blur" }],
+  color: [{ required: true, message: "标签颜色不能为空", trigger: "blur" }],
+  description: [{ required: true, message: "标签描述不能为空", trigger: "blur" }],
+};
+
+// 打开弹窗
+const openDialog = (row: any) => {
+  resetForm();
+
+  api.tags.getTree({}).then((res: any) => {
+    treeData.value = res?.data || [];
+  });
+
+  if (row) {
+    Object.assign(formData, { ...row });
+  } else {
+    Object.assign(formData, baseForm);
+  }
+  isShowDialog.value = true;
+};
+// 关闭弹窗
+const closeDialog = () => {
+  isShowDialog.value = false;
+};
+// 新增
+const onSubmit = () => {
+  formRef.value.validate((valid: boolean) => {
+    if (valid) {
+      const submitData = JSON.parse(JSON.stringify(formData));
+      if (!submitData.parentId) {
+        submitData.parentId = -1;
+      }
+
+      const theApi = formData.id ? api.tags.edit : api.tags.add;
+
+      theApi(submitData).then(() => {
+        ElMessage.success("添加成功");
+        closeDialog(); // 关闭弹窗
+        emit("update");
+      });
+    }
+  });
+};
+const resetForm = () => {
+  Object.assign(formData, baseForm);
+};
+
+defineExpose({ openDialog });
+</script>
+<style lang="scss" scoped>
+.color {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+</style>

src/views/system/datahub/tags/index.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="page">
+    <el-card shadow="never">
+      <el-form :model="param" inline ref="queryRef" @keyup.enter="getData">
+        <el-form-item label="" prop="name">
+          <el-input v-model="param.name" placeholder="搜索标签名称或英文标识" style="width: 250px" clearable />
+          <el-button type="primary" class="ml10" @click="getData">
+            <el-icon>
+              <ele-Search />
+            </el-icon>
+            查询
+          </el-button>
+          <el-button type="primary" class="ml10" @click="onOpenAddDept" v-auth="'add'">
+            <el-icon>
+              <ele-FolderAdd />
+            </el-icon>
+            新增标签
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <el-table :data="tableData" style="width: 100%" row-key="id" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="loading">
+        <el-table-column prop="name" v-col="'name'" label="标签名称" min-width="180" show-overflow-tooltip> </el-table-column>
+        <el-table-column prop="code" v-col="'code'" label="英文标识" align="center" width="120">
+          <template #default="scope">
+            <el-tag type="primary" size="small">{{ scope.row.code }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="color" v-col="'color'" label="颜色" align="center" width="120">
+          <template #default="scope">
+            <div class="flex" style="justify-content: center">
+              <div class="color" :style="{ backgroundColor: colorMap.get(scope.row.color)?.color }"></div>
+              {{ colorMap.get(scope.row.color)?.label }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="description" v-col="'description'" label="描述" align="center" show-overflow-tooltip min-width="180"></el-table-column>
+        <el-table-column prop="createdAt" v-col="'createdAt'" label="创建时间" align="center" width="180"></el-table-column>
+        <el-table-column le-column label="操作" align="center" width="140" v-col="'handle'">
+          <template #default="scope">
+            <template v-if="scope.row.name !== '硬件设施'">
+              <el-button size="small" text type="primary" @click="onOpenAddDept(scope.row)" v-auth="'add'">新增</el-button>
+              <el-button size="small" text type="warning" @click="onOpenEditDept(scope.row)" v-auth="'edit'">修改</el-button>
+              <el-button size="small" text type="info" @click="onTabelRowDel(scope.row)" v-auth="'del'">删除</el-button>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <EditDept ref="editDeptRef" :colorList="colorList" @update="getData" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import EditDept from "./component/edit.vue";
+import api from "/@/api/datahub";
+
+const colorList = ref([
+  { value: "red", label: "红色", color: "#FF0000" },
+  { value: "green", label: "绿色", color: "#00FF00" },
+  { value: "blue", label: "蓝色", color: "#0000FF" },
+  { value: "yellow", label: "黄色", color: "#E8A92A" },
+  { value: "purple", label: "紫色", color: "#9A4FF0" },
+  { value: "pink", label: "粉色", color: "#E7408C" },
+  { value: "indigo", label: "靛蓝", color: "#525EE9" },
+  { value: "gray", label: "灰色", color: "#606774" },
+  { value: "orange", label: "橙色", color: "#F86724" },
+  { value: "cyan", label: "青色", color: "#00C853" },
+]);
+
+const colorMap = new Map();
+colorList.value.forEach((item) => {
+  colorMap.set(item.value, item);
+});
+
+const editDeptRef = ref();
+const tableData = ref([]);
+const loading = ref(false);
+const param = reactive({
+  name: "",
+});
+
+const getData = () => {
+  loading.value = true;
+  api.tags
+    .getTree(param)
+    .then((res: any) => {
+      tableData.value = res?.data || [];
+    })
+    .finally(() => (loading.value = false));
+};
+
+// 打开新增菜单弹窗
+const onOpenAddDept = (row?: any) => {
+  editDeptRef.value.openDialog(row?.deptId);
+};
+// 打开编辑菜单弹窗
+const onOpenEditDept = (row: any) => {
+  editDeptRef.value.openDialog(row);
+};
+// 删除当前行
+const onTabelRowDel = (row: any) => {
+  ElMessageBox.confirm(`此操作将永久删除组织：${row.deptName}, 是否继续?`, "提示", {
+    confirmButtonText: "删除",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => {
+    api.tags.del(row.id).then(() => {
+      ElMessage.success("删除成功");
+      getData();
+    });
+  });
+};
+// 页面加载时
+onMounted(() => {
+  getData();
+});
+</script>
+<style lang="scss" scoped>
+.color {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+</style>