提交 163a4602 authored 作者: 王鹏飞's avatar 王鹏飞

feat: 创建会议新增并发数选择

上级 1a8edce0
module.exports = {
domain: 'dev.ezijing.com',
// url: 'https://live-broadcast2-admin.ezijing.com/api',
url: 'https://meetings.ezijing.com/api',
url: 'https://live-center.ezijing.com/api',
webpack: {
externals: {
CKEDITOR: 'window.CKEDITOR',
......
......@@ -86,4 +86,10 @@ export function fileUpload(formData) {
// 获取oss signature
export function getSignature() {
return httpRequest.get('/api/usercenter/aliyun/get-signature')
}
\ No newline at end of file
}
/**
* 获取时间段内的会议个数
*/
export function getMeetingCount(params) {
return httpRequest.get('/api/live/admin/v3/tencent/meeting/count', { params })
}
......@@ -2,17 +2,17 @@
<div class="calendar">
<div class="calendar-h">
<el-button icon="el-icon-arrow-left" size="mini" circle @click="btnClick('pre')"></el-button>
<span>{{curYearMonth}}</span>
<span>{{ curYearMonth }}</span>
<el-button icon="el-icon-arrow-right" size="mini" circle @click="btnClick('next')"></el-button>
</div>
<div class="week-bar">
<span v-for="item in weekList" :key="item">{{item}}</span>
<span v-for="item in weekList" :key="item">{{ item }}</span>
</div>
<div class="calendar-day-list">
<ul :class="{'range-selecting': rangeState.selecting}">
<ul :class="{ 'range-selecting': rangeState.selecting }">
<li v-for="item in dayList" :key="item.getTime()" @click="selectDay(item)">
<div :class="getDayCellClasses(item)">
<span>{{item.getTime() === toDay ? '今' : item.getDate()}}</span>
<span>{{ item.getTime() === toDay ? '今' : item.getDate() }}</span>
</div>
</li>
</ul>
......@@ -20,12 +20,12 @@
</div>
</template>
<script>
import { getMeetingCount } from '@/api/common'
import { dateFormat, getYMDByDate } from '@/utils/dateAlgs'
import getDays from './getDays'
export default {
props: {
defaultDate: {
},
defaultDate: {},
type: {
type: String,
default: 'date' // 'date', 'daterange'
......@@ -45,12 +45,13 @@ export default {
rangeEndDate: null,
rangeDates: [],
selectFirstDate: null,
selectLastDate: null
selectLastDate: null,
dateCountList: []
}
},
computed: {
toDay() {
const date = new Date();
const date = new Date()
const todayTime = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime()
return todayTime
},
......@@ -96,8 +97,6 @@ export default {
immediate: true
}
},
created() {
},
methods: {
init() {
this.activeDate = ''
......@@ -119,7 +118,13 @@ export default {
default: this.selectFirstDate && !this.rangeStartDate && date.getTime() === this.selectFirstDate.getTime(),
'start-date': this.rangeStartDate && date.getTime() === this.rangeStartDate.getTime(),
'end-date': this.rangeStartDate && date.getTime() === this.rangeEndDate.getTime(),
'is-range': this.rangeDates.length > 0 && this.rangeDates.some(d => date.getTime() === d.getTime())
'is-range': this.rangeDates.length > 0 && this.rangeDates.some(d => date.getTime() === d.getTime()),
'has-meeting': this.dateCountList.some(item => {
if (+new Date(item.date) === date.getTime()) {
return !!item.total
}
return false
})
}
return classes
},
......@@ -129,10 +134,11 @@ export default {
},
initDays() {
this.dayList = getDays(this.monthFirstDate)
this.getMeetingCount()
},
btnClick(type) {
const month = type === 'pre' ? this.activeMonth - 1 : this.activeMonth + 1;
this.monthFirstDate = new Date(this.activeYear, month, 1);
const month = type === 'pre' ? this.activeMonth - 1 : this.activeMonth + 1
this.monthFirstDate = new Date(this.activeYear, month, 1)
this.initDays()
},
selectDay(date) {
......@@ -166,7 +172,10 @@ export default {
this.rangeEndDate = isReverse ? this.selectFirstDate : this.selectLastDate
this.getRangeDates()
this.rangeState.selecting = false
this.$emit('change', { dates: [this.rangeStartDate, this.rangeEndDate], daysCount: this.rangeDates.length + 1 })
this.$emit('change', {
dates: [this.rangeStartDate, this.rangeEndDate],
daysCount: this.rangeDates.length + 1
})
}
} else {
}
......@@ -175,88 +184,98 @@ export default {
const sDate = getYMDByDate(this.rangeStartDate)
const eDate = getYMDByDate(this.rangeEndDate)
const datesArr = []
while ((eDate.getTime() - sDate.getTime()) > 0) {
const year = sDate.getFullYear();
const month = sDate.getMonth();
const day = sDate.getDate();
datesArr.push(new Date(year, month, day));
sDate.setDate(day + 1);
while (eDate.getTime() - sDate.getTime() > 0) {
const year = sDate.getFullYear()
const month = sDate.getMonth()
const day = sDate.getDate()
datesArr.push(new Date(year, month, day))
sDate.setDate(day + 1)
}
this.rangeDates = datesArr
},
handleMouseMove(it) {
// if (!this.rangeState.selecting) return;
// console.log(it)
},
getMeetingCount() {
const startTime = this.dayList[0]
const endTime = this.dayList[this.dayList.length - 1]
getMeetingCount({
start_time: dateFormat(startTime, '{y}-{m}-{d}'),
end_time: dateFormat(endTime, '{y}-{m}-{d}')
}).then(res => {
this.dateCountList = res.data
})
}
}
}
</script>
<style scoped>
.calendar{
color:#606266;
width:224px;
<style lang="scss" scoped>
.calendar {
color: #606266;
width: 224px;
}
.calendar-h{
padding:10px 0;
width:204px;
margin:0 auto;
display:flex;
.calendar-h {
padding: 10px 0;
width: 204px;
margin: 0 auto;
display: flex;
}
.calendar-h span{
display:block;
line-height:28px;
flex:1;
text-align:center;
.calendar-h span {
display: block;
line-height: 28px;
flex: 1;
text-align: center;
}
.week-bar{
display:flex;
width:224px;
margin:0 auto;
.week-bar {
display: flex;
width: 224px;
margin: 0 auto;
}
.week-bar>span{
width:32px;
text-align:center;
font-size:12px;
.week-bar > span {
width: 32px;
text-align: center;
font-size: 12px;
}
.calendar-day-list{
width:252px;
margin:0 auto;
.calendar-day-list {
width: 252px;
margin: 0 auto;
}
.calendar-day-list ul{
display:flex;
flex-wrap:wrap;
padding-top:10px;
.calendar-day-list ul {
display: flex;
flex-wrap: wrap;
padding-top: 10px;
}
.calendar-day-list li{
width:32px;
height:32px;
text-align:center;
font-size:12px;
position:relative;
cursor:pointer;
.calendar-day-list li {
width: 32px;
height: 32px;
text-align: center;
font-size: 12px;
position: relative;
cursor: pointer;
}
.calendar-day-list li div{
padding:2px 0;
.calendar-day-list li div {
padding: 2px 0;
}
.calendar-day-list li span{
display:inline-block;
width:24px;
height:24px;
line-height:24px;
.calendar-day-list li span {
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
border-radius: 50%;
-moz-user-select:none; /*火狐*/
-webkit-user-select:none; /*webkit浏览器*/
-ms-user-select:none; /*IE10*/
-khtml-user-select:none; /*早期浏览器*/
user-select:none;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
.calendar-day-list li .grey span{
color:#c0c4cc;
.calendar-day-list li .grey span {
color: #c0c4cc;
}
.calendar-day-list li span:hover{
.calendar-day-list li span:hover {
background-color: #f5f7fa;
}
.calendar-day-list li .today span{
.calendar-day-list li .today span {
background: #ecf5ff;
color: #409eff;
}
......@@ -264,31 +283,46 @@ export default {
.calendar-day-list li .start-date,
.calendar-day-list li .end-date,
.calendar-day-list li .default,
.range-selecting li div:hover{
.range-selecting li div:hover {
background-color: #f2f6fc;
}
.calendar-day-list li .start-date{
border-radius:12px 0 0 12px;
.calendar-day-list li .start-date {
border-radius: 12px 0 0 12px;
margin-left: 2px;
}
.calendar-day-list li .end-date{
border-radius:0 12px 12px 0;
.calendar-day-list li .end-date {
border-radius: 0 12px 12px 0;
margin-right: 2px;
}
.calendar-day-list li .start-date.end-date,
.calendar-day-list li .default,
.range-selecting li div:hover{
border-radius:12px;
margin:0 2px;
.range-selecting li div:hover {
border-radius: 12px;
margin: 0 2px;
}
.calendar-day-list li .current span,
.calendar-day-list li .start-date span,
.calendar-day-list li .end-date span{
.calendar-day-list li .end-date span {
background-color: #409eff;
color:#fff;
color: #fff;
}
.calendar-day-list li .default span,
.range-selecting li:hover span {
background-color: rgba(64, 158, 255, 0.4);
color: #fff;
}
.calendar-day-list li .default span, .range-selecting li:hover span{
background-color: rgba(64,158,255, .4);
color:#fff;
.calendar-day-list li .has-meeting {
position: relative;
&::after {
content: '';
position: absolute;
top: 0;
right: 2px;
width: 4px;
height: 4px;
background-color: #aa1941;
border-radius: 50%;
overflow: hidden;
}
}
</style>
\ No newline at end of file
</style>
<template>
<div class="schedule">
<div class="multi-schedule-header" ref="scheduleHeader">
<div v-for="(schedule, idx) in scheduleList" :key="idx" :style="{'min-width': minWidth}">{{schedule.name}}</div>
<div v-for="(schedule, idx) in scheduleList" :key="idx" :style="{ 'min-width': minWidth }">
{{ schedule.name }}
</div>
</div>
<el-scrollbar ref="scheduleScroll" style="height: calc(100% - 50px)">
<div class="schedule-container">
<div class="time-line" :style="{width: containerWidth}">
<div class="time-dot" :ref="'timeDot-'+ index" v-for="(dot, index) in timeDots" :key="dot.time" :style="{height: timeLineHeight + 'px'}">
<span class="time">{{dot.time}}</span><el-divider></el-divider>
<div class="time-line" :style="{ width: containerWidth }">
<div
class="time-dot"
:ref="'timeDot-' + index"
v-for="(dot, index) in timeDots"
:key="dot.time"
:style="{ height: timeLineHeight + 'px' }"
>
<span class="time">{{ dot.time }}</span
><el-divider></el-divider>
</div>
</div>
<div class="time-now" v-if="isToday" :style="{top: nowTimeTop + 'px', width: containerWidth}">
<span class="time">{{Date.now() | timeFormat}}</span>
<div class="time-now" v-if="isToday" :style="{ top: nowTimeTop + 'px', width: containerWidth }">
<span class="time">{{ Date.now() | timeFormat }}</span>
<el-divider></el-divider>
</div>
<div class="multi-schedule">
<schedule-item :options="options" :schedule="schedule" :date="date" v-for="(schedule, idx) in scheduleList" :key="idx" @details="detailsHandle" @new="newScheduleHandle">
<schedule-item
:options="options"
:schedule="schedule"
:date="date"
v-for="(schedule, idx) in scheduleList"
:key="idx"
@details="detailsHandle"
@new="newScheduleHandle(...arguments, schedule)"
>
<template #content="scope">
<slot name="content" :data= "scope.data"/>
<slot name="content" :data="scope.data" />
</template>
<template #details-popper="scope">
<slot name="details-popper" :data= "scope.data"/>
<slot name="details-popper" :data="scope.data" />
</template>
</schedule-item>
</div>
......@@ -32,7 +49,8 @@
width="440"
trigger="manual"
popper-class="schedule-popover"
v-model="newPopoverVisible">
v-model="newPopoverVisible"
>
<div class="new-schedule-popover-container" style="position:relative;">
<slot name="new-schedule" :data="newScheduleData">
<div style="padding:0 10px;">
......@@ -40,15 +58,42 @@
新建日程
</h5>
<p>
日程主题: <el-input style="width:354px;" v-model="createTitle" placeholder="输入日程主题" size="mini"></el-input>
日程主题:
<el-input style="width:354px;" v-model="createTitle" placeholder="输入日程主题" size="mini"></el-input>
</p>
<p style="margin:10px 0;">
开始时间: <el-date-picker style="width:200px;" v-model="startDate" type="date" placeholder="选择日期" size="mini"></el-date-picker>
<el-time-select style="width:150px;" v-model="startTime" :picker-options="{ step: '00:30' }" placeholder="选择时间" size="mini"></el-time-select>
开始时间:
<el-date-picker
style="width:200px;"
v-model="startDate"
type="date"
placeholder="选择日期"
size="mini"
></el-date-picker>
<el-time-select
style="width:150px;"
v-model="startTime"
:picker-options="{ step: '00:30' }"
placeholder="选择时间"
size="mini"
></el-time-select>
</p>
<p>
开始时间: <el-date-picker style="width:200px;" v-model="endDate" type="date" placeholder="选择日期" size="mini"></el-date-picker>
<el-time-select style="width:150px;" v-model="endTime" :picker-options="{ step: '00:30' }" placeholder="选择时间" size="mini"></el-time-select>
开始时间:
<el-date-picker
style="width:200px;"
v-model="endDate"
type="date"
placeholder="选择日期"
size="mini"
></el-date-picker>
<el-time-select
style="width:150px;"
v-model="endTime"
:picker-options="{ step: '00:30' }"
placeholder="选择时间"
size="mini"
></el-time-select>
</p>
<p style="margin:10px 0;text-align:center;">
<el-button type="primary" size="mini">创建日程</el-button>
......@@ -67,18 +112,30 @@
width="360"
trigger="manual"
popper-class="schedule-popover"
v-model="detailsPopoverVisible">
v-model="detailsPopoverVisible"
>
<slot name="details-popover" :data="detailsData">
<div class="schedule-ev-details">
<h5>{{detailsData.ev.title}}</h5>
<p>{{detailsData.ev.startTime | timeFormat}}-{{detailsData.ev.endTime | timeFormat}}</p>
<h5>{{ detailsData.ev.title }}</h5>
<p>{{ detailsData.ev.startTime | timeFormat }}-{{ detailsData.ev.endTime | timeFormat }}</p>
</div>
</slot>
</el-popover>
<div v-show="detailsPopoverVisible" class="detailsPopoverBtn" :style="detailsPopoverBtnStyle" v-popover:detailsPopover @click="detailsPopoverVisible = !detailsPopoverVisible">
</div>
<div
v-show="detailsPopoverVisible"
class="detailsPopoverBtn"
:style="detailsPopoverBtnStyle"
v-popover:detailsPopover
@click="detailsPopoverVisible = !detailsPopoverVisible"
></div>
<div v-show="newPopoverVisible" class="schedule-mask" @touchmove.prevent @mousewheel.prevent></div>
<div v-show="detailsPopoverVisible" class="details-mask" @click="detailsPopoverVisible = !detailsPopoverVisible" @touchmove.prevent @mousewheel.prevent></div>
<div
v-show="detailsPopoverVisible"
class="details-mask"
@click="detailsPopoverVisible = !detailsPopoverVisible"
@touchmove.prevent
@mousewheel.prevent
></div>
</div>
</template>
<script>
......@@ -94,7 +151,7 @@ export default {
require: true
},
date: {
validator: (value) => {
validator: value => {
return typeof value === 'object' && (value === null || value instanceof Date)
}
}
......@@ -135,6 +192,12 @@ export default {
hasCreate() {
return this.permissions.includes('f_tencentmeeting_create')
},
hasConcurrency500() {
return this.permissions.includes('content_concurrency_500')
},
hasConcurrency1000() {
return this.permissions.includes('content_concurrency_1000')
},
minWidth() {
return this.options.minWidth || '200px'
},
......@@ -151,19 +214,22 @@ export default {
return getTimeDots(this.options.start, this.options.end, this.options.step)
},
startDotTimestamp() {
const date = this.date;
const date = this.date
const startHour = parseInt(this.options.start)
return new Date(date.getFullYear(), date.getMonth(), date.getDate(), startHour, 0, 0).getTime()
},
isToday() {
const now = new Date();
const now = new Date()
const date = this.date
return date.getTime() === new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime() && this.startDotTimestamp < Date.now()
return (
date.getTime() === new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime() &&
this.startDotTimestamp < Date.now()
)
},
nowTimeTop() {
const now = Date.now();
const now = Date.now()
const timeRange = now - this.startDotTimestamp
const top = timeRange * this.timeLineHeight / (this.options.step * 60 * 1000) + 5
const top = (timeRange * this.timeLineHeight) / (this.options.step * 60 * 1000) + 5
return top
}
},
......@@ -239,33 +305,32 @@ export default {
},
mounted() {
// console.log(this.containerWidth)
this.$refs.scheduleScroll.wrap.addEventListener('scroll', this.scrollHandle);
this.$refs.scheduleScroll.wrap.addEventListener('scroll', this.scrollHandle)
window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
this.$refs.scheduleScroll.wrap.removeEventListener('scroll', this.scrollHandle);
this.$refs.scheduleScroll.wrap.removeEventListener('resize', this.handleResize);
this.$refs.scheduleScroll.wrap.removeEventListener('scroll', this.scrollHandle)
this.$refs.scheduleScroll.wrap.removeEventListener('resize', this.handleResize)
},
methods: {
calcWidth() {
let minWidth = this.minWidth;
let minWidth = this.minWidth
if (minWidth && typeof minWidth === 'string') {
minWidth = minWidth.replace('px', '')
minWidth = parseFloat(minWidth)
}
const count = this.scheduleList.length;
const count = this.scheduleList.length
let viewWidth = 0
try {
viewWidth = this.$refs.scheduleScroll.wrap.clientWidth
} catch {
}
} catch {}
if (viewWidth - 50 < minWidth * count) {
return minWidth * count + 'px'
} else {
return 'calc(100% - 50px)'
}
},
handleResize () {
handleResize() {
this.containerWidth = this.calcWidth()
},
documentClick() {
......@@ -286,12 +351,23 @@ export default {
this.detailsPopoverVisible = true
}, 100)
},
newScheduleHandle(val) {
newScheduleHandle(val, data) {
if (!this.hasCreate) {
this.$message.error('你没有权限创建会议')
return
}
this.newScheduleData = Object.assign(val, { date: this.date })
if (data.type === 3 && !this.hasConcurrency500) {
this.$message.error('你没有权限创建500方以上会议')
return
}
if (data.type === 4 && !this.hasConcurrency1000) {
this.$message.error('你没有权限创建1000方以上会议')
return
}
// 1公用用户(用于创建腾讯会议300方会议), 2普通用户, 3公共用户(腾讯会议500方),4公共用户(腾讯会议1000方)',
// 1:300方 2:500方 3:1000方
const concurrencyMap = { 1: 1, 2: 1, 3: 2, 4: 3 }
this.newScheduleData = Object.assign(val, { date: this.date, concurrency: concurrencyMap[data.type] })
this.newPopoverBtnStyle.left = val.x
this.newPopoverBtnStyle.top = val.y
this.newPopoverBtnStyle.width = val.width
......@@ -308,13 +384,13 @@ export default {
}
</script>
<style scoped>
.schedule{
position:relative;
.schedule {
position: relative;
}
.multi-schedule-header{
display:flex;
height:50px;
padding-left:50px;
.multi-schedule-header {
display: flex;
height: 50px;
padding-left: 50px;
overflow-x: auto;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
......@@ -322,124 +398,124 @@ export default {
.multi-schedule-header::-webkit-scrollbar {
display: none;
}
.multi-schedule-header>div{
flex:1;
min-width:300px;
line-height:50px;
text-align:center;
-moz-user-select:none; /*火狐*/
-webkit-user-select:none; /*webkit浏览器*/
-ms-user-select:none; /*IE10*/
-khtml-user-select:none; /*早期浏览器*/
user-select:none;
.multi-schedule-header > div {
flex: 1;
min-width: 300px;
line-height: 50px;
text-align: center;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
.schedule-container{
position:relative;
.schedule-container {
position: relative;
/* height:calc(100% - 50px); */
}
.multi-schedule{
display:flex;
padding:5px 0 0 50px;
.multi-schedule {
display: flex;
padding: 5px 0 0 50px;
/* width:calc(100% - 50px); */
}
.multi-schedule>.schedule{
flex:1;
.multi-schedule > .schedule {
flex: 1;
}
.time-line{
position:absolute;
width:100%;
z-index:0;
left:0;
top:5px;
padding:0 0 10px 50px;
.time-line {
position: absolute;
width: 100%;
z-index: 0;
left: 0;
top: 5px;
padding: 0 0 10px 50px;
}
.time-dot{
position:relative;
.time-dot {
position: relative;
}
.time{
width:50px;
line-height:20px;
font-size:14px;
color:#BEBEBE;
text-align:center;
position:absolute;
left:-50px;
top:-10px;
.time {
width: 50px;
line-height: 20px;
font-size: 14px;
color: #bebebe;
text-align: center;
position: absolute;
left: -50px;
top: -10px;
}
.time-dot ::v-deep.el-divider{
margin:0;
background-color:#E7E7E7;
.time-dot ::v-deep.el-divider {
margin: 0;
background-color: #e7e7e7;
}
.time-dot:last-child{
height:1px !important;
.time-dot:last-child {
height: 1px !important;
}
.time-now{
width:calc(100% - 50px);
padding-left:48px;
position:absolute;
left:0;
top:10px;
z-index:1;
.time-now {
width: calc(100% - 50px);
padding-left: 48px;
position: absolute;
left: 0;
top: 10px;
z-index: 1;
}
.time-now .time{
.time-now .time {
left: 0;
}
.time-now span{
color:#FD1E1E;
background-color:#fff;
padding:5px 0;
.time-now span {
color: #fd1e1e;
background-color: #fff;
padding: 5px 0;
}
.time-now ::v-deep.el-divider{
background-color:#FD0000;
margin:0;
width:calc(100% + 2px);
.time-now ::v-deep.el-divider {
background-color: #fd0000;
margin: 0;
width: calc(100% + 2px);
}
.newPopoverBtn{
position:fixed;
box-sizing:border-box;
padding:4px
.newPopoverBtn {
position: fixed;
box-sizing: border-box;
padding: 4px;
}
.newPopoverBtn p{
color:#fff;
background:#52b837;
border-radius:4px;
height:calc(100%);
position:relative;
.newPopoverBtn p {
color: #fff;
background: #52b837;
border-radius: 4px;
height: calc(100%);
position: relative;
}
.newPopoverBtn p:after{
content:"无主题";
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%)
.newPopoverBtn p:after {
content: '无主题';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.detailsPopoverBtn{
position:fixed;
z-index:99;
.detailsPopoverBtn {
position: fixed;
z-index: 99;
}
.schedule-mask{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
z-index:10;
.schedule-mask {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.details-mask{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
z-index:8;
.details-mask {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 8;
}
.schedule ::v-deep.el-scrollbar__wrap{
.schedule ::v-deep.el-scrollbar__wrap {
overflow-x: auto;
}
.schedule ::v-deep.el-scrollbar__wrap::-webkit-scrollbar{
.schedule ::v-deep.el-scrollbar__wrap::-webkit-scrollbar {
display: none;
}
.schedule ::v-deep.el-scrollbar__bar{
z-index:9;
.schedule ::v-deep.el-scrollbar__bar {
z-index: 9;
}
</style>
\ No newline at end of file
</style>
......@@ -294,6 +294,7 @@ export default {
},
more() {
const query = {
concurrency: this.data.concurrency,
account: this.data.accountId,
start: this.startTimestamp,
end: this.endTimestamp
......@@ -312,6 +313,7 @@ export default {
const form = this.form
const params = {
instanceid: 1,
concurrency: this.data.concurrency,
userid: this.data.accountId,
subject: form.subject,
start_time: dateFormat(this.startTimestamp),
......
......@@ -105,6 +105,7 @@ export default {
const account = {
userid: _accont.userid,
name: _accont.username,
type: _accont.type,
events: []
}
for (let j = 0; j < mList.length; j++) {
......
<template>
<el-form ref="ruleForm" :model="form" :rules="rules" label-width="130px">
<el-form-item label="会议并发数" prop="concurrency">
<el-radio-group v-model="form.concurrency" size="small" v-if="!isEdit">
<el-radio :label="1" border>300方</el-radio>
<el-radio :label="2" border v-if="hasConcurrency500">500方</el-radio>
<el-radio :label="3" border v-if="hasConcurrency1000">1000方</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="会议主题" prop="subject">
<el-input v-model="form.subject" size="small" />
</el-form-item>
......@@ -7,26 +14,70 @@
<el-col :span="11">
<!-- <el-form-item prop="startDate" require> -->
<el-form-item>
<el-date-picker v-model="form.startDate" type="date" placeholder="选择日期" style="width: 100%" size="small" :clearable="timerClear" :editable="timerClear" :picker-options="startDateOptions" :format="startDateShowFormat" @change="startDateChange" :disabled="isReviewRecurring"/>
<el-date-picker
v-model="form.startDate"
type="date"
placeholder="选择日期"
style="width: 100%"
size="small"
:clearable="timerClear"
:editable="timerClear"
:picker-options="startDateOptions"
:format="startDateShowFormat"
@change="startDateChange"
:disabled="isReviewRecurring"
/>
</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" :disabled="isReviewRecurring"/>
<el-time-select
v-model="form.startTime"
style="width: 100%"
:picker-options="startTimeOptions"
placeholder="选择时间"
size="small"
:clearable="timerClear"
:editable="timerClear"
@change="startTimeChange"
:disabled="isReviewRecurring"
/>
</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" :format="endDateShowFormat" @change="endDateChange" :disabled="isReviewRecurring"/>
<el-date-picker
v-model="form.endDate"
type="date"
placeholder="选择日期"
style="width: 100%"
size="small"
:clearable="timerClear"
:editable="timerClear"
:picker-options="endDateOptions"
:format="endDateShowFormat"
@change="endDateChange"
:disabled="isReviewRecurring"
/>
</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" @change="dateChange" :disabled="isReviewRecurring"/>
<el-time-select
v-model="form.endTime"
style="width: 100%"
:picker-options="endTimeOptions"
placeholder="选择时间"
size="small"
:clearable="timerClear"
:editable="timerClear"
@change="dateChange"
:disabled="isReviewRecurring"
/>
</el-form-item>
</el-col>
</el-form-item>
......@@ -38,30 +89,66 @@
</el-col>
</el-form-item>
<el-form-item label="周期会议">
<el-switch v-model="form.meeting_type" :active-value="1" :inactive-value="0" :disabled="isReviewRecurring"/>
<el-switch v-model="form.meeting_type" :active-value="1" :inactive-value="0" :disabled="isReviewRecurring" />
</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>
<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_rule.recurring_type" placeholder="选择重复频率" size="small" @change="recurringTypeChange" :disabled="isReviewRecurring">
<el-option :label="item" :value="index" v-for="(item, index) in recurringTypeOptions" :key="index"/>
<el-select
style="width: 100%"
v-model="form.recurring_rule.recurring_type"
placeholder="选择重复频率"
size="small"
@change="recurringTypeChange"
:disabled="isReviewRecurring"
>
<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.recurring_rule.until_type" placeholder="请选择" size="small" :disabled="isReviewRecurring">
<el-select
style="width: 100%"
v-model="form.recurring_rule.until_type"
placeholder="请选择"
size="small"
:disabled="isReviewRecurring"
>
<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.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" :disabled="isReviewRecurring" />
<el-input-number v-else v-model="form.recurring_rule.until_count" :min="1" :max="50" size="small" controls-position="right" @change="setUntilDate" :disabled="isReviewRecurring"></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"
:disabled="isReviewRecurring"
/>
<el-input-number
v-else
v-model="form.recurring_rule.until_count"
:min="1"
:max="50"
size="small"
controls-position="right"
@change="setUntilDate"
:disabled="isReviewRecurring"
></el-input-number>
</el-col>
</el-form-item>
<el-form-item label="指定会议管理员">
......@@ -77,19 +164,37 @@
<span style="float: right; color: #8492a6; font-size: 13px; margin:0 20px 0 10px;" v-else>ID:{{ user.id }}</span>
</el-option>
</el-select> -->
<user-search v-model="form.managers" :fetchApi="fetchApiSearch" :defaultList="userList" :options="{ size: 'small', multiple: true, clearable: true }"/>
<user-search
v-model="form.managers"
:fetchApi="fetchApiSearch"
:defaultList="userList"
:options="{ size: 'small', multiple: true, clearable: true }"
/>
</el-col>
</el-form-item>
<el-form-item label="会议主持人">
<el-select style="width: 100%" v-model="form.hosts" placeholder="请选择腾讯会议用户,支持关键字搜索" size="small" multiple filterable remote :remote-method="fetchTxAccountList" :loading="searchLoading" clearable>
<el-option :label="user.username" :value="user.userid" v-for="user in txAccountList" :key="user.id" >
<span style="float: left">
{{ user.username }}
<template v-if="user.phone">(手机号:{{user.phone}})</template>
</span>
<span style="float: right; color: #8492a6; font-size: 13px; margin:0 20px 0 10px;" v-if="user.email">邮箱:{{ user.email }}</span>
</el-option>
</el-select>
<el-select
style="width: 100%"
v-model="form.hosts"
placeholder="请选择腾讯会议用户,支持关键字搜索"
size="small"
multiple
filterable
remote
:remote-method="fetchTxAccountList"
:loading="searchLoading"
clearable
>
<el-option :label="user.username" :value="user.userid" v-for="user in txAccountList" :key="user.id">
<span style="float: left">
{{ user.username }}
<template v-if="user.phone">(手机号:{{ user.phone }})</template>
</span>
<span style="float: right; color: #8492a6; font-size: 13px; margin:0 20px 0 10px;" v-if="user.email"
>邮箱:{{ user.email }}</span
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="会议设置" style="margin-bottom:2px;">
<el-col :span="10">
......@@ -97,7 +202,16 @@
</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-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>
......@@ -131,8 +245,21 @@
<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
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>
......@@ -140,7 +267,7 @@
<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">{{btnText}}</el-button>
<el-button type="primary" @click="submitForm('ruleForm')" size="mini">{{ btnText }}</el-button>
<!-- <el-button @click="resetForm('ruleForm')" size="mini">重置</el-button> -->
<el-button @click="goList" size="mini">取消</el-button>
</el-form-item>
......@@ -148,7 +275,15 @@
</template>
<script>
import UserSearch from '@/components/UserSearch/index'
import { timeTrans, dateFormat, getYMDByDate, getTimestampYMD, getCurHalfHour, computedDateByRateTimes, computedTimesByRateDate } from '@/utils/dateAlgs'
import {
timeTrans,
dateFormat,
getYMDByDate,
getTimestampYMD,
getCurHalfHour,
computedDateByRateTimes,
computedTimesByRateDate
} from '@/utils/dateAlgs'
import { searchUserList } from '@api/common'
import { getTxAccountList } from '@api/tencent'
import { mapGetters } from 'vuex'
......@@ -237,6 +372,7 @@ export default {
timerClear: false,
// startDateShowFormat: 'yyyy-MM-dd',
form: {
concurrency: 1,
subject: '',
startDate: nowDate,
startTime: getCurHalfHour('start'),
......@@ -299,6 +435,15 @@ export default {
},
computed: {
...mapGetters(['user']),
isEdit() {
return !!this.data
},
hasConcurrency500() {
return this.$store.state.user.permissions?.includes('content_concurrency_500')
},
hasConcurrency1000() {
return this.$store.state.user.permissions?.includes('content_concurrency_1000')
},
startDateShowFormat() {
const date = this.form.startDate
if (typeof date === 'object' && date instanceof Date) {
......@@ -445,7 +590,7 @@ export default {
},
watch: {
data: {
handler: function (val) {
handler: function(val) {
if (val && val.startDate) {
console.log(this.reviewList)
this.userList = this.reviewList.userList
......@@ -562,6 +707,7 @@ export default {
const form = this.form
const params = {
instanceid: 1,
concurrency: form.concurrency,
subject: form.subject,
start_time: dateFormat(this.startTimestamp),
end_time: dateFormat(this.endTimestamp),
......@@ -623,12 +769,12 @@ export default {
.el-form {
flex: 1;
max-width: 540px;
padding:20px 0 10px;
padding: 20px 0 10px;
}
.line {
text-align: center;
}
.el-form ::v-deep.el-input-number__increase{
margin-top:1px;
.el-form ::v-deep.el-input-number__increase {
margin-top: 1px;
}
</style>
\ No newline at end of file
</style>
<template>
<div class="meeting-account-create">
<div class="inner">
<meeting-form :data="reviewData" :users="userList" @submitForm="handleSubmit" @dateChange="handleDateChange"></meeting-form>
<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>
<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"/>
<meeting-success-dialog :dialogVisible.sync="dialogVisible" :details="details" />
</div>
</template>
<script>
......@@ -18,8 +25,8 @@ import MeetingSuccessDialog from '@/components/MeetingSuccessDialog/index'
import { createMeeting, getMeetingDetails, getNonpagedMeetingList } from '@api/common'
import { timeTrans, getYMDByDate, dateFormat, isSameDate } from '@/utils/dateAlgs'
import { mapGetters } from 'vuex'
export default ({
data () {
export default {
data() {
return {
dialogVisible: false,
reviewData: {
......@@ -107,7 +114,7 @@ export default ({
},
watch: {
dialogVisible: {
handler: function (nv) {
handler: function(nv) {
if (!nv) {
this.goList()
}
......@@ -144,7 +151,7 @@ export default ({
text: '获取腾讯会议详情,请稍后...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
})
const params = {
meeting_id: obj.meeting_id
}
......@@ -163,6 +170,8 @@ export default ({
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
const query = this.$route.query
params.concurrency = query.concurrency ? parseInt(query.concurrency) || 1 : 1
params.userid = this.userid
createMeeting(params).then(res => {
loading.close()
......@@ -176,13 +185,15 @@ export default ({
},
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))
getMeetingDetails(params)
.then(res => {
if (res.code === 0 && res.data.id) {
resolve(res.data)
} else {
reject(res)
}
})
.catch(err => reject(err))
})
},
fetchMeetingList() {
......@@ -194,19 +205,21 @@ export default ({
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()
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{
.meeting-account-create {
overflow-y: auto;
height: calc(100% - 52px);
}
......@@ -215,7 +228,7 @@ export default ({
background: #fff;
margin: 0 15px;
border-radius: 4px;
padding-bottom:10px;
padding-bottom: 10px;
}
.right-container {
position: relative;
......@@ -238,8 +251,8 @@ export default ({
width: calc(100% - 70px);
background: #52b837;
}
.search-keywords-checked{
color: #F56C6C;
.search-keywords-checked {
color: #f56c6c;
font-size: 12px;
line-height: 1;
padding-top: 4px;
......@@ -250,22 +263,22 @@ export default ({
.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__header {
padding-top: 14px;
}
.tx-meeting-container ::v-deep.el-dialog__headerbtn{
top:12px;
right:12px;
.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__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__footer {
padding-bottom: 16px;
}
.tx-meeting-container ::v-deep.el-dialog .el-form-item{
margin:0;
.tx-meeting-container ::v-deep.el-dialog .el-form-item {
margin: 0;
}
</style>
<template>
<div class="account">
<h5>账号管理 <el-button style="float:right;margin:12px 30px 0 0" size="mini" type="primary" plain @click="handleAdd" v-if="hasCreate">新增账号</el-button></h5>
<h5>
账号管理
<el-button
style="float:right;margin:12px 30px 0 0"
size="mini"
type="primary"
plain
@click="handleAdd"
v-if="hasCreate"
>新增账号</el-button
>
</h5>
<div class="inner">
<div class="search-filter">
<div class="filter-item">
......@@ -22,23 +33,38 @@
<div class="filter-item">
<el-button type="primary" icon="el-icon-search" size="mini" @click="fetchAccountList">查询</el-button>
<el-button icon="el-icon-refresh-left" size="mini" @click="reset">重置</el-button>
<el-button type="text" size="mini" @click="isCollapse = !isCollapse">{{isCollapse ? '收起':'展开'}}</el-button>
<el-button type="text" size="mini" @click="isCollapse = !isCollapse">{{
isCollapse ? '收起' : '展开'
}}</el-button>
</div>
</div>
<div class="delete-bar" v-if="hasDelete">
<i class="el-icon-warning"></i> 已选择 <span class="num">{{selection.length || 0}}</span><el-button type="text" size="m" :disabled="!selection.length" @click="handleDelete('')" style="margin-left:15px;">删除</el-button>
<i class="el-icon-warning"></i> 已选择 <span class="num">{{ selection.length || 0 }}</span>
<el-button
type="text"
size="m"
:disabled="!selection.length"
@click="handleDelete('')"
style="margin-left:15px;"
>删除</el-button
>
</div>
<div class="table-container">
<el-table :data="listData" style="width: 100%;" height="100%" v-loading="loading" @selection-change="handleSelectionChange">
<el-table
:data="listData"
style="width: 100%;"
height="100%"
v-loading="loading"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="45" v-if="hasDelete" />
<el-table-column prop="username" label="姓名" min-width="120" />
<el-table-column prop="phone" label="手机号码" min-width="80"/>
<el-table-column prop="email" label="邮箱" min-width="140"/>
<el-table-column prop="userid" label="用户ID" min-width="120"/>
<el-table-column label="用户类型" min-width="80">
<el-table-column prop="phone" label="手机号码" min-width="80" />
<el-table-column prop="email" label="邮箱" min-width="140" />
<el-table-column prop="userid" label="用户ID" min-width="120" />
<el-table-column label="用户类型" min-width="90">
<template slot-scope="{ row }">
<span v-if="row.type === 2">普通用户</span>
<span v-else>虚拟会议室</span>
<span>{{ userType(row.type) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" min-width="80" v-if="hasUpdate">
......@@ -50,7 +76,16 @@
</el-table>
</div>
<div class="footer-bar">
<el-pagination :current-page.sync="curPage" :page-size.sync="pageSize" :page-sizes="[10, 20, 50, 100]" layout="total, prev, pager, next, sizes, jumper" :total="total" @current-change="pageChange" @size-change="pageChange" style="text-align:right;"></el-pagination>
<el-pagination
:current-page.sync="curPage"
:page-size.sync="pageSize"
:page-sizes="[10, 20, 50, 100]"
layout="total, prev, pager, next, sizes, jumper"
:total="total"
@current-change="pageChange"
@size-change="pageChange"
style="text-align:right;"
></el-pagination>
</div>
</div>
<el-dialog :title="domicTitle" :visible.sync="dialogVisible" width="420px" center @close="handleDialogClose">
......@@ -59,7 +94,12 @@
<el-input v-model="form.userid" size="small" disabled></el-input>
</el-form-item>
<el-form-item label="ID" prop="userid" v-else>
<user-search v-model="form.userid" @select="handleSelect" :fetchApi="fetchApiSearch" :options="{ size: 'small' }"/>
<user-search
v-model="form.userid"
@select="handleSelect"
:fetchApi="fetchApiSearch"
:options="{ size: 'small' }"
/>
</el-form-item>
<el-form-item label="名称" prop="username">
<el-input v-model="form.username" size="small"></el-input>
......@@ -92,12 +132,12 @@ const defaultForm = {
}
export default {
components: { UserSearch },
data () {
data() {
const phoneReg = /^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 checkMobile = (rule, value, callback) => {
if (value) {
if (!phoneReg.test(value)) {
callback(new Error('手机号格式错误'));
callback(new Error('手机号格式错误'))
} else {
callback()
}
......@@ -107,7 +147,7 @@ export default {
const checkEmail = (rule, value, callback) => {
if (value) {
if (!emailReg.test(value)) {
callback(new Error('邮箱格式错误'));
callback(new Error('邮箱格式错误'))
} else {
callback()
}
......@@ -173,6 +213,15 @@ export default {
this.fetchAccountList()
},
methods: {
userType(type) {
const map = {
1: '虚拟会议室300方',
2: '普通用户',
3: '虚拟会议室500方',
4: '虚拟会议室1000方'
}
return map[type] || type
},
handleSelectionChange(val) {
this.selection = val
},
......@@ -182,11 +231,13 @@ export default {
this.form.phone = val.mobile
},
reset() {
Object.keys(this.filter).map(key => { this.filter[key] = '' })
Object.keys(this.filter).map(key => {
this.filter[key] = ''
})
this.fetchAccountList()
},
handleDialogClose() {
this.$refs.ruleForm.resetFields();
this.$refs.ruleForm.resetFields()
this.dialogVisible = false
this.form = Object.assign({}, defaultForm)
},
......@@ -210,20 +261,22 @@ export default {
this.$confirm('此操作将删除所选中项的数据, 是否继续执行?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(() => {
this.fetchDeleteAccount(ids)
}).catch(() => {});
})
.then(() => {
this.fetchDeleteAccount(ids)
})
.catch(() => {})
},
pageChange() {
this.fetchAccountList()
},
handleBtn() {
this.$refs.ruleForm.validate((valid) => {
this.$refs.ruleForm.validate(valid => {
if (valid) {
this.dialogType === 'add' ? this.fetchCreateAccount() : this.fetchUpdateAccount()
this.dialogVisible = false
}
});
})
},
fetchAccountList() {
const params = {
......@@ -240,7 +293,7 @@ export default {
if (params[key] === '') delete params[key]
})
this.loading = true
getTxAccountList(params).then((res) => {
getTxAccountList(params).then(res => {
this.loading = false
if (res.code === 0 && res.data.data) {
this.listData = res.data.data
......@@ -256,7 +309,7 @@ export default {
phone: form.phone,
email: form.email
}
createTxAccount(params).then((res) => {
createTxAccount(params).then(res => {
if (res.code === 0 && res.data.id) {
this.$message.success('创建账户成功')
this.fetchAccountList()
......@@ -272,7 +325,7 @@ export default {
phone,
email
}
updateTxAccount(userid, params).then((res) => {
updateTxAccount(userid, params).then(res => {
if (res.code === 0 && res.data.status === true) {
this.$message.success('更新账户成功')
this.fetchAccountList()
......@@ -282,7 +335,7 @@ export default {
})
},
fetchDeleteAccount(userids) {
deleteTxAccount({ userids }).then((res) => {
deleteTxAccount({ userids }).then(res => {
if (res.code === 0 && res.data.status === true) {
this.$message.success('删除账户成功')
this.fetchAccountList()
......@@ -296,50 +349,50 @@ export default {
}
</script>
<style scoped>
.account{
height:100%;
.account {
height: 100%;
}
h5{
h5 {
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
color:#333;
color: #333;
font-weight: 500;
line-height:50px;
text-indent:20px;
line-height: 50px;
text-indent: 20px;
}
.inner{
.inner {
height: calc(100% - 50px - 15px);
background: #FFFFFF;
background: #ffffff;
border-radius: 10px;
margin:0 16px;
box-sizing:border-box;
padding:14px 14px 6px;
display:flex;
flex-direction:column;
margin: 0 16px;
box-sizing: border-box;
padding: 14px 14px 6px;
display: flex;
flex-direction: column;
}
.table-container{
flex:1;
.table-container {
flex: 1;
}
.search-filter{
display:flex;
.search-filter {
display: flex;
flex-wrap: wrap;
padding:10px;
padding: 10px;
}
.search-filter .filter-item{
width:33.33%;
margin-bottom:15px;
.search-filter .filter-item {
width: 33.33%;
margin-bottom: 15px;
}
.search-filter label{
display:inline-block;
width:60px;
text-align:right;
padding-right:10px;
.search-filter label {
display: inline-block;
width: 60px;
text-align: right;
padding-right: 10px;
}
.search-filter ::v-deep.el-input{
.search-filter ::v-deep.el-input {
width: calc(100% - 120px);
}
.search-keywords-checked{
color: #F56C6C;
.search-keywords-checked {
color: #f56c6c;
font-size: 12px;
line-height: 1;
padding-top: 4px;
......@@ -347,30 +400,31 @@ h5{
top: 100%;
right: 0;
}
.footer-bar{
padding:8px 0 4px;
.footer-bar {
padding: 8px 0 4px;
}
.delete-bar{
padding:0 20px;
.delete-bar {
padding: 0 20px;
background: #ecf5ff;
border: #b3d8ff 1px solid;
border-radius:4px;
margin-bottom:15px;
border-radius: 4px;
margin-bottom: 15px;
}
.delete-bar i, .delete-bar .num{
color:#409EFF;
.delete-bar i,
.delete-bar .num {
color: #409eff;
}
.account ::v-deep.el-dialog__header{
padding-top:14px;
.account ::v-deep.el-dialog__header {
padding-top: 14px;
}
.account ::v-deep.el-dialog__headerbtn{
top:12px;
right:12px;
.account ::v-deep.el-dialog__headerbtn {
top: 12px;
right: 12px;
}
.account ::v-deep.el-dialog__body{
padding:10px 20px
.account ::v-deep.el-dialog__body {
padding: 10px 20px;
}
.account ::v-deep.el-dialog__footer{
padding-bottom:16px;
.account ::v-deep.el-dialog__footer {
padding-bottom: 16px;
}
</style>
\ No newline at end of file
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论