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

经典案例管理功能重构

master
李鹏飞 6 years ago
parent
ab0ec73d17
commit
0270ad47f1
11 changed files with 1909 additions and 808 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. 31
      src/views/modules/case/caseinfo.vue
  2. 368
      src/views/modules/case/issue-detail.vue
  3. 471
      src/views/modules/case/item-detail.vue
  4. 211
      src/views/modules/case/topic-detail.vue
  5. 547
      src/views/modules/case/typicalcase-add-or-update.vue
  6. 260
      src/views/modules/case/typicalcase-connect-list.vue
  7. 120
      src/views/modules/case/typicalcase-detail.vue
  8. 104
      src/views/modules/case/typicalcase-list.vue
  9. 101
      src/views/modules/case/typicalcase.vue
  10. 239
      src/views/modules/case/typicalcasedetail.vue
  11. 265
      src/views/modules/case/typicalcasedialog.vue

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

@ -1,31 +0,0 @@
<template>
<keep-alive include="caseInfoList">
<component :is="selectComponent"></component>
</keep-alive>
</template>
<script>
import CaseInfoList from './typicalcase'
import CaseInfoDetailView from './typicalcasedetail'
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>

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>

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

@ -0,0 +1,471 @@
<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 style="width: 100%; height: 100%;">
<div class="project-detail">
<div class="project-detail-tip">议题详情</div>
<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>
<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>
<el-form-item style="float: right;">
<el-button size="small"
style="width: 95px"
@click="back">返回</el-button>
</el-form-item>
</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-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: 79%;
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: #aaa;
}
&::-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: 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>

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>

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

