pptList 功能二开

src/renderer/index.html

@@ -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>
 

src/renderer/src/components/common/cApt.vue

@@ -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>

src/renderer/src/components/common/cBeian.vue

@@ -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>

src/renderer/src/components/common/cForm.vue

@@ -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() {

src/renderer/src/components/common/cPage.vue

@@ -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>

src/renderer/src/components/common/cTable.vue

@@ -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>

src/renderer/src/views/model/index.vue

@@ -1,23 +1,75 @@
 <template>
-  <div>
+  <!-- 顶部 按钮功能 -->
-    <div class="mb-4">
+  <div class="mb-4">
-      <el-button type="primary" @click="onchange('/model/curriculum')">课标研读</el-button>
+    <el-button type="primary" @click="onchange('/model/curriculum')">课标研读</el-button>
-      <el-button type="primary" @click="onchange('/model/management')">作业管理</el-button>
+    <el-button type="primary" @click="onchange('/model/management')">作业管理</el-button>
-      <el-button type="success"  @click="onchange('/model/teaching')">教材研读</el-button>
+    <el-button type="success"  @click="onchange('/model/teaching')">教材研读</el-button>
-      <el-button type="success"  @click="openPPTist">打开PPTist</el-button>
+    <el-button type="success"  @click="openPPTist">打开PPTist</el-button>
-      <!-- <el-button type="info"  @click="onchange('/model/examination')">考试分析</el-button> -->
+    <!-- <el-button type="info"  @click="onchange('/model/examination')">考试分析</el-button> -->
-    </div>
+  </div>
-    <ChooseTextbook @change-book="getData" @node-click="getData" />
+  <el-row class="container">
-    </div>
+    <!-- 左侧 选择教材 目录 -->
+    <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>

tsconfig.json

@@ -1,4 +1,11 @@
 {  
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*":["src/renderer/src/*"],
+      "@root/*":["./*"]
+    }
+  },
   "files": [],
   "references": [
     {