添加轮播图管理

.env.development

@@ -5,7 +5,7 @@ ENV = 'development'
 VUE_APP_BASE_API = '/prod-api'
 
 # VUE_APP_BASE_TARGET = 'http://www.bjkeyware.com/test-api'
-VUE_APP_BASE_TARGET = 'http://192.168.0.229:9999'
+VUE_APP_BASE_TARGET = 'http://192.168.0.230:9999'
 # VUE_APP_BASE_TARGET = 'http://192.168.0.129:9999'
 # VUE_APP_BASE_TARGET = 'http://172.16.36.180:9999'
 

.env.production

@@ -6,7 +6,7 @@ VUE_APP_BASE_API = '/prod-api'
 # VUE_APP_BASE_API = '/test-api'
 
 # VUE_APP_BASE_TARGET = 'https://www.keyitest.cn/prod-api'
-VUE_APP_BASE_TARGET = 'http://192.168.0.229:9999'
+VUE_APP_BASE_TARGET = 'http://192.168.0.230:9999'
 # VUE_APP_BASE_TARGET = 'http://www.bjkeyware.com/test-api'
 # VUE_APP_BASE_TARGET = 'http://www.bjkeyware.com/prod-api'
 # VUE_APP_BASE_TARGET = 'http://www.keyitest.cn/prod-api'

src/api/trainService/index.js

@@ -204,3 +204,38 @@ export function exportExcelF(id) {
     responseType: 'blob',
   })
 }
+
+
+// 获取所有轮播图
+export function getSwiperInfo() {
+  return request({
+    url: '/train/admin/banner/list',
+    method: 'get',
+  })
+}
+
+// 提交轮播图
+export function addSwiperInfo(data) {
+  return request({
+    url: 'train/admin/banner/add',
+    method: 'post',
+    data
+  })
+}
+
+// 获取轮播图班级类型
+export function getSwiperClass() {
+  return request({
+    url: '/train/admin/bannerTrainClasses',
+    method: 'get',
+  })
+}
+
+// 删除轮播图
+export function delteSwiper(id) {
+  console.log(id);
+  return request({
+    url: '/train/admin/banner/'+id,
+    method: 'delete',
+  })
+}

src/components/ImgUpload/index.vue

