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

会议纪要预览

master
lucky 5 years ago
parent
5cbf91e653
commit
c310af4c07
9 changed files with 211 additions and 109 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. 10
      package-lock.json
  2. 49
      src/common/portrait.styl
  3. 5
      src/components/BtnCom/BtnCon.vue
  4. 6
      src/components/QuillEditor/QuillEditor.vue
  5. 2
      src/main.js
  6. 4
      src/plugins/ant-design-vue.js
  7. 6
      src/router/index.js
  8. 166
      src/views/Meeting/Meeting.vue
  9. 72
      src/views/MeetingPreview/MeetingPreview.vue

10
package-lock.json
View File

@ -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"
}

49
src/common/portrait.styl
View File

@ -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%;
}

5
src/components/BtnCom/BtnCon.vue
View File

@ -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>

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

@ -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: '请输入链接地址:';
}

2
src/main.js
View File

@ -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';

4
src/plugins/ant-design-vue.js
View File

@ -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;

6
src/router/index.js
View File

@ -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({

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

@ -1,32 +1,36 @@
<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="[
<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
: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: [
@ -36,17 +40,17 @@
],
},
]"
/>
</a-form-item>
<!-- 主持人 -->
<a-form-item
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
label="主持人"
>
<a-input
placeholder="主持人"
v-decorator="[
/>
</a-form-item>
<!-- 主持人 -->
<a-form-item
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
label="主持人"
>
<a-input
placeholder="主持人"
v-decorator="[
'host',
{
rules: [
@ -56,37 +60,38 @@
],
},
]"
/>
</a-form-item>
<!-- 参会人员 -->
<a-form-item
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
label="参会人员"
>
<quill-editor :max-size="maxSize" :placeholder="placeholderParticipants" />
</a-form-item>
<!-- 研讨内容 -->
<a-form-item
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
label="研讨内容"
>
<quill-editor :max-size="maxSize" :placeholder="placeholderContent" />
</a-form-item>
<!-- 会议纪要 -->
<a-form-item
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
label="会议纪要"
>
<quill-editor :max-size="maxSize" :placeholder="placeholderMeeting" />
</a-form-item>
/>
</a-form-item>
<!-- 参会人员 -->
<a-form-item
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
label="参会人员"
>
<quill-editor :max-size="maxSize" :placeholder="placeholderParticipants" />
</a-form-item>
<!-- 研讨内容 -->
<a-form-item
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
label="研讨内容"
>
<quill-editor :max-size="maxSize" :placeholder="placeholderContent" />
</a-form-item>
<!-- 会议纪要 -->
<a-form-item
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
label="会议纪要"
>
<quill-editor :max-size="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>
<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>
</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>

72
src/views/MeetingPreview/MeetingPreview.vue
View File

@ -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>
Write Preview
Loading…
Cancel
Save