ZhangBin
/
chinese-medicine
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

会议纪要

master
lucky 5 years ago
parent
f6429c5474
commit
be5a63ef97
9 changed files with 463 additions and 54 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 97
      package-lock.json
  2. 1
      package.json
  3. 2
      src/App.vue
  4. 205
      src/components/QuillEditor/QuillEditor.vue
  5. 1
      src/main.js
  6. 3
      src/plugins/vue-quill-editor.js
  7. 2
      src/router/index.js
  8. 19
      src/views/Meeting/Index.vue
  9. 187
      src/views/Meeting/Meeting.vue

97
package-lock.json
View File

@ -3372,7 +3372,6 @@
"version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/call-bind/download/call-bind-1.0.0.tgz",
"integrity": "sha1-JBJwVLs/m9y0sfuCQYGGBy93uM4=",
"dev": true,
"requires": {
"function-bind": "^1.1.1",
"get-intrinsic": "^1.0.0"
@ -4714,7 +4713,6 @@
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/deep-equal/download/deep-equal-1.1.1.tgz?cache=0&sync_timestamp=1601612809126&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdeep-equal%2Fdownload%2Fdeep-equal-1.1.1.tgz",
"integrity": "sha1-tcmMlCzv+vfLBR4k4UNKJaLmB2o=",
"dev": true,
"requires": {
"is-arguments": "^1.0.4",
"is-date-object": "^1.0.1",
@ -4864,7 +4862,6 @@
"version": "1.1.3",
"resolved": "https://registry.npm.taobao.org/define-properties/download/define-properties-1.1.3.tgz",
"integrity": "sha1-z4jabL7ib+bbcJT2HYcMvYTO6fE=",
"dev": true,
"requires": {
"object-keys": "^1.0.12"
}
@ -5355,7 +5352,6 @@
"version": "1.17.7",
"resolved": "https://registry.npm.taobao.org/es-abstract/download/es-abstract-1.17.7.tgz",
"integrity": "sha1-pN5hsvZpifx0IWdsHLl4dXOs5Uw=",
"dev": true,
"requires": {
"es-to-primitive": "^1.2.1",
"function-bind": "^1.1.1",
@ -5374,7 +5370,6 @@
"version": "1.2.1",
"resolved": "https://registry.npm.taobao.org/es-to-primitive/download/es-to-primitive-1.2.1.tgz",
"integrity": "sha1-5VzUyc3BiLzvsDs2bHNjI/xciYo=",
"dev": true,
"requires": {
"is-callable": "^1.1.4",
"is-date-object": "^1.0.1",
@ -5812,8 +5807,7 @@
"extend": {
"version": "3.0.2",
"resolved": "https://registry.npm.taobao.org/extend/download/extend-3.0.2.tgz",
"integrity": "sha1-+LETa0Bx+9jrFAr/hYsQGewpFfo=",
"dev": true
"integrity": "sha1-+LETa0Bx+9jrFAr/hYsQGewpFfo="
},
"extend-shallow": {
"version": "3.0.2",
@ -6252,8 +6246,7 @@
"function-bind": {
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/function-bind/download/function-bind-1.1.1.tgz",
"integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0=",
"dev": true
"integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0="
},
"functional-red-black-tree": {
"version": "1.0.1",
@ -6277,7 +6270,6 @@
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/get-intrinsic/download/get-intrinsic-1.0.1.tgz?cache=0&sync_timestamp=1604120579288&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fget-intrinsic%2Fdownload%2Fget-intrinsic-1.0.1.tgz",
"integrity": "sha1-lKl2j8vdBZWhySc6rPTInQdWMb4=",
"dev": true,
"requires": {
"function-bind": "^1.1.1",
"has": "^1.0.3",
@ -6412,7 +6404,6 @@
"version": "1.0.3",
"resolved": "https://registry.npm.taobao.org/has/download/has-1.0.3.tgz",
"integrity": "sha1-ci18v8H2qoJB8W3YFOAR4fQeh5Y=",
"dev": true,
"requires": {
"function-bind": "^1.1.1"
}
@ -6443,8 +6434,7 @@
"has-symbols": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/has-symbols/download/has-symbols-1.0.1.tgz",
"integrity": "sha1-n1IUdYpEGWxAbZvXbOv4HsLdMeg=",
"dev": true
"integrity": "sha1-n1IUdYpEGWxAbZvXbOv4HsLdMeg="
},
"has-value": {
"version": "1.0.0",
@ -7105,8 +7095,7 @@
"is-arguments": {
"version": "1.0.4",
"resolved": "https://registry.npm.taobao.org/is-arguments/download/is-arguments-1.0.4.tgz",
"integrity": "sha1-P6+WbHy6D/Q3+zH2JQCC/PBEjPM=",
"dev": true
"integrity": "sha1-P6+WbHy6D/Q3+zH2JQCC/PBEjPM="
},
"is-arrayish": {
"version": "0.2.1",
@ -7132,8 +7121,7 @@
"is-callable": {
"version": "1.2.2",
"resolved": "https://registry.npm.taobao.org/is-callable/download/is-callable-1.2.2.tgz?cache=0&sync_timestamp=1600719446314&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-callable%2Fdownload%2Fis-callable-1.2.2.tgz",
"integrity": "sha1-x8ZxXNItTdtI0+GZcCI6zquwgNk=",
"dev": true
"integrity": "sha1-x8ZxXNItTdtI0+GZcCI6zquwgNk="
},
"is-ci": {
"version": "1.2.1",
@ -7190,8 +7178,7 @@
"is-date-object": {
"version": "1.0.2",
"resolved": "https://registry.npm.taobao.org/is-date-object/download/is-date-object-1.0.2.tgz?cache=0&sync_timestamp=1576729165697&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-date-object%2Fdownload%2Fis-date-object-1.0.2.tgz",
"integrity": "sha1-vac28s2P0G0yhE53Q7+nSUw7/X4=",
"dev": true
"integrity": "sha1-vac28s2P0G0yhE53Q7+nSUw7/X4="
},
"is-descriptor": {
"version": "0.1.6",
@ -7330,7 +7317,6 @@
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/is-regex/download/is-regex-1.1.1.tgz?cache=0&sync_timestamp=1596555607285&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-regex%2Fdownload%2Fis-regex-1.1.1.tgz",
"integrity": "sha1-xvmKrMVG9s7FRooHt7FTq1ZKV7k=",
"dev": true,
"requires": {
"has-symbols": "^1.0.1"
}
@ -7366,7 +7352,6 @@
"version": "1.0.3",
"resolved": "https://registry.npm.taobao.org/is-symbol/download/is-symbol-1.0.3.tgz?cache=0&sync_timestamp=1574296307739&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-symbol%2Fdownload%2Fis-symbol-1.0.3.tgz",
"integrity": "sha1-OOEBS55jKb4N6dJKQU/XRB7GGTc=",
"dev": true,
"requires": {
"has-symbols": "^1.0.1"
}
@ -8705,14 +8690,12 @@
"object-inspect": {
"version": "1.8.0",
"resolved": "https://registry.npm.taobao.org/object-inspect/download/object-inspect-1.8.0.tgz?cache=0&sync_timestamp=1592545177285&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fobject-inspect%2Fdownload%2Fobject-inspect-1.8.0.tgz",
"integrity": "sha1-34B+Xs9TpgnMa/6T6sPMe+WzqdA=",
"dev": true
"integrity": "sha1-34B+Xs9TpgnMa/6T6sPMe+WzqdA="
},
"object-is": {
"version": "1.1.3",
"resolved": "https://registry.npm.taobao.org/object-is/download/object-is-1.1.3.tgz",
"integrity": "sha1-LjueZVYBN0Ve471irsTZCi6hzIE=",
"dev": true,
"requires": {
"define-properties": "^1.1.3",
"es-abstract": "^1.18.0-next.1"
@ -8722,7 +8705,6 @@
"version": "1.18.0-next.1",
"resolved": "https://registry.npm.taobao.org/es-abstract/download/es-abstract-1.18.0-next.1.tgz",
"integrity": "sha1-bjoKS9pxflAjqzuOkL7DYQjSLGg=",
"dev": true,
"requires": {
"es-to-primitive": "^1.2.1",
"function-bind": "^1.1.1",
@ -8743,8 +8725,7 @@
"object-keys": {
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/object-keys/download/object-keys-1.1.1.tgz",
"integrity": "sha1-HEfyct8nfzsdrwYWd9nILiMixg4=",
"dev": true
"integrity": "sha1-HEfyct8nfzsdrwYWd9nILiMixg4="
},
"object-visit": {
"version": "1.0.1",
@ -8759,7 +8740,6 @@
"version": "4.1.2",
"resolved": "https://registry.npm.taobao.org/object.assign/download/object.assign-4.1.2.tgz?cache=0&sync_timestamp=1604115131746&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fobject.assign%2Fdownload%2Fobject.assign-4.1.2.tgz",
"integrity": "sha1-DtVKNC7Os3s4/3brgxoOeIy2OUA=",
"dev": true,
"requires": {
"call-bind": "^1.0.0",
"define-properties": "^1.1.3",
@ -9000,6 +8980,11 @@
"no-case": "^2.2.0"
}
},
"parchment": {
"version": "1.1.4",
"resolved": "https://registry.npm.taobao.org/parchment/download/parchment-1.1.4.tgz?cache=0&sync_timestamp=1586512365974&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fparchment%2Fdownload%2Fparchment-1.1.4.tgz",
"integrity": "sha1-rt7Xq5OP6SHUw0vDOc4RaLwv/eU="
},
"parent-module": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/parent-module/download/parent-module-1.0.1.tgz",
@ -10074,6 +10059,48 @@
"integrity": "sha1-M0WUG0FTy50ILY7uTNogFqmu9/Y=",
"dev": true
},
"quill": {
"version": "1.3.7",
"resolved": "https://registry.npm.taobao.org/quill/download/quill-1.3.7.tgz",
"integrity": "sha1-2lsvOixHDpMjQM2/NmjJ8h+Shug=",
"requires": {
"clone": "^2.1.1",
"deep-equal": "^1.0.1",
"eventemitter3": "^2.0.3",
"extend": "^3.0.2",
"parchment": "^1.1.4",
"quill-delta": "^3.6.2"
},
"dependencies": {
"clone": {
"version": "2.1.2",
"resolved": "https://registry.npm.taobao.org/clone/download/clone-2.1.2.tgz",
"integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
},
"eventemitter3": {
"version": "2.0.3",
"resolved": "https://registry.npm.taobao.org/eventemitter3/download/eventemitter3-2.0.3.tgz?cache=0&sync_timestamp=1598517790184&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feventemitter3%2Fdownload%2Feventemitter3-2.0.3.tgz",
"integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
}
}
},
"quill-delta": {
"version": "3.6.3",
"resolved": "https://registry.npm.taobao.org/quill-delta/download/quill-delta-3.6.3.tgz",
"integrity": "sha1-sZ/SuJQSMBxg4f8hPY2GDqwPEDI=",
"requires": {
"deep-equal": "^1.0.1",
"extend": "^3.0.2",
"fast-diff": "1.1.2"
},
"dependencies": {
"fast-diff": {
"version": "1.1.2",
"resolved": "https://registry.npm.taobao.org/fast-diff/download/fast-diff-1.1.2.tgz",
"integrity": "sha1-S2LEK44D3j+EhGC2OQeZIGldAVQ="
}
}
},
"raf": {
"version": "3.4.1",
"resolved": "https://registry.npm.taobao.org/raf/download/raf-3.4.1.tgz?cache=0&sync_timestamp=1586264003311&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fraf%2Fdownload%2Fraf-3.4.1.tgz",
@ -10197,7 +10224,6 @@
"version": "1.3.0",
"resolved": "https://registry.npm.taobao.org/regexp.prototype.flags/download/regexp.prototype.flags-1.3.0.tgz?cache=0&sync_timestamp=1576388236739&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregexp.prototype.flags%2Fdownload%2Fregexp.prototype.flags-1.3.0.tgz",
"integrity": "sha1-erqJs8E6ZFCdq888qNn7ub31y3U=",
"dev": true,
"requires": {
"define-properties": "^1.1.3",
"es-abstract": "^1.17.0-next.1"
@ -11294,7 +11320,6 @@
"version": "1.0.2",
"resolved": "https://registry.npm.taobao.org/string.prototype.trimend/download/string.prototype.trimend-1.0.2.tgz?cache=0&sync_timestamp=1603220012319&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstring.prototype.trimend%2Fdownload%2Fstring.prototype.trimend-1.0.2.tgz",
"integrity": "sha1-bd2ah5a8cUtImjriIkaiCPN7+kY=",
"dev": true,
"requires": {
"define-properties": "^1.1.3",
"es-abstract": "^1.18.0-next.1"
@ -11304,7 +11329,6 @@
"version": "1.18.0-next.1",
"resolved": "https://registry.npm.taobao.org/es-abstract/download/es-abstract-1.18.0-next.1.tgz",
"integrity": "sha1-bjoKS9pxflAjqzuOkL7DYQjSLGg=",
"dev": true,
"requires": {
"es-to-primitive": "^1.2.1",
"function-bind": "^1.1.1",
@ -11326,7 +11350,6 @@
"version": "1.0.2",
"resolved": "https://registry.npm.taobao.org/string.prototype.trimstart/download/string.prototype.trimstart-1.0.2.tgz?cache=0&sync_timestamp=1603220012476&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstring.prototype.trimstart%2Fdownload%2Fstring.prototype.trimstart-1.0.2.tgz",
"integrity": "sha1-ItRdqBAVMJzQzdeXh+iRn8XGE+c=",
"dev": true,
"requires": {
"define-properties": "^1.1.3",
"es-abstract": "^1.18.0-next.1"
@ -11336,7 +11359,6 @@
"version": "1.18.0-next.1",
"resolved": "https://registry.npm.taobao.org/es-abstract/download/es-abstract-1.18.0-next.1.tgz",
"integrity": "sha1-bjoKS9pxflAjqzuOkL7DYQjSLGg=",
"dev": true,
"requires": {
"es-to-primitive": "^1.2.1",
"function-bind": "^1.1.1",
@ -12655,6 +12677,15 @@
}
}
},
"vue-quill-editor": {
"version": "3.0.6",
"resolved": "https://registry.npm.taobao.org/vue-quill-editor/download/vue-quill-editor-3.0.6.tgz",
"integrity": "sha1-H4VkYhHWijGoCnLLf0W7LxGbyPs=",
"requires": {
"object-assign": "^4.1.1",
"quill": "^1.3.4"
}
},
"vue-ref": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/vue-ref/download/vue-ref-2.0.0.tgz",

1
package.json
View File

@ -18,6 +18,7 @@
"stylus": "^0.54.8",
"vue": "^2.6.11",
"vue-dompurify-html": "^2.3.0",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},

2
src/App.vue
View File

@ -9,7 +9,7 @@
<a-config-provider :locale="zh_CN">
<div class="d-flex flex-row flex-nowrap" id="app">
<btn-con />
<router-view class="d-flex"></router-view>
<router-view class="flex-1 bg"></router-view>
</div>
</a-config-provider>
</template>

205
src/components/QuillEditor/QuillEditor.vue
View File

@ -0,0 +1,205 @@
<template>
<div class="ql-snow">
<quill-editor :options="editorOption" ref="myTextEditor" v-model="content"></quill-editor>
</div>
</template>
<script>
// 工具栏配置
const toolbarOptions = [
['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: ['small', false, 'large', 'huge'] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ font: [] }], // 字体种类
[{ align: [] }], // 对齐方式
['clean'], // 清除文本格式
['link', 'image'], // 链接、图片、'video'视频
];
import { quillEditor } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
name: 'QuillEditor',
props: {
/*编辑器的内容*/
value: {
type: String,
},
/*图片大小*/
maxSize: {
type: Number,
default: 4000, //kb
},
/* 默认提示 */
placeholder: {
type: String,
default: '',
},
},
components: {
quillEditor,
},
data() {
return {
content: this.value,
quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
editorOption: {
theme: 'snow', // or 'bubble'
placeholder: this.placeholder,
modules: {
toolbar: {
container: toolbarOptions,
},
},
},
serverUrl: '/v1/blog/imgUpload', // 这里写你要上传的图片服务器地址
header: {
// token: sessionStorage.token
}, // 有的图片服务器要求请求头需要有token
};
},
methods: {
onEditorBlur() {
//失去焦点事件
},
onEditorFocus() {
//获得焦点事件
},
onEditorChange() {
//内容改变事件
this.$emit('input', this.content);
},
// 富文本图片上传前
beforeUpload() {
// 显示loading动画
this.quillUpdateImg = true;
},
uploadSuccess(res, file) {
// res为图片服务器返回的数据
// 获取富文本组件实例
let quill = this.$refs.myQuillEditor.quill;
// 如果上传成功
if (res.code == 200) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片 res.url为服务器返回的图片地址
quill.insertEmbed(length, 'image', res.url);
// 调整光标到最后
quill.setSelection(length + 1);
} else {
this.$message.error('图片插入失败');
}
// loading动画消失
this.quillUpdateImg = false;
},
// 富文本图片上传失败
uploadError() {
// loading动画消失
this.quillUpdateImg = false;
this.$message.error('图片插入失败');
},
},
};
</script>
<style>
.ql-container {
overflow: auto;
max-height: 200px;
}
.ql-toolbar.ql-snow {
background: #f5f5f5;
}
.ql-snow .ql-tooltip[data-mode='link']::before {
content: '请输入链接地址:';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
border-right: 0px;
content: '保存';
padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode='video']::before {
content: '请输入视频地址:';
}
.ql-snow .ql-picker {
line-height: 20px;
border: 1px solid #ddd;
border-radius: 3px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
content: '32px';
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: '文本';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
content: '标题1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
content: '标题2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
content: '标题3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
content: '标题4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
content: '标题5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
content: '标题6';
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: '标准字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
content: '衬线字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
content: '等宽字体';
}
</style>

1
src/main.js
View File

@ -10,6 +10,7 @@ import 'common/portrait.styl';
import echarts from 'echarts';
import 'echarts-gl';
import 'echarts/map/js/province/shanxi.js'; //对应的省份
import './plugins/vue-quill-editor.js';
// Vue.use(echarts);
Vue.prototype.$echarts = echarts;
// import './assets/icon/iconfont.css';

3
src/plugins/vue-quill-editor.js
View File

@ -0,0 +1,3 @@
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

2
src/router/index.js
View File

@ -22,7 +22,7 @@ const routes = [
{
path: '/Meeting',
name: 'Meeting',
component: () => import('@/views/Meeting/Index.vue'),
component: () => import('@/views/Meeting/Meeting.vue'),
},
];

19
src/views/Meeting/Index.vue
View File

@ -1,19 +0,0 @@
<template>
<div>会议纪要界面</div>
</template>
<script>
export default {
name: 'Meeting',
data() {
return {
str: '',
showVideo: false,
};
},
methods: {},
};
</script>
<style lang="stylus" scoped></style>

187
src/views/Meeting/Meeting.vue
View File

@ -0,0 +1,187 @@
<template>
<div>
<div class="white metting">
<h2 class="mb-4">会议记录</h2>
<a-form :form="form" @submit="handleSubmit">
<!-- 会议时间 -->
<a-form-item
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
label="会议时间"
>
<a-range-picker
:placeholder="['开始时间', '结束时间']"
@change="onChangeTime"
format="YYYY-MM-DD HH:mm"
show-time
style="width: 100%"
v-decorator="['time', rangeConfig]"
/>
</a-form-item>
<!-- 会议地点 -->
<a-form-item
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
label="会议地点"
>
<a-input
placeholder="会议地点"
v-decorator="[
'place',
{
rules: [
{ required: true, message: '会议地点不能为空' },
{ whitespace: true, message: '会议地点不能为空' },
{ max: 140, massage: '会议地点最多140个字符' },
],
},
]"
/>
</a-form-item>
<!-- 主持人 -->
<a-form-item
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
label="主持人"
>
<a-input
placeholder="主持人"
v-decorator="[
'host',
{
rules: [
{ required: true, message: '主持人不能为空' },
{ whitespace: true, message: '主持人不能为空' },
{ max: 140, massage: '主持人最多140个字符' },
],
},
]"
/>
</a-form-item>
<!-- 参会人员 -->
<a-form-item
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
label="参会人员"
>
<quill-editor :maxSize="maxSize" :placeholder="placeholderParticipants" />
</a-form-item>
<!-- 研讨内容 -->
<a-form-item
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
label="研讨内容"
>
<quill-editor :maxSize="maxSize" :placeholder="placeholderContent" />
</a-form-item>
<!-- 会议纪要 -->
<a-form-item
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
label="会议纪要"
>
<quill-editor :maxSize="maxSize" :placeholder="placeholderMeeting" />
</a-form-item>
<a-form-item class="d-flex flex-row-reverse">
<a-button class="white--text px-10" html-type="submit" type="primary">提交</a-button>
</a-form-item>
</a-form>
</div>
</div>
</template>
<script>
import QuillEditor from 'components/QuillEditor/QuillEditor.vue';
import moment from 'moment';
// 工具栏配置
const toolbarOptions = [
['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: ['small', false, 'large', 'huge'] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
// [{ font: [] }], // 字体种类
[{ align: [] }], // 对齐方式
['clean'], // 清除文本格式
['link', 'image', 'video'], // 链接、图片、视频
];
const formItemLayout = {
labelCol: { span: 4 },
wrapperCol: { span: 18 },
};
const tailItemLayout = { wrapperCol: { span: 18, offset: 4 } };
export default {
name: 'Meeting',
components: {
QuillEditor, // 富文本编辑器
},
data() {
return {
showVideo: false,
formItemLayout,
tailItemLayout,
form: this.$form.createForm(this, { name: 'page-add' }),
rangeConfig: { rules: [{ type: 'array', required: true, message: '会议时间不能为空' }] },
place: '', // 会议地点
host: '', // 主持人
participants: '', // 参会人员
content: '', // 研讨内容
meetingMinutes: '', // 会议纪要
placeholderParticipants: '请在此输入参会人员...',
maxSize: 2048,
placeholderContent: '请在此输入研讨内容...',
placeholderMeeting: '请在此输入会议纪要...',
};
},
methods: {
moment,
onChangeTime(dates, dateStrings) {
console.log('From: ', dates[0], ', to: ', dates[1]);
console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
},
// 提交表单
handleSubmit(e) {
e.preventDefault();
this.form.validateFieldsAndScroll(async (err, values) => {
if (!err) {
try {
// const param = values;
// const params = { param };
// console.log('params: ', params);
// const res = await addPage(params);
// const { data, msg, code } = res.data;
// this.$emit('closeModal');
// if (code === 200) {
// this.$message.success('添加成功');
// } else {
// throw msg;
// }
} catch (error) {
// this.$message.error(error || '添加失败');
}
}
});
},
},
};
</script>
<style lang="stylus" scoped>
.metting {
width: 70%;
margin: 30px 15%;
padding: 28px;
border-radius: 4px;
box-shadow: 3px 3px 10px #eee;
}
</style>
Write Preview
Loading…
Cancel
Save