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

banner图

master
qushutong 6 years ago
parent
6cfcb21f7d
commit
3b2ce84f84
3 changed files with 447 additions and 1 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. 280
      src/views/modules/news/banner-add-or-update.vue
  2. 166
      src/views/modules/news/banner.vue
  3. 2
      src/views/modules/news/newsdraft.vue

280
src/views/modules/news/banner-add-or-update.vue
View File

@ -0,0 +1,280 @@
<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="链接地址"
prop="url">
<el-input v-model="dataForm.url"
placeholder="链接地址"></el-input>
</el-form-item>
<el-form-item label="标题"
prop="title">
<el-input v-model="dataForm.title"
placeholder="标题"></el-input>
</el-form-item>
<el-form-item label="所属街道"
prop="streetId">
<el-select v-model="dataForm.streetId"
@change="changeStreet"
placeholder="所属街道">
<el-option v-for="item in streetList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="所属社区">
<el-select v-model="dataForm.communityId"
@change="changeCommunity"
placeholder="所属社区">
<el-option v-for="item in communityList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="所属网格">
<el-select v-model="dataForm.gridId"
@change="changeGrid"
placeholder="所属网格">
<el-option v-for="item in gridList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="banner类型"
prop="bannerType">
<el-select v-model="dataForm.bannerType"
placeholder="请选择">
<el-option v-for="item in bannerOptions"
:key="item.dictValue"
:label="item.dictName"
:value="item.dictValue">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="banner图片"
prop="imgUrl">
<el-upload class="avatar-uploader"
:action="this.uploadUrl"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="dataForm.imgUrl"
:src="dataForm.imgUrl"
class="avatar">
<i v-else
class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
<template slot="footer">
<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
<el-button type="primary"
@click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
</template>
</el-dialog>
</template>
<script>
import Cookies from 'js-cookie'
import debounce from 'lodash/debounce'
export default {
data () {
return {
visible: false,
dataForm: {
id: '',
url: '',
title: '',
imgUrl: '',
bannerType: '',
streetId: '',
street: '',
communityId: '',
community: '',
gridId: '',
grid: ''
},
bannerOptions: [],
streetList: [],
communityList: [],
gridList: [],
uploadUrl: ''
}
},
computed: {
dataRule () {
return {
url: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
title: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
imgUrl: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
bannerType: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
streetId: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
gridId: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
created () {
// 1169154711480528897 为市北区部门ID
this.getDeptInfoList('street', '1169154711480528897')
},
methods: {
init () {
this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
this.getbannerType()
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.getInfo()
}
})
},
// 获取信息
getInfo () {
this.$http.get(`/news/banner/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = res.data
if (this.dataForm.streetId) {
if (this.dataForm.communityId === 0) {
this.dataForm.communityId = this.dataForm.gridId = null
}
this.getDeptInfoList('community', this.dataForm.streetId)
}
if (this.dataForm.communityId) {
if (this.dataForm.gridId === 0) {
this.dataForm.gridId = null
}
this.getDeptInfoList('grid', this.dataForm.communityId)
}
}).catch(() => { })
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.$http[!this.dataForm.id ? 'post' : 'put']('/news/banner/', this.dataForm).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
}).catch(() => { })
})
}, 1000, { 'leading': true, 'trailing': false }),
// 上传图片
handleAvatarSuccess (res, file) {
this.dataForm.imgUrl = URL.createObjectURL(file.raw)
},
beforeAvatarUpload (file) {
},
getbannerType () {
this.$http.get(`/sys/dict/listSimple/` + 'bannerType').then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.bannerOptions = res.data
}).catch(() => { })
},
// 获取部门列表
getDeptInfoList (dataReceiver, faDeptId) {
this.$http.get(`/sys/dept/sublist/` + faDeptId).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
if (dataReceiver === 'street') {
this.streetList = res.data
} else if (dataReceiver === 'community') {
this.communityList = res.data
} else if (dataReceiver === 'grid') {
this.gridList = res.data
}
}).catch(() => { })
},
changeStreet () {
// 给街道变量赋值
let choosenItem = this.streetList.filter(item => item.id === this.dataForm.streetId)[0]
this.dataForm.street = choosenItem.name
// 清空社区与网格的变量值
this.dataForm.communityId = this.dataForm.gridId = this.dataForm.community = this.dataForm.grid = null
this.communityList = this.gridList = []
// 获取街道下属社区
this.getDeptInfoList('community', this.dataForm.streetId)
},
changeCommunity () {
// 给社区变量赋值
let choosenItem = this.communityList.filter(item => item.id === this.dataForm.communityId)[0]
this.dataForm.community = choosenItem.name
// 情况网格的变量值
this.dataForm.gridId = this.dataForm.grid = null
this.gridList = []
// 获取社区下属网格
this.getDeptInfoList('grid', this.dataForm.communityId)
},
changeGrid () {
// 给网格变量赋值
let choosenItem = this.gridList.filter(item => item.id === this.dataForm.gridId)[0]
this.dataForm.grid = choosenItem.name
}
}
}
</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: 578px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 300px;
height: 178px;
display: block;
}
</style>

166
src/views/modules/news/banner.vue
View File

@ -0,0 +1,166 @@
<template>
<el-card shadow="never"
class="aui-card--fill">
<div class="mod-news__banner}">
<el-form :inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.id"
placeholder="id"
clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
</el-form-item>
<el-form-item>
<el-button 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 prop="title"
label="标题"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="imgUrl"
label="banner图片"
header-align="center"
align="center">
<template slot-scope="scope">
<img :src="scope.row.imgUrl"
width="40"
height="40" />
</template>
</el-table-column>
<el-table-column prop="bannerType"
label="banner类型"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="state"
label="上下架状态"
:formatter="bannerState"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="stateTime"
label="上下架时间"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="createdBy"
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 prop="updatedBy"
label="更新人"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="updatedTime"
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 type="text"
size="small"
@click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
<el-button type="text"
size="small"
@click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
<el-button type="text"
size="small"
v-if="scope.row.state === '1'"
@click="soltOut(scope.row.id)">下架</el-button>
<el-button type="text"
size="small"
v-if="scope.row.state === '0'"
@click="putaway(scope.row.id)">上架</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination :current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle">
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"></add-or-update>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './banner-add-or-update'
export default {
mixins: [mixinViewModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/news/banner/page',
getDataListIsPage: true,
deleteURL: '/news/banner',
deleteIsBatch: true
},
dataForm: {
id: ''
}
}
},
components: {
AddOrUpdate
},
methods: {
bannerState: function (row, column) {
console.log(row.partyFlag)
return row.state === '1' ? '已上架' : row.state === '0' ? '已下架' : '未知'
},
soltOut (id) {
this.$http.post(`/news/banner/soltOut/` + id).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.getDataList()
}
})
}).catch(() => { })
},
putaway (id) {
this.$http.post(`/news/banner/putAway/` + id).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.getDataList()
}
})
}).catch(() => { })
}
}
}
</script>

2
src/views/modules/news/newsdraft.vue
View File

@ -51,7 +51,7 @@
</el-date-picker> &nbsp; &nbsp;
<el-form-item label="类别">
<el-select v-model="dataForm.category"
placeholder="所属网格">
placeholder="所属类别">
<el-option v-for="item in categorys"
:key="item.id"
:label="item.name"

Write Preview
Loading…
Cancel
Save