Skip to content

C
center-resource
提交 1145c4b9 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

公共筛选提取修改

上级 05ffa360
隐藏空白字符变更
内嵌 并排
正在显示 包含 493 行增加 和 485 行删除
.eslintrc-auto-import.json
浏览文件 @ 1145c4b9
......@@ -134,6 +134,7 @@
"useDisplayMedia": true,
"useDocumentVisibility": true,
"useDraggable": true,
"useDropZone": true,
"useElementBounding": true,
"useElementByPoint": true,
"useElementHover": true,
......
auto-imports.d.ts
浏览文件 @ 1145c4b9
......@@ -135,6 +135,7 @@ declare global {
const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
const useDraggable: typeof import('@vueuse/core')['useDraggable']
const useDropZone: typeof import('@vueuse/core')['useDropZone']
const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
const useElementHover: typeof import('@vueuse/core')['useElementHover']
......
src/api/base.ts
浏览文件 @ 1145c4b9
......@@ -52,4 +52,9 @@ export function updateAuth(data: { source_id: string }) {
// 获取分类列表
export function getCategoryList(params: { type: string; category_name?: string }) {
return httpRequest.get('/api/resource/v1/backend/category/list', { params })
}
// 获取项目列表
export function getProjectList(params: { organization_id: string }) {
return httpRequest.get('/api/resource/v1/util/members', { params })
}
\ No newline at end of file
src/composables/useCategory.ts → src/composables/useGetCategoryList.ts
浏览文件 @ 1145c4b9
import { getCategoryList } from '@/api/base'
export function useCategory() {
export function useGetCategoryList() {
const list = ref([])
onMounted(() => {
getCategoryList({ type: 'tree' }).then((res: any) => {
......
src/composables/useGetProjectList.ts 0 → 100644
浏览文件 @ 1145c4b9
import { getProjectList } from '@/api/base'
export function useProjectList(id?: string) {
const list = ref([])
onMounted(() => {
getProjectList({ organization_id: id || '' }).then((res: any) => {
list.value = res.data.departments
})
})
return { list }
}
\ No newline at end of file
src/modules/resource/courseware/api.ts
浏览文件 @ 1145c4b9
......@@ -23,11 +23,6 @@ export function createCourse(data: {
return httpRequest.post('/api/resource/v1/resource/courseware/create', data)
}
// 获取分类列表
export function getCategoryList(params: { type: string; category_name?: string }) {
return httpRequest.get('/api/resource/v1/backend/category/list', { params })
}
// 更新课件
export function updateCourse(data: {
id: string
......@@ -43,10 +38,7 @@ export function updateCourse(data: {
export function getCourseDetails(params: { id: string }) {
return httpRequest.get('/api/resource/v1/resource/courseware/view', { params })
}
// 获取项目列表
export function getProjectList(params: { organization_id: string }) {
return httpRequest.get('/api/resource/v1/util/members', { params })
}
// 部门共享
export function setDepartment(data: { id: string }) {
return httpRequest.post('/api/resource/v1/resource/courseware/set-department', data)
......
src/modules/resource/courseware/components/Operation.vue
浏览文件 @ 1145c4b9
<script setup lang="ts">
import { setDepartment, setPlatform, setStatus, getProjectList, setBelong } from '../api'
import { setDepartment, setPlatform, setStatus, setBelong } from '../api'
import { useProjectList } from '@/composables/useGetProjectList'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useMapStore } from '@/stores/map'
......@@ -103,9 +104,7 @@ const dialogFormVisible = ref(false)
// 人员列表
let members: any = ref([])
const getMembers = () => {
getProjectList({ organization_id: props.data.organ_id }).then((res: any) => {
members.value = res.data.members
})
members.value = useProjectList(props.data.organ_id)
}
// 点击更改负责人按钮弹窗
const handleMembers = () => {
......
src/modules/resource/courseware/views/List.vue
浏览文件 @ 1145c4b9
<script setup lang="ts">
import { getCourseList, getProjectList, getCategoryList } from '../api'
import { getCourseList } from '../api'
import CardListItem from '@/components/base/CardListItem.vue'
import { Expand, Search } from '@element-plus/icons-vue'
import { useMapStore } from '@/stores/map'
import { useGetCategoryList } from '@/composables/useGetCategoryList'
import { useProjectList } from '@/composables/useGetProjectList'
const store = useMapStore()
const appList = ref()
......@@ -16,20 +18,16 @@ const tabChange = () => {
}
// 筛选项目列表
let projectList: any = $ref([])
getProjectList({ organization_id: '' }).then((res: any) => {
projectList = res.data.departments
})
let { list: projectList } = useProjectList()
// 下拉选择tree 视频分类
let selectTree = $ref([])
getCategoryList({ type: 'tree' }).then((res: any) => {
selectTree = res.data
})
let { list: selectTree } = useGetCategoryList()
const defaultProps = {
children: 'children',
label: 'category_name',
value: 'id'
}
const listOptions = $computed(() => {
return {
remote: {
......@@ -47,7 +45,7 @@ const listOptions = $computed(() => {
label: '状态',
options: store.mapList?.filter((item: any) => item.key === 'system_status')[0]?.values
},
{ type: 'select', prop: 'authorized', label: '项目', options: projectList, labelKey: 'name', valueKey: 'id' },
{ type: 'select', prop: 'authorized', label: '项目', options: projectList.value, labelKey: 'name', valueKey: 'id' },
{ prop: 'classification', label: '类别', slots: 'filter-type' },
{ prop: 'search', slots: 'filter-search' }
// { type: 'input', prop: 'category_id', prefixIcon: 'Search' }
......
src/modules/resource/courseware/views/Update.vue
浏览文件 @ 1145c4b9
<script setup lang="ts">
import { createCourse, updateCourse, getCategoryList, getCourseDetails } from '../api'
import { createCourse, updateCourse, getCourseDetails } from '../api'
import { ElMessage } from 'element-plus'
import UploadAuth from '@/components/base/UploadAuth.vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useGetCategoryList } from '@/composables/useGetCategoryList'
// 路由
const router = useRouter()
const ruleFormRef = ref<FormInstance>()
......@@ -38,16 +39,13 @@ const upload = (res: any) => {
videoUpload.progress = 0
}
// 下拉选择tree 课件分类
// 下拉选择tree 视频分类
let { list: selectTree } = useGetCategoryList()
const defaultProps = {
children: 'children',
label: 'category_name',
value: 'id'
}
let selectTree = $ref([])
getCategoryList({ type: 'tree' }).then(res => {
selectTree = res.data
})
const handleConfirm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
......
src/modules/resource/lessonplan/api.ts
浏览文件 @ 1145c4b9
......@@ -12,15 +12,6 @@ export function getLessonList(params?: {
return httpRequest.get('/api/resource/v1/resource/lesson-plan/list', { params })
}
// 获取项目列表
export function getProjectList(params: { organization_id: string }) {
return httpRequest.get('/api/resource/v1/util/members', { params })
}
// 获取分类列表
export function getCategoryList(params: { type: string; category_name?: string }) {
return httpRequest.get('/api/resource/v1/backend/category/list', { params })
}
// 创建教案
export function createLessonPlan(data: { name: string; source: string; classification: string; knowledge_points: string; url: string; type: string; size: string }) {
return httpRequest.post('/api/resource/v1/resource/lesson-plan/create', data)
......
src/modules/resource/lessonplan/views/List.vue
浏览文件 @ 1145c4b9
<script setup lang="ts">
import { getLessonList, getProjectList, getCategoryList } from '../api'
import { getLessonList } from '../api'
import CardListItem from '@/components/base/CardListItem.vue'
import { Expand, Search } from '@element-plus/icons-vue'
import { useMapStore } from '@/stores/map'
import { useGetCategoryList } from '@/composables/useGetCategoryList'
import { useProjectList } from '@/composables/useGetProjectList'
const store = useMapStore()
const appList = ref()
......@@ -14,21 +17,16 @@ const tabChange = () => {
appList.value.refetch()
}
// 筛选项目列表
let projectList: any = $ref([])
getProjectList({ organization_id: '' }).then((res: any) => {
projectList = res.data.departments
})
let { list: projectList } = useProjectList()
// 下拉选择tree 视频分类
let selectTree = $ref([])
getCategoryList({ type: 'tree' }).then((res: any) => {
selectTree = res.data
})
let { list: selectTree } = useGetCategoryList()
const defaultProps = {
children: 'children',
label: 'category_name',
value: 'id'
}
const listOptions = $computed(() => {
const listOptions = $computed(() => {
return {
remote: {
httpRequest: getLessonList,
......@@ -45,7 +43,7 @@ const listOptions = $computed(() => {
label: '状态',
options: store.mapList?.filter((item: any) => item.key === 'system_status')[0]?.values
},
{ type: 'select', prop: 'authorized', label: '项目', options: projectList, labelKey: 'name', valueKey: 'id' },
{ type: 'select', prop: 'authorized', label: '项目', options: projectList.value, labelKey: 'name', valueKey: 'id' },
{ prop: 'classification', label: '类别', slots: 'filter-type' },
{ prop: 'search', slots: 'filter-search' }
// { type: 'input', prop: 'category_id', prefixIcon: 'Search' }
......
src/modules/resource/lessonplan/views/Update.vue
浏览文件 @ 1145c4b9
<script setup lang="ts">
import AppUpload from '@/components/base/AppUpload.vue'
import { getCategoryList } from '@/api/base'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { createLessonPlan } from '../api'
// 路由
const router = useRouter()
import AppUpload from '@/components/base/AppUpload.vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { createLessonPlan } from '../api'
import { useGetCategoryList } from '@/composables/useGetCategoryList'
// 下拉选择tree 视频分类
const defaultProps = {
children: 'children',
label: 'category_name',
value: 'id'
}
let selectTree = $ref([])
getCategoryList({ type: 'tree' }).then((res: any) => {
selectTree = res.data
})
// 路由
const router = useRouter()
// form表单
const form:any = reactive({ file: [], name: '', source: '2', classification: '', knowledge_points: '', url: '', type: '', size: '' })
// 表单验证
const rules = {
name: [{ required: true, message: '请输入标题', trigger: 'blur' }],
classification: [{ required: true, message: '请选择分类', trigger: 'change' }],
file: [{ required: true, message: '' }]
}
// 新建编辑表单提交
const ruleFormRef = ref<FormInstance>()
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
console.log(valid, 'valid', fields)
if (valid) {
if (!protocol.value) {
ElMessage('请勾选用户协议')
return
}
const id = router.currentRoute.value.query.id as string
const formFile = form.file[0]
form.url = formFile.url
form.type = formFile.type
form.size = formFile.size
const params = Object.assign({}, form)
delete params.file
if (id !== '' && id) {
// const params = Object.assign({ id: id }, form)
// updateVideo(params).then((res: any) => {
// if (res.code === 0) {
// ElMessage({ message: '更新成功', type: 'success' })
// setTimeout(() => {
// router.push({
// path: '/resource/video'
// })
// }, 1000)
// }
// })
} else {
createLessonPlan(params).then((res:any) => {
if (res.code === 0) {
ElMessage({ message: '创建成功', type: 'success' })
setTimeout(() => {
router.push({
path: '/resource/lessonplan'
})
}, 1000)
}
})
}
// 下拉选择tree 视频分类
let { list: selectTree } = useGetCategoryList()
const defaultProps = {
children: 'children',
label: 'category_name',
value: 'id'
}
// form表单
const form: any = reactive({
file: [],
name: '',
source: '2',
classification: '',
knowledge_points: '',
url: '',
type: '',
size: ''
})
// 表单验证
const rules = {
name: [{ required: true, message: '请输入标题', trigger: 'blur' }],
classification: [{ required: true, message: '请选择分类', trigger: 'change' }],
file: [{ required: true, message: '' }]
}
// 新建编辑表单提交
const ruleFormRef = ref<FormInstance>()
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
console.log(valid, 'valid', fields)
if (valid) {
if (!protocol.value) {
ElMessage('请勾选用户协议')
return
}
const id = router.currentRoute.value.query.id as string
const formFile = form.file[0]
form.url = formFile.url
form.type = formFile.type
form.size = formFile.size
const params = Object.assign({}, form)
delete params.file
if (id !== '' && id) {
// const params = Object.assign({ id: id }, form)
// updateVideo(params).then((res: any) => {
// if (res.code === 0) {
// ElMessage({ message: '更新成功', type: 'success' })
// setTimeout(() => {
// router.push({
// path: '/resource/video'
// })
// }, 1000)
// }
// })
} else {
ElMessage('请完善信息')
console.log('error submit!', fields)
createLessonPlan(params).then((res: any) => {
if (res.code === 0) {
ElMessage({ message: '创建成功', type: 'success' })
setTimeout(() => {
router.push({
path: '/resource/lessonplan'
})
}, 1000)
}
})
}
})
}
// 协议
const protocol = ref(false)
} else {
ElMessage('请完善信息')
console.log('error submit!', fields)
}
})
}
// 协议
const protocol = ref(false)
</script>
<template>
......@@ -94,9 +99,7 @@
<div class="upload-video">
<div class="upload-box">
<AppUpload :limit="1" v-model="form.file"></AppUpload>
<div class="upload-btn">
本地文件
</div>
<div class="upload-btn">本地文件</div>
</div>
</div>
<div class="tips">课件支持格式包含：doc docx pdf ppt pptx，大小不超过50M</div>
......@@ -106,14 +109,10 @@
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="教案分类：" prop="classification">
<el-tree-select :props="defaultProps" style="width:100%" v-model="form.classification" :data="selectTree" />
<el-tree-select :props="defaultProps" style="width: 100%" v-model="form.classification" :data="selectTree" />
</el-form-item>
<el-form-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;知识点：">
<el-input
v-model="form.knowledge_points"
:rows="2"
type="textarea"
/>
<el-input v-model="form.knowledge_points" :rows="2" type="textarea" />
</el-form-item>
</el-form>
<div class="protocol-box">
......@@ -128,67 +127,67 @@
</AppCard>
</template>
<style lang="scss">
.upload-box{
.upload-box {
position: relative;
.app-upload-btn{
.app-upload-btn {
position: relative;
z-index: 99;
opacity: 0.0001 !important;
}
}
.tips{
.tips {
font-size: 12px;
line-height: 100%;
color: #999999;
margin-top: 8px;
}
.tool-btn-box{
.tool-btn-box {
display: flex;
justify-content: right;
.btn-item{
.btn-item {
width: 127px;
line-height: 36px;
background: #AA1941;
background: #aa1941;
border-radius: 20px;
margin-right: 10px;
font-size: 14px;
color: #FFFFFF;
color: #ffffff;
text-align: center;
}
}
.demo-progress{
.demo-progress {
width: 350px;
}
.video-cover{
.video-cover {
display: flex;
.img-box{
.img-box {
width: 208px;
height: 130px;
border-radius: 4px;
background: #F7F7F7;
background: #f7f7f7;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
img{
img {
width: 100%;
height: 100%;
display: block;
}
}
.video-cover_right{
.video-cover_right {
margin-left: 20px;
.list{
.item{
.list {
.item {
display: flex;
align-items: center;
margin-top: 12px;
img{
img {
width: 9px;
display: block;
margin-right: 5px;
}
.text{
.text {
font-size: 12px;
color: #999999;
line-height: 100%;
......@@ -197,58 +196,58 @@
}
}
}
.swiper-box{
.swiper-box {
min-width: 660px;
margin-top: 20px;
padding: 0 40px;
position: relative;
.arrow{
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
color: #D5D5D5;
color: #d5d5d5;
cursor: pointer;
&.left{
&.left {
left: 0;
}
&.right{
&.right {
right: 10px;
}
}
.cover-list{
.cover-list {
display: flex;
flex-wrap: wrap;
.cover-list_item{
.cover-list_item {
display: block;
width: 155px;
height: 96px;
margin: 0 10px 10px 0;
border-radius: 4px;
border-radius: 4px;
cursor: pointer;
}
}
}
:deep(.el-carousel__indicators--horizontal){
:deep(.el-carousel__indicators--horizontal) {
display: none;
}
.protocol-box{
.protocol-box {
font-size: 14px;
line-height: 24px;
padding-left: 90px;
padding-top: 20px;
color: #666666;
span{
color: #AA1941;
span {
color: #aa1941;
}
}
.btn-box{
.btn-box {
display: flex;
margin-top: 20px;
margin-left: 90px;
.confirm{
.confirm {
width: 94px;
background: #AA1941;
background: #aa1941;
border-radius: 20px;
text-align: center;
line-height: 36px;
......@@ -256,44 +255,44 @@
margin-right: 26px;
cursor: pointer;
}
.cancel{
.cancel {
width: 94px;
line-height: 36px;
border: 1px solid #AA1941;
border: 1px solid #aa1941;
border-radius: 20px;
text-align: center;
color: #AA1941;
color: #aa1941;
cursor: pointer;
}
}
.upload-video{
.upload-video {
display: flex;
align-items: center;
.upload-btn{
.upload-btn {
position: absolute;
top: 0;
left: 0;
width: 94px;
line-height: 36px;
background: rgba(250, 223, 230, 0.39);
border: 1px solid #AA1941;
border: 1px solid #aa1941;
border-radius: 20px;
font-size: 14px;
color: #AA1941;
color: #aa1941;
margin-right: 30px;
text-align: center;
}
.video-info{
.video-info {
display: flex;
.name{
.name {
color: #333333;
font-size: 16px;
line-height: 100%;
}
.view{
.view {
font-size: 16px;
line-height: 100%;
color: #399EE8;
color: #399ee8;
margin-left: 20px;
cursor: pointer;
}
......
src/modules/resource/other/api.ts
浏览文件 @ 1145c4b9
......@@ -16,14 +16,6 @@ export function getOtherDetails(params: { id: string }) {
return httpRequest.get('/api/resource/v1/resource/other-information/view', { params })
}
// 获取项目列表
export function getProjectList(params: { organization_id: string }) {
return httpRequest.get('/api/resource/v1/util/members', { params })
}
// 获取分类列表
export function getCategoryList(params: { type: string; category_name?: string }) {
return httpRequest.get('/api/resource/v1/backend/category/list', { params })
}
// 部门共享
export function setDepartment(data: { id: string }) {
return httpRequest.post('/api/resource/v1/resource/other-information/set-department', data)
......
src/modules/resource/other/components/Operation.vue
浏览文件 @ 1145c4b9
<script setup lang="ts">
import { setDepartment, setPlatform, setStatus, getProjectList, setBelong } from '../api'
import { setDepartment, setPlatform, setStatus, setBelong } from '../api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useMapStore } from '@/stores/map'
import { useProjectList } from '@/composables/useGetProjectList'
const store = useMapStore()
console.log(store)
......@@ -102,9 +103,7 @@ const dialogFormVisible = ref(false)
// 人员列表
let members: any = ref([])
const getMembers = () => {
getProjectList({ organization_id: props.data.organ_id }).then((res: any) => {
members.value = res.data.members
})
members.value = useProjectList(props.data.organ_id)
}
// 点击更改负责人按钮弹窗
const handleMembers = () => {
......
src/modules/resource/other/views/List.vue
浏览文件 @ 1145c4b9
<script setup lang="ts">
import { getOtherList, getProjectList, getCategoryList } from '../api'
import { getOtherList } from '../api'
import CardListItem from '@/components/base/CardListItem.vue'
import { Expand, Search } from '@element-plus/icons-vue'
import { useMapStore } from '@/stores/map'
import { useProjectList } from '@/composables/useGetProjectList'
// 下拉选择tree 视频分类
import { useGetCategoryList } from '@/composables/useGetCategoryList'
const store = useMapStore()
const appList = ref()
......@@ -16,20 +19,16 @@ const tabChange = () => {
}
// 筛选项目列表
let projectList: any = $ref([])
getProjectList({ organization_id: '' }).then((res: any) => {
projectList = res.data.departments
})
let { list: projectList } = useProjectList()
// 下拉选择tree 视频分类
let selectTree = $ref([])
getCategoryList({ type: 'tree' }).then((res: any) => {
selectTree = res.data
})
let { list: selectTree } = useGetCategoryList()
const defaultProps = {
children: 'children',
label: 'category_name',
value: 'id'
}
const listOptions = $computed(() => {
return {
remote: {
......@@ -47,7 +46,7 @@ const listOptions = $computed(() => {
label: '状态',
options: store.mapList?.filter((item: any) => item.key === 'system_status')[0]?.values
},
{ type: 'select', prop: 'authorized', label: '项目', options: projectList, labelKey: 'name', valueKey: 'id' },
{ type: 'select', prop: 'authorized', label: '项目', options: projectList.value, labelKey: 'name', valueKey: 'id' },
{ prop: 'classification', label: '类别', slots: 'filter-type' },
{ prop: 'search', slots: 'filter-search' }
// { type: 'input', prop: 'category_id', prefixIcon: 'Search' }
......
src/modules/resource/video/api.ts
浏览文件 @ 1145c4b9
......@@ -20,11 +20,6 @@ export function getVideoDetails(params: { id: string }) {
return httpRequest.get('/api/resource/v1/resource/video/view', { params })
}
// 获取项目列表
export function getProjectList(params: { organization_id: string }) {
return httpRequest.get('/api/resource/v1/util/members', { params })
}
// 更新视频
export function updateVideo(data: { id: string; name: string; classification: string; knowledge_points?: string; cover?: string }) {
return httpRequest.post('/api/resource/v1/resource/video/update', data)
......
src/modules/resource/video/components/Operation.vue
浏览文件 @ 1145c4b9
<script setup lang="ts">
import { setDepartment, setPlatform, setStatus, getProjectList, setBelong } from '../api'
import { setDepartment, setPlatform, setStatus, setBelong } from '../api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useMapStore } from '@/stores/map'
const store= useMapStore()
import { useProjectList } from '@/composables/useGetProjectList'
const store = useMapStore()
console.log(store)
const router = useRouter()
......@@ -16,41 +18,49 @@ console.log(path, 'path')
const id = router.currentRoute.value.query.id as string
// 设置部门共享
const handleDepartment = () => {
ElMessageBox.confirm(`
ElMessageBox.confirm(
`
${
props.data.status == 0
? `该操作将会使本视频资源在您所在的部门“${props.data.organ_id_name}”内部共享，管理者不变，其余人员只能共享使用该资源，确认部门共享吗？`
: `该操作将会取消本视频资源在您所在的部门“${props.data.organ_id_name}”内部共享，部门其余人员将不能再看到该共享资源，确认取消部门共享吗？`
}
`, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
setDepartment({ id: id }).then((res: any) => {
if (res.code === 0) {
ElMessage({ message: '更改成功', type: 'success' })
setTimeout(() => {
router.go(0)
}, 500)
}
})
`,
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
setDepartment({ id: id }).then((res: any) => {
if (res.code === 0) {
ElMessage({ message: '更改成功', type: 'success' })
setTimeout(() => {
router.go(0)
}, 500)
}
})
})
}
// 设置平台共享
const handlePlatform = () => {
ElMessageBox.confirm(`
ElMessageBox.confirm(
`
${
props.data.platform_public == 0
? '该操作将会使本视频资源在e-SaaS平台中公开共享供所有老师使用，资源的管理者不变，其余人员只能共享使用该资源，确认公开该资源吗？'
: '该操作将会取消本视频资源在e-SaaS平台中公开共享，平台所有人员将不能再看到该共享资源，确认取消平台共享吗？'
}
`, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
`,
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
setPlatform({ id: id }).then((res: any) => {
if (res.code === 0) {
ElMessage({ message: '更改成功', type: 'success' })
......@@ -64,17 +74,17 @@ const handlePlatform = () => {
// 上下线设置
const handleStatus = () => {
ElMessageBox.confirm(`
${
props.data.status == 0
? '已下线的资源将不能被关联到课程使用，确认下线该资源吗？'
: '确认再次上线该资源吗？'
ElMessageBox.confirm(
`
${props.data.status == 0 ? '已下线的资源将不能被关联到课程使用，确认下线该资源吗？' : '确认再次上线该资源吗？'}
`,
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
}
`, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
).then(() => {
setStatus({ id: id }).then((res: any) => {
if (res.code === 0) {
ElMessage({ message: '更改成功', type: 'success' })
......@@ -91,13 +101,13 @@ const form = reactive({
members: ''
})
const dialogFormVisible = ref(false)
// 人员列表
let members:any = ref([])
let members: any = ref([])
const getMembers = () => {
getProjectList({ organization_id: props.data.organ_id }).then((res: any) => {
members.value = res.data.members
})
members.value = useProjectList(props.data.organ_id)
}
// 点击更改负责人按钮弹窗
const handleMembers = () => {
getMembers()
......@@ -117,7 +127,7 @@ const handlesetBelong = () => {
</script>
<template>
<div class="tool-btn-box" v-if="$route.query.id" style="margin-bottom: 20px;">
<div class="tool-btn-box" v-if="$route.query.id" style="margin-bottom: 20px">
<template v-if="path === '/resource/video/view'">
<router-link :to="`/resource/video/update?id=${id}`">
<div class="btn-item">编辑视频信息</div>
......@@ -126,59 +136,65 @@ const handlesetBelong = () => {
<div class="btn-item">编辑视频课件</div>
</router-link>
</template>
<div class="btn-item" @click="handleDepartment">{{ props.data.department_public == 0 ? '部门共享' : '取消部门共享' }}</div>
<div class="btn-item" @click="handlePlatform">{{ props.data.platform_public == 0 ? '平台共享' : '取消平台共享' }}</div>
<div class="btn-item" @click="handleDepartment">
{{ props.data.department_public == 0 ? '部门共享' : '取消部门共享' }}
</div>
<div class="btn-item" @click="handlePlatform">
{{ props.data.platform_public == 0 ? '平台共享' : '取消平台共享' }}
</div>
<div class="btn-item" @click="handleStatus">{{ props.data.status == 0 ? '资源上线' : '资源下线' }}</div>
<div class="btn-item" @click="handleMembers">更改负责人</div>
</div>
<el-dialog v-model="dialogFormVisible" title="更改负责人" center>
<el-form :model="form">
<el-form-item>
<div style="width:500px">
<div style="width: 500px">
<el-row>
<el-col :span="12"><div class="grid-content ep-bg-purple" />
<el-col :span="12"
><div class="grid-content ep-bg-purple" />
资源创建人: {{ props.data.created_operator_name }}
</el-col>
<el-col :span="12"><div class="grid-content ep-bg-purple-light" />
<el-col :span="12"
><div class="grid-content ep-bg-purple-light" />
创建时间: {{ props.data.created_time }}
</el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content ep-bg-purple" />
<el-col :span="12"
><div class="grid-content ep-bg-purple" />
资源负责人: {{ props.data.belong_operator_name }}
</el-col>
<el-col :span="12"><div class="grid-content ep-bg-purple-light" />
<el-col :span="12"
><div class="grid-content ep-bg-purple-light" />
更新时间: {{ props.data.updated_time }}
</el-col>
</el-row>
</div>
<el-select style="width:500px;margin-top:20px;" v-model="form.members" placeholder="请选择新的资源负责人">
<el-option v-for="item in members" :label="item.name" :value="item.id" :key="item.id"/>
<el-select style="width: 500px; margin-top: 20px" v-model="form.members" placeholder="请选择新的资源负责人">
<el-option v-for="item in members" :label="item.name" :value="item.id" :key="item.id" />
</el-select>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="handlesetBelong"
>确认</el-button
>
<el-button type="primary" @click="handlesetBelong">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<style lang="scss" scoped>
.tool-btn-box{
.tool-btn-box {
display: flex;
justify-content: right;
.btn-item{
.btn-item {
width: 127px;
line-height: 36px;
background: #AA1941;
background: #aa1941;
border-radius: 20px;
margin-right: 10px;
font-size: 14px;
color: #FFFFFF;
color: #ffffff;
text-align: center;
cursor: pointer;
}
......
src/modules/resource/video/views/List.vue
浏览文件 @ 1145c4b9
<script setup lang="ts">
import { getVideoList, getProjectList } from '../api'
// import { getCategoryList } from '@/api/base'
import { getVideoList } from '../api'
import CardListItem from '../components/CardListItem.vue'
import { Expand, Search } from '@element-plus/icons-vue'
import { useCategory } from '@/composables/useCategory'
import { useGetCategoryList } from '@/composables/useGetCategoryList'
import { useProjectList } from '@/composables/useGetProjectList'
// 筛选项目列表
let projectList: any = $ref([])
getProjectList({ organization_id: '' }).then(res => {
projectList = res.data.departments
})
let { list: projectList } = useProjectList()
// 资源出处 tab触发
const tabValue = ref('1')
......@@ -42,7 +39,14 @@ const listOptions = $computed(() => {
{ label: '失效', value: '0' }
]
},
{ type: 'select', prop: 'authorized', label: '项目', options: projectList, labelKey: 'name', valueKey: 'id' },
{
type: 'select',
prop: 'authorized',
label: '项目',
options: projectList.value,
labelKey: 'name',
valueKey: 'id'
},
{ prop: 'classification', label: '类别', slots: 'filter-type' },
{ prop: 'title', slots: 'filter-search' }
],
......@@ -62,11 +66,7 @@ const listOptions = $computed(() => {
})
// 下拉选择tree 视频分类
let { list: selectTree } = useCategory()
console.log(selectTree)
// getCategoryList({ type: 'tree' }).then((res: any) => {
// selectTree = res.data
// })
let { list: selectTree } = useGetCategoryList()
const defaultProps = {
children: 'children',
label: 'category_name',
......
src/modules/resource/video/views/Update.vue
浏览文件 @ 1145c4b9
<script setup lang="ts">
import { PictureFilled, ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import Upload from '../components/Upload.vue'
import Operation from '../components/Operation.vue'
import UploadAuth from '@/components/base/UploadAuth.vue'
import { getCoverList, createVideo, getVideoDetails, updateVideo } from '../api'
import { getCategoryList } from '@/api/base'
import { PictureFilled, ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import Upload from '../components/Upload.vue'
import Operation from '../components/Operation.vue'
import UploadAuth from '@/components/base/UploadAuth.vue'
import { getCoverList, createVideo, getVideoDetails, updateVideo } from '../api'
import { useGetCategoryList } from '@/composables/useGetCategoryList'
// 路由
const router = useRouter()
// 路由
const router = useRouter()
// 下拉选择tree 视频分类
const defaultProps = {
children: 'children',
label: 'category_name',
value: 'id'
}
let selectTree = $ref([])
getCategoryList({ type: 'tree' }).then((res) => {
selectTree = res.data
})
// 下拉选择tree 视频分类
let { list: selectTree } = useGetCategoryList()
const defaultProps = {
children: 'children',
label: 'category_name',
value: 'id'
}
// 视频封面图轮播
let swiperCovers: [{ id: string, url: string }[]] = $ref([[]])
// 获取封面
getCoverList().then(res => {
let arr:object[] = []
swiperCovers = res.data.list.reduce((a: any, b: any, index: number) => {
if (index === 0) {
arr.push(b)
// 视频封面图轮播
let swiperCovers: [{ id: string; url: string }[]] = $ref([[]])
// 获取封面
getCoverList().then(res => {
let arr: object[] = []
swiperCovers = res.data.list.reduce((a: any, b: any, index: number) => {
if (index === 0) {
arr.push(b)
a.push(arr)
} else {
if (index % 8 === 0) {
arr = []
a.push(arr)
} else {
if (index % 8 === 0) {
arr = []
a.push(arr)
} else {
arr.push(b)
}
arr.push(b)
}
return a
}, [])
})
// 获取swiper 自定义左右切换按钮
let swiper = ref()
const swiperChange = (type?: string) => {
type === 'prev' ? swiper.value.prev() : swiper.value.next()
}
const swiperItemHandle = (url: string) => {
form.cover = url
console.log(url)
}
}
return a
}, [])
})
// 获取swiper 自定义左右切换按钮
let swiper = ref()
const swiperChange = (type?: string) => {
type === 'prev' ? swiper.value.prev() : swiper.value.next()
}
const swiperItemHandle = (url: string) => {
form.cover = url
console.log(url)
}
// form表单 提交
const form = reactive({ name: '', source: '2', classification: '', knowledge_points: '', cover: '', source_id: '' })
// 表单验证
const rules = {
name: [{ required: true, message: '请输入标题', trigger: 'blur' }],
classification: [{ required: true, message: '请选择分类', trigger: 'change' }],
source_id: [{ required: true, message: '' }]
}
const ruleFormRef = ref<FormInstance>()
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
if (valid) {
if (!protocol.value) {
ElMessage('请勾选用户协议')
return
}
const id = router.currentRoute.value.query.id as string
if (id !== '' && id) {
const params = Object.assign({ id: id }, form)
updateVideo(params).then((res: any) => {
if (res.code === 0) {
ElMessage({ message: '更新成功', type: 'success' })
setTimeout(() => {
router.push({
path: '/resource/video'
})
}, 1000)
}
})
} else {
createVideo(form).then((res:any) => {
if (res.code === 0) {
ElMessage({ message: '创建成功', type: 'success' })
setTimeout(() => {
router.push({
path: '/resource/video'
})
}, 1000)
}
})
}
// form表单 提交
const form = reactive({ name: '', source: '2', classification: '', knowledge_points: '', cover: '', source_id: '' })
// 表单验证
const rules = {
name: [{ required: true, message: '请输入标题', trigger: 'blur' }],
classification: [{ required: true, message: '请选择分类', trigger: 'change' }],
source_id: [{ required: true, message: '' }]
}
const ruleFormRef = ref<FormInstance>()
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
if (valid) {
if (!protocol.value) {
ElMessage('请勾选用户协议')
return
}
const id = router.currentRoute.value.query.id as string
if (id !== '' && id) {
const params = Object.assign({ id: id }, form)
updateVideo(params).then((res: any) => {
if (res.code === 0) {
ElMessage({ message: '更新成功', type: 'success' })
setTimeout(() => {
router.push({
path: '/resource/video'
})
}, 1000)
}
})
} else {
ElMessage('请完善信息')
console.log('error submit!', fields)
createVideo(form).then((res: any) => {
if (res.code === 0) {
ElMessage({ message: '创建成功', type: 'success' })
setTimeout(() => {
router.push({
path: '/resource/video'
})
}, 1000)
}
})
}
})
}
// 协议勾选
const protocol = ref(false)
// 上传视频过程返回值
const videoUpload = reactive({ code: -1, msg: '', progress: 0, fileName: '' })
// 上传视频回调
const uploadProgress = (res: any) => {
videoUpload.progress = res
}
const upload = (res: any) => {
const { code, msg, name, videoId } = res
videoUpload.code = code
videoUpload.msg = msg
videoUpload.fileName = name
videoUpload.progress = 0
form.source_id = videoId
}
// 判断编辑还是新建
const id = router.currentRoute.value.query.id as string
const statusData = reactive<{
department_public: string,
platform_public: string,
status: string,
organ_id_name: string,
organ_id: string,
created_operator_name: string,
belong_operator_name: string,
created_time: string,
updated_time: string
}>({
department_public: '0',
platform_public: '0',
status: '0',
organ_id_name: '',
organ_id: '',
created_operator_name: '',
belong_operator_name: '',
created_time: '',
updated_time: ''
} else {
ElMessage('请完善信息')
console.log('error submit!', fields)
}
})
if (id !== '' && id) {
getVideoDetails({ id: id }).then(res => {
const key = ['name', 'classification', 'knowledge_points', 'cover', 'source_id']
key.forEach(item => {
form[item] = res.data[item]
})
const {
department_public,
platform_public,
status,
organ_id_name,
organ_id,
created_operator_name,
belong_operator_name,
created_time,
updated_time
} = res.data
statusData.department_public = department_public
statusData.platform_public = platform_public
statusData.status = status
statusData.organ_id_name = organ_id_name
statusData.organ_id = organ_id
statusData.created_operator_name = created_operator_name
statusData.belong_operator_name = belong_operator_name
statusData.created_time = created_time
statusData.updated_time = updated_time
}
// 协议勾选
const protocol = ref(false)
// 上传视频过程返回值
const videoUpload = reactive({ code: -1, msg: '', progress: 0, fileName: '' })
// 上传视频回调
const uploadProgress = (res: any) => {
videoUpload.progress = res
}
const upload = (res: any) => {
const { code, msg, name, videoId } = res
videoUpload.code = code
videoUpload.msg = msg
videoUpload.fileName = name
videoUpload.progress = 0
form.source_id = videoId
}
// 判断编辑还是新建
const id = router.currentRoute.value.query.id as string
const statusData = reactive<{
department_public: string
platform_public: string
status: string
organ_id_name: string
organ_id: string
created_operator_name: string
belong_operator_name: string
created_time: string
updated_time: string
}>({
department_public: '0',
platform_public: '0',
status: '0',
organ_id_name: '',
organ_id: '',
created_operator_name: '',
belong_operator_name: '',
created_time: '',
updated_time: ''
})
if (id !== '' && id) {
getVideoDetails({ id: id }).then(res => {
const key = ['name', 'classification', 'knowledge_points', 'cover', 'source_id']
key.forEach(item => {
form[item] = res.data[item]
})
}
const {
department_public,
platform_public,
status,
organ_id_name,
organ_id,
created_operator_name,
belong_operator_name,
created_time,
updated_time
} = res.data
statusData.department_public = department_public
statusData.platform_public = platform_public
statusData.status = status
statusData.organ_id_name = organ_id_name
statusData.organ_id = organ_id
statusData.created_operator_name = created_operator_name
statusData.belong_operator_name = belong_operator_name
statusData.created_time = created_time
statusData.updated_time = updated_time
})
}
</script>
<template>
<AppCard title="新建视频资源">
<Operation :data="statusData" style="margin-bottom: 20px;"></Operation>
<Operation :data="statusData" style="margin-bottom: 20px"></Operation>
<el-form ref="ruleFormRef" :model="form" :rules="rules" style="width: 70%">
<el-form-item label="视频文件：" prop="source_id" v-if="id == '' || id == undefined">
<div>
......@@ -193,21 +189,19 @@
<!-- <div class="view">查阅</div> -->
</div>
</div>
<div class="tips">推荐视频格式：帧率为25fps\输出码率为4M\输出格式为mp4，建议采用格式工厂等工具处理后上传。</div>
<div class="tips">
推荐视频格式：帧率为25fps\输出码率为4M\输出格式为mp4，建议采用格式工厂等工具处理后上传。
</div>
</div>
</el-form-item>
<el-form-item label="视频名称：" prop="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="视频分类：" prop="classification">
<el-tree-select :props="defaultProps" style="width:100%" v-model="form.classification" :data="selectTree" />
<el-tree-select :props="defaultProps" style="width: 100%" v-model="form.classification" :data="selectTree" />
</el-form-item>
<el-form-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;知识点：">
<el-input
v-model="form.knowledge_points"
:rows="2"
type="textarea"
/>
<el-input v-model="form.knowledge_points" :rows="2" type="textarea" />
</el-form-item>
<el-form-item label="&nbsp;&nbsp;视频封面：">
<div class="video-cover">
......@@ -215,25 +209,37 @@
<el-icon :size="50" color="#ccc" v-if="form.cover == ''">
<PictureFilled></PictureFilled>
</el-icon>
<img :src="form.cover" v-else>
<img :src="form.cover" v-else />
</div>
<div class="video-cover_right">
<Upload v-model="form.cover"></Upload>
<div class="list">
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/upload-video-icon.png" class="icon">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/upload-video-icon.png"
class="icon"
/>
<div class="text">该图片作为课程的宣传图，用于课程主要的显示</div>
</div>
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/upload-video-icon.png" class="icon">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/upload-video-icon.png"
class="icon"
/>
<div class="text">支持jpg/jpeg/gif/png格式</div>
</div>
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/upload-video-icon.png" class="icon">
<div class="text">支持小鱼4M，最好宽240*高175*及以上尺寸 </div>
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/upload-video-icon.png"
class="icon"
/>
<div class="text">支持小鱼4M，最好宽240*高175*及以上尺寸</div>
</div>
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/upload-video-icon.png" class="icon">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/upload-video-icon.png"
class="icon"
/>
<div class="text">想可以自己上传图片，也可以从下面这些图片中选择使用</div>
</div>
</div>
......@@ -243,7 +249,13 @@
<div class="block text-center" v-if="swiperCovers.length">
<el-carousel height="202px" :autoplay="false" arrow="never" trigger="click" ref="swiper">
<el-carousel-item v-for="(item, index) in swiperCovers" :key="index" class="cover-list">
<img @click="swiperItemHandle(cItem.url)" :key="cItem.id" v-for="cItem in item" :src="cItem.url" class="cover-list_item">
<img
@click="swiperItemHandle(cItem.url)"
:key="cItem.id"
v-for="cItem in item"
:src="cItem.url"
class="cover-list_item"
/>
</el-carousel-item>
</el-carousel>
</div>
......@@ -264,59 +276,59 @@
</AppCard>
</template>
<style lang="scss" scoped>
.tips{
.tips {
font-size: 12px;
line-height: 100%;
color: #999999;
margin-top: 8px;
}
.tool-btn-box{
.tool-btn-box {
display: flex;
justify-content: right;
.btn-item{
.btn-item {
width: 127px;
line-height: 36px;
background: #AA1941;
background: #aa1941;
border-radius: 20px;
margin-right: 10px;
font-size: 14px;
color: #FFFFFF;
color: #ffffff;
text-align: center;
}
}
.demo-progress{
.demo-progress {
width: 350px;
}
.video-cover{
.video-cover {
display: flex;
.img-box{
.img-box {
width: 208px;
height: 130px;
border-radius: 4px;
background: #F7F7F7;
background: #f7f7f7;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
img{
img {
width: 100%;
// height: 100%;
display: block;
}
}
.video-cover_right{
.video-cover_right {
margin-left: 20px;
.list{
.item{
.list {
.item {
display: flex;
align-items: center;
margin-top: 12px;
img{
img {
width: 9px;
display: block;
margin-right: 5px;
}
.text{
.text {
font-size: 12px;
color: #999999;
line-height: 100%;
......@@ -325,58 +337,58 @@
}
}
}
.swiper-box{
.swiper-box {
min-width: 660px;
margin-top: 20px;
padding: 0 40px;
position: relative;
.arrow{
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
color: #D5D5D5;
color: #d5d5d5;
cursor: pointer;
&.left{
&.left {
left: 0;
}
&.right{
&.right {
right: 10px;
}
}
.cover-list{
.cover-list {
display: flex;
flex-wrap: wrap;
.cover-list_item{
.cover-list_item {
display: block;
width: 155px;
height: 96px;
margin: 0 10px 10px 0;
border-radius: 4px;
border-radius: 4px;
cursor: pointer;
}
}
}
:deep(.el-carousel__indicators--horizontal){
:deep(.el-carousel__indicators--horizontal) {
display: none;
}
.protocol-box{
.protocol-box {
font-size: 14px;
line-height: 24px;
padding-left: 90px;
padding-top: 20px;
color: #666666;
span{
color: #AA1941;
span {
color: #aa1941;
}
}
.btn-box{
.btn-box {
display: flex;
margin-top: 20px;
margin-left: 90px;
.confirm{
.confirm {
width: 94px;
background: #AA1941;
background: #aa1941;
border-radius: 20px;
text-align: center;
line-height: 36px;
......@@ -384,42 +396,42 @@
margin-right: 26px;
cursor: pointer;
}
.cancel{
.cancel {
width: 94px;
line-height: 36px;
border: 1px solid #AA1941;
border: 1px solid #aa1941;
border-radius: 20px;
text-align: center;
color: #AA1941;
color: #aa1941;
cursor: pointer;
}
}
.upload-video{
.upload-video {
display: flex;
align-items: center;
.upload-btn{
.upload-btn {
position: relative;
width: 94px;
line-height: 36px;
background: rgba(250, 223, 230, 0.39);
border: 1px solid #AA1941;
border: 1px solid #aa1941;
border-radius: 20px;
font-size: 14px;
color: #AA1941;
color: #aa1941;
margin-right: 30px;
text-align: center;
}
.video-info{
.video-info {
display: flex;
.name{
.name {
color: #333333;
font-size: 16px;
line-height: 100%;
}
.view{
.view {
font-size: 16px;
line-height: 100%;
color: #399EE8;
color: #399ee8;
margin-left: 20px;
cursor: pointer;
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论