1266 lines
39 KiB
Vue
1266 lines
39 KiB
Vue
<template>
|
|
|
|
<div class="ropeJumping">
|
|
<div class="left">
|
|
<p class="name">课程架构</p>
|
|
<el-menu class="elMenu" :default-openeds="['1']" :default-active="data.defaultActive" @open="handleOpen"
|
|
@select="handleClick">
|
|
<template v-for="(level, index) in data.menuData" :key="index">
|
|
<el-sub-menu :index="level.index" class="title">
|
|
<template #title>
|
|
<p>{{ level.title }}</p>
|
|
</template>
|
|
<el-menu-item-group>
|
|
<template v-for="item in level.children" :key="item.index">
|
|
<el-menu-item :index="item.index">{{ item.name }}</el-menu-item>
|
|
</template>
|
|
</el-menu-item-group>
|
|
</el-sub-menu>
|
|
</template>
|
|
</el-menu>
|
|
</div>
|
|
<div class="right">
|
|
<div class="top">
|
|
<div class="leftSearch">
|
|
<div class="one">
|
|
<p>动作:</p>
|
|
<el-input v-model="data.iptValue" style="width: 240px" placeholder="请输入" />
|
|
</div>
|
|
</div>
|
|
<div class="rightBtn">
|
|
<p class="reset" @click="reset">重置</p>
|
|
<p class="search" @click="search">查询</p>
|
|
<p v-for="(item, index) in handelData" :key="index" :class="item.className" @click="btnClick(item.engName)">{{
|
|
item.chinName }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<el-table v-if="data.tableNeed.refresh" :data="data.tableNeed.tableData" highlight-current-row
|
|
:header-cell-style="{ 'text-align': 'center', 'font-size': '12px', 'color': '#3F404A', padding: '3px', background: '#F8F8FA', height: '50px' }"
|
|
:cell-style="getCellStyles" :row-style="{ height: '0px' }">
|
|
<el-table-column v-for="(item, index) in data.tableNeed.tableLabel" :key="index" :label="item.label"
|
|
:prop="item.prop" />
|
|
<el-table-column label="操作">
|
|
<template v-slot="{ row }">
|
|
<div class="operate">
|
|
<p class="toView" @click="classManage(row)">课程管理</p>
|
|
<p class="toView" @click="toView(row)">课程详情</p>
|
|
<p class="toView" @click="edit(row)">编辑</p>
|
|
<p class="toView" @click="deleteData(row)">删除</p>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- <el-pagination class="pagination" :current-page="data.tableNeed.pageIndex" :page-size="data.tableNeed.pageSize"
|
|
:page-sizes="[10, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper"
|
|
:total="data.tableNeed.total" @size-change="handleSizeChange" @current-change="changeSize" /> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<commonDialog :list="data.dialogData" @cancle="cancle(0)" @confirm="confirm(0)">
|
|
<template #cont>
|
|
<div class="dialogManage">
|
|
<el-form ref="formRef" :model="data.dialogData.ruleForm" :rules="data.dialogData.rules" label-width="120px"
|
|
class="demo-ruleForm" size="default" status-icon>
|
|
<el-form-item label="动作名称:" prop="name">
|
|
<el-input v-model="data.dialogData.ruleForm.name" style="width: 240px;" placeholder="请输入动作名称"
|
|
show-word-limit type="text" />
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
</commonDialog>
|
|
<!-- 基本 -->
|
|
<commonDialog :list="data.detailEditDialogData" @cancle="cancle(1)" @confirm="confirm(1)">
|
|
<template #cont>
|
|
<div class="dialogManage">
|
|
<div class="top">
|
|
<p class="title">{{ data.clickCont.actionName }}</p>
|
|
<p class="title">动作示范:</p>
|
|
<el-form ref="detailEditDialogDataformRef" :model="data.detailEditDialogData.ruleForm1" label-width="120px"
|
|
class="demo-ruleForm" size="default" status-icon>
|
|
<el-form-item label="上传视频:" prop="name">
|
|
<div class="tab">
|
|
<div class="leftOne" v-if="data.showClose">
|
|
<!-- <el-upload v-if="!data.detailEditDialogData.videoUrl" class="upload-demo" ref="uploadref" drag
|
|
action="" accept="" :limit="1" :before-upload="(file) => handleBeforeUpload(file, '动作示范')">
|
|
<img src="@/assets/images/allImg/video.png" alt="">
|
|
<div class="el-upload__text">
|
|
将文件拖拽到这里或<em>点击上传</em>
|
|
</div>
|
|
|
|
</el-upload> -->
|
|
<el-input v-model="data.detailEditDialogData.videoUrl" v-if="!data.detailEditDialogData.videoUrl" placeholder="请输入视频链接"></el-input>
|
|
<div class="video" v-else>
|
|
<video :src="data.detailEditDialogData.videoUrl" controls width="204" height="200"
|
|
style="display: block; object-fit: cover;" />
|
|
<div v-if="data.showClose" class="dialogClose" @click="closeDiaVideo2('动作示范')">
|
|
<img src="@/assets/images/allImg/deleteVideo.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="leftOne" v-else>
|
|
<div class="video">
|
|
<video v-if="data.detailEditDialogData.videoUrl" :src="data.detailEditDialogData.videoUrl" controls
|
|
width="204" height="200" style="display: block; object-fit: cover;" />
|
|
<img v-else src="@/assets/images/allImg/noVideo.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="top">
|
|
<p class="title">要领讲解:</p>
|
|
<el-form ref="detailEditDialogDataformRef" :model="data.detailEditDialogData.ruleForm1" label-width="120px"
|
|
class="demo-ruleForm" size="default" status-icon>
|
|
<el-form-item label="上传视频:" prop="name">
|
|
<div class="tab">
|
|
<div class="leftOne" v-if="data.showClose">
|
|
<!-- <el-upload v-if="!data.detailEditDialogData.videoUrl1" class="upload-demo" ref="uploadref" drag
|
|
action="" accept="" :limit="1" :before-upload="(file) => handleBeforeUpload(file, '要领讲解')">
|
|
<img src="@/assets/images/allImg/video.png" alt="">
|
|
<div class="el-upload__text">
|
|
将文件拖拽到这里或<em>点击上传</em>
|
|
</div>
|
|
|
|
</el-upload> -->
|
|
<el-input v-model="data.detailEditDialogData.videoUrl1" v-if="!data.detailEditDialogData.videoUrl1" placeholder="请输入视频链接"></el-input>
|
|
<div class="video" v-else>
|
|
<video :src="data.detailEditDialogData.videoUrl1" controls width="204" height="200"
|
|
style="display: block; object-fit: cover;" />
|
|
<div v-if="data.showClose" class="dialogClose" @click="closeDiaVideo2('要领讲解')">
|
|
<img src="@/assets/images/allImg/deleteVideo.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="leftOne" v-else>
|
|
<div class="video" >
|
|
<video v-if="data.detailEditDialogData.videoUrl1" :src="data.detailEditDialogData.videoUrl1" controls width="204" height="200"
|
|
style="display: block; object-fit: cover;" />
|
|
<img v-else src="@/assets/images/allImg/noVideo.png" alt="">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="top">
|
|
<p class="title">练习方法:</p>
|
|
<el-form ref="detailEditDialogDataformRef" :model="data.detailEditDialogData.ruleForm1" label-width="120px"
|
|
class="demo-ruleForm" size="default" status-icon>
|
|
<el-form-item label="上传视频:" prop="name">
|
|
<div class="tab">
|
|
<div class="leftOne" v-if="data.showClose">
|
|
<!-- <el-upload v-if="!data.detailEditDialogData.videoUrl2" class="upload-demo" ref="uploadref" drag
|
|
action="" accept="" :limit="1" :before-upload="(file) => handleBeforeUpload(file, '练习方法')">
|
|
<img src="@/assets/images/allImg/video.png" alt="">
|
|
<div class="el-upload__text">
|
|
将文件拖拽到这里或<em>点击上传</em>
|
|
</div>
|
|
|
|
</el-upload> -->
|
|
<el-input v-model="data.detailEditDialogData.videoUrl2" v-if="!data.detailEditDialogData.videoUrl2" placeholder="请输入视频链接"></el-input>
|
|
<div class="video" v-else>
|
|
<video :src="data.detailEditDialogData.videoUrl2" controls width="204" height="200"
|
|
style="display: block; object-fit: cover;" />
|
|
<div v-if="data.showClose" class="dialogClose" @click="closeDiaVideo2('练习方法')">
|
|
<img src="@/assets/images/allImg/deleteVideo.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="leftOne" v-else>
|
|
<div class="video" >
|
|
<video v-if="data.detailEditDialogData.videoUrl2" :src="data.detailEditDialogData.videoUrl2" controls width="204" height="200"
|
|
style="display: block; object-fit: cover;" />
|
|
<img v-else src="@/assets/images/allImg/noVideo.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<!-- <div class="top">
|
|
<p class="title">达标标准:</p>
|
|
<el-form ref="detailEditDialogDataformRef" :model="data.detailEditDialogData.ruleForm1" label-width="120px"
|
|
class="demo-ruleForm" size="default" status-icon>
|
|
<el-form-item label="上传图片:" prop="name">
|
|
<div class="tab">
|
|
<div class="leftOne">
|
|
<el-upload v-if="!data.detailEditDialogData.videoUrl3" class="upload-demo"
|
|
style="width: 204px;height: 200px;" ref="uploadref" drag action="" accept="image/*" :limit="1"
|
|
:before-upload="(file) => handleBeforeUpload(file, '达标标准')">
|
|
<el-icon class="avatar-uploader-icon">
|
|
<Plus />
|
|
</el-icon>
|
|
<div class="el-upload__text">
|
|
上传
|
|
</div>
|
|
</el-upload>
|
|
<div class="video" v-else>
|
|
<img :src="`${data.detailEditDialogData.videoUrl3}?t=${new Date().getTime()}`"
|
|
style="display: inline-block; width: 204px;height: 200px;object-fit: contain;" alt="">
|
|
<div v-if="data.showClose" class="dialogClose" @click="closeDiaVideo2('达标标准')">
|
|
<img src="@/assets/images/allImg/deleteVideo.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div> -->
|
|
</div>
|
|
</template>
|
|
</commonDialog>
|
|
<!-- 专项 -->
|
|
<commonDialog :list="data.detailEditDialogData1" @cancle="cancle(2)" @confirm="confirm(2)">
|
|
<template #cont>
|
|
<div class="dialogManage">
|
|
<div class="top">
|
|
<p class="title">{{ data.clickCont.actionName }}</p>
|
|
<el-form ref="detailEditDialogDataformRef" :model="data.detailEditDialogData1.ruleForm1" label-width="120px"
|
|
class="demo-ruleForm" size="default" status-icon>
|
|
<el-form-item label="上传视频:" prop="name">
|
|
<div class="tab">
|
|
<div class="leftOne" v-if="data.showClose">
|
|
<!-- <el-upload v-if="!data.detailEditDialogData1.videoUrl" class="upload-demo" ref="uploadref" drag
|
|
action="" accept="" :limit="1" :before-upload="(file) => handleBeforeUpload(file, '专项')">
|
|
<img src="@/assets/images/allImg/video.png" alt="">
|
|
<div class="el-upload__text">
|
|
将文件拖拽到这里或<em>点击上传</em>
|
|
</div>
|
|
|
|
</el-upload> -->
|
|
<el-input v-model="data.detailEditDialogData1.videoUrl" v-if="!data.detailEditDialogData1.videoUrl" placeholder="请输入视频链接"></el-input>
|
|
<div class="video" v-else>
|
|
<video :src="data.detailEditDialogData1.videoUrl" controls width="204" height="200"
|
|
style="display: block; object-fit: cover;" />
|
|
<div v-if="data.showClose" class="dialogClose" @click="closeDiaVideo2('专项')">
|
|
<img src="@/assets/images/allImg/deleteVideo.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="leftOne" v-else>
|
|
<div class="video">
|
|
<video v-if="data.detailEditDialogData1.videoUrl" :src="data.detailEditDialogData1.videoUrl" controls width="204" height="200"
|
|
style="display: block; object-fit: cover;" />
|
|
<img v-else src="@/assets/images/allImg/noVideo.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</commonDialog>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted, ref } from 'vue'
|
|
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
|
|
import * as _api from '@/api/TrainingData.js';
|
|
import commonDialog from '@/components/commonDialog/index.vue';
|
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
|
import { useRoute } from 'vue-router';
|
|
import { useStore } from 'vuex';
|
|
import axios from 'axios'
|
|
import { Plus } from '@element-plus/icons-vue'
|
|
import { ElLoading } from 'element-plus';
|
|
const loading = ref(null)
|
|
const route = useRoute();
|
|
const globalId = ref(null);
|
|
const currentRoute = route.path; //获取当前页面路由
|
|
const store = useStore();
|
|
const formRef = ref(null)
|
|
let buttons = store.getters.getPermission(currentRoute).permission;
|
|
const form = new FormData();
|
|
const form1 = new FormData();
|
|
const form2 = new FormData();
|
|
const form3 = new FormData();
|
|
const form4 = new FormData();
|
|
|
|
globalId.value = route.query.id;
|
|
|
|
let contrast = {
|
|
'新增': 'Add',
|
|
} //对照表
|
|
let handelData = ref<any>([]) //接收处理后的按钮数据
|
|
buttons.map((i) => {
|
|
handelData.value.push({
|
|
engName: i,
|
|
chinName: '',
|
|
className: i
|
|
})
|
|
})
|
|
//给每个按钮添加中文名
|
|
for (let i in contrast) {
|
|
handelData.value.map((v) => {
|
|
console.log(v, 'v');
|
|
if (v.engName == contrast[i]) {
|
|
v.chinName = i
|
|
}
|
|
})
|
|
}
|
|
//按钮排序
|
|
const customOrder = {
|
|
'Add': 1,
|
|
};
|
|
handelData.value.sort((a, b) => {
|
|
const orderA = customOrder[a.engName];
|
|
const orderB = customOrder[b.engName];
|
|
|
|
if (orderA < orderB) {
|
|
return -1;
|
|
} else if (orderA > orderB) {
|
|
return 1;
|
|
} else {
|
|
return 0;
|
|
}
|
|
});
|
|
const data = ref({
|
|
menuData: [],
|
|
iptValue: '',
|
|
tableNeed: {
|
|
refresh: false,
|
|
pageIndex: 1,
|
|
pageSize: 100000,
|
|
total: 0,
|
|
tableLabel: [
|
|
{
|
|
label: "序号",
|
|
prop: "ind",
|
|
|
|
},
|
|
{
|
|
label: "动作",
|
|
prop: "actionName",
|
|
},
|
|
],
|
|
tableData: [
|
|
],
|
|
},
|
|
dialogData: {
|
|
dialogVisible: false,
|
|
width: 800,
|
|
title: '新增',
|
|
|
|
ruleForm: {
|
|
name: '',
|
|
},
|
|
rules: {
|
|
name: [{
|
|
required: true,
|
|
message: '请输入动作名称',
|
|
trigger: 'blur',
|
|
},],
|
|
|
|
},
|
|
},
|
|
detailEditDialogData: {
|
|
dialogVisible: false,
|
|
width: 800,
|
|
title: '基本技能课程管理',
|
|
ruleForm: {
|
|
name: '',
|
|
|
|
},
|
|
ruleForm1: {
|
|
name: '',
|
|
},
|
|
videoUrl: null,
|
|
videoUrl1: null,
|
|
videoUrl2: null,
|
|
videoUrl3: null,
|
|
|
|
},
|
|
detailEditDialogData1: {
|
|
dialogVisible: false,
|
|
width: 800,
|
|
title: '专项体能课程管理',
|
|
ruleForm: {
|
|
name: '',
|
|
|
|
},
|
|
ruleForm1: {
|
|
name: '',
|
|
},
|
|
videoUrl: null,
|
|
|
|
},
|
|
apiData: [],
|
|
currentData: {},
|
|
currentIndex: 1,
|
|
whichOne: 'basic',
|
|
clickCont: {},
|
|
showClose: true,
|
|
currentTableData: {},
|
|
defaultActive: '1-1'
|
|
})
|
|
function reset() {
|
|
data.value.iptValue = ''
|
|
data.value.tableNeed.refresh = false
|
|
GetSpecialLevelListApi(globalId.value, data.value.tableNeed.pageIndex, data.value.tableNeed.pageSize, data.value.whichOne)
|
|
}
|
|
function search() {
|
|
|
|
let k = data.value.tableNeed.tableData.filter(item => item.actionName.includes(data.value.iptValue))
|
|
console.log(k, 'kkkkkkk')
|
|
data.value.tableNeed.tableData = k
|
|
// GetSpecialLevelListApi(1, data.value.tableNeed.pageIndex, data.value.tableNeed.pageSize, data.value.whichOne)
|
|
}
|
|
const openFullScreen = () => {
|
|
loading.value = ElLoading.service({
|
|
lock: true,
|
|
text: 'Loading',
|
|
background: 'rgba(0, 0, 0, 0.7)',
|
|
})
|
|
}
|
|
function toView(e) {
|
|
console.log(e, 'toView')
|
|
data.value.detailEditDialogData.title = '基本技能课程详情'
|
|
if (data.value.whichOne === 'basic') {
|
|
data.value.detailEditDialogData.videoUrl = e.actionVideoPath
|
|
data.value.detailEditDialogData.videoUrl1 = e.explainVideoPath
|
|
data.value.detailEditDialogData.videoUrl2 = e.exerciseVideoPath
|
|
data.value.detailEditDialogData.videoUrl3 = e.standardVideoPath
|
|
data.value.detailEditDialogData.dialogVisible = true
|
|
data.value.showClose = false
|
|
} else {
|
|
data.value.detailEditDialogData1.dialogVisible = true
|
|
data.value.detailEditDialogData1.videoUrl = e.actionVideoPath
|
|
data.value.showClose = false
|
|
}
|
|
}
|
|
function classManage(e) {
|
|
data.value.clickCont = e
|
|
data.value.detailEditDialogData.title = '基本技能课程管理'
|
|
if (data.value.whichOne === 'basic') {
|
|
data.value.detailEditDialogData.videoUrl = e.actionVideoPath
|
|
data.value.detailEditDialogData.videoUrl1 = e.explainVideoPath
|
|
data.value.detailEditDialogData.videoUrl2 = e.exerciseVideoPath
|
|
data.value.detailEditDialogData.videoUrl3 = e.standardVideoPath
|
|
data.value.detailEditDialogData.dialogVisible = true
|
|
} else {
|
|
data.value.detailEditDialogData1.dialogVisible = true
|
|
data.value.detailEditDialogData1.videoUrl = e.actionVideoPath
|
|
}
|
|
|
|
}
|
|
function edit(e) {
|
|
console.log(e, 'edit')
|
|
data.value.dialogData.title = '编辑'
|
|
data.value.currentTableData = e
|
|
data.value.dialogData.dialogVisible = true;
|
|
data.value.dialogData.ruleForm.name = e.actionName;
|
|
|
|
|
|
}
|
|
function deleteData(e) {
|
|
console.log(e, 'deleteData')
|
|
// return
|
|
ElMessageBox.confirm(
|
|
'确定要删除吗?',
|
|
'警告',
|
|
{
|
|
confirmButtonText: '确认',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
}
|
|
)
|
|
.then(() => {
|
|
DeleteSpecialActionApi(e.id)
|
|
})
|
|
.catch(() => {
|
|
ElMessage({
|
|
type: 'info',
|
|
message: '取消删除',
|
|
})
|
|
})
|
|
|
|
}
|
|
function closeDiaVideo2(val) {
|
|
console.log(val, 'val')
|
|
switch (val) {
|
|
case '动作示范':
|
|
data.value.detailEditDialogData.videoUrl = null
|
|
break;
|
|
case '要领讲解':
|
|
data.value.detailEditDialogData.videoUrl1 = null
|
|
break;
|
|
case '练习方法':
|
|
data.value.detailEditDialogData.videoUrl2 = null
|
|
break;
|
|
case '达标标准':
|
|
data.value.detailEditDialogData.videoUrl3 = null
|
|
break;
|
|
case '专项':
|
|
data.value.detailEditDialogData1.videoUrl = null
|
|
break;
|
|
}
|
|
}
|
|
async function handleBeforeUpload(file, val) {
|
|
console.log(val, 'valllll')
|
|
console.log(file, 'fileeeee123e')
|
|
|
|
switch (val) {
|
|
case '动作示范':
|
|
form.delete('file')
|
|
form.append("file", file);
|
|
let k = {
|
|
levelId: data.value.currentData.id,
|
|
videoName: val,
|
|
actionId: data.value.clickCont.id,
|
|
}
|
|
const res = await uploadList(k, form)
|
|
console.log(res, 'uploadList')
|
|
data.value.detailEditDialogData.videoUrl = res
|
|
console.log(data.value.detailEditDialogData.videoUrl, 'data.value.detailEditDialogData.videoUrl')
|
|
break;
|
|
case '要领讲解':
|
|
form1.delete('file')
|
|
form1.append("file", file);
|
|
let s = {
|
|
levelId: data.value.currentData.id,
|
|
videoName: val,
|
|
actionId: data.value.clickCont.id,
|
|
}
|
|
const res1 = await uploadList(s, form1)
|
|
console.log(res1, 'uploadList')
|
|
data.value.detailEditDialogData.videoUrl1 = res1
|
|
console.log(data.value.detailEditDialogData.videoUrl1, 'data.value.detailEditDialogData.videoUrl')
|
|
break;
|
|
case '练习方法':
|
|
form2.delete('file')
|
|
form2.append("file", file);
|
|
let m = {
|
|
levelId: data.value.currentData.id,
|
|
videoName: val,
|
|
actionId: data.value.clickCont.id,
|
|
}
|
|
const res2 = await uploadList(m, form2)
|
|
console.log(res2, 'uploadList')
|
|
data.value.detailEditDialogData.videoUrl2 = res2
|
|
console.log(data.value.detailEditDialogData.videoUrl2, 'data.value.detailEditDialogData.videoUrl')
|
|
break;
|
|
case '达标标准':
|
|
form3.delete('file')
|
|
form3.append("file", file);
|
|
let n = {
|
|
levelId: data.value.currentData.id,
|
|
videoName: val,
|
|
actionId: data.value.clickCont.id,
|
|
}
|
|
const res3 = await uploadList(n, form3)
|
|
console.log(res3, 'uploadList')
|
|
data.value.detailEditDialogData.videoUrl3 = res3
|
|
console.log(data.value.detailEditDialogData.videoUrl3, 'data.value.detailEditDialogData.videoUrl')
|
|
break;
|
|
case '专项':
|
|
form4.delete('file')
|
|
form4.append("file", file);
|
|
let q = {
|
|
levelId: data.value.currentData.id,
|
|
videoName: val,
|
|
actionId: data.value.clickCont.id,
|
|
}
|
|
const res4 = await uploadList(q, form4)
|
|
console.log(res4, 'uploadList')
|
|
data.value.detailEditDialogData1.videoUrl = res4
|
|
console.log(data.value.detailEditDialogData1.videoUrl, 'data.value.detailEditDialogData.videoUrl')
|
|
break;
|
|
}
|
|
|
|
return false; // 阻止自动上传
|
|
};
|
|
async function uploadList(val, datas) {
|
|
console.log(val, 'vallllll')
|
|
console.log(datas, 'datsssssss')
|
|
openFullScreen()
|
|
const options = {
|
|
method: 'POST',
|
|
url: `/api/Special/SpecialUploadVideo?levelId=${val.levelId}&videoName=${val.videoName}&actionId=${val.actionId}`,
|
|
headers: {
|
|
Accept: '',
|
|
'content-type': 'multipart/form-data; boundary=---011000010111000001101001'
|
|
},
|
|
data: datas
|
|
};
|
|
|
|
try {
|
|
const response = await axios.request(options);
|
|
if (response.data.code === 200) {
|
|
console.log(response.data.data, 'uploadList');
|
|
loading.value.close()
|
|
return response.data.data; // 返回 response.data.data
|
|
} else {
|
|
throw new Error(`Error: ${response.data.message}`);
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
throw error; // 重新抛出错误，以便调用方可以处理
|
|
}
|
|
}
|
|
function getCellStyles({ row, column, rowIndex, columnIndex }) {
|
|
const prop = column.property;
|
|
return {
|
|
height: 0,
|
|
textAlign: 'center',
|
|
};
|
|
}
|
|
const handleOpen = (key: string, keyPath: string[]) => {
|
|
console.log(key, keyPath)
|
|
}
|
|
function btnClick(engName: string) {
|
|
console.log(engName)
|
|
switch (engName) {
|
|
case 'Add':
|
|
data.value.dialogData.dialogVisible = true;
|
|
break;
|
|
}
|
|
}
|
|
function cancle(val) {
|
|
|
|
if (val == 0) {
|
|
data.value.dialogData.dialogVisible = false;
|
|
resetForm(formRef.value)
|
|
} else if (val == 1) {
|
|
data.value.detailEditDialogData.dialogVisible = false;
|
|
} else {
|
|
data.value.detailEditDialogData1.dialogVisible = false;
|
|
|
|
}
|
|
data.value.showClose = true
|
|
}
|
|
function confirm(val) {
|
|
if (data.value.dialogData.title == '新增') {
|
|
if (val == 0) {
|
|
submitForm(formRef.value)
|
|
} else if (val == 1) {
|
|
console.log(data.value.clickCont, 'data.value.clickCont,')
|
|
// return
|
|
let params = {
|
|
id: data.value.clickCont.id,
|
|
// "actionType": 1,
|
|
"actionVideoPath": data.value.detailEditDialogData.videoUrl,
|
|
"explainVideoPath": data.value.detailEditDialogData.videoUrl1,
|
|
"exerciseVideoPath": data.value.detailEditDialogData.videoUrl2,
|
|
"standardVideoPath": data.value.detailEditDialogData.videoUrl3,
|
|
}
|
|
|
|
ModifySpecialActionVideoApi(params, 1)
|
|
} else {
|
|
let params = {
|
|
id: data.value.clickCont.id,
|
|
// "actionType": 2,
|
|
"actionVideoPath": data.value.detailEditDialogData1.videoUrl
|
|
}
|
|
ModifySpecialActionVideoApi(params, 2)
|
|
}
|
|
} else {
|
|
let params =
|
|
{
|
|
"id": data.value.currentTableData.id,
|
|
"actionName": data.value.dialogData.ruleForm.name,
|
|
}
|
|
ModifySpecialAction(params)
|
|
}
|
|
|
|
data.value.showClose = true
|
|
|
|
}
|
|
const submitForm = async (formEl) => {
|
|
if (!formEl) return
|
|
await formEl.validate((valid, fields) => {
|
|
if (valid) {
|
|
if (data.value.dialogData.title == '新增') {
|
|
console.log(data.value.currentData,'data.value.currentData')
|
|
let params = {
|
|
"levelId": data.value.currentData.id,
|
|
"actionName": data.value.dialogData.ruleForm.name,
|
|
"actionType": data.value.currentIndex,
|
|
}
|
|
console.log(data.value.currentData, 'data.value.currentData')
|
|
AddList(params, 0)
|
|
} else if (data.value.dialogData.title == '编辑') {
|
|
|
|
}
|
|
|
|
} else {
|
|
console.log('error submit!', fields)
|
|
}
|
|
})
|
|
}
|
|
const resetForm = (formEl) => {
|
|
if (!formEl) return
|
|
formEl.resetFields()
|
|
data.value.dialogData.title = '新增'
|
|
|
|
}
|
|
onMounted(() => {
|
|
GetSpecialLevelListApi(globalId.value, data.value.tableNeed.pageIndex, data.value.tableNeed.pageSize, data.value.whichOne)
|
|
})
|
|
const formatMenuData = (levels) => {
|
|
return levels.map((level, levelIndex) => {
|
|
// 固定的子项
|
|
const children = [
|
|
{
|
|
index: `${levelIndex + 1}-1`,
|
|
name: "基本技能",
|
|
},
|
|
{
|
|
index: `${levelIndex + 1}-2`,
|
|
name: "专项体能",
|
|
},
|
|
];
|
|
|
|
return {
|
|
index: `${levelIndex + 1}`, // 主菜单索引
|
|
title: level.levelName, // 主菜单标题
|
|
children, // 固定子项
|
|
};
|
|
});
|
|
};
|
|
const handleClick = (index: string) => {
|
|
data.value.defaultActive = index
|
|
|
|
const [levelIndex, childIndex] = index.split("-").map(Number);
|
|
|
|
data.value.currentIndex = childIndex
|
|
console.log(levelIndex, 'levelIndex')
|
|
console.log(childIndex, 'childIndex')
|
|
|
|
if (childIndex === 1) {
|
|
data.value.whichOne = 'basic'
|
|
// 基本技能
|
|
data.value.tableNeed.tableData = data.value.apiData[levelIndex - 1].basicSkillList;
|
|
data.value.currentData = data.value.apiData[levelIndex - 1]
|
|
data.value.tableNeed.total = data.value.tableNeed.tableData.length
|
|
} else if (childIndex === 2) {
|
|
data.value.whichOne = 'special'
|
|
// 专项体能
|
|
data.value.tableNeed.tableData = data.value.apiData[levelIndex - 1].specialStaminaList;
|
|
data.value.currentData = data.value.apiData[levelIndex - 1]
|
|
data.value.tableNeed.total = data.value.tableNeed.tableData.length
|
|
}
|
|
console.log(data.value.tableNeed.tableData, 'data.value.tableNeed.tableData')
|
|
data.value.tableNeed.tableData.forEach((item, index) => {
|
|
const { pageIndex, pageSize } = data.value.tableNeed;
|
|
item.ind = (pageIndex - 1) * pageSize + index + 1; // 修正为从第一页的序号开始递增
|
|
})
|
|
|
|
};
|
|
async function GetSpecialLevelListApi(a, b, c, skillType = 'basic') {
|
|
// 先保存当前菜单的状态
|
|
const currentMenu = data.value.defaultActive;
|
|
|
|
try {
|
|
const res = await _api.GetSpecialLevelList(a, b, c);
|
|
if (res.code == 200) {
|
|
console.log(res.data, 'GetSpecialDetailsApi');
|
|
const [levelIndex, childIndex] = data.value.defaultActive.split("-").map(Number);
|
|
const dataFromApi = res.data.datas;
|
|
data.value.apiData = dataFromApi;
|
|
data.value.menuData = formatMenuData(dataFromApi);
|
|
data.value.currentData = dataFromApi[levelIndex - 1];
|
|
|
|
// 使用映射减少重复代码
|
|
const skillListMap = {
|
|
basic: 'basicSkillList',
|
|
special: 'specialStaminaList',
|
|
};
|
|
|
|
// 选择技能类型并更新tableData
|
|
const selectedSkillList = skillListMap[skillType] || 'basicSkillList'; // 默认使用 basicSkillList
|
|
data.value.tableNeed.tableData = dataFromApi[levelIndex - 1][selectedSkillList];
|
|
data.value.tableNeed.total = data.value.tableNeed.tableData.length;
|
|
|
|
// 更新序号
|
|
const { pageIndex, pageSize } = data.value.tableNeed;
|
|
updateTableDataWithIndex(data.value.tableNeed.tableData, pageIndex, pageSize);
|
|
|
|
// 恢复当前菜单状态
|
|
data.value.defaultActive = currentMenu;
|
|
data.value.tableNeed.refresh = true
|
|
console.log(data.value.defaultActive, 'data.value.defaultActive====>');
|
|
} else {
|
|
ElMessage.error(res.message);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error occurred while calling API:', error);
|
|
ElMessage.error('数据加载失败，请稍后重试。');
|
|
}
|
|
}
|
|
|
|
// 提取更新序号的逻辑
|
|
function updateTableDataWithIndex(tableData, pageIndex, pageSize) {
|
|
tableData.forEach((item, index) => {
|
|
|
|
item.ind = (pageIndex - 1) * pageSize + index + 1; // 修正为从第一页的序号开始递增
|
|
});
|
|
|
|
}
|
|
|
|
|
|
async function AddList(val, key) {
|
|
try {
|
|
const res = await _api.AddSpecialAction(val);
|
|
if (res.code == 200) {
|
|
console.log(res.data, 'initList')
|
|
// const currentMenu = data.value.defaultActive;
|
|
ElMessage.success('添加成功')
|
|
if (key == 0) {
|
|
data.value.dialogData.dialogVisible = false;
|
|
} else if (key == 1) {
|
|
data.value.detailEditDialogData.dialogVisible = false;
|
|
}
|
|
// data.value.defaultActive = currentMenu;
|
|
GetSpecialLevelListApi(globalId.value, data.value.tableNeed.pageIndex, data.value.tableNeed.pageSize, data.value.whichOne)
|
|
resetForm(formRef.value)
|
|
console.log(data.value.defaultActive, 'data.value.defaultActive')
|
|
} else {
|
|
ElMessage.error(res.message)
|
|
}
|
|
} catch (error) {
|
|
console.error('Error occurred while calling API:', error);
|
|
}
|
|
}
|
|
//
|
|
async function ModifySpecialActionVideoApi(val, key) {
|
|
|
|
try {
|
|
const res = await _api.ModifySpecialActionVideo(val);
|
|
if (res.code == 200) {
|
|
console.log(res.data, 'initList')
|
|
// const currentMenu = data.value.defaultActive;
|
|
ElMessage.success('编辑成功')
|
|
if (key == 0) {
|
|
data.value.dialogData.dialogVisible = false;
|
|
} else if (key == 1) {
|
|
data.value.detailEditDialogData.dialogVisible = false;
|
|
} else {
|
|
data.value.detailEditDialogData1.dialogVisible = false;
|
|
}
|
|
// data.value.defaultActive = currentMenu;
|
|
GetSpecialLevelListApi(globalId.value, data.value.tableNeed.pageIndex, data.value.tableNeed.pageSize, data.value.whichOne)
|
|
|
|
} else {
|
|
ElMessage.error(res.message)
|
|
}
|
|
} catch (error) {
|
|
console.error('Error occurred while calling API:', error);
|
|
}
|
|
}
|
|
async function DeleteSpecialActionApi(val) {
|
|
try {
|
|
const res = await _api.DeleteSpecialAction(val);
|
|
if (res.code == 200) {
|
|
// const currentMenu = data.value.defaultActive;
|
|
console.log(res.data, 'initList')
|
|
ElMessage.success('删除成功')
|
|
// data.value.defaultActive = currentMenu;
|
|
GetSpecialLevelListApi(globalId.value, data.value.tableNeed.pageIndex, data.value.tableNeed.pageSize, data.value.whichOne)
|
|
|
|
} else {
|
|
ElMessage.error(res.message)
|
|
}
|
|
} catch (error) {
|
|
console.error('Error occurred while calling API:', error);
|
|
}
|
|
}
|
|
async function ModifySpecialAction(val) {
|
|
try {
|
|
const res = await _api.ModifySpecialAction(val);
|
|
if (res.code == 200) {
|
|
// const currentMenu = data.value.defaultActive;
|
|
console.log(res.data, 'initList')
|
|
ElMessage.success('编辑成功')
|
|
// data.value.defaultActive = currentMenu;
|
|
GetSpecialLevelListApi(globalId.value, data.value.tableNeed.pageIndex, data.value.tableNeed.pageSize, data.value.whichOne)
|
|
data.value.dialogData.dialogVisible = false;
|
|
resetForm(formRef.value)
|
|
} else {
|
|
ElMessage.error(res.message)
|
|
}
|
|
} catch (error) {
|
|
console.error('Error occurred while calling API:', error);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.dialogManage {
|
|
.topIpt {
|
|
width: 100%;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
|
|
.left {
|
|
width: calc(100% - 200px);
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 20px;
|
|
|
|
p {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: 200px;
|
|
display: flex;
|
|
|
|
.reset {
|
|
width: 75px;
|
|
height: 30px;
|
|
background: #FAFAFA;
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: rgba(0, 0, 0, 0.65);
|
|
text-align: center;
|
|
line-height: 30px;
|
|
margin-right: 20px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.search {
|
|
width: 75px;
|
|
height: 30px;
|
|
background: #4188FE;
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.demo-ruleForm {
|
|
:deep(.el-form-item) {
|
|
display: flex;
|
|
// align-items: start;
|
|
}
|
|
|
|
:deep(.el-input) {
|
|
// width: 240px;
|
|
height: 40px;
|
|
}
|
|
|
|
:deep(.el-input-number) {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
:deep(.el-input-number__decrease),
|
|
:deep(.el-input-number__increase) {
|
|
height: 20px !important;
|
|
}
|
|
|
|
.chapter {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 40px;
|
|
margin-bottom: 10px;
|
|
|
|
p {
|
|
margin-left: 20px;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
color: rgba(0, 0, 0, 0.65);
|
|
}
|
|
}
|
|
|
|
.headIpt {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-left: 10px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
}
|
|
|
|
.addVideo {
|
|
width: calc(100% - 420px);
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
p {
|
|
width: 95px;
|
|
height: 40px;
|
|
background: #4188FE;
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top {
|
|
margin-bottom: 20px;
|
|
|
|
.title {
|
|
width: 100%;
|
|
height: 20px;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
color: rgba(0, 0, 0, 0.65);
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 40px;
|
|
margin-top: 0;
|
|
|
|
}
|
|
|
|
.tab {
|
|
width: calc(100% - 190px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
// margin-left: 40px;
|
|
|
|
.leftOne,
|
|
.rightOne {
|
|
width: calc(100% / 2.1);
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
// margin-left: 40px;
|
|
// margin-top: 20px;
|
|
|
|
img {
|
|
width: 50px;
|
|
height: 50px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.titles {
|
|
width: 100%;
|
|
height: 40px;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
background-color: #4188FE;
|
|
color: #fff;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
|
|
// cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.video {
|
|
position: relative;
|
|
|
|
.dialogClose {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 10px;
|
|
|
|
img {
|
|
width: 20px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.add {
|
|
width: 95px;
|
|
height: 40px;
|
|
background: #FAFAFA;
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: rgba(0, 0, 0, 0.65);
|
|
text-align: center;
|
|
line-height: 40px;
|
|
margin-right: 20px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
margin-left: 120px;
|
|
}
|
|
|
|
}
|
|
|
|
.toView {
|
|
width: auto;
|
|
height: 20px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
color: #1890FF;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.operate {
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ropeJumping {
|
|
width: calc(100% - 20px);
|
|
height: 88vh;
|
|
margin: 20px auto;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border-radius: 5px;
|
|
|
|
.left {
|
|
width: 200px;
|
|
height: 100%;
|
|
margin-left: 20px;
|
|
|
|
.name {
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
width: 100%;
|
|
height: 40px;
|
|
text-align: center;
|
|
background-color: rgba(0, 0, 0, 0.65);
|
|
line-height: 40px;
|
|
border-radius: 5px 5px 0 0;
|
|
}
|
|
|
|
.elMenu {
|
|
margin-top: -14px;
|
|
height: 80vh;
|
|
}
|
|
|
|
:deep(.el-menu) {
|
|
--el-menu-bg-color: #ccc;
|
|
// background: rgba(0, 0, 0, 0) !important;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: calc(100% - 220px);
|
|
height: 100%;
|
|
margin-left: 20px;
|
|
|
|
.top {
|
|
width: 100%;
|
|
height: 70px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.leftSearch {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.one {
|
|
width: 300px;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
p {
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
margin-right: 10px;
|
|
}
|
|
|
|
:deep(.el-input) {
|
|
height: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rightBtn {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
p {
|
|
width: 95px;
|
|
height: 40px;
|
|
background: #FAFAFA;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: rgba(0, 0, 0, 0.65);
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
margin: 0 10px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.search,
|
|
.Add {
|
|
background: #0486FE;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
width: 100%;
|
|
|
|
:deep(.el-table) {
|
|
width: calc(100% - 20px);
|
|
height: 73vh;
|
|
}
|
|
|
|
.pagination {
|
|
width: calc(100% - 20px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: right;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style> |