494 lines
14 KiB
Vue
494 lines
14 KiB
Vue
<template>
|
|
<div>
|
|
<BasicTable @register="registerTable" :searchInfo="searchInfo">
|
|
<template #toolbar>
|
|
<PermissionBtn @btn-event="onBtnClicked" />
|
|
</template>
|
|
|
|
<template #bodyCell="{ column, record }">
|
|
|
|
<!-- 无人机发现数量 -->
|
|
<template v-if="column.key === 'allCount'">
|
|
<a @click="handlePreViewData(column,record)">{{record.allCount}}</a>
|
|
</template>
|
|
|
|
<!-- 完成外业核查数量 -->
|
|
<template v-if="column.key === 'handleStatus'">
|
|
<a @click="handlePreViewData(column,record)">{{record.handleStatus}}</a>
|
|
</template>
|
|
|
|
<!-- 24H内为核查 -->
|
|
<template v-if="column.key === 'notDealHour24'">
|
|
<a @click="handlePreViewData(column,record)">{{record.notDealHour24}}</a>
|
|
</template>
|
|
|
|
<!-- 房屋翻新 -->
|
|
<template v-if="column.key === 'typeFanxinCount'">
|
|
<a @click="handlePreViewData(column,record)">{{record.typeFanxinCount}}</a>
|
|
</template>
|
|
|
|
<!-- 房屋加盖 -->
|
|
<template v-if="column.key === 'typeJiagaiCount'">
|
|
<a @click="handlePreViewData(column,record)">{{record.typeJiagaiCount}}</a>
|
|
</template>
|
|
|
|
<!-- 房屋翻建 -->
|
|
<template v-if="column.key === 'typeFanjianCount'">
|
|
<a @click="handlePreViewData(column,record)">{{record.typeFanjianCount}}</a>
|
|
</template>
|
|
|
|
<!-- 存量建设 -->
|
|
<template v-if="column.key === 'typeCunliangCount'">
|
|
<a @click="handlePreViewData(column,record)">{{record.typeCunliangCount}}</a>
|
|
</template>
|
|
|
|
<!-- 推土 -->
|
|
<template v-if="column.key === 'typeTuituCount'">
|
|
<a @click="handlePreViewData(column,record)">{{record.typeTuituCount}}</a>
|
|
</template>
|
|
|
|
<!-- 其他 -->
|
|
<!-- <template v-if="column.key === 'typeOtherCount'">
|
|
<a @click="handlePreViewData(column,record)">{{record.typeOtherCount}}</a>
|
|
</template> -->
|
|
|
|
<!-- 合法 -->
|
|
<template v-if="column.key === 'illegal0Count'">
|
|
<a @click="handlePreViewData(column,record)">{{record.illegal0Count}}</a>
|
|
</template>
|
|
<!-- 违法 -->
|
|
<template v-if="column.key === 'illegal1Count'">
|
|
<a @click="handlePreViewData(column,record)">{{record.illegal1Count}}</a>
|
|
</template>
|
|
<!-- 伪变化 -->
|
|
<template v-if="column.key === 'illegal2Count'">
|
|
<a @click="handlePreViewData(column,record)">{{record.illegal2Count}}</a>
|
|
</template>
|
|
<!-- 外业核实后确定违法数量 -->
|
|
<template v-if="column.key === 'illegal1Count1'">
|
|
<a @click="handlePreViewData(column,record)">{{record.illegal1Count}}</a>
|
|
</template>
|
|
<!-- 违法面积 -->
|
|
<!-- <template v-if="column.key === 'illegalHandleAreaList'">
|
|
<a @click="handlePreViewData(column,record)">{{record.illegalHandleAreaList}}</a>
|
|
</template> -->
|
|
<!-- 整改销号数 -->
|
|
<template v-if="column.key === 'illegalHandle2Status'">
|
|
<a @click="handlePreViewData(column,record)">{{record.illegalHandle2Status}}</a>
|
|
</template>
|
|
<!-- 销号面积 -->
|
|
<!-- <template v-if="column.key === 'illegalHandle2AreaList'">
|
|
<a @click="handlePreViewData(column,record)">{{record.illegalHandle2AreaList}}</a>
|
|
</template> -->
|
|
<!-- 尚未整改宗数 -->
|
|
<template v-if="column.key === 'illegalHandle01Status'">
|
|
<a @click="handlePreViewData(column,record)">{{record.illegalHandle01Status}}</a>
|
|
</template>
|
|
<!-- 尚未整改面积 -->
|
|
<!-- <template v-if="column.key === 'illegalHandle01AreaList'">
|
|
<a @click="handlePreViewData(column,record)">{{record.illegalHandle01AreaList}}</a>
|
|
</template> -->
|
|
<!-- 3日内未整改完成 -->
|
|
<template v-if="column.key === 'notComplete3'">
|
|
<a @click="handlePreViewData(column,record)">{{record.notComplete3}}</a>
|
|
</template>
|
|
<!-- 7日内未整改完成 -->
|
|
<template v-if="column.key === 'notComplete7'">
|
|
<a @click="handlePreViewData(column,record)">{{record.notComplete7}}</a>
|
|
</template>
|
|
<!-- 30日内未整改完成 -->
|
|
<template v-if="column.key === 'notComplete30'">
|
|
<a @click="handlePreViewData(column,record)">{{record.notComplete30}}</a>
|
|
</template>
|
|
<!-- 30日以上未整改完成 -->
|
|
<template v-if="column.key === 'notComplete30More'">
|
|
<a @click="handlePreViewData(column,record)">{{record.notComplete30More}}</a>
|
|
</template>
|
|
|
|
</template>
|
|
</BasicTable>
|
|
|
|
<div class="data-preview-container" v-if="showRecordList">
|
|
<a-tabs v-model:activeKey="activeKey" hide-add type="editable-card" @edit="onEdit" @change="handleTabChange">
|
|
<a-tab-pane v-for="(pane,index) in tablist" :key="index.toString()" :tab="pane.streetname+'-'+pane.label" :closable="pane.closable">
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
<RecordList :tablist="tablist" :currentListQuery="currentListQuery.listQuery"></RecordList>
|
|
|
|
<div class="data-preview-container-option">
|
|
|
|
<div @click="exportList()">
|
|
<CloudDownloadOutlined />
|
|
</div>
|
|
<div @click="handleCloseRecordList()">
|
|
<MinusOutlined />
|
|
</div>
|
|
<div @click="handleCloseAllRecordList()">
|
|
<CloseOutlined />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref,reactive } from 'vue';
|
|
|
|
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
|
import { getStatisticalList, deleteRole } from '@/api/demo/system';
|
|
|
|
// import {DataPreivew} from './RecordList.vue'
|
|
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
|
import { useModal } from '@/components/Modal';
|
|
import { RecordList } from './page';
|
|
|
|
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
|
|
|
import { columns, columnsDataPreview,searchFormSchema } from './statistical.data';
|
|
import {MinusOutlined,CloseOutlined,CloudDownloadOutlined} from '@ant-design/icons-vue'
|
|
|
|
defineOptions({ name: 'RoleManagement' });
|
|
let activeKey = ref('0')
|
|
|
|
const { createConfirm, createMessage } = useMessage();
|
|
const [registerModal, { openModal: openRoleModal }] = useModal();
|
|
const [registerModulesModal, { openModal: openModulesModal }] = useModal();
|
|
const [registerAccountModal, { openModal: openAccountModal }] = useModal();
|
|
const searchInfo = reactive<Recordable>({});
|
|
|
|
const showRecordList = ref<boolean>(false);
|
|
|
|
const panes = reactive<{ title: string; content: string; key: string; closable?: boolean}[]>([])
|
|
const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
|
|
// 表格名称
|
|
title: '统计报表',
|
|
// 获取数据的接口
|
|
api: getStatisticalList,
|
|
// 表单列信息 BasicColumn[]
|
|
columns,
|
|
rowKey: 'id',
|
|
formConfig: {
|
|
labelWidth: 120,
|
|
schemas: searchFormSchema,
|
|
},
|
|
// 使用搜索表单
|
|
useSearchForm: true,
|
|
// 显示表格设置工具
|
|
showTableSetting: true,
|
|
// 是否显示表格边框
|
|
bordered: true,
|
|
// 序号列
|
|
showIndexColumn: false,
|
|
// 勾选列
|
|
rowSelection: false,
|
|
// 搜索
|
|
handleSearchInfoFn(info) {
|
|
return info;
|
|
},
|
|
});
|
|
|
|
|
|
const [registerTableDataPreview,{ reloadDataPreview, getSelectRowsDataPreview, clearSelectedRowKeysDataPreview }] = useTable({
|
|
// 表格名称
|
|
title: '',
|
|
// 获取数据的接口
|
|
api: getStatisticalList,
|
|
// 表单列信息 BasicColumn[]
|
|
columnsDataPreview,
|
|
rowKey: 'id',
|
|
formConfig: {
|
|
labelWidth: 120,
|
|
// schemas: searchFormSchema,
|
|
},
|
|
// 使用搜索表单
|
|
useSearchForm: false,
|
|
// 显示表格设置工具
|
|
showTableSetting: false,
|
|
// 是否显示表格边框
|
|
bordered: true,
|
|
// 序号列
|
|
showIndexColumn: false,
|
|
// 勾选列
|
|
rowSelection: false,
|
|
// 搜索
|
|
handleSearchInfoFn(info) {
|
|
return info;
|
|
},
|
|
});
|
|
function handleCloseRecordList(){
|
|
showRecordList.value = false;
|
|
}
|
|
function exportList(){
|
|
createMessage.success("接口待对接！")
|
|
}
|
|
|
|
function handleCreate() {
|
|
openRoleModal(true, {
|
|
isUpdate: false,
|
|
});
|
|
}
|
|
function viewAccount(record: Recordable) {
|
|
openAccountModal(true, {
|
|
record,
|
|
});
|
|
}
|
|
function onEdit(targetKey: string){
|
|
tablist.splice(parseInt(targetKey),1);
|
|
if(tablist.length==0){
|
|
showRecordList.value = false;
|
|
}
|
|
if(parseInt(targetKey)>1){
|
|
activeKey.value = (parseInt(targetKey)-1).toString();
|
|
|
|
}else{
|
|
activeKey.value = '0';
|
|
}
|
|
currentListQuery.listQuery = tablist[activeKey.value].listQuery
|
|
}
|
|
|
|
let currentListQuery = reactive({listQuery:{}});
|
|
|
|
function handleTabChange(e){
|
|
currentListQuery.listQuery = tablist[e].listQuery
|
|
|
|
console.log(currentListQuery)
|
|
}
|
|
|
|
|
|
// function remvoeTab(){
|
|
|
|
// }
|
|
|
|
const tablist = reactive<{streetname:string;label:string;listQuery:searchListSchema}[]>([])
|
|
// 查询条件
|
|
interface searchListSchema{
|
|
is_intact?:number;
|
|
streetid?:string;
|
|
identification_start_time?:string;
|
|
identification_end_time?:string;
|
|
page?:number;
|
|
limit?:number;
|
|
is_deal?:number;
|
|
is_not_deal_hour24?:number;
|
|
is_drawback?:number;
|
|
typeid?:number;
|
|
is_illegal?:number;
|
|
is_complete?:number;
|
|
handle_status_id?:number;
|
|
out_time_flag?:number;
|
|
}
|
|
|
|
|
|
|
|
// const searchForm = reactive<searchListSchema>({
|
|
|
|
// })
|
|
|
|
function handlePreViewData(column,record:Recordable){
|
|
|
|
const searchForm = reactive<searchListSchema>({
|
|
streetid:record.streetid,
|
|
identification_start_time:"",
|
|
identification_end_time:"",
|
|
is_intact:1,
|
|
page:1,
|
|
limit:10,
|
|
})
|
|
|
|
switch(column.dataIndex){
|
|
case 'allCount':
|
|
break;
|
|
case 'handleStatus':
|
|
searchForm.is_deal = 1;
|
|
break;
|
|
case 'notDealHour24':
|
|
searchForm.is_not_deal_hour24 = 1;
|
|
searchForm.is_drawback = 0;
|
|
break;
|
|
case 'notDealHour24':
|
|
searchForm.is_not_deal_hour24 = 1;
|
|
searchForm.is_drawback = 0;
|
|
break;
|
|
case 'typeFanxinCount':
|
|
searchForm.typeid = record.typeid
|
|
case 'typeJiagaiCount':
|
|
searchForm.typeid = record.typeid
|
|
case 'typeFanjianCount':
|
|
searchForm.typeid = record.typeid
|
|
case 'typeCunliangCount':
|
|
searchForm.typeid = record.typeid
|
|
case 'typeTuituCount':
|
|
searchForm.typeid = record.typeid
|
|
case 'illegal0Count':
|
|
searchForm.is_illegal = 0;
|
|
searchForm.is_deal = 1;
|
|
break;
|
|
case 'illegal1Count':
|
|
searchForm.is_illegal = 1;
|
|
searchForm.is_deal = 1;
|
|
break;
|
|
case 'illegal2Count':
|
|
searchForm.is_illegal = 2;
|
|
searchForm.is_deal = 1;
|
|
break;
|
|
case 'illegal1Count1':
|
|
searchForm.is_illegal = 1;
|
|
searchForm.is_deal = 1;
|
|
break;
|
|
case 'illegalHandle2Status':
|
|
searchForm.handle_status_id = 1;
|
|
searchForm.is_deal = 1;
|
|
break;
|
|
case 'illegalHandle01Status':
|
|
searchForm.is_illegal = 1;
|
|
searchForm.is_deal = 1;
|
|
searchForm.is_complete = 0;
|
|
break;
|
|
case 'notComplete3':
|
|
searchForm.is_illegal = 1;
|
|
searchForm.is_complete = 0;
|
|
searchForm.out_time_flag = 1;
|
|
break;
|
|
case 'notComplete7':
|
|
searchForm.is_illegal = 1;
|
|
searchForm.is_complete = 0;
|
|
searchForm.out_time_flag = 2;
|
|
break;
|
|
case 'notComplete30':
|
|
searchForm.is_illegal = 1;
|
|
searchForm.is_complete = 0;
|
|
searchForm.out_time_flag = 4;
|
|
break;
|
|
case 'notComplete30More':
|
|
searchForm.is_illegal = 1;
|
|
searchForm.is_complete = 0;
|
|
searchForm.out_time_flag = 5;
|
|
break;
|
|
}
|
|
|
|
let tabItem = {
|
|
streetname:record.streetname,
|
|
label:column.title,
|
|
listQuery:searchForm,
|
|
}
|
|
|
|
tablist.push(tabItem)
|
|
activeKey.value = tablist.length > 1 ? (tablist.length-1).toString() : '0';
|
|
|
|
showRecordList.value = true;
|
|
currentListQuery.listQuery = searchForm
|
|
|
|
}
|
|
function handleCloseAllRecordList(){
|
|
for(let i=0;i<tablist.length;i++){
|
|
tablist.pop();
|
|
}
|
|
showRecordList.value = false;
|
|
|
|
}
|
|
function handleEdit() {
|
|
let rows = getSelectRows();
|
|
if (rows.length == 0) {
|
|
return createMessage.warn('请勾选一个角色进行编辑');
|
|
}
|
|
const record = rows[0];
|
|
openRoleModal(true, {
|
|
record,
|
|
isUpdate: true,
|
|
});
|
|
}
|
|
|
|
async function handleDelete() {
|
|
let rows = getSelectRows();
|
|
if (rows.length == 0) {
|
|
return createMessage.warn('请勾选一个角色进行删除');
|
|
}
|
|
const query = [rows[0].id];
|
|
createConfirm({
|
|
iconType: 'info',
|
|
title: '删除',
|
|
content: '确定要删除当前角色吗',
|
|
onOk: async () => {
|
|
const data = await deleteRole(query);
|
|
if (data) {
|
|
handleSuccess();
|
|
return createMessage.success('删除成功');
|
|
} else {
|
|
return createMessage.error('删除失败');
|
|
}
|
|
},
|
|
});
|
|
}
|
|
|
|
function handlePrint(){
|
|
|
|
}
|
|
|
|
function handleExport(){
|
|
createMessage.success("接口待对接！")
|
|
}
|
|
|
|
function handleSuccess() {
|
|
clearSelectedRowKeys();
|
|
reload();
|
|
reloadDataPreview();
|
|
}
|
|
function onBtnClicked(domId) {
|
|
switch (domId) {
|
|
case 'btnAdd':
|
|
handleCreate();
|
|
break;
|
|
case 'btnEdit':
|
|
handleEdit();
|
|
break;
|
|
case 'btnDelete':
|
|
handleDelete();
|
|
break;
|
|
case 'btnModules':
|
|
let rows = getSelectRows();
|
|
if (rows.length == 0) {
|
|
return createMessage.warn('请勾选一个角色进行编辑');
|
|
}
|
|
const record = rows[0];
|
|
openModulesModal(true, {
|
|
record,
|
|
});
|
|
break;
|
|
case 'btnPrint':
|
|
handlePrint();
|
|
break;
|
|
case 'btnExport':
|
|
handleExport();
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.data-preview-container{
|
|
width:100%;
|
|
height: calc( 100% - 0px);
|
|
position:absolute;
|
|
padding:30px 10px;
|
|
top:0px;
|
|
left:0px;
|
|
background:#fff;
|
|
}
|
|
.data-preview-container-option{
|
|
width:120px;
|
|
height: 40px;
|
|
position:absolute;
|
|
top:30px;
|
|
right:0px;
|
|
}
|
|
.data-preview-container-option div{
|
|
width:40px;
|
|
height:40px;
|
|
line-height:40px;
|
|
float:left;
|
|
text-align: center;
|
|
cursor:pointer;
|
|
}
|
|
</style>
|