feat: 工具>主机终端操作服务器命令支持redis

src/views/tool/terminal/components/hostList.vue

@@ -0,0 +1,358 @@
+<script setup lang="ts">
+import { reactive, onMounted, toRaw, defineAsyncComponent } from 'vue';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import { Modal, message } from 'ant-design-vue/es';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { delNeHost, listNeHost } from '@/api/ne/neHost';
+import useDictStore from '@/store/modules/dict';
+import useI18n from '@/hooks/useI18n';
+const { getDict } = useDictStore();
+const { t } = useI18n();
+const EditModal = defineAsyncComponent(
+  () => import('@/views/ne/neHost/components/EditModal.vue')
+);
+const emit = defineEmits(['modal','link']);
+
+/**字典数据 */
+let dict: {
+  /**主机类型 */
+  neHostType: DictType[];
+  /**分组 */
+  neHostGroupId: DictType[];
+  /**认证模式 */
+  neHostAuthMode: DictType[];
+} = reactive({
+  neHostType: [],
+  neHostGroupId: [],
+  neHostAuthMode: [],
+});
+
+/**查询参数 */
+let queryParams = reactive({
+  /**主机类型 */
+  hostType: undefined,
+  /**分组 */
+  groupId: undefined,
+  /**名称 */
+  title: '',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 10,
+  sortField: 'createTime',
+  sortOrder: 'desc',
+});
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**记录数据 */
+  data: object[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'small',
+  data: [],
+});
+
+/**表格字段列 */
+let tableColumns: ColumnsType = [
+  {
+    title: t('common.rowId'),
+    dataIndex: 'hostId',
+    align: 'center',
+    width: 50,
+  },
+  {
+    title: t('views.ne.neHost.hostType'),
+    dataIndex: 'hostType',
+    key: 'hostType',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.ne.neHost.groupId'),
+    dataIndex: 'groupId',
+    key: 'groupId',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.ne.neHost.title'),
+    dataIndex: 'title',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.ne.neHost.addr'),
+    dataIndex: 'addr',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.ne.neHost.port'),
+    dataIndex: 'port',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('common.operate'),
+    key: 'hostId',
+    align: 'left',
+  },
+];
+
+/**表格分页器参数 */
+let tablePagination = reactive({
+  /**当前页数 */
+  current: 1,
+  /**每页条数 */
+  pageSize: 10,
+  /**默认的每页条数 */
+  defaultPageSize: 10,
+  /**指定每页可以显示多少条 */
+  pageSizeOptions: ['10', '20', '50', '100'],
+  /**只有一页时是否隐藏分页器 */
+  hideOnSinglePage: false,
+  /**是否可以快速跳转至某页 */
+  showQuickJumper: true,
+  /**是否可以改变 pageSize */
+  showSizeChanger: true,
+  /**数据总数 */
+  total: 0,
+  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**查询信息列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  listNeHost(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      tablePagination.total = res.total;
+      tableState.data = res.rows;
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
+        tableState.loading = false;
+        fnGetList(queryParams.pageNum - 1);
+      }
+    }
+    tableState.loading = false;
+  });
+}
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**新增框或修改框是否显示 */
+  openByEdit: boolean;
+  /**记录ID */
+  hostId: string;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  openByEdit: false,
+  hostId: '',
+  confirmLoading: false,
+});
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @param roleId 角色编号ID, 不传为新增
+ */
+function fnModalVisibleByEdit(roleId?: string) {
+  emit('modal');
+  if (!roleId) {
+    modalState.hostId = '';
+  } else {
+    modalState.hostId = roleId;
+  }
+  modalState.openByEdit = true;
+}
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  // 获取列表数据
+  fnGetList();
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.openByEdit = false;
+  modalState.hostId = '';
+}
+
+/**
+ * 网元主机删除
+ * @param hostId 网元主机编号ID
+ */
+function fnRecordDelete(hostId: string) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.ne.neHost.delTip', { num: hostId }),
+    onOk() {
+      const hide = message.loading(t('common.loading'), 0);
+      delNeHost(hostId).then(res => {
+        hide();
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: t('common.operateOk'),
+            duration: 2,
+          });
+          fnGetList();
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            duration: 2,
+          });
+        }
+      });
+    },
+  });
+}
+
+/**
+ * 网元主机连接
+ * @param hostId 网元主机编号ID
+ */
+function fnRecordLink(host: Record<string, any>) {
+  emit('link', JSON.parse(JSON.stringify(host)));
+}
+
+onMounted(() => {
+  // 初始字典数据
+  Promise.allSettled([
+    getDict('ne_host_type'),
+    getDict('ne_host_groupId'),
+    getDict('ne_host_authMode'),
+  ]).then(resArr => {
+    if (resArr[0].status === 'fulfilled') {
+      dict.neHostType = resArr[0].value;
+    }
+    if (resArr[1].status === 'fulfilled') {
+      dict.neHostGroupId = resArr[1].value;
+    }
+    if (resArr[2].status === 'fulfilled') {
+      dict.neHostAuthMode = resArr[2].value;
+    }
+  });
+  // 获取列表数据
+  fnGetList();
+});
+</script>
+
+<template>
+  <a-card :bordered="false" :body-style="{ padding: '0px' }" size="small">
+    <!-- 插槽-卡片左侧侧 -->
+    <template #title>
+      <a-space :size="8" align="center">
+        <a-button
+          type="primary"
+          size="small"
+          @click.prevent="fnModalVisibleByEdit()"
+        >
+          <template #icon><PlusOutlined /></template>
+          {{ t('common.addText') }}
+        </a-button>
+        <a-button type="text" size="small" @click.prevent="fnGetList()">
+          <template #icon><ReloadOutlined /></template>
+          {{ t('common.reloadText') }}
+        </a-button>
+      </a-space>
+    </template>
+
+    <!-- 插槽-卡片右侧 -->
+    <template #extra> </template>
+
+    <!-- 表格列表 -->
+    <a-table
+      class="table"
+      row-key="hostId"
+      :columns="tableColumns"
+      :loading="tableState.loading"
+      :data-source="tableState.data"
+      :size="tableState.size"
+      :pagination="tablePagination"
+      :scroll="{ x: tableColumns.length * 120 }"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'groupId'">
+          <DictTag :options="dict.neHostGroupId" :value="record.groupId" />
+        </template>
+        <template v-if="column.key === 'hostType'">
+          <DictTag :options="dict.neHostType" :value="record.hostType" />
+        </template>
+        <template v-if="column.key === 'hostId'">
+          <a-space :size="8" align="center">
+            <a-tooltip>
+              <template #title> Link to host </template>
+              <a-button type="link" @click.prevent="fnRecordLink(record)">
+                <template #icon><CodeOutlined /></template>
+              </a-button>
+            </a-tooltip>
+            <a-tooltip>
+              <template #title>{{ t('common.editText') }}</template>
+              <a-button
+                type="link"
+                @click.prevent="fnModalVisibleByEdit(record.hostId)"
+              >
+                <template #icon><FormOutlined /></template>
+              </a-button>
+            </a-tooltip>
+            <a-tooltip v-if="record.groupId !== '1'">
+              <template #title>{{ t('common.deleteText') }}</template>
+              <a-button
+                type="link"
+                @click.prevent="fnRecordDelete(record.hostId)"
+              >
+                <template #icon><DeleteOutlined /></template>
+              </a-button>
+            </a-tooltip>
+          </a-space>
+        </template>
+      </template>
+    </a-table>
+
+    <!-- 新增框或修改框 -->
+    <EditModal
+      v-model:open="modalState.openByEdit"
+      :edit-id="modalState.hostId"
+      :ne-group="true"
+      @ok="fnModalOk"
+      @cancel="fnModalCancel"
+    ></EditModal>
+  </a-card>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>

