mock实现轮播图管理

src/views/trainService/swiperManager.vue

@@ -0,0 +1,152 @@
+<template>
+    <div class="container" style="padding: 30px">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px"
+            style="display: flex; justify-content: space-between">
+            <div style="margin-top: 5px;margin-bottom:20px">
+                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addsign">新增</el-button>
+            </div>
+        </el-form>
+        <el-table v-loading="loading" :data="imageList">
+            <el-table-column label="序号" align="center" type="index" />
+
+            <el-table-column label="图片预览" align="center">
+                <template slot-scope="scope">
+                    <span>{{ scope.row.imgurl.substring(scope.row.imgurl.lastIndexOf('/')+1,scope.row.imgurl.length) }} </span>
+                    <el-button size="mini" @click="previewImage(scope.row)">预览</el-button>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center">
+                <template slot-scope="scope">
+                    <el-button size="mini" type="text" @click="modify(scope.row)">修改</el-button>
+                    <el-button size="mini" type="text" @click="delrow(scope.row)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize" @pagination="getList" />
+        <el-dialog class="diaform" :title="title" :visible.sync="visibleopen" :close-on-click-modal="false"
+            width="700px" append-to-body @close="colsedia">
+            <el-form :model="form" :rules="rules" ref="form" label-width="150px" text-align:center>
+                <div v-if="title == '新增图片'" style="display: flex;justify-content: center;">
+                    <el-upload list-type="picture-card">
+                        <i class="el-icon-plus"></i>
+                    </el-upload>
+                </div>
+
+                <div v-else>
+                    <img src="./imageTemp/peixun3.png" alt="" style="width: 100%;">
+                </div>
+
+                <el-form-item style="margin-top: 80px; text-align: center; margin-left: -150px">
+                    <el-button type="primary" style="width: 135px; font-size: 16px; height: 39px; line-height: 11px"
+                        @click="submitto('confirm')">确认</el-button>
+                    <el-button style="width: 135px; font-size: 16px; height: 39px; line-height: 11px; margin-left: 30px"
+                        @click="colsedia">取消</el-button>
+                </el-form-item>
+            </el-form>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import { getSchoolList, addSchool, updateSchool, delSchool } from '@/api/trainService/index.js'
+import ImageUpload from '@/components/ImgUpload/index.vue'
+export default {
+    name: 'peixunbaoming',
+    components: { ImageUpload },
+    data() {
+        return {
+            imgAction: process.env.VUE_APP_BASE_API + '/upload',
+            loading: false,
+            imageList: [],
+            // 总条数
+            total: 0,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+            },
+            title: '新增图片',
+            visibleopen: false,
+            form: {},
+            rules: {},
+            currentImage:''
+        }
+    },
+
+    mounted() { },
+    methods: {
+        async getList() {
+            // const res = await getSchoolList(this.queryParams)
+            // this.total = res.total
+            this.total = 10
+            // this.schoolList = res.rows
+            this.imageList = [
+                { id: 3, imgurl: "./imageTemp/2.jpg" },
+                { id: 4, imgurl: "./imageTemp/1.jpg" },
+                { id: 1, imgurl: "./imageTemp/peixun2.png" },
+                { id: 2, imgurl: "./imageTemp/peixun3.png" },
+            ];
+        },
+        //新增资讯的弹窗
+        addsign() {
+            this.title = '新增图片'
+            this.visibleopen = true
+        },
+        previewImage(params){
+            this.title = '图片预览'
+            this.currentImage = params.imgurl
+            console.log(this.currentImage);
+            this.visibleopen = true
+        },
+        //修改资讯的弹窗
+        async modify(row) {
+            this.title = '修改学校'
+            this.visibleopen = true
+            this.form = row
+        },
+        async delrow(row) {
+            this.$confirm('是否确认删除学校', '警告', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            })
+                .then(function () {
+                    return delSchool(row.schoolId)
+                })
+                .then(() => {
+                    this.getList()
+                    this.$message.success('删除成功')
+                })
+        },
+        // 提交
+        async submitto() {
+            if (this.form.schoolId) {
+                // 修改
+                await updateSchool(this.form)
+                this.$message.success('修改成功')
+            } else {
+                await addSchool(this.form)
+                this.$message.success('新增成功')
+            }
+            this.colsedia()
+            this.getList()
+        },
+        // 关闭
+        colsedia() {
+            this.visibleopen = false
+        },
+        handleQuery() {
+            this.getList()
+        },
+        resetQuery() {
+            this.resetForm('queryForm')
+            this.getList()
+        },
+    },
+    created() {
+        this.getList()
+    },
+}
+</script>
+
+<style lang="scss" scoped></style>