From 3e2914339a54efb904e822eaa3dd65e67111eeb2 Mon Sep 17 00:00:00 2001 From: fuliqi <fuliqi@qq.com> Date: 星期二, 25 六月 2024 15:23:56 +0800 Subject: [PATCH] 会议编辑删除 --- src/views/train/data-list/index.vue | 107 ++++++++++++--------- src/views/train/index.vue | 144 +++++++++++++++++++++++++--- src/views/meet/index.vue | 8 + 3 files changed, 195 insertions(+), 64 deletions(-) diff --git a/src/views/meet/index.vue b/src/views/meet/index.vue index feea68f..da6cafb 100644 --- a/src/views/meet/index.vue +++ b/src/views/meet/index.vue @@ -8,13 +8,17 @@ mounted() { const width = window.innerWidth; const height = window.innerHeight; - const domain = 'ycl.easyblog.vip:8443'; + const domain = this.$route.query.domain; + const roomName = this.$route.query.roomName; + const userInfoStr = this.$route.query.userInfoStr; + const userInfo = userInfoStr ? JSON.parse(userInfoStr) : null; const options = { - roomName: 'test', + roomName: roomName, width: width, height: height, parentNode: this.$refs.meet, lang: 'zh_CN', + userInfo: userInfo, configOverwrite: { prejoinConfig: { enabled: false diff --git a/src/views/train/data-list/index.vue b/src/views/train/data-list/index.vue index a3e3a16..db2b93a 100644 --- a/src/views/train/data-list/index.vue +++ b/src/views/train/data-list/index.vue @@ -2,16 +2,16 @@ <div class="list-container w-full h-full"> <div class="list-content w-full overflow-x-hidden"> <el-row :gutter="20"> - <el-col :span="6" v-for="item in dataList" class="margin-col"> + <el-col :span="6" v-for="item in tableData" class="margin-col"> <el-card shadow="hover" class="list-card cursor-pointer" :body-style="{ padding: 0 }"> <div class="img-container w-full"> <img src="@/assets/list-card-bg.jpg" class="width-img"> </div> <div class="item-info p-3"> - <div class="info-title">{{ item.title }}</div> - <div class="info-teacher"> + <div class="info-title">{{ item.meetName }}</div> + <div class="info-teacherName"> <div class="info-label">涓昏:</div> - <div class="info-text">{{ item.teacher }}</div> + <div class="info-text">{{ item.teacherName }}</div> </div> <div class="info-time"> <div class="info-label">寮�濮嬫椂闂�:</div> @@ -22,7 +22,9 @@ <div class="info-text">{{ item.endTime }}</div> </div> <div class="button-container"> - <el-button @click="start">寮�濮嬩笂璇�</el-button> + <el-button @click="start(item)">寮�濮嬩笂璇�</el-button> + <el-button @click="handleUpdate(item)">缂栬緫</el-button> + <el-button @click="remove(item)">鍒犻櫎</el-button> </div> </div> </el-card> @@ -33,52 +35,63 @@ </template> <script> + export default { - data() { - return { - dataList: [ - { - title: '娴嬭瘯1', - startTime: '2024-6-13 8:00', - endTime: '2024-6-13 8:00', - teacher: '娴嬭瘯娴嬭瘯', - roomName: 'test' - }, - { - title: '娴嬭瘯1', - startTime: '2024-6-13 8:00', - endTime: '2024-6-13 8:00', - teacher: '娴嬭瘯娴嬭瘯', - roomName: 'test' - }, - { - title: '娴嬭瘯1', - startTime: '2024-6-13 8:00', - endTime: '2024-6-13 8:00', - teacher: '娴嬭瘯娴嬭瘯', - roomName: 'test' - }, - { - title: '娴嬭瘯1', - startTime: '2024-6-13 8:00', - endTime: '2024-6-13 8:00', - teacher: '娴嬭瘯娴嬭瘯', - roomName: 'test' - }, - { - title: '娴嬭瘯1', - startTime: '2024-6-13 8:00', - endTime: '2024-6-13 8:00', - teacher: '娴嬭瘯娴嬭瘯', - roomName: 'test' - } - ] - }; + props: { + tableData: [ + { + id: 1, + meetName: '鑻辫', + startTime: '2024-6-13 8:00', + endTime: '2024-6-13 8:00', + teacherName: '鍏宠�佸笀' + }, + { + id: 2, + meetName: '璇枃', + startTime: '2024-6-13 8:00', + endTime: '2024-6-13 8:00', + teacherName: '娴嬭瘯娴嬭瘯' + }, + { + id: 3, + meetName: '鏁板', + startTime: '2024-6-13 8:00', + endTime: '2024-6-13 8:00', + teacherName: '娴嬭瘯娴嬭瘯' + }, + { + id: 4, + meetName: '鏈哄満鑸┖', + startTime: '2024-6-13 8:00', + endTime: '2024-6-13 8:00', + teacherName: '娴嬭瘯娴嬭瘯' + }, + { + id: 5, + startTime: '2024-6-13 8:00', + endTime: '2024-6-13 8:00', + teacherName: '娴嬭瘯娴嬭瘯', + } + ] }, methods: { - start () { + handleUpdate (item) { + this.$emit('handleUpdate',item) + }, + remove (item) { + this.$emit('remove',item) + }, + start (item) { 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') // window.open('https://ycl.easyblog.vip:8443/test'); @@ -118,7 +131,7 @@ font-weight: bold; } -.info-teacher { +.info-teacherName { display: flex; font-size: 14px; } diff --git a/src/views/train/index.vue b/src/views/train/index.vue index efdd762..6e982e3 100644 --- a/src/views/train/index.vue +++ b/src/views/train/index.vue @@ -16,8 +16,8 @@ </el-tabs> </div> <div class="header-search"> - <el-input v-model="searchText" placeholder="璇疯緭鍏ヨ绋嬪悕绉�"/> - <el-button type="primary" class="ml-4">鎼滅储</el-button> + <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,30 +26,37 @@ <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"></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 label-width="80px" ref="form" :model="form" :rules="rules" > - <el-form-item label="鎴块棿鍚�" prop="meetName" > + <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="缁撴潫鏃ユ湡"> @@ -57,7 +64,7 @@ </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 +77,130 @@ <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) + } + }) + }, + 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 @@ -108,9 +220,11 @@ display: flex; flex-direction: column; align-items: center; + .list-container { flex: 1; position: relative; + width: 100%; } } .card-header { -- Gitblit v1.8.0