437 lines
16 KiB
Vue
437 lines
16 KiB
Vue
|
<template>
|
|||
|
|
<div class="page">
|
|||
|
|
<div class="pcHome" v-if="viewFlag">
|
|||
|
|
<div class="imgBg"></div>
|
|||
|
|
<div class="enterRoom">
|
|||
|
|
<div class="title">智慧仲裁多人会议</div>
|
|||
|
|
<div class="enterRoomBtn">
|
|||
|
|
<el-form :model="roomidForm" :rules="rules" ref="ruleForm" v-if="roomViewFlag">
|
|||
|
|
<el-form-item prop="roomId">
|
|||
|
|
<el-input placeholder="请输入房间号" v-model="roomidForm.roomId">
|
|||
|
|
<template slot="append">
|
|||
|
|
<el-button type="primary" icon="el-icon-circle-plus-outline"
|
|||
|
|
@click="addRoom">新建会议</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
<div class="enterRoomBtn">
|
|||
|
|
<el-form :model="roomidForm1" :rules="rules1" ref="ruleForm1">
|
|||
|
|
<el-form-item prop="roomId1">
|
|||
|
|
<el-input placeholder="请输入房间号" v-model="roomidForm1.roomId1">
|
|||
|
|
<template slot="append"><el-button type="primary" icon="el-icon-circle-plus-outline"
|
|||
|
|
@click="enterRoom">进入房间</el-button></template>
|
|||
|
|
</el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="enterRoom" v-if="roomViewFlag">
|
|||
|
|
<div class="title">预约会议</div>
|
|||
|
|
<div style="color: red;margin-bottom: 15px;">注意：预约会议起始时间间隔至少20分钟</div>
|
|||
|
|
<el-button class="btn" style="margin-bottom: 20px;" type="primary" icon="el-icon-circle-plus-outline"
|
|||
|
|
@click="reservation">预约会议</el-button>
|
|||
|
|
<el-form :model="roomidForm2" :rules="rules2" ref="ruleForm2">
|
|||
|
|
<el-form-item prop="roomId2">
|
|||
|
|
<el-input class="btn" v-if="clickFlag" v-model="roomidForm2.roomId2"
|
|||
|
|
placeholder="请输入房间号"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item prop="timer">
|
|||
|
|
<el-date-picker class="btn1" v-if="clickFlag" v-model="roomidForm2.timer" type="datetimerange"
|
|||
|
|
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
|
|||
|
|
</el-date-picker>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
<el-button class="btn" v-if="clickFlag" style="margin-top: 20px;" type="primary"
|
|||
|
|
@click="submitRoom">确认创建</el-button>
|
|||
|
|
</div>
|
|||
|
|
<div class="reservationMeet" v-if="roomViewFlag">
|
|||
|
|
<div class="title">预约会议列表</div>
|
|||
|
|
<div class="meetTable">
|
|||
|
|
<el-table :data="tableData" style="width: 100%" :header-cell-style="getRowClass">
|
|||
|
|
<el-table-column prop="roomId" align="center" label="房间号">
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="scheduleStartTime" align="center" :show-overflow-tooltip="true" label="预约时间">
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="操作" align="center" prop="caseStatusName">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-button size="mini" type="text" @click="clickRoom(scope.row)"
|
|||
|
|
icon="el-icon-video-camera">入会</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="phoneHome" v-if="!viewFlag">
|
|||
|
|
<div class="enterRoomPhone">
|
|||
|
|
<div class="title">智慧仲裁多人会议</div>
|
|||
|
|
<el-form :model="roomidForm1" :rules="rules1" ref="ruleForm1">
|
|||
|
|
<el-form-item prop="roomId1">
|
|||
|
|
<el-input placeholder="请输入房间号" v-model="roomidForm1.roomId1">
|
|||
|
|
<template slot="append"><el-button type="primary" icon="el-icon-circle-plus-outline"
|
|||
|
|
@click="enterRoom">进入房间</el-button></template>
|
|||
|
|
</el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import moment from "moment";
|
|||
|
|
import axios from 'axios'
|
|||
|
|
export default {
|
|||
|
|
name: "homeKit",
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
tableData: [],
|
|||
|
|
viewFlag: true,
|
|||
|
|
roomidForm: {},
|
|||
|
|
roomidForm1: {},
|
|||
|
|
roomidForm2: {},
|
|||
|
|
clickFlag: false,
|
|||
|
|
roomViewFlag: false,
|
|||
|
|
rules: {
|
|||
|
|
roomId: [
|
|||
|
|
{ required: true, message: '请输入房间号', trigger: 'blur' },
|
|||
|
|
{ min: 6, max: 6, message: '长度在6个字符', trigger: 'blur' },
|
|||
|
|
{ pattern: /^[0-9]+$/, message: '只能输入数字', trigger: 'blur' }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
rules1: {
|
|||
|
|
roomId1: [
|
|||
|
|
{ required: true, message: '请输入房间号', trigger: 'blur' },
|
|||
|
|
{ min: 6, max: 10, message: '长度在6-10个字符', trigger: 'blur' },
|
|||
|
|
{ pattern: /^[0-9]+$/, message: '只能输入数字', trigger: 'blur' }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
rules2: {
|
|||
|
|
roomId2: [
|
|||
|
|
{ required: true, message: '请输入房间号', trigger: 'blur' },
|
|||
|
|
{ min: 6, max: 6, message: '长度在6-10个字符', trigger: 'blur' },
|
|||
|
|
{ pattern: /^[0-9]+$/, message: '只能输入数字', trigger: 'blur' }
|
|||
|
|
],
|
|||
|
|
timer: [
|
|||
|
|
{ required: true, message: '请输入起始时间', trigger: 'blur' },
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
userId: 1,
|
|||
|
|
userName: '',
|
|||
|
|
caseId: ""
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
var sUserAgent = navigator.userAgent.toLowerCase();
|
|||
|
|
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
|
|||
|
|
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
|
|||
|
|
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
|
|||
|
|
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
|
|||
|
|
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
|
|||
|
|
var bIsAndroid = sUserAgent.match(/android/i) == "android";
|
|||
|
|
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
|
|||
|
|
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
|
|||
|
|
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
|
|||
|
|
this.viewFlag = false;
|
|||
|
|
} else {
|
|||
|
|
this.viewFlag = true;
|
|||
|
|
}
|
|||
|
|
let caseId = this.$route.query.id;
|
|||
|
|
this.caseId = caseId;
|
|||
|
|
let userId = this.$route.query.userId;
|
|||
|
|
let userName = this.$route.query.name;
|
|||
|
|
if (caseId) {
|
|||
|
|
this.userId = userId;
|
|||
|
|
this.userName = userName;
|
|||
|
|
this.roomViewFlag = true;
|
|||
|
|
axios({
|
|||
|
|
method: "get",
|
|||
|
|
url: `https://api.xayunmei.com/zhongcaiapi/caseApplication/reserveConferenceList?caseId=${caseId}`,
|
|||
|
|
}).then(res => {
|
|||
|
|
// this.userName = res.data.data.userName;
|
|||
|
|
console.log(res, "tabletabletabletabletabletabletabletabletabletabletabletabletabletable");
|
|||
|
|
this.tableData = res.data.data;
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 新建房间
|
|||
|
|
addRoom() {
|
|||
|
|
axios({
|
|||
|
|
method: "post",
|
|||
|
|
url: "https://api.xayunmei.com/zhongcaiapi/caseApplication/sendRoomNoMessage",
|
|||
|
|
data: {
|
|||
|
|
id: this.caseId,
|
|||
|
|
roomNo: this.roomidForm.roomId
|
|||
|
|
}
|
|||
|
|
}).then(res => {
|
|||
|
|
console.log(res);
|
|||
|
|
// this.data = res.data /* 将拿到的值，赋值给data */
|
|||
|
|
})
|
|||
|
|
this.$refs["ruleForm"].validate((valid) => {
|
|||
|
|
if (valid) {
|
|||
|
|
this.$router.push({
|
|||
|
|
name: 'Room',
|
|||
|
|
query: {
|
|||
|
|
roomId: this.roomidForm.roomId,
|
|||
|
|
userId: this.userId,
|
|||
|
|
userName: this.userName
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 获取用户名
|
|||
|
|
async getuserName(params) {
|
|||
|
|
await axios({
|
|||
|
|
method: "get",
|
|||
|
|
url: `https://api.xayunmei.com/zhongcaiapi/system/user/selectUserById?userId=${params}`,
|
|||
|
|
}).then(res => {
|
|||
|
|
this.userName = res.data.data.userName;
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
// 进入会议
|
|||
|
|
async enterRoom() {
|
|||
|
|
let roomAnduser = this.roomidForm1.roomId1;
|
|||
|
|
let idArr = [roomAnduser.slice(0, 6), roomAnduser.slice(6)];
|
|||
|
|
this.roomidForm1.roomId1 = this.roomidForm1.roomId1.substr(0, 6);
|
|||
|
|
if (idArr[1]) {
|
|||
|
|
await this.getuserName(idArr[1]);
|
|||
|
|
}
|
|||
|
|
this.$refs["ruleForm1"].validate((valid) => {
|
|||
|
|
if (valid) {
|
|||
|
|
this.$router.push({
|
|||
|
|
name: 'Room',
|
|||
|
|
query: {
|
|||
|
|
roomId1: idArr[0],
|
|||
|
|
userId: idArr[1] || this.userId,
|
|||
|
|
userName: this.userName
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 预约会议
|
|||
|
|
reservation() {
|
|||
|
|
this.clickFlag = !this.clickFlag;
|
|||
|
|
},
|
|||
|
|
getRowClass() {
|
|||
|
|
return 'background:rgb(55, 55, 53)'
|
|||
|
|
},
|
|||
|
|
// 预约会议进入按钮操作
|
|||
|
|
clickRoom(row) {
|
|||
|
|
axios({
|
|||
|
|
method: "get",
|
|||
|
|
url: `https://api.xayunmei.com/zhongcaiapi/system/user/selectUserById?userId=${this.$route.query.userId}`,
|
|||
|
|
}).then(res => {
|
|||
|
|
this.userName = res.data.data.userName;
|
|||
|
|
this.$router.push({
|
|||
|
|
name: 'Room',
|
|||
|
|
query: {
|
|||
|
|
roomId1: row.roomId,
|
|||
|
|
userId: this.$route.query.userId,
|
|||
|
|
userName: this.userName
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 确认创建预约
|
|||
|
|
submitRoom() {
|
|||
|
|
this.$refs["ruleForm2"].validate((valid) => {
|
|||
|
|
if (valid) {
|
|||
|
|
this.roomidForm2.timer[0] = moment(
|
|||
|
|
this.roomidForm2.timer[0]
|
|||
|
|
).format("YYYY-MM-DD HH:mm:ss");
|
|||
|
|
this.roomidForm2.timer[1] = moment(
|
|||
|
|
this.roomidForm2.timer[1]
|
|||
|
|
).format("YYYY-MM-DD HH:mm:ss");
|
|||
|
|
axios({
|
|||
|
|
method: "post",
|
|||
|
|
url: `https://api.xayunmei.com/zhongcaiapi/caseApplication/reservedConference`,
|
|||
|
|
data: {
|
|||
|
|
caseId: this.$route.query.id,
|
|||
|
|
ownerId: this.userId,
|
|||
|
|
roomId: this.roomidForm2.roomId2,
|
|||
|
|
scheduleStartTime: this.roomidForm2.timer[0],
|
|||
|
|
scheduleEndTime: this.roomidForm2.timer[1]
|
|||
|
|
}
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.data.code == 200) {
|
|||
|
|
this.$message({
|
|||
|
|
message: '预约成功',
|
|||
|
|
type: 'success'
|
|||
|
|
});
|
|||
|
|
axios({
|
|||
|
|
method: "post",
|
|||
|
|
url: "https://api.xayunmei.com/zhongcaiapi/caseApplication/sendRoomNoMessage",
|
|||
|
|
data: {
|
|||
|
|
id: this.caseId,
|
|||
|
|
roomNo: this.roomidForm2.roomId2,
|
|||
|
|
scheduleStartTime: this.roomidForm2.timer[0],
|
|||
|
|
scheduleEndTime: this.roomidForm2.timer[1]
|
|||
|
|
}
|
|||
|
|
}).then(res => {
|
|||
|
|
console.log(res);
|
|||
|
|
// this.data = res.data /* 将拿到的值，赋值给data */
|
|||
|
|
})
|
|||
|
|
axios({
|
|||
|
|
method: "get",
|
|||
|
|
url: `https://api.xayunmei.com/zhongcaiapi/caseApplication/reserveConferenceList?caseId=${this.$route.query.id}`,
|
|||
|
|
}).then(res => {
|
|||
|
|
// this.userName = res.data.data.userName;
|
|||
|
|
console.log(res, "tabletabletabletabletabletabletabletabletabletabletabletabletabletable");
|
|||
|
|
this.tableData = res.data.data;
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
this.$message({
|
|||
|
|
message: res.msg,
|
|||
|
|
type: 'error'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.pcHome {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100vh;
|
|||
|
|
background-color: #1c1919;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
// background: no-repeat;
|
|||
|
|
.imgBg {
|
|||
|
|
width: 30%;
|
|||
|
|
height: 50%;
|
|||
|
|
background-color: rgb(55, 55, 53);
|
|||
|
|
background-image: url("@/assets/zhongcai.jpg");
|
|||
|
|
background-size: cover;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.reservationMeet {
|
|||
|
|
width: 20%;
|
|||
|
|
height: 50%;
|
|||
|
|
background-color: rgb(58, 55, 55);
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
text-align: center;
|
|||
|
|
background-image: -webkit-linear-gradient(left, rgb(54, 185, 218), #477bdc, rgb(50, 37, 198));
|
|||
|
|
-webkit-background-clip: text;
|
|||
|
|
-webkit-text-fill-color: transparent;
|
|||
|
|
font-family: fangsong;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 30px;
|
|||
|
|
line-height: 70px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.meetTable {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 80%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.enterRoom {
|
|||
|
|
width: 20%;
|
|||
|
|
height: 50%;
|
|||
|
|
background-color: rgb(58, 55, 55);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
// justify-content: center;
|
|||
|
|
align-content: center;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
background-image: -webkit-linear-gradient(left, rgb(54, 185, 218), #477bdc, rgb(50, 37, 198));
|
|||
|
|
-webkit-background-clip: text;
|
|||
|
|
-webkit-text-fill-color: transparent;
|
|||
|
|
font-family: fangsong;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 30px;
|
|||
|
|
line-height: 70px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
width: 80%;
|
|||
|
|
height: 60px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn1 {
|
|||
|
|
width: 80%;
|
|||
|
|
// height: 60px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.enterRoomBtn {
|
|||
|
|
width: 80%;
|
|||
|
|
height: 60px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.reservation {
|
|||
|
|
width: 20%;
|
|||
|
|
height: 50%;
|
|||
|
|
background-color: rgb(58, 55, 55);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
// justify-content: center;
|
|||
|
|
align-content: center;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .el-input-group__append {
|
|||
|
|
background-color: #409EFF !important;
|
|||
|
|
color: #ffffff !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .el-form-item__content {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .el-form-item__error {
|
|||
|
|
top: 90%;
|
|||
|
|
left: 10%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .el-table {
|
|||
|
|
background-color: rgb(58, 55, 55);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .el-table tbody tr>td {
|
|||
|
|
background-color: rgb(58, 55, 55);
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .el-table tbody tr:hover>td {
|
|||
|
|
background-color: #82827c !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.enterRoomPhone {
|
|||
|
|
.title {
|
|||
|
|
background-image: -webkit-linear-gradient(left, rgb(54, 185, 218), #477bdc, rgb(50, 37, 198));
|
|||
|
|
-webkit-background-clip: text;
|
|||
|
|
-webkit-text-fill-color: transparent;
|
|||
|
|
font-family: fangsong;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 30px;
|
|||
|
|
line-height: 70px;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</style>
|