|
@@ -1,4 +1,5 @@
|
|
|
<template>
|
|
<template>
|
|
|
|
|
+ <!-- 查看文件详情对话框 -->
|
|
|
<a-modal
|
|
<a-modal
|
|
|
class="file-info-dialog"
|
|
class="file-info-dialog"
|
|
|
title="文件详情"
|
|
title="文件详情"
|
|
@@ -11,54 +12,49 @@
|
|
|
<a-form
|
|
<a-form
|
|
|
class="file-info-form"
|
|
class="file-info-form"
|
|
|
:model="fileInfo"
|
|
:model="fileInfo"
|
|
|
- ref="fileInfoFormRef"
|
|
|
|
|
- layout="horizontal"
|
|
|
|
|
- :label-col="{ span: 6 }"
|
|
|
|
|
- :wrapper-col="{ span: 18 }"
|
|
|
|
|
|
|
+ ref="fileInfoForm"
|
|
|
|
|
+ label-align="right"
|
|
|
|
|
+ :label-col="{ style: { width: '82px' } }"
|
|
|
|
|
+ size="small"
|
|
|
>
|
|
>
|
|
|
- <a-form-item label="文件名" name="fileName">
|
|
|
|
|
- <a-input :value="$file.getFileNameComplete(fileInfo)" readonly />
|
|
|
|
|
|
|
+ <a-form-item label="文件名:" name="fileName">
|
|
|
|
|
+ <a-input :value="$file.getFileNameComplete(fileInfo)" readonly :bordered="false"></a-input>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
-
|
|
|
|
|
- <a-form-item :label="fileType === 6 ? '原路径' : '路径'" name="filePath" v-if="![0, 8].includes(fileType)">
|
|
|
|
|
- <a-input :value="fileInfo.filePath" readonly @click="handleClickFilePath(fileInfo)" />
|
|
|
|
|
|
|
+ <a-form-item :label="fileType === 6 ? '原路径:' : '路径:'" name="filePath" v-if="![0, 8].includes(fileType)">
|
|
|
|
|
+ <a-input :value="fileInfo.filePath" readonly @click="handleClickFilePath(fileInfo)" :bordered="false"></a-input>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
-
|
|
|
|
|
- <a-form-item label="类型" name="fileName">
|
|
|
|
|
- <a-input :value="$file.getFileType(fileInfo)" readonly />
|
|
|
|
|
|
|
+ <a-form-item label="类型:" name="fileName">
|
|
|
|
|
+ <a-input :value="$file.getFileType(fileInfo)" readonly :bordered="false"></a-input>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
-
|
|
|
|
|
- <a-form-item label="大小" name="fileSize">
|
|
|
|
|
- <a-input :value="fileInfo.isDir === 0 ? $file.calculateFileSize(fileInfo.fileSize) : ''" readonly />
|
|
|
|
|
|
|
+ <a-form-item label="大小:" name="fileSize">
|
|
|
|
|
+ <a-input
|
|
|
|
|
+ :value="fileInfo.isDir === 0 ? $file.calculateFileSize(fileInfo.fileSize) : ''"
|
|
|
|
|
+ readonly
|
|
|
|
|
+ :bordered="false"
|
|
|
|
|
+ ></a-input>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
-
|
|
|
|
|
<a-form-item
|
|
<a-form-item
|
|
|
- label="修改日期"
|
|
|
|
|
|
|
+ label="修改日期:"
|
|
|
name="uploadTime"
|
|
name="uploadTime"
|
|
|
v-if="![7, 8].includes(fileType) && !['Share'].includes(routeName)"
|
|
v-if="![7, 8].includes(fileType) && !['Share'].includes(routeName)"
|
|
|
>
|
|
>
|
|
|
- <a-input :value="fileInfo.uploadTime" readonly />
|
|
|
|
|
|
|
+ <a-input :value="fileInfo.uploadTime" readonly :bordered="false"></a-input>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
-
|
|
|
|
|
- <a-form-item label="删除日期" name="deleteTime" v-if="fileType === 6">
|
|
|
|
|
- <a-input :value="fileInfo.deleteTime" readonly />
|
|
|
|
|
|
|
+ <a-form-item label="删除日期:" name="deleteTime" v-if="fileType === 6">
|
|
|
|
|
+ <a-input :value="fileInfo.deleteTime" readonly :bordered="false"></a-input>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
-
|
|
|
|
|
- <a-form-item label="分享类型" name="shareType" v-if="fileType === 8">
|
|
|
|
|
- <a-input :value="fileInfo.shareType === 1 ? '私密' : '公共'" readonly />
|
|
|
|
|
|
|
+ <a-form-item label="分享类型:" name="shareType" v-if="fileType === 8">
|
|
|
|
|
+ <a-input :value="fileInfo.shareType === 1 ? '私密' : '公共'" readonly :bordered="false"></a-input>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
-
|
|
|
|
|
- <a-form-item label="分享时间" name="shareTime" v-if="fileType === 8">
|
|
|
|
|
- <a-input :value="fileInfo.shareTime" readonly />
|
|
|
|
|
|
|
+ <a-form-item label="分享时间:" name="shareTime" v-if="fileType === 8">
|
|
|
|
|
+ <a-input :value="fileInfo.shareTime" readonly :bordered="false"></a-input>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
-
|
|
|
|
|
- <a-form-item label="过期时间" name="endTime" v-if="fileType === 8" class="form-item-end-time">
|
|
|
|
|
- <a-input :value="fileInfo.endTime" readonly />
|
|
|
|
|
- <WarningOutlined class="status-icon warning" v-if="$file.getFileShareStatus(fileInfo.endTime)" />
|
|
|
|
|
- <ClockCircleOutlined class="status-icon success" v-else />
|
|
|
|
|
|
|
+ <a-form-item label="过期时间:" name="endTime" v-if="fileType === 8" class="form-item-end-time">
|
|
|
|
|
+ <a-input :value="fileInfo.endTime" readonly :bordered="false"></a-input>
|
|
|
|
|
+ <warning-outlined class="status-icon warning-icon" v-if="$file.getFileShareStatus(fileInfo.endTime)" />
|
|
|
|
|
+ <clock-circle-outlined class="status-icon time-icon" v-else />
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
</a-form>
|
|
</a-form>
|
|
|
-
|
|
|
|
|
<template #footer>
|
|
<template #footer>
|
|
|
<a-button @click="handleDialogClose">关 闭</a-button>
|
|
<a-button @click="handleDialogClose">关 闭</a-button>
|
|
|
</template>
|
|
</template>
|
|
@@ -67,30 +63,54 @@
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
import { ref, computed } from 'vue'
|
|
import { ref, computed } from 'vue'
|
|
|
- import { useRouter } from 'vue-router'
|
|
|
|
|
|
|
+ import { useRouter, useRoute } from 'vue-router'
|
|
|
import { WarningOutlined, ClockCircleOutlined } from '@ant-design/icons-vue'
|
|
import { WarningOutlined, ClockCircleOutlined } from '@ant-design/icons-vue'
|
|
|
|
|
|
|
|
|
|
+ const router = useRouter()
|
|
|
|
|
+ const route = useRoute()
|
|
|
|
|
+ // 定义组件属性
|
|
|
const props = defineProps({
|
|
const props = defineProps({
|
|
|
- fileInfo: Object,
|
|
|
|
|
- callback: Function
|
|
|
|
|
|
|
+ fileInfo: {
|
|
|
|
|
+ type: Object,
|
|
|
|
|
+ default: () => ({})
|
|
|
|
|
+ },
|
|
|
|
|
+ callback: {
|
|
|
|
|
+ type: Function,
|
|
|
|
|
+ default: () => {}
|
|
|
|
|
+ }
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
- const router = useRouter()
|
|
|
|
|
- const fileInfoFormRef = ref(null)
|
|
|
|
|
|
|
+ // 响应式状态
|
|
|
const visible = ref(false)
|
|
const visible = ref(false)
|
|
|
|
|
+ const fileInfoForm = ref(null)
|
|
|
|
|
|
|
|
|
|
+ // 计算属性
|
|
|
|
|
+ // 左侧菜单选中的文件类型
|
|
|
const fileType = computed(() => {
|
|
const fileType = computed(() => {
|
|
|
- return router.currentRoute.value.query.fileType ? Number(router.currentRoute.value.query.fileType) : 0
|
|
|
|
|
|
|
+ console.log('route', route.query)
|
|
|
|
|
+ return route.query.fileType ? Number(route.query.fileType) : 0
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
- const routeName = computed(() => router.currentRoute.value.name)
|
|
|
|
|
|
|
+ // 路由名称
|
|
|
|
|
+ const routeName = computed(() => {
|
|
|
|
|
+ return route.name
|
|
|
|
|
+ })
|
|
|
|
|
|
|
|
|
|
+ // 方法
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 查看文件详情对话框 | 对话框关闭的回调
|
|
|
|
|
+ * @description 关闭对话框
|
|
|
|
|
+ */
|
|
|
const handleDialogClose = () => {
|
|
const handleDialogClose = () => {
|
|
|
visible.value = false
|
|
visible.value = false
|
|
|
- fileInfoFormRef.value?.resetFields()
|
|
|
|
|
|
|
+ fileInfoForm.value.resetFields()
|
|
|
props.callback('cancel')
|
|
props.callback('cancel')
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 路径点击事件
|
|
|
|
|
+ * @param {object} fileInfo 文件信息
|
|
|
|
|
+ */
|
|
|
const handleClickFilePath = (fileInfo) => {
|
|
const handleClickFilePath = (fileInfo) => {
|
|
|
router.push({
|
|
router.push({
|
|
|
query: { filePath: fileInfo.filePath, fileType: 0 }
|
|
query: { filePath: fileInfo.filePath, fileType: 0 }
|
|
@@ -98,6 +118,7 @@
|
|
|
handleDialogClose()
|
|
handleDialogClose()
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ // 暴露方法给父组件
|
|
|
defineExpose({
|
|
defineExpose({
|
|
|
visible
|
|
visible
|
|
|
})
|
|
})
|
|
@@ -114,48 +135,33 @@
|
|
|
height: auto;
|
|
height: auto;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .file-info-form {
|
|
|
|
|
- :deep(.ant-form-item) {
|
|
|
|
|
|
|
+ :deep(.file-info-form) {
|
|
|
|
|
+ .ant-form-item {
|
|
|
margin-bottom: 16px;
|
|
margin-bottom: 16px;
|
|
|
-
|
|
|
|
|
.ant-input {
|
|
.ant-input {
|
|
|
- border: none;
|
|
|
|
|
|
|
+ border: none !important;
|
|
|
|
|
+ box-shadow: none !important;
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
&.form-item-end-time {
|
|
&.form-item-end-time {
|
|
|
.ant-form-item-control-input-content {
|
|
.ant-form-item-control-input-content {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
-
|
|
|
|
|
.ant-input {
|
|
.ant-input {
|
|
|
width: 141px;
|
|
width: 141px;
|
|
|
padding-right: 0;
|
|
padding-right: 0;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
.status-icon {
|
|
.status-icon {
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
- margin-left: 8px;
|
|
|
|
|
-
|
|
|
|
|
- &.warning {
|
|
|
|
|
- color: @warning-color;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- &.success {
|
|
|
|
|
- color: @success-color;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+ .warning-icon {
|
|
|
|
|
+ color: @warning-color;
|
|
|
|
|
+ }
|
|
|
|
|
+ .time-icon {
|
|
|
|
|
+ color: @success-color;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- .ant-btn {
|
|
|
|
|
- &:hover,
|
|
|
|
|
- &:focus {
|
|
|
|
|
- color: white;
|
|
|
|
|
- border-color: @hover-color;
|
|
|
|
|
- background-color: @hover-color;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
</style>
|
|
</style>
|