4l_capital_central_control_webapp/src/views/server/manage/index.vue

<template>
  <lay-card class="custom-card">
    <template v-slot:title>
      <span class="card-title">服务器管理</span>
    </template>
    <template v-slot:extra>
      <lay-button class="card-button" v-if="apiList?.includes('/serverAuth/getPage')" @click="handlePem()">PEM管理</lay-button>
      <lay-button class="card-button" v-if="apiList?.includes('/userServer/execute')" @click="handleCommand()">批量执行指令</lay-button>
      <lay-button class="card-button" v-if="apiList?.includes('/userServer/save')" @click="handleBatch()">批量添加服务器</lay-button>
      <lay-button class="card-button" v-if="apiList?.includes('/userServer/save')" @click="handleUpdate(0)">添加服务器</lay-button>
    </template>

    <template v-slot:body>
      <div class="custom-form-layout">
        <lay-form class="form-wp" :model="pageParams" mode="inline" size="sm">
          <lay-form-item label="名称" prop="title">
            <lay-input v-model="pageParams.title" />
          </lay-form-item>
          <lay-form-item label="IP" prop="ip">
            <lay-input v-model="pageParams.ip" />
          </lay-form-item>
          <div class="form-button-wp">
            <lay-button @click="getPageInfo(true)">搜索</lay-button>
          </div>
        </lay-form>
      </div>
      <div>
        <lay-table
          :page="tablePage"
          :columns="columns"
          resize
          id="userServerId"
          :data-source="dataSource"
          v-model:selected-keys="selectedKeys"
          :loading="pageConfig.loading"
          @change="handleCurrentChange"
        >
          <template v-slot:status="{ row }">
            {{ row.status ? "已配置" : "未配置" }}
          </template>
          <template v-slot:lastReportTime="{ row }">
            <span :class="{ 'danger-color': timeConverts(row.lastReportTime).indexOf('秒') == -1 }">{{ row.lastReportTime ? timeConverts(row.lastReportTime) : "未通讯" }}</span>
          </template>
          <template v-slot:operator="{ row }">
            <lay-space>
              <TableButton v-if="apiList?.includes('/userServer/testConnect')" text="测试连接" @click="handleTest(row)" />
              <TableButton v-if="apiList?.includes('/userServer/execute')" text="指令" @click="handleCommand(row)" />
              <TableButton v-if="apiList?.includes('/userServer/update')" text="编辑" @click="handleUpdate(1, row)" />
              <TableButton v-if="apiList?.includes('/userServer/save')" text="复制" @click="handleUpdate(2, row)" />
              <TableButton v-if="apiList?.includes('/userServer/delete')" type="danger" text="删除" @click="handleDelete(row)" />
            </lay-space>
          </template>
        </lay-table>
      </div>
    </template>
  </lay-card>
  <Update ref="updateRef" />
  <Batch ref="batchRef" />
  <Pem ref="pemRef" />
  <Command ref="commandRef" />
</template>

<script lang="ts" setup name="ServerManage">
import { ref, reactive, getCurrentInstance, onBeforeUnmount } from "vue";
import Pem from "./components/Pem.vue";
import Update from "./components/Update.vue";
import Batch from "./components/Batch.vue";
import Command from "./components/Command.vue";
import TableButton from "@/components/TableButton.vue";
import { timeConverts } from "@/utils/index";
import { get_server_list, delete_server, test_connect_server } from "@/api";

const { proxy }: any = getCurrentInstance();
const updateRef = ref();
const batchRef = ref();
const pemRef = ref();
const commandRef = ref();

const apiList = ref(window.sessionStorage.getItem("_4L_API_LIST"));

interface PageConfig {
  loading: boolean;
}

let pageConfig: PageConfig = reactive({
  loading: false,
});

interface FormItem {
  pageNum?: Number;
  pageSize?: Number;
  title?: String;
  ip?: String;
}
const pageParams: FormItem = reactive({ pageNum: 1, pageSize: 20 });

interface TablePage {
  current: number;
  limit: number;
  total: number;
}
const tablePage: TablePage = reactive({ current: 1, limit: 20, total: 0, limits: [20, 50, 100, 200, 500] });
const columns = ref([
  { title: "选项", width: "44px", type: "checkbox" },
  { title: "名称", key: "name" },
  { title: "IP", width: "120px", key: "ipAddrComplex" },
  { title: "端口号", width: "80px", key: "portComplex" },
  { title: "状态", width: "80px", key: "status", customSlot: "status" },
  { title: "通讯", width: "80px", key: "lastReportTime", customSlot: "lastReportTime" },
  { title: "更新时间", width: "160px", key: "updateTime" },
  { title: "备注", key: "remark", ellipsisTooltip: true },
  {
    title: "操作",
    customSlot: "operator",
    key: "operator",
    ignoreExport: true,
  },
]);
let dataSource = ref([]);
let selectedKeys = ref([]);

// 请求交易所列表
const getPageInfo = (isSearch?: boolean) => {
  if (isSearch) {
    pageParams.pageNum = 1;
    selectedKeys.value = [];
  }
  pageConfig.loading = true;
  get_server_list(pageParams, (data: any) => {
    pageConfig.loading = false;
    if (data.code == 200) {
      dataSource.value = data.data.list;
      tablePage.total = data.data.total;
    }
  });
};
getPageInfo();

const refreshInterval = setInterval(() => {
  get_server_list(pageParams, (data: any) => {
    if (data.code == 200) {
      dataSource.value = data.data.list;
      tablePage.total = data.data.total;
    }
  });
}, 2000);

const handlePem = async () => {
  const result = await pemRef.value.show();
  if (result) getPageInfo();
};

const handleBatch = async () => {
  const result = await batchRef.value.show();
  if (result) getPageInfo();
};

const handleUpdate = async (type: number, value?: any) => {
  const result = await updateRef.value.show(type, value);
  if (result) getPageInfo();
};

const handleCommand = async (value?: any) => {
  let userServerId;
  if (value) {
    userServerId = [value.userServerId];
  } else {
    userServerId = selectedKeys.value;
  }
  if (userServerId.length <= 0) return proxy.$message(`请先选择要执行命令服务器！`, 7);
  await commandRef.value.show(userServerId);
};

// 测试连接
const handleTest = async (value: any) => {
  let params = { ...value };
  pageConfig.loading = true;
  test_connect_server(params, (data: any) => {
    pageConfig.loading = false;
    if (data.code == 200) {
      data.data ? proxy.$message(`连接成功！`) : proxy.$message(`连接失败！`, 2);
    }
  });
};

// 删除交易所
const handleDelete = async (value: any) => {
  let result = await proxy.$waitingConfirm("是否确认删除该服务器？");
  if (!result) return;
  let params = [value.userServerId];
  pageConfig.loading = true;
  delete_server(params, (data: any) => {
    pageConfig.loading = false;
    if (data.code == 200) {
      proxy.$message(`删除成功！`);
      getPageInfo();
    }
  });
};
// 分页设置
const handleCurrentChange = (val: any) => {
  pageParams.pageNum = val.current;
  pageParams.pageSize = val.limit;
  getPageInfo();
};
onBeforeUnmount(() => {
  clearInterval(refreshInterval);
});
</script>

<style lang="scss" scoped>
.primary-color {
  color: var(--primary-color);
}
.normal-color {
  color: var(--normal-color);
}
.danger-color {
  color: var(--danger-color);
}
</style>