pptList 功能二开
This commit is contained in:
zdg
parent
82091fbef5
commit
8707b54420
|
|
@ -8,7 +8,7 @@
|
|||
http-equiv="Content-Security-Policy"
|
||||
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
|
||||
/> -->
|
||||
<meta http-equiv="Content-Security-Policy" content="connect-src *; default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *;img-src * 'self' data: blob:" />
|
||||
<meta http-equiv="Content-Security-Policy" content="connect-src *; default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src * blob:;img-src * 'self' data: blob:" />
|
||||
|
||||
</head>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
<div id="aptContainer"></div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
modelValue:[Object,String], // json数据
|
||||
width: { // 宽度
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: { // 高度
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
domId: { // 渲染元素ID
|
||||
type: String,
|
||||
default: 'aptContainer'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: 'apt预览组件-konva',
|
||||
// konva相关对象 舞台 图层
|
||||
konvaStage:null, konvaLayer:null
|
||||
}
|
||||
},
|
||||
mounted() { // 页面渲染完
|
||||
this.initKonva()
|
||||
},
|
||||
watch: {
|
||||
modelValue: {
|
||||
immediate: true, // 初始是否触发
|
||||
handler(v) { // 参数1新值，参数2 旧值
|
||||
!!v && this.loadJson()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 初始化Konva
|
||||
initKonva() {
|
||||
if(!this.width || !this.height) return false // 没有默认宽度高度直接使用数据中的
|
||||
this.konvaStage = new Konva.Stage({
|
||||
container: "aptContainer", // id of container <div>
|
||||
width: this.width,
|
||||
height: this.height,
|
||||
});
|
||||
},
|
||||
// 加载数据
|
||||
loadJson(data = this.modelValue) {
|
||||
if (!data) return false
|
||||
this.konvaStage = Konva.Node.create(data, this.domId)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.aptContainer{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<el-link :href="href" target="_blank" type="primary">
|
||||
<slot name="content">{{content}}</slot>
|
||||
</el-link>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
href: { // 跳转地址
|
||||
type: String,
|
||||
default: 'https://beian.miit.gov.cn'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '备案号-添加',
|
||||
content: '备案号：苏ICP备2024097972号-1'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<!-- 表单-组件(自定义) -->
|
||||
<slot>
|
||||
<el-row v-bind="rows||{}">
|
||||
<!-- 其他内容-start -->
|
||||
<slot name="start"></slot>
|
||||
|
|
@ -80,7 +79,6 @@
|
|||
<!-- 其他内容-end -->
|
||||
<slot name="end"></slot>
|
||||
</el-row>
|
||||
</slot>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
|
@ -161,7 +159,9 @@ export default {
|
|||
// 确定--提交
|
||||
confirm() {
|
||||
const formRefs = this.$refs.form
|
||||
const isBool = this.$attrs.confirm && typeof this.$attrs.confirm === 'function'
|
||||
this.$emit('confirm', formRefs)
|
||||
if (isBool) this.$attrs.confirm(formRefs)
|
||||
},
|
||||
// 重置
|
||||
resetFields() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
|
||||
<template>
|
||||
<el-pagination v-bind="pageOpt"
|
||||
@change="(...agrs) => $emit('pageChange',...agrs)"
|
||||
v-model:current-page="curPage" v-model:page-size="limit" />
|
||||
</template>
|
||||
<script>
|
||||
// 功能说明：自定义-分页器
|
||||
export default {
|
||||
name: 'cPage',
|
||||
props: {
|
||||
page: { type: Object, required: true },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
def: {
|
||||
// size: 'small',
|
||||
background: false,
|
||||
pageSizes: [10, 20, 30, 40, 50, 100],
|
||||
layout: 'total, sizes, prev, pager, next',
|
||||
// layout: 'total, sizes, prev, pager, next, jumper',
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pageOpt() {
|
||||
return Object.assign({},this.def, this.page)
|
||||
},
|
||||
curPage: {
|
||||
get() { return this.page.curPage },
|
||||
set(val) { this.page.curPage = val }
|
||||
},
|
||||
limit: {
|
||||
get() { return this.page.limit },
|
||||
set(val) { this.page.limit = val }
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,280 @@
|
|||
<template>
|
||||
<!-- 组件 -->
|
||||
<div>
|
||||
<slot name="top">
|
||||
<div class="c-search" :hide="!isFold||isDef" v-if="fItems.length" :style="$attrs.style">
|
||||
<transition name="el-zoom-in-top">
|
||||
<c-form v-show="isFold" ref="search" v-if="!noSearch && search" :form="search"
|
||||
:itemOption="fItems" :option="fOption" :onEnter="fOnEnter" :rows="fRows" :cols="fCols">
|
||||
<template v-for="item in formSlots" #[item]="data">
|
||||
<slot :name="`f${item}`" v-bind="data"></slot>
|
||||
</template>
|
||||
<template #append>
|
||||
<slot name="topAdd" v-if="$slots.topAdd"></slot>
|
||||
<slot name="search" v-if="!$attrs.searchBtnNe">
|
||||
<el-col style="text-align: center;margin: 5px 0 15px;">
|
||||
<el-button icon="Search" type="primary" @click="$emit('change','query')">查询</el-button>
|
||||
<el-button type="warning" @click="$emit('change','reset')">重置</el-button>
|
||||
</el-col>
|
||||
</slot>
|
||||
</template>
|
||||
</c-form>
|
||||
</transition>
|
||||
<div v-if="!isDef" :class="['fold',{hide:!isFold}]" @click="isFold=!isFold">
|
||||
<!-- <i :class="'el-icon-arrow-' + (isFold?'down':'up')"></i> -->
|
||||
<el-icon><component :is="isFold?'ArrowUp':'ArrowDown'"></component></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</slot>
|
||||
<slot name="start"></slot>
|
||||
<div :class="['m-list',{'ne':!isMain, hide:!isFold}]">
|
||||
<slot name="tStart"></slot>
|
||||
<el-table ref="table" v-bind="tAttrs" v-on="tOns">
|
||||
<template #empty><slot name="empty">{{emptyText}}</slot></template>
|
||||
<template #append><slot name="append"></slot></template>
|
||||
<slot>
|
||||
<template v-for="(item, index) in optionItems" :key="index">
|
||||
<el-table-column v-bind="item">
|
||||
<!-- 列-表头-自定义 -->
|
||||
<template #header="{column, $index}">
|
||||
<slot :name="item.prop+'_header'" :column="column" :$index="$index">
|
||||
<slot name="header" :column="column" :$index="$index">{{ item.label }}</slot>
|
||||
</slot>
|
||||
</template>
|
||||
<!-- 列内容-自定义 -->
|
||||
<template #default="{row, column, $index}" v-if="item.type!='selection'">
|
||||
<slot :name="item.prop" :row="row" :column="column" :$index="$index" :value="row[item.prop]">
|
||||
<span v-if="item.attrs" v-bind="item.attrs">{{ defVal(row,item, $index, $attrs, column) }}</span>
|
||||
<slot v-else :row="row" :column="column" :$index="$index" :value="row[item.prop]">{{ defVal(row,item, $index, $attrs, column) }}</slot>
|
||||
</slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</slot>
|
||||
</el-table>
|
||||
<slot name="end"></slot>
|
||||
<slot name="page">
|
||||
<c-page v-if="!noPage" :page="page" v-on="$attrs" class="c-page" border="false"></c-page>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import cForm from './cForm.vue'
|
||||
export default {
|
||||
// inheritAttrs: false,
|
||||
components: { cForm },
|
||||
name: 'cTable',
|
||||
props: {
|
||||
option: Array, // 列配置
|
||||
search: Object, // 搜索
|
||||
fItems: { // 搜索字段配置
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
fOption: { // 搜索-表单配置
|
||||
type: Object,
|
||||
default: () => ({ labelW: '80px' })
|
||||
// default: () => ({ inline: true, labelW: '80px', size: 'small' })
|
||||
},
|
||||
fOnEnter: Function, // 搜索--回车事件-公共
|
||||
fRows: { // 搜索-行
|
||||
type: Object,
|
||||
default: _ => ({ gutter: 20 })
|
||||
},
|
||||
fCols: { // 搜索-非内联 inline
|
||||
type: Object,
|
||||
default: _ => ({ span: 8, xs: 24, sm: 12, md: 8, lg: 6 })
|
||||
},
|
||||
emptyText: {
|
||||
type: String,
|
||||
default: '暂无数据'
|
||||
},
|
||||
isDef: { // 默认样式-无美化
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
isMain: { // 间距
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
fold: { // 是否打开搜索
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
data: Object, // 数据
|
||||
page: Object, // 分页
|
||||
noSearch: Boolean, // 关闭搜索
|
||||
noPage: Boolean, // 关闭分页
|
||||
noDef: Boolean, // 取消默认配置
|
||||
isMaxHeight: Boolean, // 是否最大高度
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 搜索-插槽 打开搜索
|
||||
formSlots: [], isFold: this.fold, height: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
optionItems() { // 默认列
|
||||
const list = this.option || []
|
||||
return list.map(o => {
|
||||
const def = { align: 'center', showOverflowTooltip: true }
|
||||
if (o.width && o.showOverflowTooltip == undefined){
|
||||
o.showOverflowTooltip = true // 设置宽度时，内容超出默认隐藏
|
||||
}
|
||||
return this.noDef ? o : Object.assign(def, o)
|
||||
})
|
||||
.filter(o => o.show ?? true) // 过滤掉隐藏的-show
|
||||
.filter(o => o.visible ?? true) // 过滤掉隐藏的-visible
|
||||
},
|
||||
tAttrs() { // $attrs 过滤掉其他属性
|
||||
const attrs = {...this.$attrs}
|
||||
Object.keys(attrs).forEach(key => {
|
||||
// 空值过滤掉
|
||||
if (!attrs[key]??null) delete attrs[key]
|
||||
// 分页相关属性 过滤掉
|
||||
else if (/^page.*/.test(key)) delete attrs[key]
|
||||
})
|
||||
// 其他属性处理 如 'style', 'class', 't-style', 't-class'
|
||||
const tArr = Object.keys(attrs).filter(k => k.startsWith('t-'))
|
||||
if (tArr.length) tArr.forEach(k => attrs[k.slice(2)] = attrs[k])
|
||||
else ['style', 'class'].forEach(k => delete attrs[k])
|
||||
// 高度处理
|
||||
const hArrs = ['height', 'max-height', 'maxHeight']
|
||||
const isH = Object.keys(attrs).some(k => hArrs.includes(k))
|
||||
// 默认高度 默认设置最大高度
|
||||
if (!isH) attrs[this.isMaxHeight?'max-height':'height'] = 500
|
||||
// 设置数据
|
||||
if (this.data) attrs.data = this.data
|
||||
return attrs
|
||||
},
|
||||
tOns() { // $on 过滤掉其他属性
|
||||
const attrs = {...this.$attrs}
|
||||
return Object.keys(attrs).reduce((p, c, a ) => {
|
||||
if(typeof attrs[c]=='function')p[c]=attrs[c]; return p
|
||||
}, {})
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.getFormSlots()
|
||||
},
|
||||
methods: {
|
||||
// 获取插槽名-搜索-插槽
|
||||
getFormSlots() {
|
||||
const props = this.fItems.map(o => o.prop)
|
||||
const keys = Object.keys(this.$slots)
|
||||
this.formSlots = keys.filter(k => {
|
||||
const isForm = /^f.*/.test(k) // 是否为搜索插槽
|
||||
const isProp = props.some(p => k.endsWith(p)) // 该配置是否在配置中存在-不存在过滤掉
|
||||
return isForm && isProp
|
||||
}).map(k => k.replace(/^f/, '')) // 返回表单内部自定义插槽名
|
||||
},
|
||||
// 默认值处理
|
||||
defVal(row, item, rowInd, attr, column) {
|
||||
switch (item.type) {
|
||||
case 'index': { // 默认-ind
|
||||
const { curPage, limit, offset } = attr.page || attr
|
||||
const start = offset || (curPage - 1) * limit || 0
|
||||
return rowInd + 1 + start
|
||||
}
|
||||
default:
|
||||
return item.format ? item.format(row[item.prop], row, column, rowInd) : row[item.prop]
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
// @import '~@/assets/styles/cmixin';
|
||||
// $w 宽| $h 高| $bg 背景| $tBr 块圆角度 $tBg 块背景
|
||||
@mixin scrollBar($w:8px,$h:8px,$tBr:20px,
|
||||
$bg:#d3dce6,$tBg:#99a9bf, $tHbg: #409eff) {
|
||||
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background: $bg;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: $w;
|
||||
height: $h;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: $tBg;
|
||||
border-radius: $tBr;
|
||||
@if $tHbg {
|
||||
&:hover{
|
||||
background: $tHbg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table){
|
||||
|
||||
.el-table__expand-column{
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table__body-wrapper{
|
||||
@include scrollBar;
|
||||
}
|
||||
}
|
||||
// css调整
|
||||
.c-search{
|
||||
--bg: #fff;
|
||||
padding-top: 10px;
|
||||
// padding: 20px 20px 0;
|
||||
background: var(--bg);
|
||||
margin-bottom: 30px;
|
||||
border-radius: 4px;
|
||||
&[hide=true]{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.fold{
|
||||
--box-color: rgba(24,144,255,0.2);
|
||||
--box-hover-color: rgba(24,144,255,0.6);
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
background: var(--bg);
|
||||
border-radius: 0 0 50px 50px;
|
||||
left: 50%;
|
||||
transform: translate(-50%,5px);
|
||||
box-shadow: 0px 3px 3px var(--box-color);
|
||||
i{font-size: inherit;}
|
||||
&:hover{
|
||||
box-shadow: 0px 3px 3px var(--box-hover-color);
|
||||
i{color: #1890ff;}
|
||||
}
|
||||
&.hide{
|
||||
top: 12px;
|
||||
border-radius: 50px 50px 0 0;
|
||||
box-shadow: 0 -3px 3px var(--box-color);
|
||||
&:hover{box-shadow: 0 -3px 3px var(--box-hover-color);}
|
||||
}
|
||||
}
|
||||
:deep(.el-form){
|
||||
.el-form-item{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 改样式
|
||||
.m-list{
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
&.ne{padding: 0;}
|
||||
&.hide{
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.c-page{
|
||||
background: #fff;
|
||||
margin-top: 10px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 顶部 按钮功能 -->
|
||||
<div class="mb-4">
|
||||
<el-button type="primary" @click="onchange('/model/curriculum')">课标研读</el-button>
|
||||
<el-button type="primary" @click="onchange('/model/management')">作业管理</el-button>
|
||||
|
|
@ -7,17 +7,69 @@
|
|||
<el-button type="success" @click="openPPTist">打开PPTist</el-button>
|
||||
<!-- <el-button type="info" @click="onchange('/model/examination')">考试分析</el-button> -->
|
||||
</div>
|
||||
<ChooseTextbook @change-book="getData" @node-click="getData" />
|
||||
<el-row class="container">
|
||||
<!-- 左侧 选择教材 目录 -->
|
||||
<ChooseTextbook @change-book="changeBook" @node-click="changeBook" />
|
||||
<!-- 中间 展示内容 -->
|
||||
<el-col :span="10">
|
||||
<div class="c-item mb-4 mx-4">
|
||||
<div class="flex justify-between pb-2">
|
||||
<h3>教师资源</h3>
|
||||
<span class="c-btns">
|
||||
<el-button size="small" text :icon="Refresh" @click="handleAll('refresh')">刷新</el-button>
|
||||
<el-button size="small" text :icon="Files" @click="handleAll('resource')">资源库</el-button>
|
||||
<el-button size="small" text :icon="UploadFilled" @click="handleAll('upload')">上传</el-button>
|
||||
<el-button size="small" text :icon="Plus" @click="handleAll('add')">添加</el-button>
|
||||
</span>
|
||||
</div>
|
||||
<c-table ref="resourRef" v-bind="sourceOpt" t-class="rounded"></c-table>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { Plus, Refresh, Upload, Files, UploadFilled } from '@element-plus/icons-vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { createWindow } from '@/utils/tool' // 相关工具
|
||||
import * as entpcoursefile from '@/api/education/entpcoursefile' // 相关api
|
||||
// 组件引入
|
||||
import ChooseTextbook from '@/components/choose-textbook/index.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const bookNode = reactive({node:{}, textBook:{}}) // 教材节点
|
||||
const dt = reactive({ // 数据
|
||||
curRow: null, // 当前行数据
|
||||
})
|
||||
// ref定义
|
||||
const resourRef = ref() // 资源ref
|
||||
|
||||
// 资源相关配置-cTable
|
||||
const sourceOpt = reactive({
|
||||
data: [], // 数据
|
||||
option: [ // 列配置
|
||||
{ label: '名称', prop: 'title', align: 'left' },
|
||||
{ label: '类型', prop: 'type' },
|
||||
{ label: '时间', prop: 'createTime', width: 160, sortable: true },
|
||||
],
|
||||
noPage: true, // 不显示分页
|
||||
isMain: false, // 主界面
|
||||
highlightCurrentRow: true, // 高亮当前行
|
||||
rowClick: (r, c, e) => { // 行点击事件
|
||||
if (dt.curRow == r) { // 重复点击-取消选中
|
||||
resourRef.value.$refs.table.setCurrentRow()
|
||||
dt.curRow = null
|
||||
} else dt.curRow = r
|
||||
}
|
||||
})
|
||||
sourceOpt.data = [
|
||||
{ title: '测试学校' },
|
||||
{ title: '测试学校2' },
|
||||
{ title: '测试学校3' },
|
||||
]
|
||||
|
||||
// 相关方法-methods
|
||||
const openPPTist = () =>{
|
||||
createWindow('open-win', {url: '/pptist'})
|
||||
}
|
||||
|
|
@ -25,6 +77,36 @@ const openPPTist = () =>{
|
|||
const onchange = (path) =>{
|
||||
router.push(path)
|
||||
}
|
||||
// 教材选中
|
||||
const changeBook = ({node, textBook}) =>{
|
||||
console.log(node, textBook)
|
||||
bookNode.node = node
|
||||
bookNode.textBook = textBook
|
||||
}
|
||||
// 事件回调
|
||||
const handleAll = (type) =>{
|
||||
console.log(type)
|
||||
switch (type) {
|
||||
case 'refresh': // 刷新
|
||||
break;
|
||||
case 'resource': // 资源库
|
||||
break;
|
||||
case 'upload': // 上传
|
||||
break;
|
||||
case 'add':{ // 添加
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.container{
|
||||
height: calc(100% - 32px - 1rem);
|
||||
.c-item{
|
||||
.c-btns{
|
||||
.el-button{margin: 0;}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,11 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@/*":["src/renderer/src/*"],
|
||||
"@root/*":["./*"]
|
||||
}
|
||||
},
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue