|
|
@@ -1,35 +1,34 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div class="background">
|
|
|
- <div class="content">
|
|
|
- <el-form
|
|
|
- ref="form"
|
|
|
- :model="form"
|
|
|
- :rules="rules"
|
|
|
- label-width="90px"
|
|
|
- id="selectForm"
|
|
|
- >
|
|
|
- <el-form-item label="公告名称:" size="mini" prop="title">
|
|
|
- <el-input
|
|
|
- v-model="form.name"
|
|
|
- placeholder="请输入公告名称"
|
|
|
- style="width: 510px"
|
|
|
- ></el-input>
|
|
|
+ <div class="notice-add">
|
|
|
+ <div class="notice-add-box">
|
|
|
+ <el-form ref="form" :model="notice" :rules="rules" label-width="90px" id="selectForm">
|
|
|
+ <el-form-item label="公告名称:" size="mini" prop="noticeTitle">
|
|
|
+ <el-input v-model="notice.noticeTitle" placeholder="请输入公告名称" style="width: 510px"></el-input>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item label="发布时间:" size="mini" prop="time">
|
|
|
- <el-time-select placeholder="选择时间"> </el-time-select>
|
|
|
- </el-form-item>
|
|
|
+ <el-form-item label="发布时间:" required>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-form-item prop="date1">
|
|
|
+ <el-date-picker type="date" placeholder="选择日期" v-model="notice.date1" style="width: 100%;"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="line" :span="1.5">-</el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-form-item prop="date2">
|
|
|
+ <el-time-picker placeholder="选择时间" v-model="notice.date2" style="width: 100%;"></el-time-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form-item>
|
|
|
|
|
|
<el-form-item label="公告内容:" prop="content">
|
|
|
- <quill-editor
|
|
|
- class="ql-editor"
|
|
|
- v-model="content"
|
|
|
- ref="myQuillEditor"
|
|
|
- :options="editorOption"
|
|
|
- >
|
|
|
- </quill-editor>
|
|
|
+ <editor v-model="notice.content" :min-height="192"/>
|
|
|
</el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="submitForm('form')">提交</el-button>
|
|
|
+ <el-button @click="resetForm('form')">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -37,85 +36,102 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import Quill from "quill"; // 引入编辑器
|
|
|
-// 自定义字体大小
|
|
|
-const Size = Quill.import("attributors/style/size");
|
|
|
-Size.whitelist = ["10px", "12px", "16px", "18px", "20px", "30px", "32px"];
|
|
|
-Quill.register(Size, true);
|
|
|
-
|
|
|
-// 自定义字体类型
|
|
|
-var fonts = [
|
|
|
- "SimSun",
|
|
|
- "SimHei",
|
|
|
- "Microsoft-YaHei",
|
|
|
- "KaiTi",
|
|
|
- "FangSong",
|
|
|
- "Arial",
|
|
|
- "sans-serif",
|
|
|
-];
|
|
|
-var Font = Quill.import("formats/font");
|
|
|
-Font.whitelist = fonts;
|
|
|
-Quill.register(Font, true);
|
|
|
+import { submitNotice } from '../../api/notice/notice.js'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
- form: {
|
|
|
- name: "",
|
|
|
+ notice: {
|
|
|
+ noticeTitle: '',
|
|
|
+ date1:'',
|
|
|
+ date2:'',
|
|
|
content:"",
|
|
|
-
|
|
|
+ cnt:1
|
|
|
},
|
|
|
rules: {
|
|
|
- title: [{ required: true, message: "请输入公告名称", trigger: "blur" }],
|
|
|
- time: [{ required: true, message: "请输入发布时间", trigger: "blur" }],
|
|
|
+ noticeTitle: [{ required: true, message: "请输入公告名称", trigger: "blur" }],
|
|
|
+ date1: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],
|
|
|
+ date2: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }],
|
|
|
content: [{ required: true, message: "请输入公告内容", trigger: "blur" }],
|
|
|
},
|
|
|
- // 富文本编辑器配置
|
|
|
- editorOption: {
|
|
|
- modules: {
|
|
|
- toolbar: [
|
|
|
- ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
|
|
|
- ["blockquote", "code-block"], // 引用 代码块
|
|
|
- [{ header: 1 }, { header: 2 }], // 1、2 级标题
|
|
|
- [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
|
|
|
- [{ script: "sub" }, { script: "super" }], // 上标/下标
|
|
|
- [{ indent: "-1" }, { indent: "+1" }], // 缩进
|
|
|
- [{ direction: "rtl" }], // 文本方向
|
|
|
- [{ size: ["12px", false, "16px", "18px", "20px", "30px"] }], // 字体大小
|
|
|
- [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
|
|
|
- [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
|
|
|
- [
|
|
|
- {
|
|
|
- font: [
|
|
|
- false,
|
|
|
- "SimSun",
|
|
|
- "SimHei",
|
|
|
- "Microsoft-YaHei",
|
|
|
- "KaiTi",
|
|
|
- "FangSong",
|
|
|
- "Arial",
|
|
|
- ],
|
|
|
- },
|
|
|
- ], // 字体种类
|
|
|
- [{ align: [] }], // 对齐方式
|
|
|
- ["clean"], // 清除文本格式
|
|
|
- ["link", "image", "video"], // 链接、图片、视频
|
|
|
- ],
|
|
|
- placeholder: "请输入正文",
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- };
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {
|
|
|
- console.log( "-****" , this.form.name);
|
|
|
- console.log( "-****" , this.form.content);
|
|
|
+ console.log( "-****" , this.notice.noticeTitle);
|
|
|
+ console.log( "-****" , this.notice.date1);
|
|
|
+ console.log( "-****" , this.notice.date2);
|
|
|
+ console.log( "-****" , this.notice.content);
|
|
|
},
|
|
|
+ methods: {
|
|
|
+ change(){
|
|
|
+ console.log(1);
|
|
|
+ this.cnt = this.cnt+ 1
|
|
|
+ console.log(this.cnt);
|
|
|
+ },
|
|
|
+ onEditorChange() {
|
|
|
+ //内容改变事件
|
|
|
+ this.$emit("input", this.content);
|
|
|
+ },
|
|
|
+ submitForm(formName) {
|
|
|
+ console.log( "-****title" , this.notice.noticeTitle);
|
|
|
+ console.log( "-****date1" , this.notice.date1);
|
|
|
+ console.log( "-****date2" , this.notice.date2);
|
|
|
+ console.log( "-****content" , this.notice.content);
|
|
|
+ // console.log( "lxzhen-****content" , this.content);
|
|
|
+ var dateTime = this.notice.date1;
|
|
|
+ function add0(m){return m<10?'0'+m:m }
|
|
|
+ function format(shijianchuo)
|
|
|
+ {
|
|
|
+ var time = new Date(shijianchuo);
|
|
|
+ var y = time.getFullYear();
|
|
|
+ var m = time.getMonth()+1;
|
|
|
+ var d = time.getDate()+1;
|
|
|
+ var h = time.getHours()+1;
|
|
|
+ var mm = time.getMinutes()+1;
|
|
|
+ var s = time.getSeconds()+1;
|
|
|
+ return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
|
|
|
+ }
|
|
|
+ var date = format(dateTime);
|
|
|
+ console.log(date);
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ // alert('submit!');
|
|
|
+ submitNotice({
|
|
|
+ newsTitle:this.notice.noticeTitle,
|
|
|
+ newsContent:this.notice.content,
|
|
|
+ userPhone :this.notice.receivedUsers,
|
|
|
+ createTime:'1994-12-01 12:22:33',
|
|
|
+ updateTime:'1994-12-01 12:22:33',
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ // 添加成功
|
|
|
+ this.$notice({
|
|
|
+ notice:"公告添加成功！",
|
|
|
+ type:"success",
|
|
|
+ });
|
|
|
+ this.$refs[notice].resetFields();//添加成功后清空
|
|
|
+ this.$router.push('/notice/noticeList')//跳转
|
|
|
+ })
|
|
|
+ // 失败
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ resetForm(formName) {
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ },
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.background {
|
|
|
+.notice-add {
|
|
|
width: 750px;
|
|
|
height: 100%;
|
|
|
position: absolute;
|
|
|
@@ -127,7 +143,7 @@ export default {
|
|
|
border: 1px solid #ccc;
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
-.content {
|
|
|
+.notice-add-box {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
padding: 35px;
|
wangrui