src/views/tool/terminal/index.vue

@@ -1,16 +1,29 @@
 <script lang="ts" setup>
 import { PageContainer } from 'antdv-pro-layout';
 import { Modal } from 'ant-design-vue/es';
-import TerminalSSH from '@/components/TerminalSSH/index.vue';
-import TerminalTelnet from '@/components/TerminalTelnet/index.vue';
-import { reactive, toRaw } from 'vue';
+import { useFullscreen } from '@vueuse/core';
+import { defineAsyncComponent, reactive, ref, toRaw } from 'vue';
 import { parseDuration } from '@/utils/date-utils';
 import { listNeHost } from '@/api/ne/neHost';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { useRouter } from 'vue-router';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
-const router = useRouter();
+const TerminalSSH = defineAsyncComponent(
+  () => import('@/components/TerminalSSH/index.vue')
+);
+const TerminalTelnet = defineAsyncComponent(
+  () => import('@/components/TerminalTelnet/index.vue')
+);
+const TerminalRedis = defineAsyncComponent(
+  () => import('@/components/TerminalRedis/index.vue')
+);
+const HostList = defineAsyncComponent(
+  () => import('./components/hostList.vue')
+);
+
+// 全屏
+const terminalCard = ref<HTMLElement | null>(null);
+const { isFullscreen, toggle } = useFullscreen(terminalCard);
 
 /**主机对象信息状态类型 */
 type HostStateType = {
@@ -146,10 +159,6 @@ function fnTerminalClose(data: Record<string, any>) {
  * @param key 菜单key
  */
 function fnTabMenu(key: string | number) {
-  // 跳转主机创建
-  if (key === 'new') {
-    router.push({ name: 'NeHost_2135' });
-  }
   // 刷新当前
   if (key === 'reload') {
     const tabIndex = tabState.panes.findIndex(
@@ -206,6 +215,8 @@ function fnTabMenu(key: string | number) {
  * @param id 标签的key
  */
 function fnTabClose(id: string) {
+  if (isFullscreen.value) toggle();
+
   // 获取当前项下标
   const tabIndex = tabState.panes.findIndex(tab => tab.id === id);
   if (tabIndex === -1) return;
@@ -213,7 +224,7 @@ function fnTabClose(id: string) {
   Modal.confirm({
     title: t('common.tipTitle'),
     content: t('views.tool.terminal.closeTip', {
-      num: `${item.host.hostType} - ${item.host.title}`,
+      num: `${item.host.hostType.toUpperCase()} - ${item.host.title}`,
     }),
     onOk() {
       tabState.panes.splice(tabIndex, 1);
@@ -226,7 +237,12 @@ function fnTabClose(id: string) {
 
 <template>
   <PageContainer>
-    <a-card :bordered="false" size="small" :body-style="{ padding: '12px' }">
+    <a-card
+      :bordered="false"
+      size="small"
+      :body-style="{ padding: '12px' }"
+      ref="terminalCard"
+    >
       <a-tabs
         class="terminal-tabs"
         hide-add
@@ -241,7 +257,7 @@ function fnTabClose(id: string) {
         <a-tab-pane
           v-for="pane in tabState.panes"
           :key="pane.id"
-          :closable="tabState.panes.length > 1"
+          :closable="pane.id !== '0'"
         >
           <template #tab>
             <a-badge
@@ -273,84 +289,45 @@ function fnTabClose(id: string) {
             >
             </TerminalTelnet>
 
+            <!-- 非开始页的redis主机 -->
+            <TerminalRedis
+              v-if="pane.id !== '0' && pane.host.hostType === 'redis'"
+              :id="pane.id"
+              :hostId="pane.host.hostId"
+              @connect="fnTerminalConnect"
+              @close="fnTerminalClose"
+            >
+            </TerminalRedis>
+
             <!-- 开始页 -->
             <div v-if="pane.id === '0'">
-              <!-- 提示选择主机 -->
-              <a-result
-                :title="t('views.tool.terminal.hostSelectTitle')"
-                v-show="tabState.activeKey === '0' && !hostState.show"
-              >
-                <template #extra>
-                  <a-button
-                    key="hostState"
-                    type="primary"
-                    @click="fnSelectHost()"
-                  >
-                    {{ t('views.tool.terminal.hostSelectShow') }}
-                  </a-button>
-                </template>
-              </a-result>
-
               <!-- 主机列表 -->
-              <a-list
-                v-show="tabState.activeKey === '0' && hostState.show"
-                :header="t('views.tool.terminal.hostSelectHeader')"
-                :grid="{ gutter: 16, column: 4, lg: 4, md: 2, xs: 1 }"
-                :data-source="hostState.data"
-                row-key="hostId"
-              >
-                <!-- 插槽-加载更多 -->
-                <template #loadMore>
-                  <div style="text-align: center">
-                    <a-button
-                      @click="fnGetHostList()"
-                      :loading="hostState.loading"
-                    >
-                      {{
-                        t('views.tool.terminal.hostSelectMore', {
-                          num: hostState.total - hostState.data.length,
-                        })
-                      }}
-                    </a-button>
-                  </div>
-                </template>
-                <!-- 插槽-渲染项 -->
-                <template #renderItem="{ item }">
-                  <a-list-item>
-                    <a-card size="small" :title="item.title">
-                      <template #extra>
-                        <a-button
-                          type="primary"
-                          shape="round"
-                          size="small"
-                          @click="fnConnectHost(item)"
-                        >
-                          <template #icon><LinkOutlined /></template>
-                          {{ item.hostType.toUpperCase() }}
-                        </a-button>
-                      </template>
-                      <div>{{ `${item.addr}:${item.port}` }}</div>
-                    </a-card>
-                  </a-list-item>
-                </template>
-              </a-list>
+              <HostList
+                v-show="tabState.activeKey === '0'"
+                @modal="() => (isFullscreen ? toggle() : null)"
+                @link="fnConnectHost"
+              ></HostList>
             </div>
           </div>
         </a-tab-pane>
 
         <template #rightExtra>
           <a-space :size="8" align="center">
-            <a-tooltip placement="topRight" v-if="false">
+            <a-tooltip placement="topRight">
               <template #title>
-                {{ t('views.tool.terminal.new') }}
+                {{ t('loayouts.rightContent.fullscreen') }}
               </template>
               <a-button
                 type="default"
                 shape="circle"
                 size="small"
-                @click="fnTabMenu('new')"
+                style="color: inherit"
+                @click="toggle"
               >
-                <template #icon><PlusOutlined /></template>
+                <template #icon>
+                  <FullscreenExitOutlined v-if="isFullscreen" />
+                  <FullscreenOutlined v-else />
+                </template>
               </a-button>
             </a-tooltip>
             <!-- 非开始页的更多操作 -->