关联pt

public/index.html

@@ -14,5 +14,6 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <script src="./sdk.js"></script>
   </body>
 </html>

public/sdk.js

@@ -0,0 +1,70 @@
+;(function(window) {
+    var _instance = null;
+    window.TallPlugin = function(config) {
+        this.config = config;
+        this.props = null;
+    }
+    
+    // 初始化并保证是单例
+    TallPlugin.init = function (config) {
+        if (!_instance) {
+            _instance = new TallPlugin(config);
+        }
+        return _instance;
+    }
+
+    TallPlugin.prototype.created = function (callback) {
+        var _this = this;
+        window.postMessage('created');
+        window.addEventListener('message', function ({ data, origin }) {
+            try {
+                var target = JSON.parse(data);
+                if (target.success) {
+                    _this.props = JSON.parse(data);
+                    callback && typeof callback === 'function' && callback.call(_this, _this.props);
+                } else {
+                    _this.props = null;
+                }
+            } catch (e) {
+                _this.props = null;
+            }
+        }, false);
+        // DOM加载完成
+        window.addEventListener('DOMContentLoaded', this.mounted, false);
+        // window onload
+        window.addEventListener('load', this.loaded, false);
+        // destroy
+        window.addEventListener('unload', this.destroy, false);
+        // error
+        window.addEventListener('error', this.error, false);
+        return this;
+    }
+
+    TallPlugin.prototype.mounted = function(callback) {
+        console.log('mounted');
+        window.postMessage('mounted');
+        callback && typeof callback === 'function' && callback.call(this);
+        return this;
+    }
+
+    TallPlugin.prototype.loaded = function(callback) {
+        console.log('loaded');
+        window.postMessage('loaded');
+        callback && typeof callback === 'function' && callback.call(this);
+        return this;
+    }
+
+    TallPlugin.prototype.destroy = function(callback) {
+        console.log('destroy');
+        window.postMessage('destroy');
+        callback && typeof callback === 'function' && callback.call(this);
+        return this;
+    }
+
+    TallPlugin.prototype.error = function(callback) {
+        console.log('error');
+        window.postMessage('error');
+        callback && typeof callback === 'function' && callback.call(this);
+        return this;
+    }
+})(window)