@@ -65,6 +65,7 @@ export default {
   data() {
     return {
       fileList: [],
+      upfileName:'',
       filePath: '',
       imageVisible: false,
       dialogImageUrl: '',
@@ -133,6 +134,7 @@ export default {
         this.$message.error('文件大小不能小于' + this.minSizeTip)
         return false
       }
+      this.upfileName = file.name.substring(0,file.name.lastIndexOf("."))
       return isRightSize && isAccept
     },
     // 文件上传时
@@ -147,6 +149,7 @@ export default {
     // 删除时方法
     handelDelete(file, fileList) {
       console.log('删除接口', this.filePath, file, fileList)
+      this.$emit('fileChange','')
       this.filePath = ''
     },
     clearImages() {
@@ -157,6 +160,7 @@ export default {
     // 上传成功
     handleSuccess(response, file) {
       this.value.push(response.fileName)
+      this.$emit('fileChange',this.upfileName)
       // this.filePath=''
       // this.handelDelete()
     },
@@ -168,7 +172,9 @@ export default {
     handleExceed() {
       this.$message.error('最多只能上传' + this.limit + '个文件')
     },
-    handleChange() {},
+    handleChange() {
+
+    },
 
     //通过父组件传过来的value更新子组件
     setFileList(string) {
@@ -222,4 +228,9 @@ export default {
 .uploadpic >>> .upLoadHide .el-upload {
   display: none;
 }
+.widthFix >>> .el-upload-list--picture-card .el-upload-list__item {
+  width: 90%;
+  height: 148px;
+  /* line-height: 146px; */
+}
 </style>

src/views/trainService/swiperManager.vue

@@ -8,16 +8,29 @@
         </el-form>
         <el-table v-loading="loading" :data="imageList">
             <el-table-column label="序号" align="center" type="index" />
-
+            <el-table-column label="班级名称" align="center" prop="className" />
-            <el-table-column label="图片预览" align="center">
+            <el-table-column label="班级类型" align="center" prop="">
                 <template slot-scope="scope">
-                    <span>{{ scope.row.imgurl.substring(scope.row.imgurl.lastIndexOf('/')+1,scope.row.imgurl.length) }} </span>
+                    {{ classTypeObj[scope.row.classType] }}
-                    <el-button size="mini" @click="previewImage(scope.row)">预览</el-button>
+                </template>
+            </el-table-column>
+            <el-table-column label="平台" align="center">
+                <template slot-scope="scope">
+                    {{ platform[scope.row.fileType] }}
                 </template>
             </el-table-column>
+            <el-table-column label="排序" align="center" prop="sort" />
+            <!-- <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="previewImage(scope.row)">预览</el-button>
                     <el-button size="mini" type="text" @click="delrow(scope.row)">删除</el-button>
                 </template>
             </el-table-column>
@@ -26,16 +39,34 @@
             :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 == '图片预览'">
-                <div v-if="title == '新增图片'" style="display: flex;justify-content: center;">
+                <img :src="currentImage" alt="" style="width: 100%;">
-                    <el-upload list-type="picture-card">
+            </div>
-                        <i class="el-icon-plus"></i>
+            <el-form v-else :model="swiperInfo" :rules="rules" ref="form" label-width="150px" text-align:center>
-                    </el-upload>
+                <el-form-item label="文件上传：" prop="filePath">
-                </div>
+                    <div>
+                        <ImageUpload ref="imgupload" v-model="swiperInfo.filePath" listtype='picture-card'
+                            class="widthFix"  fileName="publicize" :limit="1" />
+                    </div>
+                </el-form-item>
+
+                <el-form-item label="排序" prop="fileName">
+                    <el-input v-model="swiperInfo.fileName"></el-input>
+                </el-form-item>
 
-                <div v-else>
+                <el-form-item label="类型" prop="fileType">
-                    <img src="./imageTemp/peixun3.png" alt="" style="width: 100%;">
+                    <el-radio-group v-model="swiperInfo.fileType">
-                </div>
+                        <el-radio label="pc"></el-radio>
+                        <el-radio label="app"></el-radio>
+                    </el-radio-group>
+                </el-form-item>
+
+                <el-form-item label="班级">
+                    <el-select v-model="swiperInfo.entityId" placeholder="请选择班级" clearable>
+                        <el-option v-for="item in classList" :key="item.train_class_id" :label="item.train_class_name"
+                            :value="item.train_class_id"></el-option>
+                    </el-select>
+                </el-form-item>
 
                 <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"
@@ -48,8 +79,34 @@
     </div>
 </template>
 <script>
-import { getSchoolList, addSchool, updateSchool, delSchool } from '@/api/trainService/index.js'
+// import { getSchoolList, addSchool, updateSchool, delSchool } from '@/api/trainService/index.js'
+import { getSwiperInfo, addSwiperInfo, getSwiperClass, delteSwiper } from '@/api/trainService/index'
 import ImageUpload from '@/components/ImgUpload/index.vue'
+import { deepClone } from '@/utils'
+// const validateNumber = (rule, value, callback) => {
+//     const rgx = /^\d+$/
+//     console.log(value);
+//     if (value === '') {
+//         callback(new Error('请输入排序'));
+//     } else {
+//        setTimeout(() => {
+//         alert(value)
+//         alert(rgx.test(value))
+//        }, 1000);
+
+//     }
+// else if(rgx.test(value)){
+//   callback();
+
+// } 
+// else {
+// //   if (this.ruleForm.checkPass !== '') {
+// //     this.$refs.ruleForm.validateField('checkPass');
+// //   }
+
+//   callback();
+// }
+// };
 export default {
     name: 'peixunbaoming',
     components: { ImageUpload },
@@ -58,6 +115,16 @@ export default {
             imgAction: process.env.VUE_APP_BASE_API + '/upload',
             loading: false,
             imageList: [],
+            classTypeObj: {
+                "0": "校企合作班",
+                "1": "线下培训进阶班",
+                "2": "可靠性人才培训班",
+                "3": "师资培训班"
+            },
+            platform: {
+                "pc": "客户端",
+                "app": "小程序",
+            },
             // 总条数
             total: 0,
             // 查询参数
@@ -65,53 +132,83 @@ export default {
                 pageNum: 1,
                 pageSize: 10,
             },
+            swiperInfo: {
+                fileName: 1,
+                entityId: '',
+                fileType: '',
+                filePath: []
+            },
+            classList: [],
             title: '新增图片',
             visibleopen: false,
-            form: {},
+            rules: {
-            rules: {},
+                filePath: [
-            currentImage:''
+                    { required: true, message: '请上传图片', trigger: 'blur' },
+                ],
+                fileName: [
+                    { required: true, trigger: 'blur', message: "请输入排序" },
+                    { pattern: /^\d+$/, message: "请输入正整数", trigger: "blur" }
+                ],
+                fileType: [
+                    { required: true, message: '请选择类型', trigger: 'change' },
+                ],
+
+            },
+            currentImage: '',
         }
     },
-
-    mounted() { },
     methods: {
         async getList() {
-            // const res = await getSchoolList(this.queryParams)
+            const res = await getSwiperInfo()
             // this.total = res.total
-            this.total = 10
+            this.imageList = res.data
-            // this.schoolList = res.rows
+            const classRes = await getSwiperClass()
-            this.imageList = [
+            console.log(classRes);
-                { id: 3, imgurl: "./imageTemp/2.jpg" },
+            this.classList = classRes.data
-                { id: 4, imgurl: "./imageTemp/1.jpg" },
+            // this.imageList = [
-                { id: 1, imgurl: "./imageTemp/peixun2.png" },
+            //     { id: 3, imgurl: "./imageTemp/2.jpg" },
-                { id: 2, imgurl: "./imageTemp/peixun3.png" },
+            //     { id: 4, imgurl: "./imageTemp/1.jpg" },
-            ];
+            //     { id: 1, imgurl: "./imageTemp/peixun2.png" },
+            //     { id: 2, imgurl: "./imageTemp/peixun3.png" },
+            // ];
         },
+        // numberInput(e){
+        //     if(e == '-'){
+        //         this.swiperInfo.sort = ''
+        //     }
+        // },
         //新增资讯的弹窗
         addsign() {
             this.title = '新增图片'
             this.visibleopen = true
         },
-        previewImage(params){
+        // fileChnage(fileName) {
+        //     if (!fileName && !this.swiperInfo.fileName) {
+        //         this.swiperInfo.fileName = ''
+        //     } else if (!this.swiperInfo.fileName) {
+        //         this.swiperInfo.fileName = fileName
+        //     }
+        // },
+        previewImage(params) {
             this.title = '图片预览'
-            this.currentImage = params.imgurl
+            console.log(params);
-            console.log(this.currentImage);
+            this.currentImage = process.env.VUE_APP_BASE_API + params.filePath
             this.visibleopen = true
         },
         //修改资讯的弹窗
         async modify(row) {
-            this.title = '修改学校'
+            this.title = '修改图片'
             this.visibleopen = true
             this.form = row
         },
         async delrow(row) {
-            this.$confirm('是否确认删除学校', '警告', {
+            this.$confirm('是否确认删除图片', '警告', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning',
             })
                 .then(function () {
-                    return delSchool(row.schoolId)
+                    return delteSwiper(row.fileId)
                 })
                 .then(() => {
                     this.getList()
@@ -119,29 +216,48 @@ export default {
                 })
         },
         // 提交
-        async submitto() {
+        submitto() {
-            if (this.form.schoolId) {
+            this.$refs['form'].validate((valid) => {
-                // 修改
+                if (valid) {
-                await updateSchool(this.form)
+                    this.submit()
-                this.$message.success('修改成功')
+                } else {
-            } else {
+                    console.log('error submit!!');
-                await addSchool(this.form)
+                    return false;
+                }
+            })
+
+        },
+        async submit() {
+            const data = deepClone(this.swiperInfo)
+            data.filePath = data.filePath.toString()
+            data.entityId = data.entityId * 1
+            const res = await addSwiperInfo(data)
+            if (res.code == 200) {
                 this.$message.success('新增成功')
+                this.colsedia()
+                this.getList()
             }
-            this.colsedia()
-            this.getList()
         },
         // 关闭
         colsedia() {
+            this.$refs['form'].resetFields()
+            this.swiperInfo = {
+                fileName: '',
+                entityId: '',
+                fileType: '',
+                filePath: []
+            }
+            this.$refs.imgupload.clearImages()
+            this.currentImage = ""
             this.visibleopen = false
         },
-        handleQuery() {
+        // handleQuery() {
-            this.getList()
+        //     this.getList()
-        },
+        // },
-        resetQuery() {
+        // resetQuery() {
-            this.resetForm('queryForm')
+        //     this.resetForm('queryForm')
-            this.getList()
+        //     this.getList()
-        },
+        // },
     },
     created() {
         this.getList()
@@ -149,4 +265,8 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.el-upload-list--picture-card .el-upload-list__item {
+    width: 100% !important;
+}
+</style>