<template>
<div class="app-container">
<el-row class="table-title">
<el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
<el-col :span="12" :offset="6" class="edit_btns">
<!-- <el-button class="edit_btn" size="small">查看地图</el-button> -->
<el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
</el-col>
</el-row>
<el-form ref="caseform" class="form" label-width="90px">
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="案卷编号">
<el-input :value="caseDetail.caseid"/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="信息来源">
<el-input :value="caseDetail.sourceName"/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="举报人/电话">
<el-input :value="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="上报人员">
<el-input :value="caseDetail.createUserName"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="案卷类别">
<el-input :value="caseDetail.eorcName"/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="案卷大类">
<el-input :value="caseDetail.casetypeName"/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="案卷小类">
<el-input :value="caseDetail.casetypeDetailName"/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="案卷等级">
<el-input :value="caseDetail.caseLevelName"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="所在区县">
<el-input :value="caseDetail.areaName"/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="所在街道">
<el-input :value="caseDetail.streetName"/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="所属社区">
<el-input :value="caseDetail.communityName"/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="所属网格">
<el-input :value="caseDetail.casetypesTimeName"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="登记时间">
<el-input :value="caseDetail.createTime"/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="处理时限">
<el-input :value="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="完成时限">
<el-input :value="caseDetail.nodeLimittime"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
<el-input :value="caseDetail.shopkeeperName"/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item v-if="caseDetail.shopPhone" label="商户电话">
<el-input :value="caseDetail.shopPhone"/>
</el-form-item>
</el-col>
<el-col v-if="showNeedVisit==true" :span="6">
<el-form-item label="是否回访">
<el-input :value="isNeedVisit"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="立案标准">
<el-input :value="caseDetail.casetypesTimeName"/>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="发生地点">
<el-input :value="caseDetail.fieldintro"/>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="事件描述">
<el-input :value="caseDetail.description"/>
</el-form-item>
</el-row>
</el-form>
<el-row>
<div class="title">案卷图片:</div>
<!-- 图片展示 -->
<div class="image-container">
<el-image v-for="img in fileIdVerify" :key="img" :src="imgurl+img" fit="contain" class="image"/>
<el-image v-for="img in fileIdProcess" :key="img" :src="imgurl+img" fit="contain" class="image"/>
<el-image v-for="img in fileIdCheck" :key="img" :src="imgurl+img" fit="contain" class="image"/>
</div>
</el-row>
<el-row v-if="showProcess">
<div class="title">案卷处理:</div>
<!-- 案卷处理 有权限控制-->
<div class="case-process">
<el-form ref="processForm" v-model="processForm" class="form" label-width="90px" >
<el-row>
<el-form-item v-if="processRadioList.length>0" label="操作类型 " prop="operation">
<el-radio-group v-model="operationKey" @change="selectNextOperation">
<el-radio v-for="radio in processRadioList" :key="radio.id" :label="radio.operationKey">{{ radio.nextOperation }}</el-radio>
</el-radio-group>
</el-form-item>
</el-row>
<el-row>
<el-form-item v-if="processCompShow==='selectUser'" label="选择人员" prop="person">
<el-select v-model="processCompObj.taskUserId" filterable placeholder="请选择" style="width: 400px;">
<el-option v-for="item in processCompObj.userList" :key="item.id" :label="item.name" :value="item.id"/>
</el-select>
</el-form-item>
</el-row>
<el-row>
<el-form-item v-if="processCompShow==='selectDept'" label="选择部门" prop="dept">
<el-select v-model="processCompObj.dispatchDeptId" filterable placeholder="请选择" style="width: 400px;">
<el-option v-for="item in processCompObj.deptList" :key="item.id" :label="item.simplename" :value="item.id"/>
</el-select>
</el-form-item>
</el-row>
<div v-if="processCompShow==='selectCaseTime'">
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="案卷等级" prop="caseLevel">
<el-select v-model="processCompObj.caseLevel" placeholder="选择立案等级" @change="updateHoursAndMins">
<el-option
v-for="item in processCompObj.caseLevelList"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="案卷大类" prop="caseType">
<el-select
v-model="processCompObj.caseType"
filterable
clearable
placeholder="请选择案卷大类"
@change="selectCaseType">
<el-option v-for="item in processCompObj.caseTypeList" :key="item.id" :label="item.typeName" :value="item.id"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="案卷小类" prop="caseTypeDetail">
<el-select
v-model="processCompObj.caseTypeDetail"
filterable
clearable
placeholder="请选择案卷小类"
@change="selectCaseTypeDetail">
<el-option v-for="item in processCompObj.caseTypeDetailList" :key="item.id" :label="item.typeDetailName" :value="item.id"/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="立案标准" prop="caseTypeTimes">
<el-select
v-model="processCompObj.caseTypeTime"
filterable
clearable
placeholder="请选择立案标准"
style="width: 72%;"
@change="updateHoursAndMins">
<el-option v-for="item in processCompObj.caseTypeTimeList" :key="item.id" :label="item.name" :value="item.id"/>
</el-select>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="完成时限">
<el-col :span="3">
<el-form-item>
<el-input v-model="processCompObj.hours" prop="hours">
<template slot="append">小时</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="1" style="text-align:center;">—</el-col>
<el-col :span="3">
<el-form-item>
<el-input v-model="processCompObj.minutes" prop="minutes">
<template slot="append">分钟</template>
</el-input>
</el-form-item>
</el-col>
</el-form-item>
</el-row>
</div>
<el-row>
<el-form-item v-if="processCompShow==='selectFilingType'" label="归档类型">
<el-select v-model="processCompObj.filingType" filterable placeholder="请选择归档类型" style="width: 400px;">
<el-option v-for="item in processCompObj.filingTypeList" :key="item.value" :label="item.name" :value="item.value"/>
</el-select>
</el-form-item>
</el-row>
<el-row>
<el-form-item v-if="processCompShow==='inputDelayTime'" label="延期时间">
<el-col :span="3">
<el-input v-model="processCompObj.hours">
<template slot="append">小时</template>
</el-input>
</el-col>
<el-col :span="1" style="text-align:center;">—</el-col>
<el-col :span="3">
<el-input v-model="processCompObj.minutes">
<template slot="append">分钟</template>
</el-input>
</el-col>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="处置意见">
<el-input v-model="processForm.remarks" type="textarea"/>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="">
<el-select v-model="commonLanguage" placeholder="请选择常用处理意见" clearable style="width: 400px;" @change="selectCommonLang">
<el-option
v-for="item in commonLanguageList"
:key="item.value"
:label="item.name"
:value="item.name"
/>
</el-select>
</el-form-item>
</el-row>
</el-form>
</div>
</el-row>
<el-row>
<div class="title">数据流转:</div>
<el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" max-height="250" class="table" border>
<el-table-column prop="operationTypeName" label="操作" align="center"/>
<el-table-column prop="deptName" label="单位" align="center"/>
<el-table-column prop="userName" label="人员" align="center"/>
<el-table-column prop="time" label="时间" align="center"/>
<el-table-column prop="remarks" label="意见" align="center"/>
</el-table>
</el-row>
<el-row v-if="showProcess" style="text-align: center;">
<el-button class="button" type="primary" plain @click="submit">提交</el-button>
</el-row>
<el-dialog
:visible.sync="dialogVisible"
:append-to-body="true"
title="位置详情"
>
<arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
</el-dialog>
</div>
</template>
<script>
import _ from 'lodash'
import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
import { getCommonLanguage, getFilingTypeList, getCaseLevelList } from '@/api/coorBusiness/dict'
import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
import ArcGisMapRead from '@/components/Map/arcgisMapRead'
import { radioMap } from './radioMap'
export default {
name: 'CaseDetail',
components: { ArcGisMapRead },
// props: {
// id: {
// type: String,
// default: ''
// },
// row: {
// type: Object,
// default: null
// },
// showProcess: {
// type: Boolean,
// default: true
// },
// showNeedVisit: {
// type: Boolean,
// default: false
// }
// },
data() {
return {
id: '',
showProcess: true,
showNeedVisit: false,
caseDetail: {},
operationKey: '', // 案件处理按钮key
fileIdVerify: [], // 核实照片id
fileIdProcess: [], // 处理照片id
fileIdCheck: [], // 核查照片id
recordList: [], // 流转记录列表
processForm: { // 提交案卷处理表单
processId: '', // 流程实例ID
bizId: '', // 业务表单ID(caseId)
currState: '', // 当前案件状态
changeState: '', // 案件流转后状态
remarks: '', // 审批意见
approvalResult: '' // 审批结果标志
},
commonLanguage: '', // 常用语
commonLanguageList: [], // 常用语列表
processRadioList: [], // 案件处理单选按钮
processCompShow: '', // 案卷处理组件显示
processCompObj: {}, // 案卷处理组件相关对象
dialogVisible: false
}
},
computed: {
isNeedVisit: function() {
return this.caseDetail.isNeedRevisit === 1 ? '需要回访' : '不需要回访'
},
imgurl() {
return process.env.BASE_API + '/static/'
}
},
created() {
this.id = this.$route.query.id
this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
this.initData()
},
methods: {
async initData() {
// 查询案件详情接口
const resDetail = await getCaseDetail(this.id)
this.caseDetail = resDetail.data[0]
// 解析图片id
if (this.caseDetail.fileIdVerify) {
this.fileIdVerify = this.caseDetail.fileIdVerify.split(',')
}
if (this.caseDetail.fileIdProcess) {
this.fileIdProcess = this.caseDetail.fileIdProcess.split(',')
}
if (this.caseDetail.fileIdCheck) {
this.fileIdCheck = this.caseDetail.fileIdCheck.split(',')
}
// 查询常用语列表
const languageRes = await getCommonLanguage()
this.commonLanguageList = languageRes.data
// 查询流转记录接口
this.processForm.processId = this.caseDetail.processId
// const resRecord = historicalRecords(this.processForm.processId)
// this.recordList = resRecord.data
historicalRecords(this.processForm.processId).then(res => {
this.recordList = res.data
})
if (this.showProcess) {
this.initProcess()
}
},
// 初始化案件处理单选键组
async initProcess() {
const res = await nextNodes(this.caseDetail.caseState)
this.processRadioList = res.data
},
/**
* 选择常用语，更新审核意见
*/
selectCommonLang(value) {
this.processForm.remarks = value
},
/**
* 选择大类，更新小类下拉框
*/
async selectCaseType(value) {
const caseTypeDetailRes = await getCaseTypeDetailList(this.caseDetail.eorc, this.processCompObj.caseType) // 小类
this.processCompObj.caseTypeDetailList = caseTypeDetailRes.data
this.processCompObj.caseTypeDetail = caseTypeDetailRes.data[0].id
},
/**
* 选择小类，更新立案标准下拉框
*/
async selectCaseTypeDetail(value) {
const caseTypeTimesRes = await getCaseTypeTimes(this.processCompObj.caseTypeDetail) // 小类
this.processCompObj.caseTypeTimeList = caseTypeTimesRes.data
this.processCompObj.caseTypeTime = caseTypeTimesRes.data[0].id
},
/**
* 案卷等级和立案标准发生改变时，更新hours和minutes
*/
updateHoursAndMins() {
console.log('updateHoursAndMins', this.processCompObj.caseTypeTime)
if (!this.processCompObj.caseLevel) {
this.$message.error('请选择案卷等级')
return
}
if (!this.processCompObj.caseTypeTime) {
this.processCompObj.hours = ''
this.processCompObj.minutes = ''
return
}
const caseTypeTimeObj = _.find(this.processCompObj.caseTypeTimeList, ['id', this.processCompObj.caseTypeTime])
console.log(this.processCompObj.caseTypeTime, caseTypeTimeObj)
const day = parseInt(caseTypeTimeObj.day)
let hours = parseInt(caseTypeTimeObj.hours)
const minutes = parseInt(caseTypeTimeObj.minutes)
if (day) {
switch (this.processCompObj.caseLevel) {
case '1':
hours += day * 7
break
case '2':
hours += day * 24
break
default:
this.$message.error('请选择案卷等级')
}
}
this.processCompObj.hours = hours
this.processCompObj.minutes = minutes
},
setDefaultUserId(radioConfig) { // 注意caseDetail.verifyPersonId和userlist中的id类型要一致
switch (radioConfig.passBack) {
case 'verifyPersonId': { // 原核实人员
this.$set(this.processCompObj, 'taskUserId', this.caseDetail.verifyPersonId)
break
}
case 'processPersonid': { // 原处理人员
this.$set(this.processCompObj, 'taskUserId', this.caseDetail.processPersonid)
break
}
default : {
this.$set(this.processCompObj, 'taskUserId', '')
break
}
}
},
// 选择案卷处理操作
async selectNextOperation() {
console.log(this.operationKey, radioMap[this.operationKey])
const radioConfig = radioMap[this.operationKey]
if (!radioConfig.showComp) {
this.processCompShow = ''
return
}
switch (radioConfig.showComp.split('_')[0]) {
case 'selectUser': { // 选择用户
this.processCompShow = 'selectUser'
const roleTips = radioConfig.showComp.split('_')[1]
const userRes = await getUserList(roleTips)
this.$set(this.processCompObj, 'userList', userRes.data)
// 有默认id的设默认id
this.setDefaultUserId(radioConfig)
break
}
case 'selectDept': { // 选择部门
this.processCompShow = 'selectDept'
const deptRes = await getDeptList()
this.$set(this.processCompObj, 'deptList', deptRes.data)
this.$set(this.processCompObj, 'dispatchDeptId', '')
break
}
case 'selectCaseTime': { // 大类，小类，选择立案标准，可输入时分(立案)
this.processCompShow = 'selectCaseTime'
const caseTypeRes = await getCaseTypeList(this.caseDetail.eorc) // 大类
this.$set(this.processCompObj, 'caseTypeList', caseTypeRes.data)
const defaultCaseType = _.find(this.processCompObj.caseTypeList, ['typeCode', this.caseDetail.casetypeCode])
this.$set(this.processCompObj, 'caseType', defaultCaseType.id)
const caseTypeDetailRes = await getCaseTypeDetailList(this.caseDetail.eorc, this.processCompObj.caseType) // 小类
this.$set(this.processCompObj, 'caseTypeDetailList', caseTypeDetailRes.data)
const defaultCaseTypeDetail = _.find(this.processCompObj.caseTypeDetailList, ['typeDetailCode', this.caseDetail.casetypeDetailCode])
this.$set(this.processCompObj, 'caseTypeDetail', defaultCaseTypeDetail.id)
const caseTypeTimeRes = await getCaseTypeTimes(this.processCompObj.caseTypeDetail) // 立案标准
this.$set(this.processCompObj, 'caseTypeTimeList', caseTypeTimeRes.data)
this.$set(this.processCompObj, 'caseTypeTime', this.caseDetail.casetypesTimeId)
const caseLevelRes = await getCaseLevelList() // 案卷等级
this.$set(this.processCompObj, 'caseLevelList', caseLevelRes.data)
this.$set(this.processCompObj, 'caseLevel', this.caseDetail.caseLevel.toString())
this.$set(this.processCompObj, 'hours', '')
this.$set(this.processCompObj, 'minutes', '')
this.updateHoursAndMins()
break
}
case 'selectFilingType': { // 选择归档类型
this.processCompShow = 'selectFilingType'
const filingTypeRes = await getFilingTypeList()
this.$set(this.processCompObj, 'filingTypeList', filingTypeRes.data)
this.$set(this.processCompObj, 'filingType', '')
break
}
case 'inputDelayTime': { // 输入延期时间
this.processCompShow = 'inputDelayTime'
this.$set(this.processCompObj, 'hours', '')
this.$set(this.processCompObj, 'minutes', '')
break
}
default:
this.processCompShow = ''
break
}
},
// 构建提交表单
buildForm() {
console.log('buildForm', this.operationKey)
// 通用参数
// processId,remarks已有
this.processForm.bizId = this.id
this.processForm.currState = this.caseDetail.caseState
if (!this.operationKey) {
this.$message.error('请选择案卷处理操作类型')
return false
}
const radioObj = _.find(this.processRadioList, ['operationKey', this.operationKey])
this.processForm.changeState = radioObj.nextState
this.processForm.approvalResult = radioObj.approvalResult
// 其他参数
const radioConfig = radioMap[this.operationKey]
// 1. taskUserId
if ((radioConfig.showComp && radioConfig.showComp.indexOf('selectUser') > -1) || radioConfig.passBack === 'verifyPersonId' || radioConfig.passBack === 'processPersonid') {
if (!this.processCompObj.taskUserId) {
this.$message.error('请选择人员')
return false
}
this.processForm.taskUserId = this.processCompObj.taskUserId
}
// 2. dispatchDeptId
if (radioConfig.showComp === 'selectDept') {
if (!this.processCompObj.dispatchDeptId) {
this.$message.error('请选择部门')
return false
}
this.processForm.dispatchDeptId = this.processCompObj.dispatchDeptId
} else if (radioConfig.passBack === 'onedeptid') {
this.processForm.dispatchDeptId = this.caseDetail.onedeptid
}
// 3. isNeedRevisit
if (radioConfig.passBack === 'isNeedRevisit') {
this.processForm.isNeedRevisit = this.caseDetail.isNeedRevisit
}
// 4. hours,minutes
if (radioConfig.showComp === 'selectCaseTime' || radioConfig.showComp === 'inputDelayTime') {
if (!this.numberIsNull(this.processCompObj.hours) || !this.numberIsNull(this.processCompObj.minutes)) {
this.$message.error('请输入时间')
return false
}
this.processForm.hours = this.processCompObj.hours
this.processForm.minutes = this.processCompObj.minutes
}
// caseLevel,caseTypeTimes,caseType,caseTypeDetail（立案）
if (radioConfig.showComp === 'selectCaseTime') {
if (!this.processCompObj.caseLevel) {
this.$message.error('请选择案卷等级')
return false
}
this.processForm.caseLevel = this.processCompObj.caseLevel
// casetypeCode
if (!this.processCompObj.caseType) {
this.$message.error('请选择案卷大类')
return false
}
const caseType = _.find(this.processCompObj.caseTypeList, ['id', this.processCompObj.caseType])
this.processForm.caseType = caseType.typeCode
// casetypeDetailCode
if (!this.processCompObj.caseTypeDetail) {
this.$message.error('请选择案卷小类')
return false
}
const caseTypeDetail = _.find(this.processCompObj.caseTypeDetailList, ['id', this.processCompObj.caseTypeDetail])
this.processForm.casetypeDetailCode = caseTypeDetail.typeDetailCode
// casetypesTimeId
if (!this.processCompObj.caseTypeTime) {
this.$message.error('请选择立案标准')
return false
}
this.processForm.casetypesTimeId = this.processCompObj.caseTypeTime
}
// 5. filingType
if (radioConfig.showComp === 'selectFilingType') {
if (!this.processCompObj.filingType) {
this.$message.error('请选择归档类型')
return false
}
this.processForm.filingType = this.processCompObj.filingType
}
console.log(this.processForm)
return true
},
numberIsNull(value) { // 判断数值是否为空
if (value || value === 0) {
return true
} else {
return false
}
},
submit() {
console.log('submit')
this.$confirm('确定提交案件处理吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 点击“确定”后的操作
const isBuild = this.buildForm()
if (!isBuild) {
return
}
completeCaseTask(this.processForm).then(response => {
if (response.code === 200) {
this.$message.success('提交成功')
// this.$emit('submitProcess', this.caseDetail.caseid)
this.showProcess = false
this.initData()
} else {
this.$message.error('提交失败')
}
})
}).catch(() => {
// 点击“取消”后的操作
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$tableTitleHeight:46px;
.table-title{
background-color:rgba(243, 243, 243, 1);
height: 46px;
.title-header{
line-height:$tableTitleHeight;
color: #606266;
font-size: 15px;
i{
margin-left: 5px;
margin-right: 5px;
}
}
}
.edit_btns{
.edit_btn{
float:right;
margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
}
}
.app-container{
// padding-top: 50px;
margin-bottom: 20px;
}
.form{
margin: 20px;
// margin-left: 20px;
// margin-right: 20px;
}
.table{
margin: 20px;
width: 98%;
// max-height: 250px;
}
.title{
margin-left: 38px;
font-size: 14px;
font-weight: bold;
}
.button{
margin-bottom: 30px;
}
.image-container {
margin-left: 40px;
}
.el-image.image {
width: 300px;
height: 300px;
margin-right: 20px;
}
</style>
