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

经典案例功能增加

master
李鹏飞 6 years ago
parent
dd2c26283f
commit
c9117f0216
8 changed files with 2142 additions and 0 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. 368
      src/views/modules/case/issue-detail.vue
  2. 436
      src/views/modules/case/item-detail.vue
  3. 211
      src/views/modules/case/topic-detail.vue
  4. 551
      src/views/modules/case/typicalcase-add-or-update.vue
  5. 263
      src/views/modules/case/typicalcase-connect-list.vue
  6. 120
      src/views/modules/case/typicalcase-detail.vue
  7. 162
      src/views/modules/case/typicalcase-list.vue
  8. 31
      src/views/modules/case/typicalcase.vue

368
src/views/modules/case/issue-detail.vue
View File

@ -0,0 +1,368 @@
<template>
<el-dialog :visible.sync="visible" :title="$t('verifyLabel')" :append-to-body="true"
:modal-append-to-body="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="80%">
<el-form :model="dataForm" ref="dataForm" style="width: 100%; height: 100%;">
<div class="project-handle">
<div class="project-detail">
<div class="project-detail-tip">议题详情</div>
<el-form label-position="right" label-width="120px">
<el-form-item label="议题内容:">
<div>{{dataForm.issueContent}}</div>
<el-image v-for="url in dataForm.images"
style="width: 100px; height: 100px; margin-right: 10px"
:key="url"
:src="url"
:preview-src-list="previewImgList"
@click="clickImg(url)">
</el-image>
</el-form-item>
<el-form-item label="所属网格:" prop="ownGrid">
<div>{{dataForm.allDeptNames}}</div>
</el-form-item>
<el-form-item v-if="dataForm.groupName && dataForm.groupName.length > 0" label="议题来源:" prop="ownGrid">
<div>{{dataForm.groupName}}</div>
</el-form-item>
<el-form-item v-if="!dataForm.groupName || dataForm.groupName.length == 0" label="议题来源:" prop="ownGrid">
<div>党群议事</div>
</el-form-item>
<el-form-item label="上报时间:">
<div>{{dataForm.distributeTime}}</div>
</el-form-item>
<el-form-item label="上报人:">
<div>{{dataForm.nickName}}</div>
</el-form-item>
<el-form-item label="电话:" prop="mobile">
<div>{{dataForm.mobile}}</div>
</el-form-item>
<el-form-item label="所属类别:" prop="categoryName">
<div>{{dataForm.categoryName}}</div>
</el-form-item>
<el-form-item label="议题态度:">
<span>表达态度 {{dataForm.approveNum + dataForm.opposeNum + dataForm.commentNum}}</span>&nbsp;&nbsp;
<span>评论 {{dataForm.commentNum}}</span>&nbsp;&nbsp;
<span>支持 {{dataForm.approveNum}}</span>&nbsp;&nbsp;
<span>不支持 {{dataForm.opposeNum}}</span>
</el-form-item>
</el-form>
<div class="container">
<div class="location"><span style="font-weight: bold;color: #606266">上报位置:</span> {{dataForm.address}}</div>
<div id="map"></div>
</div>
</div>
<div class="project-progress">
<div class="project-progress-tip">处理进展</div>
<el-timeline>
<el-timeline-item
v-for="(item, index) in timeLineList"
:key="item.id"
:color="item.type === 'init' ? 'red' : item.type === 'project' ? '#009688' : '#ffa546'">
<div :id="`content${index}`" style="line-height:25px; ">
<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'}"
v-if="item.type !== 'init'">
{{item.type === 'project' ? '项目': item.type === 'issue' || item.type === 'issue-project' ? '议题' : ''}}
</div>
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">[{{item | formatState}}]</span> {{item.createdTime}}</div>
<div v-if="item.state === 3">
<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.handlerDept}}</div>
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理人电话：</span>{{item.mobile}}</div>
</div>
<div v-if="item.state !== 3">
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理部门：</span>{{item.handlerDept}}</div>
</div>
<div v-if="item.itemDeptDTOS && item.itemDeptDTOS.length > 0" style="width: 100%; display: flex;">
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">吹哨部门：</span> </div>
<div>
<span v-for="(csDept, index1) in item.itemDeptDTOS" :key="index1">
{{ csDept.deptName }}<br/>
</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>
</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>
</el-form>
</el-dialog>
</template>
<script>
import BMap from 'BMap'
import 'element-ui/lib/theme-chalk/timeline.css'
import 'element-ui/lib/theme-chalk/timeline-item.css'
import 'element-ui/lib/theme-chalk/image.css'
export default {
data () {
return {
map: '',
visible: false,
dataForm: {
id: '',
nickName: '',
distributeTime: '',
issueContent: '',
handleProgressResultDTOS: [],
issueProgressResultDTOS: [],
images: []
},
previewImgList: [],
order: '',
orderField: '',
pageIndex: 1,
limitVal: 10,
total: 0,
commentsDTOs: [],
timeLineList: []
}
},
filters: {
formatState (item) {
if (item.type === 'project') {
if (item.state === 0 && item.itemDeptDTOS && item.itemDeptDTOS.length > 0) {
return '吹哨'
} else if (item.state === 0 && item.itemDeptDTOS && item.itemDeptDTOS.length === 0) {
return '回应'
} else if (item.state === 5) {
return '关闭'
} else if (item.state === 10) {
return '结案'
} else if (item.state === 15) {
return '上报网格化平台'
} else if (item.state === 20) {
return '网格化平台-受理'
} else if (item.state === 25) {
return '网格化平台-立案'
} else if (item.state === 30) {
return '网格化平台-派遣'
} else if (item.state === 35) {
return '网格化平台-中间再派'
} else if (item.state === 40) {
return '网格化平台-接单'
} else if (item.state === 45) {
return '网格化平台-处理'
} else if (item.state === 50) {
return '网格化平台-中间督办'
} else if (item.state === 55) {
return '网格化平台-催办'
} else if (item.state === 60) {
return '网格化平台-结案'
}
} else if (item.type === 'issue' || item.type === 'init') {
if (item.state === 0) {
return '审核通过'
} else if (item.state === 1) {
return '回应'
} else if (item.state === 2) {
return '关闭'
} else if (item.state === 3) {
return '转议题'
}
} else if (item.type === 'issue-project') {
return '转项目'
}
}
},
methods: {
back () {
this.visible = false
},
initBmap (latitude, longitude) {
this.map = new BMap.Map('map')
const point = new BMap.Point(longitude, latitude)
var marker = new BMap.Marker(point)
this.map.addOverlay(marker)
this.map.centerAndZoom(point, 13)
this.map.enableScrollWheelZoom(true)
},
init (id) {
this.visible = true
this.dataForm.id = id
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.getInfo()
}
})
},
clickImg (url) {
this.previewImgList = []
this.previewImgList.push(url)
},
getInfo () {
this.$http.get(`/events/issue/issueContentDetail/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
this.dataForm.handleProgressResultDTOS.forEach((item, index, arr) => {
if (index === arr.length - 1) {
item.type = 'issue-project'
} else {
item.type = 'project'
}
})
this.dataForm.issueProgressResultDTOS.forEach((item, index, arr) => {
if (index === arr.length - 1) {
item.type = 'init'
} else {
item.type = 'issue'
}
})
this.timeLineList = [...this.dataForm.handleProgressResultDTOS, ...this.dataForm.issueProgressResultDTOS]
this.$nextTick(() => {
this.timeLineList.forEach((item, index) => {
const oDiv = document.getElementById(`content${index}`)
const oBorder = oDiv.parentNode.parentNode.parentNode.firstChild
if (item.type === 'issue' || item.type === 'issue-project') {
oBorder.style.borderLeft = '1px solid #ffa546'
} else if (item.type === 'project') {
oBorder.style.borderLeft = '1px solid #009688'
}
})
})
this.initBmap(this.dataForm.issueLatitude, this.dataForm.issueLongitude)
}).catch(() => {})
}
}
}
</script>
<style lang="scss">
.project-handle {
.el-timeline {
padding-left: 9px;
font-size: 13px;
}
}
.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: 79%;
height: 80%;
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: #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);
}
}
}
.project-progress {
width: 20%;
height: 80%;
float: right;
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 {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #aaa;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #ccc;
}
}
.handle-operation {
width: 79%;
height: 49%;
box-sizing: border-box;
border: 2px solid #ccc;
float:left;
}
}
</style>

436
src/views/modules/case/item-detail.vue
View File

@ -0,0 +1,436 @@
<template>
<el-dialog :visible.sync="visible" :title="$t('verifyLabel')" :append-to-body="true"
:modal-append-to-body="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="80%">
<el-form :model="dataForm" ref="dataForm" style="width: 100%; height: 100%;">
<div class="project-handle">
<div class="project-detail">
<div class="project-detail-tip">议题详情</div>
<el-form label-position="right" label-width="120px">
<el-form-item label="议题内容:"
prop="eventContent">
<div>{{dataForm.itemContent}}</div>
<el-image v-for="url in dataForm.images"
style="width: 100px; height: 100px; margin-right: 10px"
:key="url"
:src="url"
:preview-src-list="previewImgList"
@click="clickImg(url)">
</el-image>
</el-form-item>
<el-form-item v-if="dataForm.groupName && dataForm.groupName.length > 0"
label="项目来源:"
prop="ownGrid">
<div>{{dataForm.groupName}}</div>
</el-form-item>
<el-form-item label="上报时间:"
prop="distributeTime">
<div>{{dataForm.distributeTime}}</div>
</el-form-item>
<el-form-item label="上报人:"
prop="nickName">
<div>{{dataForm.nickName}}</div>
</el-form-item>
<el-form-item label="电话:"
prop="mobile">
<div>{{dataForm.mobile}}</div>
</el-form-item>
<el-form-item label="所属类别:"
prop="categoryName">
<div>{{dataForm.categoryName}}</div>
</el-form-item>
<el-form-item label="项目态度:">
<span>表达态度 {{dataForm.approveNum + dataForm.opposeNum + dataForm.commentNum}}</span>&nbsp;&nbsp;
<span>评论 {{dataForm.commentNum}}</span>&nbsp;&nbsp;
<span>支持 {{dataForm.approveNum}}</span>&nbsp;&nbsp;
<span>不支持 {{dataForm.opposeNum}}</span>
</el-form-item>
</el-form>
<div class="container">
<div class="location"><span style="font-weight: bold;color: #606266">上报位置:</span> {{dataForm.issueAddress}}</div>
<div id="map"></div>
</div>
</div>
<div class="project-progress">
<div class="project-progress-tip">处理进展</div>
<el-timeline>
<el-timeline-item v-for="(item, index) in timeLineList"
:key="item.id"
:color="item.type === 'init' ? 'red' : item.type === 'project' ? '#009688' : '#ffa546'">
<div :id="`content${index}`"
style="line-height:25px; ">
<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'}"
v-if="item.type !== 'init'">
{{item.type === 'project' ? '项目': item.type === 'issue' || item.type === 'issue-project' ? '议题' : ''}}
</div>
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">[{{item | formatState}}]</span> {{item.createdTime}}</div>
<div v-if="item.state === 3">
<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.handlerDept}}</div>
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理人电话：</span>{{item.mobile}}</div>
</div>
<div v-if="item.state !== 3">
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理部门：</span>{{item.handlerDept}}</div>
</div>
<div v-if="item.itemDeptDTOS && item.itemDeptDTOS.length > 0"
style="width: 100%; display: flex;">
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">被吹哨部门：</span> </div>
<div>
<span v-for="(csDept, index1) in item.itemDeptDTOS"
:key="index1">
{{ csDept.deptName }}<br />
</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>
</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>
</el-form>
</el-dialog>
</template>
<script>
import BMap from 'BMap'
import 'element-ui/lib/theme-chalk/timeline.css'
import 'element-ui/lib/theme-chalk/timeline-item.css'
import 'element-ui/lib/theme-chalk/image.css'
import debounce from 'lodash/debounce'
export default {
data () {
return {
map: '',
visible: false,
dataForm: {
id: '',
nickName: '',
distributeTime: '',
itemContent: '',
images: [],
issueAddress: '',
handleProgressResultDTOS: [],
issueProgressResultDTOS: [],
handleResultDTOS: [],
deptResultDTOS: [],
evaluateDeptDTOS: [],
handleAdvice: '',
outHandleAdvice: '',
handleCategory: '',
issueLatitude: '',
issueLongitude: ''
},
isAble: false,
previewImgList: [],
deptResult: [],
commentsDTOs: [],
pageIndex: 0,
limitVal: 10,
total: null,
postDataForm: {
id: '',
handleAdvice: '',
outHandleAdvice: '',
handleCategory: '',
deptResultDTOS: [],
evaluateDeptDTOS: []
},
deptResultDTOSVisible: false,
evaluateDeptDTOSVisible: false,
timeLineList: []
}
},
filters: {
formatState (item) {
if (item.type === 'project') {
if (item.state === 0 && item.itemDeptDTOS && item.itemDeptDTOS.length > 0) {
return '吹哨'
} else if (item.state === 0 && item.itemDeptDTOS && item.itemDeptDTOS.length === 0) {
return '回应'
} else if (item.state === 5) {
return '关闭'
} else if (item.state === 10) {
return '结案'
} else if (item.state === 15) {
return '上报网格化平台'
} else if (item.state === 20) {
return '网格化平台-受理'
} else if (item.state === 25) {
return '网格化平台-立案'
} else if (item.state === 30) {
return '网格化平台-派遣'
} else if (item.state === 35) {
return '网格化平台-中间再派'
} else if (item.state === 40) {
return '网格化平台-接单'
} else if (item.state === 45) {
return '网格化平台-处理'
} else if (item.state === 50) {
return '网格化平台-中间督办'
} else if (item.state === 55) {
return '网格化平台-催办'
} else if (item.state === 60) {
return '网格化平台-结案'
}
} else if (item.type === 'issue' || item.type === 'init') {
if (item.state === 0) {
return '审核通过'
} else if (item.state === 1) {
return '回应'
} else if (item.state === 2) {
return '关闭'
} else if (item.state === 3) {
return '转议题'
}
} else if (item.type === 'issue-project') {
return '转项目'
}
}
},
computed: {
dataRule () {
return {
}
}
},
watch: {
'postDataForm.handleAdvice': function (val) {
this.dataForm.handleAdvice = val
},
'postDataForm.outHandleAdvice': function (val) {
this.dataForm.outHandleAdvice = val
},
'postDataForm.handleCategory': function (val) {
if (val === 1) {
this.deptResultDTOSVisible = true
this.evaluateDeptDTOSVisible = false
for (let index = 0; index < this.dataForm.deptResultDTOS.length; index++) {
const deptResultDTO = this.dataForm.deptResultDTOS[index]
if (deptResultDTO.selected === true) {
// this.postDataForm.deptResultDTOS.push(deptResultDTO)
}
}
} else if (val === 10) {
if (this.dataForm.evaluateDeptDTOS.length === 0) {
return
}
this.evaluateDeptDTOSVisible = true
this.deptResultDTOSVisible = false
} else {
this.evaluateDeptDTOSVisible = false
this.deptResultDTOSVisible = false
}
}
},
methods: {
back () {
this.visible = false
},
initBmap (latitude, longitude) {
this.map = new BMap.Map('map')
const point = new BMap.Point(longitude, latitude)
var marker = new BMap.Marker(point)
this.map.addOverlay(marker)
this.map.centerAndZoom(point, 13)
this.map.enableScrollWheelZoom(true)
},
init (id) {
this.visible = true
this.dataForm.id = id
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.postDataForm.handleAdvice = ''
this.postDataForm.outHandleAdvice = ''
this.postDataForm.handleCategory = ''
this.postDataForm.deptResultDTOS = []
this.postDataForm.evaluateDeptDTOS = []
this.getInfo()
}
})
},
clickImg (url) {
this.previewImgList = []
this.previewImgList.push(url)
},
// 获取信息
getInfo () {
this.$http.get(`/events/item/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
this.dataForm.handleProgressResultDTOS.forEach((item, index, arr) => {
if (index === arr.length - 1) {
item.type = 'issue-project'
} else {
item.type = 'project'
}
})
this.dataForm.issueProgressResultDTOS.forEach((item, index, arr) => {
if (index === arr.length - 1) {
item.type = 'init'
} else {
item.type = 'issue'
}
})
this.timeLineList = [...this.dataForm.handleProgressResultDTOS, ...this.dataForm.issueProgressResultDTOS]
this.$nextTick(() => {
this.timeLineList.forEach((item, index) => {
const oDiv = document.getElementById(`content${index}`)
const oBorder = oDiv.parentNode.parentNode.parentNode.firstChild
if (item.type === 'issue' || item.type === 'issue-project') {
oBorder.style.borderLeft = '1px solid #ffa546'
} else if (item.type === 'project') {
oBorder.style.borderLeft = '1px solid #009688'
}
})
})
this.initBmap(this.dataForm.issueLatitude, this.dataForm.issueLongitude)
for (let index = 0; index < res.data.handleResultDTOS.length; index++) {
const handleResultDTO = res.data.handleResultDTOS[index]
if (handleResultDTO.select === true) {
this.dataForm.handleCategory = handleResultDTO.processResult
}
}
}).catch(() => { })
}
}
}
</script>
<style lang="scss">
.project-handle {
.el-timeline {
padding-left: 9px;
font-size: 13px;
}
}
.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: 79%;
height: 80%;
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: #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);
}
}
}
.project-progress {
width: 20%;
height: 80%;
float: right;
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 {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #aaa;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #ccc;
}
}
.handle-operation {
width: 79%;
height: 49%;
box-sizing: border-box;
border: 2px solid #ccc;
float:left;
}
}
</style>

