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

Merge remote-tracking branch 'origin/feature/zy_O3_volunteerUnion'

master
liuchuang 4 years ago
parent
86ac5fdab3 d397356653
commit
5cd47d9129
6 changed files with 1217 additions and 22 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. 219
      src/views/modules/heart/volunteerunion-add-or-update.vue
  2. 239
      src/views/modules/heart/volunteerunion-detail.vue
  3. 25
      src/views/modules/heart/volunteerunion.vue
  4. 378
      src/views/modules/heart/volunteerunionact-add-or-update.vue
  5. 260
      src/views/modules/heart/volunteerunionact-detail.vue
  6. 104
      src/views/modules/heart/volunteerunionact.vue

219
src/views/modules/heart/volunteerunion-add-or-update.vue
View File

@ -1,6 +1,26 @@
<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-row>
<el-form-item label="联盟图片"
v-loading="loading"
prop="headPic">
<el-upload class="avatar-uploader"
:action="uploadUrl"
:show-file-list="false"
:on-success="handleAvatarActSuccess"
:on-error="handelError"
:before-upload="beforeAvatarUpload">
<img v-if="dataForm.headPic"
:src="dataForm.headPic"
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="unionName">
<el-input v-model="dataForm.unionName" placeholder="联盟名称" style="width: 260px"></el-input>
</el-form-item>
@ -14,9 +34,9 @@
<el-input-number v-model="dataForm.sort" controls-position="right" :min="0" label="排序" style="width: 260px"></el-input-number>
</el-form-item>
<el-form-item prop="content"
label="团队介绍">
label="联盟简介">
<el-row style="height: 400px;">
<tinymce-editor v-model="dataForm.content"></tinymce-editor>
<tinymce-editor :init="init" :key="tinymceFlag" v-model="dataForm.content"></tinymce-editor>
</el-row>
</el-form-item>
</el-form>
@ -28,6 +48,7 @@
</template>
<script>
import Cookies from 'js-cookie'
import debounce from 'lodash/debounce'
import TinymceEditor from '@/components/tinymce-editor'
export default {
@ -46,8 +67,12 @@ export default {
createdTime: '',
updatedBy: '',
updatedTime: '',
delFlag: ''
}
delFlag: '',
headPic: ''
},
loading: false,
uploadUrl: '',
tinymceFlag: 1
}
},
computed: {
@ -61,18 +86,30 @@ export default {
],
phone: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
], content: [
],
content: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
sort: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
headPic: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
activated () {
this.tinymceFlag++
},
components: {
TinymceEditor
},
created () {
this.$nextTick(() => {
this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
})
},
methods: {
init () {
this.visible = true
@ -116,7 +153,177 @@ export default {
})
}).catch(() => {})
})
}, 1000, { 'leading': true, 'trailing': false })
}, 1000, { 'leading': true, 'trailing': false }),
handleAvatarActSuccess (res, file) {
this.loading = false
this.dataForm.headPic = res.data.url
},
beforeAvatarUpload (file) {
this.loading = true
},
handelError () {
this.loading = false
}
}
}
</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>
<style lang="scss">
.project-handle {
.el-timeline {
padding-left: 9px;
font-size: 13px;
}
.el-textarea {
width: 600px !important;
}
.el-input {
width: 600px !important;
}
}
.el-form-item__label {
font-weight: bold;
}
</style>
<style lang="scss" scoped>
.project-handle {
width: 100%;
height: calc(100vh - 120px);
background: #ffffff;
box-sizing: border-box;
padding: 10px;
.project-detail {
width: 100%;
height: 49%;
border: 2px solid #ccc;
box-sizing: border-box;
padding: 10px;
padding-top: 20px;
float: left;
margin-bottom: 1%;
position: relative;
.project-detail-tip {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 30px;
line-height: 30px;
color: #ffffff;
background: #4ac38b;
text-align: center;
}
.el-form {
width: 58%;
height: 100%;
float: left;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #ccc;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #fff;
}
}
.container {
width: 40%;
height: 100%;
float: right;
.location {
height: 30px;
line-height: 30px;
}
#map {
width: 100%;
height: calc(100% - 30px);
}
}
}
.project-progress {
width: 20%;
height: 100%;
float: right;
border: 2px solid #ccc;
box-sizing: border-box;
margin-left: 1%;
padding-top: 20px;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #aaa;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #ccc;
}
}
.handle-operation {
padding-top: 30px;
box-sizing: border-box;
width: 100%;
height: 49%;
box-sizing: border-box;
border: 2px solid #ccc;
float: left;
position: relative;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #aaa;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #ccc;
}
.handle-operation-tip {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 30px;
line-height: 30px;
color: #ffffff;
background: #ff7600;
text-align: center;
}
}
}
</style>

