Browse Source

活动管理功能增加

master
李鹏飞 6 years ago
parent
commit
a0faae4d23
  1. 319
      src/views/modules/case/item-detail.vue
  2. 10
      src/views/modules/case/typicalcase-add-or-update.vue
  3. 107
      src/views/modules/case/typicalcase-list.vue

319
src/views/modules/case/item-detail.vue

@ -6,10 +6,9 @@
width="80%"> width="80%">
<el-form :model="dataForm" ref="dataForm" style="width: 100%; height: 100%;"> <el-form :model="dataForm" ref="dataForm" style="width: 100%; height: 100%;">
<div class="project-handle"> <div class="project-handle">
<div style="width: 100%; height: 100%;"> <div class="project-detail">
<div class="project-detail"> <div class="project-detail-tip">议题详情</div>
<div class="project-detail-tip">议题详情</div> <el-form label-position="right" label-width="120px">
<el-form-item label="议题内容:" <el-form-item label="议题内容:"
prop="eventContent"> prop="eventContent">
<div>{{dataForm.itemContent}}</div> <div>{{dataForm.itemContent}}</div>
@ -48,62 +47,60 @@
<span>支持 {{dataForm.approveNum}}</span>&nbsp;&nbsp; <span>支持 {{dataForm.approveNum}}</span>&nbsp;&nbsp;
<span>不支持 {{dataForm.opposeNum}}</span> <span>不支持 {{dataForm.opposeNum}}</span>
</el-form-item> </el-form-item>
<div class="container"> </el-form>
<div class="location"><span style="font-weight: bold;color: #606266">上报位置:</span> {{dataForm.issueAddress}}</div> <div class="container">
<div id="map"></div> <div class="location"><span style="font-weight: bold;color: #606266">上报位置:</span> {{dataForm.issueAddress}}</div>
</div> <div id="map"></div>
</div> </div>
<div class="project-progress"> </div>
<div class="project-progress-tip">处理进展</div> <div class="project-progress">
<el-timeline> <div class="project-progress-tip">处理进展</div>
<el-timeline-item v-for="(item, index) in timeLineList" <el-timeline>
:key="item.id" <el-timeline-item v-for="(item, index) in timeLineList"
:color="item.type === 'init' ? 'red' : item.type === 'project' ? '#009688' : '#ffa546'"> :key="item.id"
<div :id="`content${index}`" :color="item.type === 'init' ? 'red' : item.type === 'project' ? '#009688' : '#ffa546'">
style="line-height:25px; "> <div :id="`content${index}`"
<div :style="{ marginBottom: '10px', width: '35px', height: '20px', fontSize: '12px', borderRadius: '4px', background: item.type === 'project' ? '#009688': item.type === 'issue' || item.type === 'issue-project' ? '#ffa546' : '', color: '#fff', textAlign: 'center', lineHeight: '20px'}" style="line-height:25px; ">
v-if="item.type !== 'init'"> <div :style="{ marginBottom: '10px', width: '35px', height: '20px', fontSize: '12px', borderRadius: '4px', background: item.type === 'project' ? '#009688': item.type === 'issue' || item.type === 'issue-project' ? '#ffa546' : '', color: '#fff', textAlign: 'center', lineHeight: '20px'}"
{{item.type === 'project' ? '项目': item.type === 'issue' || item.type === 'issue-project' ? '议题' : ''}} v-if="item.type !== 'init'">
</div> {{item.type === 'project' ? '项目': item.type === 'issue' || item.type === 'issue-project' ? '议题' : ''}}
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">[{{item | formatState}}]</span> {{item.createdTime}}</div> </div>
<div v-if="item.state === 3"> <div><span style="font-weight: bold; color: rgb(96, 98, 102);">[{{item | formatState}}]</span> {{item.createdTime}}</div>
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">来源社群</span>{{item.groupName}}</div> <div v-if="item.state === 3">
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理人</span>{{item.handlerDept}}</div> <div><span style="font-weight: bold; color: rgb(96, 98, 102);">来源社群</span>{{item.groupName}}</div>
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理人电话</span>{{item.mobile}}</div> <div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理人</span>{{item.handlerDept}}</div>
</div> <div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理人电话</span>{{item.mobile}}</div>
<div v-if="item.state !== 3"> </div>
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理部门</span>{{item.handlerDept}}</div> <div v-if="item.state !== 3">
</div> <div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理部门</span>{{item.handlerDept}}</div>
<div v-if="item.itemDeptDTOS && item.itemDeptDTOS.length > 0" </div>
style="width: 100%; display: flex;"> <div v-if="item.itemDeptDTOS && item.itemDeptDTOS.length > 0"
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">被吹哨部门</span> </div> style="width: 100%; display: flex;">
<div> <div><span style="font-weight: bold; color: rgb(96, 98, 102);">被吹哨部门</span> </div>
<div>
<span v-for="(csDept, index1) in item.itemDeptDTOS" <span v-for="(csDept, index1) in item.itemDeptDTOS"
:key="index1"> :key="index1">
{{ csDept.deptName }}<br /> {{ csDept.deptName }}<br />
</span> </span>
</div>
</div>
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理意见</span> {{item.advice}}</div>
<div style="display: flex;">
<el-image v-for="url in item.images"
style="width: 60px; height: 60px; object-fit: cover; margin-right: 8px; border-radius: 2px;"
:key="url"
:src="url"
:preview-src-list="previewImgList"
alt="处理图片"
@click="clickImg(url)">
</el-image>
</div> </div>
</div> </div>
</el-timeline-item> <div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理意见</span> {{item.advice}}</div>
</el-timeline> <div style="display: flex;">
</div> <el-image v-for="url in item.images"
<el-form-item style="float: right;"> style="width: 60px; height: 60px; object-fit: cover; margin-right: 8px; border-radius: 2px;"
<el-button size="small" :key="url"
style="width: 95px" :src="url"
@click="back">返回</el-button> :preview-src-list="previewImgList"
</el-form-item> alt="处理图片"
@click="clickImg(url)">
</el-image>
</div>
</div>
</el-timeline-item>
</el-timeline>
</div>
<div style="width: 100%; text-align:center; float:left;">
<el-button size="medium" style="width: 95px" type="primary" @click="back">返回</el-button>
</div> </div>
</div> </div>
</el-form> </el-form>
@ -322,56 +319,99 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.project-handle { .project-handle {
.el-timeline { .el-timeline {
padding-left: 9px; padding-left: 9px;
font-size: 13px; font-size: 13px;
} }
.el-textarea {
width: 600px !important;
} }
.el-input { .el-form-item__label {
width: 600px !important; font-weight: bold;
} }
}
.el-form-item__label {
font-weight: bold;
}
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.project-handle { .project-handle {
width: 100%; width: 100%;
height: calc(100vh - 120px); height: calc(100vh - 120px);
background: #ffffff; background: #ffffff;
box-sizing: border-box;
padding: 10px;
.project-detail {
width: 79%;
height: 49%;
border: 2px solid #ccc;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 10px;
padding-top: 20px; .project-detail {
float: left; width: 79%;
margin-bottom: 1%; height: 80%;
position: relative; border: 2px solid #ccc;
.project-detail-tip { box-sizing: border-box;
position: absolute; padding: 10px;
top: 0; padding-top: 20px;
left: 0; float:left;
width: 80px; margin-bottom: 1%;
height: 30px; position:relative;
line-height: 30px; .project-detail-tip {
color: #ffffff; position: absolute;
background: #4ac38b; top: 0;
text-align: center; 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: #fff;
}
&::-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);
}
}
} }
.el-form { .project-progress {
width: 58%; width: 20%;
height: 100%; height: 80%;
float: left; float: right;
overflow-y: auto; border: 2px solid #ccc;
box-sizing: border-box;
margin-left: 1%;
padding-top: 20px;
overflow-y:auto;
position: relative;
padding-top: 40px;
.project-progress-tip {
position: absolute;
top: 0;
left:0;
width: 80px;
height: 30px;
line-height: 30px;
color: #ffffff;
background: #0098ff;
text-align:center;
}
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 5px; width: 5px;
height: 1px; height: 1px;
@ -382,90 +422,15 @@ export default {
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
border-radius: 10px; border-radius: 10px;
background: #fff; background: #ccc;
}
}
.container {
width: 40%;
height: 100%;
float: right;
.location {
height: 30px;
line-height: 30px;
}
#map {
width: 100%;
height: calc(100% - 30px);
} }
} }
} .handle-operation {
.project-progress { width: 79%;
width: 20%; height: 49%;
height: 100%; box-sizing: border-box;
float: right; border: 2px solid #ccc;
border: 2px solid #ccc; float:left;
box-sizing: border-box;
margin-left: 1%;
padding-top: 40px;
overflow-y: auto;
position: relative;
.project-progress-tip {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 30px;
line-height: 30px;
color: #ffffff;
background: #0098ff;
text-align: center;
}
&::-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: 20px;
box-sizing: border-box;
width: 79%;
height: 49%;
box-sizing: border-box;
border: 2px solid #ccc;
float: left;
overflow-y: auto;
position: relative;
&::-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> </style>

10
src/views/modules/case/typicalcase-add-or-update.vue

@ -233,7 +233,6 @@ export default {
this.dataForm.dynamicItem[connectResponse.caseIndex].expressingAttitude = connectResponse.participantsNum this.dataForm.dynamicItem[connectResponse.caseIndex].expressingAttitude = connectResponse.participantsNum
this.requiredFlag = true this.requiredFlag = true
this.dataForm.caseNumber = this.dataForm.caseNumber + 1
}, },
addConnect(index){ addConnect(index){
this.connectListVisible = true this.connectListVisible = true
@ -315,7 +314,11 @@ export default {
alert("请关联案例!") alert("请关联案例!")
return false return false
} }
for(let item of this.dataForm.dynamicItem) {
if(item.associatedId != '') {
this.dataForm.caseNumber = this.dataForm.caseNumber + 1
}
}
this.$http[!this.dataForm.id ? 'post' : 'put']('/cloudAnalysis/typicalcase', this.dataForm).then(({ data: res }) => { this.$http[!this.dataForm.id ? 'post' : 'put']('/cloudAnalysis/typicalcase', this.dataForm).then(({ data: res }) => {
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg) return this.$message.error(res.msg)
@ -325,8 +328,7 @@ export default {
type: 'success', type: 'success',
duration: 500, duration: 500,
onClose: () => { onClose: () => {
this.visible = false this.back()
this.$emit('refreshDataList')
} }
}) })
}).catch(() => {}) }).catch(() => {})

