|
|
@@ -54,7 +54,10 @@
|
|
|
<a @click="handlePublish(record)">发布</a>
|
|
|
<a-divider type="vertical" />
|
|
|
<a-dropdown>
|
|
|
- <a class="ant-dropdown-link"> 更多 <DownOutlined /> </a>
|
|
|
+ <a class="ant-dropdown-link">
|
|
|
+ 更多
|
|
|
+ <DownOutlined />
|
|
|
+ </a>
|
|
|
<template #overlay>
|
|
|
<a-menu>
|
|
|
<a-menu-item>
|
|
|
@@ -78,7 +81,10 @@
|
|
|
<a @click="handleAudit(record)">审核</a>
|
|
|
<a-divider type="vertical" />
|
|
|
<a-dropdown>
|
|
|
- <a class="ant-dropdown-link"> 更多 <DownOutlined /> </a>
|
|
|
+ <a class="ant-dropdown-link">
|
|
|
+ 更多
|
|
|
+ <DownOutlined />
|
|
|
+ </a>
|
|
|
<template #overlay>
|
|
|
<a-menu>
|
|
|
<a-menu-item>
|
|
|
@@ -93,7 +99,10 @@
|
|
|
<a @click="handlePermission(record)">权限</a>
|
|
|
<a-divider type="vertical" />
|
|
|
<a-dropdown>
|
|
|
- <a class="ant-dropdown-link"> 更多 <DownOutlined /> </a>
|
|
|
+ <a class="ant-dropdown-link">
|
|
|
+ 更多
|
|
|
+ <DownOutlined />
|
|
|
+ </a>
|
|
|
<template #overlay>
|
|
|
<a-menu>
|
|
|
<a-menu-item>
|
|
|
@@ -114,7 +123,10 @@
|
|
|
<a @click="handleRestore(record)">恢复</a>
|
|
|
<a-divider type="vertical" />
|
|
|
<a-dropdown>
|
|
|
- <a class="ant-dropdown-link"> 更多 <DownOutlined /> </a>
|
|
|
+ <a class="ant-dropdown-link">
|
|
|
+ 更多
|
|
|
+ <DownOutlined />
|
|
|
+ </a>
|
|
|
<template #overlay>
|
|
|
<a-menu>
|
|
|
<a-menu-item>
|
|
|
@@ -160,282 +172,282 @@
|
|
|
</a-card>
|
|
|
</template>
|
|
|
|
|
|
- <script setup>
|
|
|
-import { ref } from 'vue'
|
|
|
-import { DownOutlined } from '@ant-design/icons-vue'
|
|
|
-import { Modal, Upload } from 'ant-design-vue'
|
|
|
-import releaseModal from './releaseModal.vue'
|
|
|
-// 数据源
|
|
|
-const dataSource = ref([
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- name: '资源名称资源名称',
|
|
|
- format: 'mp4',
|
|
|
- uploadTime: '2020-11-25 23:26:08',
|
|
|
- status: 'processing', // processing, uploaded, pending, published, deleted
|
|
|
- department: '航空理论系',
|
|
|
- major: '商务服务',
|
|
|
- courseType: '选修'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- name: '资源名称资源名称',
|
|
|
- format: 'mp4',
|
|
|
- uploadTime: '2020-11-25 23:26:08',
|
|
|
- status: 'pending', // processing, uploaded, pending, published, deleted
|
|
|
- department: '航空理论系1',
|
|
|
- major: '商务服务',
|
|
|
- courseType: '选修'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- name: '资源名称资源名称',
|
|
|
- format: 'mp4',
|
|
|
- uploadTime: '2020-11-25 23:26:08',
|
|
|
- status: 'published', // processing, uploaded, pending, published, deleted
|
|
|
- department: '航空理论系2',
|
|
|
- major: '商务服务',
|
|
|
- courseType: '选修'
|
|
|
+<script setup>
|
|
|
+ import { ref } from 'vue'
|
|
|
+ import { DownOutlined } from '@ant-design/icons-vue'
|
|
|
+ import { Modal, Upload } from 'ant-design-vue'
|
|
|
+ import releaseModal from './releaseModal.vue'
|
|
|
+ // 数据源
|
|
|
+ const dataSource = ref([
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: '资源名称资源名称',
|
|
|
+ format: 'mp4',
|
|
|
+ uploadTime: '2020-11-25 23:26:08',
|
|
|
+ status: 'processing', // processing, uploaded, pending, published, deleted
|
|
|
+ department: '航空理论系',
|
|
|
+ major: '商务服务',
|
|
|
+ courseType: '选修'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: '资源名称资源名称',
|
|
|
+ format: 'mp4',
|
|
|
+ uploadTime: '2020-11-25 23:26:08',
|
|
|
+ status: 'pending', // processing, uploaded, pending, published, deleted
|
|
|
+ department: '航空理论系1',
|
|
|
+ major: '商务服务',
|
|
|
+ courseType: '选修'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: '资源名称资源名称',
|
|
|
+ format: 'mp4',
|
|
|
+ uploadTime: '2020-11-25 23:26:08',
|
|
|
+ status: 'published', // processing, uploaded, pending, published, deleted
|
|
|
+ department: '航空理论系2',
|
|
|
+ major: '商务服务',
|
|
|
+ courseType: '选修'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+
|
|
|
+ // 当前激活的标签页
|
|
|
+ const activeKey = ref('unpublished')
|
|
|
+ //发布按钮状态
|
|
|
+ const releaseVisible = ref(false)
|
|
|
+
|
|
|
+ // 搜索值
|
|
|
+ const searchValue = ref('')
|
|
|
+
|
|
|
+ // 列定义
|
|
|
+ const columnsUnpublished = [
|
|
|
+ {
|
|
|
+ title: '编号',
|
|
|
+ dataIndex: 'id',
|
|
|
+ key: 'id'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '资源名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ key: 'name'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '课件格式',
|
|
|
+ dataIndex: 'format',
|
|
|
+ key: 'format'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '上传时间',
|
|
|
+ dataIndex: 'uploadTime',
|
|
|
+ key: 'uploadTime'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ key: 'status'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ key: 'action'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
+ const columnsPending = [
|
|
|
+ {
|
|
|
+ title: '编号',
|
|
|
+ dataIndex: 'id',
|
|
|
+ key: 'id'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '资源名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ key: 'name'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '所属院系',
|
|
|
+ dataIndex: 'department',
|
|
|
+ key: 'department'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '所属专业',
|
|
|
+ dataIndex: 'major',
|
|
|
+ key: 'major'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '课程类型',
|
|
|
+ dataIndex: 'courseType',
|
|
|
+ key: 'courseType'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '课件格式',
|
|
|
+ dataIndex: 'format',
|
|
|
+ key: 'format'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '上传时间',
|
|
|
+ dataIndex: 'uploadTime',
|
|
|
+ key: 'uploadTime'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ key: 'status'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ key: 'action'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
+ const columnsPublished = [...columnsPending]
|
|
|
+ const columnsRecycle = [...columnsPending]
|
|
|
+
|
|
|
+ const currentColumns = computed(() => {
|
|
|
+ switch (activeKey.value) {
|
|
|
+ case 'unpublished':
|
|
|
+ return columnsUnpublished
|
|
|
+ case 'pending':
|
|
|
+ return columnsPending
|
|
|
+ case 'published':
|
|
|
+ return columnsPublished
|
|
|
+ case 'recycle':
|
|
|
+ return columnsRecycle
|
|
|
+ default:
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const currentDataSource = computed(() => {
|
|
|
+ return dataSource.value.filter((item) => {
|
|
|
+ if (activeKey.value === 'unpublished') {
|
|
|
+ return ['processing', 'uploaded'].includes(item.status)
|
|
|
+ } else if (activeKey.value === 'pending') {
|
|
|
+ return item.status === 'pending'
|
|
|
+ } else if (activeKey.value === 'published') {
|
|
|
+ return item.status === 'published'
|
|
|
+ } else if (activeKey.value === 'recycle') {
|
|
|
+ return item.status === 'deleted'
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ // 方法
|
|
|
+ const handleSearch = () => {
|
|
|
+ console.log('Search:', searchValue.value)
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleReset = () => {
|
|
|
+ searchValue.value = ''
|
|
|
+ }
|
|
|
+ const tabChange = () => {
|
|
|
+ // dataSource.value = []
|
|
|
}
|
|
|
-])
|
|
|
-
|
|
|
-// 当前激活的标签页
|
|
|
-const activeKey = ref('unpublished')
|
|
|
-//发布按钮状态
|
|
|
-const releaseVisible = ref(false)
|
|
|
-
|
|
|
-// 搜索值
|
|
|
-const searchValue = ref('')
|
|
|
-
|
|
|
-// 列定义
|
|
|
-const columnsUnpublished = [
|
|
|
- {
|
|
|
- title: '编号',
|
|
|
- dataIndex: 'id',
|
|
|
- key: 'id'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '资源名称',
|
|
|
- dataIndex: 'name',
|
|
|
- key: 'name'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '课件格式',
|
|
|
- dataIndex: 'format',
|
|
|
- key: 'format'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '上传时间',
|
|
|
- dataIndex: 'uploadTime',
|
|
|
- key: 'uploadTime'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '状态',
|
|
|
- key: 'status'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '操作',
|
|
|
- key: 'action'
|
|
|
+
|
|
|
+ const handleUpload = () => {
|
|
|
+ console.log('Upload Resource')
|
|
|
+ }
|
|
|
+
|
|
|
+ const handlePublish = (record) => {
|
|
|
+ console.log('Publish:', record)
|
|
|
+ releaseVisible.value = true
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleAudit = (record) => {
|
|
|
+ console.log('Audit:', record)
|
|
|
+ }
|
|
|
+
|
|
|
+ const handlePermission = (record) => {
|
|
|
+ console.log('Permission:', record)
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleRestore = (record) => {
|
|
|
+ console.log('Restore:', record)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 上传资源模态框
|
|
|
+ const uploadModalVisible = ref(false)
|
|
|
+
|
|
|
+ // 文件列表
|
|
|
+ const fileList = ref([])
|
|
|
+
|
|
|
+ // 显示上传模态框
|
|
|
+ const showUploadModal = () => {
|
|
|
+ uploadModalVisible.value = true
|
|
|
}
|
|
|
-]
|
|
|
-
|
|
|
-const columnsPending = [
|
|
|
- {
|
|
|
- title: '编号',
|
|
|
- dataIndex: 'id',
|
|
|
- key: 'id'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '资源名称',
|
|
|
- dataIndex: 'name',
|
|
|
- key: 'name'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '所属院系',
|
|
|
- dataIndex: 'department',
|
|
|
- key: 'department'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '所属专业',
|
|
|
- dataIndex: 'major',
|
|
|
- key: 'major'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '课程类型',
|
|
|
- dataIndex: 'courseType',
|
|
|
- key: 'courseType'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '课件格式',
|
|
|
- dataIndex: 'format',
|
|
|
- key: 'format'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '上传时间',
|
|
|
- dataIndex: 'uploadTime',
|
|
|
- key: 'uploadTime'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '状态',
|
|
|
- key: 'status'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '操作',
|
|
|
- key: 'action'
|
|
|
+
|
|
|
+ // 关闭模态框
|
|
|
+ const handleUploadCancel = () => {
|
|
|
+ uploadModalVisible.value = false
|
|
|
+ fileList.value = []
|
|
|
}
|
|
|
-]
|
|
|
-
|
|
|
-const columnsPublished = [...columnsPending]
|
|
|
-const columnsRecycle = [...columnsPending]
|
|
|
-
|
|
|
-const currentColumns = computed(() => {
|
|
|
- switch (activeKey.value) {
|
|
|
- case 'unpublished':
|
|
|
- return columnsUnpublished
|
|
|
- case 'pending':
|
|
|
- return columnsPending
|
|
|
- case 'published':
|
|
|
- return columnsPublished
|
|
|
- case 'recycle':
|
|
|
- return columnsRecycle
|
|
|
- default:
|
|
|
- return []
|
|
|
+
|
|
|
+ // 确认上传
|
|
|
+ const handleUploadOk = () => {
|
|
|
+ // 这里可以添加实际的上传逻辑
|
|
|
+ console.log('Upload confirmed:', fileList.value)
|
|
|
+ uploadModalVisible.value = false
|
|
|
+ fileList.value = []
|
|
|
}
|
|
|
-})
|
|
|
-
|
|
|
-const currentDataSource = computed(() => {
|
|
|
- return dataSource.value.filter((item) => {
|
|
|
- if (activeKey.value === 'unpublished') {
|
|
|
- return ['processing', 'uploaded'].includes(item.status)
|
|
|
- } else if (activeKey.value === 'pending') {
|
|
|
- return item.status === 'pending'
|
|
|
- } else if (activeKey.value === 'published') {
|
|
|
- return item.status === 'published'
|
|
|
- } else if (activeKey.value === 'recycle') {
|
|
|
- return item.status === 'deleted'
|
|
|
+
|
|
|
+ // 上传前的钩子函数
|
|
|
+ const beforeUpload = (file) => {
|
|
|
+ const isLt2G = file.size / 1024 / 1024 / 1024 < 2
|
|
|
+ if (!isLt2G) {
|
|
|
+ Modal.error({ content: '文件大小不能超过 2GB!' })
|
|
|
}
|
|
|
- return false
|
|
|
- })
|
|
|
-})
|
|
|
-
|
|
|
-// 方法
|
|
|
-const handleSearch = () => {
|
|
|
- console.log('Search:', searchValue.value)
|
|
|
-}
|
|
|
-
|
|
|
-const handleReset = () => {
|
|
|
- searchValue.value = ''
|
|
|
-}
|
|
|
-const tabChange = () => {
|
|
|
- // dataSource.value = []
|
|
|
-}
|
|
|
-
|
|
|
-const handleUpload = () => {
|
|
|
- console.log('Upload Resource')
|
|
|
-}
|
|
|
-
|
|
|
-const handlePublish = (record) => {
|
|
|
- console.log('Publish:', record)
|
|
|
- releaseVisible.value = true
|
|
|
-}
|
|
|
-
|
|
|
-const handleAudit = (record) => {
|
|
|
- console.log('Audit:', record)
|
|
|
-}
|
|
|
-
|
|
|
-const handlePermission = (record) => {
|
|
|
- console.log('Permission:', record)
|
|
|
-}
|
|
|
-
|
|
|
-const handleRestore = (record) => {
|
|
|
- console.log('Restore:', record)
|
|
|
-}
|
|
|
-
|
|
|
-// 上传资源模态框
|
|
|
-const uploadModalVisible = ref(false)
|
|
|
-
|
|
|
-// 文件列表
|
|
|
-const fileList = ref([])
|
|
|
-
|
|
|
-// 显示上传模态框
|
|
|
-const showUploadModal = () => {
|
|
|
- uploadModalVisible.value = true
|
|
|
-}
|
|
|
-
|
|
|
-// 关闭模态框
|
|
|
-const handleUploadCancel = () => {
|
|
|
- uploadModalVisible.value = false
|
|
|
- fileList.value = []
|
|
|
-}
|
|
|
-
|
|
|
-// 确认上传
|
|
|
-const handleUploadOk = () => {
|
|
|
- // 这里可以添加实际的上传逻辑
|
|
|
- console.log('Upload confirmed:', fileList.value)
|
|
|
- uploadModalVisible.value = false
|
|
|
- fileList.value = []
|
|
|
-}
|
|
|
-
|
|
|
-// 上传前的钩子函数
|
|
|
-const beforeUpload = (file) => {
|
|
|
- const isLt2G = file.size / 1024 / 1024 / 1024 < 2
|
|
|
- if (!isLt2G) {
|
|
|
- Modal.error({ content: '文件大小不能超过 2GB!' })
|
|
|
+ return isLt2G
|
|
|
}
|
|
|
- return isLt2G
|
|
|
-}
|
|
|
-
|
|
|
-// 移除文件
|
|
|
-const handleRemove = (file) => {
|
|
|
- const index = fileList.value.indexOf(file)
|
|
|
- const newFileList = fileList.value.slice()
|
|
|
- newFileList.splice(index, 1)
|
|
|
- fileList.value = newFileList
|
|
|
-}
|
|
|
-
|
|
|
-// 文件状态改变时的处理函数
|
|
|
-const handleChange = ({ file, fileList: newFileList }) => {
|
|
|
- fileList.value = newFileList
|
|
|
-
|
|
|
- if (file.status === 'uploading') {
|
|
|
- file.percent = 0
|
|
|
+
|
|
|
+ // 移除文件
|
|
|
+ const handleRemove = (file) => {
|
|
|
+ const index = fileList.value.indexOf(file)
|
|
|
+ const newFileList = fileList.value.slice()
|
|
|
+ newFileList.splice(index, 1)
|
|
|
+ fileList.value = newFileList
|
|
|
}
|
|
|
|
|
|
- if (file.status === 'done') {
|
|
|
- Modal.success({ content: '文件上传成功' })
|
|
|
- } else if (file.status === 'error') {
|
|
|
- Modal.error({ content: '文件上传失败' })
|
|
|
+ // 文件状态改变时的处理函数
|
|
|
+ const handleChange = ({ file, fileList: newFileList }) => {
|
|
|
+ fileList.value = newFileList
|
|
|
+
|
|
|
+ if (file.status === 'uploading') {
|
|
|
+ file.percent = 0
|
|
|
+ }
|
|
|
+
|
|
|
+ if (file.status === 'done') {
|
|
|
+ Modal.success({ content: '文件上传成功' })
|
|
|
+ } else if (file.status === 'error') {
|
|
|
+ Modal.error({ content: '文件上传失败' })
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
- <style scoped>
|
|
|
-.editable-cell {
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-
|
|
|
-.ant-dropdown-link {
|
|
|
- margin-left: 8px;
|
|
|
-}
|
|
|
-
|
|
|
-.upload-area {
|
|
|
- border: 2px dashed #3ca9f5;
|
|
|
- padding: 40px;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-.upload-area p {
|
|
|
- margin: 10px 0;
|
|
|
-}
|
|
|
-
|
|
|
-.file-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin: 10px 0;
|
|
|
-}
|
|
|
-
|
|
|
-.file-item .ant-progress {
|
|
|
- flex: 1;
|
|
|
- margin: 0 10px;
|
|
|
-}
|
|
|
+<style scoped>
|
|
|
+ .editable-cell {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-dropdown-link {
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-area {
|
|
|
+ border: 2px dashed #3ca9f5;
|
|
|
+ padding: 40px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-area p {
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .file-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .file-item .ant-progress {
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
</style>
|