不上课日期

src/components/noLesson/dialog.vue

@@ -12,13 +12,12 @@
           <el-col :span="8">
             <el-form-item>
               <el-date-picker
-                type="dates"
-                v-model="list"
+                v-model="noLessonDate"
+                type="date"
                 format="yyyy-MM-dd"
                 value-format="yyyy-MM-dd"
-                placeholder="选择一个或多个日期">
+                placeholder="选择日期">
               </el-date-picker>
-              <!--<el-input v-model="form.desc" type="textarea"></el-input>-->
             </el-form-item>
           </el-col>
         </el-row>
@@ -50,11 +49,11 @@
         form:{
           key:'noLesson',
           value:'noLesson',
-          desc:''
+          desc:[]
         },
-        list: [],
+        noLessonDate: '',
         rules:{
-          desc:[
+          noLessonDate:[
             { required: true, message: '请选择日期', trigger: 'change' }
           ]
         }
@@ -65,26 +64,43 @@
     },
     methods:{
       save(){
-        if(this.list.length === 0){
+        if(!this.noLessonDate){
           this.$message({
             type: 'error',
             message: '请选择不上课时间!'
           });
           return;
         }
-        this.form.desc = this.list.join(',');
-        if(this.dialogObj.id){
-          updateConfigApi(this.id,this.form).then(res=>{
+        let json = {
+          key: this.form.key,
+          value: this.form.value
+        }
+        let _desc = this.form.desc || [];
+        let index = _desc.findIndex((val)=>{
+            return val === this.noLessonDate
+        })
+        if (index === -1){
+          _desc.push(this.noLessonDate);
+        } else {
+          this.$message({
+            type: 'error',
+            message: '日期不能重复添加!'
+          });
+            return;
+        }
+
+        json.desc = JSON.stringify(_desc);
+        if (this.id) {
+          updateConfigApi(this.id,json).then(res=>{
             this.$message({
               type: 'success',
-              message: '修改成功!'
+              message: '新增成功!'
             });
             this.$emit("reflash");
             this.show = false;
           })
-        }else{
-          this.form.desc = this.list.join(',');
-          saveConfigApi(this.form).then(res=>{
+        } else {
+          saveConfigApi(json).then(res=>{
             this.$message({
               type: 'success',
               message: '新增成功!'
@@ -93,6 +109,7 @@
             this.show = false;
           })
         }
+
       },
       initDialog(){
         this.show = this.dialogObj.show;

src/components/noLesson/index.vue

@@ -5,54 +5,21 @@
         <el-button type="success" plain @click="add">添加不上课日期</el-button>
       </el-col>
     </el-row>
-    <el-table
-      :data="list"
-      style="width: 100%">
-      <el-table-column type="expand">
-        <template slot-scope="props">
-          <el-form label-position="left"  class="demo-table-expand">
-            <el-form-item label="不上课日期">
-              <span>{{ props.row.desc }}</span>
-            </el-form-item>
-          </el-form>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="ID"
-        prop="id">
-      </el-table-column>
-      <el-table-column
-        label="Key"
-        prop="key">
-      </el-table-column>
-      <el-table-column
-        label="关键词"
-        prop="value">
-      </el-table-column>
-      <el-table-column
-        prop="created_at"
-        label="创建时间">
-      </el-table-column>
-      <el-table-column
-        width="250"
-        label="操作">
-        <template slot-scope="scope">
-          <el-button size="mini" plain type="warning" @click="edit(scope.row)">
-            编辑
-          </el-button>
-          <el-button size="mini" plain type="danger" @click="del(scope.row)">
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <div class="card">
+      <el-card :body-style="{ padding: '0px' }" v-for="(currentDate, index) in list">
+        <span class="time">{{ currentDate }}</span>
+        <div class="bottom clearfix">
+          <el-button type="text" class="button" @click="del(currentDate)">删除</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} from "../../service/api";
+  import {getConfigListApi,deleteConfigApi,getConfigDetailApi,updateConfigApi} from "../../service/api";
   export default {
     name: "index",
     data() {
@@ -63,7 +30,8 @@
           show:false,
           id:''
         },
-        list: []
+        list: [],
+        id: ''
       }
     },
     components:{
@@ -81,13 +49,23 @@
           key:'noLesson'
         };
         getConfigListApi(json).then(res => {
-          this.list = res.list
+          if(res.list.length > 0){
+            let _desc = res.list[0].desc;
+            console.log('desc', _desc)
+            this.id = res.list[0].id;
+            this.list = _desc ? JSON.parse(_desc) : [];
+          }
         })
       },
       add(){
         this.dialogObj.title = '添加不上课日期';
-        this.dialogObj.desc = '';
+        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) => {
@@ -97,18 +75,32 @@
         });
       },
       del(data){
+          console.log('data', data);
         this.$confirm('此操作将删除该记录?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
-          deleteConfigApi(data.id).then(res=>{
-            this.getList()
+          let json = {
+            key: 'noLesson',
+            value: 'noLesson'
+          }
+          let _desc = [];
+          this.list.forEach((val)=>{
+            if(val !== data) {
+              console.log('_desc val', val)
+                _desc.push(val);
+            }
+          })
+          json.desc = JSON.stringify(_desc);
+          console.log('_desc json', json)
+          updateConfigApi(this.id,json).then(res=>{
             this.$message({
               type: 'success',
               message: '删除成功!'
             });
-          });
+            this.getList();
+          })
         });
       }
     }
@@ -120,5 +112,46 @@
   .add-btn {
     margin: 10px 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>