修改bug

src/api/common.js

@@ -3,7 +3,7 @@ import httpRequest from '@/utils/axios'
  * 操作日志
  */
 export function operateLog(params) {
-  const logMsg = `操作人：${params.user.nickname}，操作人id：${params.user.id}，操作：${params.type}`
+  const logMsg = `操作人：${params.user.nickname}，操作：${params.type}`
   const data = {
     detail: logMsg
   }

src/api/system.js

@@ -3,7 +3,7 @@ import httpRequest from '@/utils/axios'
  * 操作日志
  */
 export function operateLog(params) {
-  const logMsg = `操作人：${params.user.nickname}，操作人id：${params.user.id}，操作：${params.type}`
+  const logMsg = `操作人：${params.user.nickname}，操作：${params.type}`
   const data = {
     detail: logMsg
   }

src/components/MeetingSuccessDialog/index.vue

 <template>
-  <el-dialog :title="`会议号${details.meeting_code ? '：' + details.meeting_code : ''}`" :visible="dialogVisible" width="520" :close-on-click-modal="false" append-to-body center @close="dialogClose">
-    <el-form class="dialog-meeting-details" label-width="90px" ref="details">
+  <el-dialog class="meeting-success-dialog" :title="`会议号${details.meeting_code ? '：' + details.meeting_code : ''}`" :visible="dialogVisible" width="520" :close-on-click-modal="false" center @close="dialogClose">
+    <p style="padding-left:28px;margin-bottom:10px;" v-if="details.sso_user">{{details.sso_user.username}}邀请您参加腾讯会议</p>
+    <el-form class="dialog-meeting-details" label-width="100px" ref="details">
       <el-form-item label="会议主题:">
         {{details.subject}}
       </el-form-item>
       <el-form-item label="会议时间:">
-        {{details.start_time | timeFormat('{y}-{m}-{d} {h}:{i}')}} - {{details.end_time | timeFormat('{h}:{i}')}}（GMT+08:00)
+        {{details.start_time | timeFormat('{y}-{m}-{d} {h}:{i}')}} - {{details.end_time | timeFormat('{h}:{i}')}}（GMT+08:00)中国标准时间 - 北京
+        <template v-if="details.meeting_type === 1">
+          , {{details.recurring_rule.recurring_type | recurringTypeFilter}}
+          <template v-if="details.recurring_rule.recurring_type > 1">{{recurringDateShow}}</template>
+        </template>
       </el-form-item>
       <el-form-item label="会议链接:">
         {{details.join_url}}
@@ -13,9 +18,15 @@
       <el-form-item label="会议号:">
         {{details.meeting_code}}
       </el-form-item>
+      <el-form-item label="会议密码:" v-if="details.password">
+        {{details.password}}
+      </el-form-item>
       <el-form-item label="会议直播:" v-if="details.enable_live === 1">
         {{details.live_config.live_addr}}
       </el-form-item>
+      <el-form-item label="会议直播密码:" v-if="details.enable_live === 1 && details.live_config.live_password">
+        {{details.live_config.live_password}}
+      </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button size="mini" @click="copyText">复制文字</el-button>
@@ -38,10 +49,40 @@ export default {
       default: false
     }
   },
