Skip to content

C
courseSign
Commit 6657fb83 authored by szh's avatar szh
Browse files
Options

udate

parent 82d26dce
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 446 additions and 14 deletions
server/service/course/course_signup.go
View file @ 6657fb83
......@@ -98,6 +98,8 @@ func (courseSignupService *CourseSignupService)GetCourseSignup(id uint) (courseS
courseSignup.Company = user.Company
courseSignup.Age = user.Age
courseSignup.Sex = user.Sex
courseSignup.Name = user.Name
courseSignup.Phone = user.Phone
return
}
......
web/src/components/BasicEditor.vue 0 → 100644
View file @ 6657fb83
<template>
<div class="editor">
<Toolbar
:editor="editorRef"
:default-config="toolbarConfig"
:mode="mode"
style="border: 1px solid #ccc"
/>
<Editor
v-model="valueHtml"
style="height: 500px; overflow-y: hidden;border: 1px solid #ccc"
:default-config="editorConfig"
:mode="mode"
@onChange="contentChange"
@onCreated="handleCreated"
/>
</div>
</template>
<script setup name='WangEditor' lang='ts'>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { DomEditor } from '@wangeditor/editor'
const props = defineProps<{
text?:string, // text:用于做数据回显功能
ishow?:true
}>()
const emits = defineEmits<{(e:"change", data:any):void // 主要用于父组件接收wangeditor实时编辑的内容
}>()
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('')
// 工具栏模式
const mode = ref('default') // 简洁
onMounted(() => {
setTimeout(() => {
valueHtml.value = props.text ?? '' // 回显数据
console.log('text init', valueHtml.value)
// const toolbar = DomEditor.getToolbar(editorRef.value) as any;
// const curToolbarConfig = toolbar.getConfig();
// console.log(curToolbarConfig.toolbarKeys); //这里会打印出所有的key
}, 200)
})
const resetEditorContent = () => {
console.log('reset')
valueHtml.value = ''
}
const setText = (data) => {
console.log('set' + data)
console.log('editor' + editorRef)
valueHtml.value = data
}
expose({
resetEditorContent,
setText,
})
/**
* file 转Base64 DataURL
* @param {File} file
* @returns
*/
const fileToBase64Async = (file:File) => {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = (e:any) => {
resolve(e.target.result)
}
})
}
// [
// "blockquote",
// "header1",
// "header2",
// "header3",
// "|",
// "bold",
// "underline",
// "italic",
// "through",
// "color",
// "bgColor",
// "clearStyle",
// "|",
// "bulletedList",
// "numberedList",
// "todo",
// "justifyLeft",
// "justifyRight",
// "justifyCenter",
// "|",
// "insertLink",
// {
// "key": "group-image",
// "title": "图片",
// "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z\"></path></svg>",
// "menuKeys": [
// "insertImage",
// "uploadImage"
// ]
// },
// "insertVideo",
// "insertTable",
// "codeBlock",
// "|",
// "undo",
// "redo",
// "|",
// "fullScreen"
// ]
// 工具栏配置项
const toolbarConfig = {
excludeKeys: ['insertLink', 'viewImageLink', 'insertVideo', 'emotion', 'fullScreen', 'codeBlock', 'todo'] // 排除不需要的菜单
}
// 编辑器配置项
const editorConfig = {
placeholder: '请输入内容...',
MENU_CONF: {
uploadImage: {
async customUpload(file:File, insertFn:any) {
const fileBase64 = fileToBase64Async(file)
insertFn(fileBase64) // 最后插入图片 insertFn(url, alt, href)，alt：描述，href:链接，后面非必填
console.log(fileBase64)
},
},
}
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
console.log('destroy')
if (editorRef.value == null) return
editorRef.value.destroy()
})
const handleCreated = (editor:any) => {
editorRef.value = editor // 记录 editor 实例，重要！
}
const contentChange = (editor:any) => {
emits('change', editor.getHtml())
}
</script>
<style lang="scss">
.editor{
width: 100%;
//修改工具栏的背景色
.w-e-bar{
background: var(--w-e-bar-bg-color);
}
}
// 去除内置样式
.w-e-text-container blockquote, .w-e-text-container li,
.w-e-text-container p,
.w-e-text-container td,
.w-e-text-container th,
.w-e-toolbar *{
line-height: unset !important;
}
</style>
<!--<template>-->
<!-- <div>-->
<!-- <div style="border: 1px solid #ccc; margin-top: 10px">-->
<!-- <Toolbar-->
<!-- :editor="editorRef"-->
<!-- :default-config="toolbarConfig"-->
<!-- :mode="mode"-->
<!-- style="border-bottom: 1px solid #ccc"-->
<!-- />-->
<!-- <Editor-->
<!-- v-model="valueHtml"-->
<!-- :default-config="editorConfig"-->
<!-- :mode="mode"-->
<!-- style="height: 400px; overflow-y: hidden"-->
<!-- @onCreated="handleCreated"-->
<!-- @onChange="handleChange"-->
<!-- @onDestroyed="handleDestroyed"-->
<!-- @onFocus="handleFocus"-->
<!-- @onBlur="handleBlur"-->
<!-- @customAlert="customAlert"-->
<!-- @customPaste="customPaste"-->
<!-- />-->
<!-- </div>-->
<!-- <div style="margin-top: 10px;display: none">-->
<!-- <textarea-->
<!-- v-model="valueHtml"-->
<!-- readonly-->
<!-- style="width: 100%; height: 200px; outline: none;"-->
<!-- />-->
<!-- </div>-->
<!-- </div>-->
<!--</template>-->
<!--<script>-->
<!--import '@wangeditor/editor/dist/css/style.css'-->
<!--import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'-->
<!--import { Editor, Toolbar } from '@wangeditor/editor-for-vue'-->
<!--export default {-->
<!-- components: { Editor, Toolbar },-->
<!-- methods: {-->
<!-- getMessage() {-->
<!-- return this.valueHtml-->
<!-- },-->
<!-- setMessage(data) {-->
<!-- this.valueHtml = data-->
<!-- }-->
<!-- },-->
<!-- setup() {-->
<!-- // defineProps({-->
<!-- // target: {-->
<!-- // type: Object,-->
<!-- // default: null,-->
<!-- // },-->
<!-- // targetKey: {-->
<!-- // type: String,-->
<!-- // default: '',-->
<!-- // },-->
<!-- // })-->
<!-- //-->
<!-- //const emit = defineEmits(['editor-load']),-->
<!-- // 编辑器实例，必须用 shallowRef，重要！-->
<!-- const editorRef = shallowRef()-->
<!-- // 内容 HTML-->
<!-- const valueHtml = ref('<p>hello</p>')-->
<!-- // 模拟 ajax 异步获取内容-->
<!-- onMounted(() => {-->
<!-- setTimeout(() => {-->
<!-- valueHtml.value = ''-->
<!-- }, 1500)-->
<!-- this.$emit('editor-load')-->
<!-- })-->
<!-- const toolbarConfig = {}-->
<!-- const editorConfig = { placeholder: '请输入内容...' }-->
<!-- // 组件销毁时，也及时销毁编辑器，重要！-->
<!-- onBeforeUnmount(() => {-->
<!-- const editor = editorRef.value-->
<!-- if (editor == null) return-->
<!-- editor.destroy()-->
<!-- })-->
<!-- // 编辑器回调函数-->
<!-- const handleCreated = (editor) => {-->
<!-- console.log('created', editor)-->
<!-- editorRef.value = editor // 记录 editor 实例，重要！-->
<!-- }-->
<!-- const handleChange = (editor) => {-->
<!-- console.log('change:', editor.getHtml())-->
<!-- // if (target && targetKey) {-->
<!-- // target[targetKey] = editor.getHtml()-->
<!-- // }-->
<!-- // emit('enterEditor', editor.getHtml())-->
<!-- }-->
<!-- const handleDestroyed = (editor) => {-->
<!-- console.log('destroyed', editor)-->
<!-- }-->
<!-- const handleFocus = (editor) => {-->
<!-- console.log('focus', editor)-->
<!-- }-->
<!-- const handleBlur = (editor) => {-->
<!-- console.log('blur', editor)-->
<!-- }-->
<!-- const customAlert = (info, type) => {-->
<!-- alert(`【自定义提示】${type} - ${info}`)-->
<!-- }-->
<!-- const customPaste = (editor, event, callback) => {-->
<!-- console.log('ClipboardEvent 粘贴事件对象', event)-->
<!-- // 自定义插入内容-->
<!-- editor.insertText('xxx')-->
<!-- // 返回值（注意，vue 事件的返回值，不能用 return）-->
<!-- callback(false) // 返回 false ，阻止默认粘贴行为-->
<!-- // callback(true) // 返回 true ，继续默认的粘贴行为-->
<!-- }-->
<!-- const insertText = () => {-->
<!-- const editor = editorRef.value-->
<!-- if (editor == null) return-->
<!-- editor.insertText('hello world')-->
<!-- }-->
<!-- const printHtml = () => {-->
<!-- const editor = editorRef.value-->
<!-- if (editor == null) return-->
<!-- console.log(editor.getHtml())-->
<!-- }-->
<!-- const disable = () => {-->
<!-- const editor = editorRef.value-->
<!-- if (editor == null) return-->
<!-- editor.disable()-->
<!-- }-->
<!-- return {-->
<!-- editorRef,-->
<!-- mode: 'default',-->
<!-- valueHtml,-->
<!-- toolbarConfig,-->
<!-- editorConfig,-->
<!-- handleCreated,-->
<!-- handleChange,-->
<!-- handleDestroyed,-->
<!-- handleFocus,-->
<!-- handleBlur,-->
<!-- customAlert,-->
<!-- customPaste,-->
<!-- insertText,-->
<!-- printHtml,-->
<!-- disable-->
<!-- }-->
<!-- },-->
<!--}-->
<!--</script>-->
web/src/components/QuillEditor.vue 0 → 100644
View file @ 6657fb83
<template>
<div class="editor-box">
<QuillEditor v-model:content="content" content-type="html" :options="editorOption" />
</div>
</template>
<script setup lang="ts">
import { reactive, ref, watchEffect } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
const props = defineProps({
// 默认值
value: {
type: String,
default: '',
},
})
const emit = defineEmits(['update:value'])
const content = ref(props.value)
const editorOption = reactive({
modules: {
toolbar: [ // 工具栏配置
[{ 'color': [] }, 'bold', 'italic', 'underline', 'strike'], // 粗体、斜体、下划线、删除线
[{ 'header': 1 }, { 'header': 2 }], // 标题1和标题2
[{ 'list': 'ordered' }, { 'list': 'bullet' }], // 有序列表和无序列表
[{ 'script': 'sub' }, { 'script': 'super' }], // 上标和下标
[{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
[{ 'direction': 'rtl' }], // 文字方向
[{ 'size': ['small', false, 'large', 'huge'] }], // 字号
[{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 标题等级
[{ 'color': [] }, { 'background': [] }], // 字体颜色和背景色
[{ 'font': [] }], // 字体
[{ 'align': [] }], // 对齐方式
['clean'] // 清除格式
]
},
placeholder: '请输入内容...',
theme: 'snow'
},
)
// 内容有变化，就更新内容，将值返回给父组件
watchEffect(() => {
emit('update:value', content.value)
})
</script>
web/src/view/courseAction/courseAction.vue
View file @ 6657fb83
This diff is collapsed.
web/src/view/courseList/courseList.vue
View file @ 6657fb83
......@@ -93,10 +93,10 @@
<!-- <el-input v-model="formData.courseDesc" :clearable="true" type = "textarea" placeholder="请输入" />-->
<!-- </el-form-item>-->
<el-form-item label="课程描述:" prop="courseDesc" style="">
<!-- <div style="display:inline-block"><basic-editor ref="myEditorRef" v-model="formData.courseDesc" /></div>-->
<!-- <div style="display:inline-block"><basic-editor ref="myEditorRef" :text="formData.courseDesc" @change="handleEditorChange"/></div>-->
<!-- <vue-editor v-model="formData.courseDesc"></vue-editor>-->
<!-- <div style="display:inline-block"><quill-editor v-model:value="formData.courseDesc"></quill-editor></div>-->
<el-input v-model="formData.courseDesc" :clearable="true" type = "textarea" placeholder="请输入" />
<!-- <div style="display:inline-block"><quill-editor v-model:value="formData.courseDesc"></quill-editor></div>-->
<el-input v-model="formData.courseDesc" :clearable="true" type = "textarea" placeholder="请输入" />
</el-form-item>
<el-form-item label="展示图" label-width="80px">
<div style="display:inline-block" @click="openBannerChange">
......@@ -124,7 +124,20 @@ import BasicEditor from '@/components/BasicEditor.vue'
export default {
name: 'CourseList',
components: { BasicEditor }
components: { BasicEditor },
data() {
return {
}
},
methods: {
// handleEditorLoad() {
// if (myEditorRef !== null && formData.courseDesc !== '') {
// console.log(formData.courseDesc)
// myEditorRef.value.setMessage(formData.courseDesc)
// }
// },
}
}
</script>
......@@ -142,7 +155,7 @@ import {
// 全量引入格式化工具 请按需保留
import { getDictFunc, formatDate, formatBoolean, filterDict } from '@/utils/format'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive } from 'vue'
import { ref, reactive, watch } from 'vue'
import ChooseImg from '@/components/chooseImg/index.vue'
import { useRouter } from 'vue-router'
......@@ -182,8 +195,8 @@ const rule = reactive({
}],
})
const elFormRef = ref()
const eshow = ref(true)
// =========== 表格控制部分 ===========
const page = ref(1)
......@@ -308,8 +321,19 @@ const updateCourseListFunc = async(row) => {
const res = await findCourseList({ ID: row.ID })
type.value = 'update'
if (res.code === 0) {
formData.value = res.data.recourseList
dialogFormVisible.value = true
formData.value = res.data.recourseList
if (myEditorRef) {
myEditorRef.value.setText(res.data.recourseList.courseDesc)
}
}
}
const handleEditorChange = (data) => {
if (myEditorRef !== null) {
console.log(data)
formData.value.courseDesc = data
// myEditorRef.value.setMessage(formData.courseDesc)
}
}
......@@ -343,16 +367,24 @@ const openDialog = () => {
// 关闭弹窗
const closeDialog = () => {
dialogFormVisible.value = false
console.log(myEditorRef)
if (myEditorRef.value) {
myEditorRef.value.resetEditorContent()
}
formData.value = {
courseName: '',
courseDesc: '',
courseBanner: '',
isShow: false,
}
dialogFormVisible.value = false
}
// 弹窗确定
const enterDialog = async() => {
formData.value.courseDesc = myEditorRef.value.valueHtml
// console.log(myEditorRef.value.getMessage())
elFormRef.value?.validate(async(valid) => {
if (!valid) return
let res
......
web/src/view/courseSignup/courseSignup.vue
View file @ 6657fb83
......@@ -81,14 +81,20 @@
<el-form-item label="用户:" prop="addr" >
<el-input v-model="formData.addr" :clearable="false" placeholder="请输入" disabled/>
</el-form-item>
<el-form-item label="性别 0 女性 1 男性:" prop="sex" >
<el-form-item label="姓名:" prop="name" >
<el-input v-model="formData.name" :clearable="false" placeholder="请输入" disabled/>
</el-form-item>
<el-form-item label="性别:" prop="sex" >
<el-switch v-model="formData.sex" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" disabled></el-switch>
</el-form-item>
<el-form-item label="年龄:" prop="age" >
<el-input v-model.number="formData.age" placeholder="请输入" disabled/>
<el-input v-model.number="formData.age" placeholder="" disabled/>
</el-form-item>
<el-form-item label="公司:" prop="company" >
<el-input v-model.number="formData.company" placeholder="请输入" disabled/>
<el-input v-model="formData.company" placeholder="" disabled/>
</el-form-item>
<el-form-item label="电话:" prop="phone" >
<el-input v-model.number="formData.phone" placeholder="" disabled/>
</el-form-item>
<el-form-item label="头像:" prop="photo" >
<img v-if="formData.photo" alt="头像" class="header-img-box" :src="(formData.photo && formData.photo.slice(0, 4) !== 'http')?path+formData.photo:formData.photo">
......@@ -113,14 +119,20 @@
<el-form-item label="用户:" prop="addr" >
<el-input v-model="formData.addr" :clearable="false" placeholder="请输入" disabled/>
</el-form-item>
<el-form-item label="性别 0 女性 1 男性:" prop="sex" >
<el-form-item label="姓名:" prop="name" >
<el-input v-model="formData.name" :clearable="false" placeholder="请输入" disabled/>
</el-form-item>
<el-form-item label="性别:" prop="sex" >
<el-switch v-model="formData.sex" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" disabled></el-switch>
</el-form-item>
<el-form-item label="年龄:" prop="age" >
<el-input v-model.number="formData.age" placeholder="请输入" disabled/>
<el-input v-model.number="formData.age" placeholder="" disabled/>
</el-form-item>
<el-form-item label="公司:" prop="company" >
<el-input v-model.number="formData.company" placeholder="请输入" disabled/>
<el-input v-model="formData.company" placeholder="" disabled/>
</el-form-item>
<el-form-item label="电话:" prop="phone" >
<el-input v-model.number="formData.phone" placeholder="请输入" disabled/>
</el-form-item>
<el-form-item label="头像:" prop="photo" >
<img v-if="formData.photo" alt="头像" class="header-img-box" :src="(formData.photo && formData.photo.slice(0, 4) !== 'http')?path+formData.photo:formData.photo">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment