Skip to content

Commit

Permalink
perf: 分离文件管理模型
Browse files Browse the repository at this point in the history
  • Loading branch information
@rehiy
rehiy committed Nov 30, 2023
1 parent c806c2b commit 77ce7d2
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 79 deletions.
58 changes: 58 additions & 0 deletions src/apps/machine/fileman.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<script lang="ts">
import { Component, Vue } from "vue-facing-decorator"
import { NaApi } from "@/api"
import { MachineModels, MachineItem } from "@/api/native/machine"
import WorkerFileman from "@/cloud/worker/fileman.vue"
@Component({
components: { WorkerFileman }
})
export default class MachineFileman extends Vue {
public MachineModels = MachineModels
public loading = true
// 初始化
async created() {
const machineId = +this.$route.params.id
await this.getMachine(machineId)
}
// 获取主机
public machine!: MachineItem
async getMachine(id: number) {
const res = await NaApi.machine.detail(id)
this.machine = res.Item
this.loading = false
}
}
</script>

<template>
<t-space fixed direction="vertical">
<t-breadcrumb>
<t-breadcrumb-item to="/dashboard">
首页
</t-breadcrumb-item>
<t-breadcrumb-item to="/machine/list">
文件管理
</t-breadcrumb-item>
<t-breadcrumb-item v-if="machine">
{{ machine.HostName || machine.Id }} · {{ MachineModels[machine.Model] }}
</t-breadcrumb-item>
</t-breadcrumb>

<t-space v-if="loading" fixed align="center">
<t-loading />
</t-space>

