添加按钮配置

1

src/components/ImageCropper/index.vue

@@ -1,24 +1,50 @@
 <template>
-    <div class="ant-upload-preview">
-        <div style="width: 100%">
-            <el-upload class="avatar-uploader" :class="[disabled ? 'uploadDisabled' : null]" :disabled="disabled" :accept="accept" :show-file-list="false" action :before-upload="beforeUpload" :http-request="handleChange">
-                <i v-if="isDelete && imageUrl" class="el-icon-error" @click.stop="onDelete" style="position: absolute;right: -14px;font-size: 24px;top: -14px;color: #787878;background: #fff;"></i>
-                <img v-if="imageUrl" :src="imageUrl" class="avatar" :style="showBox" />
-                <span v-else>
-                    <i v-if="loading" class="el-icon-loading avatar-uploader-icon" :style="showBox"></i>
-                    <i v-else class="el-icon-plus avatar-uploader-icon" :style="showBox"></i>
-                    <span class="upload-desc">添加上传图片</span>
-                </span>
-            </el-upload>
-        </div>
-        <!-- modal -->
-        <cropper-modal ref="CropperModal" @cropper-no="handleCropperClose" @cropper-ok="handleCropperSuccess"></cropper-modal>
+  <div class="ant-upload-preview">
+    <div style="width: 100%">
+      <el-upload
+        class="avatar-uploader"
+        :class="[disabled ? 'uploadDisabled' : null]"
+        :disabled="disabled"
+        :accept="accept"
+        :show-file-list="false"
+        action
+        :before-upload="beforeUpload"
+        :http-request="handleChange"
+      >
+        <i
+          v-if="isDelete && imageUrl"
+          class="el-icon-error"
+          @click.stop="onDelete"
+          style="position: absolute;right: -14px;font-size: 24px;top: -14px;color: #787878;background: #fff;"
+        ></i>
+        <img v-if="imageUrl" :src="imageUrl" class="avatar" :style="showBox" />
+        <span v-else>
+          <i
+            v-if="loading"
+            class="el-icon-loading avatar-uploader-icon"
+            :style="showBox"
+          ></i>
+          <i
+            v-else
+            class="el-icon-plus avatar-uploader-icon"
+            :style="showBox"
+          ></i>
+          <span class="upload-desc">添加上传图片</span>
+        </span>
+      </el-upload>
     </div>
+    <!-- modal -->
+    <cropper-modal
+      ref="CropperModal"
+      @cropper-no="handleCropperClose"
+      @cropper-ok="handleCropperSuccess"
+    ></cropper-modal>
+  </div>
 </template>
 <script>
