Compare commits
2 Commits
933df8e589
...
bf091923b2
Author | SHA1 | Date |
---|---|---|
|
bf091923b2 | 4 months ago |
|
1ef6d33642 | 4 months ago |
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<a-table :columns="columns.col" :data-source="columns.data" size="small" height="500" bordered :pagination="pagination.pagination">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a @click="viewDetail(record)">详情</a>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="registerModal"
|
||||
title="图斑详情"
|
||||
:canFullscreen="false"
|
||||
:defaultFullscreen="true"
|
||||
:showCancelBtn="false"
|
||||
:showOkBtn="false"
|
||||
:draggable="false"
|
||||
>
|
||||
<!-- <CaseView :caseId="caseId"></CaseView> -->
|
||||
</BasicModal>
|
||||
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive,ref,defineProps,watch } from 'vue';
|
||||
import { BasicModal, useModal } from '@/components/Modal';
|
||||
import { getCaseOffenceForSsnyList, getCaseOffenceInfoList } from '@/api/demo/system';
|
||||
const [registerModal, { openModal, setModalProps }] = useModal();
|
||||
|
||||
const props = defineProps<{
|
||||
currentListQuery:Object
|
||||
}>()
|
||||
const caseId = ref('');
|
||||
let columns = reactive({data:[],col:[{
|
||||
title: '项目编号',
|
||||
dataIndex: 'xiangmu_no',
|
||||
},
|
||||
{
|
||||
title: '项目名称',
|
||||
dataIndex: 'xiangmu_name',
|
||||
},
|
||||
{
|
||||
title: '项目用途',
|
||||
dataIndex: 'xiangmu_yt',
|
||||
},
|
||||
{
|
||||
title: '行政区划',
|
||||
dataIndex: 'xingzhengquhua',
|
||||
},{
|
||||
title: '所属街道/乡镇',
|
||||
dataIndex: 'streetname',
|
||||
},{
|
||||
title: '所属社区',
|
||||
dataIndex: 'communityname',
|
||||
},{
|
||||
title: '权利人',
|
||||
dataIndex: 'quanliren',
|
||||
},{
|
||||
title: '操作状态',
|
||||
dataIndex: 'handle_status_name',
|
||||
},{
|
||||
title: '申请地区',
|
||||
dataIndex: 'shenqing_area',
|
||||
},{
|
||||
title: '生产地区',
|
||||
dataIndex: 'shengchan_area',
|
||||
},{
|
||||
title: '辅助地区',
|
||||
dataIndex: 'fuzhu_area',
|
||||
},{
|
||||
title: '备案号',
|
||||
dataIndex: 'beian_no',
|
||||
},{
|
||||
title: '开始时间',
|
||||
dataIndex: 'start_time',
|
||||
},{
|
||||
title: '结束时间',
|
||||
dataIndex: 'end_time',
|
||||
},{
|
||||
title: '下发时间',
|
||||
dataIndex: 'xiafatime',
|
||||
}]});
|
||||
let total = ref(0)
|
||||
|
||||
function viewDetail(record) {
|
||||
console.log(record);
|
||||
caseId.value = record.id;
|
||||
openModal();
|
||||
}
|
||||
|
||||
let current = ref(1)
|
||||
let pageSize = ref(10)
|
||||
|
||||
|
||||
|
||||
let pagination = reactive({
|
||||
pagination: {
|
||||
limit:pageSize, // 每页显示的条数
|
||||
showSizeChanger: true, // 是否可以改变每页显示的条数
|
||||
pageSizeOptions: ['10', '50', '80', '100'], // 可选的每页显示条数
|
||||
showQuickJumper: true, // 是否可以快速跳转到指定页
|
||||
showTotal:total=>`共${total}条`,
|
||||
page: current, // 当前页数
|
||||
total: total, // 总条数
|
||||
onChange:handlePageChange
|
||||
}
|
||||
})
|
||||
|
||||
function handlePageChange(page,pageSize){
|
||||
props.currentListQuery.page = page;
|
||||
props.currentListQuery.limit = pageSize;
|
||||
pagination.pagination.limit = pageSize;
|
||||
pagination.pagination.page = page;
|
||||
|
||||
}
|
||||
|
||||
watch(()=>props.currentListQuery,(newValue,oldValue)=>{
|
||||
handleGetList();
|
||||
},{immediate:true,deep:true})
|
||||
|
||||
function handleGetList(){
|
||||
getCaseOffenceInfoList(props.currentListQuery).then(res=>{
|
||||
columns.data = res.items;
|
||||
total.value = res.total;
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.editable-row-operations a {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
::v-deep .ant-table {
|
||||
height: calc( 100vh - 230px)!important;
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div>
|
||||
<BasicTable @register="registerTable" :searchInfo="searchInfo">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<!-- 乡镇 -->
|
||||
<template v-if="column.key === 'xmcount'">
|
||||
<a class="cursor" @click="getCaseInfoList(column,record)">{{record.xmcount}}</a>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<a-modal
|
||||
v-model:open="showRecordList"
|
||||
width="1710px"
|
||||
:closable="true"
|
||||
:footer="null"
|
||||
title="详情明细"
|
||||
>
|
||||
<RecordList :currentListQuery="currentListQuery.listQuery" />
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref,reactive } from 'vue';
|
||||
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { getCaseOffenceForSsnyList, getCaseOffenceInfoList } from '@/api/demo/system';
|
||||
|
||||
import { RecordList } from './page';
|
||||
|
||||
import { columns,searchFormSchema } from './statistical.data';
|
||||
|
||||
|
||||
defineOptions({ name: 'statisticalanalysis' });
|
||||
|
||||
const searchInfo = reactive<Recordable>({
|
||||
countyid:null
|
||||
});
|
||||
|
||||
const showRecordList = ref<boolean>(false);
|
||||
let currentListQuery = reactive({listQuery:{}});
|
||||
|
||||
const searchParams = ref();
|
||||
const [registerTable, { reload, getSelectRows, clearSelectedRowKeys, updateTableData}] = useTable({
|
||||
// 表格名称
|
||||
title: '统计分析',
|
||||
// 获取数据的接口
|
||||
api: getCaseOffenceForSsnyList,
|
||||
// 表单列信息 BasicColumn[]
|
||||
columns,
|
||||
rowKey: 'id',
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
// 使用搜索表单
|
||||
useSearchForm: true,
|
||||
// 显示表格设置工具
|
||||
showTableSetting: true,
|
||||
// 是否显示分页
|
||||
pagination:false,
|
||||
// 是否显示表格边框
|
||||
bordered: true,
|
||||
// 序号列
|
||||
showIndexColumn: false,
|
||||
// 勾选列
|
||||
rowSelection: false,
|
||||
// 搜索
|
||||
handleSearchInfoFn(info) {
|
||||
searchParams.value = info;
|
||||
return info;
|
||||
},
|
||||
});
|
||||
// 查询条件
|
||||
interface searchListSchema{
|
||||
AreaId?:string;
|
||||
StartTime?:string;
|
||||
EndTime?:string;
|
||||
page?:number;
|
||||
limit?:number;
|
||||
CaseType?:string;
|
||||
key?:string;
|
||||
tubanlaiyuan?:string;
|
||||
}
|
||||
|
||||
function getCaseInfoList(column,record:Recordable){
|
||||
const searchForm = reactive<searchListSchema>({
|
||||
StartTime:searchParams.value?.startTime,
|
||||
EndTime:searchParams.value?.endTime,
|
||||
tubanlaiyuan:searchParams.value?.tubanlaiyuan,
|
||||
page:1,
|
||||
limit:10,
|
||||
AreaId: record.countyid
|
||||
})
|
||||
showRecordList.value = true;
|
||||
currentListQuery.listQuery = searchForm
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.cursor{
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,3 @@
|
||||
|
||||
export { default as RecordList} from './RecordList.vue'
|
||||
|
@ -0,0 +1,152 @@
|
||||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import { h } from 'vue';
|
||||
import { Switch,Tag } from 'ant-design-vue';
|
||||
import { setRoleStatus } from '@/api/demo/system';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
|
||||
type CheckedType = boolean | string | number;
|
||||
|
||||
|
||||
export const columnsDataPreview: BasicColumn[] = [
|
||||
{
|
||||
title: '乡镇',
|
||||
dataIndex: 'countyname',
|
||||
width: 120,
|
||||
},{
|
||||
title: '项目个数',
|
||||
dataIndex: 'xmcount',
|
||||
width: 120,
|
||||
},{
|
||||
title: '项目总用地面积',
|
||||
dataIndex: 'xmzydmj',
|
||||
width: 120,
|
||||
},{
|
||||
title: '按功能区分',
|
||||
children:[
|
||||
{
|
||||
title: '生产用地',
|
||||
dataIndex: 'scydmj',
|
||||
width: 120,
|
||||
},{
|
||||
title: '生成辅助用地',
|
||||
dataIndex: 'scfzydmj',
|
||||
width: 120,
|
||||
}
|
||||
]
|
||||
},{
|
||||
title: '其中面积',
|
||||
dataIndex: '',
|
||||
children:[
|
||||
{
|
||||
title: '农用地',
|
||||
dataIndex: 'nydmj',
|
||||
width: 120,
|
||||
},{
|
||||
title: '耕地',
|
||||
dataIndex: 'gdmj',
|
||||
width: 120,
|
||||
},{
|
||||
title: '永久基本农田',
|
||||
dataIndex: 'yjjbntmj',
|
||||
width: 120,
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '乡镇',
|
||||
dataIndex: 'countyname',
|
||||
width: 120,
|
||||
},{
|
||||
title: '项目个数',
|
||||
dataIndex: 'xmcount',
|
||||
width: 120,
|
||||
},{
|
||||
title: '项目总用地面积',
|
||||
dataIndex: 'xmzydmj',
|
||||
width: 120,
|
||||
},{
|
||||
title: '按功能区分',
|
||||
children:[
|
||||
{
|
||||
title: '生产用地',
|
||||
dataIndex: 'scydmj',
|
||||
width: 120,
|
||||
},{
|
||||
title: '生成辅助用地',
|
||||
dataIndex: 'scfzydmj',
|
||||
width: 120,
|
||||
}
|
||||
]
|
||||
},{
|
||||
title: '其中面积',
|
||||
dataIndex: '',
|
||||
children:[
|
||||
{
|
||||
title: '农用地',
|
||||
dataIndex: 'nydmj',
|
||||
width: 120,
|
||||
},{
|
||||
title: '耕地',
|
||||
dataIndex: 'gdmj',
|
||||
width: 120,
|
||||
},{
|
||||
title: '永久基本农田',
|
||||
dataIndex: 'yjjbntmj',
|
||||
width: 120,
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'tubanlaiyuan',
|
||||
label: '图斑来源',
|
||||
component: 'Input',
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
{
|
||||
field: '[startTime, endTime]',
|
||||
label: '日期范围',
|
||||
component: 'RangePicker',
|
||||
colProps: { span: 8 },
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD',
|
||||
placeholder: ['开始日期', '结束日期'],
|
||||
},
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
|
||||
|
||||
export const formSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'id',
|
||||
label: '角色名称',
|
||||
required: true,
|
||||
component: 'Input',
|
||||
ifShow:false,
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
label: '角色名称',
|
||||
required: true,
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
label: '状态',
|
||||
component: 'RadioButtonGroup',
|
||||
defaultValue: 0,
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '启用', value: 0},
|
||||
{ label: '停用', value: 1 },
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
Loading…
Reference in New Issue