<template v-if="machine">
<WorkerFileman :machine="machine" />
</template>
</t-space>
</template>
2 changes: 1 addition & 1 deletion src/apps/machine/list.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export default class MachineList extends Vue {
<t-link v-if="!workerList[row.WorkerId]" hover="color" disabled>
文件
</t-link>
<t-link v-else v-route="'/machine/filer/' + row.Id" theme="primary" hover="color">
<t-link v-else v-route="'/machine/fileman/' + row.Id" theme="primary" hover="color">
文件
</t-link>
<t-link theme="success" hover="color" @click="updateModal.open(row)">
Expand Down
6 changes: 3 additions & 3 deletions src/apps/routes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,13 +123,13 @@ export const routes: RouteRecordRaw[] = [
component: () => import("./machine/detail.vue"),
},
{
path: "/machine/filer/:id",
name: "machine-filer",
path: "/machine/fileman/:id",
name: "machine-fileman",
meta: {
title: "文件管理",
login: true,
},
component: () => import("./machine/filer.vue"),
component: () => import("./machine/fileman.vue"),
},
{
path: "/machine/vnc/:id",
Expand Down
128 changes: 53 additions & 75 deletions src/apps/machine/filer.vue → src/cloud/worker/fileman.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { Component, Vue } from "vue-facing-decorator"
import { Prop, Component, Vue } from "vue-facing-decorator"
import { UploadFile, RequestMethodResponse } from "tdesign-vue-next"
Expand All @@ -11,7 +11,7 @@ import { bytesToSize, dateFormat } from "@/helper/format"
import * as gobyte from "@/helper/gobyte"
@Component({})
export default class MachineFiler extends Vue {
export default class WorkerFileman extends Vue {
public MachineModels = MachineModels
public bytesToSize = bytesToSize
Expand All @@ -22,26 +22,18 @@ export default class MachineFiler extends Vue {
public path = '/'
public fileList: FileInfo[] = []
@Prop
public machine!: MachineItem
// 初始化
async created() {
const machineId = +this.$route.params.id
await this.getMachine(machineId)
if (this.machine.OSType == 'windows') {
this.path = 'C:'
}
await this.getFileList()
}
// 获取主机
public machine!: MachineItem
async getMachine(id: number) {
const res = await NaApi.machine.detail(id)
this.machine = res.Item
}
// 改变浏览路径
public setPath(path: string) {
Expand Down Expand Up @@ -133,70 +125,56 @@ export default class MachineFiler extends Vue {
</script>

<template>
<t-space fixed direction="vertical">
<t-breadcrumb>
<t-breadcrumb-item to="/dashboard">
首页
</t-breadcrumb-item>
<t-breadcrumb-item to="/machine/list">
文件管理
</t-breadcrumb-item>
<t-breadcrumb-item v-if="machine">
{{ machine.HostName || machine.Id }} · {{ MachineModels[machine.Model] }}
</t-breadcrumb-item>
</t-breadcrumb>

<t-card :loading="loading" title="文件管理" hover-shadow header-bordered>
<template #subtitle>
文件总数: {{ fileList.length }}
</template>
<template #actions>
<t-space>
<t-upload theme="custom" :request-method="uploadFile" />
<t-button theme="primary" @click="getFileList()">
<template #icon>
<t-icon name="load" />
</template>
刷新
</t-button>
</t-space>
</template>
<t-space fixed direction="vertical">
<t-breadcrumb>
<t-breadcrumb-item v-if="machine?.OSType != 'windows'" @click="setPath('/')">
<small>/</small>
</t-breadcrumb-item>
<t-breadcrumb-item v-for="v, k in getPathCrumb()" :key="k" @click="setPath(v.path)">
{{ v.name }}
</t-breadcrumb-item>
</t-breadcrumb>
<t-table :data="fileList" :columns="tableColumns" row-key="Id" hover>
<template #Name="{ row }">
{{ row.Name }}{{ row.IsDir ? '/' : '' }}
<t-card :loading="loading" title="文件管理" hover-shadow header-bordered>
<template #subtitle>
文件总数: {{ fileList.length }}
</template>
<template #actions>
<t-space>
<t-upload theme="custom" :request-method="uploadFile" />
<t-button theme="primary" @click="getFileList()">
<template #icon>
<t-icon name="load" />
</template>
<template #Size="{ row }">
{{ row.IsDir ? '-' : bytesToSize(row.Size) }}
</template>
<template #ModTime="{ row }">
{{ dateFormat(row.ModTime * 1000, "yyyy-MM-dd hh:mm:ss") }}
</template>
<template #Operation="{ row }">
<t-link v-if="row.IsDir" theme="primary" hover="color" @click="setPath(path + '/' + row.Name)">
浏览
</t-link>
<t-link v-else theme="success" hover="color" @click="getFileData(row.Name)">
下载
</t-link>
<t-popconfirm content="确定删除?" @confirm="deleteFile(row.Name)">
<t-link theme="danger" hover="color">
删除
</t-link>
</t-popconfirm>
</template>
</t-table>
刷新
</t-button>
</t-space>
</t-card>
</t-space>
</template>
<t-space fixed direction="vertical">
<t-breadcrumb>
<t-breadcrumb-item v-if="machine?.OSType != 'windows'" @click="setPath('/')">
<small>/</small>
</t-breadcrumb-item>
<t-breadcrumb-item v-for="v, k in getPathCrumb()" :key="k" @click="setPath(v.path)">
{{ v.name }}
</t-breadcrumb-item>
</t-breadcrumb>
<t-table :data="fileList" :columns="tableColumns" row-key="Id" hover>
<template #Name="{ row }">
{{ row.Name }}{{ row.IsDir ? '/' : '' }}
</template>
<template #Size="{ row }">
{{ row.IsDir ? '-' : bytesToSize(row.Size) }}
</template>
<template #ModTime="{ row }">
{{ dateFormat(row.ModTime * 1000, "yyyy-MM-dd hh:mm:ss") }}
</template>
<template #Operation="{ row }">
<t-link v-if="row.IsDir" theme="primary" hover="color" @click="setPath(path + '/' + row.Name)">
浏览
</t-link>
<t-link v-else theme="success" hover="color" @click="getFileData(row.Name)">
下载
</t-link>
<t-popconfirm content="确定删除?" @confirm="deleteFile(row.Name)">
<t-link theme="danger" hover="color">
删除
</t-link>
</t-popconfirm>
</template>
</t-table>
</t-space>
</t-card>
</template>

<style lang="scss" scoped>
Expand Down

0 comments on commit 77ce7d2

Please sign in to comment.