+  computed: {
+    recurringDateShow() {
+      if (this.details.recurring_rule.recurring_type === 4) {
+        return dateFormat(this.details.start_time, '({d}日)')
+      } else {
+        return dateFormat(this.details.start_time, '(周{a})')
+      }
+    }
+  },
   filters: {
     timeFormat(val, fmt) {
       fmt = fmt || '{y}年{m}月{d}日'
       return dateFormat(val, fmt)
+    },
+    recurringTypeFilter(val) {
+      let result = ''
+      switch (val) {
+        case 0:
+          result = '每天'
+          break
+        case 1:
+          result = '每个工作日'
+          break
+        case 2:
+          result = '每周'
+          break
+        case 3:
+          result = '每两周'
+          break
+        case 4:
+          result = '每月'
+          break
+      }
+      return result
     }
   },
   methods: {
@@ -78,22 +119,21 @@ export default {
 }
 </script>
 <style scoped>
-::v-deep.el-dialog__header{
+.meeting-success-dialog ::v-deep.el-dialog__header{
   padding-top:14px;
 }
-::v-deep.el-dialog__headerbtn{
+.meeting-success-dialog ::v-deep.el-dialog__headerbtn{
   top:12px;
   right:12px;
 }
-::v-deep.el-dialog__body{
+.meeting-success-dialog ::v-deep.el-dialog__body{
   padding:10px 0;
   margin:0 20px;
-  border: 1px solid #DBDBDB;
 }
-::v-deep.el-dialog__footer{
+.meeting-success-dialog ::v-deep.el-dialog__footer{
   padding-bottom:16px;
 }
-::v-deep.el-dialog .el-form-item{
-  margin:0;
+.meeting-success-dialog ::v-deep.el-dialog .el-form-item{
+  margin-bottom:10px;
 }
 </style>
\ No newline at end of file

src/components/Schedule/index.vue

@@ -369,10 +369,13 @@ export default {
 }
 .time-now span{
   color:#FD1E1E;
+  background-color:#fff;
+  padding:5px 0;
 }
 .time-now ::v-deep.el-divider{
   background-color:#FD0000;
-  margin:0
+  margin:0;
+  width:calc(100% + 2px);
 }
 .newPopoverBtn{
   position:fixed;

src/components/TableHandles/DialogCopyInvite.vue

@@ -12,9 +12,15 @@
     <el-form-item label="会议号:">
       {{details.meeting_code}}
     </el-form-item>
+    <el-form-item label="会议密码:" v-if="details.password">
+      {{details.password}}
+    </el-form-item>
     <el-form-item label="会议直播:" v-if="details.enable_live === 1">
       {{details.live_config.live_addr}}
     </el-form-item>
+    <el-form-item label="会议直播密码:" v-if="details.enable_live === 1 && details.live_config.live_password">
+      {{details.live_config.live_password}}
+    </el-form-item>
     <el-form-item label="手机拨号入会:" v-if="false">
       <p>+8675536550000,,526430840#(中国大陆）</p>
       <p>+85230018898,,526430840#(中国香港）</p>

src/components/TableHandles/DialogDetails.vue

@@ -85,7 +85,6 @@ export default {
       if (list && Array.isArray(list)) {
         list.forEach((it, index) => {
           if (it.download_address) {
-            console.log(it.download_address)
             // window.open(it.download_address, '_blank')
             setTimeout(() => {
               this.funDownload(it.download_address, it.download_address)
@@ -95,7 +94,7 @@ export default {
       }
     },
     funDownload(fileUrl, fileName) {
-      console.log(fileUrl)
+      // console.log(fileUrl)
       const elink = document.createElement('a')// 创建一个a标签
       elink.download = fileName;// 设置a标签的下载属性
       elink.style.display = 'none';// 将a标签设置为隐藏

src/components/TableHandles/index.vue

@@ -133,10 +133,10 @@ export default {
       this.fetchMeetingDetails()
     },
     handleLive() {
-      window.open(this.live_config.live_addr, '_blank');
+      window.open(this.rowData.live_config.live_addr, '_blank');
     },
     handleUpdate() {
-      this.$router.push({ path: '/meeting', query: { type: '2', meeting_id: this.rowData.meeting_id, sub_meeting_id: this.rowData.sub_meeting_id } })
+      this.$router.push({ path: '/meeting-update', query: { meeting_id: this.rowData.meeting_id, sub_meeting_id: this.rowData.sub_meeting_id } })
     },
     handleCancel() {
       this.$confirm('此操作将取消这场会议, 是否继续?', '提示', {
@@ -183,10 +183,12 @@ export default {
       } else {
         const list = await this.fetchMeetingRecordAddr()
         if (list && Array.isArray(list)) {
-          list.forEach(it => {
+          list.forEach((it, index) => {
             if (it.download_address) {
               // window.open(it.download_address, '_blank')
+              setTimeout(() => {
                 this.funDownload(it.download_address, it.download_address)
+              }, index * 1000)
             }
           })
         }
@@ -199,7 +201,7 @@ export default {
       elink.href = fileUrl;// 把之前处理好的地址赋给a标签的href
       document.body.appendChild(elink);// 将a标签添加到body中
       elink.click();// 执行a标签的点击方法
-      URL.revokeObjectURL(elink.href) // 下载完成释放URL 对象
+      // URL.revokeObjectURL(elink.href) // 下载完成释放URL 对象
       document.body.removeChild(elink)// 移除a标签
     },
     fetchStopMeeting() {

src/components/layout/header.vue

@@ -48,7 +48,7 @@ export default {
       this.$store.dispatch('app/toggleSideBar')
     },
     toMeeting() {
-      this.$router.push('/meeting')
+      this.$router.push('/meeting-create')
     },
     async logout() {
       await this.$store.dispatch('logout')

src/pages/calendar/day/components/NewPopover.vue

@@ -125,21 +125,6 @@ export default {
         live_subject: [{ validator: validateErrMsg }],
         live_summary: [{ validator: validateErrMsg }]
       },
-      // startDateOptions: {
-      //   disabledDate(time) {
-      //     return time.getTime() < Date.now() - DAY_TIMESTAMP;
-      //   }
-      // },
-      // startTimeOptions: {
-      //   start: getCurHalfHour('start'),
-      //   step: '00:30',
-      //   end: '23:30'
-      // },
-      // endTimeOptions: {
-      //   start: getCurHalfHour('end'),
-      //   step: '00:30',
-      //   end: '23:30'
-      // },
       details: {},
       dialogVisible: false
     }
@@ -275,7 +260,20 @@ export default {
       });
     },
     more() {
-      this.$router.push({ path: '/meeting', query: { type: '1', account: this.data.accountId, start: this.startTimestamp, end: this.endTimestamp } })
+      const query = {
+        account: this.data.accountId,
+        start: this.startTimestamp,
+        end: this.endTimestamp
+      }
+      if (this.form.subject) {
+        query.subject = this.form.subject
+      }
+      if (this.form.enable_live) {
+        query.enable_live = 1
+        this.form.live_subject && (query.live_subject = this.form.live_subject)
+        this.form.live_summary && (query.live_summary = this.form.live_summary)
+      }
+      this.$router.push({ path: '/meeting-account-create', query: query })
     },
     fetchCreateMeeting() {
       const form = this.form

src/pages/calendar/index.vue

@@ -13,10 +13,10 @@
           </div>
           <div class="status-filter">
             <el-radio-group v-model="filter.status">
-              <el-radio :label="9999">全部</el-radio>
-              <el-radio :label="1">进行中</el-radio>
-              <el-radio :label="0">未开始</el-radio>
-              <el-radio :label="2">已完成</el-radio>
+              <!-- <el-radio :label="9999" class="all">全部</el-radio> -->
+              <el-radio :label="1" class="start">进行中</el-radio>
+              <el-radio :label="0" class="not-started">未开始</el-radio>
+              <el-radio :label="2" class="end">已完成</el-radio>
             </el-radio-group>
           </div>
         </div>
@@ -210,29 +210,29 @@ h5{
   display:block;
   margin-bottom:10px;
 }
-.status-filter ::v-deep.el-radio:first-child .el-radio__input.is-checked .el-radio__inner{
+.status-filter ::v-deep.el-radio.all .el-radio__input.is-checked .el-radio__inner{
   border-color:#636363;
   background:#636363;
 }
-.status-filter ::v-deep.el-radio:nth-child(2) .el-radio__input.is-checked .el-radio__inner{
+.status-filter ::v-deep.el-radio.start .el-radio__input.is-checked .el-radio__inner{
   border-color:#409eff;
   background:#409eff;
 }
-.status-filter ::v-deep.el-radio:nth-child(3) .el-radio__input.is-checked .el-radio__inner{
+.status-filter ::v-deep.el-radio.not-started.el-radio__input.is-checked .el-radio__inner{
   border-color:#52B837;
   background:#52B837;
 }
-.status-filter ::v-deep.el-radio:last-child .el-radio__input.is-checked .el-radio__inner{
+.status-filter ::v-deep.el-radio.end.el-radio__input.is-checked .el-radio__inner{
   border-color:#BFBFBF;
   background:#BFBFBF;
 }
-.status-filter ::v-deep.el-radio:first-child .el-radio__input + .el-radio__label{
+.status-filter ::v-deep.el-radio.all .el-radio__input + .el-radio__label{
   color:#636363;
 }
-.status-filter ::v-deep.el-radio:nth-child(2) .el-radio__input + .el-radio__label{
+.status-filter ::v-deep.el-radio.start .el-radio__input + .el-radio__label{
   color:#409eff;
 }
-.status-filter ::v-deep.el-radio:nth-child(3) .el-radio__input + .el-radio__label{
+.status-filter ::v-deep.el-radio.not-started .el-radio__input + .el-radio__label{
   color:#52B837;
 }
 .status-filter ::v-deep.el-radio:last-child .el-radio__input + .el-radio__label{

src/pages/calendar/list/index.vue

 <template>
   <div class="list">
     <el-table :data="listData" style="width: 100%" height="calc(100% - 32px)" v-loading="loading">
-      <el-table-column label="会议时间" min-width="215" align="center">
+      <el-table-column label="会议时间" min-width="220" align="center">
         <template slot-scope="scope">
           <p style="color: #aeaeae">
             <span style="font-size: 18px; color: #606266">{{ scope.row.start_time | dateFormat('{d}') }}</span>
@@ -53,7 +53,7 @@
         </template>
       </el-table-column>
       <el-table-column prop="sso_user.nickname" label="创建人" min-width="100" align="center"></el-table-column>
-      <el-table-column label="操作" width="220" align="center">
+      <el-table-column label="操作" width="240" align="center">
         <template slot-scope="scope">
           <table-handles :rowData="scope.row" @refresh="fetchMeetingList"/>
         </template>
@@ -110,7 +110,7 @@ export default {
           result = '进行中'
           break
         case 2:
-          result = '已结束'
+          result = '已完成'
           break
       }
       return result

src/pages/meeting/index-test.vue → src/pages/meeting/index-old.vue

@@ -6,18 +6,18 @@
       <!-- <el-radio-button label="week">周</el-radio-button>
       <el-radio-button label="month">月</el-radio-button> -->
     </el-radio-group>
-    <tencent-meeting-test />
+    <tencent-meeting v-if="tabActive === 'tx'" />
   </div>
 </template>
 <script>
-import TencentMeetingTest from './tencent-meeting-test/index.vue'
+import TencentMeeting from './tencent-meeting/index.vue'
 export default {
   data() {
     return {
       tabActive: 'tx'
     }
   },
-  components: { TencentMeetingTest }
+  components: { TencentMeeting }
 }
 </script>
 <style scope>

src/pages/meeting/index.vue

 <template>
-  <div class="create-meeting">
+  <div class="meeting">
     <el-radio-group v-model="tabActive" size="mini" style="margin:14px 0 10px 40px;">
       <el-radio-button label="tx">腾讯</el-radio-button>
       <el-radio-button label="cc">cc</el-radio-button>
       <!-- <el-radio-button label="week">周</el-radio-button>
       <el-radio-button label="month">月</el-radio-button> -->
     </el-radio-group>
-    <tencent-meeting v-if="tabActive === 'tx'" />
+    <tencent-meeting v-if="tabActive === 'tx'"/>
   </div>
 </template>
 <script>
@@ -21,7 +21,7 @@ export default {
 }
 </script>
 <style scope>
-.create-meeting{
+.meeting{
   height:100%;
 }
 </style>
\ No newline at end of file

src/pages/meeting/tencent-meeting-old/index.vue

+<template>
+  <div class="tx-meeting-container">
+    <div class="inner">
+      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="会议主题" prop="subject">
+          <el-input v-model="form.subject" size="small" />
+        </el-form-item>
+        <el-form-item label="开始时间" required>
+          <el-col :span="11">
+            <el-form-item prop="startDate">
+              <el-date-picker
+                v-model="form.startDate"
+                type="date"
+                placeholder="选择日期"
+                style="width: 100%"
+                size="small"
+                :clearable="timerClear"
+                :editable="timerClear"
+                :picker-options="startDateOptions"
+                @change="startDateChange"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="2" class="line">-</el-col>
+          <el-col :span="11">
+            <el-form-item prop="startTime">
+              <el-time-select
+                v-model="form.startTime"
+                style="width: 100%"
+                :picker-options="startTimeOptions"
+                placeholder="选择时间"
+                size="small"
+                :clearable="timerClear"
+                :editable="timerClear"
+                @change="startTimeChange"
+              />
+            </el-form-item>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="结束时间" required>
+          <el-col :span="11">
+            <el-form-item prop="endDate">
+              <el-date-picker
+                v-model="form.endDate"
+                type="date"
+                placeholder="选择日期"
+                style="width: 100%"
+                size="small"
+                :clearable="timerClear"
+                :editable="timerClear"
+                :picker-options="endDateOptions"
+                @change="endDateChange"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="2" class="line">-</el-col>
+          <el-col :span="11">
+            <el-form-item prop="endTime">
+              <el-time-select
+                v-model="form.endTime"
+                style="width: 100%"
+                :picker-options="endTimeOptions"
+                placeholder="选择时间"
+                size="small"
+                :clearable="timerClear"
+                :editable="timerClear"
+              />
+            </el-form-item>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="时区" required>
+          <el-col>
+            <el-select style="width: 100%" v-model="form.timezone" placeholder="选择时区" size="small">
+              <el-option label="(GMT+8:00)中国标准时间-北京" value="beijing" />
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="周期会议">
+          <el-switch v-model="form.meeting_type" :active-value="1" :inactive-value="0" />
+          <p v-show="form.meeting_type">{{recurringTypeOptions[form.recurring_type]}}</p>
+          <p v-show="form.meeting_type" style="line-height: 24px;color:#999;">结束于{{getCycleMeetingEndDate}} {{form.until_count}}场会议</p>
+        </el-form-item>
+        <el-form-item label="重复频率" v-if="form.meeting_type" required>
+          <el-col :span="11">
+            <el-select
+              style="width: 100%"
+              v-model="form.recurring_type"
+              placeholder="选择重复频率"
+              size="small"
+              @change="repaeatRateChange"
+            >
+              <el-option :label="item" :value="index" v-for="(item, index) in recurringTypeOptions" :key="index"/>
+              <!-- <el-option label="每个工作日" :value="1" />
+              <el-option label="每周" :value="2" />
+              <el-option label="每两周" :value="3" />
+              <el-option label="每月" :value="4" /> -->
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="结束重复" v-if="form.meeting_type" required>
+          <el-col :span="11">
+            <el-select style="width: 100%" v-model="form.until_type" placeholder="选择时区" size="small">
+              <el-option label="结束于某天" :value="0" />
+              <el-option label="限制会议次数" :value="1" />
+            </el-select>
+          </el-col>
+          <el-col :span="2" class="line">-</el-col>
+          <el-col :span="11">
+            <el-date-picker
+              v-if="form.until_type === 0"
+              v-model="getCycleMeetingEndDate"
+              type="date"
+              placeholder="选择结束日期"
+              style="width: 100%"
+              size="small"
+              :clearable="timerClear"
+              :editable="timerClear"
+              :picker-options="cycleMeetingEndDateOptions"
+            />
+            <el-input-number v-else v-model="form.until_count" :min="1" :max="50" size="small"></el-input-number>
+          </el-col>
+        </el-form-item>
+        <!-- <el-form-item label="指定主持人">
+          <el-col :span="11">
+            <el-select style="width:100%" v-model="form.moderator" placeholder="选择主持人" size="small">
+              <el-option :label="user.username" :value="user.id" v-for="user in userList" :key="user.id" />
+            </el-select>
+          </el-col>
+        </el-form-item> -->
+        <el-form-item label="指定会议管理员">
+          <p style="line-height:24px;">（会议管理员有修改会议，复制、取消会议等所有管理本次会议的权限）</p>
+          <el-col :span="8">
+            <el-dropdown style="width:100%;"  @command="(val) => searchType = val">
+              <el-button size="small" style="width:calc(100% - 5px);">
+                {{searchTypeOptions[searchType]}}<i class="el-icon-arrow-down el-icon--right"></i>
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="key" v-for="(value, key) in searchTypeOptions" :key="key">{{value}}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-col>
+          <el-col :span="16">
+            <el-select
+              style="width: 100%"
+              v-model="form.managers"
+              placeholder="请输入关键字搜索"
+              size="small"
+              multiple
+              filterable
+              remote
+              :remote-method="fetchUserList"
+              :loading="searchUsersloading"
+            >
+              <el-option :label="user.nickname" :value="user.id" v-for="user in userList" :key="user.id" >
+                <span style="float: left">{{ user.nickname }}</span>
+                <span style="float: right; color: #8492a6; font-size: 13px; margin:0 20px 0 10px;">{{ user.id }}</span>
+              </el-option>
+            </el-select>
+          </el-col>
+          <p class="search-keywords-checked" v-if="searchKeywordsCheckMsg">{{searchKeywordsCheckMsg}}</p>
+        </el-form-item>
+        <el-form-item label="会议设置">
+          <el-checkbox style="width: 120px" v-model="form.hasPwd">开启会议密码</el-checkbox>
+          <el-input
+            style="width: 170px"
+            v-model="form.password"
+            v-if="form.hasPwd"
+            placeholder="请输入4-6位数字密码"
+            type="password"
+            suffix-icon="el-icon-lock"
+            size="small"
+          >
+          </el-input>
+          <el-checkbox style="display: block" v-model="form.auto_in_waiting_room">开启等候室</el-checkbox>
+          <el-checkbox style="display: block" v-model="form.allow_in_before_host"
+            >准许成员在主持人开始前进入会议</el-checkbox
+          >
+          <el-checkbox style="display: block" v-model="form.mute_enable_join">入会自动静音</el-checkbox>
+          <el-checkbox v-model="form.auto_record">自动录制会议</el-checkbox>
+          <el-radio-group v-model="form.auto_record_type" v-if="form.auto_record">
+            <el-radio label="local">本地录制</el-radio>
+            <el-radio label="cloud">云录制</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="会议直播">
+          <el-checkbox v-model="form.enable_live">开启会议直播（用于分享给观看直播的用户）</el-checkbox>
+        </el-form-item>
+        <el-form-item label="直播主题" v-if="form.enable_live" :required="form.enable_live" prop="live_subject">
+          <el-input v-model="form.live_subject" size="small" />
+        </el-form-item>
+        <el-form-item label="直播简介" v-if="form.enable_live" :required="form.enable_live" prop="live_summary">
+          <el-input type="textarea" v-model="form.live_summary"></el-input>
+        </el-form-item>
+        <el-form-item label="直播设置" v-if="form.enable_live" style="margin-bottom: 0">
+          <el-checkbox style="width: 150px" v-model="form.enable_live_password">开启观看直播密码</el-checkbox>
+          <el-input
+            style="width: 170px"
+            v-model="form.live_password"
+            v-if="form.enable_live_password"
+            placeholder="请输入4-6位数字密码"
+            type="password"
+            suffix-icon="el-icon-lock"
+            size="small"
+          />
+        </el-form-item>
+        <el-form-item label="" v-if="form.enable_live">
+          <el-checkbox v-model="form.enable_live_im">准许观众讨论</el-checkbox>
+        </el-form-item>
+        <el-form-item style="padding-left: 100px">
+          <el-button type="primary" @click="submitForm('ruleForm')" size="mini">{{isUpdate ? '修改会议' : '立即创建'}}</el-button>
+          <el-button @click="resetForm('ruleForm')" size="mini">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <div class="right-container" v-if="showSchedule">
+        <div class="title">{{ form.startDate | timeFormat }} {{ form.startDate | timeFormat('星期{a}') }}</div>
+        <schedule :options="options" :data="schedule" :date="form.startDate" />
+        <div class="pre-time-range" :style="{ top: getTop, height: getHeight }"></div>
+      </div>
+    </div>
+    <meeting-success-dialog :dialogVisible.sync="dialogVisible" :details="details"/>
+  </div>
+</template>
+<script>
+import Schedule from '@/components/Schedule'
+import MeetingSuccessDialog from '@/components/MeetingSuccessDialog/index'
+import {
+  timeTrans,
+  dateFormat,
+  getYMDByDate,
+  getTimestampYMD,
+  computedDateByRateTimes,
+  computedTimesByRateDate,
+  getCurHalfHour,
+  isSameDate
+} from '@/utils/dateAlgs'
+import { searchUserList, createMeeting, operateLog, getMeetingDetails, getNonpagedMeetingList, updateMeeting } from '@api/common'
+const DAY_TIMESTAMP = 8.64e7
+const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
+const EMAIL_REG = /^[A-Za-z0-9]+([_.][A-Za-z0-9]+)*@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/
+export default {
+  data() {
+    const now = new Date()
+    const nowDate = getYMDByDate(now)
+    const startDateChecked = (rule, value, callback) => {
+      if (value) {
+        const timestamp = Date.parse(value)
+        if (timestamp < Date.now() - DAY_TIMESTAMP) {
+          callback(new Error('开始时间必须大于当前时间'))
+        } else {
+          callback()
+        }
+      }
+    }
+    const endDateChecked = (rule, value, callback) => {
+      if (value) {
+        if (this.endTimestamp < this.startTimestamp) {
+          callback(new Error('结束时间必须大于开始时间'))
+        } else if (this.endTimestamp > this.startTimestamp + DAY_TIMESTAMP) {
+          callback(new Error('会议时间不能超过24小时'))
+        } else {
+          callback()
+        }
+      }
+    }
+    const validateErrMsg = (rule, value, callback) => {
+      // 当开启会议直播时，启用验证,处理callback
+      if (this.form.enable_live && !value) {
+        const errMsg = rule.field === 'live_subject' ? '请输入直播主题' : '请输入直播简介'
+        callback(new Error(errMsg))
+      } else {
+        callback()
+      }
+    }
+    return {
+      timerClear: false,
+      time: '',
+      recurringTypeOptions: ['每天', '每个工作日', '每周', '每两周', '每月'],
+      form: {
+        subject: '',
+        startDate: nowDate,
+        startTime: getCurHalfHour('start'),
+        endDate: nowDate,
+        endTime: getCurHalfHour('end'),
+        timezone: 'beijing',
+        meeting_type: 0,
+        recurring_type: 0,
+        until_type: 0,
+        until_date: '',
+        until_count: 7,
+        managers: [],
+        hasPwd: false,
+        password: '',
+        auto_in_waiting_room: false,
+        allow_in_before_host: true,
+        auto_record: true,
+        auto_record_type: 'cloud',
+        mute_enable_join: false,
+        enable_live: false,
+        live_subject: '',
+        live_summary: '',
+        enable_live_password: false,
+        live_password: '',
+        enable_live_im: false
+      },
+      rules: {
+        subject: [{ required: true, message: '请填写会议主题', trigger: 'blur' }],
+        startDate: [
+          { type: 'date', required: true, message: '请选择开始日期', trigger: 'change' },
+          { type: 'date', validator: startDateChecked, trigger: 'change' }
+        ],
+        startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
+        endDate: [{ type: 'date', required: true, message: '请选择结束日期', trigger: 'change' }],
+        endTime: [
+          { required: true, message: '请选择结束时间', trigger: 'change' },
+          { validator: endDateChecked, trigger: 'change' }
+        ],
+        moderator: [{ required: true, message: '请选择主持人', trigger: 'change' }],
+        live_subject: [{ validator: validateErrMsg }],
+        live_summary: [{ validator: validateErrMsg }]
+      },
+      cycleMeetingEndDateOptions: {
+        disabledDate: time => {
+          let flag = false
+          switch (this.form.recurring_type) {
+            case 0: {
+              break
+            }
+            case 1: {
+              if (time.getDay() === 5 || time.getDay() === 6) flag = true
+              break
+            }
+            case 2: {
+              const startDate = timeTrans(this.form.startDate)
+              if (startDate.getDay() !== time.getDay() || getTimestampYMD(time) < getTimestampYMD(startDate)) flag = true
+              break
+            }
+            case 3: {
+              const startDate = timeTrans(this.form.startDate)
+              const disabledDay = ((getTimestampYMD(time) - getTimestampYMD(startDate)) / (DAY_TIMESTAMP * 7)) % 2 !== 0
+              if (disabledDay || getTimestampYMD(time) < getTimestampYMD(startDate)) flag = true
+              break
+            }
+            case 4: {
+              const startDate = timeTrans(this.form.startDate)
+              const day = startDate.getDate()
+              const targetDay = time.getDate()
+              let disabledDay = false
+              if (day > 28) {
+                const year = time.getFullYear()
+                const month = time.getMonth() + 1
+                const targetMDays = new Date(year, month, 0).getDate()
+                if (targetDay !== targetMDays) disabledDay = true
+              } else if (startDate.getDate() !== targetDay) {
+                disabledDay = true
+              }
+              if (disabledDay || getTimestampYMD(time) < getTimestampYMD(startDate)) flag = true
+              break
+            }
+          }
+          return flag
+        }
+      },
+      userList: [],
+      searchType: 'username',
+      searchTypeOptions: {
+        username: '通过用户名搜索',
+        nickname: '通过昵称搜索',
+        email: '通过邮箱搜索',
+        mobile: '通过手机号搜索',
+        id: '通过ID搜索'
+      },
+      searchKeywordsCheckMsg: '',
+      searchUsersloading: false,
+      showSchedule: false,
+      options: {
+        multi: false, // 是否为多日程
+        start: 0, // init number 0-23
+        end: 24, // init number 1-24且end>start
+        step: 60, // 只接收15, 30, 60三种步伐
+        lineHeight: 40, // init number 时间线间的高度
+        nowBeforeDisabled: true,
+        readonly: true,
+        popoverPos: 'bottom'
+      },
+      schedule: {
+        userid: '',
+        events: []
+      },
+      dialogVisible: false,
+      details: {},
+      isUpdate: false,
+      userid: ''
+    }
+  },
+  computed: {
+    user() {
+      return this.$store.getters.user
+    },
+    getTop() {
+      const timeRange = this.startTimestamp - this.startDotTimestamp
+      const top = timeRange / ((60 * 1000 * this.options.step) / this.options.lineHeight)
+      return top + 56 + 'px'
+    },
+    getHeight() {
+      const start = timeTrans(this.startTimestamp)
+      let end = timeTrans(this.endTimestamp)
+      if (!isSameDate(start, end)) {
+        end = new Date(start.getFullYear(), start.getMonth(), start.getDate(), 24, 0, 0)
+      }
+      const timeRange = end.getTime() - start.getTime()
+      const h = timeRange / ((60 * 1000 * this.options.step) / this.options.lineHeight)
+      return h - 2 + 'px'
+    },
+    startDotTimestamp() {
+      const date = this.form.startDate
+      const startHour = parseInt(this.options.start)
+      return new Date(date.getFullYear(), date.getMonth(), date.getDate(), startHour, 0, 0).getTime()
+    },
+    startTimestamp() {
+      return this.getFullDateTime(this.form.startDate, this.form.startTime).getTime()
+    },
+    endTimestamp() {
+      return this.getFullDateTime(this.form.endDate, this.form.endTime).getTime()
+    },
+    getCycleMeetingEndDate: {
+      get: function () {
+        const startDate = this.form.startDate ? this.form.startDate : Date.now()
+        return computedDateByRateTimes(startDate, this.form.until_count, this.form.recurring_type)
+      },
+      set: function (newValue) {
+        const times = computedTimesByRateDate(this.form.startDate, newValue, this.form.recurring_type)
+        this.form.until_count = times
+      }
+    },
+    startDateOptions() {
+      return {
+        disabledDate(time) {
+          return time.getTime() < Date.now() - DAY_TIMESTAMP
+        }
+      }
+    },
+    startTimeOptions() {
+      const date = this.form.startDate
+      const options = {
+        start: '00:00',
+        step: '00:30',
+        end: '23:30'
+      }
+      if (date.getTime() <= Date.now()) {
+        options.start = getCurHalfHour('start')
+      }
+      return options
+    },
+    endDateOptions() {
+      const _startDate = this.form.startDate
+      return {
+        disabledDate(time) {
+          return (
+            getTimestampYMD(time) < getTimestampYMD(_startDate) ||
+            getTimestampYMD(time) > getTimestampYMD(_startDate) + DAY_TIMESTAMP
+          )
+        }
+      }
+    },
+    endTimeOptions() {
+      const { startDate, endDate, startTime } = this.form
+      const fullDate = this.getFullDateTime(startDate, startTime)
+      const minutes = fullDate.getMinutes()
+      let options
+      if (this.isSameDate(startDate, endDate)) {
+        // 结束日期和开始日期同一天，会议最低半小时，则向后推半小时
+        const _date = fullDate.setMinutes(minutes + 30)
+        const startTime = dateFormat(_date, '{h}:{i}')
+        options = {
+          start: startTime,
+          step: '00:30',
+          end: '23:30'
+        }
+      } else {
+        // 结束时间和开始时间不能超过24小时，相隔一天，则向前推半小时
+        const _date = fullDate.setMinutes(minutes - 30)
+        const endTime = dateFormat(_date, '{h}:{i}')
+        options = {
+          start: '00:00',
+          step: '00:30',
+          end: endTime
+        }
+      }
+      return options
+    }
+  },
+  filters: {
+    timeFormat(val, fmt) {
+      fmt = fmt || '{y}年{m}月{d}日'
+      return dateFormat(val, fmt)
+    }
+  },
+  components: { Schedule, MeetingSuccessDialog },
+  created() {
+    // this.getUserList()
+  },
+  watch: {
+    getCycleMeetingEndDate: {
+      handler: function (nv, ov) {
+        this.form.until_date = Date.parse(nv)
+      },
+      immediate: true
+    },
+    $route: {
+      handler: function () {
+        const query = this.$route.query
+        if (query.type === '1') {
+          this.showSchedule = true
+          this.form.startDate = getYMDByDate(query.start)
+          this.form.startTime = dateFormat(query.start, '{h}:{i}')
+          this.form.endDate = getYMDByDate(query.end)
+          this.form.endTime = dateFormat(query.end, '{h}:{i}')
+          this.schedule.userid = query.account
+          this.fetchMeetingList()
+        } else if (query.type === '2') {
+          const params = {
+            meeting_id: query.meeting_id,
+            sub_meeting_id: query.sub_meeting_id
+          }
+          this.isUpdate = true
+          this.getDetailsData(params)
+        } else {
+          this.showSchedule = false
+        }
+      },
+      immediate: true
+    },
+    dialogVisible: {
+      handler: function (nv) {
+        if (!nv) {
+          this.goList()
+        }
+      }
+    }
+  },
+  methods: {
+    startDateChange(val) {
+      this.form.endDate = val
+      this.startTimeChange()
+      if (this.showSchedule) {
+        this.fetchMeetingList()
+      }
+    },
+    startTimeChange() {
+      const { startDate, endDate } = this.form
+      if (this.isSameDate(startDate, endDate)) {
+        this.form.endTime = this.endTimeOptions.start
+      } else {
+        this.form.endTime = this.endTimeOptions.end
+      }
+    },
+    endDateChange() {
+      this.startTimeChange()
+    },
+    repaeatRateChange(val) {
+      if (val === 'everyworkday' && this.form.endType === 'endOneday') {
+        this.form.periodicTimes = 7
+      }
+    },
+    getFullDateTime(date, timeStr) {
+      const hmArr = timeStr.split(':')
+      const h = parseInt(hmArr[0])
+      const s = parseInt(hmArr[1])
+      return new Date(date.getFullYear(), date.getMonth(), date.getDate(), h, s, 0)
+    },
+    isSameDate(start, end) {
+      return dateFormat(start, '{y}-{m}-{d}') === dateFormat(end, '{y}-{m}-{d}')
+    },
+    autoRecordChange(val) {
+      this.auto_record_type = val ? 'cloud' : 'none'
+    },
+    // copyText() {
+    //   const text = this.$refs.details.$el.innerText
+    //   this.copyFn(text)
+    // },
+    // copyMeetingLink() {
+    //   this.copyFn(this.details.join_url)
+    // },
+    // copyLiveLink() {
+    //   this.copyFn(this.details.live_config.live_addr)
+    // },
+    // copyFn(val) {
+    //   if (!val) return
+    //   const dom = document.createElement('textarea')
+    //   document.body.appendChild(dom)
+    //   dom.value = val
+    //   dom.select(); // 选择对象
+    //   document.execCommand('Copy');
+    //   this.$message({
+    //     message: '复制成功！',
+    //     type: 'success'
+    //   })
+    //   document.body.removeChild(dom)
+    // },
+    // joinMeeting() {
+    //   window.open(this.details.join_url, '_blank');
+    // },
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          if (this.isUpdate) {
+            this.fetchUpdateMeeting()
+          } else {
+            this.fetchCreateMeeting()
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+    },
+    goList() {
+      this.$router.push('/calendar')
+    },
+    async getDetailsData(params) {
+      const details = await this.fetchMeetingDetails(params)
+      this.details = details
+      const start = timeTrans(details.start_time)
+      const end = timeTrans(details.end_time)
+      this.userid = details.userid
+      this.form.subject = details.subject
+      this.form.startDate = getYMDByDate(start)
+      this.form.startTime = dateFormat(start, '{h}:{i}')
+      this.form.endDate = getYMDByDate(end)
+      this.form.endTime = dateFormat(end, '{h}:{i}')
+      this.form.meeting_type = details.meeting_type
+      if (details.meeting_type === 1) {
+        const recurringRule = details.recurring_rule
+        this.form.recurring_type = recurringRule.recurring_type
+        this.form.until_type = recurringRule.until_type
+        if (recurringRule.until_type === 0) {
+          this.form.until_date = timeTrans(recurringRule.until_date)
+        } else {
+          this.form.until_count = recurringRule.until_count
+        }
+      }
+      if (details.password) {
+        this.form.password = details.password
+        this.form.hasPwd = true
+      }
+      const setting = details.settings
+      this.form.auto_in_waiting_room = setting.auto_in_waiting_room
+      this.form.allow_in_before_host = setting.allow_in_before_host
+      this.form.auto_record_type = setting.auto_record_type
+      if (setting.auto_record_type !== 'none') {
+        this.form.auto_record = true
+      }
+      this.form.mute_enable_join = setting.mute_enable_join
+      if (details.enable_live === 1) {
+        const liveConfig = details.live_config
+        this.form.live_subject = liveConfig.live_subject
+        this.form.live_summary = liveConfig.live_summary
+        this.form.enable_live_password = Boolean(liveConfig.live_password)
+        this.form.live_password = liveConfig.live_password
+        this.form.enable_live_im = liveConfig.enable_live_im
+        this.form.enable_live = true
+      } else {
+        this.form.enable_live = false
+      }
+      if (Array.isArray(details.managers) && details.managers.length > 0) {
+        const _managers = details.managers.map(it => it.user_id)
+        this.form.managers = _managers;
+        this.userList = details.managers
+      }
+    },
+    async showMeetingDetails(obj) {
+      const loading = this.$loading({
+        lock: true,
+        text: '获取腾讯会议详情，请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      const params = {
+        meeting_id: obj.meeting_id,
+        sub_meeting_id: (obj.sub_meetings && obj.sub_meetings.length > 0) ? obj.sub_meetings[0].sub_meeting_id : undefined
+      }
+      const details = await this.fetchMeetingDetails(params)
+      loading.close()
+      this.details = details
+      this.dialogVisible = true
+    },
+    fetchMeetingList() {
+      const date = this.form.startDate
+      const start = dateFormat(date)
+      const end = dateFormat(new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1))
+      const params = {
+        userid: this.schedule.userid,
+        start_time: start,
+        end_time: end
+      }
+      getNonpagedMeetingList(params).then((res) => {
+        if (res.code === 0 && res.data && res.data.list) {
+          console.log(res.data.list)
+          this.schedule.events = res.data.list
+        } else {
+        }
+      }).catch()
+    },
+    fetchUserList(val) {
+      this.searchKeywordsCheckMsg = ''
+      if (!val) return
+      if (this.searchType === 'email' && !EMAIL_REG.test(val)) {
+        this.searchKeywordsCheckMsg = '邮箱格式错误'
+        this.userList = []
+      } else if (this.searchType === 'mobile' && !MOBILE_REG.test(val)) {
+        this.searchKeywordsCheckMsg = '手机号格式错误'
+        this.userList = []
+      } else {
+        const params = {
+          [this.searchType]: val
+        };
+        this.searchKeywordsCheckMsg = ''
+        this.searchUsersloading = true
+        searchUserList(params)
+          .then(res => {
+            this.searchUsersloading = false
+            if (res.data && Array.isArray(res.data.items)) {
+              this.userList = res.data.items
+            }
+          })
+          .catch(() => {})
+      }
+    },
+    getSubmitParams() {
+      const form = this.form
+      const params = {
+        instanceid: 1,
+        userid: this.showSchedule ? this.schedule.userid : undefined,
+        subject: form.subject,
+        start_time: dateFormat(this.startTimestamp),
+        end_time: dateFormat(this.endTimestamp),
+        password: form.password,
+        meeting_type: form.meeting_type,
+        settings: {
+          mute_enable_join: form.mute_enable_join,
+          auto_in_waiting_room: form.auto_in_waiting_room,
+          allow_in_before_host: form.allow_in_before_host,
+          auto_record_type: form.auto_record ? form.auto_record_type : 'none'
+        },
+        enable_live: form.enable_live,
+        managers: form.managers.length > 0 ? form.managers : [this.user.id]
+      }
+      if (form.meeting_type === 1) {
+        params.recurring_rule = {
+          recurring_type: form.recurring_type,
+          until_type: form.until_type,
+          until_date: form.until_type ? undefined : parseInt(form.until_date / 1000),
+          until_count: form.until_type ? form.until_count : undefined
+        }
+      }
+      if (form.enable_live) {
+        params.live_config = {
+          live_subject: form.live_subject,
+          live_summary: form.live_summary,
+          enable_live_password: form.enable_live_password,
+          live_password: form.enable_live_password ? form.live_password : undefined,
+          enable_live_im: form.enable_live_im
+        }
+      }
+      return params
+    },
+    fetchUpdateMeeting() {
+      const params = this.getSubmitParams()
+      params.meeting_id = this.$route.query.meeting_id
+      params.userid = this.userid
+      const loading = this.$loading({
+        lock: true,
+        text: '修改腾讯会议中，请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      updateMeeting(params).then(res => {
+        loading.close()
+        if (res.code === 0 && res.data && res.data.status) {
+          operateLog({ type: `修改会议，被修改会议meeting_code：${this.details.meeting_code}`, user: this.user })
+          this.$message.success('修改腾讯会议成功')
+          console.log(this.details)
+          console.log(params)
+          this.details.subject = params.subject
+          this.details.start_time = timeTrans(params.start_time)
+          this.details.end_time = timeTrans(params.end_time)
+          this.dialogVisible = true
+        } else {
+          this.$message.error(res.message || res.msg || '创建腾讯会议失败')
+        }
+      })
+    },
+    fetchCreateMeeting() {
+      const params = this.getSubmitParams()
+      const loading = this.$loading({
+        lock: true,
+        text: '创建腾讯会议中，请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      createMeeting(params).then(res => {
+        loading.close()
+        if (res.code === 0 && res.data.id) {
+          operateLog({ type: `创建会议，被创建会议meeting_code：${res.data.meeting_code}`, user: this.user })
+          this.$message.success('创建腾讯会议成功')
+          this.showMeetingDetails(res.data)
+        } else {
+          this.$message.error(res.message || res.msg || '创建腾讯会议失败')
+        }
+      })
+    },
+    fetchMeetingDetails(params) {
+      return new Promise((resolve, reject) => {
+        getMeetingDetails(params).then(res => {
+          if (res.code === 0 && res.data.id) {
+            resolve(res.data)
+          } else {
+            reject(res)
+          }
+        }).catch((err) => reject(err))
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+.tx-meeting-container {
+  overflow-y: auto;
+  height: calc(100% - 52px);
+}
+.inner {
+  display: flex;
+  background: #fff;
+  margin: 0 15px;
+  border-radius: 4px;
+  padding-bottom:10px;
+}
+.el-form {
+  flex: 1;
+  max-width: 600px;
+  padding:20px 0 10px;
+}
+.line {
+  text-align: center;
+}
+.right-container {
+  position: relative;
+  width: 45%;
+  box-sizing: border-box;
+  padding-left: 20px;
+}
+.right-container .title {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  line-height: 50px;
+  font-size: 16px;
+  text-align: center;
+}
+.pre-time-range {
+  position: absolute;
+  left: 70px;
+  width: calc(100% - 70px);
+  background: #52b837;
+}
+.search-keywords-checked{
+  color: #F56C6C;
+  font-size: 12px;
+  line-height: 1;
+  padding-top: 4px;
+  position: absolute;
+  top: 100%;
+  right: 0;
+}
+.right-container .el-scrollbar ::v-deep.el-scrollbar__wrap {
+  /* overflow:hidden; */
+}
+.tx-meeting-container ::v-deep.el-dialog__header{
+  padding-top:14px;
+}
+.tx-meeting-container ::v-deep.el-dialog__headerbtn{
+  top:12px;
+  right:12px;
+}
+.tx-meeting-container ::v-deep.el-dialog__body{
+  padding:10px 0;
+  margin:0 20px;
+  border: 1px solid #DBDBDB;
+}
+.tx-meeting-container ::v-deep.el-dialog__footer{
+  padding-bottom:16px;
+}
+.tx-meeting-container ::v-deep.el-dialog .el-form-item{
+  margin:0;
+}
+</style>

src/pages/meeting/tencent-meeting-test/index.vue

-<template>
-  <component v-bind:is="currentPage"></component>
-</template>
-<script>
-import PageCreate from './page-create'
-import PageAccountCreate from './page-account-create'
-import PageUpdate from './page-update'
-export default {
-  data () {
-    return {
-      currentPage: 'PageCreate'
-    }
-  },
-  components: { PageCreate, PageAccountCreate, PageUpdate },
-  watch: {
-    $route: {
-      handler: function (nv, ov) {
-        const query = this.$route.query
-        console.log(query)
-        if (query.type === '1') {
-          this.currentPage = 'PageAccountCreate'
-        } else if (query.type === '2') {
-          console.log('edit')
-          this.currentPage = 'PageUpdate'
-        } else {
-          this.currentPage = 'PageCreate'
-        }
-      },
-      immediate: true
-    }
-  }
-}
-</script>
\ No newline at end of file

src/pages/meeting/tencent-meeting-test/page-account-create.vue

-<template>
-  <div>同一账号下创建</div>
-</template>
-<script>
-export default ({
-  data () {
-    return {}
-  }
-})
-</script>
-<style scoped>
-</style>
\ No newline at end of file

src/pages/meeting/tencent-meeting-test/page-create.vue

-<template>
-  <div class="create">
-    <div class="inner">
-      <meeting-form></meeting-form>
-    </div>
-  </div>
-</template>
-<script>
-import MeetingForm from './components/MeetingForm'
-export default ({
-  data () {
-    return {}
-  },
-  components: { MeetingForm }
-})
-</script>
-<style scoped>
-.create{
-  overflow-y: auto;
-  height: calc(100% - 52px);
-}
-.inner {
-  background: #fff;
-  margin: 0 15px;
-  border-radius: 4px;
-  padding-bottom:10px;
-}
-</style>

src/pages/meeting/tencent-meeting-test/page-update.vue

-<template>
-  <div>修改</div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      obj: {
-        timestamp: 1618998029,
-        nonce: 'rgHMrr7Bg',
-        signature: 'UG7wBenexQhiuD2wpCwuxkU0jqcj006d',
-        instanceid: 1,
-        userid: '6653195831513972736',
-        subject: 'sewe',
-        start_time: '2021-04-21 17:30:00',
-        end_time: '2021-04-21 18:00:00',
-        password: '',
-        meeting_type: 1,
-        recurring_rule: {
-          recurring_type: 0,
-          until_type: 1,
-          until_count: 2
-        },
-        settings: {
-          mute_enable_join: false,
-          auto_in_waiting_room: false,
-          allow_in_before_host: true,
-          auto_record_type: 'none'
-        },
-        enable_live: 0,
-        live_config: {
-          live_subject: '',
-          live_summary: '',
-          enable_live_password: false,
-          enable_live_im: false
-        },
-        managers: ['6775725014348988416'],
-        meeting_id: '8343776720283269132'
-      }
-    }
-  }
-}
-</script>
-<style scoped>
-</style>
\ No newline at end of file

src/pages/meeting/tencent-meeting-test/components/MeetingForm.vue → src/pages/meeting/tencent-meeting/components/MeetingForm.vue

 <template>
-  <el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px">
-    <!-- <el-form-item label="会议选择" prop="meetingType">
-      <el-radio-group v-model="form.meetingType">
-        <el-radio label="tencent">腾讯</el-radio>
-      </el-radio-group>
-    </el-form-item> -->
+  <el-form ref="ruleForm" :model="form" :rules="rules" label-width="130px">
     <el-form-item label="会议主题" prop="subject">
       <el-input v-model="form.subject" size="small" />
     </el-form-item>
     <el-form-item label="开始时间" required>
       <el-col :span="11">
         <el-form-item prop="startDate">
-          <el-date-picker
-            v-model="form.startDate"
-            type="date"
-            placeholder="选择日期"
-            style="width: 100%"
-            size="small"
-            :clearable="timerClear"
-            :editable="timerClear"
-            :picker-options="startDateOptions"
-            @change="startDateChange"
-          />
+          <el-date-picker v-model="form.startDate" type="date" placeholder="选择日期" style="width: 100%" size="small" :clearable="timerClear" :editable="timerClear" :picker-options="startDateOptions" @change="startDateChange" />
         </el-form-item>
       </el-col>
       <el-col :span="2" class="line">-</el-col>
       <el-col :span="11">
         <el-form-item prop="startTime">
-          <el-time-select
-            v-model="form.startTime"
-            style="width: 100%"
-            :picker-options="startTimeOptions"
-            placeholder="选择时间"
-            size="small"
-            :clearable="timerClear"
-            :editable="timerClear"
-            @change="startTimeChange"
-          />
+          <el-time-select v-model="form.startTime" style="width: 100%" :picker-options="startTimeOptions" placeholder="选择时间" size="small" :clearable="timerClear" :editable="timerClear" @change="startTimeChange" />
         </el-form-item>
       </el-col>
     </el-form-item>
     <el-form-item label="结束时间" required>
       <el-col :span="11">
         <el-form-item prop="endDate">
-          <el-date-picker
-            v-model="form.endDate"
-            type="date"
-            placeholder="选择日期"
-            style="width: 100%"
-            size="small"
-            :clearable="timerClear"
-            :editable="timerClear"
-            :picker-options="endDateOptions"
-            @change="endDateChange"
-          />
+          <el-date-picker v-model="form.endDate" type="date" placeholder="选择日期" style="width: 100%" size="small" :clearable="timerClear" :editable="timerClear" :picker-options="endDateOptions" @change="endDateChange" />
         </el-form-item>
       </el-col>
       <el-col :span="2" class="line">-</el-col>
       <el-col :span="11">
         <el-form-item prop="endTime">
-          <el-time-select
-            v-model="form.endTime"
-            style="width: 100%"
-            :picker-options="endTimeOptions"
-            placeholder="选择时间"
-            size="small"
-            :clearable="timerClear"
-            :editable="timerClear"
-          />
+          <el-time-select v-model="form.endTime" style="width: 100%" :picker-options="endTimeOptions" placeholder="选择时间" size="small" :clearable="timerClear" :editable="timerClear" @change="dateChange"/>
         </el-form-item>
       </el-col>
     </el-form-item>
     <el-form-item label="时区" required>
-      <el-col :span="11">
+      <el-col>
         <el-select style="width: 100%" v-model="form.timezone" placeholder="选择时区" size="small">
-          <el-option label="(GMT+8:00)中国标准时间-北京" value="beijing" />
+          <el-option label="（GMT+8:00）中国标准时间-北京" value="beijing" />
         </el-select>
       </el-col>
     </el-form-item>
     <el-form-item label="周期会议">
       <el-switch v-model="form.meeting_type" :active-value="1" :inactive-value="0" />
     </el-form-item>
+    <el-form-item v-show="form.meeting_type" style="margin: -20px 0 10px;">
+      <p>{{recurringTypeOptions[form.recurring_rule.recurring_type]}}</p>
+      <p style="line-height: 24px;color:#999;">结束于{{form.recurring_rule.until_date | timeFormat}} {{form.recurring_rule.until_count}}场会议</p>
+    </el-form-item>
     <el-form-item label="重复频率" v-if="form.meeting_type" required>
       <el-col :span="11">
-        <el-select
-          style="width: 100%"
-          v-model="form.recurring_type"
-          placeholder="选择重复频率"
-          size="small"
-          @change="repaeatRateChange"
-        >
-          <el-option label="每天" :value="0" />
-          <el-option label="每个工作日" :value="1" />
-          <el-option label="每周" :value="2" />
-          <el-option label="每两周" :value="3" />
-          <el-option label="每月" :value="4" />
+        <el-select style="width: 100%" v-model="form.recurring_rule.recurring_type" placeholder="选择重复频率" size="small" @change="recurringTypeChange" >
+          <el-option :label="item" :value="index" v-for="(item, index) in recurringTypeOptions" :key="index"/>
         </el-select>
       </el-col>
     </el-form-item>
     <el-form-item label="结束重复" v-if="form.meeting_type" required>
       <el-col :span="11">
-        <el-select style="width: 100%" v-model="form.until_type" placeholder="选择时区" size="small">
+        <el-select style="width: 100%" v-model="form.recurring_rule.until_type" placeholder="请选择" size="small">
           <el-option label="结束于某天" :value="0" />
           <el-option label="限制会议次数" :value="1" />
         </el-select>
       </el-col>
       <el-col :span="2" class="line">-</el-col>
       <el-col :span="11">
-        <el-date-picker
-          v-if="form.until_type === 0"
-          v-model="getCycleMeetingEndDate"
-          type="date"
-          placeholder="选择结束日期"
-          style="width: 100%"
-          size="small"
-          :clearable="timerClear"
-          :editable="timerClear"
-          :picker-options="untilDateOptions"
-        />
-        <el-input-number v-else v-model="form.until_count" :min="1" :max="50" size="small"></el-input-number>
+        <el-date-picker v-if="form.recurring_rule.until_type === 0" v-model="form.recurring_rule.until_date" type="date" placeholder="选择结束日期" style="width: 100%" size="small" :clearable="timerClear" :editable="timerClear" :picker-options="untilDateOptions" @change="setUntilCount" />
+        <el-input-number v-else v-model="form.recurring_rule.until_count" :min="1" :max="50" size="small" controls-position="right" @change="setUntilDate"></el-input-number>
       </el-col>
     </el-form-item>
-    <!-- <el-form-item label="指定主持人">
-      <el-col :span="11">
-        <el-select style="width:100%" v-model="form.moderator" placeholder="选择主持人" size="small">
-          <el-option :label="user.username" :value="user.id" v-for="user in userList" :key="user.id" />
-        </el-select>
-      </el-col>
-    </el-form-item> -->
     <el-form-item label="指定会议管理员">
-      <el-col :span="11">
-        <el-select
-          style="width: 100%"
-          v-model="form.managers"
-          placeholder="选择管理员"
-          size="small"
-          multiple
-          filterable
-          remote
-          :remote-method="fetchUserList"
-          :loading="searchUsersloading"
-        >
-          <el-option :label="user.nickname" :value="user.id" v-for="user in userList" :key="user.id" />
+      <p style="line-height:24px;font-size:12px;">(会议管理员有修改会议，复制、取消会议等所有管理本次会议的权限)</p>
+      <!-- <el-col :span="8">
+        <el-dropdown style="width:100%;"  @command="(val) => searchType = val">
+          <el-button size="small" style="width:calc(100% - 5px);">
+            {{searchTypeOptions[searchType]}}<i class="el-icon-arrow-down el-icon--right"></i>
+          </el-button>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item :command="key" v-for="(value, key) in searchTypeOptions" :key="key">{{value}}</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </el-col> -->
+      <el-col :span="24">
+        <el-select style="width: 100%" v-model="form.managers" placeholder="输入关键字搜索" size="small" multiple filterable remote :remote-method="fetchUserList" :loading="searchUsersloading" >
+          <el-option :label="user.username" :value="user.id" v-for="user in userList" :key="user.id" >
+            <span style="float: left">{{ user.username }}</span>
+            <span style="float: right; color: #8492a6; font-size: 13px; margin:0 20px 0 10px;">{{ user.id }}</span>
+          </el-option>
         </el-select>
       </el-col>
-      <el-col :span="13" style="color: #999; height: 40px; position: relative; font-size: 12px; line-height: 18px">
-        <span style="position: absolute; left: 5px; top: 50%; transform: translateY(-50%)"
-          >（会议管理员有修改会议，复制、取消会议等所有管理本次会议的权限）</span
-        >
-      </el-col>
     </el-form-item>
-    <el-form-item label="会议设置">
+    <el-form-item label="会议设置" style="margin-bottom:2px;">
+      <el-col :span="10">
         <el-checkbox style="width: 120px" v-model="form.hasPwd">开启会议密码</el-checkbox>
-      <el-input
-        style="width: 170px"
-        v-model="form.password"
-        v-if="form.hasPwd"
-        placeholder="请输入4-6位数字密码"
-        type="password"
-        suffix-icon="el-icon-lock"
-        size="small"
-      >
-      </el-input>
-      <el-checkbox style="display: block" v-model="form.auto_in_waiting_room">开启等候室</el-checkbox>
-      <el-checkbox style="display: block" v-model="form.allow_in_before_host"
+      </el-col>
+      <el-col :span="14">
+        <el-form-item v-if="form.hasPwd" prop="password" style="margin-bottom:0;">
+          <el-input style="width: 170px" v-model="form.password" placeholder="请输入4-6位数字密码" type="password" size="small" :show-password="true" @input="val => form.password = val.replace(/[^\d.]/g, '')" :maxlength="6"/>
+        </el-form-item>
+      </el-col>
+    </el-form-item>
+    <el-form-item>
+      <el-checkbox style="display: block" v-model="form.settings.auto_in_waiting_room">开启等候室</el-checkbox>
+      <el-checkbox style="display: block" v-model="form.settings.allow_in_before_host"
         >准许成员在主持人开始前进入会议</el-checkbox
       >
-      <el-checkbox style="display: block" v-model="form.mute_enable_join">入会自动静音</el-checkbox>
-      <el-checkbox v-model="form.auto_record" @change="autoRecordChange">自动录制会议</el-checkbox>
-      <el-radio-group v-model="form.auto_record_type" v-if="form.auto_record">
+      <el-checkbox style="display: block" v-model="form.settings.mute_enable_join">入会自动静音</el-checkbox>
+      <el-checkbox v-model="form.auto_record">自动录制会议</el-checkbox>
+      <el-radio-group v-model="form.settings.auto_record_type" v-if="form.auto_record">
         <el-radio label="local">本地录制</el-radio>
         <el-radio label="cloud">云录制</el-radio>
       </el-radio-group>
@@ -176,44 +109,54 @@
     <el-form-item label="会议直播">
       <el-checkbox v-model="form.enable_live">开启会议直播（用于分享给观看直播的用户）</el-checkbox>
     </el-form-item>
-    <el-form-item label="直播主题" v-if="form.enable_live" :required="form.enable_live" prop="live_subject">
-      <el-input v-model="form.live_subject" size="small" />
+    <el-form-item label="直播主题" v-if="form.enable_live" :required="form.enable_live" prop="live_config.live_subject">
+      <el-input v-model="form.live_config.live_subject" size="small" />
     </el-form-item>
-    <el-form-item label="直播简介" v-if="form.enable_live" :required="form.enable_live" prop="live_summary">
-      <el-input type="textarea" v-model="form.live_summary"></el-input>
+    <el-form-item label="直播简介" v-if="form.enable_live" :required="form.enable_live" prop="live_config.live_summary">
+      <el-input type="textarea" v-model="form.live_config.live_summary"></el-input>
     </el-form-item>
     <el-form-item label="直播设置" v-if="form.enable_live" style="margin-bottom: 0">
-      <el-checkbox style="width: 150px" v-model="form.enable_live_password">开启观看直播密码</el-checkbox>
-      <el-input
-        style="width: 170px"
-        v-model="form.live_password"
-        v-if="form.enable_live_password"
-        placeholder="请输入4-6位数字密码"
-        type="password"
-        suffix-icon="el-icon-lock"
-        size="small"
-      />
+      <el-col :span="10">
+        <el-checkbox style="width: 150px" v-model="form.live_config.enable_live_password">开启观看直播密码</el-checkbox>
+      </el-col>
+      <el-col :span="14">
+        <el-form-item v-if="form.live_config.enable_live_password" prop="live_config.live_password" style="margin-bottom:0;">
+          <el-input style="width: 170px" v-model="form.live_config.live_password" placeholder="请输入4-6位数字密码" type="password" size="small" :show-password="true" @input="val => form.live_config.live_password = val.replace(/[^\d.]/g, '')" :maxlength="6"/>
+        </el-form-item>
+      </el-col>
     </el-form-item>
     <el-form-item label="" v-if="form.enable_live">
-      <el-checkbox v-model="form.enable_live_im">准许观众讨论</el-checkbox>
+      <el-checkbox v-model="form.live_config.enable_live_im">准许观众讨论</el-checkbox>
     </el-form-item>
     <el-form-item style="padding-left: 100px">
-      <el-button type="primary" @click="submitForm('ruleForm')" size="mini">立即创建</el-button>
-      <el-button @click="resetForm('ruleForm')" size="mini">重置</el-button>
+      <el-button type="primary" @click="submitForm('ruleForm')" size="mini">创建</el-button>
+      <!-- <el-button @click="resetForm('ruleForm')" size="mini">重置</el-button> -->
+      <el-button @click="goList" size="mini">取消</el-button>
     </el-form-item>
   </el-form>
 </template>
 <script>
-import { timeTrans, dateFormat, getYMDByDate, getTimestampYMD, getCurHalfHour } from '@/utils/dateAlgs'
+import { timeTrans, dateFormat, getYMDByDate, getTimestampYMD, getCurHalfHour, computedDateByRateTimes, computedTimesByRateDate } from '@/utils/dateAlgs'
 import { searchUserList } from '@api/common'
+import { mapGetters } from 'vuex'
+// import _ from 'lodash'
 const DAY_TIMESTAMP = 8.64e7
+const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
+const EMAIL_REG = /^[A-Za-z0-9]+([_.][A-Za-z0-9]+)*@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/
 export default {
+  props: {
+    data: {
+      type: Object
+    },
+    users: {
+      type: Array
+    }
+  },
   data() {
     const now = new Date()
     const nowDate = getYMDByDate(now)
     const startDateChecked = (rule, value, callback) => {
       if (value) {
-        console.log(value)
         const timestamp = Date.parse(value)
         if (timestamp < Date.now() - DAY_TIMESTAMP) {
           callback(new Error('开始时间必须大于当前时间'))
@@ -226,17 +169,40 @@ export default {
       if (value) {
         if (this.endTimestamp < this.startTimestamp) {
           callback(new Error('结束时间必须大于开始时间'))
-        } else if (this.endTimestamp > this.startTimestamp + DAY_TIMESTAMP) {
+        } else if (this.endTimestamp >= this.startTimestamp + DAY_TIMESTAMP) {
           callback(new Error('会议时间不能超过24小时'))
         } else {
           callback()
         }
       }
     }
+    const validatePwd = (rule, value, callback) => {
+      let errMsg = ''
+      if (this.form.hasPwd) {
+        console.log(value)
+        if (!value) {
+          errMsg = '请输入密码'
+        } else if (value.length < 4) {
+          errMsg = '密码长度过短'
+        }
+      }
+      errMsg ? callback(new Error(errMsg)) : callback()
+    }
+    const validateLivePwd = (rule, value, callback) => {
+      let errMsg = ''
+      if (this.form.live_config.enable_live_password) {
+        if (!value) {
+          errMsg = '请输入密码'
+        } else if (value.length < 4) {
+          errMsg = '密码长度过短'
+        }
+      }
+      errMsg ? callback(new Error(errMsg)) : callback()
+    }
     const validateErrMsg = (rule, value, callback) => {
       // 当开启会议直播时，启用验证,处理callback
-      if (this.form.isLive) {
-        const errMsg = rule.field === 'liveTheme' ? '请输入直播主题' : '请输入直播简介'
+      if (this.form.enable_live && !value) {
+        const errMsg = rule.field === 'live_config.live_subject' ? '请输入直播主题' : '请输入直播简介'
         callback(new Error(errMsg))
       } else {
         callback()
@@ -244,9 +210,7 @@ export default {
     }
     return {
       timerClear: false,
-      time: '',
       form: {
-        meetingType: 'tencent',
         subject: '',
         startDate: nowDate,
         startTime: getCurHalfHour('start'),
@@ -260,23 +224,15 @@ export default {
           until_date: '',
           until_count: 7
         },
-        recurring_type: 0,
-        until_type: 0,
-        until_date: '',
-        until_count: 7,
         hasPwd: false,
         password: '',
+        auto_record: true,
         settings: {
           auto_in_waiting_room: false,
           allow_in_before_host: true,
           auto_record_type: 'cloud',
           mute_enable_join: false
         },
-        auto_in_waiting_room: false,
-        allow_in_before_host: false,
-        auto_record_type: 'cloud',
-        mute_enable_join: false,
-        auto_record: false,
         enable_live: false,
         live_config: {
           live_subject: '',
@@ -284,17 +240,21 @@ export default {
           enable_live_password: false,
           live_password: '',
           enable_live_im: false
+        }
       },
-        live_subject: '',
-        live_summary: '',
-        enable_live_password: false,
-        live_password: '',
-        enable_live_im: false
-      },
+      recurringTypeOptions: ['每天', '每个工作日', '每周', '每两周', '每月'],
       userList: [],
+      searchType: 'username',
+      searchTypeOptions: {
+        username: '通过用户名搜索',
+        nickname: '通过昵称搜索',
+        email: '通过邮箱搜索',
+        mobile: '通过手机号搜索',
+        id: '通过ID搜索'
+      },
+      searchKeywordsCheckMsg: '',
       searchUsersloading: false,
       rules: {
-        meetingType: [{ required: true, message: '请选择会议类型', trigger: 'blur' }],
         subject: [{ required: true, message: '请填写会议主题', trigger: 'blur' }],
         startDate: [
           { type: 'date', required: true, message: '请选择开始日期', trigger: 'change' },
@@ -306,85 +266,74 @@ export default {
           { required: true, message: '请选择结束时间', trigger: 'change' },
           { validator: endDateChecked, trigger: 'change' }
         ],
-        moderator: [{ required: true, message: '请选择主持人', trigger: 'change' }],
-        liveTheme: [{ validator: validateErrMsg }],
-        liveDesc: [{ validator: validateErrMsg }]
+        password: [{ validator: validatePwd, trigger: 'blur' }],
+        'live_config.live_subject': [{ validator: validateErrMsg }],
+        'live_config.live_summary': [{ validator: validateErrMsg }],
+        'live_config.live_password': [{ validator: validateLivePwd, trigger: 'blur' }]
+      }
+    }
   },
-      startDateOptions: {
+  computed: {
+    ...mapGetters(['user']),
+    startDateOptions() {
+      return {
         disabledDate(time) {
           return time.getTime() < Date.now() - DAY_TIMESTAMP
         }
+      }
     },
-      startTimeOptions: {
-        start: getCurHalfHour('start'),
-        step: '00:30',
-        end: '23:30'
-      },
-      endTimeOptions: {
-        start: getCurHalfHour('end'),
+    startTimeOptions() {
+      const date = this.form.startDate
+      const options = {
+        start: '00:00',
         step: '00:30',
         end: '23:30'
-      },
-      monthMaxDay: 28,
-      _untilDateOptions: {
-        disabledDate: time => {
-          let flag = false
-          switch (this.form.recurring_type) {
-            case 0: {
-              break
-            }
-            case 1: {
-              if (time.getDay() === 5 || time.getDay() === 6) flag = true
-              break
-            }
-            case 2: {
-              const startDate = timeTrans(this.form.startDate)
-              if (startDate.getDay() !== time.getDay() || getTimestampYMD(time) < getTimestampYMD(startDate)) flag = true
-              break
-            }
-            case 3: {
-              const startDate = timeTrans(this.form.startDate)
-              const disabledDay = ((getTimestampYMD(time) - getTimestampYMD(startDate)) / (DAY_TIMESTAMP * 7)) % 2 !== 0
-              if (disabledDay || getTimestampYMD(time) < getTimestampYMD(startDate)) flag = true
-              break
-            }
-            case 4: {
-              const startDate = timeTrans(this.form.startDate)
-              const day = startDate.getDate()
-              const targetDay = time.getDate()
-              let disabledDay = false
-              if (day > 28) {
-                const year = time.getFullYear()
-                const month = time.getMonth() + 1
-                const targetMDays = new Date(year, month, 0).getDate()
-                if (targetDay !== targetMDays) disabledDay = true
-              } else if (startDate.getDate() !== targetDay) {
-                disabledDay = true
-              }
-              if (disabledDay || getTimestampYMD(time) < getTimestampYMD(startDate)) flag = true
-              break
-            }
-          }
-          return flag
-        }
       }
+      if (date.getTime() <= Date.now()) {
+        options.start = getCurHalfHour('start')
       }
+      return options
     },
-  computed: {
     endDateOptions() {
-      const sDate = this.form.startDate
+      const date = this.form.startDate
       return {
         disabledDate(time) {
           return (
-            getTimestampYMD(time) < getTimestampYMD(sDate) ||
-            getTimestampYMD(time) > getTimestampYMD(sDate) + DAY_TIMESTAMP
+            getTimestampYMD(time) < getTimestampYMD(date) ||
+            getTimestampYMD(time) > getTimestampYMD(date) + DAY_TIMESTAMP
           )
         }
       }
     },
+    endTimeOptions() {
+      const { startDate, endDate, startTime } = this.form
+      const fullDate = this.getFullDateTime(startDate, startTime)
+      const minutes = fullDate.getMinutes()
+      let options
+      if (this.isSameDate(startDate, endDate)) {
+        // 结束日期和开始日期同一天，会议最低半小时，则向后推半小时
+        const _date = fullDate.setMinutes(minutes + 30)
+        const startTime = dateFormat(_date, '{h}:{i}')
+        options = {
+          start: startTime,
+          step: '00:30',
+          end: '23:30'
+        }
+      } else {
+        // 结束时间和开始时间不能超过24小时，相隔一天，则向前推半小时
+        const _date = fullDate.setMinutes(minutes - 30)
+        const endTime = dateFormat(_date, '{h}:{i}')
+        options = {
+          start: '00:00',
+          step: '00:30',
+          end: endTime
+        }
+      }
+      return options
+    },
     untilDateOptions() {
       const form = this.form
-      const type = form.recurring_type
+      const type = form.recurring_rule.recurring_type
       const sDate = timeTrans(form.startDate)
       // const eDate = timeTrans(form.endDate)
       return {
@@ -430,65 +379,104 @@ export default {
           return flag
         }
       }
+    },
+    startTimestamp() {
+      return this.getFullDateTime(this.form.startDate, this.form.startTime).getTime()
+    },
+    endTimestamp() {
+      return this.getFullDateTime(this.form.endDate, this.form.endTime).getTime()
+    }
+  },
+  filters: {
+    timeFormat(val, fmt) {
+      fmt = fmt || '{y}年{m}月{d}日'
+      return dateFormat(val, fmt)
     }
   },
   watch: {
-    getCycleMeetingEndDate: {
-      handler: function (nv, ov) {
-        this.form.until_date = Date.parse(nv)
+    data: {
+      handler: function (val) {
+        if (val && val.startDate) {
+          this.userList = this.users
+          this.deepSet(this.form, val)
+          if (val.meeting_type === 1) {
+            val.recurring_rule.until_type === 0 ? this.setUntilCount() : this.setUntilDate()
+          }
+        }
       },
-      immediate: true
+      immediate: true,
+      deep: true
     }
   },
+  created() {
+    this.setUntilDate()
+  },
   methods: {
-    startDateChange(val) {
-      this.form.endDate = val
-      const _startDate = timeTrans(this.form.startDate)
-      if (Date.parse(_startDate) > Date.now()) {
-        this.startTimeOptions = {
-          start: '00:00',
-          step: '00:30',
-          end: '23:30'
-        }
+    goList() {
+      this.$router.push('/calendar')
+    },
+    dateChange() {
+      const dateObj = {
+        startDate: this.form.startDate,
+        startTime: this.form.startTime,
+        endDate: this.form.endDate,
+        endTime: this.form.endTime
+      }
+      this.$emit('dateChange', dateObj)
+    },
+    deepSet(obj, source) {
+      for (const key in source) {
+        const sourceVal = source[key]
+        if (Array.isArray(sourceVal)) {
+          obj[key] = sourceVal
+        } else if (typeof sourceVal === 'object' && !(sourceVal instanceof Date)) {
+          const val = obj[key]
+          this.deepSet(val, sourceVal)
         } else {
-        this.startTimeOptions = {
-          start: getCurHalfHour('start'),
-          step: '00:30',
-          end: '23:30'
-        }
+          obj[key] = sourceVal
         }
-      if (this.showSchedule) {
-        this.fetchMeetingList()
       }
     },
-    startTimeChange(val) {
+    startDateChange(val) {
+      this.form.endDate = val
+      this.startTimeChange()
+      this.dateChange()
+    },
+    startTimeChange() {
       const { startDate, endDate } = this.form
-      const fullDate = this.getFullDateTime(startDate, val)
       if (this.isSameDate(startDate, endDate)) {
-        const startTime = getCurHalfHour('end', fullDate)
-        this.form.endTime = startTime
-        this.endTimeOptions = {
-          start: startTime,
-          step: '00:30',
-          end: '23:30'
-        }
+        this.form.endTime = this.endTimeOptions.start
       } else {
-        const endTime = getCurHalfHour('start', fullDate)
-        this.form.endTime = endTime
-        this.endTimeOptions = {
-          start: '00:00',
-          step: '00:30',
-          end: endTime
-        }
+        this.form.endTime = this.endTimeOptions.end
       }
+      this.dateChange()
     },
     endDateChange() {
-      this.startTimeChange(this.form.startTime)
+      this.startTimeChange()
+      this.dateChange()
     },
-    repaeatRateChange(val) {
-      if (val === 'everyworkday' && this.form.endType === 'endOneday') {
-        this.form.periodicTimes = 7
+    recurringTypeChange() {
+      if (this.form.recurring_rule.until_type === 0) {
+        this.form.recurring_rule.until_count = 7
       }
+      this.setUntilDate()
+    },
+    passwordInput(val) {
+      this.form.password = val.replace(/[^\d.]/g, '')
+    },
+    setUntilDate() {
+      const recurringType = this.form.recurring_rule.recurring_type
+      const date = this.form.startDate
+      const untilCount = this.form.recurring_rule.until_count
+      const untilDate = computedDateByRateTimes(date, untilCount, recurringType)
+      this.form.recurring_rule.until_date = untilDate
+    },
+    setUntilCount() {
+      const recurringType = this.form.recurring_rule.recurring_type
+      const date = this.form.startDate
+      const untilDate = this.form.recurring_rule.until_date
+      const untilCount = computedTimesByRateDate(date, untilDate, recurringType)
+      this.form.recurring_rule.until_count = untilCount
     },
     getFullDateTime(date, timeStr) {
       const hmArr = timeStr.split(':')
@@ -499,39 +487,10 @@ export default {
     isSameDate(start, end) {
       return dateFormat(start, '{y}-{m}-{d}') === dateFormat(end, '{y}-{m}-{d}')
     },
-    autoRecordChange(val) {
-      this.auto_record_type = val ? 'cloud' : 'none'
-    },
-    copyText() {
-      const text = this.$refs.details.$el.innerText
-      this.copyFn(text)
-    },
-    copyMeetingLink() {
-      this.copyFn(this.details.join_url)
-    },
-    copyLiveLink() {
-      this.copyFn(this.details.live_config.live_addr)
-    },
-    copyFn(val) {
-      if (!val) return
-      const dom = document.createElement('textarea')
-      document.body.appendChild(dom)
-      dom.value = val
-      dom.select(); // 选择对象
-      document.execCommand('Copy');
-      this.$message({
-        message: '复制成功！',
-        type: 'success'
-      })
-      document.body.removeChild(dom)
-    },
-    joinMeeting() {
-      window.open(this.details.join_url, '_blank');
-    },
     submitForm(formName) {
       this.$refs[formName].validate(valid => {
         if (valid) {
-          this.$message.success('验证通过')
+          this.$emit('submitForm', this.getSubmitParams())
         } else {
           return false
         }
@@ -540,11 +499,56 @@ export default {
     resetForm(formName) {
       this.$refs[formName].resetFields()
     },
-    fetchUserList(val) {
-      if (val) {
+    getSubmitParams() {
+      const form = this.form
       const params = {
-          nickname: val
+        instanceid: 1,
+        subject: form.subject,
+        start_time: dateFormat(this.startTimestamp),
+        end_time: dateFormat(this.endTimestamp),
+        meeting_type: form.meeting_type,
+        enable_live: form.enable_live,
+        managers: form.managers.length > 0 ? form.managers : [this.user.id]
+      }
+      if (form.hasPwd) params.password = form.password
+      const settings = { ...form.settings }
+      if (!form.auto_record) settings.auto_record_type = 'none'
+      params.settings = settings
+      if (form.meeting_type === 1) {
+        const rule = form.recurring_rule
+        console.log(rule)
+        params.recurring_rule = {
+          recurring_type: rule.recurring_type,
+          until_type: rule.until_type
+        }
+        if (rule.until_type === 0) {
+          const timestamp = timeTrans(rule.until_date).getTime() + DAY_TIMESTAMP
+          params.recurring_rule.until_date = parseInt(timestamp / 1000)
+        } else {
+          params.recurring_rule.until_count = rule.until_count
+        }
+      }
+      if (form.enable_live) {
+        const config = { ...form.live_config }
+        if (!config.enable_live_password) delete config.live_password
+        params.live_config = config
       }
+      return params
+    },
+    fetchUserList(val) {
+      this.searchKeywordsCheckMsg = ''
+      if (!val) return
+      if (this.searchType === 'email' && !EMAIL_REG.test(val)) {
+        this.searchKeywordsCheckMsg = '邮箱格式错误'
+        this.userList = []
+      } else if (this.searchType === 'mobile' && !MOBILE_REG.test(val)) {
+        this.searchKeywordsCheckMsg = '手机号格式错误'
+        this.userList = []
+      } else {
+        const params = {
+          [this.searchType]: val
+        };
+        this.searchKeywordsCheckMsg = ''
         this.searchUsersloading = true
         searchUserList(params)
           .then(res => {
@@ -562,10 +566,13 @@ export default {
 <style scoped>
 .el-form {
   flex: 1;
-  max-width: 600px;
+  max-width: 540px;
   padding:20px 0 10px;
 }
 .line {
   text-align: center;
 }
+.el-form ::v-deep.el-input-number__increase{
+  margin-top:1px;
+}
 </style>
\ No newline at end of file

src/pages/meeting/tencent-meeting/index.vue

 <template>
-  <div class="tx-meeting-container">
-    <div class="inner">
-      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px">
-        <el-form-item label="会议主题" prop="subject">
-          <el-input v-model="form.subject" size="small" />
-        </el-form-item>
-        <el-form-item label="开始时间" required>
-          <el-col :span="11">
-            <el-form-item prop="startDate">
-              <el-date-picker
-                v-model="form.startDate"
-                type="date"
-                placeholder="选择日期"
-                style="width: 100%"
-                size="small"
-                :clearable="timerClear"
-                :editable="timerClear"
-                :picker-options="startDateOptions"
-                @change="startDateChange"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="2" class="line">-</el-col>
-          <el-col :span="11">
-            <el-form-item prop="startTime">
-              <el-time-select
-                v-model="form.startTime"
-                style="width: 100%"
-                :picker-options="startTimeOptions"
-                placeholder="选择时间"
-                size="small"
-                :clearable="timerClear"
-                :editable="timerClear"
-                @change="startTimeChange"
-              />
-            </el-form-item>
-          </el-col>
-        </el-form-item>
-        <el-form-item label="结束时间" required>
-          <el-col :span="11">
-            <el-form-item prop="endDate">
-              <el-date-picker
-                v-model="form.endDate"
-                type="date"
-                placeholder="选择日期"
-                style="width: 100%"
-                size="small"
-                :clearable="timerClear"
-                :editable="timerClear"
-                :picker-options="endDateOptions"
-                @change="endDateChange"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="2" class="line">-</el-col>
-          <el-col :span="11">
-            <el-form-item prop="endTime">
-              <el-time-select
-                v-model="form.endTime"
-                style="width: 100%"
-                :picker-options="endTimeOptions"
-                placeholder="选择时间"
-                size="small"
-                :clearable="timerClear"
-                :editable="timerClear"
-              />
-            </el-form-item>
-          </el-col>
-        </el-form-item>
-        <el-form-item label="时区" required>
-          <el-col>
-            <el-select style="width: 100%" v-model="form.timezone" placeholder="选择时区" size="small">
-              <el-option label="(GMT+8:00)中国标准时间-北京" value="beijing" />
-            </el-select>
-          </el-col>
-        </el-form-item>
-        <el-form-item label="周期会议">
-          <el-switch v-model="form.meeting_type" :active-value="1" :inactive-value="0" />
-        </el-form-item>
-        <el-form-item label="重复频率" v-if="form.meeting_type" required>
-          <el-col :span="11">
-            <el-select
-              style="width: 100%"
-              v-model="form.recurring_type"
-              placeholder="选择重复频率"
-              size="small"
-              @change="repaeatRateChange"
-            >
-              <el-option label="每天" :value="0" />
-              <el-option label="每个工作日" :value="1" />
-              <el-option label="每周" :value="2" />
-              <el-option label="每两周" :value="3" />
-              <el-option label="每月" :value="4" />
-            </el-select>
-          </el-col>
-        </el-form-item>
-        <el-form-item label="结束重复" v-if="form.meeting_type" required>
-          <el-col :span="11">
-            <el-select style="width: 100%" v-model="form.until_type" placeholder="选择时区" size="small">
-              <el-option label="结束于某天" :value="0" />
-              <el-option label="限制会议次数" :value="1" />
-            </el-select>
-          </el-col>
-          <el-col :span="2" class="line">-</el-col>
-          <el-col :span="11">
-            <el-date-picker
-              v-if="form.until_type === 0"
-              v-model="getCycleMeetingEndDate"
-              type="date"
-              placeholder="选择结束日期"
-              style="width: 100%"
-              size="small"
-              :clearable="timerClear"
-              :editable="timerClear"
-              :picker-options="cycleMeetingEndDateOptions"
-            />
-            <el-input-number v-else v-model="form.until_count" :min="1" :max="50" size="small"></el-input-number>
-          </el-col>
-        </el-form-item>
-        <!-- <el-form-item label="指定主持人">
-          <el-col :span="11">
-            <el-select style="width:100%" v-model="form.moderator" placeholder="选择主持人" size="small">
-              <el-option :label="user.username" :value="user.id" v-for="user in userList" :key="user.id" />
-            </el-select>
-          </el-col>
-        </el-form-item> -->
-        <el-form-item label="指定会议管理员">
-          <p style="line-height:24px;">（会议管理员有修改会议，复制、取消会议等所有管理本次会议的权限）</p>
-          <el-col :span="8">
-            <el-dropdown style="width:100%;"  @command="(val) => searchType = val">
-              <el-button size="small" style="width:calc(100% - 5px);">
-                {{searchTypeOptions[searchType]}}<i class="el-icon-arrow-down el-icon--right"></i>
-              </el-button>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item :command="key" v-for="(value, key) in searchTypeOptions" :key="key">{{value}}</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </el-col>
-          <el-col :span="16">
-            <el-select
-              style="width: 100%"
-              v-model="form.managers"
-              placeholder="请输入关键字搜索"
-              size="small"
-              multiple
-              filterable
-              remote
-              :remote-method="fetchUserList"
-              :loading="searchUsersloading"
-            >
-              <el-option :label="user.nickname" :value="user.id" v-for="user in userList" :key="user.id" >
-                <span style="float: left">{{ user.nickname }}</span>
-                <span style="float: right; color: #8492a6; font-size: 13px; margin:0 20px 0 10px;">{{ user.id }}</span>
-              </el-option>
-            </el-select>
-          </el-col>
-          <p class="search-keywords-checked" v-if="searchKeywordsCheckMsg">{{searchKeywordsCheckMsg}}</p>
-        </el-form-item>
-        <el-form-item label="会议设置">
-          <el-checkbox style="width: 120px" v-model="form.hasPwd">开启会议密码</el-checkbox>
-          <el-input
-            style="width: 170px"
-            v-model="form.password"
-            v-if="form.hasPwd"
-            placeholder="请输入4-6位数字密码"
-            type="password"
-            suffix-icon="el-icon-lock"
-            size="small"
-          >
-          </el-input>
-          <el-checkbox style="display: block" v-model="form.auto_in_waiting_room">开启等候室</el-checkbox>
-          <el-checkbox style="display: block" v-model="form.allow_in_before_host"
-            >准许成员在主持人开始前进入会议</el-checkbox
-          >
-          <el-checkbox style="display: block" v-model="form.mute_enable_join">入会自动静音</el-checkbox>
-          <el-checkbox v-model="form.auto_record">自动录制会议</el-checkbox>
-          <el-radio-group v-model="form.auto_record_type" v-if="form.auto_record">
-            <el-radio label="local">本地录制</el-radio>
-            <el-radio label="cloud">云录制</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="会议直播">
-          <el-checkbox v-model="form.enable_live">开启会议直播（用于分享给观看直播的用户）</el-checkbox>
-        </el-form-item>
-        <el-form-item label="直播主题" v-if="form.enable_live" :required="form.enable_live" prop="live_subject">
-          <el-input v-model="form.live_subject" size="small" />
-        </el-form-item>
-        <el-form-item label="直播简介" v-if="form.enable_live" :required="form.enable_live" prop="live_summary">
-          <el-input type="textarea" v-model="form.live_summary"></el-input>
-        </el-form-item>
-        <el-form-item label="直播设置" v-if="form.enable_live" style="margin-bottom: 0">
-          <el-checkbox style="width: 150px" v-model="form.enable_live_password">开启观看直播密码</el-checkbox>
-          <el-input
-            style="width: 170px"
-            v-model="form.live_password"
-            v-if="form.enable_live_password"
-            placeholder="请输入4-6位数字密码"
-            type="password"
-            suffix-icon="el-icon-lock"
-            size="small"
-          />
-        </el-form-item>
-        <el-form-item label="" v-if="form.enable_live">
-          <el-checkbox v-model="form.enable_live_im">准许观众讨论</el-checkbox>
-        </el-form-item>
-        <el-form-item style="padding-left: 100px">
-          <el-button type="primary" @click="submitForm('ruleForm')" size="mini">{{isUpdate ? '修改会议' : '立即创建'}}</el-button>
-          <el-button @click="resetForm('ruleForm')" size="mini">重置</el-button>
-        </el-form-item>
-      </el-form>
-      <div class="right-container" v-if="showSchedule">
-        <div class="title">{{ form.startDate | timeFormat }} {{ form.startDate | timeFormat('星期{a}') }}</div>
-        <schedule :options="options" :data="schedule" :date="form.startDate" />
-        <div class="pre-time-range" :style="{ top: getTop, height: getHeight }"></div>
-      </div>
-    </div>
-    <meeting-success-dialog :dialogVisible.sync="dialogVisible" :details="details"/>
-  </div>
+  <component v-bind:is="currentPage"></component>
 </template>
 <script>
-import Schedule from '@/components/Schedule'
-import MeetingSuccessDialog from '@/components/MeetingSuccessDialog/index'
-import {
-  timeTrans,
-  dateFormat,
-  getYMDByDate,
-  getTimestampYMD,
-  computedDateByRateTimes,
-  computedTimesByRateDate,
-  getCurHalfHour,
-  isSameDate
-} from '@/utils/dateAlgs'
-import { searchUserList, createMeeting, operateLog, getMeetingDetails, getNonpagedMeetingList, updateMeeting } from '@api/common'
-const DAY_TIMESTAMP = 8.64e7
-const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
-const EMAIL_REG = /^[A-Za-z0-9]+([_.][A-Za-z0-9]+)*@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/
+import MeetingCreate from './meeting-create'
+import MeetingAccountCreate from './meeting-account-create'
+import MeetingUpdate from './meeting-update'
 export default {
-  data() {
-    const now = new Date()
-    const nowDate = getYMDByDate(now)
-    const startDateChecked = (rule, value, callback) => {
-      if (value) {
-        const timestamp = Date.parse(value)
-        if (timestamp < Date.now() - DAY_TIMESTAMP) {
-          callback(new Error('开始时间必须大于当前时间'))
-        } else {
-          callback()
-        }
-      }
-    }
-    const endDateChecked = (rule, value, callback) => {
-      if (value) {
-        if (this.endTimestamp < this.startTimestamp) {
-          callback(new Error('结束时间必须大于开始时间'))
-        } else if (this.endTimestamp > this.startTimestamp + DAY_TIMESTAMP) {
-          callback(new Error('会议时间不能超过24小时'))
-        } else {
-          callback()
-        }
-      }
-    }
-    const validateErrMsg = (rule, value, callback) => {
-      // 当开启会议直播时，启用验证,处理callback
-      if (this.form.enable_live && !value) {
-        const errMsg = rule.field === 'live_subject' ? '请输入直播主题' : '请输入直播简介'
-        callback(new Error(errMsg))
-      } else {
-        callback()
-      }
-    }
-    return {
-      timerClear: false,
-      time: '',
-      form: {
-        subject: '',
-        startDate: nowDate,
-        startTime: getCurHalfHour('start'),
-        endDate: nowDate,
-        endTime: getCurHalfHour('end'),
-        timezone: 'beijing',
-        meeting_type: 0,
-        recurring_type: 0,
-        until_type: 0,
-        until_date: '',
-        until_count: 7,
-        managers: [],
-        hasPwd: false,
-        password: '',
-        auto_in_waiting_room: false,
-        allow_in_before_host: true,
-        auto_record: true,
-        auto_record_type: 'cloud',
-        mute_enable_join: false,
-        enable_live: false,
-        live_subject: '',
-        live_summary: '',
-        enable_live_password: false,
-        live_password: '',
-        enable_live_im: false
-      },
-      rules: {
-        subject: [{ required: true, message: '请填写会议主题', trigger: 'blur' }],
-        startDate: [
-          { type: 'date', required: true, message: '请选择开始日期', trigger: 'change' },
-          { type: 'date', validator: startDateChecked, trigger: 'change' }
-        ],
-        startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
-        endDate: [{ type: 'date', required: true, message: '请选择结束日期', trigger: 'change' }],
-        endTime: [
-          { required: true, message: '请选择结束时间', trigger: 'change' },
-          { validator: endDateChecked, trigger: 'change' }
-        ],
-        moderator: [{ required: true, message: '请选择主持人', trigger: 'change' }],
-        live_subject: [{ validator: validateErrMsg }],
-        live_summary: [{ validator: validateErrMsg }]
-      },
-      cycleMeetingEndDateOptions: {
-        disabledDate: time => {
-          let flag = false
-          switch (this.form.recurring_type) {
-            case 0: {
-              break
-            }
-            case 1: {
-              if (time.getDay() === 5 || time.getDay() === 6) flag = true
-              break
-            }
-            case 2: {
-              const startDate = timeTrans(this.form.startDate)
-              if (startDate.getDay() !== time.getDay() || getTimestampYMD(time) < getTimestampYMD(startDate)) flag = true
-              break
-            }
-            case 3: {
-              const startDate = timeTrans(this.form.startDate)
-              const disabledDay = ((getTimestampYMD(time) - getTimestampYMD(startDate)) / (DAY_TIMESTAMP * 7)) % 2 !== 0
-              if (disabledDay || getTimestampYMD(time) < getTimestampYMD(startDate)) flag = true
-              break
-            }
-            case 4: {
-              const startDate = timeTrans(this.form.startDate)
-              const day = startDate.getDate()
-              const targetDay = time.getDate()
-              let disabledDay = false
-              if (day > 28) {
-                const year = time.getFullYear()
-                const month = time.getMonth() + 1
-                const targetMDays = new Date(year, month, 0).getDate()
-                if (targetDay !== targetMDays) disabledDay = true
-              } else if (startDate.getDate() !== targetDay) {
-                disabledDay = true
-              }
-              if (disabledDay || getTimestampYMD(time) < getTimestampYMD(startDate)) flag = true
-              break
-            }
-          }
-          return flag
-        }
-      },
-      userList: [],
-      searchType: 'username',
-      searchTypeOptions: {
-        username: '通过用户名搜索',
-        nickname: '通过昵称搜索',
-        email: '通过邮箱搜索',
-        mobile: '通过手机号搜索',
-        id: '通过ID搜索'
-      },
-      searchKeywordsCheckMsg: '',
-      searchUsersloading: false,
-      showSchedule: false,
-      options: {
-        multi: false, // 是否为多日程
-        start: 0, // init number 0-23
-        end: 24, // init number 1-24且end>start
-        step: 60, // 只接收15, 30, 60三种步伐
-        lineHeight: 40, // init number 时间线间的高度
-        nowBeforeDisabled: true,
-        readonly: true,
-        popoverPos: 'bottom'
-      },
-      schedule: {
-        userid: '',
-        events: []
-      },
-      dialogVisible: false,
-      details: {},
-      isUpdate: false,
-      userid: ''
-    }
-  },
-  computed: {
-    user() {
-      return this.$store.getters.user
-    },
-    getTop() {
-      const timeRange = this.startTimestamp - this.startDotTimestamp
-      const top = timeRange / ((60 * 1000 * this.options.step) / this.options.lineHeight)
-      return top + 56 + 'px'
-    },
-    getHeight() {
-      const start = timeTrans(this.startTimestamp)
-      let end = timeTrans(this.endTimestamp)
-      if (!isSameDate(start, end)) {
-        end = new Date(start.getFullYear(), start.getMonth(), start.getDate(), 24, 0, 0)
-      }
-      const timeRange = end.getTime() - start.getTime()
-      const h = timeRange / ((60 * 1000 * this.options.step) / this.options.lineHeight)
-      return h - 2 + 'px'
-    },
-    startDotTimestamp() {
-      const date = this.form.startDate
-      const startHour = parseInt(this.options.start)
-      return new Date(date.getFullYear(), date.getMonth(), date.getDate(), startHour, 0, 0).getTime()
-    },
-    startTimestamp() {
-      return this.getFullDateTime(this.form.startDate, this.form.startTime).getTime()
-    },
-    endTimestamp() {
-      return this.getFullDateTime(this.form.endDate, this.form.endTime).getTime()
-    },
-    getCycleMeetingEndDate: {
-      get: function () {
-        const startDate = this.form.startDate ? this.form.startDate : Date.now()
-        return computedDateByRateTimes(startDate, this.form.until_count, this.form.recurring_type)
-      },
-      set: function (newValue) {
-        const times = computedTimesByRateDate(this.form.startDate, newValue, this.form.recurring_type)
-        this.form.until_count = times
-      }
-    },
-    startDateOptions() {
+  data () {
     return {
-        disabledDate(time) {
-          return time.getTime() < Date.now() - DAY_TIMESTAMP
-        }
+      currentPage: 'MeetingCreate'
     }
   },
-    startTimeOptions() {
-      const date = this.form.startDate
-      const options = {
-        start: '00:00',
-        step: '00:30',
-        end: '23:30'
-      }
-      if (date.getTime() <= Date.now()) {
-        options.start = getCurHalfHour('start')
-      }
-      return options
-    },
-    endDateOptions() {
-      const _startDate = this.form.startDate
-      return {
-        disabledDate(time) {
-          return (
-            getTimestampYMD(time) < getTimestampYMD(_startDate) ||
-            getTimestampYMD(time) > getTimestampYMD(_startDate) + DAY_TIMESTAMP
-          )
-        }
-      }
-    },
-    endTimeOptions() {
-      const { startDate, endDate, startTime } = this.form
-      const fullDate = this.getFullDateTime(startDate, startTime)
-      const minutes = fullDate.getMinutes()
-      let options
-      if (this.isSameDate(startDate, endDate)) {
-        // 结束日期和开始日期同一天，会议最低半小时，则向后推半小时
-        const _date = fullDate.setMinutes(minutes + 30)
-        const startTime = dateFormat(_date, '{h}:{i}')
-        options = {
-          start: startTime,
-          step: '00:30',
-          end: '23:30'
-        }
-      } else {
-        // 结束时间和开始时间不能超过24小时，相隔一天，则向前推半小时
-        const _date = fullDate.setMinutes(minutes - 30)
-        const endTime = dateFormat(_date, '{h}:{i}')
-        options = {
-          start: '00:00',
-          step: '00:30',
-          end: endTime
-        }
-      }
-      return options
-    }
-  },
-  filters: {
-    timeFormat(val, fmt) {
-      fmt = fmt || '{y}年{m}月{d}日'
-      return dateFormat(val, fmt)
-    }
-  },
-  components: { Schedule, MeetingSuccessDialog },
-  created() {
-    // this.getUserList()
-  },
+  components: { MeetingCreate, MeetingAccountCreate, MeetingUpdate },
   watch: {
-    getCycleMeetingEndDate: {
-      handler: function (nv, ov) {
-        this.form.until_date = Date.parse(nv)
-      },
-      immediate: true
-    },
     $route: {
-      handler: function () {
-        const query = this.$route.query
-        if (query.type === '1') {
-          this.showSchedule = true
-          this.form.startDate = getYMDByDate(query.start)
-          this.form.startTime = dateFormat(query.start, '{h}:{i}')
-          this.form.endDate = getYMDByDate(query.end)
-          this.form.endTime = dateFormat(query.end, '{h}:{i}')
-          this.schedule.userid = query.account
-          this.fetchMeetingList()
-        } else if (query.type === '2') {
-          const params = {
-            meeting_id: query.meeting_id,
-            sub_meeting_id: query.sub_meeting_id
-          }
-          this.isUpdate = true
-          this.getDetailsData(params)
-        } else {
-          this.showSchedule = false
+      handler: function (to, from) {
+        if (to && to.name && ['MeetingCreate', 'MeetingAccountCreate', 'MeetingUpdate'].includes(to.name)) {
+          this.currentPage = to.name
         }
       },
       immediate: true
-    },
-    dialogVisible: {
-      handler: function (nv) {
-        if (!nv) {
-          this.goList()
-        }
-      }
-    }
-  },
-  methods: {
-    startDateChange(val) {
-      this.form.endDate = val
-      this.startTimeChange()
-      if (this.showSchedule) {
-        this.fetchMeetingList()
-      }
-    },
-    startTimeChange() {
-      const { startDate, endDate } = this.form
-      if (this.isSameDate(startDate, endDate)) {
-        this.form.endTime = this.endTimeOptions.start
-      } else {
-        this.form.endTime = this.endTimeOptions.end
-      }
-    },
-    endDateChange() {
-      this.startTimeChange()
-    },
-    repaeatRateChange(val) {
-      if (val === 'everyworkday' && this.form.endType === 'endOneday') {
-        this.form.periodicTimes = 7
-      }
-    },
-    getFullDateTime(date, timeStr) {
-      const hmArr = timeStr.split(':')
-      const h = parseInt(hmArr[0])
-      const s = parseInt(hmArr[1])
-      return new Date(date.getFullYear(), date.getMonth(), date.getDate(), h, s, 0)
-    },
-    isSameDate(start, end) {
-      return dateFormat(start, '{y}-{m}-{d}') === dateFormat(end, '{y}-{m}-{d}')
-    },
-    autoRecordChange(val) {
-      this.auto_record_type = val ? 'cloud' : 'none'
-    },
-    copyText() {
-      const text = this.$refs.details.$el.innerText
-      this.copyFn(text)
-    },
-    copyMeetingLink() {
-      this.copyFn(this.details.join_url)
-    },
-    copyLiveLink() {
-      this.copyFn(this.details.live_config.live_addr)
-    },
-    copyFn(val) {
-      if (!val) return
-      const dom = document.createElement('textarea')
-      document.body.appendChild(dom)
-      dom.value = val
-      dom.select(); // 选择对象
-      document.execCommand('Copy');
-      this.$message({
-        message: '复制成功！',
-        type: 'success'
-      })
-      document.body.removeChild(dom)
-    },
-    joinMeeting() {
-      window.open(this.details.join_url, '_blank');
-    },
-    submitForm(formName) {
-      this.$refs[formName].validate(valid => {
-        if (valid) {
-          if (this.isUpdate) {
-            this.fetchUpdateMeeting()
-          } else {
-            this.fetchCreateMeeting()
-          }
-        } else {
-          return false
-        }
-      })
-    },
-    resetForm(formName) {
-      this.$refs[formName].resetFields()
-    },
-    goList() {
-      this.$router.push('/calendar')
-    },
-    async getDetailsData(params) {
-      const details = await this.fetchMeetingDetails(params)
-      this.details = details
-      const start = timeTrans(details.start_time)
-      const end = timeTrans(details.end_time)
-      this.userid = details.userid
-      this.form.subject = details.subject
-      this.form.startDate = getYMDByDate(start)
-      this.form.startTime = dateFormat(start, '{h}:{i}')
-      this.form.endDate = getYMDByDate(end)
-      this.form.endTime = dateFormat(end, '{h}:{i}')
-      this.form.meeting_type = details.meeting_type
-      if (details.meeting_type === 1) {
-        const recurringRule = details.recurring_rule
-        this.form.recurring_type = recurringRule.recurring_type
-        this.form.until_type = recurringRule.until_type
-        if (recurringRule.until_type === 0) {
-          this.form.until_date = timeTrans(recurringRule.until_date)
-        } else {
-          this.form.until_count = recurringRule.until_count
-        }
-      }
-      if (details.password) {
-        this.form.password = details.password
-        this.form.hasPwd = true
-      }
-      const setting = details.settings
-      this.form.auto_in_waiting_room = setting.auto_in_waiting_room
-      this.form.allow_in_before_host = setting.allow_in_before_host
-      this.form.auto_record_type = setting.auto_record_type
-      if (setting.auto_record_type !== 'none') {
-        this.form.auto_record = true
-      }
-      this.form.mute_enable_join = setting.mute_enable_join
-      if (details.enable_live === 1) {
-        const liveConfig = details.live_config
-        this.form.live_subject = liveConfig.live_subject
-        this.form.live_summary = liveConfig.live_summary
-        this.form.enable_live_password = Boolean(liveConfig.live_password)
-        this.form.live_password = liveConfig.live_password
-        this.form.enable_live_im = liveConfig.enable_live_im
-        this.form.enable_live = true
-      } else {
-        this.form.enable_live = false
-      }
-      if (Array.isArray(details.managers) && details.managers.length > 0) {
-        const _managers = details.managers.map(it => it.user_id)
-        this.form.managers = _managers;
-        this.userList = details.managers
-      }
-    },
-    async showMeetingDetails(obj) {
-      const loading = this.$loading({
-        lock: true,
-        text: '获取腾讯会议详情，请稍后...',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      });
-      const params = {
-        meeting_id: obj.meeting_id,
-        sub_meeting_id: (obj.sub_meetings && obj.sub_meetings.length > 0) ? obj.sub_meetings[0].sub_meeting_id : undefined
-      }
-      const details = await this.fetchMeetingDetails(params)
-      loading.close()
-      this.details = details
-      this.dialogVisible = true
-    },
-    fetchMeetingList() {
-      const date = this.form.startDate
-      const start = dateFormat(date)
-      const end = dateFormat(new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1))
-      const params = {
-        userid: this.schedule.userid,
-        start_time: start,
-        end_time: end
-      }
-      getNonpagedMeetingList(params).then((res) => {
-        if (res.code === 0 && res.data && res.data.list) {
-          console.log(res.data.list)
-          this.schedule.events = res.data.list
-        } else {
-        }
-      }).catch()
-    },
-    fetchUserList(val) {
-      this.searchKeywordsCheckMsg = ''
-      if (!val) return
-      if (this.searchType === 'email' && !EMAIL_REG.test(val)) {
-        this.searchKeywordsCheckMsg = '邮箱格式错误'
-        this.userList = []
-      } else if (this.searchType === 'mobile' && !MOBILE_REG.test(val)) {
-        this.searchKeywordsCheckMsg = '手机号格式错误'
-        this.userList = []
-      } else {
-        const params = {
-          [this.searchType]: val
-        };
-        this.searchKeywordsCheckMsg = ''
-        this.searchUsersloading = true
-        searchUserList(params)
-          .then(res => {
-            this.searchUsersloading = false
-            if (res.data && Array.isArray(res.data.items)) {
-              this.userList = res.data.items
-            }
-          })
-          .catch(() => {})
-      }
-    },
-    getSubmitParams() {
-      const form = this.form
-      const params = {
-        instanceid: 1,
-        userid: this.showSchedule ? this.schedule.userid : undefined,
-        subject: form.subject,
-        start_time: dateFormat(this.startTimestamp),
-        end_time: dateFormat(this.endTimestamp),
-        password: form.password,
-        meeting_type: form.meeting_type,
-        settings: {
-          mute_enable_join: form.mute_enable_join,
-          auto_in_waiting_room: form.auto_in_waiting_room,
-          allow_in_before_host: form.allow_in_before_host,
-          auto_record_type: form.auto_record ? form.auto_record_type : 'none'
-        },
-        enable_live: form.enable_live,
-        managers: form.managers.length > 0 ? form.managers : [this.user.id]
-      }
-      if (form.meeting_type === 1) {
-        params.recurring_rule = {
-          recurring_type: form.recurring_type,
-          until_type: form.until_type,
-          until_date: form.until_type ? undefined : parseInt(form.until_date / 1000),
-          until_count: form.until_type ? form.until_count : undefined
-        }
-      }
-      if (form.enable_live) {
-        params.live_config = {
-          live_subject: form.live_subject,
-          live_summary: form.live_summary,
-          enable_live_password: form.enable_live_password,
-          live_password: form.enable_live_password ? form.live_password : undefined,
-          enable_live_im: form.enable_live_im
-        }
-      }
-      return params
-    },
-    fetchUpdateMeeting() {
-      const params = this.getSubmitParams()
-      params.meeting_id = this.$route.query.meeting_id
-      params.userid = this.userid
-      const loading = this.$loading({
-        lock: true,
-        text: '修改腾讯会议中，请稍后...',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
-      updateMeeting(params).then(res => {
-        loading.close()
-        if (res.code === 0 && res.data && res.data.status) {
-          operateLog({ type: `修改会议，被修改会议meeting_code：${this.details.meeting_code}`, user: this.user })
-          this.$message.success('修改腾讯会议成功')
-          console.log(this.details)
-          console.log(params)
-          this.details.subject = params.subject
-          this.details.start_time = timeTrans(params.start_time)
-          this.details.end_time = timeTrans(params.end_time)
-          this.dialogVisible = true
-        } else {
-          this.$message.error(res.message || res.msg || '创建腾讯会议失败')
-        }
-      })
-    },
-    fetchCreateMeeting() {
-      const params = this.getSubmitParams()
-      const loading = this.$loading({
-        lock: true,
-        text: '创建腾讯会议中，请稍后...',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
-      createMeeting(params).then(res => {
-        loading.close()
-        if (res.code === 0 && res.data.id) {
-          operateLog({ type: `创建会议，被创建会议meeting_code：${res.data.meeting_code}`, user: this.user })
-          this.$message.success('创建腾讯会议成功')
-          this.showMeetingDetails(res.data)
-        } else {
-          this.$message.error(res.message || res.msg || '创建腾讯会议失败')
-        }
-      })
-    },
-    fetchMeetingDetails(params) {
-      return new Promise((resolve, reject) => {
-        getMeetingDetails(params).then(res => {
-          if (res.code === 0 && res.data.id) {
-            resolve(res.data)
-          } else {
-            reject(res)
-          }
-        }).catch((err) => reject(err))
-      })
     }
   }
 }
 </script>
-<style scoped>
-.tx-meeting-container {
-  overflow-y: auto;
-  height: calc(100% - 52px);
-}
-.inner {
-  display: flex;
-  background: #fff;
-  margin: 0 15px;
-  border-radius: 4px;
-  padding-bottom:10px;
-}
-.el-form {
-  flex: 1;
-  max-width: 600px;
-  padding:20px 0 10px;
-}
-.line {
-  text-align: center;
-}
-.right-container {
-  position: relative;
-  width: 45%;
-  box-sizing: border-box;
-  padding-left: 20px;
-}
-.right-container .title {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  line-height: 50px;
-  font-size: 16px;
-  text-align: center;
-}
-.pre-time-range {
-  position: absolute;
-  left: 70px;
-  width: calc(100% - 70px);
-  background: #52b837;
-}
-.search-keywords-checked{
-  color: #F56C6C;
-  font-size: 12px;
-  line-height: 1;
-  padding-top: 4px;
-  position: absolute;
-  top: 100%;
-  right: 0;
-}
-.right-container .el-scrollbar ::v-deep.el-scrollbar__wrap {
-  /* overflow:hidden; */
-}
-.tx-meeting-container ::v-deep.el-dialog__header{
+<style>
+.meeting-success-dialog ::v-deep.el-dialog__header{
   padding-top:14px;
 }
-.tx-meeting-container ::v-deep.el-dialog__headerbtn{
+.meeting-success-dialog ::v-deep.el-dialog__headerbtn{
   top:12px;
   right:12px;
 }
-.tx-meeting-container ::v-deep.el-dialog__body{
+.meeting-success-dialog ::v-deep.el-dialog__body{
   padding:10px 0;
   margin:0 20px;
   border: 1px solid #DBDBDB;
 }
-.tx-meeting-container ::v-deep.el-dialog__footer{
+.meeting-success-dialog ::v-deep.el-dialog__footer{
   padding-bottom:16px;
 }
-.tx-meeting-container ::v-deep.el-dialog .el-form-item{
+.meeting-success-dialog ::v-deep.el-dialog .el-form-item{
   margin:0;
 }
 </style>
\ No newline at end of file

src/pages/meeting/tencent-meeting/meeting-account-create.vue

+<template>
+  <div class="meeting-account-create">
+    <div class="inner">
+      <meeting-form :data="reviewData" :users="userList" @submitForm="handleSubmit" @dateChange="handleDateChange"></meeting-form>
+      <div class="right-container">
+        <div class="title">{{ reviewData.startDate | timeFormat }} {{ reviewData.startDate | timeFormat('星期{a}') }}</div>
+        <schedule :options="options" :data="schedule" :date="reviewData.startDate" />
+        <div class="pre-time-range" :style="{ top: getTop, height: getHeight }"></div>
+      </div>
+    </div>
+    <meeting-success-dialog :dialogVisible.sync="dialogVisible" :details="details"/>
+  </div>
+</template>
+<script>
+import Schedule from '@/components/Schedule'
+import MeetingForm from './components/MeetingForm'
+import MeetingSuccessDialog from '@/components/MeetingSuccessDialog/index'
+import { createMeeting, operateLog, getMeetingDetails, getNonpagedMeetingList } from '@api/common'
+import { timeTrans, getYMDByDate, dateFormat, isSameDate } from '@/utils/dateAlgs'
+import { mapGetters } from 'vuex'
+export default ({
+  data () {
+    return {
+      dialogVisible: false,
+      reviewData: {
+        startDate: '',
+        startTime: '',
+        endDate: '',
+        endTime: ''
+      },
+      userList: [],
+      details: {},
+      userid: '',
+      options: {
+        multi: false, // 是否为多日程
+        start: 0, // init number 0-23
+        end: 24, // init number 1-24且end>start
+        step: 60, // 只接收15, 30, 60三种步伐
+        lineHeight: 40, // init number 时间线间的高度
+        nowBeforeDisabled: true,
+        readonly: true,
+        popoverPos: 'bottom'
+      },
+      schedule: {
+        userid: '',
+        events: []
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['user']),
+    startTimestamp() {
+      return this.getFullDateTime(this.reviewData.startDate, this.reviewData.startTime).getTime()
+    },
+    endTimestamp() {
+      return this.getFullDateTime(this.reviewData.endDate, this.reviewData.endTime).getTime()
+    },
+    getTop() {
+      const timeRange = this.startTimestamp - this.startDotTimestamp
+      const top = timeRange / ((60 * 1000 * this.options.step) / this.options.lineHeight)
+      return top + 56 + 'px'
+    },
+    getHeight() {
+      const start = timeTrans(this.startTimestamp)
+      let end = timeTrans(this.endTimestamp)
+      if (!isSameDate(start, end)) {
+        end = new Date(start.getFullYear(), start.getMonth(), start.getDate(), 24, 0, 0)
+      }
+      const timeRange = end.getTime() - start.getTime()
+      const h = timeRange / ((60 * 1000 * this.options.step) / this.options.lineHeight)
+      return h - 2 + 'px'
+    },
+    startDotTimestamp() {
+      const date = this.reviewData.startDate
+      const startHour = parseInt(this.options.start)
+      return new Date(date.getFullYear(), date.getMonth(), date.getDate(), startHour, 0, 0).getTime()
+    }
+  },
+  filters: {
+    timeFormat(val, fmt) {
+      fmt = fmt || '{y}年{m}月{d}日'
+      return dateFormat(val, fmt)
+    }
+  },
+  components: { Schedule, MeetingForm, MeetingSuccessDialog },
+  created() {
+    const query = this.$route.query
+    console.log(query)
+    if (query.account) {
+      this.userid = query.account
+      const review = {}
+      review.subject = query.subject
+      review.startDate = getYMDByDate(query.start)
+      review.startTime = dateFormat(query.start, '{h}:{i}')
+      review.endDate = getYMDByDate(query.end)
+      review.endTime = dateFormat(query.end, '{h}:{i}')
+      if (query.enable_live === '1') {
+        review.enable_live = true
+        review.live_config = {
+          live_subject: query.live_subject || '',
+          live_summary: query.live_summary || ''
+        }
+      }
+      this.reviewData = review
+    }
+    this.fetchMeetingList()
+  },
+  watch: {
+    dialogVisible: {
+      handler: function (nv) {
+        if (!nv) {
+          this.goList()
+        }
+      }
+    }
+  },
+  methods: {
+    handleSubmit(params) {
+      this.fetchCreateMeeting(params)
+    },
+    handleDateChange(val) {
+      let refreshList = false
+      if (!isSameDate(val.startDate, this.reviewData.startDate)) {
+        refreshList = true
+      }
+      this.reviewData.startDate = val.startDate
+      this.reviewData.startTime = val.startTime
+      this.reviewData.endDate = val.endDate
+      this.reviewData.endTime = val.endTime
+      refreshList && this.fetchMeetingList()
+    },
+    getFullDateTime(date, timeStr) {
+      const hmArr = timeStr.split(':')
+      const h = parseInt(hmArr[0])
+      const s = parseInt(hmArr[1])
+      return new Date(date.getFullYear(), date.getMonth(), date.getDate(), h, s, 0)
+    },
+    goList() {
+      this.$router.push('/calendar')
+    },
+    async showMeetingDetails(obj) {
+      const loading = this.$loading({
+        lock: true,
+        text: '获取腾讯会议详情，请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      const params = {
+        meeting_id: obj.meeting_id
+      }
+      if (Array.isArray(obj.sub_meetings) && obj.sub_meetings.length > 0) {
+        params.sub_meeting_id = obj.sub_meetings[0].sub_meeting_id
+      }
+      const details = await this.fetchMeetingDetails(params)
+      loading.close()
+      this.details = details
+      this.dialogVisible = true
+    },
+    fetchCreateMeeting(params) {
+      const loading = this.$loading({
+        lock: true,
+        text: '创建腾讯会议中，请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      params.userid = this.userid
+      createMeeting(params).then(res => {
+        loading.close()
+        if (res.code === 0 && res.data.id) {
+          operateLog({ type: `创建会议，被创建会议meeting_code：${res.data.meeting_code}`, user: this.user })
+          this.$message.success('创建腾讯会议成功')
+          this.showMeetingDetails(res.data)
+        } else {
+          this.$message.error(res.message || res.msg || '创建腾讯会议失败')
+        }
+      })
+    },
+    fetchMeetingDetails(params) {
+      return new Promise((resolve, reject) => {
+        getMeetingDetails(params).then(res => {
+          if (res.code === 0 && res.data.id) {
+            resolve(res.data)
+          } else {
+            reject(res)
+          }
+        }).catch((err) => reject(err))
+      })
+    },
+    fetchMeetingList() {
+      const date = this.reviewData.startDate
+      const start = dateFormat(date)
+      const end = dateFormat(new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1))
+      const params = {
+        userid: this.userid,
+        start_time: start,
+        end_time: end
+      }
+      getNonpagedMeetingList(params).then((res) => {
+        if (res.code === 0 && res.data && res.data.list) {
+          console.log(res.data.list)
+          this.schedule.events = res.data.list
+        } else {
+        }
+      }).catch()
+    }
+  }
+})
+</script>
+<style scoped>
+.meeting-account-create{
+  overflow-y: auto;
+  height: calc(100% - 52px);
+}
+.inner {
+  display: flex;
+  background: #fff;
+  margin: 0 15px;
+  border-radius: 4px;
+  padding-bottom:10px;
+}
+.right-container {
+  position: relative;
+  width: 45%;
+  box-sizing: border-box;
+  padding-left: 20px;
+}
+.right-container .title {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  line-height: 50px;
+  font-size: 16px;
+  text-align: center;
+}
+.pre-time-range {
+  position: absolute;
+  left: 70px;
+  width: calc(100% - 70px);
+  background: #52b837;
+}
+.search-keywords-checked{
+  color: #F56C6C;
+  font-size: 12px;
+  line-height: 1;
+  padding-top: 4px;
+  position: absolute;
+  top: 100%;
+  right: 0;
+}
+.right-container .el-scrollbar ::v-deep.el-scrollbar__wrap {
+  /* overflow:hidden; */
+}
+.tx-meeting-container ::v-deep.el-dialog__header{
+  padding-top:14px;
+}
+.tx-meeting-container ::v-deep.el-dialog__headerbtn{
+  top:12px;
+  right:12px;
+}
+.tx-meeting-container ::v-deep.el-dialog__body{
+  padding:10px 0;
+  margin:0 20px;
+  border: 1px solid #DBDBDB;
+}
+.tx-meeting-container ::v-deep.el-dialog__footer{
+  padding-bottom:16px;
+}
+.tx-meeting-container ::v-deep.el-dialog .el-form-item{
+  margin:0;
+}
+</style>

src/pages/meeting/tencent-meeting/meeting-create.vue

+<template>
+  <div class="meeting-create">
+    <div class="inner">
+      <meeting-form @submitForm="handleSubmit"></meeting-form>
+    </div>
+    <meeting-success-dialog :dialogVisible.sync="dialogVisible" :details="details"/>
+  </div>
+</template>
+<script>
+import MeetingForm from './components/MeetingForm'
+import MeetingSuccessDialog from '@/components/MeetingSuccessDialog/index'
+import { createMeeting, operateLog, getMeetingDetails } from '@api/common'
+import { mapGetters } from 'vuex'
+export default ({
+  data () {
+    return {
+      dialogVisible: false,
+      details: {}
+    }
+  },
+  computed: {
+    ...mapGetters(['user'])
+  },
+  components: { MeetingForm, MeetingSuccessDialog },
+  watch: {
+    dialogVisible: {
+      handler: function (nv) {
+        if (!nv) {
+          this.goList()
+        }
+      }
+    }
+  },
+  methods: {
+    handleSubmit(params) {
+      console.log(params)
+      this.fetchCreateMeeting(params)
+    },
+    goList() {
+      this.$router.push('/calendar')
+    },
+    async showMeetingDetails(obj) {
+      const loading = this.$loading({
+        lock: true,
+        text: '获取腾讯会议详情，请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      const params = {
+        meeting_id: obj.meeting_id
+      }
+      if (Array.isArray(obj.sub_meetings) && obj.sub_meetings.length > 0) {
+        params.sub_meeting_id = obj.sub_meetings[0].sub_meeting_id
+      }
+      const details = await this.fetchMeetingDetails(params)
+      loading.close()
+      this.details = details
+      this.dialogVisible = true
+    },
+    fetchCreateMeeting(params) {
+      const loading = this.$loading({
+        lock: true,
+        text: '创建腾讯会议中，请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      createMeeting(params).then(res => {
+        loading.close()
+        if (res.code === 0 && res.data.id) {
+          operateLog({ type: `创建会议，被创建会议meeting_code：${res.data.meeting_code}`, user: this.user })
+          this.$message.success('创建腾讯会议成功')
+          this.showMeetingDetails(res.data)
+        } else {
+          this.$message.error(res.message || res.msg || '创建腾讯会议失败')
+        }
+      })
+    },
+    fetchMeetingDetails(params) {
+      return new Promise((resolve, reject) => {
+        getMeetingDetails(params).then(res => {
+          if (res.code === 0 && res.data.id) {
+            console.log(res.data)
+            resolve(res.data)
+          } else {
+            reject(res)
+          }
+        }).catch((err) => reject(err))
+      })
+    }
+  }
+})
+</script>
+<style scoped>
+.meeting-create{
+  overflow-y: auto;
+  height: calc(100% - 52px);
+}
+.inner {
+  background: #fff;
+  margin: 0 15px;
+  border-radius: 4px;
+  padding-bottom:10px;
+}
+</style>

src/pages/meeting/tencent-meeting/meeting-update.vue

+<template>
+  <div class="meeting-update">
+    <div class="inner">
+      <meeting-form :data="reviewData" :users="userList" @submitForm="handleSubmit"></meeting-form>
+    </div>
+    <meeting-success-dialog :dialogVisible.sync="dialogVisible" :details="details"/>
+  </div>
+</template>
+<script>
+import MeetingForm from './components/MeetingForm'
+import MeetingSuccessDialog from '@/components/MeetingSuccessDialog/index'
+import { updateMeeting, operateLog, getMeetingDetails } from '@api/common'
+import { timeTrans, dateFormat, getYMDByDate } from '@/utils/dateAlgs'
+import { mapGetters } from 'vuex'
+const DAY_TIMESTAMP = 8.64e7
+export default ({
+  data () {
+    return {
+      reviewData: {},
+      userList: [],
+      dialogVisible: false,
+      details: {}
+    }
+  },
+  computed: {
+    ...mapGetters(['user'])
+  },
+  components: { MeetingForm, MeetingSuccessDialog },
+  watch: {
+    dialogVisible: {
+      handler: function (nv) {
+        if (!nv) {
+          this.goList()
+        }
+      }
+    }
+  },
+  created() {
+    this.reviewMeeting()
+  },
+  methods: {
+    handleSubmit(params) {
+      this.fetchUpdateMeeting(params)
+    },
+    goList() {
+      this.$router.push('/calendar')
+    },
+    async reviewMeeting() {
+      const params = {
+        meeting_id: this.$route.query.meeting_id
+      }
+      if (this.$route.query.sub_meeting_id) {
+        params.sub_meeting_id = this.$route.query.sub_meeting_id
+      }
+      const details = await this.fetchMeetingDetails(params)
+      const reviewData = {}
+      this.details = details
+      const start = timeTrans(details.start_time)
+      const end = timeTrans(details.end_time)
+      this.userid = details.userid
+      reviewData.subject = details.subject
+      reviewData.startDate = getYMDByDate(start)
+      reviewData.startTime = dateFormat(start, '{h}:{i}')
+      reviewData.endDate = getYMDByDate(end)
+      reviewData.endTime = dateFormat(end, '{h}:{i}')
+      reviewData.meeting_type = details.meeting_type
+      if (details.meeting_type === 1) {
+        const recurringRule = details.recurring_rule
+        reviewData.recurring_rule = {
+          recurring_type: recurringRule.recurring_type,
+          until_type: recurringRule.until_type
+        }
+        if (recurringRule.until_type === 0) {
+          reviewData.recurring_rule.until_date = timeTrans(recurringRule.until_date) - DAY_TIMESTAMP
+        } else {
+          reviewData.recurring_rule.until_count = recurringRule.until_count
+        }
+      }
+      if (details.password) {
+        reviewData.password = details.password
+        reviewData.hasPwd = true
+      }
+      const settings = details.settings
+      reviewData.settings = {
+        auto_in_waiting_room: settings.auto_in_waiting_room,
+        allow_in_before_host: settings.allow_in_before_host,
+        auto_record_type: settings.auto_record_type,
+        mute_enable_join: settings.mute_enable_join
+      }
+      if (settings.auto_record_type !== 'none') {
+        reviewData.auto_record = true
+      }
+      if (details.enable_live === 1) {
+        const liveConfig = details.live_config
+        reviewData.live_config = {
+          live_subject: liveConfig.live_subject || '',
+          live_summary: liveConfig.live_summary || '',
+          enable_live_password: Boolean(liveConfig.live_password),
+          live_password: liveConfig.live_password || '',
+          enable_live_im: liveConfig.enable_live_im
+        }
+        reviewData.enable_live = true
+      } else {
+        reviewData.enable_live = false
+      }
+      if (Array.isArray(details.managers) && details.managers.length > 0) {
+        const _managers = details.managers.map(it => it.user_id)
+        reviewData.managers = _managers;
+        this.userList = details.managers
+      }
+      this.reviewData = reviewData
+      // console.log(reviewData)
+    },
+    async showMeetingDetails(obj) {
+      const loading = this.$loading({
+        lock: true,
+        text: '获取腾讯会议详情，请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      const params = {
+        meeting_id: obj.meeting_id
+      }
+      if (Array.isArray(obj.sub_meetings) && obj.sub_meetings.length > 0) {
+        params.sub_meeting_id = obj.sub_meetings[0].sub_meeting_id
+      }
+      const details = await this.fetchMeetingDetails(params)
+      loading.close()
+      this.details = details
+      this.dialogVisible = true
+    },
+    fetchUpdateMeeting(params) {
+      const loading = this.$loading({
+        lock: true,
+        text: '修改腾讯会议中，请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      params.meeting_id = this.$route.query.meeting_id
+      params.userid = this.userid
+      updateMeeting(params).then(res => {
+        loading.close()
+        if (res.code === 0 && res.data.id) {
+          operateLog({ type: `修改会议，被修改会议meeting_code：${res.data.meeting_code}`, user: this.user })
+          this.$message.success('修改腾讯会议成功')
+          this.showMeetingDetails(res.data)
+        } else {
+          this.$message.error(res.message || res.msg || '修改腾讯会议失败')
+        }
+      })
+    },
+    fetchMeetingDetails(params) {
+      return new Promise((resolve, reject) => {
+        getMeetingDetails(params).then(res => {
+          if (res.code === 0 && res.data.id) {
+            resolve(res.data)
+          } else {
+            reject(res)
+          }
+        }).catch((err) => reject(err))
+      })
+    }
+  }
+})
+</script>
+<style scoped>
+.meeting-update{
+  overflow-y: auto;
+  height: calc(100% - 52px);
+}
+.inner {
+  background: #fff;
+  margin: 0 15px;
+  border-radius: 4px;
+  padding-bottom:10px;
+}
+</style>
\ No newline at end of file

src/pages/search/index.vue

@@ -24,8 +24,11 @@
         <el-row>
           <el-col :span="8">
             <label>会议创建人</label>
-            <el-select v-model="filter.userid" placeholder="搜索用户" size="mini" filterable remote :remote-method="fetchUserList" :loading="searchUsersloading">
-              <el-option :label="user.nickname" :value="user.id" v-for="user in userList" :key="user.id" />
+            <el-select v-model="filter.userid" placeholder="输入关键字搜索" size="mini" filterable remote :remote-method="fetchUserList" :loading="searchUsersloading">
+              <el-option :label="user.username" :value="user.id" v-for="user in userList" :key="user.id" >
+                <span style="float: left">{{ user.username }}</span>
+                <span style="float: right; color: #8492a6; font-size: 13px; margin:0 20px 0 10px;">{{ user.id }}</span>
+              </el-option>
             </el-select>
           </el-col>
           <el-col :span="11">
@@ -39,7 +42,8 @@
         </el-row>
       </div>
       <el-table :data="listData" style="width: 100%" height="calc(100% - 116px)" v-loading="loading">
-        <el-table-column label="会议时间" min-width="160" align="center">
+        <el-table-column prop="meeting_code" label="会议号" width="120"></el-table-column>
+        <el-table-column label="会议时间" min-width="220" align="center">
           <template slot-scope="scope">
             <p style="color: #aeaeae">
               <span style="font-size: 18px; color: #606266">{{ scope.row.start_time | dateFormat('{d}') }}</span>
@@ -76,7 +80,6 @@
             </el-popover>
           </template>
         </el-table-column>
-        <!-- <el-table-column prop="resource" label="会议来源" width="80"></el-table-column> -->
         <el-table-column prop="resource" label="会议状态" min-width="80" align="center">
           <template slot-scope="scope">
             <p
@@ -194,7 +197,7 @@ export default {
     fetchUserList(val) {
       if (val) {
         const params = {
-          nickname: val
+          username: val
         }
         this.searchUsersloading = true;
         searchUserList(params).then((res) => {

src/pages/system/account/index.vue

@@ -7,10 +7,10 @@
         <el-table-column prop="username" label="名称" min-width="120"></el-table-column>
         <el-table-column prop="phone" label="手机号码" min-width="120"></el-table-column>
         <el-table-column prop="email" label="邮箱" min-width="140"></el-table-column>
-        <el-table-column label="操作" min-width="60">
+        <el-table-column label="操作" min-width="60" v-if="isSuperAdmin">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
-            <el-button type="text" size="small" @click="handleDelete(scope.row.userid)"  v-if="isSuperAdmin">删除</el-button>
+            <el-button type="text" size="small" @click="handleDelete(scope.row.userid)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -21,17 +21,17 @@
             <el-input v-model="form.userid" size="small" disabled></el-input>
           </el-form-item>
           <el-form-item label="ID" prop="userid" v-else style="position:relative;">
-            <el-dropdown @command="(val) => searchType = val">
+            <!-- <el-dropdown @command="(val) => searchType = val">
               <el-button style="width:85px;" size="small">
                 {{searchTypeOptions[searchType]}}<i class="el-icon-arrow-down el-icon--right"></i>
               </el-button>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item :command="key" v-for="(value, key) in searchTypeOptions" :key="key">{{value}}</el-dropdown-item>
               </el-dropdown-menu>
-            </el-dropdown>
-            <el-select v-model="form.userid" placeholder="输入关键字搜索" size="small" filterable remote :remote-method="fetchUserList" :loading="searchUsersloading" style="width:220px;">
-              <el-option :label="user.nickname" :value="user.id" v-for="user in userList" :key="user.id" >
-                <span style="float: left">{{ user.nickname }}</span>
+            </el-dropdown> -->
+            <el-select v-model="form.userid" placeholder="输入关键字搜索" size="small" filterable remote :remote-method="fetchUserList" :loading="searchUsersloading" style="width:310px;">
+              <el-option :label="user.username" :value="user.id" v-for="user in userList" :key="user.id" >
+                <span style="float: left">{{ user.username }}</span>
                 <span style="float: right; color: #8492a6; font-size: 13px; margin-left:10px;">{{ user.id }}</span>
               </el-option>
             </el-select>
@@ -96,7 +96,7 @@ export default {
         email: ''
       },
       rules: {
-        userid: [{ required: true, message: '请输入ID', trigger: 'blur' }],
+        userid: [{ required: true, message: '请选择ID', trigger: 'blur' }],
         username: [{ required: true, message: '请输入名称', trigger: 'blur' }],
         phone: [
           { required: true, message: '请输入手机号', trigger: 'blur' },

src/router/routes.js

@@ -7,29 +7,53 @@ export default [
     redirect: '/calendar'
   },
   {
-    path: '/meeting',
+    path: '/meeting-old',
     component: Layout,
     children: [
       {
         path: '',
-        component: () => import('@/pages/meeting/index.vue'),
+        component: () => import('@/pages/meeting/index-old.vue'),
         name: 'CreateLive',
         meta: { title: '创建直播', affix: true }
       }
     ]
   },
   {
-    path: '/meeting-test',
+    path: '/meeting-create',
     component: Layout,
     children: [
       {
         path: '',
-        component: () => import('@/pages/meeting/index-test.vue'),
+        component: () => import('@/pages/meeting/index.vue'),
         name: 'MeetingCreate',
         meta: { title: '创建直播', affix: true }
       }
     ]
   },
+  {
+    path: '/meeting-update',
+    component: Layout,
+    children: [
+      {
+        path: '',
+        component: () => import('@/pages/meeting/index.vue'),
+        name: 'MeetingUpdate',
+        meta: { title: '创建直播', affix: true }
+      }
+    ]
+  },
+  {
+    path: '/meeting-account-create',
+    component: Layout,
+    children: [
+      {
+        path: '',
+        component: () => import('@/pages/meeting/index.vue'),
+        name: 'MeetingAccountCreate',
+        meta: { title: '创建直播', affix: true }
+      }
+    ]
+  },
   {
     path: '/calendar',
     component: Layout,

src/style.scss

@@ -108,3 +108,8 @@ body {
   opacity: 0;
   transform: translateX(30px);
 }
+/* element input,textarea font-family */
+.el-input__inner, .el-textarea__inner{
+  font-family: 'PingFang SC', 'PingFangSC-Regular', 'Source Han Sans CN', -apple-system, 'Microsoft YaHei', 'Helvetica', 'Arial', Verdana,
+    'Hiragino Sans GB', 'Wenquanyi Micro Hei', sans-serif;
+}