This commit is contained in:
白了个白 2024-12-02 10:19:30 +08:00
commit 40053c6c79
16 changed files with 1160 additions and 48 deletions

View File

@ -130,7 +130,6 @@
"typescript": "~5.3.0", "typescript": "~5.3.0",
"vite": "^5.3.1", "vite": "^5.3.1",
"vite-plugin-windicss": "^1.9.3", "vite-plugin-windicss": "^1.9.3",
"vue": "^3.4.30",
"vue-tsc": "^1.8.25", "vue-tsc": "^1.8.25",
"windicss": "^3.5.6" "windicss": "^3.5.6"
} }

View File

@ -26,6 +26,8 @@ import Mobile from './views/Mobile/index.vue'
import msgUtils from '@/plugins/modal' // import msgUtils from '@/plugins/modal' //
import * as API_entpcoursefile from '@/api/education/entpcoursefile' // api import * as API_entpcoursefile from '@/api/education/entpcoursefile' // api
import { PPTApi } from './api' import { PPTApi } from './api'
import { sessionStore } from '@/utils/store' // electron-store
import './api/watcher' //
const loading = ref(true) const loading = ref(true)
const _isPC = isPC() const _isPC = isPC()
@ -68,19 +70,20 @@ interface Result {
} }
// //
const initLoad: Function = () => { const initLoad: Function = () => {
const urlSearch = location.href.split('?')[1] // ppt
const query = Object.fromEntries(new URLSearchParams(urlSearch)) const resource = sessionStore.get('curr.resource')
const id: String = query.id if (!!resource) { // ppt
// pptx slidesStore.setTitle(resource.title)
if (!!id) return PPTApi.getSlideList(id) if (!!resource.parentContent) { //
const opt = JSON.parse(resource.parentContent)
!!(opt.width??null) && slidesStore.setViewportSize(opt.width) //
!!(opt.ratio??null) && slidesStore.setViewportRatio(opt.ratio)//
}
return PPTApi.getSlideList(resource.id)
}
return Promise.resolve() return Promise.resolve()
} }
//
watch(() => slidesStore.slides, (newVal, oldVal) => {
//
PPTApi.updateSlides(newVal, oldVal)
},{ deep: true })
</script> </script>
<style lang="scss"> <style lang="scss">

View File

