zm/nuttyreading-master-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

医学标签添加多媒体文件和富文本

Browse Source
This commit is contained in:
@fawn-nine
2024-06-05 17:30:09 +08:00
parent a7fbbdbae7
commit 5024795c61
1 changed files with 440 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

672
src/views/modules/course/medicalLabel.vue
View File

@@ -14,138 +14,240 @@
<div <div
v-if="isFresh" v-if="isFresh"
v-loading="!isFresh" v-loading="!isFresh"
style="width: calc(100% - 360px); height: 100%; float: right; border: 1px solid #bababa; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); border-radius: 10px;position: relative;" style="width: calc(100% - 360px); height: 100%; float: right; border: 1px solid #bababa; border-top:none; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); border-radius: 10px;position: relative;"
> >
<div class="border_box info_box"> <el-tabs type="card">
<div class="title_box"> <el-tab-pane label="基本标签信息">
<div class="title"><span class="line"></span>基本标签信息</div> <div class="border_box info_box">
</div> <div class="title_box">
<div class="title"><span class="line"></span>基本标签信息</div>
<div class="addFormBox"> </div>
<el-form :model="addForm" ref="addForm" label-width="80px"> <div class="addFormBox">
<el-form-item label="标签名称" prop="title" class="form_item"> <el-form :model="addForm" ref="addForm" label-width="80px">
<el-input <el-form-item label="标签名称" prop="title" class="form_item">
placeholder="请输入标签名称" <el-input
style="width: 100%" placeholder="请输入标签名称"
v-model="addForm.title" style="width: 100%"
clearable v-model="addForm.title"
> clearable
</el-input>
</el-form-item>
<el-form-item label="排序" prop="sort" class="form_item">
<el-input-number
placeholder="请输入标签排序"
style="width: 100%"
v-model="addForm.sort"
:min="0"
clearable
@keyup.native="UpNumber"
@keydown.native="UpNumber"
>
</el-input-number>
</el-form-item>
<el-form-item
label="封面图"
prop="icon"
label-width="120px"
class="form_item"
>
<div style="display:flex; align-items:center">
<div>
<el-upload
class="avatar-uploader"
:action="baseUrl + '/oss/fileoss'"
:show-file-list="false"
:on-success="handlePicSuccess"
> >
<!-- <img v-if="!refreshImg" :src="addForm.images" class="avatar"> --> </el-input>
<img v-if="fimages" :src="fimages" class="avatar" /> </el-form-item>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload> <el-form-item label="排序" prop="sort" class="form_item">
</div> <el-input-number
<div> placeholder="请输入标签排序"
<div v-if="fimages != ''"> style="width: 100%"
<el-tag class="delImgBtn" @click="delImg()" type="danger" v-model="addForm.sort"
>清空图片</el-tag :min="0"
> clearable
@keyup.native="UpNumber"
@keydown.native="UpNumber"
>
</el-input-number>
</el-form-item>
<el-form-item
label="是否为最终级"
prop="isLast"
label-width="120px"
class="form_item"
>
<el-switch
v-model="addForm.isLast"
active-color="#13ce66"
:active-value="1"
:inactive-value="0"
active-text="是"
inactive-text="否"
@change="handleChangeIsLast"
>
</el-switch>
</el-form-item>
<div
class="flexBox"
style="width:100%;justify-content: space-between;"
>
<div class="subBox" style="display:flex">
<div style="display:flex; align-items:center; width:100%;justify-content:center">
<div style="margin-right:15px">封面图</div>
<div>
<el-upload
class="avatar-uploader"
:action="baseUrl + '/oss/fileoss'"
:show-file-list="false"
:on-success="handlePicSuccess"
>
<img v-if="fimages" :src="fimages" class="avatar" />
<i
v-else
class="el-icon-plus avatar-uploader-icon"
></i>
</el-upload>
</div>
<div>
<div v-if="fimages != ''">
<el-tag
class="delImgBtn"
@click="delImg()"
type="danger"
>清空图片</el-tag
>
</div>
</div>
</div>
</el-form-item>
</div>
<div class="subBox">
<div style="">
<div class="dataType flexBox" >
<el-radio v-model="addForm.dataType" :label="1"
>加密视频</el-radio
>
<el-radio v-model="addForm.dataType" :label="2"
>上传音频</el-radio
>
</div>
<div>
<div v-if="addForm.dataType == 2" style="margin:20px auto; margin-top:20px ; width: 50%; ">
<el-upload
class="upload-demo audioUpload"
:action="baseUrl + '/oss/fileoss'"
:on-remove="audioHandleRemove"
:on-success="audioUploadSuccess"
accept=".mp3"
:limit="1"
:file-list="audioFileList"
>
<el-button size="small" type="primary"
>点击上传</el-button
>
<div slot="tip" class="el-upload__tip" style="float:right">
只能上传.mp3文件
</div>
</el-upload>
</div>
<el-form-item style="margin-top:20px" v-else label="加密视频id">
<el-input v-model="addForm.media"></el-input>
</el-form-item>
</div>
</div>
</div> </div>
</div> </div>
</div> <div style="width:100%">
</el-form-item> <div style="margin:10px 0"><span class="line"></span> 标签介绍</div>
<el-form-item <el-form-item prop="productDetails" label-width="0">
label="是否为最终级" <el-upload
prop="isLast" style="display:none"
label-width="120px" class="avatar-uploader11"
class="form_item" :action="baseUrl + '/oss/fileoss'"
> accept=".jpeg,.jpg,.gif,.png"
<el-switch :show-file-list="false"
v-model="addForm.isLast" :before-upload="
active-color="#13ce66" res => {
:active-value="1" return beforeImgUpload(res, 'f2');
:inactive-value="0" }
active-text="是" "
inactive-text="否" :on-success="contentUploadSuccess"
@change="handleChangeIsLast" >
> </el-upload>
</el-switch> <quill-editor
</el-form-item> v-model="addForm.content"
ref="myQuillEditor"
</el-form> :options="editorOption"
</div> @blur="onEditorBlur($event)"
<div @focus="onEditorFocus($event)"
style=" border: 1px dashed #bababa;" @ready="onEditorReady($event)"
v-if="currentNode && currentNode.data.isLast == 1" class="shangpin_editor ql-container"
></div> >
</div> </quill-editor>
<div </el-form-item>
class="border_box tree_content_box" </div>
v-if="currentNode && currentNode.data.isLast == 1" </el-form>
> </div>
<div class="title_box" style="margin-bottom: 10px; height: 40px"> <!-- <div
<div class="title"> style=" border: 1px dashed #bababa;"
<span class="line"></span>已关联课程列表 v-if="currentNode && currentNode.data.isLast == 1"
></div> -->
</div>
<div class="submitButton submitButtonBox">
<el-button <el-button
plain
type="primary" type="primary"
style="margin-left: 20px" @click="dataFormSubmit('addForm')"
@click="openTable('addForm')" size="small"
size="mini" >确定</el-button
>新增</el-button
> >
<!-- <div style="" class="button_box"> -->
<!-- <el-button plain type="danger" @click="handleCheckAllChange(true)" size="mini">清空</el-button> -->
<!-- </div> --> <!-- </div> -->
</div> </div>
</div> <!-- <div
<!-- :isNoSearch="true" --> class="submitButton submitButtonBox"
<commonShop style="position: absolute;bottom: 13px;right: 15px;"
:isNoSearch="true" v-if="!isEdit"
:otherInfo="{ >
httpType: 'raw',
httpDataValueName: 'courseList' <el-button
}" type="primary"
:defaultForm="{ @click="dataFormSubmit('addForm')"
id: addForm.id size="small"
}" >确定</el-button
axiosType="raw" >
getAssociatedGoodsListKey="id"
:isNoPaging="true" </div> -->
getAssociatedGoodsListValue="result" </el-tab-pane>
:tableColumnList="tableColumnList" <el-tab-pane
:currentId="addForm.id ? addForm.id : ''" label="已关联课程列表"
currentType="bookMarketId" v-if="currentNode && currentNode.data.isLast == 1"
:dataList="associatedGoodsList"
:urlList="urlList"
@delete="dataFormDelete"
:isEdit="isEdit"
ref="commonShop"
:style="`height: calc(100% - 50px); `"
> >
<template slot="searchFormItem" slot-scope="slotProps"> <div
<!-- <el-form-item class="border_box tree_content_box"
v-if="currentNode && currentNode.data.isLast == 1"
>
<div class="title_box" style="margin-bottom: 10px; height: 40px">
<div class="title">
<span class="line"></span>已关联课程列表
<el-button
plain
type="primary"
style="margin-left: 20px"
@click="openTable('addForm')"
size="mini"
>新增</el-button
>
<!-- <div style="" class="button_box"> -->
<!-- <el-button plain type="danger" @click="handleCheckAllChange(true)" size="mini">清空</el-button> -->
<!-- </div> -->
</div>
</div>
<!-- :isNoSearch="true" -->
<commonShop
:isNoSearch="true"
:otherInfo="{
httpType: 'raw',
httpDataValueName: 'courseList'
}"
:defaultForm="{
id: addForm.id
}"
axiosType="raw"
getAssociatedGoodsListKey="id"
:isNoPaging="true"
getAssociatedGoodsListValue="result"
:tableColumnList="tableColumnList"
:currentId="addForm.id ? addForm.id : ''"
currentType="bookMarketId"
:dataList="associatedGoodsList"
:urlList="urlList"
@delete="dataFormDelete"
:isEdit="isEdit"
ref="commonShop"
:style="`height: calc(100vh - 310px); `"
>
<template slot="searchFormItem" slot-scope="slotProps">
<!-- <el-form-item
label="课程名称" label="课程名称"
prop="title" prop="title"
class="form_item" class="form_item"
@@ -160,7 +262,7 @@
> >
</el-input> </el-input>
</el-form-item> --> </el-form-item> -->
<!-- <el-form-item label="商品类型" prop="goodsType" class="form_item"> <!-- <el-form-item label="商品类型" prop="goodsType" class="form_item">
<el-select <el-select
size="small" size="small"
v-model="slotProps.dataForm.goodsType" v-model="slotProps.dataForm.goodsType"
@@ -178,100 +280,76 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> --> </el-form-item> -->
</template> </template>
<template slot="tableItem" slot-scope="slotProps"> <template slot="tableItem" slot-scope="slotProps">
<el-table-column label="课程ID" width="70" align="center" prop="id"> <el-table-column
<!-- <template slot-scope="scope"> label="课程ID"
width="70"
align="center"
prop="id"
>
<!-- <template slot-scope="scope">
{{ (pageIndex - 1) * pageSize + scope.$index + 1 }} {{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
</template> --> </template> -->
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="title" prop="title"
header-align="center" header-align="center"
align="center" align="center"
label="课程名称" label="课程名称"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
header-align="center" header-align="center"
align="center" align="center"
label="课程图" label="课程图"
width="140" width="140"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<img <img
v-if="scope.row.image != ''" v-if="scope.row.image != ''"
:src="scope.row.image" :src="scope.row.image"
width="25" width="25"
height="35" height="35"
class="tableImg" class="tableImg"
/> />
</template>
</el-table-column>
<el-table-column
prop="toSociologySort"
header-align="center"
align="center"
label="排序"
>
</el-table-column>
<el-table-column
header-align="center"
align="center"
label="课程等级"
>
<template slot-scope="scope">
<span v-if="scope.row.level == 0">不显示</span>
<span v-if="scope.row.level == 1">初级</span>
<span v-if="scope.row.level == 2">高级</span>
</template>
</el-table-column>
<el-table-column
header-align="center"
align="center"
label="课程属性"
>
<template slot-scope="scope">
<span v-if="scope.row.selective == 0">不显示</span>
<span v-if="scope.row.selective == 1">必修</span>
<span v-if="scope.row.selective == 2">选修</span>
</template>
</el-table-column>
</template> </template>
</el-table-column> </commonShop>
<el-table-column </div>
prop="toSociologySort" </el-tab-pane>
header-align="center" </el-tabs>
align="center"
label="排序"
>
</el-table-column>
<el-table-column
header-align="center"
align="center"
label="课程等级"
>
<template slot-scope="scope">
<span v-if="scope.row.level == 0">不显示</span>
<span v-if="scope.row.level == 1">初级</span>
<span v-if="scope.row.level == 2">高级</span>
</template>
</el-table-column>
<el-table-column
header-align="center"
align="center"
label="课程属性"
>
<template slot-scope="scope">
<span v-if="scope.row.selective == 0">不显示</span>
<span v-if="scope.row.selective == 1">必修</span>
<span v-if="scope.row.selective == 2">选修</span>
</template>
</el-table-column>
</template>
</commonShop>
<div class="submitButton submitButtonBox">
<!-- <el-button size="small" @click.stop="dataFormEdit()">
取消
</el-button> -->
<el-button
type="primary"
@click="dataFormSubmit('addForm')"
size="small"
>确定</el-button
>
<!-- </div> -->
</div>
</div>
<div
class="submitButton submitButtonBox"
style="position: absolute;bottom: 13px;right: 15px;"
v-if="!isEdit"
>
<!-- <el-button size="small" @click.stop="dataFormEdit()">
取消
</el-button> -->
<el-button
type="primary"
@click="dataFormSubmit('addForm')"
size="small"
>确定</el-button
>
<!-- </div> -->
</div>
</div> </div>
<!-- <el-form <!-- <el-form
@@ -362,12 +440,44 @@
</template> </template>
<script> <script>
import { quillEditor } from "vue-quill-editor";
import global from "../../common/common.vue"; //引入共用组间 import global from "../../common/common.vue"; //引入共用组间
import debounce from "lodash/debounce"; //导入lodash中的debounce import debounce from "lodash/debounce"; //导入lodash中的debounce
import AddOrUpdate from "@/views/components/commonBookTags/bookTagsForm.vue"; import AddOrUpdate from "@/views/components/commonBookTags/bookTagsForm.vue";
import commonShop from "@/views/components/commonBookTags/shopproduct.vue"; import commonShop from "@/views/components/commonBookTags/shopproduct.vue";
import commonShopTable from "@/views/components/commonBookTags/shopproductTable.vue"; import commonShopTable from "@/views/components/commonBookTags/shopproductTable.vue";
import commonTree from "@/views/components/commonBookTags/tags.vue"; import commonTree from "@/views/components/commonBookTags/tags.vue";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
const toolbarOptions = [
["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
["blockquote", "code-block"], //引用，代码块
[{ header: 1 }, { header: 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: [
"SimSun",
"SimHei",
"Microsoft-YaHei",
"KaiTi",
"FangSong",
"Arial"
]
}
], // 字体
[{ align: [] }], // 居中
["clean"], // 清除样式,
["link", "image"] // 上传图片、上传视频
];
// import dialogComponent from './seckillprodrelation' // import dialogComponent from './seckillprodrelation'
export default { export default {
data() { data() {
@@ -385,10 +495,10 @@ export default {
edit: "/master/courseMedical/editCourseMedical", edit: "/master/courseMedical/editCourseMedical",
hasBindProductList: "/master/courseMedical/getCourseListForMedical", hasBindProductList: "/master/courseMedical/getCourseListForMedical",
CanBindProductList: "/master/courseMedical/getCourseListCanMedical", CanBindProductList: "/master/courseMedical/getCourseListCanMedical",
editCourse:'/master/courseMedical/updateCourseToMedicalSort' editCourse: "/master/courseMedical/updateCourseToMedicalSort"
}, },
addForm: {}, addForm: {},
audioFileList: [],
isFresh: false, isFresh: false,
dataRule: { dataRule: {
name: [ name: [
@@ -399,7 +509,7 @@ export default {
} }
] ]
}, },
fimages:'', fimages: "",
currentNode: {}, currentNode: {},
treeDataList: [], treeDataList: [],
associatedGoodsList: [], //已关联商品列表 associatedGoodsList: [], //已关联商品列表
@@ -461,14 +571,39 @@ export default {
headerAlign: "center", headerAlign: "center",
slot: "productImages" slot: "productImages"
} }
] ],
// 富文本编辑器配置
editorOption: {
modules: {
history: {
delay: 1000,
maxStack: 50,
userOnly: false
},
toolbar: {
container: toolbarOptions,
handlers: {
image: function(value) {
// if (value) {
// 调用element的图片上传组件
document.querySelector(".avatar-uploader11 input").click();
// } else {
// this.quill.format("image", false);
// }
}
}
}
},
placeholder: "请输入简介说明"
}
}; };
}, },
components: { components: {
AddOrUpdate, AddOrUpdate,
commonShop, commonShop,
commonTree, commonTree,
commonShopTable commonShopTable,
quillEditor
}, },
watch: { watch: {
filterText(val) { filterText(val) {
@@ -480,6 +615,47 @@ export default {
this.getDataList(); this.getDataList();
}, },
methods: { methods: {
audioHandleRemove(file, fileList) {
console.log(file, fileList);
this.audioFileList = []
},
audioUploadSuccess(res, file) {
this.audioFileList.push(file)
console.log(this.audioFileList,res, "上传成功");
this.addForm.media = res.url
},
// 失去焦点事件
onEditorBlur(quill) {
// console.log('editor blur!', quill)
},
// 获得焦点事件
onEditorFocus(quill) {
//console.log('editor focus!', quill)
},
// 准备富文本编辑器
onEditorReady(quill) {
// console.log('editor ready!', quill)
},
contentUploadSuccess888(res, file) {
console.log(res);
},
contentUploadSuccess(res, file) {
// console.log(res)
let quill = this.$refs.myQuillEditor.quill;
// 如果上传成功
if (res) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片，res为服务器返回的图片链接地址
quill.insertEmbed(length, "image", res.url);
// 调整光标到最后
quill.setSelection(length + 1);
} else {
// 提示信息，需引入Message
this.$message.error("图片插入失败！");
}
},
UpNumber(e) { UpNumber(e) {
e.target.value = e.target.value.replace(/[^\d]/g, ""); e.target.value = e.target.value.replace(/[^\d]/g, "");
}, },
@@ -555,7 +731,7 @@ export default {
console.log("🚀 ~ getCommonShopDataList ~ type, id:", type, id); console.log("🚀 ~ getCommonShopDataList ~ type, id:", type, id);
this.currentNode = { data: { ...form } }; this.currentNode = { data: { ...form } };
this.addForm = form; this.addForm = form;
this.fimages = this.addForm.icon this.fimages = this.addForm.icon;
await this.getDataList(); await this.getDataList();
// this.$refs.commonTree.setCurrentNodeShow(); // this.$refs.commonTree.setCurrentNodeShow();
@@ -578,12 +754,16 @@ export default {
this.addForm.icon = ""; this.addForm.icon = "";
}, },
handlePicSuccess(res, file) { handlePicSuccess(res, file) {
// console.log(res,'res')
// if (res.msg == "success") {
this.fimages = res.url; this.fimages = res.url;
this.addForm.icon = res.url; this.addForm.icon = res.url;
this.$message.success("上传成功"); this.$message.success("上传成功");
console.log(this.fimages, this.addForm.icon, "上传"); // console.log(res, "上传");
},
handlePicSuccess11() {
console.log("上传音频---");
},
handlePicSuccess111() {
console.log("上传音频");
}, },
//新增修改 //新增修改
dataFormSubmit: debounce(async function(formName) { dataFormSubmit: debounce(async function(formName) {
@@ -608,12 +788,8 @@ export default {
if (data && data.code === 0) { if (data && data.code === 0) {
// var status = await this.correlationShop(data.result.id); // var status = await this.correlationShop(data.result.id);
await this.getDataList(); await this.getDataList();
this.$nextTick(async () => { this.$nextTick(async () => {
this.$refs.commonTree.setCurrentNodeShow(data.Medical.id); this.$refs.commonTree.setCurrentNodeShow(data.Medical.id);
this.fimages = data.market.icon
this.addForm = data.market;
this.currentNode = { data: { ...data.Medical } };
this.$message({ this.$message({
message: "操作成功", message: "操作成功",
type: "success", type: "success",
@@ -622,6 +798,12 @@ export default {
this.visible = false; this.visible = false;
} }
}); });
// this.$refs.commonShopTable.getAssociatedGoodsList();
if (data.Medical.icon && data.Medical.icon != "") {
this.fimages = data.Medical.icon;
}
this.addForm = data.Medical;
/// this.currentNode = { data: { ...data.Medical } };
}); });
} else { } else {
this.$message.error(data.msg); this.$message.error(data.msg);
@@ -1100,9 +1282,18 @@ export default {
box-sizing: border-box; box-sizing: border-box;
// background: #fafafa; // background: #fafafa;
} }
.flexBox {
display: flex;
}
.subBox {
border: 1px solid #d6d6d6;
border-radius: 10px;
overflow: hidden;
width: 49%;
padding: 10px;
}
.border_box { .border_box {
height: 100px; // height: 100px;
margin-bottom: 10px; margin-bottom: 10px;
.title_box { .title_box {
@@ -1139,7 +1330,7 @@ export default {
.border_box { .border_box {
width: 100%; width: 100%;
float: right; // float: right;
background: #fffefe; background: #fffefe;
border-radius: 10px; border-radius: 10px;
@@ -1172,6 +1363,10 @@ export default {
} }
} }
.dataType{
margin: 20px 0;
justify-content: center;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: #eaebed; background-color: #eaebed;
color: #4796ec; color: #4796ec;
@@ -1207,14 +1402,16 @@ p {
} }
.submitButtonBox { .submitButtonBox {
margin-top: 20px; // margin-top: 20px;
display: flex; // display: flex;
align-items: center; // align-items: center;
justify-content: space-between; // justify-content: space-between;
} }
.submitButton { .submitButton {
float: right; // float: right;
text-align: center;
margin: 15px auto;
} }
// .el-tree-node__content .el-button { // .el-tree-node__content .el-button {
@@ -1236,7 +1433,7 @@ p {
overflow: hidden; overflow: hidden;
.form_item { .form_item {
width: 25%; width: 33%;
float: left; float: left;
} }
} }
@@ -1266,4 +1463,9 @@ p {
.shopFormBox { .shopFormBox {
min-width: auto !important; min-width: auto !important;
} }
.ql-container {
height: 300px; overflow-y: scroll;
}
/deep/ .quill-editor{min-height: 200px !important;}
</style> </style>