<template> <div classs="noLesson"> <el-row type="flex" class="add-btn" justify="end"> <el-col :span="6"> <el-button type="success" plain @click="add" v-if="!$store.state.readonly">添加不上课日期</el-button> </el-col> </el-row> <div class="card" style="margin-bottom: 10px;"> <el-card :body-style="{ padding: '0px' }" v-for="(currentDate, index) in list" :key="index"> <span class="time">{{ currentDate }}</span> <div class="bottom clearfix"> <el-button type="text" class="button" @click="del(currentDate)" v-if="$store.state.deletePermission && !$store.state.readonly">删除</el-button> </div> </el-card> </div> <dialog-com :dialogObj="dialogObj" @changeShow="changeShow" @reflash="getList"/> </div> </template> <script> import dialogCom from './dialog' import {getConfigListApi,deleteConfigApi,getConfigDetailApi,updateConfigApi} from "../../service/api"; export default { name: "index", data() { return { dialogObj:{ value:'', desc:'', show:false, id:'' }, list: [], id: '' } }, components:{ dialogCom }, mounted(){ this.getList() }, methods: { changeShow(data){ this.dialogObj.show=data }, getList(){ let json = { key:'no_lesson_date' }; getConfigListApi(json).then(res => { if(res.list.length > 0){ let _desc = res.list[0].desc; this.id = res.list[0].id; this.list = _desc ? JSON.parse(_desc) : []; } }) }, add(){ this.dialogObj.title = '添加不上课日期'; this.dialogObj.desc = this.list || []; this.dialogObj.show = true if (this.list.length > 0){ this.dialogObj.id = this.id; } else { this.dialogObj.id = ''; } }, edit(data){ getConfigDetailApi(data.id).then((res) => { this.dialogObj.title = '修改不上课日期'; this.dialogObj.desc = res.desc; this.dialogObj.show = true }); }, del(data){ this.$confirm('此操作将删除该记录?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { let json = { key: 'no_lesson_date', value: 'no_lesson_date' } let _desc = []; this.list.forEach((val)=>{ if(val !== data) { _desc.push(val); } }) json.desc = JSON.stringify(_desc); updateConfigApi(this.id,json).then(res=>{ this.$message({ type: 'success', message: '删除成功!' }); this.getList(); }) }); } } } </script> <style scoped lang="less"> @import "../../util/public"; .add-btn { margin: 10px 0; } .noLesson { padding: 20px 0; } .card { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; & >div { width: 236px; margin-top: 10px; margin-left: 10px; padding: 10px; } } .time { font-size: 13px; color: #999; } .bottom { margin-top: 13px; line-height: 12px; } .button { padding: 0; float: right; } .image { width: 100%; display: block; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both } </style>