安装npm vue-quill-editor
npm install vue-quill-editor --save引入main.js文件里
// 字典标签组件
import quillEditors from "./components/quillEditor/index";// 注册全局容器
Vue.component("quillEditors", quillEditors); //富文本框文件目录预览
openai的chatgpt描述
一个表单项，其中包含了一个富文本编辑器组件 quillEditors 和一个判断数据是否请求完毕的 flag。当 flag 为 true 时，渲染富文本编辑器组件，同时可以进行编辑操作；当 flag 为 false 时，渲染已有的内容并且不能进行编辑操作。同时，使用了 Vue 的条件渲染指令 v-if 控制视图的显示与隐藏。
form表单的新增编辑其中一个字段用到了富文本编辑器
注意编辑的时候要用v-if一个变量判断是否请求到数据，否则quillEditors编辑的时候框里面是空的
<-- views:查看新增编辑 flag获取到编辑的内容 -->
flag: false,//数据是否请求完毕
init(id,views) {
this.flag = false;//默认设置为false 不显示quillEditors
console.log('views', id, views);
if (views == 1) {
this.views = true;
this.canSubmit = false;
} else {
this.views = false;
this.canSubmit = true;
}
this.dataForm.mailTemplateId = id || '';
this.dataForm.content = "";
this.dataForm.name = "";
this.visible = true;
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.mailTemplateId) {
getObj(this.dataForm.mailTemplateId).then((response) => {
this.dataForm = response.data.data;
this.flag = true;//接口请求成功设置为true 显示quillEditors
})
} else {
this.flag = true;接口没有请求也设置为true 显示quillEditors
}
})
},
<el-form-item label="模板内容" prop="content">
<!--新增编辑-->
<div v-if="!views">
<quillEditors class="ql-editor" v-if="flag" :disabled="views" :content="dataForm.content"
@changeContent="changeContent"/>
</div>
<!--查看-->
<div v-html="dataForm.content" v-if="views && dataForm.mailTemplateId"></div>
</el-form-item>全部代码
list列表页
<template>
<div class="mod-config ml10">
<!--搜索-->
<div class="search searchHead" v-show="showSearch">
<el-form ref="searchForm" :model="searchForm" :inline="true" size="mini">
<el-form-item label="申请时间" prop="timeArray">
<el-date-picker style="width: 360px" type="daterange" range-separator="至" v-model.trim="timeArray"
value-format="yyyy-MM-dd hh:mm:ss" start-placeholder="申请开始时间" end-placeholder="申请结束时间" size="small"
@change="timeArrayChange"></el-date-picker>
</el-form-item>
<el-form-item label="是否启用" prop="enableStatus">
<el-select
v-model="searchForm.enableStatus"
clearable
placeholder="请选择是否启用"
size="small"
>
<el-option label="关闭" :value="0"></el-option>
<el-option label="开启" :value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-search" type="primary" size="small" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-delete" size="small" @click="resetQuery">清空</el-button>
</el-form-item>
</el-form>
</div>
<div class="tableContent">
<!--搜索刷新-->
<toolbar @refreshTable="getDataList" :showSearch.sync="showSearch">
<el-button slot="add" type="primary" icon="el-icon-plus" size="small" @click="addOrUpdateHandle()">新增模板</el-button>
</toolbar>
<div class="avue-crud">
<el-table
:data="dataList"
border
:default-sort = "{prop: 'createTime', order: 'descending'}"
v-loading="dataListLoading">
<el-table-column label="序号" align="left" min-width="50px" width="50">
<template slot-scope="scope">
{{ helper.generateIndex(scope.$index, searchForm) }}
</template>
</el-table-column>
<el-table-column
prop="name"
header-align="left"
align="left"
label="模板名称">
</el-table-column>
<el-table-column
align="center"
label="是否启用"
prop="enableStatus"
width="150"
>
<template slot-scope="{ row }">
<el-switch
v-if="permissions.service_mailtemplate_edit"
class="eval-switch"
v-model="row.enableStatus"
:active-value="1"
:inactive-value="0"
disabled
@click.native="switchChange(row)"
>
</el-switch>
<template v-else>
<el-tooltip effect="dark" content="无此权限" placement="top">
<el-switch
v-model="row.enableStatus"
:active-value="1"
:inactive-value="0"
disabled
>
</el-switch>
</el-tooltip>
</template>
</template>
</el-table-column>
<el-table-column
prop="createTime"
header-align="left"
align="left"
label="创建时间"
width="300"
>
</el-table-column>
<el-table-column
header-align="center"
align="center"
label="操作">
<template slot-scope="scope">
<el-button v-if="permissions.service_mailtemplate_view&&scope.row.enableStatus===1" type="text" size="small" icon="el-icon-view"
@click="addOrUpdateHandle(scope.row.mailTemplateId,1)">查看
</el-button>
<el-button v-if="permissions.service_mailtemplate_edit&&scope.row.enableStatus==0" type="text" size="small" icon="el-icon-edit"
@click="addOrUpdateHandle(scope.row.mailTemplateId)">编辑
</el-button>
<el-button v-if="permissions.service_mailtemplate_del&&scope.row.enableStatus==0" type="text" size="small" icon="el-icon-delete"
@click="deleteHandle(scope.row.mailTemplateId,scope.row.name)">删除
</el-button>
</template>
</el-table-column>
<template v-slot:empty>
<el-image
src="https://cdn.hnjngl.hnrrcz.com/common/noData.png"
style="margin-top: 70px; width: 255px"
fit="fill"
></el-image>
<div
class="noData"
style="
position: relative;
margin: -70px auto -5px;
font-size: 14px;
color: #999;
"
>
你还没有邮件模板信息，请点击去新增
</div>
<el-button
type="primary"
size="medium"
style="min-width: 129px; margin-bottom: 50px"
@click="addOrUpdateHandle()"
>去新增</el-button
>
</template>
</el-table>
</div>
<div class="avue-crud__pagination">
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
:current-page="searchForm.current" :page-sizes="[10,20,50,100]"
:page-size="searchForm.size" :total="totalPage" background
layout="total,sizes,prev,pager,next,jumper"></el-pagination>
</div>
<!-- 弹窗, 新增 / 修改 -->
<table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
</div>
</div>
</template>
<script>
import {fetchList,delObj,putObj,} from '@/api/service/mailTemplate'
import TableForm from './mailTemplate-form'
import Toolbar from "@/components/Toolbar"
import {mapGetters} from 'vuex'
import {getDicDataSource} from "@/util/common";
import {getStore} from "@/util/store";
export default {
data() {
return {
searchForm: {
current: 1,
size: 10,
enableStatus: '',
},
timeArray: [],
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
showSearch: true,
dataListLoading: false,
addOrUpdateVisible: false,
load: false,
userInfo: {},
}
},
components: {
TableForm,
Toolbar
},
created() {
this.userInfo = getStore({name: 'userInfo'});
console.log("this.userInfo:",this.userInfo);
this.getDataList()
},
computed: {
...mapGetters(['permissions'])
},
methods: {
//时间搜索
timeArrayChange(val) {
if (val) {
val[0] = val[0].substr(0, 10) + " 00:00:00";
val[1] = val[1].substr(0, 10) + " 23:59:59";
}
},
// 获取数据列表
getDataList() {
this.dataListLoading = true
this.load = false;
let data = {
timeArray: this.timeArray,
...this.searchForm
}
fetchList(data).then(response => {
this.dataList = response.data.data.records
this.totalPage = response.data.data.total
this.load = true;
})
this.dataListLoading = false
console.log("list");
},
//每页数
sizeChangeHandle(val) {
this.searchForm.size = val;
this.searchForm.current = 1;
this.load = false;//重新加载
this.getDataList();
},
//当前页
currentChangeHandle(val) {
console.log("page");
this.searchForm.current = val;
this.load = false;//重新加载
this.getDataList();
},
// 新增 / 修改
addOrUpdateHandle(id,views) {
this.addOrUpdateVisible = true
console.log(id, views);
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id,views);
})
},
// 删除
deleteHandle(id, name) {
let that = this
this.$confirm('是否确认删除：' + name, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function () {
delObj(id).then(res => {
if (res.data.data){
that.$message.success('删除成功')
that.getDataList()
}else {
that.$message.error('删除失败，当前文件有模板选用')
that.getDataList()
}
})
}).then(data => {
})
},
handleQuery() {
this.searchForm.current = 1;
this.load = false;//重新加载
this.getDataList();
},
resetQuery() {
this.searchForm.enableStatus = "";
this.timeArray = [];
this.searchForm.name = '';
this.$refs['searchForm'].resetFields();
this.handleQuery();
},
// 消息通知开关
switchChange(row) {
this.$confirm(
`是否确认${row.enableStatus == 1 ? " 关闭 " : " 打开 "}该邮件模板（${
row.name
}）的启用功能`,
"提示",
).then((res) => {
this.dataListLoading = true;
const result = row.enableStatus == 1 ? 0 : 1;
putObj({
mailTemplateId: row.mailTemplateId,
enableStatus: result,
})
.then((res) => {
this.dataListLoading = false;
if (res.data.code === 0) {
this.$message.success(`${result === 1 ? "打开" : "关闭"}成功`);
// 根据接口调用成功修改switch状态
row.enableStatus = result;
this.getDataList();
}
})
.catch(() => {
this.dataListLoading = false;
this.$message.error(`${result === 1 ? "打开" : "关闭"}失败`);
});
});
},
}
}
</script>
<style scoped lang="scss">
/deep/.cell {
max-height: 110px;
overflow-y: hidden;
}
/*查看截图水平居中*/
/*
/deep/.drag-inner {
top: 50%!important;
left: 50%;
transform: translate(-50%,-50%);
}
*/
/deep/.el-icon-zoom-in {
margin-right: 0!important;
}
.div-mask-one {
position: absolute;
bottom: 0px;
left: 0px;
width: 100px;
cursor: pointer;
height: 100px;
background-color: rgba(0, 0, 0, 0.37);
/* 垂直居中展示 注意点 如果使用绝对居中，其内容内容要用一个div包起来 */
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 16px;
color: #ffffff;
transition: height 300ms;
top: 1px;
}
.mask-one-p {
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
/deep/.eval-switch.el-switch.is-disabled {
opacity: 1;
.el-switch__core {
cursor: pointer;
}
}
</style>表单页
<template>
<el-dialog
:title="!dataForm.mailTemplateId ? '新增邮件模板' : views && dataForm.mailTemplateId ? '查看邮件模板' : '修改邮件模板'"
:close-on-click-modal="false"
:visible.sync="visible"
v-if="visible"
>
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
label-width="95px"
label-position="left"
>
<el-form-item label="模板名称" prop="name">
<cl-input v-model="dataForm.name" placeholder="请输入模板名称" :disabled="views"></cl-input>
</el-form-item>
<el-form-item label="模板内容" prop="content">
<!--新增编辑-->
<div v-if="!views">
<quillEditors class="ql-editor" v-if="flag" :disabled="views" :content="dataForm.content"
@changeContent="changeContent"
/>
</div>
<!--查看-->
<div v-html="dataForm.content" v-if="views && dataForm.mailTemplateId"></div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit"
>确认{{ !dataForm.mailTemplateId ? '新增邮件模板' : '修改邮件模板'}}</el-button
>
</span>
</el-dialog>
</template>
<script>
import { getObj, addObj, putObj } from "@/api/service/mailTemplate";
import { getDicDataSource } from "@/util/common";
export default {
data() {
return {
visible: false,
canSubmit: false,
views: false,
dataForm: {
name: "",
content: "",
},
dataRule: {
name: [{ required: true, message: "模板名称不能为空", trigger: "blur" }],
content: [{ required: true, message: "模板内容不能为空", trigger: "blur" }],
},
load:false,
flag: false,//数据是否请求完毕
};
},
created() {
},
components: { },
methods: {
init(id,views) {
this.flag = false;
console.log('views', id, views);
if (views == 1) {
this.views = true;
this.canSubmit = false;
} else {
this.views = false;
this.canSubmit = true;
}
this.dataForm.mailTemplateId = id || '';
this.dataForm.content = "";
this.dataForm.name = "";
this.visible = true;
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.mailTemplateId) {
getObj(this.dataForm.mailTemplateId).then((response) => {
this.dataForm = response.data.data;
this.flag = true;
})
} else {
this.flag = true;
}
})
},
changeContent(val) {
this.dataForm.content = val;
},
// 表单提交
dataFormSubmit() {
console.log(this.dataForm);
this.$refs["dataForm"].validate((valid) => {
if (valid) {
this.canSubmit = false;
if (this.dataForm.mailTemplateId) {
putObj(this.dataForm)
.then((data) => {
this.$message({
message: "修改成功",
type: "success",
});
this.visible = false;
this.$emit("refreshDataList");
})
.catch(() => {
this.canSubmit = true;
});
} else {
addObj(this.dataForm)
.then((data) => {
this.$message({
message: "添加成功",
type: "success",
});
this.visible = false;
this.$emit("refreshDataList");
})
.catch(() => {
this.canSubmit = true;
});
}
}
});
},
},
};
</script>
<style scoped lang="scss">
/deep/ #uploadContent {
width: 440px;
}
</style>