239
src/views/modules/heart/volunteerunion-detail.vue
View File

@ -0,0 +1,239 @@
<template>
<el-dialog :visible.sync="visible" title="详情" :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-row>
<el-form-item label="联盟图片">
<img v-if="dataForm.headPic"
:src="dataForm.headPic"
class="avatar">
</el-form-item>
</el-row>
<el-form-item label="联盟名称">
{{dataForm.unionName}}
</el-form-item>
<el-form-item label="联系人">
{{dataForm.contacts}}
</el-form-item>
<el-form-item label="联系电话">
{{dataForm.phone}}
</el-form-item>
<el-form-item label="排序">
{{dataForm.sort}}
</el-form-item>
<el-form-item label="联盟简介">
<p v-html="dataForm.content"></p>
</el-form-item>
</el-form>
<template slot="footer">
<el-button @click="visible = false">返回</el-button>
</template>
</el-dialog>
</template>
<script>
export default {
data () {
return {
visible: false,
dataForm: {
id: '',
unionName: '',
contacts: '',
phone: '',
content: '',
sort: '',
headPic: ''
}
}
},
computed: {
dataRule () {
return {
}
}
},
methods: {
init () {
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.getInfo()
}
})
},
// 获取信息
getInfo () {
this.$http.get(`/heart/volunteerunion/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
}).catch(() => {})
}
}
}
</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>
<style lang="scss">
.project-handle {
.el-timeline {
padding-left: 9px;
font-size: 13px;
}
.el-textarea {
width: 600px !important;
}
.el-input {
width: 600px !important;
}
}
.el-form-item__label {
font-weight: bold;
}
</style>
<style lang="scss" scoped>
.project-handle {
width: 100%;
height: calc(100vh - 120px);
background: #ffffff;
box-sizing: border-box;
padding: 10px;
.project-detail {
width: 100%;
height: 49%;
border: 2px solid #ccc;
box-sizing: border-box;
padding: 10px;
padding-top: 20px;
float: left;
margin-bottom: 1%;
position: relative;
.project-detail-tip {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 30px;
line-height: 30px;
color: #ffffff;
background: #4ac38b;
text-align: center;
}
.el-form {
width: 58%;
height: 100%;
float: left;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #ccc;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #fff;
}
}
.container {
width: 40%;
height: 100%;
float: right;
.location {
height: 30px;
line-height: 30px;
}
#map {
width: 100%;
height: calc(100% - 30px);
}
}
}
.project-progress {
width: 20%;
height: 100%;
float: right;
border: 2px solid #ccc;
box-sizing: border-box;
margin-left: 1%;
padding-top: 20px;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #aaa;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #ccc;
}
}
.handle-operation {
padding-top: 30px;
box-sizing: border-box;
width: 100%;
height: 49%;
box-sizing: border-box;
border: 2px solid #ccc;
float: left;
position: relative;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #aaa;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #ccc;
}
.handle-operation-tip {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 30px;
line-height: 30px;
color: #ffffff;
background: #ff7600;
text-align: center;
}
}
}
</style>

25
src/views/modules/heart/volunteerunion.vue
View File

@ -31,21 +31,14 @@
<el-table-column type="index"
width="50"
label="序号" align="center"></el-table-column>
<!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
<!-- <el-table-column prop="id" label="主键" header-align="center" align="center"></el-table-column>-->
<el-table-column prop="unionName" label="联盟名称" header-align="center" align="center"></el-table-column>
<el-table-column prop="contacts" label="联系人" header-align="center" align="center"></el-table-column>
<el-table-column prop="phone" label="联系电话" 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="content" label="团队介绍" header-align="center" align="center"></el-table-column>-->
<!-- <el-table-column prop="revision" 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 prop="delFlag" 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="detailHandle(scope.row.id)">详情</el-button>
<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>
</template>
@ -62,6 +55,8 @@
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
<!-- 详情 -->
<volunteerunion-detail v-if="detailVisible" ref="volunteerunionDetail" @refreshDataList="getDataList"></volunteerunion-detail>
</div>
</el-card>
</template>
@ -69,6 +64,7 @@
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './volunteerunion-add-or-update'
import volunteerunionDetail from './volunteerunion-detail'
export default {
mixins: [mixinViewModule],
data () {
@ -81,11 +77,22 @@ export default {
},
dataForm: {
id: ''
},
detailVisible: false
}
},
methods: {
detailHandle (id) {
this.detailVisible = true
this.$nextTick(() => {
this.$refs.volunteerunionDetail.dataForm.id = id
this.$refs.volunteerunionDetail.init()
})
}
},
components: {
AddOrUpdate
AddOrUpdate,
volunteerunionDetail
}
}
</script>

378
src/views/modules/heart/volunteerunionact-add-or-update.vue
View File

@ -0,0 +1,378 @@
<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-row>
<el-form-item label="活动头图"
v-loading="loading"
prop="headPic">
<el-upload class="avatar-uploader"
:action="uploadUrl"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:on-error="handelError"
:before-upload="beforeAvatarUpload">
<img v-if="dataForm.headPic"
:src="dataForm.headPic"
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="unionId">
<el-select v-model="dataForm.unionId" filterable placeholder="请选择" style="width: 100%">
<el-option v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</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="actTime">
<el-date-picker v-model="dataForm.actTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="dataForm.sort" :min="0" :max="9999999" label="排序" style="width: 260px"></el-input-number>
</el-form-item>
<el-form-item label="简介" prop="content">
<el-row style="height: 400px;">
<tinymce-editor :init="init" :key="tinymceFlag" v-model="dataForm.content"></tinymce-editor>
</el-row>
</el-form-item>
<el-form-item label="精彩瞬间">
<el-upload accept="image/png, image/jpeg"
:action="uploadUrl"
list-type="picture-card"
:file-list="dataForm.images"
:limit="10"
:on-success="handleAvatarActSuccess"
:on-remove="removeImage"
:on-exceed="handleExceed">
<i class="el-icon-plus"></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 debounce from 'lodash/debounce'
import Cookies from 'js-cookie'
import TinymceEditor from '@/components/tinymce-editor'
export default {
data () {
return {
visible: false,
dataForm: {
id: '',
unionId: '',
title: '',
actStartTime: '',
actEndTime: '',
content: '',
sort: '',
actTime: [],
images: [],
headPic: ''
},
loading: false,
uploadUrl: '',
imgSort: 0,
options: [],
tinymceFlag: 1
}
},
computed: {
dataRule () {
return {
unionId: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
title: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
actTime: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
content: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
headPic: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
methods: {
init () {
this.visible = true
this.getOptionVolunteerUnion()
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
this.dataForm.images = []
this.imgSort = 0
if (this.dataForm.id) {
this.getInfo()
}
})
},
// 获取联盟下拉列表
getOptionVolunteerUnion () {
this.$http.get(`/heart/volunteerunion/optionVolunteerUnion`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.options = res.data
}).catch(() => {})
},
// 获取信息
getInfo () {
this.$http.get(`/heart/volunteerunionact/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
// 如果是追加图片，则赋值 imgSort
if (this.dataForm.images.length > 0) {
this.imgSort = this.dataForm.images[this.dataForm.images.length - 1].imgSort
}
}).catch(() => {})
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.$http[!this.dataForm.id ? 'post' : 'put']('/heart/volunteerunionact/', 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 }),
// 图片处理
handleAvatarActSuccess (res, file) {
let image = {}
image.name = Math.round(Math.random() * 5)
image.url = res.data.url
this.imgSort = this.imgSort + 1
image.imgSort = this.imgSort
this.dataForm.images.push(image)
},
removeImage (file, fileList) {
this.dataForm.images = fileList
},
handleExceed () {
this.$message({
showClose: true,
message: '精彩瞬间最多只能上传十张照片',
type: 'warning'
})
},
handleAvatarSuccess (res, file) {
this.loading = false
this.dataForm.headPic = res.data.url
},
beforeAvatarUpload (file) {
this.loading = true
},
handelError () {
this.loading = false
}
},
activated () {
this.tinymceFlag++
},
components: {
TinymceEditor
}
}
</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>
<style lang="scss">
.project-handle {
.el-timeline {
padding-left: 9px;
font-size: 13px;
}
.el-textarea {
width: 600px !important;
}
.el-input {
width: 600px !important;
}
}
.el-form-item__label {
font-weight: bold;
}
</style>
<style lang="scss" scoped>
.project-handle {
width: 100%;
height: calc(100vh - 120px);
background: #ffffff;
box-sizing: border-box;
padding: 10px;
.project-detail {
width: 100%;
height: 49%;
border: 2px solid #ccc;
box-sizing: border-box;
padding: 10px;
padding-top: 20px;
float: left;
margin-bottom: 1%;
position: relative;
.project-detail-tip {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 30px;
line-height: 30px;
color: #ffffff;
background: #4ac38b;
text-align: center;
}
.el-form {
width: 58%;
height: 100%;
float: left;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #ccc;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #fff;
}
}
.container {
width: 40%;
height: 100%;
float: right;
.location {
height: 30px;
line-height: 30px;
}
#map {
width: 100%;
height: calc(100% - 30px);
}
}
}
.project-progress {
width: 20%;
height: 100%;
float: right;
border: 2px solid #ccc;
box-sizing: border-box;
margin-left: 1%;
padding-top: 20px;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #aaa;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #ccc;
}
}
.handle-operation {
padding-top: 30px;
box-sizing: border-box;
width: 100%;
height: 49%;
box-sizing: border-box;
border: 2px solid #ccc;
float: left;
position: relative;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #aaa;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #ccc;
}
.handle-operation-tip {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 30px;
line-height: 30px;
color: #ffffff;
background: #ff7600;
text-align: center;
}
}
}
</style>

