数字督察一体化平台-前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

728 lines
23 KiB

<script setup>
import {getListData,getDetail,reportedData,upDataTrue} from "@/api/rightsComfort/supervision";
import {getDictLable} from "@/utils/util";
import useCatchStore from "@/stores/modules/catch";
import feedback from "@/utils/feedback";
//字典
const catchStore = useCatchStore();
const dict = catchStore.getDicts(["personType","injurySeverity","formsOfTort","occurrenceStage","investigatingPolice","situation"]);
let InfringerHandleDict = reactive([
{
dictValue:"1",
dictLabel:"刑事案件"
},
{
dictValue:"2",
dictLabel:"行政案件"
},
])
const catchSotre = useCatchStore();
//查询条件
let query = ref({
current: 1,
size: 10,
departBranch:false,
happenTime: []
})
//表格加载
let loading = ref(false);
let editLoading =ref(false)
let list = ref()
let total = ref(0);
//详情数据
const detailData = ref()
//是否显示
let reportedShow = ref(false)
let editShow = ref(false)
//上报表单
const reportedFORM = ref()
const activeName = ref("1");
//初始化数据
const getList = async ()=>{
loading.value=true
const res = await getListData(query.value);
list.value =res.records
total.value=res.total
loading.value=false
}
//重置筛选条件事件
const reset =() =>{
query.value ={
current: 1,
size: 10,
departBranch:false,
applyDate: []
}
query.value.activeName = activeName.value
getList();
}
//tab点击切换分页
const TabsClick =(val)=>{
activeName.value = val.props.name;
}
//获取数据详情,打开上报
const showReportedFun =async (row) =>{
detailData.value = await getDetail(row.rpcId);
if(detailData.value){
reportedShow.value=true;
}
}
//获取详情,打开详情
const showDetail = async (row)=>{
//获取数据
detailData.value = await getDetail(row.rpcId);
if(detailData.value){
editShow.value=true
}
}
//查否按钮
const isTrueFun = async (row)=>{
console.log('row-data',row)
console.log('caseName',row.caseName)
await feedback.confirm(`是否将${row.caseName || ''}维权案件数据移除至“无效维权”列表`);
row.verified = "1";
upDataTrue(row).then((res)=>{
getList();
})
}
//恢复数据
const recoverFun = async (row) => {
await feedback.confirm(`是否将${row.caseName || ''}维权案件数据恢复至“维权督办”列表`)
row.verified = "0";
upDataTrue(row).then((res)=>{
getList();
})
}
//上报数据
const handleSumbit = async ()=>{
await reportedFORM.value.validate();
const res = await reportedData(detailData.value);
reportedShow.value=false;
}
//受伤程度
const changeSeverity =(val,index)=>{
let injurySeverityName = dict.injurySeverity.find(s=>s.dictValue == val).dictLabel;
detailData.value.rpcApplyPeoples[index].injurySeverityName = injurySeverityName;
}
const closeDialog =()=>{
getList()
}
onMounted(()=>{
query.value.activeName = "1";
getList();
})
//检测tab分页,进行数据查询
watch(()=>activeName,()=>{
query.value.activeName = activeName.value;
getList()
},{deep:true})
</script>
<template>
<div class="container">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="TabsClick">
<el-tab-pane label="维权督办" name="1"></el-tab-pane>
<el-tab-pane label="无效维权" name="2"></el-tab-pane>
</el-tabs>
<header>
<el-form>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="案件名称">
<el-input placeholder="请输入案件名称"
v-model="query.caseName"/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="案件管辖单位">
<depart-tree-select
v-model="query.departId"
placeholder="请选择案件管辖单位"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="发案时间">
<date-time-range-picker-ext
v-model="query.happenTime"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="案件编号">
<el-input placeholder="请输入案件编号" v-model="query.caseNumber"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="案件性质">
<el-select
v-model="query.caseType"
clearable>
<el-option
v-for="(item,key) in InfringerHandleDict"
:key="key"
:value="item.dictValue"
:label="item.dictLabel"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6" :offset="12">
<div class="flex end ">
<div>
<el-button type="primary" @click="getList">
<template #icon><icon name="el-icon-Search"/></template>
查询
</el-button>
<el-button @click="reset">重置</el-button>
</div>
</div>
</el-col>
</el-row>
</el-form>
</header>
<main>
<div class="table-container" v-loading="loading">
<el-table
:data="list"
ref="tableRef"
style="width: 100%"
>
<el-table-column type="selection" width="55"/>
<el-table-column label="案件管辖单位" prop="departName" width="160" />
<el-table-column label="案件编号" prop="caseNumber" width="200" />
<el-table-column label="案件名称" prop="caseName" width="100"/>
<el-table-column label="发案时间" prop="happenTime" width="160"/>
<el-table-column label="简要案情" prop="factReason" width="200" show-overflow-tooltip></el-table-column>
<el-table-column label="案件性质" prop="" width="120">
<template #default="{row}">
{{row.caseType =='1'?'刑事案件':'民事案件'}}
</template>
</el-table-column>
<el-table-column label="案件类别" prop="caseCategory" />
<el-table-column label="操作" min-width="200">
<template #default="{ row }">
<el-button link type="primary" v-if="row.verified === '0' " @click="showReportedFun(row)" >维权上报</el-button>
<el-button link type="danger" v-if="row.verified === '0' " @click="isTrueFun(row)">无效维权</el-button>
<el-button link type="primary" @click="showDetail(row)" >查看详情</el-button>
<el-button link type="primary" v-if="row.verified === '1' || activeName === '2'" @click="recoverFun(row)">恢复数据</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="flex end mt-8">
<el-pagination
@size-change="getList"
@current-change="getList"
:page-sizes="[10, 20, 50]"
v-model:page-size="query.size"
v-model:current-page="query.current"
layout="total, sizes, prev, pager, next"
:total="total"
>
</el-pagination>
</div>
</main>
说明:维权督办,展示执法办案系统相关维权案件,由各单位上报维权至市局。
</div>
<el-dialog v-model="reportedShow" width="900px" title="维权上报" @close="closeDialog">
<el-form :model="detailData" ref="reportedFORM" label-width="148">
<el-row>
<el-col :span="12">
<el-form-item
label="案件管辖公安机关">
<depart-tree-select
v-model="detailData.rpcApplyVo.departId"
placeholder="请选择案件管辖单位"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="案件名称">
<el-input disabled v-model="detailData.rpcApplyVo.caseName" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
label="案件编号">
<el-input disabled v-model="detailData.rpcApplyVo.caseNumber" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="案发时间">
<el-date-picker
disabled style="width:100%" v-model="detailData.rpcApplyVo.happenTime"></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item
label="简要案情">
<el-input disabled type="textarea" :row="3" v-model="detailData.rpcApplyVo.factReason"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
prop="rpcApplyVo.incidentLinkName"
:rules="{
required: true,
message: '请输入案发环节',
trigger: ['blur'],
}"
label="案发环节">
<el-select v-model="detailData.rpcApplyVo.incidentLinkName">
<el-option v-for="(item,i) in dict.occurrenceStage"
:key="key"
:value="item.dictValue"
:label="item.dictLabel"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
prop="rpcApplyVo.policeJob"
:rules="{
required: true,
message: '请选择案发警种',
trigger: ['blur'],
}"
label="案发警种">
<el-select
v-model="detailData.rpcApplyVo.policeJob" >
<el-option v-for="(item,key) in dict.investigatingPolice"
:key="key"
:value="item.dictValue"
:label="item.dictLabel"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
prop="rpcApplyVo.caseType"
:rules="{
required: true,
message: '请选择案件类别',
trigger: ['blur'],
}"
label="案件类别">
<el-select v-model="detailData.rpcApplyVo.caseType" >
<el-option v-for="(item,i) in InfringerHandleDict" :value="item.dictValue" :label="item.dictLabel" :key="i"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="案件报送情况">
<el-input v-model="detailData.rpcApplyVo.caseSubmission" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="变更强制措施报送情况" >
<el-input v-model="detailData.rpcApplyVo.changeMandate"/>
</el-form-item>
</el-col>
</el-row>
<!-- 被侵权人-->
<div v-if="detailData.rpcApplyPeoples.length !== 0" >
<hr color="#cccdd1" style="height: 1px;border: 0px"/>
<div class="flex v-center" style="height:20px;">
<h5>受害人信息</h5>
</div>
<div v-for="(people,index) in detailData.rpcApplyPeoples">
<div class="flex v-center" style="height:30px;">
<h5>受害人{{index + 1}}</h5>
</div>
<el-row>
<el-col :span="12">
<el-form-item
label="姓名">
<el-input disabled v-model="people.empName"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="警号">
<el-input disabled v-model="people.empNo"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
label="身份证号">
<el-input disabled v-model="people.idCode"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="性别">
<el-input disabled v-model="people.gender"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
:prop="`rpcApplyPeoples[${index}].empType`"
:rules="{
required: true,
message: '请输入人员类型',
trigger: ['blur'],
}"
label="人员类型">
<el-select v-model="people.empType">
<el-option teleported="true" v-for="(item,key) in dict.personType"
:key="key"
:value="item.dictValue"
:label="item.dictLabel"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
:prop="`rpcApplyPeoples[${index}].injurySeverity`"
:rules="{
required: true,
message: '请输入受伤程度',
trigger: ['blur'],
}"
label="受伤程度">
<el-select v-model="people.injurySeverity" @change="(s)=>changeSeverity(s,index)">
<el-option v-for="(item,key) in dict.injurySeverity"
:key="key"
:value="item.dictValue"
:label="item.dictLabel"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
:prop="`rpcApplyPeoples[${index}].formsOfTort`"
:rules="{
required: true,
message: '请输入侵权形式',
trigger: ['blur'],
}"
label="侵权形式">
<el-select v-model="people.formsOfTort">
<el-option v-for="(item,key) in dict.formsOfTort"
:key="key"
:value="item.dictValue"
:label="item.dictLabel"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
<!--嫌疑人-->
<div v-if="detailData.rpcInfringerResults.length !== 0">
<hr color="#cccdd1" style="height: 1px;border: 0px"/>
<div class="flex v-center" style="height:20px;">
<h5>嫌疑人信息</h5>
</div>
<div v-for="(infringer,key) in detailData.rpcInfringerResults">
<div class="flex v-center" style="height:30px;">
<h5>嫌疑人{{key + 1}}</h5>
</div>
<el-row>
<el-col :span="12">
<el-form-item label="姓名"
:prop="`rpcInfringerResults[${key}].tortName`"
>
<el-input disabled v-model="infringer.tortName"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
:prop="`rpcInfringerResults[${key}].idCode`"
label="身份证号">
<el-input disabled
v-model="infringer.idCode"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
:prop="`rpcInfringerResults[${key}].gender`"
label="性别">
<el-input disabled
v-model="infringer.gender"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
:prop="`rpcInfringerResults[${key}].defendHandleWayName`"
:rules="{
required: true,
message: '请输入打击处理情况',
trigger: ['blur'],
}"
label="打击处理情况">
<el-select v-model="infringer.defendHandleWayName">
<el-option v-for="(item,key) in dict.situation"
:key="key"
:value="item.dictValue"
:label="item.dictLabel"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
</el-form>
<footer class="flex end">
<el-button @click="reportedShow = false" size="large">取消</el-button>
<el-button type="primary" @click="handleSumbit" size="large"
>确定
</el-button>
</footer>
</el-dialog>
<el-dialog v-model="editShow" width="900px" title="维权详情">
<el-form :model="detailData" ref="reportedFORM" label-width="148">
<el-row>
<el-col :span="12">
<el-form-item
label="案件管辖公安机关">
{{detailData.rpcApplyVo.departName}}
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="案件名称">
{{detailData.rpcApplyVo.caseName}}
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
label="案件编号">
{{detailData.rpcApplyVo.caseNumber}}
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="案发时间">
{{detailData.rpcApplyVo.happenTime}}
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item
label="简要案情">
{{detailData.rpcApplyVo.factReason}}
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
label="案发环节">
{{ getDictLable(
dict.occurrenceStage,
detailData.rpcApplyVo.incidentLinkName
) }}
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="案发警种">
{{ getDictLable(
dict.investigatingPolice,
detailData.rpcApplyVo.policeJob
) }}
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
label="案件类别">
{{detailData.rpcApplyVo.infringerHandle}}
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="案件报送情况">
{{detailData.rpcApplyVo.caseSubmission}}
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="变更强制措施报送情况" >
{{detailData.rpcApplyVo.changeMandate}}
</el-form-item>
</el-col>
</el-row>
<!-- 被侵权人-->
<div v-if="detailData.rpcApplyPeoples.length !== 0" >
<hr color="#cccdd1" style="height: 1px;border: 0px"/>
<div class="flex v-center" style="height:20px;">
<h5>受害人信息</h5>
</div>
<div v-for="(people,index) in detailData.rpcApplyPeoples">
<div class="flex v-center" style="height:30px;">
<h5>受害人{{index + 1}}</h5>
</div>
<el-row>
<el-col :span="12">
<el-form-item
label="姓名">
{{people.empName}}
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="警号">
{{people.empNo}}
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
label="身份证号">
{{people.idCode}}
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="性别">
{{people.gender}}
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="人员类型">
{{ getDictLable(
dict.personType,
people.empType
) }}
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="受伤程度">
{{ getDictLable(
dict.injurySeverity,
people.injurySeverity
) }}
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="侵权形式">
{{getDictLable(
dict.formsOfTort,
people.formsOfTort
)}}
</el-form-item>
</el-col>
</el-row>
</div>
</div>
<!--嫌疑人-->
<div v-if="detailData.rpcInfringerResults.length !== 0">
<hr color="#cccdd1" style="height: 1px;border: 0px"/>
<div class="flex v-center" style="height:20px;">
<h5>嫌疑人信息</h5>
</div>
<div v-for="(infringer,key) in detailData.rpcInfringerResults">
<div class="flex v-center" style="height:30px;">
<h5>嫌疑人{{key + 1}}</h5>
</div>
<el-row>
<el-col :span="12">
<el-form-item label="姓名">
{{infringer.tortName}}
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="身份证号">
{{infringer.idCode}}
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="性别">
{{infringer.gender}}
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="打击处理情况">
{{ getDictLable(
dict.situation,
people.injurySeverity
) }}
</el-form-item>
</el-col>
</el-row>
</div>
</div>
</el-form>
</el-dialog>
</template>
<style scoped lang="scss">
</style>