-import CropperModal from './CropperModal'
+import CropperModal from "./CropperModal";
 export default {
-  name: 'ImageCropper',
+  name: "ImageCropper",
   components: {
     CropperModal
   },
@@ -34,14 +60,14 @@ export default {
           autoCropHeight: 200, //默认生成截图框高度
           fixedBox: false, //是否固定截图框大小 不允许改变
           previewsCircle: true, //预览图是否是原圆形
-          title: '上传图片'
-        }
+          title: "上传图片"
+        };
       }
     },
     // 显示图片原始图片
     showSize: {
       type: Boolean,
-      default: false,
+      default: false
     },
     // 上传图片的大小，单位M
     imgSize: {
@@ -55,17 +81,17 @@ export default {
     // 图片地址
     imageUrl: {
       type: String,
-      default: ''
+      default: ""
     },
     // 默认图片格式
     accept: {
       type: String,
-      default: '.png,.jpg,.jpeg,.gif'
+      default: ".png,.jpg,.jpeg,.gif"
     },
     acceptArray: {
       type: [Array, Object],
       default() {
-        return ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']
+        return ["image/jpeg", "image/png", "image/jpg", "image/gif"];
       }
     },
     disabled: {
@@ -77,84 +103,85 @@ export default {
     return {
       loading: false,
       isStopRun: false
-    }
+    };
   },
   computed: {
     showBox() {
-      let styleList = {}
-      if(this.showSize) {
+      let styleList = {};
+      if (this.showSize) {
         styleList = {
-          width: this.options.autoCropWidth + 'px',
-          height: this.options.autoCropHeight + 'px',
-          lineHeight: this.options.autoCropHeight + 'px',
-        }
+          width: this.options.autoCropWidth + "px",
+          height: this.options.autoCropHeight + "px",
+          lineHeight: this.options.autoCropHeight + "px"
+        };
       }
-      console.log(styleList)
-      return styleList
+      // console.log(styleList)
+      return styleList;
     }
   },
   methods: {
-    onDelete() { // 删除图片
-      this.$emit('update:imageUrl', '')
+    onDelete() {
+      // 删除图片
+      this.$emit("update:imageUrl", "");
     },
     //从本地选择文件
     handleChange(info) {
       if (this.isStopRun) {
-        return
+        return;
       }
-      this.loading = true
-      const { options } = this
-      console.log(info)
+      this.loading = true;
+      const { options } = this;
+      console.log(info);
       this.getBase64(info.file, imageUrl => {
         const target = Object.assign({}, options, {
           img: imageUrl,
           name: info.file.name // 上传文件名
-        })
-        this.$refs.CropperModal.edit(target)
-      })
+        });
+        this.$refs.CropperModal.edit(target);
+      });
     },
     // 上传之前 格式与大小校验
     beforeUpload(file) {
-      this.isStopRun = false
-      var fileType = file.type
-      if (fileType.indexOf('image') < 0) {
-        this.$message.warning('请上传图片')
-        this.isStopRun = true
-        return false
+      this.isStopRun = false;
+      var fileType = file.type;
+      if (fileType.indexOf("image") < 0) {
+        this.$message.warning("请上传图片");
+        this.isStopRun = true;
+        return false;
       }
-      const isJpgOrPng = this.acceptArray.includes(file.type)
-        // file.type === 'image/jpeg' ||
-        // file.type === 'image/png' ||
-        // file.type === 'image/jpg'
+      const isJpgOrPng = this.acceptArray.includes(file.type);
+      // file.type === 'image/jpeg' ||
+      // file.type === 'image/png' ||
+      // file.type === 'image/jpg'
       if (!isJpgOrPng) {
-        this.$message.error('你上传图片格式不正确!')
-        this.isStopRun = true
+        this.$message.error("你上传图片格式不正确!");
+        this.isStopRun = true;
       }
-      const isLtSize = file.size < this.imgSize * 1024 * 1024
+      const isLtSize = file.size < this.imgSize * 1024 * 1024;
       if (!isLtSize) {
-        this.$message.error('图片大小不能超过' + this.imgSize + 'MB!')
-        this.isStopRun = true
+        this.$message.error("图片大小不能超过" + this.imgSize + "MB!");
+        this.isStopRun = true;
       }
-      return isJpgOrPng && isLtSize
+      return isJpgOrPng && isLtSize;
     },
     //获取服务器返回的地址
     handleCropperSuccess(data) {
       //将返回的数据回显
-      this.loading = false
-      this.$emit('crop-upload-success', data)
+      this.loading = false;
+      this.$emit("crop-upload-success", data);
     },
     // 取消上传
     handleCropperClose() {
-      this.loading = false
-      this.$emit('crop-upload-close')
+      this.loading = false;
+      this.$emit("crop-upload-close");
     },
     getBase64(img, callback) {
-      const reader = new FileReader()
-      reader.addEventListener('load', () => callback(reader.result))
-      reader.readAsDataURL(img)
+      const reader = new FileReader();
+      reader.addEventListener("load", () => callback(reader.result));
+      reader.readAsDataURL(img);
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -204,7 +231,4 @@ export default {
   height: 108px;
   display: block;
 }
-
 </style>
-
-

src/views/contentManager/components/appBottomPage.vue

@@ -0,0 +1,428 @@
+<template>
+  <div>
+    <!-- 搜索标题 -->
+    <auth auths="news/add">
+      <el-button
+        @click="openTeaching('create')"
+        type="primary"
+        style="margin-bottom:20px"
+      >
+        新建
+      </el-button>
+    </auth>
+    <!-- 搜索标题 -->
+    <save-form
+      :inline="true"
+      class="searchForm"
+      saveKey="contentKnowledge"
+      @submit="search"
+      :model="searchForm"
+    >
+      <el-form-item prop="subType">
+        <el-select
+          v-model="searchForm.subType"
+          clearable
+          placeholder="请选择分类"
+        >
+          <el-option
+            v-for="item in typeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button native-type="submit" type="danger">搜索</el-button>
+      </el-form-item>
+    </save-form>
+    <!-- 列表 -->
+    <div class="tableWrap">
+      <el-table
+        :data="tableList"
+        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+      >
+        <el-table-column align="center" label="默认图">
+          <template slot-scope="scope">
+            <img class="bannerImg" :src="scope.row.coverImage" alt="" />
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="选中图">
+          <template slot-scope="scope">
+            <img class="bannerImg" :src="scope.row.attribute1" alt="" />
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="title" label="标题">
+        </el-table-column>
+        <el-table-column align="center" label="跳转链接">
+          <template slot-scope="scope">
+            <overflow-text
+              width="100%"
+              :text="scope.row.linkUrl"
+            ></overflow-text>
+            <!-- {{ scope.row.linkUrl + '/' + scope.row.id }} -->
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="remark" label="是否使用">
+          <template slot-scope="scope">
+            {{ scope.row.status == 1 ? "是" : "否" }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="subType" label="分类">
+          <template slot-scope="scope">
+            {{ formatSubType(scope.row.subType) }}
+          </template>
+        </el-table-column>
+
+        <el-table-column align="center" prop="memo" label="版本号">
+        </el-table-column>
+
+        <el-table-column align="center" prop="order" label="排序">
+        </el-table-column>
+
+        <el-table-column align="center" label="操作">
+          <template slot-scope="scope">
+            <div>
+              <auth auths="news/update" style="margin-left: 10px">
+                <el-button
+                  @click="openTeaching('update', scope.row)"
+                  v-if="!scope.row.memo || permission('banner/copyrightbtn')"
+                  type="text"
+                  >修改</el-button
+                >
+                <div
+                  style="display: inline-block"
+                  v-if="!scope.row.memo || permission('banner/copyrightbtn')"
+                >
+                  <el-button
+                    v-if="scope.row.status == 1"
+                    @click="onStop(scope.row, 0)"
+                    type="text"
+                    >停用</el-button
+                  >
+                  <el-button v-else @click="onStop(scope.row, 1)" type="text"
+                    >启用</el-button
+                  >
+                </div>
+              </auth>
+              <auth auths="news/del">
+                <el-button
+                  @click="onDel(scope.row)"
+                  v-if="!scope.row.memo || permission('banner/copyrightbtn')"
+                  type="text"
+                  >删除</el-button
+                >
+              </auth>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        saveKey="contentKnowledge"
+        sync
+        :total.sync="pageInfo.total"
+        :page.sync="pageInfo.page"
+        :limit.sync="pageInfo.limit"
+        :page-sizes="pageInfo.page_size"
+        @pagination="getList"
+      />
+    </div>
+
+    <el-dialog
+      :title="formTitle[pageType]"
+      :visible.sync="teacherStatus"
+      width="500px"
+    >
+      <el-form :model="form" ref="form" label-width="80px">
+        <el-form-item
+          label="标题"
+          prop="title"
+          :rules="[
+            {
+              required: true,
+              message: '请输入标题',
+              trigger: 'blur'
+            }
+          ]"
+        >
+          <el-input
+            v-model.trim="form.title"
+            placeholder="请输入标题"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="排序值" prop="order">
+          <el-input
+            v-model.trim="form.order"
+            placeholder="请输入排序值"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="版本号" prop="memo">
+          <el-input v-model="form.memo" placeholder="请输入版本号"></el-input>
+        </el-form-item>
+        <el-form-item label="链接地址" prop="linkUrl">
+          <el-input
+            v-model.trim="form.linkUrl"
+            placeholder="请输入链接地址"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          label="分类"
+          prop="subType"
+          :rules="[
+            { required: true, message: '请选择分类', trigger: 'change' }
+          ]"
+        >
+          <el-select
+            v-model="form.subType"
+            style="width: 100% !important"
+            placeholder="请选择分类"
+          >
+            <el-option
+              v-for="item in typeList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="默认图"
+          prop="coverImage"
+          :rules="[
+            { required: true, message: '请上传默认图', trigger: 'blur' }
+          ]"
+        >
+          <image-cropper
+            :options="cropperOptions"
+            :imgSize="2"
+            showSize
+            :imageUrl="form.coverImage"
+            @crop-upload-success="cropSuccess"
+          />
+          <p class="imageSize">图片不能超过 2M；图片尺寸：76*76；</p>
+        </el-form-item>
+        <el-form-item
+          label="选中图"
+          prop="attribute1"
+          :rules="[
+            { required: true, message: '请上传选中图', trigger: 'blur' }
+          ]"
+        >
+          <image-cropper
+            :options="cropperOptions"
+            :imgSize="2"
+            showSize
+            :imageUrl="form.attribute1"
+            @crop-upload-success="cropSuccess2"
+          />
+          <p class="imageSize">图片不能超过 2M；图片尺寸：76*76；</p>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="teacherStatus = false">取 消</el-button>
+        <el-button type="primary" @click="onSubmit">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  newsList,
+  newsUpdate,
+  newsDel,
+  newsTypeList,
+  newsAdd
+} from "@/api/contentManager";
+import ImageCropper from "@/components/ImageCropper";
+import pagination from "@/components/Pagination/index";
+import cleanDeep from "clean-deep";
+import { permission } from "@/utils/directivePage";
+export default {
+  name: "appButtonPage",
+  components: {
+    pagination,
+    ImageCropper
+  },
+  data() {
+    return {
+      teacherStatus: false,
+      formTitle: {
+        create: "新建老师端按钮",
+        update: "修改老师端按钮"
+      },
+      pageType: "create",
+      cropperOptions: {
+        autoCrop: true, //是否默认生成截图框
+        autoCropWidth: 76, //默认生成截图框宽度
+        autoCropHeight: 76, //默认生成截图框高度
+        fixedBox: true, //是否固定截图框大小 不允许改变
+        previewsCircle: false, //预览图是否是圆形
+        full: true, // 是否输出原图比例的截图
+        title: "上传图片" //模态框上显示的标题
+      },
+      form: {
+        title: "",
+        order: null,
+        linkUrl: "",
+        coverImage: "",
+        attribute1: "",
+        subType: null,
+        memo: "",
+        type: 20,
+        status: 1,
+        content: ""
+      },
+      searchForm: {
+        subType: null
+      },
+      tableList: [],
+      teacherId: this.$route.query.teacherId,
+      pageInfo: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 1, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      },
+      typeList: [] // 子分类
+    };
+  },
+  async mounted() {
+    await newsTypeList({ parentId: 20 }).then(res => {
+      if (res.code == 200) {
+        this.typeList = res.data;
+      }
+    });
+    this.getList();
+  },
+  methods: {
+    //上传图片成功
+    cropSuccess(data) {
+      this.form.coverImage = data.data.url;
+    },
+    cropSuccess2(data) {
+      this.form.attribute1 = data.data.url;
+    },
+    onSubmit() {
+      this.$refs["form"].validate(async valid => {
+        if (valid) {
+          let form = {
+            ...this.form
+          };
+          if (this.pageType == "create") {
+            if (form.id) {
+              // 判断有没有Id，如果有则删除
+              delete form.id;
+            }
+            await newsAdd(form).then(res => {
+              this.messageTips("添加", res);
+            });
+          } else if (this.pageType == "update") {
+            await newsUpdate(form).then(res => {
+              this.messageTips("修改", res);
+            });
+          }
+        }
+      });
+    },
+    messageTips(title, res) {
+      if (res.code == 200) {
+        this.$message.success(title + "成功");
+        this.getList();
+        this.teacherStatus = false;
+      } else {
+        this.$message.error(res.msg);
+      }
+    },
+    search() {
+      this.pageInfo.page = 1;
+      this.getList();
+    },
+    permission(str) {
+      return permission(str);
+    },
+    getList() {
+      let params = {
+        clientName: "manage",
+        subType: this.searchForm.subType,
+        rows: this.pageInfo.limit,
+        page: this.pageInfo.page,
+        type: 20
+      };
+      newsList(cleanDeep(params)).then(res => {
+        if (res.code == 200) {
+          this.tableList = res.data.rows;
+          this.pageInfo.total = res.data.total;
+        }
+      });
+    },
+    openTeaching(type, rows) {
+      this.teacherStatus = true;
+      this.$nextTick(() => {
+        if (this.$refs["form"]) {
+          this.$refs["form"].resetFields();
+        }
+        this.pageType = type;
+        if (type == "update") {
+          this.form.id = rows.id;
+          this.form.title = rows.title;
+          this.form.order = rows.order;
+          this.form.linkUrl = rows.linkUrl;
+          this.form.coverImage = rows.coverImage;
+          this.form.subType = rows.subType;
+        }
+      });
+    },
+    onDel(row) {
+      // 删除
+      this.$confirm("确定是否删除?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          newsDel({ id: row.id }).then(res => {
+            if (res.code == 200) {
+              this.$message.success("删除成功");
+              this.getList();
+            } else {
+              this.$message.error(res.msg);
+            }
+          });
+        })
+        .catch(() => {});
+    },
+    onStop(row, status) {
+      // 停止
+      // newsUpdate
+      let tempStr = ["停用", "启用"];
+      newsUpdate({
+        id: row.id,
+        status: status
+      }).then(res => {
+        if (res.code == 200) {
+          this.$message.success(tempStr[status] + "成功");
+          this.getList();
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+    },
+
+    formatSubType(val) {
+      let tempName = null;
+      this.typeList.forEach(item => {
+        if (item.id == val) {
+          tempName = item.name;
+        }
+      });
+      return tempName;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.bannerImg {
+  height: 60px;
+}
+</style>

src/views/contentManager/components/appPage.vue

@@ -46,7 +46,7 @@
         :data="tableList"
         :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
       >
-        <el-table-column align="center" label="轮播图">
+        <el-table-column align="center" label="封面图">
           <template slot-scope="scope">
             <img class="bannerImg" :src="scope.row.coverImage" alt="" />
           </template>
@@ -122,12 +122,12 @@ import pagination from "@/components/Pagination/index";
 export default {
   name: "training",
   components: {
-    pagination,
+    pagination
   },
   data() {
     return {
       searchForm: {
-        organIdList: [],
+        organIdList: []
       },
       tableList: [],
       teacherId: this.$route.query.teacherId,
@@ -136,8 +136,8 @@ export default {
         limit: 10, // 限制显示条数
         page: 1, // 当前页
         total: 1, // 总条数
-        page_size: [10, 20, 40, 50], // 选择限制显示条数
-      },
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      }
     };
   },
   mounted() {
@@ -157,9 +157,9 @@ export default {
           : null,
         rows: this.pageInfo.limit,
         page: this.pageInfo.page,
-        type: 6,
+        type: 6
       };
-      newsList(params).then((res) => {
+      newsList(params).then(res => {
         if (res.code == 200) {
           this.tableList = res.data.rows;
           this.pageInfo.total = res.data.total;
@@ -173,28 +173,31 @@ export default {
       }
       params.type = 6;
       params.pageType = type;
-      this.$router.push({
-        path: "/contentManager/contentOperation",
-        query: params,
-      }, (route) => {
-        // 处理默认选中的菜单
-        const matched = route.matched || []
-        for(let i in matched) {
-          if(matched[i].path == '/contentManager/contentOperation') {
-            route.matched[i].meta.activeMenu = '/platformIndex'
+      this.$router.push(
+        {
+          path: "/contentManager/contentOperation",
+          query: params
+        },
+        route => {
+          // 处理默认选中的菜单
+          const matched = route.matched || [];
+          for (let i in matched) {
+            if (matched[i].path == "/contentManager/contentOperation") {
+              route.matched[i].meta.activeMenu = "/platformIndex";
+            }
           }
         }
-      });
+      );
     },
     onDel(row) {
       // 删除
       this.$confirm("确定是否删除?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-        type: "warning",
+        type: "warning"
       })
         .then(() => {
-          newsDel({ id: row.id }).then((res) => {
+          newsDel({ id: row.id }).then(res => {
             if (res.code == 200) {
               this.$message.success("删除成功");
               this.getList();
@@ -211,8 +214,8 @@ export default {
       let tempStr = ["停用", "启用"];
       newsUpdate({
         id: row.id,
-        status: status,
-      }).then((res) => {
+        status: status
+      }).then(res => {
         if (res.code == 200) {
           this.$message.success(tempStr[status] + "成功");
           this.getList();
@@ -220,8 +223,8 @@ export default {
           this.$message.error(res.msg);
         }
       });
-    },
-  },
+    }
+  }
 };
 </script>
 <style lang="scss" scoped>

src/views/contentManager/components/teacherButton.vue

@@ -0,0 +1,403 @@
+<template>
+  <div>
+    <!-- 搜索标题 -->
+    <auth auths="news/add">
+      <el-button
+        @click="openTeaching('create')"
+        type="primary"
+        style="margin-bottom:20px"
+      >
+        新建
+      </el-button>
+    </auth>
+    <!-- 搜索标题 -->
+    <save-form
+      :inline="true"
+      class="searchForm"
+      saveKey="contentKnowledge"
+      @submit="search"
+      :model="searchForm"
+    >
+      <el-form-item prop="subType">
+        <el-select
+          v-model="searchForm.subType"
+          clearable
+          placeholder="请选择分类"
+        >
+          <el-option
+            v-for="item in typeList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button native-type="submit" type="danger">搜索</el-button>
+      </el-form-item>
+    </save-form>
+    <!-- 列表 -->
+    <div class="tableWrap">
+      <el-table
+        :data="tableList"
+        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+      >
+        <el-table-column align="center" label="封面图">
+          <template slot-scope="scope">
+            <img class="bannerImg" :src="scope.row.coverImage" alt="" />
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="title" label="标题">
+        </el-table-column>
+        <el-table-column align="center" label="跳转链接">
+          <template slot-scope="scope">
+            <overflow-text
+              width="100%"
+              :text="scope.row.linkUrl"
+            ></overflow-text>
+            <!-- {{ scope.row.linkUrl + '/' + scope.row.id }} -->
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="remark" label="是否使用">
+          <template slot-scope="scope">
+            {{ scope.row.status == 1 ? "是" : "否" }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="subType" label="分类">
+          <template slot-scope="scope">
+            {{ formatSubType(scope.row.subType) }}
+          </template>
+        </el-table-column>
+
+        <el-table-column align="center" prop="memo" label="版本号">
+        </el-table-column>
+
+        <el-table-column align="center" prop="order" label="排序">
+        </el-table-column>
+
+        <el-table-column align="center" label="操作">
+          <template slot-scope="scope">
+            <div>
+              <auth auths="news/update" style="margin-left: 10px">
+                <el-button
+                  @click="openTeaching('update', scope.row)"
+                  v-if="!scope.row.memo || permission('banner/copyrightbtn')"
+                  type="text"
+                  >修改</el-button
+                >
+                <div
+                  style="display: inline-block"
+                  v-if="!scope.row.memo || permission('banner/copyrightbtn')"
+                >
+                  <el-button
+                    v-if="scope.row.status == 1"
+                    @click="onStop(scope.row, 0)"
+                    type="text"
+                    >停用</el-button
+                  >
+                  <el-button v-else @click="onStop(scope.row, 1)" type="text"
+                    >启用</el-button
+                  >
+                </div>
+              </auth>
+              <auth auths="news/del">
+                <el-button
+                  @click="onDel(scope.row)"
+                  v-if="!scope.row.memo || permission('banner/copyrightbtn')"
+                  type="text"
+                  >删除</el-button
+                >
+              </auth>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        saveKey="contentKnowledge"
+        sync
+        :total.sync="pageInfo.total"
+        :page.sync="pageInfo.page"
+        :limit.sync="pageInfo.limit"
+        :page-sizes="pageInfo.page_size"
+        @pagination="getList"
+      />
+    </div>
+
+    <el-dialog
+      :title="formTitle[pageType]"
+      :visible.sync="teacherStatus"
+      width="500px"
+    >
+      <el-form :model="form" ref="form" label-width="80px">
+        <el-form-item
+          label="标题"
+          prop="title"
+          :rules="[
+            {
+              required: true,
+              message: '请输入标题',
+              trigger: 'blur'
+            }
+          ]"
+        >
+          <el-input
+            v-model.trim="form.title"
+            placeholder="请输入标题"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="排序值" prop="order">
+          <el-input
+            v-model.trim="form.order"
+            placeholder="请输入排序值"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="链接地址" prop="linkUrl">
+          <el-input
+            v-model.trim="form.linkUrl"
+            placeholder="请输入链接地址"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="版本号" prop="memo">
+          <el-input v-model="form.memo" placeholder="请输入版本号"></el-input>
+        </el-form-item>
+        <el-form-item
+          label="分类"
+          prop="subType"
+          :rules="[
+            { required: true, message: '请选择分类', trigger: 'change' }
+          ]"
+        >
+          <el-select
+            v-model="form.subType"
+            style="width: 100% !important"
+            placeholder="请选择分类"
+          >
+            <el-option
+              v-for="item in typeList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="封面图"
+          prop="coverImage"
+          :rules="[
+            { required: true, message: '请上传封面图', trigger: 'blur' }
+          ]"
+        >
+          <image-cropper
+            :options="cropperOptions"
+            :imgSize="2"
+            showSize
+            :imageUrl="form.coverImage"
+            @crop-upload-success="cropSuccess"
+          />
+          <p class="imageSize">图片不能超过 2M；图片尺寸：80*80；</p>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="teacherStatus = false">取 消</el-button>
+        <el-button type="primary" @click="onSubmit">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  newsList,
+  newsUpdate,
+  newsDel,
+  newsTypeList,
+  newsAdd
+} from "@/api/contentManager";
+import ImageCropper from "@/components/ImageCropper";
+import pagination from "@/components/Pagination/index";
+import cleanDeep from "clean-deep";
+import { permission } from "@/utils/directivePage";
+export default {
+  name: "teacherButton",
+  components: {
+    pagination,
+    ImageCropper
+  },
+  data() {
+    return {
+      teacherStatus: false,
+      formTitle: {
+        create: "新建老师端按钮",
+        update: "修改老师端按钮"
+      },
+      pageType: "create",
+      cropperOptions: {
+        autoCrop: true, //是否默认生成截图框
+        autoCropWidth: 80, //默认生成截图框宽度
+        autoCropHeight: 80, //默认生成截图框高度
+        fixedBox: true, //是否固定截图框大小 不允许改变
+        previewsCircle: false, //预览图是否是圆形
+        full: true, // 是否输出原图比例的截图
+        title: "上传图片" //模态框上显示的标题
+      },
+      form: {
+        title: "",
+        order: null,
+        linkUrl: "",
+        coverImage: "",
+        subType: null,
+        type: 23,
+        memo: "",
+        status: 1,
+        content: ""
+      },
+      searchForm: {
+        subType: null
+      },
+      tableList: [],
+      teacherId: this.$route.query.teacherId,
+      pageInfo: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 1, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      },
+      typeList: [] // 子分类
+    };
+  },
+  async mounted() {
+    await newsTypeList({ parentId: 23 }).then(res => {
+      if (res.code == 200) {
+        this.typeList = res.data;
+      }
+    });
+    this.getList();
+  },
+  methods: {
+    //上传图片成功
+    cropSuccess(data) {
+      this.form.coverImage = data.data.url;
+    },
+    onSubmit() {
+      this.$refs["form"].validate(async valid => {
+        if (valid) {
+          let form = {
+            ...this.form
+          };
+          if (this.pageType == "create") {
+            if (form.id) {
+              // 判断有没有Id，如果有则删除
+              delete form.id;
+            }
+            await newsAdd(form).then(res => {
+              this.messageTips("添加", res);
+            });
+          } else if (this.pageType == "update") {
+            await newsUpdate(form).then(res => {
+              this.messageTips("修改", res);
+            });
+          }
+        }
+      });
+    },
+    messageTips(title, res) {
+      if (res.code == 200) {
+        this.$message.success(title + "成功");
+        this.getList();
+        this.teacherStatus = false;
+      } else {
+        this.$message.error(res.msg);
+      }
+    },
+    search() {
+      this.pageInfo.page = 1;
+      this.getList();
+    },
+    permission(str) {
+      return permission(str);
+    },
+    getList() {
+      let params = {
+        clientName: "manage",
+        subType: this.searchForm.subType,
+        rows: this.pageInfo.limit,
+        page: this.pageInfo.page,
+        type: 23
+      };
+      newsList(cleanDeep(params)).then(res => {
+        if (res.code == 200) {
+          this.tableList = res.data.rows;
+          this.pageInfo.total = res.data.total;
+        }
+      });
+    },
+    openTeaching(type, rows) {
+      this.teacherStatus = true;
+      this.$nextTick(() => {
+        if (this.$refs["form"]) {
+          this.$refs["form"].resetFields();
+        }
+        this.pageType = type;
+        if (type == "update") {
+          this.form.id = rows.id;
+          this.form.title = rows.title;
+          this.form.order = rows.order;
+          this.form.linkUrl = rows.linkUrl;
+          this.form.coverImage = rows.coverImage;
+          this.form.subType = rows.subType;
+        }
+      });
+    },
+    onDel(row) {
+      // 删除
+      this.$confirm("确定是否删除?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          newsDel({ id: row.id }).then(res => {
+            if (res.code == 200) {
+              this.$message.success("删除成功");
+              this.getList();
+            } else {
+              this.$message.error(res.msg);
+            }
+          });
+        })
+        .catch(() => {});
+    },
+    onStop(row, status) {
+      // 停止
+      // newsUpdate
+      let tempStr = ["停用", "启用"];
+      newsUpdate({
+        id: row.id,
+        status: status
+      }).then(res => {
+        if (res.code == 200) {
+          this.$message.success(tempStr[status] + "成功");
+          this.getList();
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+    },
+
+    formatSubType(val) {
+      let tempName = null;
+      this.typeList.forEach(item => {
+        if (item.id == val) {
+          tempName = item.name;
+        }
+      });
+      return tempName;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.bannerImg {
+  height: 60px;
+}
+</style>

src/views/contentManager/platformIndex.vue

@@ -1,12 +1,15 @@
 <template>
-  <div class='m-container'>
+  <div class="m-container">
     <h2>
-      <div class="squrt"></div>平台内容管理
+      <div class="squrt"></div>
+      平台内容管理
     </h2>
     <div class="m-core">
-      <tab-router v-model.trim="activeName"
-               type="card"
-               @tab-click="handleClick">
+      <tab-router
+        v-model.trim="activeName"
+        type="card"
+        @tab-click="handleClick"
+      >
         <!-- <el-tab-pane label="精彩活动"
                      v-if="permissionList.activity"
                      lazy
@@ -19,10 +22,12 @@
                      name="1">
           <information v-if="activeName == 1" />
         </el-tab-pane> -->
-        <el-tab-pane label="专项训练"
-                     v-if="permissionList.training"
-                     lazy
-                     name="2">
+        <el-tab-pane
+          label="专项训练"
+          v-if="permissionList.training"
+          lazy
+          name="2"
+        >
           <training v-if="activeName == 2" />
         </el-tab-pane>
         <!-- <el-tab-pane label="闪页管理"
@@ -37,12 +42,30 @@
                      name="4">
           <banner  v-if="activeName == 4" />
         </el-tab-pane> -->
-        <el-tab-pane label="APP按钮管理"
-                     v-if="permissionList.appPage"
-                     lazy
-                     name="5">
+        <el-tab-pane
+          label="学生端按钮管理"
+          v-if="permissionList.appPage"
+          lazy
+          name="5"
+        >
           <appPage v-if="activeName == 5" />
         </el-tab-pane>
+        <el-tab-pane
+          label="老师端按钮管理"
+          v-if="permissionList.teacherButton"
+          lazy
+          name="23"
+        >
+          <teacherButton v-if="activeName == 23" />
+        </el-tab-pane>
+        <el-tab-pane
+          label="APP底部按钮管理"
+          v-if="permissionList.appBottomPage"
+          lazy
+          name="20"
+        >
+          <appBottomPage v-if="activeName == 20" />
+        </el-tab-pane>
         <!-- <el-tab-pane label="知识库管理"
                      v-if="permissionList.knowledge"
                      lazy
@@ -66,50 +89,46 @@
   </div>
 </template>
 <script>
-import banner from './components/banner'
-import activity from './components/activity'
-import information from './components/information'
-import training from './components/training'
-import flashPage from './components/flashPage'
-import appPage from './components/appPage'
-import knowledge from './components/knowledge'
-import advert from './components/advert'
-import systemNotify from './components/systemNotify'
-import { permission } from '@/utils/directivePage'
+import training from "./components/training";
+import appPage from "./components/appPage";
+import appBottomPage from "./components/appBottomPage";
+import teacherButton from "./components/teacherButton";
+import { permission } from "@/utils/directivePage";
 // 精彩活动 1 0
 // 热门资讯 2 1
 // 专项训练 4 2
 // 闪页管理 5  3
 // BANNER管理 3 4
-// APP按钮管理 6 5
+// 学生端按钮管理 6 5
 // 知识库管理 7 6
 // 广告管理 8 7
 // 系统通知 19 8
+// APP底部按钮管理 20 9
+// 老师端按钮管理 23 10
 export default {
-  components: { banner, activity, information, training, flashPage, appPage, knowledge, advert, systemNotify },
-  name: 'contentManager',
-  data () {
+  components: {
+    training,
+    appPage,
+    appBottomPage,
+    teacherButton
+  },
+  name: "contentManager",
+  data() {
     return {
       activeName: "0",
       permissionList: {
-        banner: permission('/contentManager/banner'),
-        activity: permission('/contentManager/activity'),
-        information: permission('/contentManager/information'),
-        training: permission('/contentManager/training'),
-        flashPage: permission('/contentManager/flashPage'),
-        appPage: permission('/contentManager/appPage'),
-        knowledge: permission('/contentManager/knowledge'),
-        advert: permission('/contentManager/advert'),
-        systemNotify: permission('/contentManager/systemNotify'),
+        training: permission("/contentManager/training"),
+        appPage: permission("/contentManager/appPage"),
+        appBottomPage: permission("/contentManager/appBottomPage"),
+        teacherButton: permission("/contentManager/teacherButton")
       }
-    }
+    };
   },
   methods: {
-    handleClick (val, event) {
-      this.activeName = val.name
+    handleClick(val, event) {
+      this.activeName = val.name;
     }
   }
-}
+};
 </script>
-<style lang="scss">
-</style>
+<style lang="scss"></style>