问题预警画面
parent
e9058f16e1
commit
1745b90edd
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
||||
<BasicTable class="w-4/4 xl:w-5/5" @register="registerTable">
|
||||
<template #toolbar>
|
||||
<a-button type="primary" @click="download">导出</a-button>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: '详情',
|
||||
onClick: () => {
|
||||
handleInfo(record);
|
||||
},
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<a-modal
|
||||
style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
|
||||
wrap-class-name="full-modal"
|
||||
v-model:open="showInfoOpen"
|
||||
title="详情"
|
||||
:footer="null"
|
||||
:maskClosable="true"
|
||||
:destroyOnClose="true"
|
||||
@cancel="showInfoOpen = false"
|
||||
>
|
||||
<ShowInfoModal :showInfoData="showInfoData"/>
|
||||
</a-modal>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue"
|
||||
import { PageWrapper } from '@/components/Page';
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { columns, searchFormSchema } from './utils';
|
||||
import { GetWentiDronssnydList, GetWentiDronssnydExport } from '@/api/earlywarning/index'
|
||||
import ShowInfoModal from '@/components/EarlyWarning/InfoModal/index.vue'
|
||||
|
||||
const showInfoOpen = ref(false)
|
||||
const showInfoData = ref();
|
||||
|
||||
const [registerTable, { getForm }] = useTable({
|
||||
title: '问题预警',
|
||||
api: GetWentiDronssnydList,
|
||||
columns,
|
||||
rowKey: 'id',
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
fixed: 'right',
|
||||
},
|
||||
});
|
||||
function handleInfo(record) {
|
||||
showInfoData.value = record
|
||||
showInfoOpen.value = true
|
||||
}
|
||||
const download = () => {
|
||||
const form = getForm();
|
||||
const filterValues = form.getFieldsValue();
|
||||
GetWentiDronssnydExport(filterValues).then(res => {
|
||||
const elink = document.createElement('a');
|
||||
elink.download = '问题预警数据' + new Date().getTime() + '.xls';
|
||||
elink.style.display = 'none';
|
||||
elink.href = URL.createObjectURL(res);
|
||||
document.body.appendChild(elink);
|
||||
elink.click();
|
||||
URL.revokeObjectURL(elink.href);
|
||||
document.body.removeChild(elink);
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.full-modal {
|
||||
.ant-modal {
|
||||
min-width: 100vw;
|
||||
top: 0px;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
.ant-modal-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ant-modal-body {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,155 @@
|
||||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import { getChildrenTree } from '@/api/demo/system';
|
||||
import { getLoad } from '@/api/sys/sysDataItemDetail';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '项目编号',
|
||||
dataIndex: 'xiangmu_no',
|
||||
},
|
||||
{
|
||||
title: '项目名称',
|
||||
dataIndex: 'xiangmu_name',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '乡镇',
|
||||
dataIndex: 'streetname',
|
||||
},
|
||||
{
|
||||
title: '村庄',
|
||||
dataIndex: 'communityname',
|
||||
},
|
||||
{
|
||||
title: '权利人',
|
||||
dataIndex: 'quanliren',
|
||||
},
|
||||
{
|
||||
title: '联系方式',
|
||||
dataIndex: 'lianxifangshi',
|
||||
},
|
||||
{
|
||||
title: '行政区划',
|
||||
dataIndex: 'xingzhengquhua',
|
||||
},
|
||||
{
|
||||
title: '备案编号',
|
||||
dataIndex: 'beian_no',
|
||||
},
|
||||
{
|
||||
title: '备案日期',
|
||||
dataIndex: 'beianriqi',
|
||||
customRender: ({ text }) => {
|
||||
if (!text) return '';
|
||||
return dayjs(text).format('YYYY-MM-DD');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '项目状态',
|
||||
dataIndex: 'handle_status_name',
|
||||
},
|
||||
{
|
||||
title: '项目开始时间',
|
||||
dataIndex: 'start_time',
|
||||
width: 200,
|
||||
customRender: ({ text }) => {
|
||||
if (!text) return '';
|
||||
return dayjs(text).format('YYYY-MM-DD');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '项目结束时间',
|
||||
dataIndex: 'end_time',
|
||||
customRender: ({ text }) => {
|
||||
if (!text) return '';
|
||||
return dayjs(text).format('YYYY-MM-DD');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '设施农业类型',
|
||||
dataIndex: 'xiangmu_yt',
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: '建筑结构',
|
||||
dataIndex: 'jianzhujiegou',
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: '设施农业申请用地面积(公顷)',
|
||||
dataIndex: 'shenqing_area',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '生产设施用地(公顷)',
|
||||
dataIndex: 'shengchan_area',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '辅助设施用地(公顷)',
|
||||
dataIndex: 'fuzhu_area',
|
||||
width: 200,
|
||||
},
|
||||
];
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'xiangmuno',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 },
|
||||
label: '项目编号',
|
||||
},
|
||||
{
|
||||
field: 'xiangmumc',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 },
|
||||
label: '项目名称',
|
||||
},
|
||||
{
|
||||
field: 'xiangmuyt',
|
||||
component: 'ApiSelect',
|
||||
colProps: { span: 4 },
|
||||
label: '设施农业类型',
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: getLoad,
|
||||
params: { code: 'ssnyddqyt' },
|
||||
resultField: 'result',
|
||||
labelField: 'itemName',
|
||||
valueField: 'itemValue',
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
component: 'ApiSelect',
|
||||
colProps: { span: 4 },
|
||||
label: '项目状态',
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: getLoad,
|
||||
params: { code: 'ssnydxmzt' },
|
||||
resultField: 'result',
|
||||
labelField: 'itemName',
|
||||
valueField: 'itemValue',
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'streetid',
|
||||
label: '乡镇',
|
||||
component: 'ApiSelect',
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: getChildrenTree,
|
||||
params: { parentId: 371325 },
|
||||
// 接口参数
|
||||
resultField: 'result',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
};
|
||||
},
|
||||
},
|
||||
];
|
||||
Loading…
Reference in New Issue