From b7143b51f3a50b6fac9c139d291c1fad017daee6 Mon Sep 17 00:00:00 2001
From: zhouwenxuan <1175765986@qq.com>
Date: 星期五, 08 十二月 2023 15:50:50 +0800
Subject: [PATCH] 使用tinymce富文本
---
src/views/safetyReview/law/components/lawDialog.vue | 47 ++++++++++++++++++++++++++++++++++++-----------
1 files changed, 36 insertions(+), 11 deletions(-)
diff --git a/src/views/safetyReview/law/components/lawDialog.vue b/src/views/safetyReview/law/components/lawDialog.vue
index 45e3868..dcc4a2e 100644
--- a/src/views/safetyReview/law/components/lawDialog.vue
+++ b/src/views/safetyReview/law/components/lawDialog.vue
@@ -32,20 +32,21 @@
<el-date-picker
v-if="!isReview"
v-model="state.form.pubDate"
- type="datetime"
- value-format="YYYY-MM-DD hh:mm:ss"
+ type="date"
+ value-format="YYYY-MM-DD"
placeholder="请选择日期"
size="default"
/>
<span v-else>{{state.form.pubDate}}</span>
</el-form-item>
- <el-form-item label="内容:" v-if="showEditor" prop="content">
- <we-editor ref="myEditor" :propData="state.form.content" @childFn="getEditorData" />
+ <el-form-item label="内容:" v-if="showEditor" required>
+<!-- <we-editor ref="myEditor" :propData="state.form.content" @childFn="getEditorData" />-->
+ <t-editor style="width: 800px" ref="myEditor" :value="state.form.content" ></t-editor>
</el-form-item>
<el-form-item label="内容:" v-else>
<div class="ql-container ql-snow" style="height: 500px;width: 100%;margin-top: 10px;" >
<div class="ql-editor">
- <div v-html="state.form.content" @click="showFile($event)"></div>
+ <div v-html="state.form.content" class="reviewTable" @click="showFile($event)"></div>
</div>
</div>
</el-form-item>
@@ -53,7 +54,7 @@
<template #footer v-if="!isReview">
<span class="dialog-footer">
<el-button @click="handleClose" size="default">取 消</el-button>
- <el-button type="primary" @click="onSubmit" size="default">确认发布</el-button>
+ <el-button type="primary" @click="onSubmit" size="default" v-preReClick>确认发布</el-button>
</span>
</template>
</el-dialog>
@@ -62,6 +63,7 @@
<script setup>
import {reactive, ref, toRefs} from 'vue'
import weEditor from "@/components/WeEditor/index.vue";
+import TEditor from "@/components/Tinymce/Tinymce.vue"
import {ElMessage} from "element-plus";
import {addLaw, editLaw, getLawDetail} from "@/api/backManage/law";
import axios from "axios";
@@ -89,7 +91,7 @@
formRules:{
title: [{ required: true, message: '请填写标题', trigger: 'blur' }],
pubAgency: [{ required: true, message: '请填写颁布机构', trigger: 'blur' }],
- content: [{ required: true, message: '请输入内容', trigger: 'change' }],
+ // content: [{ required: true, message: '11', trigger: 'blur' }],
pubDate:[{ required: true, message: '请选择颁布日期', trigger: 'blur' }],
},
@@ -109,6 +111,7 @@
if(type === 'edit') {
law.value = res.data.lawType === '法律' ? 1 : res.data.lawType === '法规' ? 2 :res.data.lawType === '地方性规定'? 3 : 4
}
+ state.form.pubDate = res.data.pubDate.substring(0,10)
}else{
ElMessage.warning(res.message)
}
@@ -162,20 +165,27 @@
} else {
this.$message.error('获取文件失败')
}
- this.handleClose();
+ // this.handleClose();
})
}
}
const onSubmit = async () => {
- myEditor.value.submit();
+ state.form.content = tinyMCE.activeEditor.getContent();
const valid = await lawRef.value.validate();
if(valid){
+ if(state.form.content == "") {
+ ElMessage({
+ type: 'warning',
+ message: '请输入内容'
+ });
+ return;
+ }
if(title.value === '新增'){
const param = {
content: state.form.content,
lawType: state.form.lawType,
pubAgency: state.form.pubAgency,
- pubDate: state.form.pubDate,
+ pubDate: state.form.pubDate.concat(" 00:00:00"),
subTitle: state.form.subTitle,
title: state.form.title
}
@@ -194,6 +204,7 @@
lawRef.value.clearValidate();
dialogVisible.value = false;
}else if(title.value === '编辑') {
+ state.form.pubDate = state.form.pubDate.concat(" 00:00:00")
const res = await editLaw(state.form)
if(res.code === 200){
ElMessage({
@@ -214,7 +225,7 @@
}
const handleClose = () => {
- if(title ==="新增"|| title ==='编辑'){
+ if(title.value ==="新增"|| title.value ==='编辑'){
myEditor.value.clear();
showEditor.value=false
@@ -251,4 +262,18 @@
align-items: flex-start;
}
}
+.reviewTable {
+ :deep(table){
+ border: 1px solid #ccc;
+ text-align: center;
+ }
+ :deep(table td){
+ border: 1px solid #ccc;
+ text-align: center;
+ padding: 0 5px;
+ }
+ :deep(table th){
+ border: 1px solid #ccc;
+ }
+}
</style>
--
Gitblit v1.9.2