331 lines
9.5 KiB
Vue
331 lines
9.5 KiB
Vue
<template>
|
|
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
|
<div :class="`${prefixCls}`">
|
|
<div :class="`${prefixCls}-header`">
|
|
<div></div>
|
|
<div class="flex">
|
|
<a-tree-select
|
|
v-if="selectOptions1.length > 0"
|
|
v-model:value="selectValues1"
|
|
show-search
|
|
style="width: 230px"
|
|
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
|
placeholder="查询地区"
|
|
allow-clear
|
|
:tree-data="selectOptions1"
|
|
:field-names="{
|
|
children: 'children',
|
|
value: 'id',
|
|
label: 'name',
|
|
}"
|
|
tree-node-filter-prop="name"
|
|
@change="areaChange"
|
|
/>
|
|
<a-select
|
|
ref="select"
|
|
v-model:value="is_illegal"
|
|
style="width: 150px"
|
|
class="ml-3"
|
|
allowClear
|
|
:options="selectOptions2"
|
|
placeholder="现场状况"
|
|
@change="reload1"
|
|
/>
|
|
<a-select
|
|
ref="select"
|
|
v-model:value="is_drawback"
|
|
:options="selectOptions3"
|
|
style="width: 150px"
|
|
class="ml-3"
|
|
allowClear
|
|
placeholder="新增退回"
|
|
@change="reload1"
|
|
/>
|
|
<a-input
|
|
style="width: 150px"
|
|
class="ml-3"
|
|
v-model:value="searchCaseNo"
|
|
placeholder="案件编号"
|
|
/>
|
|
<a-input
|
|
style="width: 150px"
|
|
class="ml-3"
|
|
v-model:value="searchKey"
|
|
placeholder="请输入"
|
|
/>
|
|
<a-button class="ml-3" :icon="h(SearchOutlined)" @click="reload1">搜索</a-button>
|
|
<a-button type="success" class="ml-3" :icon="h(DownloadOutlined)">导出</a-button>
|
|
</div>
|
|
</div>
|
|
<div :class="`${prefixCls}-content`">
|
|
<div :class="`${prefixCls}-content-tabbox`">
|
|
<div :class="`${prefixCls}-content-tabbox-left`">
|
|
<BasicTable @register="registerTable" v-if="!caseDetailVisible">
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'action'">
|
|
<TableAction
|
|
:actions="[
|
|
{
|
|
label: '核验',
|
|
onClick: () => {
|
|
handleAuditing(record);
|
|
},
|
|
},
|
|
]"
|
|
/>
|
|
</template>
|
|
</template>
|
|
</BasicTable>
|
|
<div :class="`${prefixCls}-content-tabbox-left-collenction`" v-if="caseDetailVisible">
|
|
<div :class="`${prefixCls}-content-tabbox-left-collenction-header`">
|
|
<div>案件详情</div>
|
|
<div
|
|
:class="`${prefixCls}-content-tabbox-left-collenction-header-close`"
|
|
@click="closeCaseDetail"
|
|
><CloseOutlined
|
|
/></div>
|
|
</div>
|
|
<div :class="`${prefixCls}-content-tabbox-left-collenction-box`">
|
|
<CaseView :caseId="selectRowDetail.id" :mapShow="false"></CaseView>
|
|
</div>
|
|
<div :class="`${prefixCls}-content-tabbox-left-collenction-footer`">
|
|
<a-input
|
|
size="mini"
|
|
class="ml-3"
|
|
v-model:value="caseBackReason"
|
|
placeholder="退回原因"
|
|
/>
|
|
<a-button type="error" class="ml-3" @click="handleCaseBack"> 退回 </a-button>
|
|
<a-button type="primary" class="ml-3" @click="handlePassForm"> 核验 </a-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div :class="`${prefixCls}-content-mapbox`">
|
|
<MapDetail :ruleForm="selectRowDetail"></MapDetail>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PageWrapper>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { onMounted, ref, h } from 'vue';
|
|
import { SearchOutlined, DownloadOutlined, CloseOutlined } from '@ant-design/icons-vue';
|
|
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
|
import { PageWrapper } from '@/components/Page';
|
|
import {
|
|
getTableListData,
|
|
passVerificatCase,
|
|
backVerificcatCase,
|
|
} from '@/api/summaryverification/index';
|
|
import { getDeptList } from '@/api/demo/system';
|
|
import { columns } from './index.data';
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
|
import { CaseView } from '@/views/demo/monitor/index';
|
|
import MapDetail from './mapDetail.vue';
|
|
|
|
const { createMessage } = useMessage();
|
|
const caseBackReason: any = ref();
|
|
const caseDetailVisible: any = ref(false);
|
|
const selectRowDetail: any = ref({});
|
|
const selectValues1: any = ref();
|
|
const selectOptions1: any = ref([]);
|
|
const searchKey: any = ref();
|
|
const searchCaseNo: any = ref();
|
|
const countyid: any = ref();
|
|
const streetid: any = ref();
|
|
const communityid: any = ref();
|
|
const is_illegal: any = ref();
|
|
const selectOptions2: any = ref([
|
|
{ label: '合法', value: 0 },
|
|
{ label: '违法', value: 1 },
|
|
{ label: '伪变化', value: 2 },
|
|
]);
|
|
const is_drawback: any = ref();
|
|
const selectOptions3: any = ref([
|
|
{ label: '新增', value: 0 },
|
|
{ label: '退回', value: 1 },
|
|
]);
|
|
|
|
const [registerTable, { reload: reload1 }] = useTable({
|
|
title: '',
|
|
api: getTableListData,
|
|
columns,
|
|
rowKey: 'id',
|
|
formConfig: {
|
|
labelWidth: 120,
|
|
},
|
|
// rowSelection: {
|
|
// type: 'checkbox',
|
|
// },
|
|
useSearchForm: false,
|
|
showTableSetting: false,
|
|
bordered: true,
|
|
actionColumn: {
|
|
width: 100,
|
|
title: '操作',
|
|
dataIndex: 'action',
|
|
},
|
|
beforeFetch: (data) => {
|
|
let temp = {
|
|
page: data.page,
|
|
limit: data.limit,
|
|
is_illegal: is_illegal.value,
|
|
is_drawback: is_drawback.value,
|
|
countyid: countyid.value,
|
|
streetid: streetid.value,
|
|
communityid: communityid.value,
|
|
case_no: searchCaseNo.value,
|
|
key: searchKey.value,
|
|
};
|
|
return temp;
|
|
},
|
|
handleSearchInfoFn(info) {
|
|
return info;
|
|
},
|
|
});
|
|
function closeCaseDetail() {
|
|
caseDetailVisible.value = false;
|
|
}
|
|
function handleCaseBack() {
|
|
if (!caseBackReason.value) {
|
|
createMessage.error('退回原因不能为空');
|
|
return;
|
|
}
|
|
const param = {
|
|
id: selectRowDetail.value.id,
|
|
drawbackReason: caseBackReason.value,
|
|
};
|
|
backVerificcatCase(param).then((res) => {
|
|
if (res) {
|
|
createMessage.success('操作成功');
|
|
reload1();
|
|
caseDetailVisible.value = false;
|
|
} else {
|
|
createMessage.error('此案件未办理，无需退回。');
|
|
}
|
|
});
|
|
}
|
|
function handlePassForm() {
|
|
passVerificatCase([selectRowDetail.value.id]).then((res) => {
|
|
if (res) {
|
|
caseDetailVisible.value = false;
|
|
createMessage.success('操作成功');
|
|
} else {
|
|
createMessage.error('操作失败');
|
|
}
|
|
});
|
|
}
|
|
function areaChange(items) {
|
|
countyid.value = null;
|
|
streetid.value = null;
|
|
communityid.value = null;
|
|
if (items && JSON.stringify(items).length == 6) {
|
|
countyid.value = items;
|
|
}
|
|
if (items && JSON.stringify(items).length == 9) {
|
|
streetid.value = items;
|
|
}
|
|
if (items && JSON.stringify(items).length == 12) {
|
|
communityid.value = items;
|
|
}
|
|
reload1();
|
|
}
|
|
function handleAuditing(record) {
|
|
console.log('record', record);
|
|
const formData = record;
|
|
formData.homeAddress =
|
|
record.countyname + record.streetname + record.communityname + record.address;
|
|
formData.lngLat = record.lng + ' , ' + record.lat;
|
|
selectRowDetail.value = record;
|
|
caseDetailVisible.value = true;
|
|
}
|
|
function getOrgList() {
|
|
getDeptList().then((res) => {
|
|
res.forEach((item) => {
|
|
if (item.id == '371300') {
|
|
selectOptions1.value = item.children;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
onMounted(() => {
|
|
getOrgList();
|
|
});
|
|
const prefixCls = 'form-box';
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.form-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
&-header {
|
|
width: 100%;
|
|
padding: 0 10px;
|
|
height: 60px;
|
|
background: #f8f8f8;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
&-content {
|
|
width: 100%;
|
|
height: calc(100% - 60px);
|
|
display: flex;
|
|
|
|
&-tabbox {
|
|
width: 70%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
&-left {
|
|
flex: 1;
|
|
border: 1px solid #eee;
|
|
|
|
&-collenction {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
|
|
&-box {
|
|
height: calc(100% - 110px);
|
|
overflow: auto;
|
|
}
|
|
|
|
&-footer {
|
|
height: 60px;
|
|
background: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
&-header {
|
|
padding: 0 10px;
|
|
height: 50px;
|
|
overflow: auto;
|
|
border-bottom: 1px solid #eee;
|
|
display: flex;
|
|
background: #fff;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
&-close {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-mapbox {
|
|
width: calc(30% - 20px);
|
|
margin: 0 15px 15px 15px;
|
|
border: 1px solid red;
|
|
}
|
|
}
|
|
}
|
|
</style>
|