@ -1,89 +1,102 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-news__typicalcase}">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
<el-form-item label="" prop="mainPicture">
<el-upload
:limit="1"
ref="upload1"
class="upload-demo"
:on-change="handleChange"
:action="uploadUrl"
:name="'file'"
:auto-upload="false"
:before-upload="beforeAvatarUpload"
:before-remove="beforeRemove"
list-type="picture-card">
<el-button>{{"上传文件"}}</el-button>
<div slot="tip" class="" style="width: 272px;font-size: 13px">{{"支持：.jpg/png"}}</div>
</el-upload>
</el-form-item>
<el-form-item label="案例标题" prop="caseTitle" style="width: 40rem;">
<el-input v-model="dataForm.caseTitle" placeholder="请输入40字以内" maxlength="40"></el-input>
</el-form-item>
<el-form-item label="摘要" prop="typicalAbstract" style="width: 40rem;">
<el-input v-model="dataForm.typicalAbstract" placeholder="文本输入框，限制200字内" maxlength="200"
type="textarea" :rows="5"></el-input>
</el-form-item>
</el-form>
<!-- 实际案例-->
<div v-for="(item, index) in dataForm1.dynamicItem" :key="index">
<div style="text-align: left">{{"案例"+(index+1)}}</div>
<el-form :model="dataForm1" :rules="dataRule" ref="dataForm1" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
<el-form-item label="案例来源" style="width: 40rem;">
<el-cascader v-model="item.ids"
:options="options"
:props="{ checkStrictly: true }"
clearable>
</el-cascader>
</el-form-item>
<el-form-item label="关联案例" style="width: 40rem;">
<el-input v-model="item.casename" placeholder="" disabled></el-input>
<el-button @click="addOrUpdateHandle(item.ids)">{{"选择案例"}}</el-button>
</el-form-item>
<el-form-item label="案例类型" style="width: 40rem;">
<el-input v-model="item.casetype" placeholder="" disabled></el-input>
</el-form-item>
<el-form-item label="内容描述" style="width: 40rem;">
<quill-editor ref="text" v-model="item.content" class="myQuillEditor" :options="editorOption"></quill-editor>
</el-form-item>
<!-- <el-form-item prop="actContent"-->
<!-- label="活动内容：">-->
<!-- <div style="width:1000px">-->
<!-- &lt;!&ndash; 富文本编辑器, 容器 &ndash;&gt;-->
<!-- <div id="J_quillEditor" ></div>-->
<!-- &lt;!&ndash; 自定义上传图片功能 (使用element upload组件) &ndash;&gt;-->
<!-- <el-upload :action="uploadUrl"-->
<!-- :show-file-list="false"-->
<!-- :before-upload="uploadBeforeUploadHandle"-->
<!-- :on-success="uploadSuccessHandle"-->
<!-- style="display: none;">-->
<!-- <el-button ref="uploadBtn"-->
<!-- type="primary"-->
<!-- size="small">{{ $t('upload.button') }}</el-button>-->
<!-- </el-upload>-->
<!-- </div>-->
<!-- </el-form-item>-->
</el-form>
</div>
<el-form>
<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">
<quill-editor ref="text" v-model="item.contentDescription" class="myQuillEditor" :options="editorOption" style="width: 40rem;"></quill-editor>
</el-form-item>
</el-row>
</div>
</el-row>
<el-form-item>
<el-button @click="addItem">{{"添加案例"}}</el-button>
</el-form-item>
</el-form>
<!-- 发布按钮-->
<el-form>
<el-button type="primary" @click="dataFormSubmitHandle()">{{"发布案例"}}</el-button>
</el-form>
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" v-on:listenTochildEvent="showMessageFromChild"></add-or-update>
<el-form>
<el-button type="primary" @click="dataFormSubmitHandle()">{{"发布案例"}}</el-button>
<el-button size="small" 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 AddOrUpdate from './typicalcasedialog'
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'
@ -95,7 +108,6 @@ export default {
created () {
this.addItem()
this.addItem()
this.visible = true
this.$nextTick(() => {
// 富文本
this.hideUpload = false
@ -110,54 +122,42 @@ export default {
},
components: {
quillEditor,
AddOrUpdate
TypicalcaseConnectList,
CaseInfoList
},
data () {
return {
fileList: [],
visible: false,
connectListVisible: false,
content: '',
loading: false,
editorOption: {},
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: '',
addOrUpdateVisible: false,
// 富文本
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: {
id: '',
caseTitle: '',
caseNumber: '',
state: '',
caseNumber: 0,
mainPicture: '',
typicalAbstract: '',
revision: '',
delFlag: '',
createdBy: '',
createdTime: '',
updatedBy: '',
updatedTime: ''
},
dataForm1: {
number: 0,
ids: '',
casename: '',
casetype: '',
content: '',
dynamicItem: []
}
},
requiredFlag: false
}
},
computed: {
@ -166,86 +166,96 @@ export default {
caseTitle: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
caseNumber: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
state: [
{ 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' }
],
revision: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
delFlag: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
createdBy: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
createdTime: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
updatedBy: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
updatedTime: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
associatedId: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
methods: {
showMessageFromChild (data) {
// // eslint-disable-next-line no-undef
// item.casename = data.id
// // eslint-disable-next-line no-undef
// item.casetype = data.type
// // eslint-disable-next-line no-undef
// item.casename = data.case
console.log(data)
},
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
}
beforeRemove (file, fileList) {
console.log(file)
file = null
this.file1 = file
this.dataForm.mainPicture = null
console.log(file)
// this.canUpload = false;
this.dataForm.dynamicItem[connectResponse.caseIndex].expressingAttitude = connectResponse.participantsNum
this.requiredFlag = true
this.dataForm.caseNumber = this.dataForm.caseNumber + 1
},
// 限制上传类型和大小
beforeAvatarUpload (file) {
var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
// alert(testmsg)
const extension = testmsg === 'png'
const extension2 = testmsg === 'jpg'
if (!extension && !extension2) {
this.$message.error('请上传jpg或png格式图片')
this.$refs.upload1.clearFiles()
file = null
this.dataForm.mainPicture = null
} else {
this.dataForm.mainPicture = file.name
this.canUpload = true
}
this.file1 = file
addConnect(index){
this.connectListVisible = true
this.$nextTick(() => {
this.$refs.connectList.init(index)
})
},
// 动态添加
addItem () {
this.dataForm1.number++
this.dataForm1.dynamicItem.push({
number: this.dataForm1.number,
ids: '',
caseid: '',
content: ''
this.dataForm.dynamicItem.push({
caseSource: '',
associatedType: '',
contentDescription: '',
category: '',
associatedId: '',
sourceGridId: '',
publisherName: '',
publisherHeader: '',
releaseTime: '',
content: '',
expressingAttitude: ''
})
},
@ -293,30 +303,20 @@ export default {
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.getInfo()
}
})
},
// 获取信息
getInfo () {
this.$http.get(`/case/typicalcase/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
}).catch(() => {})
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.$http[!this.dataForm.id ? 'post' : 'put']('/typicalcase/addcase', this.dataForm).then(({ data: res }) => {
if(!this.requiredFlag){
alert("请关联案例！")
return false
}
this.$http[!this.dataForm.id ? 'post' : 'put']('/cloudAnalysis/typicalcase', this.dataForm).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
@ -331,7 +331,178 @@ export default {
})
}).catch(() => {})
})
}, 1000, { 'leading': true, 'trailing': false })
}, 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;
}
</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/case/typicalcase-connect-list.vue
View File

@ -0,0 +1,260 @@
<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="commentNum" 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: ''
},
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
},
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.$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>

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

@ -0,0 +1,104 @@
<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="创建时间">
<el-date-picker v-model="dataForm.startTime" placeholder="" value-format="yyyy-MM-dd 00:00:00" clearable></el-date-picker>
</el-form-item>
<el-form-item label="至">
<el-date-picker v-model="dataForm.endTime" placeholder="" value-format="yyyy-MM-dd 23:59:59" clearable></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="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 prop="caseTitle" 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 :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
<template slot-scope="scope">
<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="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>
<!-- &lt;!&ndash; 弹窗, 新增 / 修改 &ndash;&gt;-->
<!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>-->
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './typicalcase-add-or-update'
import CaseInfoDetailView from './typicalcase-detail'
export default {
mixins: [mixinViewModule],
name: 'CaseInfoList',
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/cloudAnalysis/typicalcase/page',
getDataListIsPage: true
},
dataForm: {
caseTitle: '',
startTime: '',
endTime: ''
}
}
},
components: {
AddOrUpdate,
CaseInfoDetailView
},
created: function () {
this.getDataList()
},
methods: {
UpdateStateOn (id) {
this.mixinViewModuleOptions.getDataListURL = '/cloudAnalysis/typicalcase/on' + '/' + id
this.getDataList()
},
UpdateStateOff (id) {
this.mixinViewModuleOptions.getDataListURL = '/cloudAnalysis/typicalcase/off' + '/' + id
this.getDataList()
},
detailHandle (id) {
this.$parent.selectComponent = 'CaseInfoDetailView'
this.$router.push({ path: '/case-typicalcase', query: { id: id } })
},
addHandle () {
this.$parent.selectComponent = 'CaseInfoAdd'
this.$router.push({ path: '/case-typicalcase' })
}
}
}
</script>

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

@ -1,100 +1,31 @@
<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="创建时间">
<el-date-picker v-model="dataForm.startTime" placeholder="" value-format="yyyy-MM-dd 00:00:00" clearable></el-date-picker>
</el-form-item>
<el-form-item label="至">
<el-date-picker v-model="dataForm.endTime" placeholder="" value-format="yyyy-MM-dd 23:59:59" clearable></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="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 prop="caseTitle" 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="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 :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
<template slot-scope="scope">
<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="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>
<!-- &lt;!&ndash; 弹窗, 新增 / 修改 &ndash;&gt;-->
<!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>-->
</div>
</el-card>
<keep-alive include="caseInfoList">
<component :is="selectComponent"></component>
</keep-alive>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './typicalcase-add-or-update'
import CaseInfoList from './typicalcase-list'
import CaseInfoDetailView from './typicalcase-detail'
import CaseInfoAdd from './typicalcase-add-or-update'
export default {
mixins: [mixinViewModule],
name: 'CaseInfoList',
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/cloudAnalysis/typicalcase/page',
getDataListIsPage: true
},
dataForm: {
caseTitle: '',
startTime: '',
endTime: ''
}
selectComponent: CaseInfoList
}
},
components: {
AddOrUpdate
CaseInfoList,
CaseInfoDetailView,
CaseInfoAdd
},
methods: {
UpdateStateOn (id) {
this.mixinViewModuleOptions.getDataListURL = '/cloudAnalysis/typicalcase/on' + '/' + id
this.getDataList()
},
UpdateStateOff (id) {
this.mixinViewModuleOptions.getDataListURL = '/cloudAnalysis/typicalcase/off' + '/' + id
this.getDataList()
},
detailHandle (id) {
this.$parent.selectComponent = 'CaseInfoDetailView'
this.$router.push({ path: '/case-typicalcasedetail', query: { id: id } })
},
addHandle () {
this.$parent.selectComponent = 'CaseInfoAdd'
this.$router.push({ path: '/case-typicalcase-add-or-update' })
init () {
this.selectComponent = CaseInfoList
}
}
}
</script>
<style lang="scss" scoped>
</style>

239
src/views/modules/case/typicalcasedetail.vue
View File

@ -1,239 +0,0 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-news__typicalcase}">
<el-form :model="dataList" :rules="dataRule" ref="dataForm" @keyup.enter.native="getDataList()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
<el-form-item label="" prop="mainPicture">
<el-upload disabled
:limit="1"
ref="upload1"
class="upload-demo"
:on-change="handleChange"
action="werwer"
:name="'file'"
:auto-upload="false"
:before-upload="beforeAvatarUpload"
:before-remove="beforeRemove"
list-type="picture-card">
<el-button disabled>{{"上传文件"}}</el-button>
<div slot="tip" class="" style="width: 272px;font-size: 13px">{{"支持：.jpg/png"}}</div>
</el-upload>
</el-form-item>
<el-form-item label="案例标题" prop="caseTitle" style="width: 40rem;">
<el-input disabled v-model="dataList.caseTitle" placeholder="" maxlength="40"></el-input>
</el-form-item>
<el-form-item label="摘要" prop="typicalAbstract" style="width: 40rem;">
<el-input disabled v-model="dataList.typicalAbstract" placeholder="" maxlength="200"
type="textarea" :rows="5"></el-input>
</el-form-item>
<el-form-item label="时间" prop="createdTime" style="width: 40rem;">
<el-input disabled v-model="dataList.createdTime" placeholder="" maxlength="200"></el-input>
</el-form-item>
</el-form>
<!-- 实际案例-->
<div v-for="(item, index) in dataList.caseData" :key="index">
<div style="text-align: left">{{"案例"+(index+1)}}</div>
<el-form :model="dataForm1" :rules="dataRule" ref="dataForm1" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
<el-form-item label="案例来源" style="width: 40rem;">
<el-input v-model="item.caseSource" disabled></el-input>
</el-form-item>
<el-form-item label="关联案例" style="width: 40rem;">
<el-input v-model="item.associatedType" placeholder="" disabled></el-input>
</el-form-item>
<el-form-item label="内容描述" style="width: 40rem;">
<quill-editor ref="text" v-model="item.contentDescription" class="myQuillEditor" :options="editorOption" disabled=""></quill-editor>
</el-form-item>
</el-form>
</div>
<el-form>
<el-form-item label-width="200px">
<el-button size="small" style="width: 95px" @click="backToList">返回</el-button>
</el-form-item>
</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
},
fileList: [],
visible: false,
content: '',
editorOption: {},
dataForm: {
id: '',
caseTitle: '',
caseNumber: '',
state: '',
mainPicture: '',
typicalAbstract: '',
revision: '',
delFlag: '',
createdBy: '',
createdTime: '',
updatedBy: '',
updatedTime: ''
},
dataForm1: {
number: 0,
ids: '',
caseid: '',
content: '',
dynamicItem: []
}
}
},
computed: {
// dataRule () {
// return {
// caseTitle: [
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
// ],
// caseNumber: [
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
// ],
// state: [
// { 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' }
// ],
// revision: [
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
// ],
// delFlag: [
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
// ],
// createdBy: [
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
// ],
// createdTime: [
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
// ],
// updatedBy: [
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
// ],
// updatedTime: [
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
// ]
// }
// }
},
methods: {
backToList () {
this.$parent.selectComponent = 'CaseInfoList'
// eslint-disable-next-line standard/object-curly-even-spacing
this.$router.push({ path: '/case-typicalcase' })
},
// handleChange (file) {
// this.beforeAvatarUpload(file)
// },
//
// beforeRemove (file, fileList) {
// console.log(file)
// file = null
// this.file1 = file
// this.dataForm.mainPicture = null
// console.log(file)
// // this.canUpload = false;
// },
// // 限制上传类型和大小
// beforeAvatarUpload (file) {
// var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
// // alert(testmsg)
// const extension = testmsg === 'png'
// const extension2 = testmsg === 'jpg'
// if (!extension && !extension2) {
// this.$message.error('请上传jpg或png格式图片')
// this.$refs.upload1.clearFiles()
// file = null
// this.dataForm.mainPicture = null
// } else {
// this.dataForm.mainPicture = file.name
// this.canUpload = true
// }
// this.file1 = file
// },
// 动态添加
addItem () {
this.dataForm1.number++
this.dataForm1.dynamicItem.push({
number: this.dataForm1.number,
ids: '',
caseid: '',
content: ''
})
},
init () {
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.getInfo()
}
})
},
// 获取信息
getInfo () {
this.$http.get(`/case/typicalcase/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
// this.dataForm1.domains = []
// for (var j = 0; j < res.data.caseData.length; j++) {
// var obj = {}
// obj.label = res.data.data[j].label
// obj.prop = res.data.data[j].prop
// obj.value = res.data.data[j].value
// obj.editable = res.data.data[j].editable
// this.dynamicValidateForm.domains.push(obj)
// }
}).catch(() => {})
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.$http[!this.dataForm.id ? 'post' : 'put']('/typicalcase/addcase', 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 })
}
}
</script>

265
src/views/modules/case/typicalcasedialog.vue
View File

@ -1,265 +0,0 @@
<template>
<el-dialog :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false">
<el-card shadow="never" class="aui-card--fill">
<div class="mod-news__typicalcase}">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="getDataList" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
<el-form-item label="案例类型">
<el-select v-model="dataForm.associatedType">
<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.casecontent" property="请输入内容" style="width: 20rem;"></el-input>
<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="65">
<template slot-scope="scope">
<el-radio v-model="tableRadio" :label="scope.row.id"
@change.native= selectAction(scope.row.id,scope.row.issueContent,scope.row.itemContent,scope.row.topicContent)><i></i></el-radio>
</template>
</el-table-column>
<el-table-column label="序号" type="index" header-align="center" align="center" style="width: 10%"></el-table-column>
<el-table-column v-if="this.dataForm.associatedType == 0 || this.dataForm.associatedType == '议题'" 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 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="caseSource" label="来源网络" header-align="center" align="center" style="width: 10%"></el-table-column>-->
<el-table-column prop="commentNum" 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-form>
<el-button type="primary" @click="Backtypicalcase()">{{"确定案例"}}</el-button>
</el-form>
</div>
</el-card>
</el-dialog>
</template>
<script>
import debounce from 'lodash/debounce'
export default {
data () {
return {
// 设置属性
mixinViewModuleOptions: {
activatedIsNeed: true, // 此页面是否在激活（进入）时，调用查询数据列表接口？
getDataListURL: '', // 数据列表接口，API地址
getDataListIsPage: false // 数据列表接口，是否需要分页？
},
// 默认属性
dataForm: {
associatedType: '议题',
casecontent: ''
}, // 查询条件
dataList: [],
// 数据列表
order: '', // 排序，asc／desc
orderField: '', // 排序，字段
page: 1, // 当前页码
limit: 10, // 每页数
total: 0, // 总条数
dataListLoading: false, // 数据列表，loading状态
dataListSelections: [], // 数据列表，多选项
addOrUpdateVisible: false, // 新增／更新，弹窗visible状态
fileList: [],
tableRadio: '',
visible: false,
content: '',
currentRow: null,
Contentname: '',
editorOption: {}
}
},
computed: {
dataRule () {
return {
caseTitle: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
caseNumber: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
state: [
{ 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' }
],
revision: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
delFlag: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
createdBy: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
createdTime: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
updatedBy: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
updatedTime: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
methods: {
selectAction (val, val1, val2, val3) {
// 内容
if (this.dataForm.associatedType == 0 || this.dataForm.associatedType == '议题') {
this.Contentname = val1
} else if (this.dataForm.associatedType == 1) {
this.Contentname = val2
} else if (this.dataForm.associatedType == 2) {
this.Contentname = val3
} else {
console.log('未选择类型')
}
},
clickChange (item) {
this.tableRadio = item
},
// 获取数据列表
getDataList () {
this.dataListLoading = true
// eslint-disable-next-line no-cond-assign,no-constant-condition
// if (this.dataForm.associatedType == '议题') {
// this.dataForm.associatedType = 0
// }
if (this.dataForm.associatedType == 0 || this.dataForm.associatedType == '议题') {
// 议题
this.dataForm.state = 4
this.mixinViewModuleOptions.getDataListURL = '/events/issue/page'
} else if (this.dataForm.associatedType == 1) {
// 项目
this.mixinViewModuleOptions.getDataListURL = '/events/item/page'
} else if (this.dataForm.associatedType == 2) {
// 话题
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
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
}).catch(() => {
this.dataListLoading = false
})
},
init () {
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.getInfo()
}
})
},
// 返回类型、案例id和内容
Backtypicalcase () {
let params = {}
params.id = this.tableRadio
params.case = this.Contentname
if (this.dataForm.associatedType == '议题') {
params.type = 0
} else {
params.type = this.dataForm.associatedType
}
this.$emit('listenTochildEvent', params)
this.visible = false
},
detailHandle (id) {
// 议题
// eslint-disable-next-line eqeqeq
if (this.dataForm.associatedType == 0) {
this.$parent.selectComponent = ''
this.$router.push({ path: '/', query: { id: id } })
// 项目
// eslint-disable-next-line eqeqeq
} else if (this.dataForm.associatedType == 1) {
this.$parent.selectComponent = ''
this.$router.push({ path: '/', query: { id: id } })
// 话题
// eslint-disable-next-line eqeqeq
} else if (this.dataForm.associatedType == 2) {
this.$parent.selectComponent = ''
this.$router.push({ path: '/', query: { id: id } })
} else {
console.log('未选择类型')
}
},
// 获取信息
getInfo () {
this.$http.get(`/case/typicalcase/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
}).catch(() => {})
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.$http[!this.dataForm.id ? 'post' : 'put']('/typicalcase/addcase', 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 })
}
}
</script>
Write Preview
Loading…
Cancel
Save