@ -51,7 +51,7 @@ export class PPTApi {
// 获取所有幻灯片列表 // 获取所有幻灯片列表
static getSlideList(parentid: (Number | String)): Promise<Boolean> { static getSlideList(parentid: (Number | String)): Promise<Boolean> {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
const params: object = { parentid } const params: object = { parentid, orderByColumn: 'fileidx', isAsc: 'asc', pageSize: 9999 }
const res: Result = await API_entpcoursefile.listEntpcoursefileNew(params) const res: Result = await API_entpcoursefile.listEntpcoursefileNew(params)
if (res.code === 200) { if (res.code === 200) {
const slides = (res.rows || []).map(o => { const slides = (res.rows || []).map(o => {
@ -111,7 +111,7 @@ export class PPTApi {
static async updateSlides(newVal: object, oldVal: object) { static async updateSlides(newVal: object, oldVal: object) {
const newData = toRaw(newVal) const newData = toRaw(newVal)
const oldData = toRaw(oldVal) const oldData = toRaw(oldVal)
console.log('监听幻灯片数据变化', newData, oldData) // console.log('监听幻灯片数据变化', newData, oldData)
if (!(newData&&newData.length)) return // 新数据为空,不需要更新数据 if (!(newData&&newData.length)) return // 新数据为空,不需要更新数据
else if (!oldData.length) return // 初始加载,旧数据空不需要更新数据 else if (!oldData.length) return // 初始加载,旧数据空不需要更新数据

View File

@ -9,7 +9,6 @@ export default class {
// 删除幻灯片 // 删除幻灯片
static delSlide(id: string): Promise<Boolean> { static delSlide(id: string): Promise<Boolean> {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
console.log('delSlide', id)
const res: Result = await API_entpcoursefile.delEntpcoursefile(id) const res: Result = await API_entpcoursefile.delEntpcoursefile(id)
if (res.code === 200) { if (res.code === 200) {
resolve(true) resolve(true)

View File

@ -0,0 +1,31 @@
/**
* @description
*/
import { watch } from 'vue'
import { PPTApi } from './index'
import * as store from '../store'
import { sessionStore } from '@/utils/store' // electron-store 状态管理
const slidesStore = store.useSlidesStore()
const resource = sessionStore.get('curr.resource')
/**
* @description
*/
// 监听幻灯片内容变化
watch(() => slidesStore.slides, (newVal, oldVal) => {
PPTApi.updateSlides(newVal, oldVal) // 更新幻灯片内容
},{ deep: true })
// 监听标题变化
watch(() => slidesStore.title, (newVal, oldVal) => {
if (oldVal == '未命名演示文稿') return // 初始加载,不需要更新数据
updatePPT({title: newVal})
})
const updatePPT = async (data) => {
if (!resource) return
data.id = resource.id
await PPTApi.updateSlide(data) // 更新ppt内容
sessionStore.set('curr.resource.title', data.title)
}

View File

@ -28,12 +28,12 @@ const convertFontSizePtToPx = (html: string, ratio: number) => {
}) })
} }
export default () => { const slidesStore = useSlidesStore()
const slidesStore = useSlidesStore() const { theme } = storeToRefs(useSlidesStore())
const { theme } = storeToRefs(useSlidesStore())
const { addSlidesFromData } = useAddSlidesOrElements() const { addSlidesFromData } = useAddSlidesOrElements()
const { isEmptySlide } = useSlideHandler() const { isEmptySlide } = useSlideHandler()
export default () => {
const exporting = ref(false) const exporting = ref(false)
@ -486,9 +486,413 @@ export default () => {
reader.readAsArrayBuffer(file) reader.readAsArrayBuffer(file)
} }
return { return {
importSpecificFile, importSpecificFile,
importPPTXFile, importPPTXFile,
PPTXFileToJson,
exporting, exporting,
} }
} }
// 导入PPTX 返回 json
export const PPTXFileToJson = (data: File|ArrayBuffer) => {
return new Promise(async(resolve, reject) => {
if (!data) return
let fileArrayBuffer: ArrayBuffer = null
let resData = {} // 返回的数据
const shapeList: ShapePoolItem[] = []
for (const item of SHAPE_LIST) {
shapeList.push(...item.children)
}
// 获取文件的 ArrayBuffer
const getArrayBuffer = () => {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = () => {
resolve(reader.result)
}
reader.onerror = reject
reader.readAsArrayBuffer(data)
})
}
if (data instanceof File) { // 文件
fileArrayBuffer = await getArrayBuffer()
} else if (data instanceof ArrayBuffer) { // ArrayBuffer
fileArrayBuffer = data
} else {
throw new Error('Invalid data type')
}
// 开始解析
const json = await parse(fileArrayBuffer)
const ratio = 96 / 72
const width = json.size.width
resData.def = json // 保留原始数据
resData.width = width * ratio
resData.ratio = slidesStore.viewportRatio
const slides: Slide[] = []
for (const item of json.slides) {
const { type, value } = item.fill
let background: SlideBackground
if (type === 'image') {
background = {
type: 'image',
image: {
src: value.picBase64,
size: 'cover',
},
}
}
else if (type === 'gradient') {
background = {
type: 'gradient',
gradient: {
type: 'linear',
colors: value.colors.map(item => ({
...item,
pos: parseInt(item.pos),
})),
rotate: value.rot,
},
}
}
else {
background = {
type: 'solid',
color: value,
}
}
const slide: Slide = {
id: nanoid(10),
elements: [],
background,
}
const parseElements = (elements: Element[]) => {
for (const el of elements) {
const originWidth = el.width || 1
const originHeight = el.height || 1
const originLeft = el.left
const originTop = el.top
el.width = el.width * ratio
el.height = el.height * ratio
el.left = el.left * ratio
el.top = el.top * ratio
if (el.type === 'text') {
const textEl: PPTTextElement = {
type: 'text',
id: nanoid(10),
width: el.width,
height: el.height,
left: el.left,
top: el.top,
rotate: el.rotate,
defaultFontName: theme.value.fontName,
defaultColor: theme.value.fontColor,
content: convertFontSizePtToPx(el.content, ratio),
lineHeight: 1,
outline: {
color: el.borderColor,
width: el.borderWidth,
style: el.borderType,
},
fill: el.fillColor,
vertical: el.isVertical,
}
if (el.shadow) {
textEl.shadow = {
h: el.shadow.h * ratio,
v: el.shadow.v * ratio,
blur: el.shadow.blur * ratio,
color: el.shadow.color,
}
}
slide.elements.push(textEl)
}
else if (el.type === 'image') {
slide.elements.push({
type: 'image',
id: nanoid(10),
src: el.src,
width: el.width,
height: el.height,
left: el.left,
top: el.top,
fixedRatio: true,
rotate: el.rotate,
flipH: el.isFlipH,
flipV: el.isFlipV,
})
}
else if (el.type === 'audio') {
slide.elements.push({
type: 'audio',
id: nanoid(10),
src: el.blob,
width: el.width,
height: el.height,
left: el.left,
top: el.top,
rotate: 0,
fixedRatio: false,
color: theme.value.themeColor,
loop: false,
autoplay: false,
})
}
else if (el.type === 'video') {
slide.elements.push({
type: 'video',
id: nanoid(10),
src: (el.blob || el.src)!,
width: el.width,
height: el.height,
left: el.left,
top: el.top,
rotate: 0,
autoplay: false,
})
}
else if (el.type === 'shape') {
if (el.shapType === 'line' || /Connector/.test(el.shapType)) {
const lineElement = parseLineElement(el)
slide.elements.push(lineElement)
}
else {
const shape = shapeList.find(item => item.pptxShapeType === el.shapType)
const vAlignMap: { [key: string]: ShapeTextAlign } = {
'mid': 'middle',
'down': 'bottom',
'up': 'top',
}
const element: PPTShapeElement = {
type: 'shape',
id: nanoid(10),
width: el.width,
height: el.height,
left: el.left,
top: el.top,
viewBox: [200, 200],
path: 'M 0 0 L 200 0 L 200 200 L 0 200 Z',
fill: el.fillColor || 'none',
fixedRatio: false,
rotate: el.rotate,
outline: {
color: el.borderColor,
width: el.borderWidth,
style: el.borderType,
},
text: {
content: convertFontSizePtToPx(el.content, ratio),
defaultFontName: theme.value.fontName,
defaultColor: theme.value.fontColor,
align: vAlignMap[el.vAlign] || 'middle',
},
flipH: el.isFlipH,
flipV: el.isFlipV,
}
if (el.shadow) {
element.shadow = {
h: el.shadow.h * ratio,
v: el.shadow.v * ratio,
blur: el.shadow.blur * ratio,
color: el.shadow.color,
}
}
if (shape) {
element.path = shape.path
element.viewBox = shape.viewBox
if (shape.pathFormula) {
element.pathFormula = shape.pathFormula
element.viewBox = [el.width, el.height]
const pathFormula = SHAPE_PATH_FORMULAS[shape.pathFormula]
if ('editable' in pathFormula && pathFormula.editable) {
element.path = pathFormula.formula(el.width, el.height, pathFormula.defaultValue)
element.keypoints = pathFormula.defaultValue
}
else element.path = pathFormula.formula(el.width, el.height)
}
}
if (el.shapType === 'custom') {
if (el.path!.indexOf('NaN') !== -1) element.path = ''
else {
element.special = true
element.path = el.path!
const { maxX, maxY } = getSvgPathRange(element.path)
element.viewBox = [maxX || originWidth, maxY || originHeight]
}
}
if (element.path) slide.elements.push(element)
}
}
else if (el.type === 'table') {
const row = el.data.length
const col = el.data[0].length
const style: TableCellStyle = {
fontname: theme.value.fontName,
color: theme.value.fontColor,
}
const data: TableCell[][] = []
for (let i = 0; i < row; i++) {
const rowCells: TableCell[] = []
for (let j = 0; j < col; j++) {
const cellData = el.data[i][j]
let textDiv: HTMLDivElement | null = document.createElement('div')
textDiv.innerHTML = cellData.text
const p = textDiv.querySelector('p')
const align = p?.style.textAlign || 'left'
const span = textDiv.querySelector('span')
const fontsize = span?.style.fontSize ? (parseInt(span?.style.fontSize) * ratio).toFixed(1) + 'px' : ''
const fontname = span?.style.fontFamily || ''
const color = span?.style.color || cellData.fontColor
rowCells.push({
id: nanoid(10),
colspan: cellData.colSpan || 1,
rowspan: cellData.rowSpan || 1,
text: textDiv.innerText,
style: {
...style,
align: ['left', 'right', 'center'].includes(align) ? (align as 'left' | 'right' | 'center') : 'left',
fontsize,
fontname,
color,
bold: cellData.fontBold,
backcolor: cellData.fillColor,
},
})
textDiv = null
}
data.push(rowCells)
}
const colWidths: number[] = new Array(col).fill(1 / col)
slide.elements.push({
type: 'table',
id: nanoid(10),
width: el.width,
height: el.height,
left: el.left,
top: el.top,
colWidths,
rotate: 0,
data,
outline: {
width: el.borderWidth || 2,
style: el.borderType,
color: el.borderColor || '#eeece1',
},
cellMinHeight: 36,
})
}
else if (el.type === 'chart') {
let labels: string[]
let legends: string[]
let series: number[][]
if (el.chartType === 'scatterChart' || el.chartType === 'bubbleChart') {
labels = el.data[0].map((item, index) => `坐标${index + 1}`)
legends = ['X', 'Y']
series = el.data
}
else {
const data = el.data as ChartItem[]
labels = Object.values(data[0].xlabels)
legends = data.map(item => item.key)
series = data.map(item => item.values.map(v => v.y))
}
const options: ChartOptions = {}
let chartType: ChartType = 'bar'
switch (el.chartType) {
case 'barChart':
case 'bar3DChart':
chartType = 'bar'
if (el.barDir === 'bar') chartType = 'column'
if (el.grouping === 'stacked' || el.grouping === 'percentStacked') options.stack = true
break
case 'lineChart':
case 'line3DChart':
if (el.grouping === 'stacked' || el.grouping === 'percentStacked') options.stack = true
chartType = 'line'
break
case 'areaChart':
case 'area3DChart':
if (el.grouping === 'stacked' || el.grouping === 'percentStacked') options.stack = true
chartType = 'area'
break
case 'scatterChart':
case 'bubbleChart':
chartType = 'scatter'
break
case 'pieChart':
case 'pie3DChart':
chartType = 'pie'
break
case 'radarChart':
chartType = 'radar'
break
case 'doughnutChart':
chartType = 'ring'
break
default:
}
slide.elements.push({
type: 'chart',
id: nanoid(10),
chartType: chartType,
width: el.width,
height: el.height,
left: el.left,
top: el.top,
rotate: 0,
themeColors: [theme.value.themeColor],
textColor: theme.value.fontColor,
data: {
labels,
legends,
series,
},
options,
})
}
else if (el.type === 'group' || el.type === 'diagram') {
const elements = el.elements.map(_el => ({
..._el,
left: _el.left + originLeft,
top: _el.top + originTop,
}))
parseElements(elements)
}
}
}
parseElements(item.elements)
slides.push(slide)
}
resData.slides = slides
resolve(resData)
})
}

View File

@ -57,9 +57,12 @@
<div class="menu-item" v-tooltip="'导出'" @click="setDialogForExport('pptx')"> <div class="menu-item" v-tooltip="'导出'" @click="setDialogForExport('pptx')">
<IconDownload class="icon" /> <IconDownload class="icon" />
</div> </div>
<a class="github-link" v-tooltip="'Copyright © 2020-PRESENT pipipi-pikachu'" href="https://github.com/pipipi-pikachu/PPTist" target="_blank"> <div class="menu-item" v-tooltip="`${userStore.user.parentDeptName}-${userStore.user.nickName}`">
<el-avatar size="small" :src="avatar" />
</div>
<!-- <a class="github-link" v-tooltip="'Copyright © 2020-PRESENT pipipi-pikachu'" href="https://github.com/pipipi-pikachu/PPTist" target="_blank">
<div class="menu-item"><IconGithub class="icon" /></div> <div class="menu-item"><IconGithub class="icon" /></div>
</a> </a> -->
</div> </div>
<Drawer <Drawer
@ -92,6 +95,9 @@ import Input from '../../../components/Input.vue'
import Popover from '../../../components/Popover.vue' import Popover from '../../../components/Popover.vue'
import PopoverMenuItem from '../../../components/PopoverMenuItem.vue' import PopoverMenuItem from '../../../components/PopoverMenuItem.vue'
import useUserStore from '@/store/modules/user' // -
const userStore = useUserStore() // -
const mainStore = useMainStore() const mainStore = useMainStore()
const slidesStore = useSlidesStore() const slidesStore = useSlidesStore()
const { title } = storeToRefs(slidesStore) const { title } = storeToRefs(slidesStore)
@ -104,7 +110,7 @@ const hotkeyDrawerVisible = ref(false)
const editingTitle = ref(false) const editingTitle = ref(false)
const titleInputRef = ref<InstanceType<typeof Input>>() const titleInputRef = ref<InstanceType<typeof Input>>()
const titleValue = ref('') const titleValue = ref('')
const avatar = ref(import.meta.env.VITE_APP_BASE_API+userStore.avatar) //
const startEditTitle = () => { const startEditTitle = () => {
titleValue.value = title.value titleValue.value = title.value
editingTitle.value = true editingTitle.value = true

View File

@ -51,3 +51,9 @@ export class school {
static checkSchool = data => ApiService.publicHttp(`/smarttalk/audit/checkSchool`,data,'post') static checkSchool = data => ApiService.publicHttp(`/smarttalk/audit/checkSchool`,data,'post')
} }
export class Other {
static baseUrl = "/common/upload"
// 测试
static uploadFile = data => ApiService.publicHttp(this.baseUrl, data, 'post', null, 'file')
}

View File

@ -93,6 +93,14 @@ export function batchUpdateNew(data) {
data: data data: data
}) })
} }
// zdg: 批量新增pptist - 新
export function batchAddNew(data) {
return request({
url: '/education/entpcoursefile/batch/add',
method: 'post',
data: data
})
}
// 修改entpcoursefile // 修改entpcoursefile
export function updateFile2Redis(data) { export function updateFile2Redis(data) {
@ -110,6 +118,14 @@ export function delEntpcoursefile(id) {
method: 'delete' method: 'delete'
}) })
} }
// 删除entpcoursefile - new
export function delEntpcoursefileNew(id) {
return request({
url: '/education/entpcoursefile/delete',
method: 'get',
params: {id}
})
}
// 保存base64图片返回url // 保存base64图片返回url
export function saveEntpCourseBase64File(data) { export function saveEntpCourseBase64File(data) {

View File

@ -1,9 +1,11 @@
// import tab from './tab' // import tab from './tab'
// import auth from './auth' // import auth from './auth'
// import cache from './cache' // import cache from './cache'
import modal from './modal'
// import download from './download' // import download from './download'
import modal from './modal'
// import './vue3-menus'
import vue3Menus from './vue3-menus'
// console.log('vue3Menus', defineComponent)
export default function installPlugins(app){ export default function installPlugins(app){
// 页签操作 // 页签操作
// app.config.globalProperties.$tab = tab // app.config.globalProperties.$tab = tab
@ -15,4 +17,6 @@ export default function installPlugins(app){
app.config.globalProperties.$modal = modal app.config.globalProperties.$modal = modal
// 下载文件 // 下载文件
// app.config.globalProperties.$download = download // app.config.globalProperties.$download = download
// 右键菜单 支持组件|指令|函数 三种方式使用
vue3Menus(app)
} }

View File

@ -0,0 +1,437 @@
import { defineComponent, getCurrentInstance, ref, computed, watch, nextTick, createVNode, Teleport, Transition, render } from 'vue';
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = ".menus-fade-enter-active,\n.menus-fade-leave-active {\n transition: opacity 0.2s ease-in-out;\n}\n.menus-fade-enter-from,\n.menus-fade-leave-to {\n opacity: 0;\n}\n\n.v3-menus {\n position: fixed;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);\n background: #fff;\n border-radius: 4px;\n padding: 8px 0;\n user-select: none;\n box-sizing: border-box;\n}\n\n.v3-menus-body {\n display: block;\n}\n\n.v3-menus-item {\n display: flex;\n line-height: 2rem;\n padding: 0 1rem;\n margin: 0;\n font-size: 0.8rem;\n outline: 0;\n align-items: center;\n transition: 0.2s;\n box-sizing: border-box;\n list-style: none;\n border-bottom: 1px solid #00000000;\n}\n\n.v3-menus-divided {\n border-bottom-color: #ebeef5;\n}\n\n.v3-menus-icon {\n display: flex;\n margin-right: 0.6rem;\n width: 1rem;\n}\n\n.v3-menus-label {\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.v3-menus-suffix {\n margin-left: 1.5rem;\n font-size: 0.39rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.v3-menus-available {\n color: #606266;\n cursor: pointer;\n}\n\n.v3-menus-available:hover {\n background: #ecf5ff;\n color: #409eff;\n}\n\n.v3-menus-disabled {\n color: #c0c4cc;\n cursor: not-allowed;\n}\n\n.v3-menus-active {\n background: #ecf5ff;\n color: #409eff;\n}\n\n.v3-menus-tip {\n font-size: 9px;\n color: #999;\n}\n";
styleInject(css_248z);
const props = {
menus: {
type: Array,
required: true
},
menusClass: {
type: String,
default: null
},
itemClass: {
type: String,
default: null
},
event: {
type: Object,
required: true
},
minWidth: {
type: [Number, String],
default: 'none'
},
maxWidth: {
type: [Number, String],
default: 'none'
},
zIndex: {
type: Number,
default: 3
},
direction: {
type: String,
default: 'right'
},
open: {
type: Boolean,
default: false
},
args: {
type: [Object, Function, Array, Boolean, String],
default: {}
}
};
const vue3MenusComponent = defineComponent({
name: 'vue3-menus',
inheritAttrs: false,
props,
setup(props, {
slots,
attrs
}) {
const windowWidth = globalThis.document.documentElement.clientWidth;
const windowHeight = globalThis.document.documentElement.clientHeight;
const {
proxy
} = getCurrentInstance();
const show = ref(props.open);
const self = {};
const menusRef = ref(null);
const activeIndex = ref(-1);
const left = ref(0);
const top = ref(0);
let direction = props.direction;
const hasIcon = computed(() => {
for (let index = 0; index < props.menus.length; index++) {
const menu = props.menus[index];
if (menu.icon !== undefined) {
return true;
}
}
});
const position = computed(() => {
return {
x: props.event.clientX,
y: props.event.clientY,
width: props.event.width || 0,
height: props.event.height || 0
};
});
const style = computed(() => {
return {
left: `${left.value}px`,
top: `${top.value}px`,
minWidth: `${props.minWidth}px`,
maxWidth: props.maxWidth == 'none' ? props.maxWidth : `${props.maxWidth}px`,
zIndex: props.zIndex
};
});
function leftOpen(menusWidth) {
left.value = position.value.x - menusWidth;
direction = 'left';
if (left.value < 0) {
direction = 'right';
if (position.value.width === 0 || position.value.width === undefined) {
left.value = 0;
} else {
left.value = position.value.x + position.value.width;
}
}
}
function rightOpen(windowWidth, menusWidth) {
left.value = position.value.x + position.value.width;
direction = 'right';
if (left.value + menusWidth > windowWidth) {
direction = 'left';
if (position.value.width === 0 || position.value.width === undefined) {
left.value = windowWidth - menusWidth;
} else {
left.value = position.value.x - menusWidth;
}
}
}
function closeEvent() {
activeIndex.value = -1;
show.value = false;
if (self && self.instance) {
self.instance.close.bind(self.instance)();
self.instance = null;
self.index = null; // @ts-ignore
if (proxy.closeAll) {
// @ts-ignore
proxy.closeAll();
}
}
}
watch(() => props.open, newVal => show.value = newVal);
watch(show, newVal => {
if (newVal) {
nextTick(() => {
const menusWidth = menusRef.value.offsetWidth;
const menusHeight = menusRef.value.offsetHeight;
if (direction === 'left') {
leftOpen(menusWidth);
} else {
rightOpen(windowWidth, menusWidth);
}
top.value = position.value.y;
if (position.value.y + menusHeight > windowHeight) {
if (position.value.height === 0 || position.value.height === undefined) {
top.value = position.value.y - menusHeight;
} else {
top.value = windowHeight - menusHeight;
}
}
setTimeout(() => {
globalThis.document.addEventListener('click', closeEvent);
globalThis.document.addEventListener('contextmenu', closeEvent);
globalThis.document.addEventListener('wheel', closeEvent);
}, 0);
});
} else {
activeIndex.value = -1;
globalThis.document.removeEventListener('click', closeEvent);
globalThis.document.removeEventListener('contextmenu', closeEvent);
globalThis.document.removeEventListener('wheel', closeEvent);
}
}, {
immediate: true
});
function mouseEnter(event, menu, index) {
event.preventDefault();
activeIndex.value = index;
if (!menu || menu.disabled || menu.hidden) {
return;
}
if (self.instance) {
if (self.index === index) {
return;
}
self.instance.close.bind(self.instance)();
self.instance = null;
self.index = null;
}
if (!menu.children) {
return;
}
const enter = menu.enter && typeof menu.enter === 'function' ? menu.enter : null;
if (enter) {
const val = enter(menu, props.args);
if (val === false || val === null) {
return;
}
}
const menuItemClientRect = event.target.getBoundingClientRect();
const vm = createVNode(vue3MenusComponent, { ...props,
menus: menu.children,
direction: direction,
event: {
clientX: menuItemClientRect.x + 3,
clientY: menuItemClientRect.y - 8,
width: menuItemClientRect.width - 2 * 3,
height: menuItemClientRect.width
},
open: false
}, slots);
const container = globalThis.document.createElement('div');
render(vm, container);
vm.component.props.open = true; // @ts-ignore
vm.component.proxy.close = close;
self.instance = vm.component.proxy;
self.instance.container = container;
self.instance.props = vm.component.props;
self.index = index;
}
function mouseClick(event, menu) {
event.preventDefault();
if (!menu || menu.disabled) {
event.stopPropagation();
return;
}
const click = menu.click && typeof menu.click === 'function' ? menu.click : null;
if (click) {
const val = click(menu, props.args);
if (val === false || val === null) {
event.stopPropagation();
}
}
if (menu.children) {
event.stopPropagation();
}
}
function close() {
this.show = false;
if (this.self && this.self.instance) {
this.self.instance.close();
}
nextTick(() => {
render(null, this.container);
});
}
const {
default: $default,
label,
icon,
suffix
} = slots;
const $class = ['v3-menus', attrs.class, props.menusClass];
return () => createVNode(Teleport, {
"to": 'body'
}, {
default: () => [createVNode(Transition, {
"name": 'menus-fade'
}, {
default: () => [!show.value ? null : createVNode("div", {
"ref": menusRef,
"class": $class,
"style": style.value,
"onWheel": e => e.preventDefault(),
"onContextmenu": e => e.preventDefault()
}, [createVNode("div", {
"class": 'v3-menus-body'
}, [props.menus.map((menu, index) => {
if (menu.hidden) {
return null;
}
if ($default) {
return createVNode("div", {
"onContextmenu": $event => mouseClick($event, menu),
"onClick": $event => mouseClick($event, menu),
"onMouseenter": $event => mouseEnter($event, menu, index)
}, [$default({
menu,
activeIndex: activeIndex.value,
index
})]);
} else {
let $class = [props.itemClass, 'v3-menus-item', menu.disabled ? 'v3-menus-disabled' : 'v3-menus-available'];
$class = $class.concat([menu.divided ? 'v3-menus-divided' : null, !menu.disabled && activeIndex.value === index ? 'v3-menus-active' : null]);
return createVNode("div", {
"style": menu.style,
"class": $class.join(' '),
"onClick": $event => mouseClick($event, menu),
"onMouseenter": $event => mouseEnter($event, menu, index),
"onContextmenu": $event => mouseClick($event, menu)
}, [hasIcon.value ? createVNode("div", {
"class": 'v3-menus-icon '
}, [icon ? icon({
menu,
activeIndex: activeIndex.value,
index
}) : createVNode("span", {
"innerHTML": menu.icon
}, null)]) : null, label ? createVNode("span", {
"class": 'v3-menus-label'
}, [label({
menu,
activeIndex: activeIndex.value,
index
})]) : createVNode("span", {
"class": 'v3-menus-label'
}, [menu.label]), menu.children || menu.tip ? createVNode("div", {
"class": 'v3-menus-suffix'
}, [suffix ? suffix({
menu,
activeIndex: activeIndex.value,
index
}) : menu.children ? '▶' : menu.tip ? createVNode("span", {
"class": 'v3-menus-tip'
}, [menu.tip]) : null]) : null]);
}
})])])]
})]
});
}
});
function mouseEvent(menus, args, event) {
let props = {};
if (Array.isArray(menus)) {
props = {
menus,
event,
args,
open: false,
};
} else {
props = {
...menus,
args,
event,
open: false
};
}
const vNode = createVNode(vue3MenusComponent, props);
const container = globalThis.document.createElement('div');
render(vNode, container);
vNode.component.props.open = true;
vNode.component.proxy.closeAll = () => {
nextTick(() => {
render(null, container);
});
};
if (props.prevent == undefined || props.prevent) {
event.preventDefault();
}
}
const directive = {
mounted(el, { value, arg }) {
const vnode = el.__vnode || {};
if (arg === undefined || arg === 'right') {
el.addEventListener("contextmenu", mouseEvent.bind(el, value, vnode.props || {}));
} else if (arg === 'left') {
el.addEventListener("click", mouseEvent.bind(el, value, vnode.props || {}));
} else if (arg === 'all') {
el.addEventListener("contextmenu", mouseEvent.bind(el, value, vnode.props || {}));
el.addEventListener("click", mouseEvent.bind(el, value, vnode.props || {}));
}
},
unmounted(el) {
el.removeEventListener("contextmenu", mouseEvent);
el.removeEventListener("click", mouseEvent);
}
};
const install = function (app, options = {}) {
app.component(options.name || vue3MenusComponent.name, vue3MenusComponent);
app.directive('menus', directive);
app.config.globalProperties.$menusEvent = (event, menus, args) => mouseEvent(menus, args || {}, event);
};
const menusEvent = (event, menus, args) => mouseEvent(menus, args || {}, event);
function index (app) {
app.use(install);
}
export { vue3MenusComponent as Vue3Menus, index as default, directive, menusEvent };

View File

@ -21,6 +21,29 @@ export function getFiles() {
} }
return new Promise(cb) return new Promise(cb)
} }
/**
* base64 blob
*/
export function base64ToBlob(base64Data) {
const contentType = base64Data?.match(/^data:([^;]+);base64,/)?.[1]||'image/png'
// 去除Base64编码数据中的前缀如"data:image/png;base64,"
const byteCharacters = atob(base64Data.split(',')[1]);
const byteArrays = [];
for (let i = 0; i < byteCharacters.length; i++) {
byteArrays.push(byteCharacters.charCodeAt(i));
}
return new Blob([new Uint8Array(byteArrays)], { type: contentType });
}
export function arrayBufferToBlob(arrayBuffer, contentType) {
return new Blob([new Uint8Array(arrayBuffer)], { type: contentType });
}
export function blobToFile(blob, fileName, contentType) {
fileName = fileName || 'file'
contentType = contentType || blob.type ||'image/png'
return new File([blob], fileName, { type: contentType });
}
// ============= 数学公式--相关 =================== // ============= 数学公式--相关 ===================
/** /**

View File

@ -216,7 +216,11 @@ export const createWindow = async (type, data) => {
win.maximize(); win.maximize();
// win.setFullScreen(true) // 设置窗口为全屏 // win.setFullScreen(true) // 设置窗口为全屏
if (import.meta.env.VITE_SHOW_DEV_TOOLS === 'true') win.webContents.openDevTools() // 打开调试工具 if (import.meta.env.VITE_SHOW_DEV_TOOLS === 'true') win.webContents.openDevTools() // 打开调试工具
eventHandles(type, win) // 事件监听处理 let events = {} // 事件处理函数对象
Object.keys(data)
.filter(k => typeof data[k] === 'function')
.forEach(k => events[k] = data[k])
eventHandles(type, win, events) // 事件监听处理
break break
} }
default: default:
@ -286,17 +290,20 @@ export function toolWindow(type, {url, isConsole, isWeb=true, option={}}) {
* 窗口创建-事件处理 * 窗口创建-事件处理
* @param {*} type 事件类型 * @param {*} type 事件类型
* @param {*} win 窗口对象 * @param {*} win 窗口对象
* @param {*} events 事件对象
*/ */
const eventHandles = (type, win) => { const eventHandles = (type, win, events) => {
const toolState = useToolState() // 获取store状态 const toolState = useToolState() // 获取store状态
const winAll = Remote.BrowserWindow.getAllWindows() const winAll = Remote.BrowserWindow.getAllWindows()
const mainWin = winAll.find(o => o.type == 'main') // 主窗口对象 const mainWin = winAll.find(o => o.type == 'main') // 主窗口对象
// 公共方法 // 公共方法
const publicMethods = ({onClosed}={}) => { const publicMethods = ({onClosed, closed, close}={}) => {
// 监听主窗口-关闭事件 // 监听主窗口-关闭事件
mainWin.once('close', () => {winPdf=null;win.destroy();}) mainWin.once('close', () => {winPdf=null;win.destroy();})
win.on('closed', () => { win.on('closed', () => {
if(onClosed) onClosed() // 自定义关闭事件 if(!!onClosed) onClosed() // 自定义关闭事件
if(!!closed) closed() // 自定义关闭事件
if(!!close) close() // 自定义关闭事件
win = null win = null
wins_tool = null wins_tool = null
winChild=null winChild=null
@ -385,8 +392,7 @@ const eventHandles = (type, win) => {
win&&win.destroy() win&&win.destroy()
}); });
const on = { const on = {
onClosed: () => { ...events
}
} }
publicMethods(on) // 加载公共方法 publicMethods(on) // 加载公共方法
break break

View File

@ -12,6 +12,7 @@
<el-button type="info" @click="onchange('/model/design')">教学框架设计</el-button> <el-button type="info" @click="onchange('/model/design')">教学框架设计</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>
<el-button type="primary" v-menus="dt.menus">测试</el-button>
</div> </div>
</div> </div>
</div> </div>
@ -55,6 +56,7 @@ import * as API_entpcourse from '@/api/education/entpcourse' // 相关api
import * as API_entpcoursefile from '@/api/education/entpcoursefile' // api import * as API_entpcoursefile from '@/api/education/entpcoursefile' // api
// //
import ChooseTextbook from '@/components/choose-textbook/index.vue' import ChooseTextbook from '@/components/choose-textbook/index.vue'
import { menusEvent } from '@/plugins/vue3-menus' //
const router = useRouter() const router = useRouter()
const userStore = useUserStore() // const userStore = useUserStore() //
@ -70,6 +72,10 @@ const courseObj = reactive({
}) })
const dt = reactive({ const dt = reactive({
curRow: null, // curRow: null, //
menus: [ //
{ label: '打开', click: (_, args) => handleAll('open', args) },
{ label: '删除', click: (_, args) => handleAll('delete', args) },
],
}) })
// ref // ref
const resourRef = ref() // ref const resourRef = ref() // ref
@ -91,12 +97,19 @@ const sourceOpt = reactive({
noPage: true, // noPage: true, //
isMain: false, // isMain: false, //
highlightCurrentRow: true, // highlightCurrentRow: true, //
rowClick: (r, c, e) => { // rowClick: (r, c, e) => { // -()
if (dt.curRow == r) { // - if (dt.curRow == r) { // -
resourRef.value.$refs.table.setCurrentRow() resourRef.value.$refs.table.setCurrentRow()
dt.curRow = null dt.curRow = null
} else dt.curRow = r } else dt.curRow = r
} },
rowContextmenu: (r, c, e) => { //
dt.menus.forEach(item => {
if(item.label == '打开') item.icon = getIcon(r, 'svg')
else if(item.label == '删除') item.icon = getIcon('icon-shanchu', 'class')
})
menusEvent(e, dt.menus, r)
},
}) })
// //
@ -220,7 +233,7 @@ const HTTP_SERVER_API = (type, params = {}) => {
} }
// //
const handleAll = async(type, row) =>{ const handleAll = async(type, row) =>{
console.log(type) // console.log(type)
switch (type) { switch (type) {
case 'refresh': // case 'refresh': //
getResourceList() getResourceList()
@ -255,20 +268,46 @@ const handleAll = async(type, row) =>{
break; break;
} }
case 'open': { // -pptist case 'open': { // -pptist
// console.log(row) if (row.filetype != 'aptist') return msgUtils.msgWarning('暂不支持该类型文件操作!')
if (row.filetype != 'aptist') return msgUtils.msgWarning('暂不支持该类型文件!')
sessionStore.set('curr.resource', row) // sessionStore.set('curr.resource', row) //
const query = { id: row.id } createWindow('open-win', {
const queryUrl = new URLSearchParams(query).toString() url: '/pptist', //
console.log('打开资源 ', queryUrl) close: () => {
createWindow('open-win', { url: `/pptist?${queryUrl}` }) sessionStore.set('curr.resource', null) //
getResourceList() //
}
})
break
}
case 'delete':{ //
if (!(row && row.id)) return msgUtils.msgWarning('请选择要删除的资源!')
await msgUtils.confirm(`是否确认删除【${row.title}】课程课件?`)
await API_entpcoursefile.delEntpcoursefileNew(row.id)
msgUtils.msgSuccess('删除成功!')
//
await getResourceList()
break;
} }
} }
} }
// icons // icons type svg
const getIcon = o => { const getIcon = (o, type) => {
let icon = o.filetype let icon = typeof o == 'string' ? o : o?.filetype
if (['aptist','PPTX','pptList'].includes(o.filetype)) icon = 'pptx' if (['aptist'].includes(o?.filetype)) icon = 'pptx'
if (!!type) { // icon
switch(type) {
case 'svg': // svg
return `<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-${icon}"></use>
</svg>`
case 'class': // class
return `<span class="icon iconfont ${icon}"></span>`
case 'unicode': // unicode
return `<span class="icon iconfont">${icon}</span>`
default: // icon-class
return `icon-${icon}`
}
}
return icon return icon
} }