src/components/MeetingPreview/MeetingPreview.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <a-button class="mr-3" type="primary">预览</a-button>
+    <a-modal footer title="会议记录预览" v-model="visible" width="1000px">
+      <div class="fill-width">
+        <!-- <a-card :bordered="false" title="会议记录预览"> -->
+        <a-card :bordered="false">
+          <!-- <div slot="extra">
+            <a-button @click="$emit('closeModal')" type="primary">返回</a-button>
+          </div>-->
+          <a-list bordered class="metting">
+            <a-list-item>
+              <span class="font-bold mb-2">会议时间：</span>
+              {{ previewInfo.startTime || '' }} 至 {{ previewInfo.endTime }}
+            </a-list-item>
+            <a-list-item>
+              <span class="font-bold mb-2">会议地点：</span>
+              {{ previewInfo.place }}
+            </a-list-item>
+            <a-list-item>
+              <span class="font-bold mb-2">主持人：</span>
+              {{ previewInfo.host }}
+            </a-list-item>
+            <a-list-item class="d-flex flex-column align-left">
+              <span class="font-bold mb-2">参会人员：</span>
+              <div class="fill-width">
+                <span v-dompurify-html="previewInfo.participants"></span>
+              </div>
+            </a-list-item>
+            <a-list-item class="d-flex flex-column align-left">
+              <span class="font-bold mb-2">研讨内容：</span>
+              <div class="fill-width">
+                <span v-dompurify-html="previewInfo.discussionContent"></span>
+              </div>
+            </a-list-item>
+            <a-list-item class="d-flex flex-column align-left">
+              <span class="font-bold mb-2">会议纪要：</span>
+              <div class="fill-width">
+                <span v-dompurify-html="previewInfo.meetingMinutes"></span>
+              </div>
+            </a-list-item>
+          </a-list>
+        </a-card>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+export default {
+  name: 'MeetingPreview',
+  data() {
+    return { visible: false };
+  },
+
+  computed: mapState('home', ['previewInfo']),
+
+  methods: {
+    openModal() {
+      this.visible = true;
+    },
+
+    onCancel() {
+      this.visible = false;
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped>
+.metting {
+  width: 100%;
+}
+
+.metting >>> .ant-list-item {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+</style>

src/components/QuillEditor/QuillEditor.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="ql-snow">
-    <quill-editor :options="editorOption" ref="myTextEditor" v-model="content"></quill-editor>
+    <quill-editor
+      :options="editorOption"
+      @blur="onEditorBlur($event)"
+      @change="onEditorChange(placeholder)"
+      @focus="onEditorFocus($event)"
+      ref="myTextEditor"
+      v-model="content"
+    ></quill-editor>
   </div>
 </template>
 
@@ -72,9 +79,9 @@ export default {
     onEditorFocus() {
       //获得焦点事件
     },
-    onEditorChange() {
+    onEditorChange(placeholder) {
       //内容改变事件
-      this.$emit('input', this.content);
+      this.$emit('changeInput', placeholder, this.content);
     },
 
     // 富文本图片上传前

src/router/index.js

@@ -25,11 +25,11 @@ const routes = [
     component: () => import('@/views/Meeting/Meeting.vue'),
   },
   // 会议纪要预览
-  {
+  // {
-    path: '/meetingPreview',
+  //   path: '/meetingPreview',
-    name: 'MeetingPreview',
+  //   name: 'MeetingPreview',
-    component: () => import('@/views/MeetingPreview/MeetingPreview.vue'),
+  //   component: () => import('@/views/MeetingPreview/MeetingPreview.vue'),
-  },
+  // },
   // 选择患者信息
   {
     path: '/selectPatient',

src/store/modules/home/mutations.js

@@ -37,6 +37,15 @@ const mutations = {
   setPatientId(state, data) {
     state.patientId = data;
   },
+
+  /**
+   * 设置预览信息
+   * @param {object} state
+   * @param {string} data
+   */
+  setPreviewInfo(state, data) {
+    state.previewInfo = data;
+  },
 };
 
 export default mutations;

src/store/modules/home/state.js

@@ -3,6 +3,7 @@ const state = {
   user: { id: '', phone: '', account: '' },
   controlGroups: [], // 对照组
   patientId: '', // 病患id
+  previewInfo: { host: '', place: '', startTime: '', endTime: '', participants: '', meetingMinutes: '', discussionContent: '' }, // 预览信息
 };
 
 export default state;

src/views/Meeting/Meeting.vue

@@ -2,8 +2,11 @@
   <div>
     <div class="metting">
       <a-card :bordered="false" title="会议记录">
-        <div slot="extra">
+        <div class="d-flex flex-nowrap" slot="extra">
-          <a-button @click="$router.push('/meetingPreview')" class="mr-3" type="primary">预览</a-button>
+          <!-- <a-button @click="openPreview" class="mr-3" type="primary">预览</a-button> -->
+          <div @click="openPreview">
+            <meeting-preview class="mr-3" ref="meetingPreview" />
+          </div>
           <a-button>分享</a-button>
         </div>
         <a-form :form="form" @submit="handleSubmit">
@@ -27,40 +30,18 @@
             :label-col="formItemLayout.labelCol"
             :wrapper-col="formItemLayout.wrapperCol"
             label="会议地点"
+            required
           >
-            <a-input
+            <a-input placeholder="会议地点" v-model="place" />
-              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="主持人"
+            required
           >
-            <a-input
+            <a-input placeholder="主持人" v-model="host" />
-              placeholder="主持人"
-              v-decorator="[
-                      'host',
-                      {
-                        rules: [
-                          { required: true, message: '主持人不能为空' },
-                          { whitespace: true, message: '主持人不能为空' },
-                          { max: 140, massage: '主持人最多140个字符' },
-                        ],
-                      },
-                    ]"
-            />
           </a-form-item>
           <!-- 参会人员 -->
           <a-form-item
@@ -71,7 +52,7 @@
             <quill-editor
               :max-size="maxSize"
               :placeholder="placeholderParticipants"
-              v-model="participants"
+              @changeInput="changeInput"
             />
           </a-form-item>
           <!-- 研讨内容 -->
@@ -83,7 +64,7 @@
             <quill-editor
               :max-size="maxSize"
               :placeholder="placeholderContent"
-              v-model="discussionContent"
+              @changeInput="changeInput"
             />
           </a-form-item>
           <!-- 会议纪要 -->
@@ -95,7 +76,7 @@
             <quill-editor
               :max-size="maxSize"
               :placeholder="placeholderMeeting"
-              v-model="meetingMinutes"
+              @changeInput="changeInput"
             />
           </a-form-item>
 
@@ -112,6 +93,8 @@
 import QuillEditor from 'components/QuillEditor/QuillEditor.vue';
 import moment from 'moment';
 import { saveConferenceRecords } from 'config/api';
+import { mapMutations } from 'vuex';
+import MeetingPreview from 'components/MeetingPreview/MeetingPreview.vue';
 
 const formItemLayout = {
   labelCol: { span: 4 },
@@ -120,7 +103,7 @@ const formItemLayout = {
 const tailItemLayout = { wrapperCol: { span: 18, offset: 4 } };
 export default {
   name: 'Meeting',
-  components: { QuillEditor },
+  components: { QuillEditor, MeetingPreview },
   data() {
     return {
       showVideo: false,
@@ -128,6 +111,8 @@ export default {
       tailItemLayout,
       form: this.$form.createForm(this, { name: 'page-add' }),
       rangeConfig: { rules: [{ type: 'array', required: true, message: '会议时间不能为空' }] },
+      place: '', // 会议地点
+      host: '', // 主持人
       participants: '', // 参会人员
       discussionContent: '', // 研讨内容
       meetingMinutes: '', // 会议纪要
@@ -137,41 +122,75 @@ export default {
       maxSize: 2048,
       placeholderContent: '请在此输入研讨内容...',
       placeholderMeeting: '请在此输入会议纪要...',
+      visible: false,
     };
   },
 
   methods: {
+    ...mapMutations('home', ['setPreviewInfo']),
     moment,
+
+    closeModal() {
+      this.visible = false;
+    },
+
     onChangeTime(dates, dateStrings) {
-      console.log('From: ', dates[0], ', to: ', dates[1]);
-      console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
       this.startTime = dateStrings[0];
       this.endTime = dateStrings[1];
     },
 
-    // 提交表单
+    changeInput(placeholder, value) {
+      if (placeholder === '请在此输入参会人员...') {
+        this.participants = value;
+      }
+      if (placeholder === '请在此输入研讨内容...') {
+        this.discussionContent = value;
+      }
+      if (placeholder === '请在此输入会议纪要...') {
+        this.meetingMinutes = value;
+      }
+    },
+
+    // 保存信息
     handleSubmit(e) {
       e.preventDefault();
       this.form.validateFieldsAndScroll(async (err, values) => {
         if (!err) {
           try {
-            const { host, place } = values;
+            const { host, place, startTime, endTime, participants, discussionContent, meetingMinutes } = this;
-            const { startTime, endTime, participants, discussionContent, meetingMinutes } = this;
+            const previewInfo = { host, place, startTime, endTime, participants, meetingMinutes, discussionContent };
-            const params = { param: { host, place, startTime, endTime, participants, meetingMinutes, discussionContent, taskId: '0' } };
+            // 提交表单
-            console.log('params: ', params);
+            const params = previewInfo;
-            const res = await saveConferenceRecords(params);
+            this.saveConferenceRecords(params);
-            const { data, msg, code } = res.data;
-            if (code === 200) {
-              this.$message.success('提交成功');
-            } else {
-              throw msg;
-            }
           } catch (error) {
             this.$message.error(error || '提交失败');
           }
         }
       });
     },
+
+    // 提交表单
+    async saveConferenceRecords(params) {
+      try {
+        const res = await saveConferenceRecords(params);
+        const { data, msg, code } = res.data;
+        if (code === 200) {
+          this.$message.success('提交成功');
+        } else {
+          throw msg;
+        }
+      } catch (error) {
+        this.$message.error(error || '提交失败');
+      }
+    },
+
+    // 预览
+    async openPreview() {
+      const { host, place, startTime, endTime, participants, discussionContent, meetingMinutes } = this;
+      const previewInfo = { host, place, startTime, endTime, participants, meetingMinutes, discussionContent };
+      await this.setPreviewInfo(previewInfo);
+      this.$refs.meetingPreview.openModal();
+    },
   },
 };
 </script>

src/views/MeetingPreview/MeetingPreview.vue

@@ -1,78 +0,0 @@
-<template>
-  <div>
-    <div class="fill-width">
-      <a-card :bordered="false" title="会议记录预览">
-        <div slot="extra">
-          <a-button @click="$router.push('/meeting')" type="primary">返回</a-button>
-        </div>
-        <a-list bordered class="metting">
-          <a-list-item>
-            <span class="font-bold mb-2">会议时间：</span>
-            {{ startTime }}至{{ endTime }}
-          </a-list-item>
-          <a-list-item>
-            <span class="font-bold mb-2">会议地点：</span>
-            {{ place }}
-          </a-list-item>
-          <a-list-item>
-            <span class="font-bold mb-2">主持人：</span>
-            {{ host }}
-          </a-list-item>
-          <a-list-item class="d-flex flex-column align-left">
-            <span class="font-bold 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 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 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%;
-  // font-size: 16px;
-}
-
-.metting >>> .ant-list-item {
-  padding-left: 16px;
-  padding-right: 16px;
-}
-</style>