会议纪要预览

package-lock.json

@@ -5119,9 +5119,9 @@
       }
     },
     "dompurify": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.2.3.tgz",
-      "integrity": "sha512-8Hv7Q0FuwD9rWoB6qI2eZsfKbGXfoUVuGHHrE15vgk4ReOKwOkSgbqb2OMFtc0d5besOEkoLkcyuV10zQ2X5gw=="
+      "version": "2.2.6",
+      "resolved": "https://registry.npm.taobao.org/dompurify/download/dompurify-2.2.6.tgz",
+      "integrity": "sha1-VJRdxcC0XOWuIocFd36OWdey7cQ="
     },
     "domready": {
       "version": "1.0.8",
@@ -12537,8 +12537,8 @@
     },
     "vue-dompurify-html": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/vue-dompurify-html/-/vue-dompurify-html-2.3.0.tgz",
-      "integrity": "sha512-Iz9wI4iiJF+rzC2x3r8quw/VXrkwgMsWXt9p0Le4wXtolBXwMDJOmK3QNMiNg36bzU2b0f3En/wjidoeRVNZ7A==",
+      "resolved": "https://registry.npm.taobao.org/vue-dompurify-html/download/vue-dompurify-html-2.3.0.tgz",
+      "integrity": "sha1-sXXt2lc2LPewPShkRo+mROBaKtA=",
       "requires": {
         "dompurify": "^2.0.0"
       }

src/common/portrait.styl

@@ -3,6 +3,31 @@
   padding: 12px;
 }
 