211
src/views/modules/case/topic-detail.vue
View File

@ -0,0 +1,211 @@
<template>
<el-dialog :visible.sync="visible" :title="$t('verifyLabel')" :append-to-body="true"
:modal-append-to-body="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="80%">
<div class="project-handle">
<div class="project-detail">
<div class="project-detail-tip">话题详情</div>
<el-form :model="dataForm" ref="dataForm" style="width: 50%; height: 100%;">
<el-form-item label="话题内容:" prop="eventContent">
<div>{{dataForm.topicContent}}</div>
<el-image v-for="url in dataForm.images"
style="width: 100px; height: 100px; margin-right: 10px"
:key="url"
:src="url"
:preview-src-list="previewImgList"
@click="clickImg(url)">
</el-image>
</el-form-item>
<el-form-item label="所属网格:" prop="allDeptNames">
<div>{{dataForm.allDeptNames}}</div>
</el-form-item>
<el-form-item label="话题来源:" prop="groupName">
<div>{{dataForm.groupName}}</div>
</el-form-item>
<el-form-item label="发言人:" prop="nickName">
<div>{{dataForm.nickname}}</div>
</el-form-item>
</el-form>
<div class="container">
<div class="location"><span style="font-weight: bold;color: #606266">上报位置:</span> {{dataForm.topicAddress}}</div>
<div id="map"></div>
</div>
</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>
</el-dialog>
</template>
<script>
import BMap from 'BMap'
import 'element-ui/lib/theme-chalk/timeline.css'
import 'element-ui/lib/theme-chalk/timeline-item.css'
import 'element-ui/lib/theme-chalk/image.css'
export default {
data () {
return {
visible: false,
innerVisible: false,
dataForm: {
id: ''
},
previewImgList: [],
order: '',
orderField: '',
pageIndex: 1,
limitVal: 10,
total: 0,
commentsDTOs: []
}
},
methods: {
back () {
this.visible = false
},
initBmap (latitude, longitude) {
this.map = new BMap.Map('map')
const point = new BMap.Point(longitude, latitude)
var marker = new BMap.Marker(point)
this.map.addOverlay(marker)
this.map.centerAndZoom(point, 13)
this.map.enableScrollWheelZoom(true)
},
clickImg (url) {
this.previewImgList = []
this.previewImgList.push(url)
},
init (id) {
this.visible = true
this.dataForm.id = id
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.getInfo()
}
})
},
// 获取信息
getInfo () {
this.$http.get(`/group/topic/detail/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
this.initBmap(this.dataForm.topicLatitude, this.dataForm.topicLongitude)
}).catch(() => {})
}
}
}
</script>
<style lang="scss">
.project-handle {
.el-timeline {
padding-left: 9px;
font-size: 13px;
}
}
.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: 80%;
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: #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);
}
}
}
.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 {
width: 79%;
height: 49%;
box-sizing: border-box;
border: 2px solid #ccc;
float:left;
}
}
</style>

551
src/views/modules/case/typicalcase-add-or-update.vue
View File

@ -0,0 +1,551 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-news__typicalcase}">
<el-form :inline="true"
:model="dataForm"
:rules="dataRule"
ref="dataForm"
:label-width="$i18n.locale === 'en-US' ? '120px' : '120px'">
<el-row>
<el-form-item label="banner：" v-loading="loading" prop="mainPicture">
<el-upload class="avatar-uploader"
:action="uploadUrl"
:show-file-list="false"
:on-success="handleAvatarActSuccess"
:on-error="handelError"
:before-upload="beforeAvatarUpload">
<img v-if="dataForm.mainPicture"
:src="dataForm.mainPicture"
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-row>
<el-form-item label="案例标题：" prop="caseTitle">
<el-input v-model="dataForm.caseTitle" type="text"
maxlength="40"
show-word-limit
placeholder="请输入标题，40字以内"
clearable
style="width:500px"></el-input>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="摘要：" prop="typicalAbstract">
<el-input v-model="dataForm.typicalAbstract" placeholder="文本输入框，限制200字内" type="textarea"
style="width:500px"
maxlength="200"
clearable></el-input>
</el-form-item>
</el-row>
<el-row>
<div v-for="(item, index) in dataForm.dynamicItem" :key="index">
<div style="text-align: left">{{"案例"+(index+1)}}</div>
<el-row>
<el-form-item label="案例来源："
prop="caseSource">
<el-input v-model="item.caseSource"
:disabled="true"
type="text"
clearable
style="width: 40rem;">
</el-input>&emsp;
&emsp;
<el-button @click="addConnect(index)">{{"选择案例"}}</el-button>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="案例类型："prop="associatedType">
<el-select v-model="item.associatedType" :disabled="true">
<el-option label="议题" value="0"></el-option>
<el-option label="项目" value="1"></el-option>
<el-option label="话题" value="2"></el-option>
</el-select>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="内容描述：" prop="contentDescription">
<el-upload ref="upload"
:action="uploadUrl"
:show-file-list="false"
:before-upload="uploadBeforeUploadHandle"
:on-success="uploadSuccessHandle"
style="display: none;">
<el-button ref="uploadBtn"
type="primary"
id="uploadBtn"
size="small">{{ $t('upload.button') }}</el-button>
</el-upload>
<quill-editor ref="myQuillEditor" v-model="item.contentDescription" :options="editorOption"></quill-editor>
</el-form-item>
</el-row>
</div>
</el-row>
<el-form-item>
<el-button :disabled="isAble" @click="addItem">{{"添加案例"}}</el-button>
</el-form-item>
</el-form>
<el-form>
<el-button type="primary" :disabled="isAble" @click="dataFormSubmitHandle()">{{"发布案例"}}</el-button>
<el-button size="small" :disabled="isAble" style="width: 95px" @click="back">返回</el-button>
</el-form>
<el-form>
<el-row>
</el-row>
</el-form>
<typicalcase-connect-list v-if="connectListVisible" ref="connectList" @refreshDataList="getDataList" v-on:connectResponse="connectResponse"></typicalcase-connect-list>
</div>
</el-card>
</template>
<script>
import debounce from 'lodash/debounce'
import TypicalcaseConnectList from './typicalcase-connect-list'
import { quillEditor } from 'vue-quill-editor'
import CaseInfoList from './typicalcase-list'
import Quill from 'quill'
import Cookies from 'js-cookie'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import mixinViewModule from '@/mixins/view-module'
export default {
mixins: [mixinViewModule],
created () {
this.addItem()
this.addItem()
this.$nextTick(() => {
// 富文本
this.hideUpload = false
this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
// if (this.quillEditor) {
// this.quillEditor.deleteText(0, this.quillEditor.getLength())
// } else {
// this.quillEditorHandle()
// }
// 富文本end
})
},
components: {
quillEditor,
TypicalcaseConnectList,
CaseInfoList
},
data () {
return {
fileList: [],
connectListVisible: false,
content: '',
loading: false,
isAble: false,
editorOption: {
placeholder: 'Please enter it here...',
modules:{
toolbar:{
container: [
['bold', 'italic', 'underline', 'strike'],// 加粗，斜体，下划线，删除线
['blockquote'],// 引用
[{ 'header': 1 }, { 'header': 2 }],// 标题，键值对的形式；1、2表示字体大小
[{ 'list': 'ordered'}, { 'list': 'bullet' }],//列表
[{ 'indent': '-1'}, { 'indent': '+1' }],// 缩进
[{ 'direction': 'rtl' }],// 文本方向
[{ 'size': ['small', false, 'large', 'huge'] }],// 字体大小
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],//几级标题
[{ 'color': [] }, { 'background': [] }],// 字体颜色，字体背景颜色
[{ 'font': [] }],//字体
[{ 'align': [] }],//对齐方式
['clean'],//清除字体样式
['image']//上传图片、上传视频
]
}
}
},
// 富文本
quillEditor: null,
quillEditorToolbarOptions: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block', 'image'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean']
],
uploadUrl: '',
dataForm: {
caseTitle: '',
caseNumber: 0,
mainPicture: '',
typicalAbstract: '',
dynamicItem: []
},
requiredFlag: false
}
},
computed: {
dataRule () {
return {
caseTitle: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
mainPicture: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
typicalAbstract: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
associatedId: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
methods: {
handleChange (file) {
this.beforeAvatarUpload(file)
},
back () {
this.$parent.selectComponent = 'CaseInfoList'
this.$router.push({ path: '/case-typicalcase'})
},
connectResponse (connectResponse) {
// 部门名称
this.dataForm.dynamicItem[connectResponse.caseIndex].caseSource = connectResponse.allDeptNames
// 案例类别
this.dataForm.dynamicItem[connectResponse.caseIndex].associatedType = connectResponse.associatedType
// 内容描述
if (connectResponse.associatedType == 0) {
this.dataForm.dynamicItem[connectResponse.caseIndex].contentDescription = connectResponse.issueContent
} else if (connectResponse.associatedType == 1) {
this.dataForm.dynamicItem[connectResponse.caseIndex].contentDescription = connectResponse.itemContent
} else if (connectResponse.associatedType == 2) {
this.dataForm.dynamicItem[connectResponse.caseIndex].contentDescription = connectResponse.topicContent
}
// 类别
this.dataForm.dynamicItem[connectResponse.caseIndex].category = connectResponse.categoryName
// 案例ID
this.dataForm.dynamicItem[connectResponse.caseIndex].associatedId = connectResponse.id
// 网格Id
this.dataForm.dynamicItem[connectResponse.caseIndex].sourceGridId = connectResponse.gridId
//发布人姓名
if (connectResponse.associatedType == 0) {
this.dataForm.dynamicItem[connectResponse.caseIndex].publisherName = connectResponse.nickName
} else if (connectResponse.associatedType == 1) {
this.dataForm.dynamicItem[connectResponse.caseIndex].publisherName = connectResponse.nickName
} else if (connectResponse.associatedType == 2) {
this.dataForm.dynamicItem[connectResponse.caseIndex].publisherName = connectResponse.nickname
}
// 头像
this.dataForm.dynamicItem[connectResponse.caseIndex].publisherHeader = connectResponse.userFace
// 内容
if (connectResponse.associatedType == 0) {
this.dataForm.dynamicItem[connectResponse.caseIndex].content = connectResponse.issueContent
} else if (connectResponse.associatedType == 1) {
this.dataForm.dynamicItem[connectResponse.caseIndex].content = connectResponse.itemContent
} else if (connectResponse.associatedType == 2) {
this.dataForm.dynamicItem[connectResponse.caseIndex].content = connectResponse.topicContent
}
if (connectResponse.associatedType == 0) {
this.dataForm.dynamicItem[connectResponse.caseIndex].releaseTime = connectResponse.distributeTime
} else if (connectResponse.associatedType == 1) {
this.dataForm.dynamicItem[connectResponse.caseIndex].releaseTime = connectResponse.distributeTime
} else if (connectResponse.associatedType == 2) {
this.dataForm.dynamicItem[connectResponse.caseIndex].releaseTime = connectResponse.createdTime
}
this.dataForm.dynamicItem[connectResponse.caseIndex].expressingAttitude = connectResponse.participantsNum
this.requiredFlag = true
},
addConnect(index){
this.connectListVisible = true
this.$nextTick(() => {
this.$refs.connectList.init(index)
})
},
// 动态添加
addItem () {
this.dataForm.dynamicItem.push({
caseSource: '',
associatedType: '',
contentDescription: '',
category: '',
associatedId: '',
sourceGridId: '',
publisherName: '',
publisherHeader: '',
releaseTime: '',
content: '',
expressingAttitude: ''
})
},
// 富文本编辑器
quillEditorHandle () {
this.quillEditor = new Quill('#J_quillEditor', {
modules: {
toolbar: this.quillEditorToolbarOptions
},
theme: 'snow'
})
this.quillEditor.container.style.height = `${300}px`
// // 自定义上传图片功能 (使用element upload组件)
this.quillEditor.getModule('toolbar').addHandler('image', () => {
this.$refs.uploadBtn.$el.click()
})
// 监听内容变化，动态赋值
this.quillEditor.on('text-change', () => {
this.dataForm.actContent = this.quillEditor.root.innerHTML
if ((this.dataForm.actContent).length > 10000) {
return this.$message.error('您输入的的内容已超过字数')
}
})
},
// 上传图片之前 (富文本)
uploadBeforeUploadHandle (file) {
if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
this.$message.error(this.$t('upload.tip', { 'format': 'jpg、png、gif' }))
return false
}
},
// 上传图片成功 (富文本)
uploadSuccessHandle (res) {
let quill = this.$refs.myQuillEditor[0].quill;
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.quill.insertEmbed(this.quill.getSelection().index, 'image', res.data.url)
},
// 上传图片ends
init () {
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
})
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
if(!this.requiredFlag){
alert("请关联案例！")
return false
}
for(let item of this.dataForm.dynamicItem) {
if(item.associatedId != '') {
this.dataForm.caseNumber = this.dataForm.caseNumber + 1
}
}
this.isAble = true;
this.$http[!this.dataForm.id ? 'post' : 'put']('/cloudAnalysis/typicalcase', this.dataForm).then(({ data: res }) => {
if (res.code !== 0) {
this.isAble = false;
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.isAble = false;
this.back()
}
})
}).catch(() => {})
})
}, 1000, { 'leading': true, 'trailing': false }),
handleAvatarActSuccess (res, file) {
this.loading = false
this.dataForm.mainPicture = 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;
}
.quill-editor {
width:60rem;
height: 400px;
.ql-container {
height: 350px;
}
}
</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>

263
src/views/modules/case/typicalcase-connect-list.vue
View File

@ -0,0 +1,263 @@
<template>
<el-dialog :visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="80%"
height="80%">
<el-card shadow="never" class="aui-card--fill">
<div class="mod-news__typicalcase}">
<el-form :model="dataForm" ref="dataForm" @keyup.enter.native="getDataList" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
<el-form-item label="所属机构">
<el-cascader v-model="ids"
:options="options"
:props="{ checkStrictly: true }"
clearable>
</el-cascader>
</el-form-item>
<el-form-item label="案例类型">
<el-select v-model="dataForm.associatedType" @change="getDataList">
<el-option label="议题" value="0"></el-option>
<el-option label="项目" value="1"></el-option>
<el-option label="话题" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="内容检索">
<el-input v-model="dataForm.keyword" property="请输入内容" style="width: 20rem;"></el-input>
&nbsp;
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
</el-form-item>
</el-form>
<el-table v-loading="dataListLoading" :data="dataList" max-height="250"
style="width: 100%;">
<el-table-column label="单选" width="70">
<template slot-scope="scope">
<el-radio v-model="radio" :label="scope.$index+1"
@change.native= selectAction(scope.row)></el-radio>
</template>
</el-table-column>
<el-table-column v-if="this.dataForm.associatedType == 0" prop="issueContent" label="内容" header-align="center" align="center" style="width: 10%"></el-table-column>
<el-table-column v-if="this.dataForm.associatedType == 1" prop="itemContent" label="内容" header-align="center" align="center" style="width: 10%"></el-table-column>
<el-table-column v-if="this.dataForm.associatedType == 2" prop="topicContent" label="内容" header-align="center" align="center" style="width: 10%"></el-table-column>
<el-table-column v-if="this.dataForm.associatedType == 0" prop="nickName" label="发布人姓名" header-align="center" align="center" style="width: 10%"></el-table-column>
<el-table-column v-if="this.dataForm.associatedType == 1" prop="nickName" label="发布人姓名" header-align="center" align="center" style="width: 10%"></el-table-column>
<el-table-column v-if="this.dataForm.associatedType == 2" prop="nickname" label="发布人姓名" header-align="center" align="center" style="width: 10%"></el-table-column>
<el-table-column prop="createdTime" label="发布时间" header-align="center" align="center" 问题内容style="width: 10%"></el-table-column>
<el-table-column prop="participantsNum" label="表达态度总数" header-align="center" align="center" style="width: 10%"></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>
</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>
<el-form>
<el-button type="primary" @click="getInfo()">{{"确定案例"}}</el-button>
</el-form>
</div>
</el-card>
<issue-detail v-if="issueDetailVisible" ref="issueDetails" @refreshDataList="getDataList"></issue-detail>
<item-detail v-if="itemDetailVisible" ref="itemDetails" @refreshDataList="getDataList"></item-detail>
<topic-detail v-if="topicDetailVisible" ref="topicDetails" @refreshDataList="getDataList"></topic-detail>
</el-dialog>
</template>
<script>
import debounce from 'lodash/debounce'
import mixinViewModule from '@/mixins/view-module'
import IssueDetail from './issue-detail'
import ItemDetail from './item-detail'
import TopicDetail from './topic-detail'
export default {
mixins: [mixinViewModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/events/issue/page',
getDataListIsPage: true
},
visible: false,
radio: 0,
issueDetailVisible: false,
itemDetailVisible: false,
topicDetailVisible: false,
dataForm: {
streetId: '',
communityId: '',
gridId: '',
caseIndex: '',
associatedType: '0',
keyword: '',
selectedType: '0',
selectId: '',
participantsNum: 0
},
options: [],
responseData: []
}
},
created: function () {
this.getOptions()
},
watch: {
'ids': function (val) {
if (val.length === 0) {
this.dataForm.streetId = ''
this.dataForm.communityId = ''
this.dataForm.gridId = ''
}
if (val.length === 1) {
this.dataForm.streetId = this.ids[0]
}
if (val.length === 2) {
this.dataForm.streetId = this.ids[0]
this.dataForm.communityId = this.ids[1]
}
if (val.length === 3) {
this.dataForm.streetId = this.ids[0]
this.dataForm.communityId = this.ids[1]
this.dataForm.gridId = this.ids[2]
}
}
},
methods: {
selectAction (item) {
this.dataForm.selectId = item.id
this.dataForm.participantsNum = item.participantsNum
},
getOptions () {
this.$http
.get(`/sys/user/deptOptions/getByLoginUser`)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.options = res.data.options
})
.catch(() => {})
},
// 获取数据列表
init (index) {
this.visible = true
this.dataForm.caseIndex = index
this.$nextTick(() => {
this.getDataList()
})
},
detailHandle (id) {
// 议题
if (this.dataForm.selectedType == 0) {
this.issueDetailVisible = true
this.$nextTick(() => {
this.$refs.issueDetails.init(id)
})
// 项目
} else if (this.dataForm.selectedType == 1) {
this.itemDetailVisible = true
this.$nextTick(() => {
this.$refs.itemDetails.init(id)
})
// 话题
} else if (this.dataForm.selectedType == 2) {
this.topicDetailVisible = true
this.$nextTick(() => {
this.$refs.topicDetails.init(id)
})
} else {
console.log('未选择类型')
}
},
getDataList () {
this.dataListLoading = true
if (this.dataForm.associatedType == 0) {
// 议题
this.dataForm.state = 4
this.mixinViewModuleOptions.getDataListURL = '/events/issue/page'
} else if (this.dataForm.associatedType == 1) {
// 项目
this.dataForm.state = ''
this.mixinViewModuleOptions.getDataListURL = '/events/item/page'
} else if (this.dataForm.associatedType == 2) {
this.dataForm.state = ''
this.dataForm.orderType = ''
// 话题
this.mixinViewModuleOptions.getDataListURL = '/group/topic/page'
} else {
console.log('先选择类型')
}
this.$http.get(
this.mixinViewModuleOptions.getDataListURL,
{
params: {
order: this.order,
orderField: this.orderField,
page: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
limit: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,
...this.dataForm
}
}
).then(({ data: res }) => {
this.dataListLoading = false
this.radio = 0
if (res.code !== 0) {
this.dataList = []
this.total = 0
return this.$message.error(res.msg)
}
this.dataList = res.data.list
this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
this.dataForm.selectedType = this.dataForm.associatedType
}).catch(() => {
this.dataListLoading = false
})
},
getInfo () {
if (!this.dataForm.selectId) {
alert("未选择！")
return
}
var url = ''
if (this.dataForm.selectedType == 0) {
url = '/events/issue/issueContentDetail/' + this.dataForm.selectId
} else if (this.dataForm.selectedType == 1) {
url = '/events/item/' + this.dataForm.selectId
} else if (this.dataForm.selectedType == 2) {
url = '/group/topic/detail/' + this.dataForm.selectId
} else {
console.log('未选择类型')
return
}
this.$http.get(url).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.responseData = {
...this.responseData,
...res.data
}
this.responseData.id = this.dataForm.selectId
this.responseData.associatedType = this.dataForm.selectedType
this.responseData.caseIndex = this.dataForm.caseIndex
this.responseData.participantsNum = this.dataForm.participantsNum
this.$emit('connectResponse', this.responseData)
this.visible = false
}).catch(() => {})
}
},
components: {
IssueDetail,
ItemDetail,
TopicDetail
}
}
</script>

120
src/views/modules/case/typicalcase-detail.vue
View File

@ -0,0 +1,120 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-news__typicalcase}">
<el-form :inline="true"
:model="dataForm"
:rules="dataRule"
ref="dataForm"
:label-width="$i18n.locale === 'en-US' ? '120px' : '120px'">
<el-row>
<el-form-item label="banner：" v-loading="loading" prop="headPic">
<img v-if="dataForm.mainPicture"
:src="dataForm.mainPicture"
class="avatar">
</el-form-item>
</el-row>
<el-row>
<el-form-item label="案例标题："
prop="caseTitle">
{{dataForm.caseTitle}}
</el-form-item>
</el-row>
<el-row>
<el-form-item label="摘要："
prop="typicalAbstract">
{{dataForm.typicalAbstract}}
</el-form-item>
</el-row>
<el-row>
<div v-for="(item, index) in dataForm.dynamicItem" :key="index">
<div style="text-align: left">{{"案例"+(index+1)}}</div>
<el-row>
<el-form-item label="案例来源："
prop="caseSource">
{{item.caseSource}}
</el-form-item>
</el-row>
<el-row>
<el-form-item label="案例类型："prop="associatedType">
<el-select v-model="item.associatedType" disabled="true">
<el-option label="议题" value="0"></el-option>
<el-option label="项目" value="1"></el-option>
<el-option label="话题" value="2"></el-option>
</el-select>
</el-form-item>
</el-row>
<el-row>
<el-form-item prop="contentDescription"
label="内容描述：">
<p v-html="item.contentDescription"></p>
</el-form-item>
</el-row>
</div>
</el-row>
</el-form>
<el-form>
<el-button size="small" style="width: 95px" @click="back">返回</el-button>
</el-form>
</div>
</el-card>
</template>
<script>
import debounce from 'lodash/debounce'
import mixinViewModule from '@/mixins/view-module'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
mixins: [mixinViewModule],
components: {
quillEditor
},
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/cloudAnalysis/typicalcase/detail' + '/' + this.$route.query.id
},
dataForm: {
id: '',
caseTitle: '',
caseNumber: 0,
mainPicture: '',
typicalAbstract: '',
dynamicItem: []
}
}
},
mounted () {
this.dataForm.id = this.$route.query.id
this.init()
},
methods: {
back () {
this.$parent.selectComponent = 'CaseInfoList'
this.$router.push({ path: '/case-typicalcase' })
},
init () {
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.getInfo()
}
})
},
// 获取信息
getInfo () {
this.$http.get(`/cloudAnalysis/typicalcase/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
}).catch(() => {})
}
}
}
</script>

