Merge branch 'master' of http://gitlab.oytour.com/luochao/confucius

src/components/course/subject-form.vue

+<template>
+  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
+    <q-card style="width: 500px;max-width:500px;">
+      <q-card-section>
+        <div class="text-h6">{{objOption.Id==0?'新增科目':'修改科目'}}</div>
+      </q-card-section>
+      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
+        <div class="row wrap">
+          <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.SubjectName" ref="SubjectName"
+            class="col-12 q-pb-lg" :rules="[val => !!val || '请输入科目名称']" label="科目名称" />
+        </div>
+        <div class="row wrap">
+          <div style="display:flex;flex-wrap: wrap;">
+            <div v-if="objOption.SubjectIcon">
+              <div class="ItemImgDiv">
+                <q-img :src="objOption.SubjectIcon" spinner-color="white" style="height: 100%;height:100%" />
+                <q-btn size="7px" @click="deleteItemImg" style="position:absolute;right:-5px;top:-5px;" round
+                  color="red" icon="iconfont icon-guanbi1" />
+              </div>
+            </div>
+            <el-upload v-if="objOption.SubjectIcon==''" class="avatar-uploader addDutyMain" action="" :before-upload="uploadFile"
+              :show-file-list="false">
+              <i class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right" class="bg-white">
+        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeSubject" />
+        <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
+          @click="saveSubject" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+  import {
+    queryCourseSubject,
+    saveCourseSubject
+  } from '../../api/course/index'
+  import {
+    UploadSelfFile,
+  } from '../../api/common/common'
+  export default {
+    props: {
+      saveObj: {
+        type: Object,
+        default: null
+      }
+    },
+    data() {
+      return {
+        persistent: true,
+        objOption: {
+          Id: 0,
+          SubjectName: '',
+          SubjectIcon: '', //图标
+        },
+        schoolList: [],
+        saveLoading: false,
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      this.initObj();
+    },
+    methods: {
+      initObj() {
+        if (this.saveObj && this.saveObj.Id > 0) {
+          queryCourseSubject({
+            Id: this.saveObj.Id
+          }).then(res => {
+            if (res.Code == 1) {
+                this.objOption.Id = res.Data.Id;
+                this.objOption.SubjectName = res.Data.SubjectName;
+                this.objOption.SubjectIcon = res.Data.SubjectIcon;
+            }
+          });
+        } else {
+          this.objOption.Id = 0;
+          this.objOption.SubjectName = '',
+          this.objOption.SubjectIcon = ''
+        }
+      },
+
+      closeSubject() {
+        this.$emit('close')
+        this.persistent = false
+      },
+      saveSubject() {
+        this.$refs.SubjectName.validate()
+        if (!this.$refs.SubjectName.hasError) {
+          this.saveLoading = true
+          saveCourseSubject(this.objOption).then(res => {
+            this.saveLoading = false
+            this.$q.notify({
+              icon: 'iconfont icon-chenggong',
+              color: 'accent',
+              timeout: 2000,
+              message: '数据保存成功！',
+              position: 'top'
+            })
+            this.$emit("success")
+            this.closeSubject()
+          }).catch(() => {
+            this.saveLoading = false
+          })
+        } else {
+          this.saveLoading = false
+        }
+      },
+      uploadFile(files) {
+        UploadSelfFile('Icon', files, res => {
+          if (res.Code == 1) {
+            this.objOption.SubjectIcon = res.FileUrl;
+          }
+        })
+      },
+      //删除图片
+      deleteItemImg(index) {
+        this.objOption.SubjectIcon = '';
+      }
+    }
+  }
+
+</script>
+<style>
+  .avatar-uploader .el-upload {
+    border-radius: 6px;
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    color: #8c939d;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .addDutyMain {
+    display: inline-block;
+    width: 118px;
+    height: 118px;
+    font-size: 70px;
+    border: 1px dashed #d9d9d9;
+    line-height: 120px;
+  }
+
+  .ItemImgDiv {
+    width: 118px;
+    height: 118px;
+    position: relative;
+    margin: 0 10px 10px 0;
+    display: inline-block;
+  }
+
+  ._delete_img {
+    position: absolute;
+    top: 0px;
+    height: 82px;
+    width: 143px;
+    line-height: 34px;
+    text-align: center;
+    background-color: rgba(2, 2, 2, 0.6);
+    display: inherit;
+    opacity: 0;
+    transition: all linear .5s
+  }
+
+  ._delete_img i.iconfont {
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    color: #E95252 !important;
+    background-color: rgba(251, 251, 251, 0.9);
+    margin-top: 26px;
+  }
+
+</style>

src/pages/course/subject.vue

@@ -16,15 +16,20 @@
           <div class="col-2 q-table__title">科目管理</div>
           <q-space />
           <div class="page-option">
-            <q-btn color="accent" size="sm" class="q-mr-md" icon="add" label="新增系列" @click="EditCategory(null)" />
+            <q-btn color="accent" size="sm" class="q-mr-md" icon="add" label="新增科目" @click="EditCategory(null)" />
           </div>
         </template>
+        <template v-slot:body-cell-SubjectIcon="props">
+          <q-td :props="props">
+            <img v-if="props.row.SubjectIcon" :src="props.row.SubjectIcon" style="width:40px;height:40px;" alt="" />
+          </q-td>
+        </template>
         <template v-slot:body-cell-Status="props">
           <q-td :props="props">
             <q-badge :color="props.value==1?'negative':'primary'" :label="props.value==0?'正常':'禁用'" />
           </q-td>
         </template>
-        <template v-slot:body-cell-CateId="props">
+        <template v-slot:body-cell-Id="props">
           <q-td :props="props">
             <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
               @click="EditCategory(props.row)" />
@@ -37,8 +42,8 @@
             :input="true" @input="changePage" />
         </template>
       </q-table>
-      <category-form v-if="isShowCategory" :save-obj="categoryObj" @close="closeCagegoryForm" @success="refreshPage">
-      </category-form>
+      <subject-form v-if="isShowSubject" :save-obj="subjectObj" @close="closeSubjectForm" @success="refreshPage">
+      </subject-form>
     </div>
   </div>
 </template>
@@ -47,16 +52,15 @@
   import {
     queryCourseSubjectPage,
     deleteCourseSubject,
-
   } from '../../api/course/index'
-  import categoryForm from '../../components/course/category-form'
+  import subjectForm from '../../components/course/subject-form'
 
   export default {
     meta: {
       title: "课程科目"
     },
     components: {
-      categoryForm,
+      subjectForm
     },
     data() {
       return {
@@ -65,15 +69,11 @@
           PageSize: 10,
           rowsPerPage: 10,
           PageCount: 1,
-          SubjectName: "", //系列名称
+          SubjectName: "", //科目名称
         },
-
-        currentUrl: "",
         dataList: [],
-        keyWords: '',
-        isShowCategory: false,
-        isShow: false,
-        categoryObj: {},
+        isShowSubject: false,
+        subjectObj: {},
         loading: true,
         columns: [{
             name: 'SubjectName',
@@ -114,7 +114,6 @@
     },
 
     mounted() {
-      this.currentUrl = this.$route.path
       this.getSubjectPage();
     },
     methods: {
@@ -162,26 +161,27 @@
       },
       //获取课程系列分页列表
       getSubjectPage() {
-        this.isShow = false;
+        this.loading = true;
         queryCourseSubjectPage(this.msg).then(res => {
-          this.isShow = true;
           this.loading = false;
+          if(res.Code==1){
             this.dataList = res.Data.PageData;
             this.msg.PageCount = res.Data.PageCount
+          }
         })
       },
       //新增修改课程系列
       EditCategory(obj) {
         if (obj) {
-          this.categoryObj = obj
+          this.subjectObj = obj
         } else {
-          this.categoryObj = null
+          this.subjectObj = null
         }
-        this.isShowCategory = true;
+        this.isShowSubject = true;
       },
       //关闭弹窗
-      closeCagegoryForm() {
-        this.isShowCategory = false
+      closeSubjectForm() {
+        this.isShowSubject = false
       }
     }
   }