+.pl-1{
+  padding-left: 4px;
+}
+
+.pl-2{
+  padding-left: 8px;
+}
+
+.pl-3{
+  padding-left: 12px;
+}
+
+.pl-4{
+  padding-left: 16px;
+}
+
+.pl-5{
+  padding-left: 20px;
+}
+
+.px-1{
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
 .px-2{
   padding-left: 8px;
   padding-right: 8px;
@@ -152,6 +177,15 @@
   background: white;
 }
 
+.green{
+  background: #4CAF50;
+}
+
+.white--text{
+  color: #fff;
+}
+
+
 // flex
 .d-flex{
   display: flex;
@@ -193,6 +227,10 @@
   align-items: center;
 }
 
+.align-left{
+  align-items: start;
+}
+
 .flex-1{
   display: flex;
   flex: 1;
@@ -254,22 +292,13 @@ h2{
 }
 
 .baseColor{
-  color: #13ACC4
+  color: #1890ff
 }
 
 .bg{
   background: #F5F5F5
 }
 
-.ant-btn-primary{
-  background-color: #13ACC4
-  border-color: #13ACC4;
-}
-
-.ant-btn-link:hover, .ant-btn-link:focus{
-  color: #13ACC4;
-}
-
 .fill-width{
   width:100%;
 }

src/components/BtnCom/BtnCon.vue

@@ -29,14 +29,13 @@ export default {
   border-right: 1px solid #ccc;
 
   .btn {
-    background: #13acc4;
-    border: 1px solid #04b6d2;
+    background: #1890ff;
+    border: 1px solid #1890ff;
     padding: 4px;
     border-radius: 5px;
     color: #fff;
     cursor: pointer;
     margin-bottom: 8px;
-    // width: fit-content;
   }
 }
 </style>

src/components/QuillEditor/QuillEditor.vue

@@ -118,7 +118,13 @@ export default {
 }
 .ql-toolbar.ql-snow {
   background: #f5f5f5;
+  border: 1px solid #d9d9d9;
 }
+
+.ql-container.ql-snow {
+  border: 1px solid #d9d9d9;
+}
+
 .ql-snow .ql-tooltip[data-mode='link']::before {
   content: '请输入链接地址:';
 }

src/main.js

@@ -11,7 +11,9 @@ import echarts from 'echarts';
 import 'echarts-gl';
 import 'echarts/map/js/province/shanxi.js'; //对应的省份
 import './plugins/vue-quill-editor.js';
+import VueDOMPurifyHTML from 'vue-dompurify-html';
 // Vue.use(echarts);
+Vue.use(VueDOMPurifyHTML);
 Vue.prototype.$echarts = echarts;
 // import './assets/icon/iconfont.css';
 // import VueDOMPurifyHTML from 'vue-dompurify-html';

src/plugins/ant-design-vue.js

@@ -29,6 +29,8 @@ import {
   Progress,
   carousel,
   Spin,
+  Card,
+  List,
 } from 'ant-design-vue';
 import { ConfigProvider } from 'ant-design-vue';
 Vue.component(ConfigProvider.name, ConfigProvider);
@@ -59,6 +61,8 @@ Vue.use(BackTop);
 Vue.use(Progress);
 Vue.use(carousel);
 Vue.use(Spin);
+Vue.use(Card);
+Vue.use(List);
 
 Vue.prototype.$message = message;
 Vue.prototype.$notification = notification;

src/router/index.js

@@ -24,6 +24,12 @@ const routes = [
     name: 'Meeting',
     component: () => import('@/views/Meeting/Meeting.vue'),
   },
+  // 会议纪要预览
+  {
+    path: '/meetingPreview',
+    name: 'MeetingPreview',
+    component: () => import('@/views/MeetingPreview/MeetingPreview.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/views/Meeting/Meeting.vue

@@ -1,7 +1,11 @@
 <template>
   <div>
-    <div class="white metting">
-      <h2 class="mb-4">会议记录</h2>
+    <div class="metting">
+      <a-card :bordered="false" title="会议记录">
+        <div slot="extra">
+          <a-button @click="$router.push('/meetingPreview')" class="mr-3" type="primary">预览</a-button>
+          <a-button>分享</a-button>
+        </div>
         <a-form :form="form" @submit="handleSubmit">
           <!-- 会议时间 -->
           <a-form-item
@@ -87,6 +91,7 @@
             <a-button class="white--text px-10" html-type="submit" type="primary">提交</a-button>
           </a-form-item>
         </a-form>
+      </a-card>
     </div>
   </div>
 </template>
@@ -95,24 +100,6 @@
 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 },
@@ -176,10 +163,7 @@ export default {
 
 <style lang="stylus" scoped>
 .metting {
-  width: 70%;
-  margin: 30px 15%;
-  padding: 28px;
-  border-radius: 4px;
-  box-shadow: 3px 3px 10px #eee;
+  width: 80%;
+  margin: 30px 10%;
 }
 </style>

src/views/MeetingPreview/MeetingPreview.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <div class="metting">
+      <a-card :bordered="false" title="会议记录预览">
+        <div slot="extra">
+          <a-button @click="$router.push('/Meeting')" type="primary">返回</a-button>
+        </div>
+        <a-list>
+          <a-list-item>
+            <span class="font-bold-14 mb-2">会议时间：</span>
+            {{ startTime }}至{{ endTime }}
+          </a-list-item>
+          <a-list-item>
+            <span class="font-bold-14 mb-2">会议地点：</span>
+            {{ place }}
+          </a-list-item>
+          <a-list-item>
+            <span class="font-bold-14 mb-2">主持人：</span>
+            {{ host }}
+          </a-list-item>
+          <a-list-item class="d-flex flex-column align-left">
+            <span class="font-bold-14 mb-2">参会人员：</span>
+            <div class="fill-width">
+              <span v-dompurify-html="participants"></span>
+            </div>
+          </a-list-item>
+          <a-list-item class="d-flex flex-column align-left">
+            <span class="font-bold-14 mb-2">研讨内容：</span>
+            <div class="fill-width">
+              <span v-dompurify-html="content"></span>
+            </div>
+          </a-list-item>
+          <a-list-item class="d-flex flex-column align-left">
+            <span class="font-bold-14 mb-2">会议纪要：</span>
+            <div class="fill-width">
+              <span v-dompurify-html="meetingMinutes"></span>
+            </div>
+          </a-list-item>
+        </a-list>
+      </a-card>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MeetingPreview',
+  data() {
+    return {
+      startTime: '2021-01-29 08:00',
+      endTime: '2021-01-29 10:00',
+      place: 'ccsens', // 会议地点
+      host: '武慧娟', // 主持人
+      participants: `<div>张野，后台工程师</div>
+            <div>王臣伟，后台工程师</div>
+            <div>宋瑞芳，前端工程师</div>
+            <div>张斌，前端工程师</div>`, // 参会人员
+      content: '中医药课题数据库系统的开发', // 研讨内容
+      meetingMinutes: '中医药课题数据库系统的开发分工及进度', // 会议纪要
+    };
+  },
+
+  methods: {},
+};
+</script>
+
+<style lang="stylus" scoped>
+.metting {
+  width: 80%;
+  margin: 30px 10%;
+}
+</style>