107
src/views/modules/case/typicalcase-list.vue

@ -5,12 +5,27 @@
<el-form-item label="案例标题"> <el-form-item label="案例标题">
<el-input v-model="dataForm.caseTitle" placeholder="请输入" clearable></el-input> <el-input v-model="dataForm.caseTitle" placeholder="请输入" clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item label="创建时间"> <el-form-item label="时间"
<el-date-picker v-model="dataForm.startTime" placeholder="" value-format="yyyy-MM-dd 00:00:00" clearable></el-date-picker> prop="startTime">
</el-form-item> <el-date-picker v-model="dataForm.startTime"
<el-form-item label="至"> type="date"
<el-date-picker v-model="dataForm.endTime" placeholder="" value-format="yyyy-MM-dd 23:59:59" clearable></el-date-picker> :picker-options="pickerBeginDateBefore"
</el-form-item> 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-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button> <el-button @click="getDataList()">{{ $t('query') }}</el-button>
@ -27,12 +42,14 @@
<el-table-column label="全选" type="selection" header-align="center" align="center" width="50"></el-table-column> <el-table-column label="全选" type="selection" header-align="center" align="center" width="50"></el-table-column>
<el-table-column label="序号" type="index" header-align="center" align="center" width="150"></el-table-column> <el-table-column label="序号" type="index" header-align="center" align="center" width="150"></el-table-column>
<el-table-column prop="caseTitle" label="优秀案例标题" header-align="center" align="center"></el-table-column> <el-table-column prop="caseTitle" label="优秀案例标题" header-align="center" align="center"></el-table-column>
<el-table-column prop="state" label="状态" :formatter="formatState" header-align="center" align="center"></el-table-column>
<el-table-column prop="caseNumber" label="优秀案例数" header-align="center" align="center"></el-table-column> <el-table-column prop="caseNumber" 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="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"> <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" size="small" @click="UpdateStateOff(scope.row.id)">{{"下架"}}</el-button> <!-- <el-button type="text" size="small" @click="UpdateStateOff(scope.row.id)">{{"下架"}}</el-button>-->
<el-button type="text" size="small" @click="UpdateStateOn(scope.row.id)">{{"上架"}}</el-button> <!-- <el-button type="text" size="small" @click="UpdateStateOn(scope.row.id)">{{"上架"}}</el-button>-->
<el-button v-if="$hasPermission('heart:actbanner:grounding')" type="text" size="small" @click="changeGroundingHandle(scope.row)">{{ changeGroundingText(scope.row.state) }}</el-button>
<el-button type="text" size="small" @click="detailHandle(scope.row.id)">{{"查看详细"}}</el-button> <el-button type="text" size="small" @click="detailHandle(scope.row.id)">{{"查看详细"}}</el-button>
</template> </template>
</el-table-column> </el-table-column>
@ -59,6 +76,7 @@
import mixinViewModule from '@/mixins/view-module' import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './typicalcase-add-or-update' import AddOrUpdate from './typicalcase-add-or-update'
import CaseInfoDetailView from './typicalcase-detail' import CaseInfoDetailView from './typicalcase-detail'
import {debounce} from 'lodash'
export default { export default {
mixins: [mixinViewModule], mixins: [mixinViewModule],
name: 'CaseInfoList', name: 'CaseInfoList',
@ -72,7 +90,23 @@ export default {
caseTitle: '', caseTitle: '',
startTime: '', startTime: '',
endTime: '' endTime: ''
} },
pickerBeginDateBefore: {
disabledDate: (time) => {
let beginDateVal = this.dataForm.startTime
if (beginDateVal) {
return time.getTime() > new Date(beginDateVal).getTime()
}
}
},
pickerBeginDateAfter: {
disabledDate: (time) => {
let EndDateVal = this.dataForm.endTime
if (EndDateVal) {
return time.getTime() < new Date(EndDateVal).getTime()
}
}
}
} }
}, },
components: { components: {
@ -83,22 +117,59 @@ export default {
this.getDataList() this.getDataList()
}, },
methods: { methods: {
UpdateStateOn (id) { // UpdateStateOn (id) {
this.mixinViewModuleOptions.getDataListURL = '/cloudAnalysis/typicalcase/on' + '/' + id // this.mixinViewModuleOptions.getDataListURL = '/cloudAnalysis/typicalcase/on' + '/' + id
this.getDataList() // this.getDataList()
}, // },
UpdateStateOff (id) { // UpdateStateOff (id) {
this.mixinViewModuleOptions.getDataListURL = '/cloudAnalysis/typicalcase/off' + '/' + id // this.mixinViewModuleOptions.getDataListURL = '/cloudAnalysis/typicalcase/off' + '/' + id
this.getDataList() // this.getDataList()
}, // },
detailHandle (id) { detailHandle (id) {
this.$parent.selectComponent = 'CaseInfoDetailView' this.$parent.selectComponent = 'CaseInfoDetailView'
this.$router.push({ path: '/case-typicalcase', query: { id: id } }) this.$router.push({ path: '/case-typicalcase', query: { id: id } })
}, },
formatState: function (row, column) {
let state = row.state
if (state == 1) {
return '上架'
} else if (state == 0) {
return '下架'
}
},
changeGroundingText(state){
let status = state
if (status == 1) {
return '下架'
} else if (status == 0) {
return '上架'
}
},
addHandle () { addHandle () {
this.$parent.selectComponent = 'CaseInfoAdd' this.$parent.selectComponent = 'CaseInfoAdd'
this.$router.push({ path: '/case-typicalcase' }) this.$router.push({ path: '/case-typicalcase' })
} },
changeGroundingHandle: debounce(function (row) {
this.$confirm(this.$t('prompt.info', { 'handle': this.changeGroundingText(row.state) }), this.$t('prompt.title'), {
confirmButtonText: this.$t('confirm'),
cancelButtonText: this.$t('cancel'),
type: 'warning'
}).then(() => {
this.$http.get(`/cloudAnalysis/typicalcase/updateState/${row.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(() => {})
}).catch(() => {})
}, 1000, { 'leading': true, 'trailing': false })
} }
} }
</script> </script>

Loading…
Cancel
Save