代码推送
This commit is contained in:
227
yq/src/views/publishObservations/index.js
Normal file
227
yq/src/views/publishObservations/index.js
Normal file
@@ -0,0 +1,227 @@
|
||||
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
|
||||
import WangEditor from 'wangeditor';
|
||||
import { DomEditor } from '@wangeditor/editor'
|
||||
import { toolbarConfig } from '@wangeditor/editor'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: "weekly",
|
||||
editor: null,
|
||||
html: '',
|
||||
toolbarConfig: {},
|
||||
editorConfig: { placeholder: '请输入内容...', fullscreen: false, },
|
||||
mode: 'default', // or 'simple'
|
||||
from: [
|
||||
{
|
||||
title: "测试消息标题1",
|
||||
classification: "测试分类1",
|
||||
date: "2023-12-23",
|
||||
Creator: "admin",
|
||||
releaseTime: "2023-12-29",
|
||||
},
|
||||
{
|
||||
title: "测试消息标题2",
|
||||
classification: "测试分类3",
|
||||
date: "2023-12-26",
|
||||
Creator: "admin",
|
||||
releaseTime: "2023-12-28",
|
||||
},
|
||||
|
||||
|
||||
],
|
||||
dialogVisible: false,
|
||||
previewHtml: "",
|
||||
currentPage1: 1,
|
||||
pageSizes: [1, 100, 200],
|
||||
totalLimit1: 2,
|
||||
reportList: {
|
||||
type: "",
|
||||
people: "",
|
||||
time: "",
|
||||
title: "",
|
||||
content: "",
|
||||
|
||||
},
|
||||
ruleForm: {
|
||||
//...省略其他
|
||||
articleBody: '',
|
||||
},
|
||||
//上传后的文件列表
|
||||
fileList: [],
|
||||
// 允许的文件类型
|
||||
fileType: ["PDF",],
|
||||
// 运行上传文件大小，单位 M
|
||||
fileSize: 20,
|
||||
// 附件数量限制
|
||||
fileLimit: 3,
|
||||
//请求头
|
||||
headers: { "Content-Type": "multipart/form-data" },
|
||||
FormDatas: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 模拟 ajax 请求，异步渲染编辑器
|
||||
// setTimeout(() => {
|
||||
// this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
|
||||
// }, 1500)
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
onCreated(editor) {
|
||||
|
||||
this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
|
||||
this.toolbarConfig.excludeKeys = [
|
||||
'fullScreen',// 排除菜单组，写菜单组 key 的值即可
|
||||
'group-video',
|
||||
`insertTable`
|
||||
]
|
||||
},
|
||||
onChange(editor) {
|
||||
// 点击一下富文本编辑页窗口就会执行
|
||||
const toolbar = DomEditor.getToolbar(editor)
|
||||
console.log("工具栏配置", toolbar.getConfig().toolbarKeys); // 工具栏配置
|
||||
|
||||
},
|
||||
//预览
|
||||
preview() {
|
||||
|
||||
this.previewHtml = this.html
|
||||
this.dialogVisible = true
|
||||
|
||||
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`);
|
||||
this.params.limit = val
|
||||
this.params.page = 1
|
||||
|
||||
this.currentPage1 = 1,
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
this.currentPage = 1
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`);
|
||||
this.params.page = val
|
||||
|
||||
|
||||
|
||||
},
|
||||
//超出文件个数的回调
|
||||
handleExceed() {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: this.$t(`user.notSupported4`)
|
||||
}); return
|
||||
},
|
||||
//上传文件的事件
|
||||
uploadFile(item) {
|
||||
this.fileItem = item
|
||||
|
||||
this.fileList.push(item.file);
|
||||
this.fileName.push(item.file.name)
|
||||
|
||||
},
|
||||
//上传成功后的回调
|
||||
handleSuccess() {
|
||||
|
||||
},
|
||||
handelChange(file, fileList) { //控制显示上传显示列表
|
||||
// 校验文件类型和大小
|
||||
const fileType = file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase();
|
||||
const isTypeValid = this.fileType.includes(fileType);
|
||||
const isSizeValid = file.size / 1024 / 1024 <= this.fileSize;
|
||||
if (!isTypeValid) {//不支持的文件类型
|
||||
this.$message.error(`${this.$t(`user.notSupported`)} ${fileType}`);
|
||||
this.fileList = this.fileList.filter(item => item.name != file.name);
|
||||
return false;
|
||||
}
|
||||
if (!isSizeValid) {//文件大小不能超过
|
||||
this.fileList = this.fileList.filter(item => item.name != file.name);
|
||||
this.$message.error(`${this.$t(`user.notSupported2`)} ${this.fileSize} MB.`);
|
||||
return false;
|
||||
}
|
||||
let flag = this.fileList.some(item => item.name == file.name)
|
||||
|
||||
if (flag) {
|
||||
this.$message.warning(this.$t(`user.notSupported3`));
|
||||
this.$refs.upload.handleRemove(file)
|
||||
|
||||
return false
|
||||
}
|
||||
this.fileName.push(file.name)
|
||||
this.fileList.push(file.raw)
|
||||
|
||||
},
|
||||
|
||||
//上传了的文件给移除的事件，
|
||||
handleRemove(file, fileList) {
|
||||
|
||||
let nameIndex = this.fileName.indexOf(file.name); // 获取第一个重复元素的索引
|
||||
if (nameIndex !== -1) {
|
||||
this.fileName.splice(nameIndex, 1); // 删除第一个重复元素
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
let index = this.fileList.indexOf(file); // 获取第一个重复元素的索引
|
||||
|
||||
if (index !== -1) {
|
||||
this.fileList.splice(index, 1); // 删除第一个重复元素
|
||||
}
|
||||
|
||||
|
||||
|
||||
},
|
||||
//上传文件之前
|
||||
beforeUpload(file) {
|
||||
// 校验文件类型和大小
|
||||
const fileType = file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase();
|
||||
const isTypeValid = this.fileType.includes(fileType);
|
||||
const isSizeValid = file.size / 1024 / 1024 <= this.fileSize;
|
||||
if (!isTypeValid) {//不支持的文件类型
|
||||
this.$message.error(`${this.$t(`user.notSupported`)}：${fileType}`);
|
||||
return false;
|
||||
}
|
||||
if (!isSizeValid) {//文件大小不能超过
|
||||
this.$message.error(`${this.$t(`user.notSupported2`)}${this.fileSize} MB.`);
|
||||
return false;
|
||||
}
|
||||
|
||||
// if (file.type != "" && file.type != null && file.type != undefined) {
|
||||
// //截取文件的后缀，判断文件类型
|
||||
// const FileExt = file.name.replace(/.+\./, "").toLowerCase();
|
||||
// //计算文件的大小
|
||||
// const isLt2M = file.size / 1024 / 1024 < 20; //这里做文件大小限制
|
||||
// //如果大于50M
|
||||
// if (!isLt2M) {
|
||||
// this.$message.error('上传文件大小不能超过 20MB!');
|
||||
// return false;
|
||||
// }
|
||||
// //如果文件类型不在允许上传的范围内
|
||||
// if (this.fileType.includes(FileExt)) {
|
||||
// return true;
|
||||
// }
|
||||
// else {
|
||||
// this.$message.error("上传文件格式不正确!");
|
||||
// return false;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
const editor = this.editor
|
||||
if (editor == null) return
|
||||
editor.destroy() // 组件销毁时，及时销毁编辑器
|
||||
}
|
||||
}
|
||||
184
yq/src/views/publishObservations/index.vue
Normal file
184
yq/src/views/publishObservations/index.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div class="Alarm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div style="display: flex; align-items: center">
|
||||
<h2>{{ $t(`login.publishObservations`) }}</h2>
|
||||
<!-- <i class="i ishuaxin1 Refresh"></i> -->
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 标签页 -->
|
||||
<el-tabs v-model="activeName">
|
||||
<!-- 编写周报 -->
|
||||
|
||||
|
||||
<el-tab-pane label="编写周报" name="weekly">
|
||||
<div class="subscribeRelease">
|
||||
<el-row>
|
||||
<el-form class="registeredForm" :model="reportList">
|
||||
<!-- 报告类型 -->
|
||||
<el-form-item>
|
||||
<div style="width: 100%">报告类型:</div>
|
||||
<el-input
|
||||
v-model="reportList.type"
|
||||
size="small"
|
||||
autocomplete="off"
|
||||
style="width: 14.5%"
|
||||
:placeholder="$t(`login.placeholderTitle`)"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!--报告标题-->
|
||||
<el-form-item>
|
||||
<div style="width: 100%">报告标题:</div>
|
||||
<el-input
|
||||
v-model="reportList.title"
|
||||
size="small"
|
||||
autocomplete="off"
|
||||
style="width: 30%"
|
||||
:placeholder="$t(`login.placeholderTitle`)"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<!-- 报告内容上传-->
|
||||
<el-form-item>
|
||||
<div style="width: 100%">报告内容PDF上传:</div>
|
||||
<!-- :autosize="{ minRows: 10, maxRows: 10}" -->
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
ref="upload"
|
||||
drag
|
||||
action
|
||||
multiple
|
||||
:limit="fileLimit"
|
||||
:on-exceed="handleExceed"
|
||||
:on-remove="handleRemove"
|
||||
:before-upload="beforeUpload"
|
||||
:file-list="fileList"
|
||||
:on-change="handelChange"
|
||||
show-file-list
|
||||
:auto-upload="false"
|
||||
>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">
|
||||
将文件拖到此处，或<em> 点击上传</em>
|
||||
</div>
|
||||
</el-upload>
|
||||
|
||||
|
||||
<!-- <el-input
|
||||
type="textarea"
|
||||
style="width: 60%"
|
||||
resize="none"
|
||||
v-model="reportList.content"
|
||||
:autosize="{ minRows: 10, maxRows: 10}"
|
||||
></el-input> -->
|
||||
</el-form-item>
|
||||
|
||||
<el-button type="warning" style="width: 200px">提交</el-button>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<!-- 编写月报 -->
|
||||
<el-tab-pane label="编写月报" name="monthlyReport"> </el-tab-pane>
|
||||
<!-- 编写重大消息 -->
|
||||
<el-tab-pane label="编写重大消息" name="majorNews">
|
||||
<div style="border: 1px solid #ccc">
|
||||
<Toolbar
|
||||
style="border-bottom: 1px solid #ccc"
|
||||
:editor="editor"
|
||||
:defaultConfig="toolbarConfig"
|
||||
:mode="mode"
|
||||
/>
|
||||
<Editor
|
||||
style="height: 500px; overflow-y: hidden"
|
||||
v-model="html"
|
||||
:defaultConfig="editorConfig"
|
||||
:mode="mode"
|
||||
@onCreated="onCreated"
|
||||
@onChange="onChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- <div ref="editor"></div> -->
|
||||
|
||||
<el-button style="margin-top: 20px" type="warning">发布</el-button>
|
||||
<el-button @click="preview" style="margin-top: 20px" type="warning"
|
||||
>预览</el-button
|
||||
>
|
||||
</el-tab-pane>
|
||||
<!-- 编写活动通知 -->
|
||||
<el-tab-pane label="编写活动通知" name="writingActivities"> </el-tab-pane>
|
||||
<!-- 查看历史记录 -->
|
||||
<el-tab-pane label="查看历史记录" name="viewHistory">
|
||||
<el-table
|
||||
class="table"
|
||||
:header-cell-style="{ 'text-align': 'center' }"
|
||||
:cell-style="{ 'text-align': 'center' }"
|
||||
:data="from"
|
||||
style="width: 100%"
|
||||
max-height="500"
|
||||
:default-sort="{ prop: 'date', order: 'descending' }"
|
||||
>
|
||||
<el-table-column prop="title" label="消息标题" width="700px">
|
||||
</el-table-column>
|
||||
<el-table-column prop="classification" label="所属分类">
|
||||
</el-table-column>
|
||||
<el-table-column prop="date" sortable label="创建时间">
|
||||
</el-table-column>
|
||||
<el-table-column prop="Creator" sortable label="创建人">
|
||||
</el-table-column>
|
||||
<el-table-column prop="releaseTime" sortable label="发布时间">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<el-row type="flex" justify="center" style="margin-top: 15px">
|
||||
<el-col :span="10">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page.sync="currentPage1"
|
||||
:page-sizes="pageSizes"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="totalLimit1"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<!-- 预览弹窗 -->
|
||||
<el-dialog title="预览效果" :visible.sync="dialogVisible" width="30%">
|
||||
<div v-html="previewHtml"></div>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="warning" @click="dialogVisible = false"
|
||||
>确认发布</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<style src="@wangeditor/editor/dist/css/style.css"></style>
|
||||
<script>
|
||||
import Vue from "vue";
|
||||
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
|
||||
import IndexJs from "./index";
|
||||
import"@wangeditor/editor/dist/css/style.css";
|
||||
export default {
|
||||
components: { Editor, Toolbar },
|
||||
|
||||
mixins: [IndexJs],
|
||||
};
|
||||
</script>
|
||||
<style src="@wangeditor/editor/dist/css/style.css"></style>
|
||||
<style lang="scss" scoped>
|
||||
.Alarm {
|
||||
padding: 50px 100px;
|
||||
}
|
||||
</style>
|
||||
<style >
|
||||
</style>
|
||||
Reference in New Issue
Block a user