|
@@ -1,56 +1,64 @@
|
|
|
<template>
|
|
|
- <el-row>
|
|
|
- <el-col :span="3" style="background-color: white;margin-right: 10px;padding: 10px">
|
|
|
- <p style="margin: auto">
|
|
|
- 作品类型
|
|
|
- </p>
|
|
|
- <el-divider style="margin-top: 15px;margin-bottom: 5px"/>
|
|
|
- <div class="infinite-list" style="max-height:700px;min-height:200px;overflow-y:auto">
|
|
|
- <el-tree
|
|
|
- style="max-width: 280px;"
|
|
|
- :data="typeList"
|
|
|
- :props="defaultProps"
|
|
|
- @node-click="handleNodeClick"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="3" style="background-color: white;padding: 10px;margin-right: 10px">
|
|
|
- <el-table v-loading="loading" :data="workList" :stripe="true" :show-overflow-tooltip="true" style="height:700px">
|
|
|
- <el-table-column label="作品" align="left" prop="workName">
|
|
|
- <template #default="scope">
|
|
|
- <el-button
|
|
|
- link
|
|
|
- @click="lookWork(scope.row)"
|
|
|
- type="primary"
|
|
|
- >
|
|
|
- {{ scope.row.workName }}
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-col>
|
|
|
- <el-col :span="16" style="background-color: white;padding: 10px;margin-right: 10px">
|
|
|
- <el-row>
|
|
|
- <el-col :span="16">
|
|
|
- <p>正在评分作品:{{file.workName}}</p>
|
|
|
- <audio v-if="file.format==='mp3'" :src="file.url" controls>
|
|
|
- </audio>
|
|
|
- <video v-if="file.format==='mp4'"
|
|
|
- :src="file.url" controls></video>
|
|
|
- <img v-if="file.format==='jpg'||file.format==='png'"
|
|
|
- :src="file.url" alt=""/>
|
|
|
- <div v-if="file.format==='pdf'" >
|
|
|
- <VueOfficePddf :src="file.url" class="docx-class"/>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <div v-if="file.manuscriptAndMaterial!==''">
|
|
|
- <VueOfficePddf :src="file.manuscriptAndMaterial" class="docx-class"/>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+
|
|
|
+ <div class="common-layout" style="width: 100%">
|
|
|
+ <el-container >
|
|
|
+ <el-aside width="300" style="margin-right: 10px">
|
|
|
+ <div style="width:200px;margin: auto">
|
|
|
+ 作品类型
|
|
|
+ </div>
|
|
|
+ <el-divider style="width:220px;margin-top: 15px;margin-bottom: 5px"/>
|
|
|
+ <el-card class="infinite-list" style="margin: auto;width: 200px;max-height:700px;min-height:80px;overflow-y:auto">
|
|
|
+ <el-tree
|
|
|
+ style="max-width: 280px;"
|
|
|
+ :data="typeList"
|
|
|
+ :props="defaultProps"
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ />
|
|
|
+ </el-card>
|
|
|
+ </el-aside>
|
|
|
+ <el-main>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="3" style="background-color: white;padding: 10px;margin-right: 10px">
|
|
|
+ <el-table v-loading="loading" :data="workList" :stripe="true"
|
|
|
+ :show-overflow-tooltip="true" style="height:700px">
|
|
|
+ <el-table-column label="作品" align="left" prop="workName">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ @click="lookWork(scope.row)"
|
|
|
+ type="primary"
|
|
|
+ >
|
|
|
+ {{ scope.row.workName }}
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16" style="background-color: white;padding: 10px;margin-right: 10px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="16">
|
|
|
+ <p>正在评分作品:{{ file.workName }}</p>
|
|
|
+ <audio v-if="file.format==='mp3'" :src="file.url" controls>
|
|
|
+ </audio>
|
|
|
+ <video v-if="file.format==='mp4'"
|
|
|
+ :src="file.url" controls></video>
|
|
|
+ <img v-if="file.format==='jpg'||file.format==='png'"
|
|
|
+ :src="file.url" alt=""/>
|
|
|
+ <div v-if="file.format==='pdf'">
|
|
|
+ <VueOfficePddf :src="file.url" class="docx-class"/>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div v-if="file.manuscriptAndMaterial!==''">
|
|
|
+ <VueOfficePddf :src="file.manuscriptAndMaterial" class="docx-class"/>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+ </div>
|
|
|
|
|
|
|
|
|
<!-- 表单弹窗:添加/修改 -->
|
|
@@ -69,11 +77,12 @@ import {TypeApi} from "@/api/work/type";
|
|
|
import {workApi} from "@/api/work/work";
|
|
|
import {ref} from 'vue'
|
|
|
import VueOfficePddf from '@vue-office/pdf'
|
|
|
-const file=ref({
|
|
|
- format:'',
|
|
|
- url:'',
|
|
|
- workName:'',
|
|
|
- manuscriptAndMaterial:''
|
|
|
+
|
|
|
+const file = ref({
|
|
|
+ format: '',
|
|
|
+ url: '',
|
|
|
+ workName: '',
|
|
|
+ manuscriptAndMaterial: ''
|
|
|
});
|
|
|
/** 作品评分 列表 */
|
|
|
defineOptions({name: 'Score'})
|
|
@@ -110,7 +119,7 @@ interface Tree {
|
|
|
|
|
|
const loading = ref(true) // 列表的加载中
|
|
|
const list = ref<ScoreVO[]>([]) // 列表的数据
|
|
|
-const typeList = ref<Tree[]>([]) // 列表的数据
|
|
|
+const typeList = ref([]) // 列表的数据
|
|
|
const total = ref(0) // 列表的总页数
|
|
|
const queryParams = reactive({
|
|
|
pageNo: 1,
|
|
@@ -130,18 +139,18 @@ const queryFormRef = ref() // 搜索的表单
|
|
|
const exportLoading = ref(false) // 导出的加载中
|
|
|
|
|
|
const handleNodeClick = (data: Tree) => {
|
|
|
- file.value={workName: "", manuscriptAndMaterial: "", format: "", url: ""}
|
|
|
+ file.value = {workName: "", manuscriptAndMaterial: "", format: "", url: ""}
|
|
|
workQueryParams.categoryId = data.id
|
|
|
getWorkLists()
|
|
|
}
|
|
|
|
|
|
const lookWork = (value) => {
|
|
|
- file.value={workName: "", manuscriptAndMaterial: "", format: "", url: ""}
|
|
|
+ file.value = {workName: "", manuscriptAndMaterial: "", format: "", url: ""}
|
|
|
console.log(value)
|
|
|
- file.value.format=value.format
|
|
|
- file.value.url=value.workUrl
|
|
|
- file.value.workName=value.workName
|
|
|
- file.value.manuscriptAndMaterial=value.manuscriptAndMaterial
|
|
|
+ file.value.format = value.format
|
|
|
+ file.value.url = value.workUrl
|
|
|
+ file.value.workName = value.workName
|
|
|
+ file.value.manuscriptAndMaterial = value.manuscriptAndMaterial
|
|
|
}
|
|
|
const workList = ref<workVO[]>([]) // 列表的数据
|
|
|
const getTypeList = async () => {
|
|
@@ -149,12 +158,23 @@ const getTypeList = async () => {
|
|
|
try {
|
|
|
const datas = await TypeApi.getScoreTreeList(typeQueryParams)
|
|
|
console.log(datas.valueOf())
|
|
|
- typeList.value = handleTree(datas, 'id', 'parentId')
|
|
|
+ typeList.value = handleTreeAll(datas, 'id', 'parentId')
|
|
|
// list.value = data.list
|
|
|
} finally {
|
|
|
loading.value = false
|
|
|
}
|
|
|
}
|
|
|
+const handleTreeAll=(data,id,parentId) => {
|
|
|
+ let arr=[]
|
|
|
+ let type=''
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ strParent(data[i],data)
|
|
|
+ }
|
|
|
+ return arr
|
|
|
+}
|
|
|
+const strParent = (obj,data) => {
|
|
|
+
|
|
|
+}
|
|
|
|
|
|
const workQueryParams = reactive({
|
|
|
workName: undefined,
|
|
@@ -165,11 +185,11 @@ const getWorkLists = async () => {
|
|
|
try {
|
|
|
const data = await workApi.getworkList(workQueryParams)
|
|
|
workList.value = data.list
|
|
|
- if (workList.value.length>0){
|
|
|
- file.value.format=workList.value[0].format
|
|
|
- file.value.url=workList.value[0].workUrl
|
|
|
- file.value.workName=workList.value[0].workName
|
|
|
- file.value.manuscriptAndMaterial=workList.value[0].manuscriptAndMaterial
|
|
|
+ if (workList.value.length > 0) {
|
|
|
+ file.value.format = workList.value[0].format
|
|
|
+ file.value.url = workList.value[0].workUrl
|
|
|
+ file.value.workName = workList.value[0].workName
|
|
|
+ file.value.manuscriptAndMaterial = workList.value[0].manuscriptAndMaterial
|
|
|
}
|
|
|
|
|
|
console.log(workList.value)
|