162
src/views/modules/case/typicalcase-list.vue
View File

@ -0,0 +1,162 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-news__typicalcase}">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item label="案例标题">
<el-input v-model="dataForm.caseTitle" placeholder="请输入" clearable></el-input>
</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>
<el-form>
<!--添加按钮-->
<el-form-item>
<el-button type="primary" @click="addHandle()">{{"新增典型案例"}}</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" 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="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="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('case: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>
</template>
</el-table-column>
</el-table>
<!--分页-->
<div style="text-align:center">
<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>
</div>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './typicalcase-add-or-update'
import CaseInfoDetailView from './typicalcase-detail'
import {debounce} from 'lodash'
export default {
mixins: [mixinViewModule],
name: 'CaseInfoList',
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/cloudAnalysis/typicalcase/page',
getDataListIsPage: true
},
dataForm: {
caseTitle: '',
startTime: '',
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: {
AddOrUpdate,
CaseInfoDetailView
},
created: function () {
this.getDataList()
},
methods: {
detailHandle (id) {
this.$parent.selectComponent = 'CaseInfoDetailView'
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 () {
this.$parent.selectComponent = 'CaseInfoAdd'
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>

31
src/views/modules/case/typicalcase.vue
View File

@ -0,0 +1,31 @@
<template>
<keep-alive include="caseInfoList">
<component :is="selectComponent"></component>
</keep-alive>
</template>
<script>
import CaseInfoList from './typicalcase-list'
import CaseInfoDetailView from './typicalcase-detail'
import CaseInfoAdd from './typicalcase-add-or-update'
export default {
data () {
return {
selectComponent: CaseInfoList
}
},
components: {
CaseInfoList,
CaseInfoDetailView,
CaseInfoAdd
},
methods: {
init () {
this.selectComponent = CaseInfoList
}
}
}
</script>
<style lang="scss" scoped>
</style>
Write Preview
Loading…
Cancel
Save