View File

@ -59,11 +59,24 @@ import emitter from '@/utils/mitt'
import EditDialog from './edit-dialog.vue' import EditDialog from './edit-dialog.vue'
import AdjustDialog from './adjust-dialog.vue' import AdjustDialog from './adjust-dialog.vue'
import { completion, tempResult } from '@/api/mode/index.js' import { completion, tempResult } from '@/api/mode/index.js'
import { dataSetJson } from '@/utils/comm.js' // import { dataSetJson } from '@/utils/comm.js'
import * as commUtils from '@/utils/comm.js'
import PptDialog from '@/views/prepare/container/pptist-dialog.vue' import PptDialog from '@/views/prepare/container/pptist-dialog.vue'
import useUserStore from '@/store/modules/user'
import {PPTXFileToJson} from '@/AixPPTist/src/hooks/useImport' // pptjson
import * as API_entpcourse from '@/api/education/entpcourse' // api
import * as API_entpcoursefile from '@/api/education/entpcoursefile' // api
import * as Api_server from '@/api/apiService' // api
import msgUtils from '@/plugins/modal' //
const userStore = useUserStore()
const pptDialog = ref(false) const pptDialog = ref(false)
const resultList = ref([]) const resultList = ref([])
const courseObj = reactive({
node: null, //
})
emitter.on('changeMode', (item) => { emitter.on('changeMode', (item) => {
console.log(item, 'item') console.log(item, 'item')
resultList.value = item.child resultList.value = item.child
@ -98,9 +111,43 @@ const params = reactive(
} }
) )
const addAiPPT = (res) => { const addAiPPT = async(res) => {
let node = courseObj.node
if (!node) return msgUtils.msgWarning('请选择章节?')
//TODO resPPT //TODO resPPT
console.log(res) const params = { evalid: node.id, edituserid: userStore.id, pageSize: 1 }
const resEnpt = await HTTP_SERVER_API('getCourseList', params)
if (!(resEnpt?.rows?.[0] || null)) { //
const resid = await HTTP_SERVER_API('addEntpcourse')
courseObj.entp.id = resid
} else courseObj.entp = resEnpt?.rows?.[0] || null
// PPT json
fetch(res.url)
.then(res => res.arrayBuffer())
.then(async buffer => {
const resPptJson = await PPTXFileToJson(buffer)
const { def, slides, ...content } = resPptJson
// || 线
for( let o of slides ) {
await toRousrceUrl(o)
}
// return
// ppt-
const p_params = {parentContent: JSON.stringify(content)}
const parentid = await HTTP_SERVER_API('addEntpcoursefile', p_params)
if (!!parentid??null) { //
if (slides.length > 0) {
const resSlides = slides.map(({id, ...slide}) => JSON.stringify(slide))
const params = {parentid, filetype: 'slide', title: '', slides: resSlides }
const res_3 = await HTTP_SERVER_API('batchAddNew', params)
if (res_3 && res_3.code == 200) {
msgUtils.msgSuccess('生成PPT课件成功')
} else {
msgUtils.msgWarning('生成PPT课件失败')
}
}
}
})
} }
const conversation = async () => { const conversation = async () => {
for (let item of resultList.value) { for (let item of resultList.value) {
@ -155,15 +202,107 @@ emitter.on('changeResult', (item) => {
resultList.value[curIndex.value].answer = item resultList.value[curIndex.value].answer = item
}) })
// ======== zdg start ============
// HTTP
const HTTP_SERVER_API = (type, params = {}) => {
switch (type) {
case 'addEntpcourse': { //
const node = courseObj.node || {}
if (!node) return msgUtils.msgWarning('请选择章节?')
const def = { //
entpid: userStore.user.deptId, // id
level: 1, //
parentid: 0, // id
dictid: 0, // id
evalid: node.id, // id
evalparentid: node.parentid, // id(id)
edusubject: node.edusubject, //
edudegree: node.edudegree, //
edustage: node.edustage, //
coursetype: '课标学科', //
coursetitle: node.itemtitle, //
coursedesc: '', //
status: '', //
dflag: 0, //
edituserid: userStore.id, // id
createblankfile: 'no', //
}
courseObj.entp = def
return API_entpcourse.addEntpcourse(def)
}
case 'addEntpcoursefile': { //
params = getDefParams(params)
return API_entpcoursefile.addEntpcoursefileReturnId(params)
}
case 'batchAddNew': { //
params = getDefParams(params)
return API_entpcoursefile.batchAddNew(params)
}
case 'getCourseList': { //
return API_entpcourse.listEntpcourse(params)
}
case 'getCourseFileList':{ //
return API_entpcoursefile.listEntpcoursefileNew(params)
}
}
}
//
const getDefParams = (params) => {
const enpt = courseObj.entp
const def = {
parentid: 0,
entpid: userStore.user.deptId,
entpcourseid: enpt.id,
ppttype: 'file',
title: enpt.coursetitle,
fileurl: '',
filetype: 'aptist',
datacontent: '',
filekey: '',
filetag: '',
fileidx: 0,
dflag: 0,
status: '',
edituserid: userStore.id
}
return Object.assign(def, params)
}
// || 线
const toRousrceUrl = async(o) => {
if (!!o.src) { // src
const isBase64 = /^data:image\/(\w+);base64,/.test(o.src)
const isBlobUrl = /^blob:/.test(o.src)
console.log('isBase64', o, isBase64)
if (isBase64) {
const bolb = commUtils.base64ToBlob(o.src)
const fileName = Date.now() + '.png'
const file = commUtils.blobToFile(bolb, fileName)
// o.src = fileName
// console.log('file', file)
const formData = new FormData()
formData.append('file', file)
const res = await Api_server.Other.uploadFile(formData)
if (res && res.code == 200){
const url = res?.url
url &&(o.src = url)
}
} else if (isBlobUrl) { //
}
}
if (o?.background?.image) await toRousrceUrl(o.background.image)
if (o?.elements) o.elements.forEach(async o => {await toRousrceUrl(o)})
}
// ======== zdg end ============
const curNode = reactive({}) const curNode = reactive({})
onMounted(() => { onMounted(() => {
let data = sessionStore.get('subject.curNode') let data = sessionStore.get('subject.curNode')
Object.assign(curNode, data); Object.assign(curNode, data);
courseObj.node = data
let jsonKey = `课标-${data.edustage}-${data.edusubject}` let jsonKey = `课标-${data.edustage}-${data.edusubject}`
params.dataset_id = dataSetJson[jsonKey] params.dataset_id = commUtils.dataSetJson[jsonKey]
}) })