讲师管理提交

src/api/courseManagement/cmsLecturer.js

+import request from '@/utils/request'
+import Qs from 'qs'
+
+/**
+* 1. 列表查询
+* 2. 查询详细信息
+* 3. 新增
+* 4. 修改
+* 5. 逻辑删除
+* 6. 导出
+*
+*/
+
+// 1. 查询讲师信息表列表
+export function listCmsLecturer(query) {
+  return request({
+    url: '/cmslecturer/queryCmsLecturerByPagination',
+    method: 'get',
+    params: query
+  })
+}
+
+// 2. 查询讲师信息表详细信息
+export function getCmsLecturer(businessId) {
+  return request({
+    url: '/cmslecturer/detail/' + businessId,
+    method: 'get'
+  })
+}
+
+// 3. 新增讲师信息表
+export function addCmsLecturer(data) {
+  data = Qs.stringify(data)
+  return request({
+    url: '/cmslecturer/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 4. 修改讲师信息表
+export function updateCmsLecturer(data) {
+  const businessId = data.businessId
+  data = Qs.stringify(data)
+  return request({
+    url: '/cmslecturer/update/' + businessId,
+    method: 'put',
+    data
+  })
+}
+
+// 5. 逻辑删除讲师信息表
+export function delCmsLecturer(businessId) {
+  return request({
+    url: '/cmslecturer/deleteLogical/' + businessId,
+    method: 'delete'
+  })
+}
+
+// 6. 导出讲师信息表
+export function exportCmsLecturer(query) {
+  return request({
+    url: '/cmslecturer/export',
+    method: 'get',
+    params: query,
+    responseType: 'blob'
+  })
+}

src/views/courseInformation/feedback/index.vue

@@ -18,7 +18,6 @@
           clearable
           :maxlength="255"
           size="small"
-          style="width: 150px"
         />
       </el-form-item>
       <el-form-item prop="contact">
@@ -28,7 +27,6 @@
           clearable
           :maxlength="255"
           size="small"
-          style="width: 150px"
         />
       </el-form-item>
       <el-form-item>

src/views/courseInformation/lecturerManagement/index.vue

+<template>
+  <div class="app-container">
+    <el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true">
+      <el-form-item label="姓名" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入讲师姓名"
+          clearable
+          :maxlength="255"
+          size="small"
+        />
+      </el-form-item>
+      <el-form-item label="头衔" prop="details">
+        <el-input
+          v-model="queryParams.details"
+          placeholder="请输入简介"
+          clearable
+          :maxlength="255"
+          size="small"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          :class="commonField.queryClass"
+          :type="commonField.typePrimary"
+          :icon="commonField.queryIcon"
+          :size="commonField.smallSize"
+          @click="handleQuery">查询
+        </el-button>
+        <el-button
+          :class="commonField.resetClass"
+          :icon="commonField.resetIcon"
+          :size="commonField.smallSize"
+          @click="resetQuery">重置
+        </el-button>
+      </el-form-item>
+      <div style="float: right">
+        <el-form-item>
+          <el-button
+            :class="commonField.addClass"
+            :type="commonField.typePrimary"
+            :icon="commonField.addIcon"
+            :size="commonField.smallSize"
+            @click="handleAdd">新增
+          </el-button>
+        </el-form-item>
+      </div>
+    </el-form>
+    <div class="placeholder"/>
+    <div style="padding:5px 10px">
+      <div class="mb12 font-small-bold">讲师信息表列表</div>
+      <el-table v-loading="loading" border :data="cmsLecturerList">
+        <el-table-column type="index" label="序号" width="55" align="center"/>
+        <el-table-column label="头像" prop="avatarId" :show-overflow-tooltip="true" width="150">
+          <template slot-scope="scope">
+            <div :id="step(scope.$index)" class="img">
+<!--              <el-image @click="handleClickStop(scope.$index)" style="width:100px;height:100%;" :src="imagePath+scope.row.avatarUrl" :preview-src-list="[imagePath+scope.row.avatarUrl]"/>-->
+              <el-avatar fit="fill" :size="30"
+                         :src="imagePath+scope.row.avatarUrl"
+              ></el-avatar>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="姓名" prop="name" width="170" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            {{ scope.row.name || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="头衔" prop="title"  width="170"  :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            {{ scope.row.title || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="简介" prop="details" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            {{ scope.row.details || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column width="120" label="状态" prop="flag">
+          <template slot-scope="scope">
+            <el-switch
+              v-model="scope.row.flag"
+              class="switchDisabledStyle"
+              inactive-value="0"
+              active-value="1"
+              @click.native="handleStatusChange(scope.row)"
+            />
+          </template>
+        </el-table-column>
+        <!--        <el-table-column label="备注" prop="remarks" :show-overflow-tooltip="true">-->
+        <!--          <template slot-scope="scope">-->
+        <!--            {{ scope.row.remarks || '-' }}-->
+        <!--          </template>-->
+        <!--        </el-table-column>-->
+        <!--        <el-table-column label="创建时间" prop="createDate" :show-overflow-tooltip="true">-->
+        <!--          <template slot-scope="scope">-->
+        <!--            <span>{{ scope.row.createDate | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>-->
+        <!--          </template>-->
+        <!--        </el-table-column>-->
+        <el-table-column label="操作" class-name="small-padding fixed-width" width="170px">
+          <template slot-scope="scope">
+            <el-button
+              :class="commonField.updateClass"
+              :type="commonField.typeParent"
+              :size="commonField.size"
+              @click="handleUpdate(scope.row)"
+            >修改
+            </el-button>
+            <el-button
+              :class="commonField.delClass"
+              :type="commonField.typeParent"
+              :size="commonField.size"
+              @click="handleDelete(scope.row)"
+            >删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.page"
+      :limit.sync="queryParams.rows"
+      @pagination="getList"
+    />
+    <!-- 添加或修改讲师信息表配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="90px">
+        <el-form-item label="姓名" prop="name">
+          <el-input v-model.trim="form.name" placeholder="请输入讲师姓名"/>
+        </el-form-item>
+        <el-form-item label="头衔" prop="title">
+          <el-input v-model.trim="form.title" placeholder="请输入讲师头衔"/>
+        </el-form-item>
+        <el-form-item label="简介" prop="details">
+          <el-input type="textarea" :rows="8" v-model.trim="form.details"
+                    placeholder="请输入讲师简介" resize="none" maxlength="200" show-word-limit></el-input>
+        </el-form-item>
+        <el-form-item label="头像" prop="avatarId">
+          <el-upload
+            class="avatar-uploader"
+            action="#"
+            v-model="form.avatarId"
+            :http-request="handleUpload"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
+          >
+            <img v-if="form.avatarUrl" :src="form.avatarUrl" style="height: 200px;width: 200px">
+            <i v-else class="el-icon-plus avatar-uploader-icon"/>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-radio-group v-model="form.flag">
+            <el-radio label="1">启用</el-radio>
+            <el-radio label="0">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+<!--        <el-form-item label="备注" prop="remarks">-->
+<!--          <el-input v-model.trim="form.remarks" maxlength="200" show-word-limit type="textarea"-->
+<!--                    placeholder="请输入内容"/>-->
+<!--        </el-form-item>-->
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button class="cancelBtn" @click="cancel">取 消</el-button>
+        <el-button class="submitBtn" type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listCmsLecturer,
+  getCmsLecturer,
+  delCmsLecturer,
+  addCmsLecturer,
+  updateCmsLecturer,
+  exportCmsLecturer
+} from '@/api/courseManagement/cmsLecturer'
+import commonField from '@/utils/commonField'
+import {uploadPublic} from "@/api/contentManagement/sysContest";
+
+export default {
+  name: 'CmsLecturer',
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 总条数
+      total: 0,
+      // 讲师信息表表格数据
+      cmsLecturerList: [],
+      fileUpload: '/dev-api/common/fileUpload?file=' + this.file + '&temp=' + 'lecturerManagement',
+      // imagePath: 'http://49.232.167.247:20020/eduServer/',
+      imagePath: 'http://49.232.167.247:20020/teaServer/',
+      imageUrl: '',
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 状态菜单
+      statusOptions: [
+        {
+          dictLabel: '启用',
+          dictValue: '1'
+        },
+        {
+          dictLabel: '停用',
+          dictValue: '0'
+        }
+      ],
+      // 查询参数
+      queryParams: {
+        page: 1,
+        rows: 10,
+        avatarId: undefined,
+        title: undefined,
+        name: undefined,
+        details: undefined,
+        flag: ''
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {}
+    }
+  },
+  computed: {
+    commonField() {
+      return commonField
+    }
+  },
+  created() {
+    this.getList() // 列表查询
+  },
+  methods: {
+    /** 查询讲师信息表列表 */
+    getList() {
+      this.loading = true
+      listCmsLecturer(this.queryParams).then(
+        response => {
+          this.cmsLecturerList = response.rows
+          this.total = response.total
+          this.loading = false
+        }
+      )
+    },
+    /**
+     * @description: 处理上传接口
+     * @author: gaoyu
+     * @param:
+     * @return:
+     **/
+    handleUpload(file) {
+      const formData = new FormData()
+      formData.append('file', file.file)
+      formData.append('temp', 'lecturerManagement')
+      uploadPublic(formData).then(res => {
+        this.form.avatarId = res.data.businessId
+        this.form.avatarUrl = res.data.url
+      })
+    },
+    handleAvatarSuccess(res, file) {
+      console.log('res', res)
+      this.imageUrl = URL.createObjectURL(file.raw)
+      this.form.avatarId= res.data.businessId
+    },
+    beforeAvatarUpload(file) {
+      // 判断文件是否为图片类型
+      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isJPG) {
+        this.$message.error('只能上传图片格式的文件!')
+        return false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2MB!')
+        return false
+      }
+      this.file = file
+    },
+    /**
+     * @description: 点击蒙版关闭预览图片
+     * @author: gaoyu
+     * @param: imageId
+     * @return:
+     **/
+    handleClickStop(imageId) {
+      this.$nextTick(() => {
+        var domImageView = document.querySelector(`#${this.step(imageId)} .el-image-viewer__mask`)
+        if (!domImageView) {
+          return
+        }
+        var closeButton = document.querySelector(`#${this.step(imageId)} .el-image-viewer__close`)
+        domImageView.addEventListener('click', () => {
+          closeButton.click()
+        })
+      })
+    },
+    step(index) {
+      return 'step' + index
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        businessId: undefined,
+        remarks: undefined,
+        avatarId: undefined,
+        title: undefined,
+        name: undefined,
+        details: undefined,
+        flag: '1'
+      }
+      this.resetForm('form')
+    },
+    /** 查询按钮操作 */
+    handleQuery() {
+      this.queryParams.page = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams = {
+        page: 1,
+        rows: 10,
+        avatarId: undefined,
+        title: undefined,
+        name: undefined,
+        details: undefined,
+        flag: ''
+      }
+      this.handleQuery()
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = '添加讲师信息'
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const id = row.businessId
+      getCmsLecturer(id).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = '修改讲师信息'
+      })
+    },
+    // 改变状态
+    handleStatusChange(row) {
+      const text = row.flag === '1' ? '启用' : '停用'
+      this.$confirm('确认操作?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function () {
+        return updateCmsLecturer(row)
+      }).then(() => {
+        this.$message({
+          message: text + '成功',
+          type: 'success'
+        })
+      }).catch(function () {
+        row.flag = row.flag === '0' ? '1' : '0'
+      })
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          if (this.form.businessId !== undefined) {
+            updateCmsLecturer(this.form).then(response => {
+              this.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            })
+          } else {
+            addCmsLecturer(this.form).then(response => {
+              this.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.businessId
+      this.$confirm('是否确认操作？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function () {
+        return delCmsLecturer(id)
+      }).then(() => {
+        this.getList()
+        this.$message({
+          message: '删除成功',
+          type: 'success'
+        })
+      }).catch(function () {
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams
+      this.$confirm('是否确认操作?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function () {
+        return exportCmsLecturer(queryParams).then(response => {
+          const blob = new Blob([response])
+          const downloadElement = document.createElement('a')
+          const href = window.URL.createObjectURL(blob)// 创建下载的链接
+          downloadElement.href = href
+          downloadElement.download = '讲师信息表信息' + '.xls' // 下载后文件名
+          document.body.appendChild(downloadElement)
+          downloadElement.click()// 点击下载
+          document.body.removeChild(downloadElement)// 下载完成移除元素
+          window.URL.revokeObjectURL(href)// 释放掉blob对象
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.app-container {
+  font-size: 18px;
+  padding: 0;
+  ::v-deep .el-table td .cell {
+    height: 30px;
+    line-height: 30px;
+  }
+  ::v-deep .el-table td:nth-child(2) .cell {
+    margin: 10px 0;
+    //margin: 10px;
+    //text-align: center!important;
+  }
+
+
+  .placeholder {
+    height: 1.3vh;
+    background-color: #F4F4F4;
+    margin-bottom: 10px
+  }
+
+}
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+  border: 1px solid #dcdfe6;
+}
+
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>