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/index.vue | 144 +++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 129 insertions(+), 15 deletions(-) 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