Commit 6657fb83 authored by szh's avatar szh

udate

parent 82d26dce
...@@ -98,6 +98,8 @@ func (courseSignupService *CourseSignupService)GetCourseSignup(id uint) (courseS ...@@ -98,6 +98,8 @@ func (courseSignupService *CourseSignupService)GetCourseSignup(id uint) (courseS
courseSignup.Company = user.Company courseSignup.Company = user.Company
courseSignup.Age = user.Age courseSignup.Age = user.Age
courseSignup.Sex = user.Sex courseSignup.Sex = user.Sex
courseSignup.Name = user.Name
courseSignup.Phone = user.Phone
return return
} }
......
<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>-->
<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>
...@@ -3,33 +3,33 @@ ...@@ -3,33 +3,33 @@
<div class="gva-search-box"> <div class="gva-search-box">
<el-form :inline="true" :model="searchInfo" class="demo-form-inline" @keyup.enter="onSubmit"> <el-form :inline="true" :model="searchInfo" class="demo-form-inline" @keyup.enter="onSubmit">
<el-form-item label="活动名称"> <el-form-item label="活动名称">
<el-input v-model="searchInfo.actionName" placeholder="搜索主题" /> <el-input v-model="searchInfo.actionName" placeholder="搜索主题" />
</el-form-item> </el-form-item>
<el-form-item label="活动开始时间"> <el-form-item label="活动开始时间">
<el-date-picker v-model="searchInfo.actionStart" type="datetime" placeholder="搜索条件"></el-date-picker> <el-date-picker v-model="searchInfo.actionStart" type="datetime" placeholder="搜索条件" />
</el-form-item> </el-form-item>
<el-form-item label="活动结束时间"> <el-form-item label="活动结束时间">
<el-date-picker v-model="searchInfo.actionEnd" type="datetime" placeholder="搜索条件"></el-date-picker>
<el-date-picker v-model="searchInfo.actionEnd" type="datetime" placeholder="搜索条件" />
</el-form-item>
<el-form-item label="上下线" prop="isShow">
<el-select v-model="searchInfo.isShow" clearable placeholder="请选择">
<el-option
key="true"
label="是"
value="true"
/>
<el-option
key="false"
label="否"
value="false"
/>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="上下线" prop="isShow">
<el-select v-model="searchInfo.isShow" clearable placeholder="请选择">
<el-option
key="true"
label="是"
value="true">
</el-option>
<el-option
key="false"
label="否"
value="false">
</el-option>
</el-select>
</el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="search" @click="onSubmit">查询</el-button> <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
<el-button icon="refresh" @click="onReset">重置</el-button> <el-button icon="refresh" @click="onReset">重置</el-button>
...@@ -37,78 +37,79 @@ ...@@ -37,78 +37,79 @@
</el-form> </el-form>
</div> </div>
<div class="gva-table-box"> <div class="gva-table-box">
<div class="gva-btn-list"> <div class="gva-btn-list">
<el-button type="primary" icon="plus" @click="openDialog">新增</el-button> <el-button type="primary" icon="plus" @click="openDialog">新增</el-button>
<el-popover v-model:visible="deleteVisible" placement="top" width="160"> <el-popover v-model:visible="deleteVisible" placement="top" width="160">
<p>确定要删除吗?</p> <p>确定要删除吗?</p>
<div style="text-align: right; margin-top: 8px;"> <div style="text-align: right; margin-top: 8px;">
<el-button type="primary" link @click="deleteVisible = false">取消</el-button> <el-button type="primary" link @click="deleteVisible = false">取消</el-button>
<el-button type="primary" @click="onDelete">确定</el-button> <el-button type="primary" @click="onDelete">确定</el-button>
</div> </div>
<template #reference> <template #reference>
<el-button icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="deleteVisible = true">删除</el-button> <el-button icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="deleteVisible = true">删除</el-button>
</template> </template>
</el-popover> </el-popover>
</div> </div>
<el-table <el-table
ref="multipleTable" ref="multipleTable"
style="width: 100%" style="width: 100%"
tooltip-effect="dark" tooltip-effect="dark"
:data="tableData" :data="tableData"
row-key="ID" row-key="ID"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<el-table-column type="selection" width="55" /> <el-table-column type="selection" width="55" />
<el-table-column align="left" label="日期" width="180"> <el-table-column align="left" label="日期" width="180">
<template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template> <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
</el-table-column> </el-table-column>
<el-table-column align="left" label="课程" prop="cid" width="120" /> <el-table-column align="left" label="课程" prop="cid" width="120" />
<el-table-column align="left" label="活动名称" prop="actionName" width="120" /> <el-table-column align="left" label="活动名称" prop="actionName" width="120" />
<el-table-column align="left" label="活动开始时间" width="180"> <el-table-column align="left" label="活动开始时间" width="180">
<template #default="scope">{{ formatDate(scope.row.actionStart) }}</template> <template #default="scope">{{ formatDate(scope.row.actionStart) }}</template>
</el-table-column> </el-table-column>
<el-table-column align="left" label="活动结束时间" width="180"> <el-table-column align="left" label="活动结束时间" width="180">
<template #default="scope">{{ formatDate(scope.row.actionEnd) }}</template> <template #default="scope">{{ formatDate(scope.row.actionEnd) }}</template>
</el-table-column> </el-table-column>
<el-table-column align="left" label="上下线" prop="isShow" width="120"> <el-table-column align="left" label="上下线" prop="isShow" width="120">
<template #default="scope">{{ formatBoolean(scope.row.isShow) }}</template> <template #default="scope">{{ formatBoolean(scope.row.isShow) }}</template>
</el-table-column> </el-table-column>
<el-table-column align="left" label="二维码" prop="qr" width="120" /> <el-table-column align="left" label="二维码" prop="qr" width="120" />
<el-table-column align="left" label="按钮组"> <el-table-column align="left" label="按钮组">
<template #default="scope"> <template #default="scope">
<el-button type="primary" link icon="edit" class="table-button" @click="updateCourseActionFunc(scope.row)">变更</el-button> <el-button type="primary" link icon="edit" class="table-button" @click="updateCourseActionFunc(scope.row)">变更</el-button>
<el-button type="primary" link icon="delete" @click="deleteRow(scope.row)">删除</el-button> <el-button type="primary" link icon="delete" @click="deleteRow(scope.row)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="gva-pagination"> <div class="gva-pagination">
<el-pagination <el-pagination
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:current-page="page" :current-page="page"
:page-size="pageSize" :page-size="pageSize"
:page-sizes="[10, 30, 50, 100]" :page-sizes="[10, 30, 50, 100]"
:total="total" :total="total"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
@size-change="handleSizeChange" @size-change="handleSizeChange"
/> />
</div> </div>
</div> </div>
<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="添加活动" custom-class="user-dialog"> <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="添加活动" custom-class="user-dialog">
<el-form :model="formData" label-position="right" ref="elFormRef" :rules="rule" label-width="80px"> <el-form ref="elFormRef" :model="formData" label-position="right" :rules="rule" label-width="80px">
<el-form-item label="活动名称:" prop="actionName" > <el-form-item label="活动名称:" prop="actionName">
<el-input v-model="formData.actionName" :clearable="true" placeholder="请输入" /> <el-input v-model="formData.actionName" :clearable="true" placeholder="请输入" />
</el-form-item> </el-form-item>
<el-form-item label="活动详情:" prop="actionDesc" > <el-form-item label="活动详情:" prop="actionDesc">
<el-input v-model="formData.actionDesc" :clearable="true" type="textarea" placeholder="请输入" /> <el-input v-model="formData.actionDesc" :clearable="true" type="textarea" placeholder="请输入" />
<!-- <div style="display:inline-block"><basic-editor ref="myEditorRef" @change="handleEditorChange" /></div>-->
</el-form-item> </el-form-item>
<el-form-item label="开始时间:" prop="actionStart" > <el-form-item label="开始时间:" prop="actionStart">
<el-date-picker v-model="formData.actionStart" type="date" style="width:100%" placeholder="选择日期" :clearable="true" /> <el-date-picker v-model="formData.actionStart" type="date" style="width:100%" placeholder="选择日期" :clearable="true" />
</el-form-item> </el-form-item>
<el-form-item label="结束时间:" prop="actionEnd" > <el-form-item label="结束时间:" prop="actionEnd">
<el-date-picker v-model="formData.actionEnd" type="date" style="width:100%" placeholder="选择日期" :clearable="true" /> <el-date-picker v-model="formData.actionEnd" type="date" style="width:100%" placeholder="选择日期" :clearable="true" />
</el-form-item> </el-form-item>
<el-form-item label="是否上线:" prop="isShow" > <el-form-item label="是否上线:" prop="isShow">
<el-switch v-model="formData.isShow" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" clearable ></el-switch> <el-switch v-model="formData.isShow" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" clearable />
</el-form-item> </el-form-item>
<el-form-item label="图标" label-width="80px"> <el-form-item label="图标" label-width="80px">
<div style="display:inline-block" @click="openBannerChange"> <div style="display:inline-block" @click="openBannerChange">
...@@ -116,9 +117,9 @@ ...@@ -116,9 +117,9 @@
<div v-else class="header-img-box">从媒体库选择</div> <div v-else class="header-img-box">从媒体库选择</div>
</div> </div>
</el-form-item> </el-form-item>
<!-- <el-form-item label="二维码:" prop="qr" >--> <!-- <el-form-item label="二维码:" prop="qr" >-->
<!-- <el-input v-model="formData.qr" :clearable="true" placeholder="请输入" />--> <!-- <el-input v-model="formData.qr" :clearable="true" placeholder="请输入" />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
</el-form> </el-form>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
...@@ -132,8 +133,10 @@ ...@@ -132,8 +133,10 @@
</template> </template>
<script> <script>
import BasicEditor from '@/components/BasicEditor.vue'
export default { export default {
name: 'CourseAction' name: 'CourseAction',
components: { BasicEditor },
} }
</script> </script>
...@@ -151,14 +154,14 @@ import { ...@@ -151,14 +154,14 @@ import {
import { getDictFunc, formatDate, formatBoolean, filterDict } from '@/utils/format' import { getDictFunc, formatDate, formatBoolean, filterDict } from '@/utils/format'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, onBeforeRouteUpdate } from 'vue-router' import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { ref, reactive } from 'vue' import { ref, reactive } from 'vue'
import ChooseImg from '@/components/chooseImg/index.vue' import ChooseImg from '@/components/chooseImg/index.vue'
const path = ref(import.meta.env.VITE_BASE_API + '/') const path = ref(import.meta.env.VITE_BASE_API + '/')
const route = useRoute() const route = useRoute()
//console.log(route) // console.log(route)
onBeforeRouteUpdate((to) => { onBeforeRouteUpdate((to) => {
if (to.name === 'courseAction') { if (to.name === 'courseAction') {
console.log(to) console.log(to)
...@@ -169,42 +172,42 @@ onBeforeRouteUpdate((to) => { ...@@ -169,42 +172,42 @@ onBeforeRouteUpdate((to) => {
// 自动化生成的字典(可能为空)以及字段 // 自动化生成的字典(可能为空)以及字段
const formData = ref({ const formData = ref({
cid: 0, cid: 0,
actionName: '', actionName: '',
actionStart: new Date(), actionStart: new Date(),
actionEnd: new Date(), actionEnd: new Date(),
isShow: false, isShow: false,
qr: '', qr: '',
}) })
// 验证规则 // 验证规则
const rule = reactive({ const rule = reactive({
actionName : [{ actionName: [{
required: true, required: true,
message: '', message: '',
trigger: ['input','blur'], trigger: ['input', 'blur'],
}], }],
actionStart : [{ actionStart: [{
required: true, required: true,
message: '', message: '',
trigger: ['input','blur'], trigger: ['input', 'blur'],
}], }],
actionEnd : [{ actionEnd: [{
required: true, required: true,
message: '', message: '',
trigger: ['input','blur'], trigger: ['input', 'blur'],
}], }],
}) })
const elFormRef = ref() const elFormRef = ref()
const showEditor = ref(true)
// =========== 表格控制部分 =========== // =========== 表格控制部分 ===========
const page = ref(1) const page = ref(1)
const total = ref(0) const total = ref(0)
const pageSize = ref(10) const pageSize = ref(10)
const tableData = ref([]) const tableData = ref([])
//const searchInfo = ref({}) // const searchInfo = ref({})
const searchInfo = ref({ cid: Number(route.params.id) }) const searchInfo = ref({ cid: Number(route.params.id) })
// 重置 // 重置
...@@ -217,8 +220,8 @@ const onReset = () => { ...@@ -217,8 +220,8 @@ const onReset = () => {
const onSubmit = () => { const onSubmit = () => {
page.value = 1 page.value = 1
pageSize.value = 10 pageSize.value = 10
if (searchInfo.value.isShow === ""){ if (searchInfo.value.isShow === '') {
searchInfo.value.isShow=null searchInfo.value.isShow = null
} }
getTableData() getTableData()
} }
...@@ -234,6 +237,17 @@ const handleCurrentChange = (val) => { ...@@ -234,6 +237,17 @@ const handleCurrentChange = (val) => {
page.value = val page.value = val
getTableData() getTableData()
} }
const myEditorRef = ref(null)
const handleEditorChange = (data) => {
if (myEditorRef !== null) {
console.log('desc' + data)
formData.value.actionDesc = data
console.log('desc2' + formData.value.actionDesc)
// myEditorRef.value.setMessage(formData.courseDesc)
} else {
console.log('editor closed ' + myEditorRef)
}
}
// 查询 // 查询
const getTableData = async() => { const getTableData = async() => {
...@@ -251,7 +265,7 @@ getTableData() ...@@ -251,7 +265,7 @@ getTableData()
// ============== 表格控制部分结束 =============== // ============== 表格控制部分结束 ===============
// 获取需要的字典 可能为空 按需保留 // 获取需要的字典 可能为空 按需保留
const setOptions = async () =>{ const setOptions = async() => {
} }
// 获取需要的字典 可能为空 按需保留 // 获取需要的字典 可能为空 按需保留
...@@ -266,79 +280,85 @@ const openBannerChange = () => { ...@@ -266,79 +280,85 @@ const openBannerChange = () => {
const multipleSelection = ref([]) const multipleSelection = ref([])
// 多选 // 多选
const handleSelectionChange = (val) => { const handleSelectionChange = (val) => {
multipleSelection.value = val multipleSelection.value = val
} }
// 删除行 // 删除行
const deleteRow = (row) => { const deleteRow = (row) => {
ElMessageBox.confirm('确定要删除吗?', '提示', { ElMessageBox.confirm('确定要删除吗?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
deleteCourseActionFunc(row) deleteCourseActionFunc(row)
}) })
} }
// 批量删除控制标记 // 批量删除控制标记
const deleteVisible = ref(false) const deleteVisible = ref(false)
// 多选删除 // 多选删除
const onDelete = async() => { const onDelete = async() => {
const ids = [] const ids = []
if (multipleSelection.value.length === 0) { if (multipleSelection.value.length === 0) {
ElMessage({ ElMessage({
type: 'warning', type: 'warning',
message: '请选择要删除的数据' message: '请选择要删除的数据'
}) })
return return
} }
multipleSelection.value && multipleSelection.value &&
multipleSelection.value.map(item => { multipleSelection.value.map(item => {
ids.push(item.ID) ids.push(item.ID)
}) })
const res = await deleteCourseActionByIds({ ids }) const res = await deleteCourseActionByIds({ ids })
if (res.code === 0) { if (res.code === 0) {
ElMessage({ ElMessage({
type: 'success', type: 'success',
message: '删除成功' message: '删除成功'
}) })
if (tableData.value.length === ids.length && page.value > 1) { if (tableData.value.length === ids.length && page.value > 1) {
page.value-- page.value--
}
deleteVisible.value = false
getTableData()
}
} }
deleteVisible.value = false
getTableData()
}
}
// 行为控制标记(弹窗内部需要增还是改) // 行为控制标记(弹窗内部需要增还是改)
const type = ref('') const type = ref('')
// 更新行 // 更新行
const updateCourseActionFunc = async(row) => { const updateCourseActionFunc = async(row) => {
const res = await findCourseAction({ ID: row.ID }) const res = await findCourseAction({ ID: row.ID })
type.value = 'update' type.value = 'update'
if (res.code === 0) { if (res.code === 0) {
formData.value = res.data.recourseAction formData.value = res.data.recourseAction
dialogFormVisible.value = true dialogFormVisible.value = true
}
}
setTimeout(() => {
myEditorRef.value.setText(res.data.recourseAction.actionDesc)
}, 500)
// if (myEditorRef.value) {
// console.log('update' + res.data.recourseAction.actionDesc)
// myEditorRef.value.setText(res.data.recourseAction.actionDesc)
// }
}
}
// 删除行 // 删除行
const deleteCourseActionFunc = async (row) => { const deleteCourseActionFunc = async(row) => {
const res = await deleteCourseAction({ ID: row.ID }) const res = await deleteCourseAction({ ID: row.ID })
if (res.code === 0) { if (res.code === 0) {
ElMessage({ ElMessage({
type: 'success', type: 'success',
message: '删除成功' message: '删除成功'
}) })
if (tableData.value.length === 1 && page.value > 1) { if (tableData.value.length === 1 && page.value > 1) {
page.value-- page.value--
}
getTableData()
} }
getTableData()
}
} }
// 弹窗控制标记 // 弹窗控制标记
...@@ -346,48 +366,55 @@ const dialogFormVisible = ref(false) ...@@ -346,48 +366,55 @@ const dialogFormVisible = ref(false)
// 打开弹窗 // 打开弹窗
const openDialog = () => { const openDialog = () => {
type.value = 'create' type.value = 'create'
dialogFormVisible.value = true dialogFormVisible.value = true
showEditor.value = true
} }
// 关闭弹窗 // 关闭弹窗
const closeDialog = () => { const closeDialog = () => {
dialogFormVisible.value = false console.log('closeDialog')
formData.value = { formData.value = {
cid: 0, cid: 0,
actionName: '', actionName: '',
actionStart: new Date(), actionDesc: '',
actionEnd: new Date(), actionStart: new Date(),
isShow: false, actionEnd: new Date(),
qr: '', isShow: false,
} qr: '',
}
if (myEditorRef.value) {
myEditorRef.value.resetEditorContent()
}
dialogFormVisible.value = false
} }
// 弹窗确定 // 弹窗确定
const enterDialog = async () => { const enterDialog = async() => {
formData.value.cid = Number(route.params.id) formData.value.cid = Number(route.params.id)
elFormRef.value?.validate( async (valid) => { elFormRef.value?.validate(async(valid) => {
if (!valid) return if (!valid) return
let res let res
switch (type.value) { switch (type.value) {
case 'create': case 'create':
res = await createCourseAction(formData.value) res = await createCourseAction(formData.value)
break break
case 'update': case 'update':
res = await updateCourseAction(formData.value) res = await updateCourseAction(formData.value)
break break
default: default:
res = await createCourseAction(formData.value) res = await createCourseAction(formData.value)
break break
} }
if (res.code === 0) { if (res.code === 0) {
ElMessage({ ElMessage({
type: 'success', type: 'success',
message: '创建/更改成功' message: '创建/更改成功'
}) })
closeDialog() closeDialog()
getTableData() getTableData()
} }
}) })
} }
</script> </script>
......
...@@ -93,10 +93,10 @@ ...@@ -93,10 +93,10 @@
<!-- <el-input v-model="formData.courseDesc" :clearable="true" type = "textarea" placeholder="请输入" />--> <!-- <el-input v-model="formData.courseDesc" :clearable="true" type = "textarea" placeholder="请输入" />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-form-item label="课程描述:" prop="courseDesc" style=""> <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>--> <!-- <vue-editor v-model="formData.courseDesc"></vue-editor>-->
<!-- <div style="display:inline-block"><quill-editor v-model:value="formData.courseDesc"></quill-editor></div>--> <!-- <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-input v-model="formData.courseDesc" :clearable="true" type = "textarea" placeholder="请输入" />
</el-form-item> </el-form-item>
<el-form-item label="展示图" label-width="80px"> <el-form-item label="展示图" label-width="80px">
<div style="display:inline-block" @click="openBannerChange"> <div style="display:inline-block" @click="openBannerChange">
...@@ -124,7 +124,20 @@ import BasicEditor from '@/components/BasicEditor.vue' ...@@ -124,7 +124,20 @@ import BasicEditor from '@/components/BasicEditor.vue'
export default { export default {
name: 'CourseList', 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> </script>
...@@ -142,7 +155,7 @@ import { ...@@ -142,7 +155,7 @@ import {
// 全量引入格式化工具 请按需保留 // 全量引入格式化工具 请按需保留
import { getDictFunc, formatDate, formatBoolean, filterDict } from '@/utils/format' import { getDictFunc, formatDate, formatBoolean, filterDict } from '@/utils/format'
import { ElMessage, ElMessageBox } from 'element-plus' 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 ChooseImg from '@/components/chooseImg/index.vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
...@@ -182,8 +195,8 @@ const rule = reactive({ ...@@ -182,8 +195,8 @@ const rule = reactive({
}], }],
}) })
const elFormRef = ref() const elFormRef = ref()
const eshow = ref(true)
// =========== 表格控制部分 =========== // =========== 表格控制部分 ===========
const page = ref(1) const page = ref(1)
...@@ -308,8 +321,19 @@ const updateCourseListFunc = async(row) => { ...@@ -308,8 +321,19 @@ const updateCourseListFunc = async(row) => {
const res = await findCourseList({ ID: row.ID }) const res = await findCourseList({ ID: row.ID })
type.value = 'update' type.value = 'update'
if (res.code === 0) { if (res.code === 0) {
formData.value = res.data.recourseList
dialogFormVisible.value = true 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 = () => { ...@@ -343,16 +367,24 @@ const openDialog = () => {
// 关闭弹窗 // 关闭弹窗
const closeDialog = () => { const closeDialog = () => {
dialogFormVisible.value = false console.log(myEditorRef)
if (myEditorRef.value) {
myEditorRef.value.resetEditorContent()
}
formData.value = { formData.value = {
courseName: '', courseName: '',
courseDesc: '', courseDesc: '',
courseBanner: '', courseBanner: '',
isShow: false, isShow: false,
} }
dialogFormVisible.value = false
} }
// 弹窗确定 // 弹窗确定
const enterDialog = async() => { const enterDialog = async() => {
formData.value.courseDesc = myEditorRef.value.valueHtml
// console.log(myEditorRef.value.getMessage())
elFormRef.value?.validate(async(valid) => { elFormRef.value?.validate(async(valid) => {
if (!valid) return if (!valid) return
let res let res
......
...@@ -81,14 +81,20 @@ ...@@ -81,14 +81,20 @@
<el-form-item label="用户:" prop="addr" > <el-form-item label="用户:" prop="addr" >
<el-input v-model="formData.addr" :clearable="false" placeholder="请输入" disabled/> <el-input v-model="formData.addr" :clearable="false" placeholder="请输入" disabled/>
</el-form-item> </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-switch v-model="formData.sex" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" disabled></el-switch>
</el-form-item> </el-form-item>
<el-form-item label="年龄:" prop="age" > <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>
<el-form-item label="公司:" prop="company" > <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>
<el-form-item label="头像:" prop="photo" > <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"> <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 @@ ...@@ -113,14 +119,20 @@
<el-form-item label="用户:" prop="addr" > <el-form-item label="用户:" prop="addr" >
<el-input v-model="formData.addr" :clearable="false" placeholder="请输入" disabled/> <el-input v-model="formData.addr" :clearable="false" placeholder="请输入" disabled/>
</el-form-item> </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-switch v-model="formData.sex" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" disabled></el-switch>
</el-form-item> </el-form-item>
<el-form-item label="年龄:" prop="age" > <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>
<el-form-item label="公司:" prop="company" > <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>
<el-form-item label="头像:" prop="photo" > <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"> <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