From b17c2ddebcfaeaa48edc1eeca5ee0dc03d9fde90 Mon Sep 17 00:00:00 2001 From: fuliqi <fuliqi@qq.com> Date: 星期二, 02 七月 2024 09:25:33 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/dev' into dev --- src/views/train/index.vue | 205 +++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 183 insertions(+), 22 deletions(-) diff --git a/src/views/train/index.vue b/src/views/train/index.vue index b164d9f..9a574a4 100644 --- a/src/views/train/index.vue +++ b/src/views/train/index.vue @@ -1,12 +1,12 @@ <template> - <div class="train-container w-screen h-screen bg-slate-50 flex flex-col items-center"> + <div class="train-container "> - <div class="list-container container grow relative"> + <div class="list-container"> <div class="list-content absolute top-0 bottom-0 left-0 right-0 py-4"> - <div class="list-wrapper w-full h-full"> - <el-card clasdivs="h-full" :body-style="{ height: '100%' }"> - <div class="card-wrapper w-full h-full flex flex-col px-8 box-border"> - <div class="card-header flex justify-between items-center shrink-0"> + <div class="list-wrapper"> + <el-card :body-style="{ height: '100%' }"> + <div class="card-wrapper"> + <div class="card-header"> <div class="header-tab"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="鍏ㄩ儴" name="1"></el-tab-pane> @@ -15,9 +15,9 @@ <el-tab-pane label="宸茬粨鏉�" name="4"></el-tab-pane> </el-tabs> </div> - <div class="header-search flex items-center"> - <el-input v-model="searchText" placeholder="璇疯緭鍏ヨ�冭瘯鍚嶇О"/> - <el-button type="primary" class="ml-4">鎼滅储</el-button> + <div class="header-search"> + <el-input v-model="queryParam.meetName" @input="getList" clearable @clear="getList" placeholder="璇疯緭鍏ヨ绋嬪悕绉�"/> + <el-button type="primary" class="ml-4" @click="getList" >鎼滅储</el-button> </div> <div> <el-button type="primary" @click="handleAdd()">娣诲姞</el-button> @@ -26,38 +26,50 @@ <div class="card-main flex-1 my-5 relative"> <div class="main-content absolute top-0 bottom-0 left-0 right-0"> - <DataList></DataList> + <DataList :tableData="tableData" @handleUpdate="handleUpdate" @remove = "remove" @start = "start"></DataList> <div id="meet" ref="meet"></div> </div> </div> - <div class="card-footer flex justify-center mb-7 shrink-0"> - <el-pagination background layout="prev, pager, next" :total="1000"/> - </div> + <pagination v-show="total>0" :total="total" :page.sync="queryParam.pageIndex" :limit.sync="queryParam.pageSize" + @pagination="getList"/> </div> </el-card> - <!-- 娣诲姞棰樼洰瀵硅瘽妗� --> + <!-- 娣诲姞浼氳瀵硅瘽妗� --> <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body> - <el-form ref="form" :model="form" :rules="rules" > + <el-form label-width="80px" ref="form" :model="form" :rules="rules" > <el-form-item label="鎴块棿鍚�" prop="meetName" > <el-input v-model="form.meetName" placeholder="璇疯緭鍏ユ埧闂村悕" style="width: 300px"></el-input> </el-form-item> - <el-form-item label="鐝骇" prop="classesId" > - <el-select v-model="form.classesId" placeholder="璇烽�夋嫨鐝骇" /> + <el-form-item label="鐝骇" > + <el-select + v-model="form.classesId" + placeholder="鐝骇" + clearable + > + <el-option v-for="item in classesIds" :key="item.id" :label="item.className" :value="item.id"/> + </el-select> </el-form-item> <el-form-item label="涓婅鏃堕棿" prop="time" > <el-date-picker v-model="form.time" type="datetimerange" + format="yyyy-MM-dd HH:mm:ss" + value-format="yyyy-MM-dd HH:mm:ss" range-separator="鑷�" start-placeholder="寮�濮嬫棩鏈�" end-placeholder="缁撴潫鏃ユ湡"> </el-date-picker> </el-form-item> + <el-form-item label="鐘舵��" > + <el-radio v-model="form.status" :label="0">寰呭紑濮�</el-radio> + <el-radio v-model="form.status" :label="1">杩涜涓�</el-radio> + <el-radio v-model="form.status" :label="2">宸茬粨鏉�</el-radio> + </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> - <el-button type="primary" @click="cancel">纭� 瀹�</el-button> + <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> <el-button @click="cancel">鍙� 娑�</el-button> </div> </el-dialog> @@ -70,25 +82,151 @@ <script> import DataList from './data-list/index.vue' +import Pagination from '@/components/Pagination' +import { getMeets,addMeet,editMeet,deleteMeetById } from '@/api/meet' +import { myClasses } from '@/api/classes' export default { - components: { DataList }, + components: { DataList,Pagination}, data () { return { + queryParam: { + status: null, + meetName: null, + pageIndex: 1, + pageSize: 10 + }, + total: 0, open: false, + listLoading: true, title: '', form: {}, + tableData: [], + classesIds: [], activeName: '1', searchText: '', + rules: { + meetName: [ + { required: true, message: '璇疯緭鍏ユ埧闂村悕绉�', trigger: 'blur' } + ], + classesId: [ + { required: true, message: '璇烽�夋嫨鐝骇', trigger: 'change' } + ], + time: [ + { required: true, message: '璇烽�夋嫨鏃堕棿', trigger: 'change' } + ] + }, } }, - created () {}, + created () { + this.getList() + this.getClasses() + }, methods: { handleClick () { - }, - cancel() { + remove (item) { + deleteMeetById(item.id).then(re => { + if (re.data.code === 1) { + this.open = false + this.getList() + this.$message.success(re.data.message) + } else { + this.$message.error(re.data.message) + } + }) + }, + start (item) { + // 淇敼鎴块棿鐘舵�佷负杩涜涓� + item.status = 1 + editMeet(item).then(re => { + if (re.data.code === 1) { + this.getList() + let routeUrl = this.$router.resolve({ + path: "/meet", + query: { + domain: 'ycl.easyblog.vip:8443/' + item.id, + roomName: item.meetName, + userInfoStr: JSON.stringify({ + displayName: item.teacherName + }) + } + }) + window.open(routeUrl.href, '_blank') + } else { + this.$message.error(re.data.message) + } + }) + }, + handleUpdate (item) { + this.form = { + ...item, + time: [item.startTime, item.endTime] + } + this.open = true + }, + // 鑾峰彇鎴块棿 + getList () { + this.listLoading = true + getMeets(this.queryParam).then(re => { + const data = re.data + this.tableData = data.data + this.total = data.total + this.queryParam.pageIndex = data.pageNum + this.listLoading = false + }) + }, + cancel () { this.open = false + this.resetForm() + }, + resetForm () { + this.form = { + id: null, + meetName: null, + classesId: null, + status: null, + startTime: null, + endTime: null, + time: [] + } + }, + submitForm () { + this.$refs.form.validate((valid) => { + if (valid) { + this.form.startTime = this.form.time[0] + this.form.endTime = this.form.time[1] + if (this.form.id) { + editMeet(this.form).then(re => { + if (re.data.code === 1) { + this.open = false + this.getList() + this.$message.success(re.data.message) + } else { + this.$message.error(re.data.message) + } + }) + } else { + addMeet(this.form).then(re => { + if (re.data.code === 1) { + this.open = false + this.getList() + this.$message.success(re.data.message) + } else { + this.$message.error(re.data.message) + } + }) + } + } else { + return false + } + }) + }, + // 鑾峰彇鎴戠殑鐝骇 + getClasses () { + myClasses().then(re => { + this.classesIds = re.data.data + }) }, handleAdd () { this.open = true @@ -102,4 +240,27 @@ :deep(.el-tabs__nav-wrap:after) { display: none; } +.train-container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + + .list-container { + flex: 1; + position: relative; + width: 100%; + } +} +.card-header { + display: flex; + justify-content: space-between; + align-items: center; + flex-shrink: 0; +} +.header-search { + display: flex; + align-items: center; +} </style> -- Gitblit v1.8.0