From b616229725b2dea3f75b04b45fcf8ff83102af56 Mon Sep 17 00:00:00 2001
From: Dong Xia <dev12301@linx-info.com>
Date: Wed, 30 Oct 2024 17:23:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E4=BB=B6=E7=9B=AE=E5=BD=95=E6=A0=91?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../list/node-layout/dictionaryTree/index.vue | 190 ++++++++++++++
 src/pages/node/list/node-layout/index.vue     | 235 +++++++++---------
 2 files changed, 312 insertions(+), 113 deletions(-)
 create mode 100644 src/pages/node/list/node-layout/dictionaryTree/index.vue

diff --git a/src/pages/node/list/node-layout/dictionaryTree/index.vue b/src/pages/node/list/node-layout/dictionaryTree/index.vue
new file mode 100644
index 0000000..345f91c
--- /dev/null
+++ b/src/pages/node/list/node-layout/dictionaryTree/index.vue
@@ -0,0 +1,190 @@
+<template>
+  <div ref="treeManage" class="treeManage">
+    <!-- 头部 -->
+    <div class="btn-box">
+      <span>
+        文件路径：
+      </span>
+      <a-input-search
+        v-model="path"
+        class="width-300 mr-10"
+        placeholder="请输入软件包名"
+        @search="searchFile"
+        @pressEnter="searchFile"
+      />
+      <a-button type="primary searchSetting" icon="rollback" :disabled="currentPath==='/'" @click="backPrevious">
+        返回上级
+      </a-button>
+      <a-button type="primary searchSetting" icon="home" :disabled="currentPath==='/'" @click="backHome">根目录</a-button>
+    </div>
+    <a-table
+      :data-source="fileData"
+      bordered
+      :columns="columns"
+      :pagination="pagination"
+      :row-key="(record, index) => index "
+      :scroll="{x: 900, y: tableHeight - 50}"
+      :loading="loading"
+      @change="change"
+    >
+      <a-tooltip slot="name" slot-scope="text,record" :title="text" placement="topLeft">
+        <span v-if="record?.type?.indexOf('text')!==-1"><a-icon type="file-text" /> {{ text }}</span>
+        <a v-else-if="record.type ==='directory'" @click="enterNext(record)"><a-icon type="folder" /> {{ text }}</a>
+        <span v-else><a-icon type="container" /> {{ text }}</span>
+
+      </a-tooltip>
+      <a-tooltip slot="type" slot-scope="text" :title="text" placement="topLeft">
+        <a-tag v-if="text?.indexOf('text')!==-1"><a-icon type="file-text" /> {{ text }}</a-tag>
+        <a-tag v-else-if="text ==='directory'"><a-icon type="folder" /> 目录</a-tag>
+        <a-tag v-else><a-icon type="container" /> {{ text }}</a-tag>
+      </a-tooltip>
+      <template slot="operation" slot-scope="text, record">
+        <a-button type="primary" class="ml10" @click="handllPkgModel(record)">所属软件包</a-button>
+      </template>
+    </a-table>
+
+  </div>
+</template>
+
+<script>
+import { lsFile, catFile } from '@/api/fs'
+export default {
+
+  props: {
+    node: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      // 目录树分页
+      listQuery: {
+        total: 0,
+        pageNum: 1,
+        pageSize: 10
+      },
+      // 文件详情分页
+      fileQuery: {
+        total: 0,
+        pageNum: 1,
+        pageSize: 10000
+      },
+      tableHeight: 0,
+      fileData: [],
+      path: '/',
+      // 确定搜索路径
+      currentPath: '/',
+      columns: [
+        { title: '文件名称', dataIndex: 'name', ellipsis: true, scopedSlots: { customRender: 'name' }},
+        { title: '文件类型', dataIndex: 'type', ellipsis: true, scopedSlots: { customRender: 'type' }},
+        { title: '操作', dataIndex: 'operation', ellipsis: true, width: 200, scopedSlots: { customRender: 'operation' }}
+      ],
+      loading: true,
+      isShowDetail: false,
+      // 文件详情
+      fileDetail: [],
+      // 选中文件
+      selectedFile: {},
+      pkgVisible: false,
+      fileName: ''
+    }
+  },
+  computed: {
+    pagination() {
+      return {
+        total: this.listQuery.total || 0,
+        current: this.listQuery.pageNum || 1,
+        pageSize: this.listQuery.pageSize || 10,
+        pageSizeOptions: ['10', '20', '50'],
+        showSizeChanger: true,
+        showTotal: (total) => {
+          return `共 ${total} 条`
+        }
+      }
+    },
+    filePagination() {
+      return {
+        total: this.fileQuery.total || 0,
+        current: this.fileQuery.pageNum || 1,
+        pageSize: this.fileQuery.pageSize || 100000
+      }
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.tableHeight = this.$refs?.treeManage.clientHeight - 140
+    })
+    this.lsFile()
+  },
+  methods: {
+    searchFile() {
+      this.lsFile()
+    },
+    lsFile() {
+      this.loading = true
+      if (this.path[0] !== '/') {
+        let tempDir = this.path.split('')
+        tempDir.unshift('/')
+        this.path = tempDir.join('')
+      }
+      lsFile({ nodeId: this.node.id,
+        path: this.path,
+        pageNum: this.listQuery.pageNum,
+        pageSize: this.listQuery.pageSize })
+        .then((res) => {
+          this.currentPath = this.path
+          if (res.code === 200) {
+            this.fileData = res.data.list
+            this.listQuery.total = Number(res.data.total)
+          } else {
+            this.backPrevious()
+          }
+        }).finally(() => {
+          this.loading = false
+        })
+    },
+    // 分页、排序、筛选变化时触发
+    change(pagination) {
+      this.listQuery.pageNum = pagination.current
+      this.listQuery.pageSize = pagination.pageSize
+      this.lsFile()
+    },
+    // 进入下一级
+    enterNext(record) {
+      this.path = record.name
+      this.listQuery.pageNum = 1
+      this.lsFile()
+    },
+    // 返回根目录
+    backHome() {
+      this.path = '/'
+      this.listQuery.pageNum = 1
+      this.lsFile()
+    },
+    // 返回上一级
+    backPrevious() {
+      let tempDir = this.currentPath.split('/')
+      this.listQuery.pageNum = 1
+      tempDir.pop()
+      this.path = tempDir.join('/')
+      this.lsFile()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.treeManage{
+  height:100%
+}
+.btn-box{
+  padding-bottom:10px;
+  border-bottom: 1px solid #377bc9;
+}
+.searchSetting{
+  margin-right: 10px;
+}
+</style>
diff --git a/src/pages/node/list/node-layout/index.vue b/src/pages/node/list/node-layout/index.vue
index e487e2b..49f8036 100644
--- a/src/pages/node/list/node-layout/index.vue
+++ b/src/pages/node/list/node-layout/index.vue
@@ -1,113 +1,122 @@
-<template>
-  <a-layout>
-    <a-layout-sider theme="light" class="sider jpom-node-sider">
-      <a-menu theme="light" mode="inline" :default-selected-keys="selectedKeys" :default-open-keys="defaultOpenKey">
-        <template v-for="menu in nodeMenuList">
-          <a-sub-menu v-if="Array.isArray(menu.childs)" :key="menu.pid" :class="menu.id">
-            <span slot="title">
-              <a-icon v-if="menu.icon_v3" :type="menu.icon_v3" />
-              <span>{{ menu.title }}</span>
-            </span>
-            <a-menu-item v-for="subMenu in menu.childs" :key="subMenu.id" :class="subMenu.id" @click="handleMenuClick(subMenu.id, subMenu.pId)">
-              <span>{{ subMenu.title }}</span>
-            </a-menu-item>
-          </a-sub-menu>
-          <a-menu-item v-else :key="menu.id" @click="handleMenuClick(menu.id)">
-            <a-icon v-if="menu.icon_v3" :type="menu.icon_v3" />
-            <span>{{ menu.title }}</span>
-          </a-menu-item>
-        </template>
-      </a-menu>
-    </a-layout-sider>
-    <a-layout-content class="layout-content jpom-node-content">
-      <welcome v-if="currentId === 'welcome'" :node="node" />
-      <package-list v-if="currentId === 'package'" :node="node" />
-      <source-list v-if="currentId === 'source'" :node="node" />
-    </a-layout-content>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { getNodeMenu } from '../../../api/menu'
-import Welcome from './welcome'
-import PackageList from './package/package-list.vue'
-import SourceList from './source/source_list.vue'
-export default {
-  components: {
-    Welcome,
-    PackageList
-    SourceList
-  },
-  props: {
-    node: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    }
-  },
-  data() {
-    return {
-      nodeMenuList: [],
-      selectedKeys: [this.$route.query.id || 'welcome']
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'getGuideFlag'
-    ]),
-    currentId() {
-      return this.selectedKeys[0]
-    },
-    defaultOpenKey() {
-      let keyList = []
-      if (this.getGuideFlag && !this.$route.query.pId) {
-        keyList = ['systemConfig']
-      } else if (this.$route.query.pId) {
-        keyList = [this.$route.query.pId]
-      }
-      return keyList
-    }
-  },
-  created() {
-    this.loadNodeMenu()
-  },
-  methods: {
-    loadNodeMenu() {
-      getNodeMenu(this.node.id).then(res => {
-        if (res.code === 200) {
-          const data = res.data.map(item => {
-            const childs = item.childs && item.childs.map(sub => {
-              return { ...sub, pId: item.id }
-            })
-            return { ...item, childs }
-          })
-          this.nodeMenuList = data
-        }
-      })
-    },
-    handleMenuClick(id, pId) {
-      this.selectedKeys = [id]
-      this.$router.push({
-        query: {
-          ...this.$route.query,
-          pId: pId,
-          id: id
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.sider {
-  height: calc(100vh - 75px);
-  overflow-y: auto;
-}
-.layout-content {
-  height: calc(100vh - 95px);
-  overflow-y: auto;
-  margin: 10px 10px 0 10px;
-}
-</style>
+<template>
+  <a-layout>
+    <!-- 节点管理侧边栏菜单 -->
+    <a-layout-sider theme="light" class="sider jpom-node-sider">
+      <a-menu theme="light" mode="inline" :default-selected-keys="selectedKeys" :default-open-keys="defaultOpenKey">
+        <template v-for="menu in nodeMenuList">
+          <a-sub-menu v-if="Array.isArray(menu.childs)" :key="menu.pid" :class="menu.id">
+            <span slot="title">
+              <a-icon v-if="menu.icon_v3" :type="menu.icon_v3" />
+              <span>{{ menu.title }}</span>
+            </span>
+            <a-menu-item v-for="subMenu in menu.childs" :key="subMenu.id" :class="subMenu.id" @click="handleMenuClick(subMenu.id, subMenu.pId)">
+              <span>{{ subMenu.title }}</span>
+            </a-menu-item>
+          </a-sub-menu>
+          <a-menu-item v-else :key="menu.id" @click="handleMenuClick(menu.id)">
+            <a-icon v-if="menu.icon_v3" :type="menu.icon_v3" />
+            <span>{{ menu.title }}</span>
+          </a-menu-item>
+        </template>
+      </a-menu>
+    </a-layout-sider>
+    <!-- 节点管理组件展示内容 -->
+    <a-layout-content class="layout-content jpom-node-content">
+      <components :is="nodeMenuMap[currentId]" :node="node" />
+      <!-- <welcome v-if="currentId === 'welcome'" :node="node" />
+      <package-list v-if="currentId === 'package'" :node="node" />
+      <source-list v-if="currentId === 'source'" :node="node" />
+      <DictionaryTree v-if="currentId === 'dictionaryTree'" :node="node" /> -->
+    </a-layout-content>
+  </a-layout>
+</template>
+
+<script>
+import { getNodeMenu } from '@/api/menu'
+import Welcome from './welcome'
+import PackageList from './package/package-list.vue'
+import SourceList from './source/source_list.vue'
+import DictionaryTree from './dictionaryTree'
+export default {
+  components: {
+    Welcome,
+    PackageList,
+    SourceList,
+    DictionaryTree
+  },
+  props: {
+    node: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      nodeMenuList: [],
+      nodeMenuMap: {
+        welcome: Welcome,
+        package: PackageList,
+        source: SourceList,
+        dictionaryTree: DictionaryTree
+      },
+      selectedKeys: [this.$route.query.id || 'welcome']
+    }
+  },
+  computed: {
+    currentId() {
+      return this.selectedKeys[0]
+    },
+    defaultOpenKey() {
+      let keyList = []
+      if (this.$route.query.pId) {
+        keyList = [this.$route.query.pId]
+      }
+      return keyList
+    }
+  },
+  created() {
+    this.loadNodeMenu()
+  },
+  methods: {
+    // 加载菜单
+    loadNodeMenu() {
+      getNodeMenu(this.node.id).then(res => {
+        if (res.code === 200) {
+          const data = res.data.map(item => {
+            const childs = item.childs && item.childs.map(sub => {
+              return { ...sub, pId: item.id }
+            })
+            return { ...item, childs }
+          })
+          this.nodeMenuList = data
+        }
+      })
+    },
+    // 点击菜单
+    handleMenuClick(id, pId) {
+      this.selectedKeys = [id]
+      this.$router.push({
+        query: {
+          ...this.$route.query,
+          pId: pId,
+          id: id
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.sider {
+  height: calc(100vh - 75px);
+  overflow-y: auto;
+}
+.layout-content {
+  height: calc(100vh - 95px);
+  overflow-y: auto;
+  margin: 10px 10px 0 10px;
+}
+</style>
-- 
Gitee