|
|
|
|
@ -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"> |
|
|
|
|
<el-table-column label="班级名称" align="center" prop="className" /> |
|
|
|
|
<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> |
|
|
|
|
<el-button size="mini" @click="previewImage(scope.row)">预览</el-button> |
|
|
|
|
{{ classTypeObj[scope.row.classType] }} |
|
|
|
|
</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 == '新增图片'" style="display: flex;justify-content: center;"> |
|
|
|
|
<el-upload list-type="picture-card"> |
|
|
|
|
<i class="el-icon-plus"></i> |
|
|
|
|
</el-upload> |
|
|
|
|
<div v-if="title == '图片预览'"> |
|
|
|
|
<img :src="currentImage" alt="" style="width: 100%;"> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div v-else> |
|
|
|
|
<img src="./imageTemp/peixun3.png" alt="" style="width: 100%;"> |
|
|
|
|
<el-form v-else :model="swiperInfo" :rules="rules" ref="form" label-width="150px" text-align:center> |
|
|
|
|
<el-form-item label="文件上传：" prop="filePath"> |
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
|
<el-form-item label="类型" prop="fileType"> |
|
|
|
|
<el-radio-group v-model="swiperInfo.fileType"> |
|
|
|
|
<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: {}, |
|
|
|
|
currentImage:'' |
|
|
|
|
rules: { |
|
|
|
|
filePath: [ |
|
|
|
|
{ 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.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" }, |
|
|
|
|
]; |
|
|
|
|
this.imageList = res.data |
|
|
|
|
const classRes = await getSwiperClass() |
|
|
|
|
console.log(classRes); |
|
|
|
|
this.classList = classRes.data |
|
|
|
|
// 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" }, |
|
|
|
|
// ]; |
|
|
|
|
}, |
|
|
|
|
// 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(this.currentImage); |
|
|
|
|
console.log(params); |
|
|
|
|
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() { |
|
|
|
|
if (this.form.schoolId) { |
|
|
|
|
// 修改 |
|
|
|
|
await updateSchool(this.form) |
|
|
|
|
this.$message.success('修改成功') |
|
|
|
|
submitto() { |
|
|
|
|
this.$refs['form'].validate((valid) => { |
|
|
|
|
if (valid) { |
|
|
|
|
this.submit() |
|
|
|
|
} else { |
|
|
|
|
await addSchool(this.form) |
|
|
|
|
this.$message.success('新增成功') |
|
|
|
|
console.log('error submit!!'); |
|
|
|
|
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() |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 关闭 |
|
|
|
|
colsedia() { |
|
|
|
|
this.$refs['form'].resetFields() |
|
|
|
|
this.swiperInfo = { |
|
|
|
|
fileName: '', |
|
|
|
|
entityId: '', |
|
|
|
|
fileType: '', |
|
|
|
|
filePath: [] |
|
|
|
|
} |
|
|
|
|
this.$refs.imgupload.clearImages() |
|
|
|
|
this.currentImage = "" |
|
|
|
|
this.visibleopen = false |
|
|
|
|
}, |
|
|
|
|
handleQuery() { |
|
|
|
|
this.getList() |
|
|
|
|
}, |
|
|
|
|
resetQuery() { |
|
|
|
|
this.resetForm('queryForm') |
|
|
|
|
this.getList() |
|
|
|
|
}, |
|
|
|
|
// handleQuery() { |
|
|
|
|
// this.getList() |
|
|
|
|
// }, |
|
|
|
|
// resetQuery() { |
|
|
|
|
// this.resetForm('queryForm') |
|
|
|
|
// 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> |
|
|
|
|
|
hcj
5 months ago