260
src/views/modules/heart/volunteerunionact-detail.vue
View File

@ -0,0 +1,260 @@
<template>
<el-dialog :visible.sync="visible" title="详情" :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' ? '160px' : '120px'">
<el-row>
<el-form-item label="活动头图">
<img v-if="dataForm.headPic"
:src="dataForm.headPic"
class="avatar">
</el-form-item>
</el-row>
<el-form-item label="所属联盟">
{{dataForm.unionName}}
</el-form-item>
<el-form-item label="活动名称">
{{dataForm.title}}
</el-form-item>
<el-form-item label="活动开始时间">
{{dataForm.actStartTime}}
</el-form-item>
<el-form-item label="活动结束时间">
{{dataForm.actEndTime}}
</el-form-item>
<el-form-item label="排序">
{{dataForm.sort}}
</el-form-item>
<el-form-item label="简介">
<p v-html="dataForm.content"></p>
</el-form-item>
<el-form-item label="精彩瞬间" v-if="this.dataForm.images[0] !== ''">
<el-image v-for="item in this.dataForm.images"
style="width: 100px; height: 100px; margin-right: 10px"
:key="item.url"
:src="item.url"
:preview-src-list="previewImgList"
@click="clickImg(item.url)">
</el-image>
</el-form-item>
</el-form>
<template slot="footer">
<el-button @click="visible = false">返回</el-button>
</template>
</el-dialog>
</template>
<script>
import 'element-ui/lib/theme-chalk/image.css'
export default {
data () {
return {
visible: false,
dataForm: {
id: '',
unionName: '',
unionId: '',
title: '',
actStartTime: '',
actEndTime: '',
content: '',
sort: '',
images: [],
headPic: ''
},
previewImgList: []
}
},
computed: {
dataRule () {
return {
}
}
},
methods: {
init () {
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.getInfo()
}
})
},
clickImg (url) {
this.previewImgList = []
this.previewImgList.push(url)
},
// 获取信息
getInfo () {
this.$http.get(`/heart/volunteerunionact/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
}).catch(() => {})
}
}
}
</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>
<style lang="scss">
.project-handle {
.el-timeline {
padding-left: 9px;
font-size: 13px;
}
.el-textarea {
width: 600px !important;
}
.el-input {
width: 600px !important;
}
}
.el-form-item__label {
font-weight: bold;
}
</style>
<style lang="scss" scoped>
.project-handle {
width: 100%;
height: calc(100vh - 120px);
background: #ffffff;
box-sizing: border-box;
padding: 10px;
.project-detail {
width: 100%;
height: 49%;
border: 2px solid #ccc;
box-sizing: border-box;
padding: 10px;
padding-top: 20px;
float: left;
margin-bottom: 1%;
position: relative;
.project-detail-tip {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 30px;
line-height: 30px;
color: #ffffff;
background: #4ac38b;
text-align: center;
}
.el-form {
width: 58%;
height: 100%;
float: left;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #ccc;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #fff;
}
}
.container {
width: 40%;
height: 100%;
float: right;
.location {
height: 30px;
line-height: 30px;
}
#map {
width: 100%;
height: calc(100% - 30px);
}
}
}
.project-progress {
width: 20%;
height: 100%;
float: right;
border: 2px solid #ccc;
box-sizing: border-box;
margin-left: 1%;
padding-top: 20px;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #aaa;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #ccc;
}
}
.handle-operation {
padding-top: 30px;
box-sizing: border-box;
width: 100%;
height: 49%;
box-sizing: border-box;
border: 2px solid #ccc;
float: left;
position: relative;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #aaa;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #ccc;
}
.handle-operation-tip {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 30px;
line-height: 30px;
color: #ffffff;
background: #ff7600;
text-align: center;
}
}
}
</style>

104
src/views/modules/heart/volunteerunionact.vue
View File

@ -0,0 +1,104 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-heart__volunteerunionact}">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item label="所属联盟">
<el-select v-model="dataForm.unionId" clearable filterable placeholder="请选择">
<el-option v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="活动名称">
<el-input v-model="dataForm.title"
placeholder="活动名称"
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="unionName" label="所属联盟" header-align="center" align="center"></el-table-column>
<el-table-column prop="title" label="活动名称" header-align="center" align="center"></el-table-column>
<el-table-column prop="actStartTime" label="活动开始时间" header-align="center" align="center"></el-table-column>
<el-table-column prop="actEndTime" label="活动结束时间" 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 :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
<template slot-scope="scope">
<el-button type="text" size="small" @click="detailHandle(scope.row.id)">详情</el-button>
<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>
</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>
<!-- 详情 -->
<volunteerunionact-detail v-if="detailVisible" ref="volunteerunionactDetail" @refreshDataList="getDataList"></volunteerunionact-detail>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './volunteerunionact-add-or-update'
import volunteerunionactDetail from './volunteerunionact-detail'
export default {
mixins: [mixinViewModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/heart/volunteerunionact/page',
getDataListIsPage: true,
deleteURL: '/heart/volunteerunionact',
deleteIsBatch: true
},
dataForm: {
id: ''
},
options: [],
detailVisible: false
}
},
created () {
this.getOptionVolunteerUnion()
},
methods: {
// 获取联盟下拉列表
getOptionVolunteerUnion () {
this.$http.get(`/heart/volunteerunion/optionVolunteerUnion`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.options = res.data
}).catch(() => {})
},
detailHandle (id) {
this.detailVisible = true
this.$nextTick(() => {
this.$refs.volunteerunionactDetail.dataForm.id = id
this.$refs.volunteerunionactDetail.init()
})
}
},
components: {
AddOrUpdate,
volunteerunionactDetail
}
}
</script>
Write Preview
Loading…
Cancel
Save