elink-star
/
esua-epdc-admin-js
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

志愿者 - banner管理，页面重构

feature/syp_points
zhangyongzhangyong 5 years ago
parent
4db737571a
commit
aa3c69d777
2 changed files with 104 additions and 117 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 168
      src/views/modules/heart/actbanner-add-or-update.vue
  2. 53
      src/views/modules/heart/actbanner.vue

168
src/views/modules/heart/actbanner-add-or-update.vue
View File

@ -1,53 +1,31 @@
<template>
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
<el-form-item label="活动ID" prop="actId">
<el-input v-model="dataForm.actId" placeholder="活动ID"></el-input>
</el-form-item>
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '200px' : '120px'">
<el-form-item label="标题" prop="title">
<el-input v-model="dataForm.title" placeholder="标题"></el-input>
</el-form-item>
<el-form-item label="banner图片" prop="bannerImg">
<el-input v-model="dataForm.bannerImg" placeholder="banner图片"></el-input>
</el-form-item>
<el-form-item label="banner类型 0-活动，1-连接" prop="bannerType">
<el-input v-model="dataForm.bannerType" placeholder="banner类型 0-活动，1-连接"></el-input>
</el-form-item>
<el-form-item label="连接地址" prop="url">
<el-input v-model="dataForm.url" placeholder="连接地址"></el-input>
</el-form-item>
<el-form-item label="上下架状态 0-下架，1-上架" prop="statue">
<el-input v-model="dataForm.statue" placeholder="上下架状态 0-下架，1-上架"></el-input>
</el-form-item>
<el-form-item label="上下架时间" prop="statueTime">
<el-input v-model="dataForm.statueTime" placeholder="上下架时间"></el-input>
</el-form-item>
<el-form-item label="banner位置 0-顶部" prop="bannerPosition">
<el-input v-model="dataForm.bannerPosition" placeholder="banner位置 0-顶部"></el-input>
</el-form-item>
<el-form-item label="浏览数量" prop="browseNum">
<el-input v-model="dataForm.browseNum" placeholder="浏览数量"></el-input>
</el-form-item>
<el-form-item label="创建部门ID" prop="deptId">
<el-input v-model="dataForm.deptId" placeholder="创建部门ID"></el-input>
</el-form-item>
<el-form-item label="乐观锁" prop="revision">
<el-input v-model="dataForm.revision" placeholder="乐观锁"></el-input>
</el-form-item>
<el-form-item label="删除标识 0-否，1-是" prop="delFlag">
<el-input v-model="dataForm.delFlag" placeholder="删除标识 0-否，1-是"></el-input>
</el-form-item>
<el-form-item label="创建人" prop="createdBy">
<el-input v-model="dataForm.createdBy" placeholder="创建人"></el-input>
</el-form-item>
<el-form-item label="创建时间" prop="createdTime">
<el-input v-model="dataForm.createdTime" placeholder="创建时间"></el-input>
</el-form-item>
<el-form-item label="更新人" prop="updatedBy">
<el-input v-model="dataForm.updatedBy" placeholder="更新人"></el-input>
</el-form-item>
<el-form-item label="更新时间" prop="updatedTime">
<el-input v-model="dataForm.updatedTime" placeholder="更新时间"></el-input>
<el-input v-model="dataForm.title" placeholder="标题" maxlength="30" show-word-limit></el-input>
</el-form-item>
<el-row>
<el-form-item label="banner图片"
v-loading="loading"
prop="bannerImg">
<el-upload class="avatar-uploader"
:action="uploadUrl"
:show-file-list="false"
:on-success="handleAvatarActSuccess"
:on-error="handelError"
:before-upload="beforeAvatarUpload">
<img v-if="dataForm.bannerImg"
:src="dataForm.bannerImg"
class="avatar">
<i v-else
class="el-icon-plus avatar-uploader-icon"></i>
<div slot="tip"
class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</el-form-item>
</el-row>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="dataForm.sort" :min="0" :max="4"></el-input-number>
</el-form-item>
</el-form>
<template slot="footer">
@ -59,6 +37,7 @@
<script>
import debounce from 'lodash/debounce'
import Cookies from 'js-cookie'
export default {
data () {
return {
@ -70,9 +49,9 @@ export default {
bannerImg: '',
bannerType: '',
url: '',
statue: '',
statueTime: '',
bannerPosition: '',
status: 1, // 默认上架
statusTime: '',
bannerPosition: 0, // banner位置 0-顶部 默认顶部
browseNum: '',
deptId: '',
revision: '',
@ -80,64 +59,33 @@ export default {
createdBy: '',
createdTime: '',
updatedBy: '',
updatedTime: ''
}
updatedTime: '',
sort: 0
},
// 图片
loading: false,
uploadUrl: ''
}
},
computed: {
dataRule () {
return {
actId: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
title: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
bannerImg: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
bannerType: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
url: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
statue: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
statueTime: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
bannerPosition: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
browseNum: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
deptId: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
revision: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
delFlag: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
createdBy: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
createdTime: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
updatedBy: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
updatedTime: [
sort: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
created () {
this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
this.dataForm.bannerImg = ''
},
methods: {
init () {
this.visible = true
@ -160,12 +108,23 @@ export default {
}
}).catch(() => {})
},
handleAvatarActSuccess (res, file) {
this.loading = false
this.dataForm.bannerImg = res.data.url
},
beforeAvatarUpload (file) {
this.loading = true
},
handelError () {
this.loading = false
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.dataForm.statusTime = new Date()
this.$http[!this.dataForm.id ? 'post' : 'put']('/heart/actbanner/', this.dataForm).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
@ -185,3 +144,28 @@ export default {
}
}
</script>
<style>
.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;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>

53
src/views/modules/heart/actbanner.vue
View File

@ -8,42 +8,40 @@
<el-option label="下架" :value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="时间"
prop="startTime">
<el-date-picker v-model="dataForm.startTime"
type="date"
:picker-options="pickerBeginDateBefore"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
<el-form-item label="至"
label-width="25px"
prop="endTime">
<el-date-picker v-model="dataForm.endTime"
type="date"
:picker-options="pickerBeginDateAfter"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
</el-form-item>
<el-form-item>
<el-button v-if="$hasPermission('heart:actbanner:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
<el-table-column label="序号" type="index" show-overflow-tooltip align="center" width="50"></el-table-column>
<el-table-column prop="title" label="标题" header-align="center" align="center"></el-table-column>
<el-table-column align="center" label="Banner图片" :show-overflow-tooltip="true" prop="bannerImg">
<template slot-scope="scope">
<el-popover placement="right"
title=""
trigger="click"
class="big_image">
<el-image slot="reference"
min-width="70"
height="70"
:src="scope.row.bannerImg"
:alt="scope.row.bannerImg"></el-image>
<img class="big_image"
:src="scope.row.bannerImg" />
</el-popover>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" :formatter="formatState" header-align="center" align="center"></el-table-column>
<el-table-column prop="sort" label="排序" header-align="center" align="center"></el-table-column>
<el-table-column prop="statusTime" label="上下架时间" header-align="center" align="center"></el-table-column>
<el-table-column prop="browseNum" label="浏览数量" header-align="center" align="center"></el-table-column>
<el-table-column prop="createdTime" label="创建时间" header-align="center" align="center"></el-table-column>
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
<template slot-scope="scope">
<el-button v-if="$hasPermission('heart:actbanner:grounding')" type="text" size="small" @click="changeGroundingHandle(scope.row)">{{ changeGroundingText(scope.row.status) }}</el-button>
<el-button v-if="$hasPermission('heart:actbanner:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
</template>
</el-table-column>
</el-table>
@ -87,7 +85,7 @@ export default {
AddOrUpdate
},
methods: {
changeGroundingText(status){
changeGroundingText (status) {
let state = status
if (state === '1') {
return '下架'
@ -105,7 +103,6 @@ export default {
},
changeGroundingHandle: debounce(function (row) {
this.$confirm(this.$t('prompt.info', { 'handle': this.changeGroundingText(row.status) }), this.$t('prompt.title'), {
confirmButtonText: this.$t('confirm'),
cancelButtonText: this.$t('cancel'),
@ -130,3 +127,9 @@ export default {
}
}
</script>
<style scoped>
.big_image {
width: 300px;
height: 240px;
}
</style>

Write Preview
Loading…
Cancel
Save