18 changed files with 1811 additions and 115 deletions
@ -0,0 +1,52 @@
|
||||
import request from '@/config/axios' |
||||
|
||||
// 空气质量采集 VO
|
||||
export interface QualityCollectionVO { |
||||
id: number // 主键
|
||||
siteName: string // 站点名称
|
||||
city: string // 城市
|
||||
type: number // 数据类型
|
||||
pm25: number // PM2.s(ugim3)
|
||||
pm10: number // PMo(ug/m3
|
||||
so2: number // sOz(ug/m3)
|
||||
no2: number // NOz(ug/m3)
|
||||
no: number // NO(Hg/m3)
|
||||
nOx: number // NOx(Hg/m3)
|
||||
co: number // CO(mg/m3)
|
||||
o3: number // 0з(ug/m3)
|
||||
remark: string // 备用1
|
||||
remark2: string // 备用2
|
||||
} |
||||
|
||||
// 空气质量采集 API
|
||||
export const QualityCollectionApi = { |
||||
// 查询空气质量采集分页
|
||||
getQualityCollectionPage: async (params: any) => { |
||||
return await request.get({ url: `/system/quality-collection/page`, params }) |
||||
}, |
||||
|
||||
// 查询空气质量采集详情
|
||||
getQualityCollection: async (id: number) => { |
||||
return await request.get({ url: `/system/quality-collection/get?id=` + id }) |
||||
}, |
||||
|
||||
// 新增空气质量采集
|
||||
createQualityCollection: async (data: QualityCollectionVO) => { |
||||
return await request.post({ url: `/system/quality-collection/create`, data }) |
||||
}, |
||||
|
||||
// 修改空气质量采集
|
||||
updateQualityCollection: async (data: QualityCollectionVO) => { |
||||
return await request.put({ url: `/system/quality-collection/update`, data }) |
||||
}, |
||||
|
||||
// 删除空气质量采集
|
||||
deleteQualityCollection: async (id: number) => { |
||||
return await request.delete({ url: `/system/quality-collection/delete?id=` + id }) |
||||
}, |
||||
|
||||
// 导出空气质量采集 Excel
|
||||
exportQualityCollection: async (params) => { |
||||
return await request.download({ url: `/system/quality-collection/export-excel`, params }) |
||||
}, |
||||
} |
||||
@ -0,0 +1,159 @@
|
||||
<template> |
||||
<Dialog :title="dialogTitle" v-model="dialogVisible"> |
||||
<el-form |
||||
ref="formRef" |
||||
:model="formData" |
||||
:rules="formRules" |
||||
label-width="100px" |
||||
v-loading="formLoading" |
||||
> |
||||
<el-form-item label="站点名称" prop="siteName"> |
||||
<el-input v-model="formData.siteName" placeholder="请输入站点名称" /> |
||||
</el-form-item> |
||||
<el-form-item label="城市" prop="city"> |
||||
<el-input v-model="formData.city" placeholder="请输入城市" /> |
||||
</el-form-item> |
||||
<el-form-item label="数据类型" prop="type"> |
||||
<el-select v-model="formData.type" placeholder="请选择数据类型"> |
||||
<el-option |
||||
v-for="dict in getIntDictOptions(DICT_TYPE.AIR_COLLECTION_TYPE)" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="PM2.s(ugim3)" prop="pm25"> |
||||
<el-input v-model="formData.pm25" placeholder="请输入PM2.s(ugim3)" /> |
||||
</el-form-item> |
||||
<el-form-item label="PMo(ug/m3" prop="pm10"> |
||||
<el-input v-model="formData.pm10" placeholder="请输入PMo(ug/m3" /> |
||||
</el-form-item> |
||||
<el-form-item label="sOz(ug/m3)" prop="so2"> |
||||
<el-input v-model="formData.so2" placeholder="请输入sOz(ug/m3)" /> |
||||
</el-form-item> |
||||
<el-form-item label="NOz(ug/m3)" prop="no2"> |
||||
<el-input v-model="formData.no2" placeholder="请输入NOz(ug/m3)" /> |
||||
</el-form-item> |
||||
<el-form-item label="NO(Hg/m3)" prop="no"> |
||||
<el-input v-model="formData.no" placeholder="请输入NO(Hg/m3)" /> |
||||
</el-form-item> |
||||
<el-form-item label="NOx(Hg/m3)" prop="nOx"> |
||||
<el-input v-model="formData.nOx" placeholder="请输入NOx(Hg/m3)" /> |
||||
</el-form-item> |
||||
<el-form-item label="CO(mg/m3)" prop="co"> |
||||
<el-input v-model="formData.co" placeholder="请输入CO(mg/m3)" /> |
||||
</el-form-item> |
||||
<el-form-item label="0з(ug/m3)" prop="o3"> |
||||
<el-input v-model="formData.o3" placeholder="请输入0з(ug/m3)" /> |
||||
</el-form-item> |
||||
<el-form-item label="备用1" prop="remark"> |
||||
<el-input v-model="formData.remark" placeholder="请输入备用1" /> |
||||
</el-form-item> |
||||
<el-form-item label="备用2" prop="remark2"> |
||||
<el-input v-model="formData.remark2" placeholder="请输入备用2" /> |
||||
</el-form-item> |
||||
</el-form> |
||||
<template #footer> |
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> |
||||
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
</template> |
||||
</Dialog> |
||||
</template> |
||||
<script setup lang="ts"> |
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict' |
||||
import { QualityCollectionApi, QualityCollectionVO } from '@/api/airqualitycollection' |
||||
|
||||
/** 空气质量采集 表单 */ |
||||
defineOptions({ name: 'QualityCollectionForm' }) |
||||
|
||||
const { t } = useI18n() // 国际化 |
||||
const message = useMessage() // 消息弹窗 |
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示 |
||||
const dialogTitle = ref('') // 弹窗的标题 |
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
||||
const formData = ref({ |
||||
id: undefined, |
||||
siteName: undefined, |
||||
city: undefined, |
||||
type: undefined, |
||||
pm25: undefined, |
||||
pm10: undefined, |
||||
so2: undefined, |
||||
no2: undefined, |
||||
no: undefined, |
||||
nOx: undefined, |
||||
co: undefined, |
||||
o3: undefined, |
||||
remark: undefined, |
||||
remark2: undefined, |
||||
}) |
||||
const formRules = reactive({ |
||||
}) |
||||
const formRef = ref() // 表单 Ref |
||||
|
||||
/** 打开弹窗 */ |
||||
const open = async (type: string, id?: number) => { |
||||
dialogVisible.value = true |
||||
dialogTitle.value = t('action.' + type) |
||||
formType.value = type |
||||
resetForm() |
||||
// 修改时，设置数据 |
||||
if (id) { |
||||
formLoading.value = true |
||||
try { |
||||
formData.value = await QualityCollectionApi.getQualityCollection(id) |
||||
} finally { |
||||
formLoading.value = false |
||||
} |
||||
} |
||||
} |
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
||||
|
||||
/** 提交表单 */ |
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
||||
const submitForm = async () => { |
||||
// 校验表单 |
||||
await formRef.value.validate() |
||||
// 提交请求 |
||||
formLoading.value = true |
||||
try { |
||||
const data = formData.value as unknown as QualityCollectionVO |
||||
if (formType.value === 'create') { |
||||
await QualityCollectionApi.createQualityCollection(data) |
||||
message.success(t('common.createSuccess')) |
||||
} else { |
||||
await QualityCollectionApi.updateQualityCollection(data) |
||||
message.success(t('common.updateSuccess')) |
||||
} |
||||
dialogVisible.value = false |
||||
// 发送操作成功的事件 |
||||
emit('success') |
||||
} finally { |
||||
formLoading.value = false |
||||
} |
||||
} |
||||
|
||||
/** 重置表单 */ |
||||
const resetForm = () => { |
||||
formData.value = { |
||||
id: undefined, |
||||
siteName: undefined, |
||||
city: undefined, |
||||
type: undefined, |
||||
pm25: undefined, |
||||
pm10: undefined, |
||||
so2: undefined, |
||||
no2: undefined, |
||||
no: undefined, |
||||
nOx: undefined, |
||||
co: undefined, |
||||
o3: undefined, |
||||
remark: undefined, |
||||
remark2: undefined, |
||||
} |
||||
formRef.value?.resetFields() |
||||
} |
||||
</script> |
||||
@ -0,0 +1,259 @@
|
||||
<template> |
||||
|
||||
<!-- 列表 --> |
||||
<ContentWrap> |
||||
<div class="tabs"> |
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> |
||||
<el-tab-pane |
||||
v-for="dict in getIntDictOptions(DICT_TYPE.AIR_COLLECTION_TYPE)" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:name="dict.value" |
||||
> |
||||
|
||||
<el-form |
||||
:model="queryParams" |
||||
ref="queryFormRef" |
||||
:inline="true" |
||||
size="large" |
||||
label-width="68px" |
||||
label-position="right" |
||||
> |
||||
<el-form-item label="站点" prop="siteName"> |
||||
<el-input |
||||
v-model="queryParams.siteName" |
||||
placeholder="请输入站点名称" |
||||
clearable |
||||
@keyup.enter="handleQuery" |
||||
class="!w-240px" |
||||
/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="时间" prop="createTime"> |
||||
<el-date-picker |
||||
v-model="queryParams.createTime" |
||||
value-format="YYYY-MM-DD HH:mm:ss" |
||||
type="daterange" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期" |
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" |
||||
class="!w-220px" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> |
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> |
||||
<el-button |
||||
type="primary" |
||||
plain |
||||
@click="openForm('create')" |
||||
v-hasPermi="['system:quality-collection:create']" |
||||
> |
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增 |
||||
</el-button> |
||||
<el-button |
||||
type="success" |
||||
plain |
||||
@click="handleExport" |
||||
:loading="exportLoading" |
||||
v-hasPermi="['system:quality-collection:export']" |
||||
> |
||||
<Icon icon="ep:download" class="mr-5px" /> 导出 |
||||
</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"> |
||||
<template #empty> |
||||
<el-empty description="暂无数据" /> |
||||
</template> |
||||
<el-table-column label="站点名称" align="center" prop="siteName" /> |
||||
<el-table-column |
||||
label="时间" |
||||
align="center" |
||||
prop="createTime" |
||||
:formatter="dateFormatter" |
||||
width="180px" |
||||
:cell-style="{ borderBottom: '1px solid #EBEEF5' }" |
||||
:header-cell-style="{ |
||||
borderBottom: '1px solid #EBEEF5', |
||||
backgroundColor: '#F5F7FA' |
||||
}" |
||||
/> |
||||
<el-table-column label="数据类型" align="center" prop="type"> |
||||
<template #default="scope"> |
||||
<dict-tag :type="DICT_TYPE.AIR_COLLECTION_TYPE" :value="scope.row.type" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="PM2.s(ugim3)" align="center" prop="pm25" /> |
||||
<el-table-column label="PMo(ug/m3)" align="center" prop="pm10" /> |
||||
<el-table-column label="sOz(ug/m3)" align="center" prop="so2" /> |
||||
<el-table-column label="NOz(ug/m3)" align="center" prop="no2" /> |
||||
<el-table-column label="NO(Hg/m3)" align="center" prop="no" /> |
||||
<el-table-column label="NOx(Hg/m3)" align="center" prop="nOx" /> |
||||
<el-table-column label="CO(mg/m3)" align="center" prop="co" /> |
||||
<el-table-column label="0з(ug/m3)" align="center" prop="o3" /> |
||||
<!-- <el-table-column label="操作" align="center" min-width="120px"> |
||||
<template #default="scope"> |
||||
<el-button |
||||
link |
||||
type="primary" |
||||
@click="openForm('update', scope.row.id)" |
||||
v-hasPermi="['system:quality-collection:update']" |
||||
> |
||||
编辑 |
||||
</el-button> |
||||
<el-button |
||||
link |
||||
type="danger" |
||||
@click="handleDelete(scope.row.id)" |
||||
v-hasPermi="['system:quality-collection:delete']" |
||||
> |
||||
删除 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> --> |
||||
</el-table> |
||||
<!-- 分页 --> |
||||
<Pagination |
||||
:total="total" |
||||
v-model:page="queryParams.pageNo" |
||||
v-model:limit="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</div> |
||||
</ContentWrap> |
||||
|
||||
<!-- 表单弹窗：添加/修改 --> |
||||
<QualityCollectionForm ref="formRef" @success="getList" /> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict' |
||||
import { dateFormatter } from '@/utils/formatTime' |
||||
import download from '@/utils/download' |
||||
import { QualityCollectionApi, QualityCollectionVO } from '@/api/airqualitycollection' |
||||
import QualityCollectionForm from './QualityCollectionForm.vue' |
||||
const activeName = ref(1) |
||||
|
||||
|
||||
/** 空气质量采集 列表 */ |
||||
defineOptions({ name: 'QualityCollection' }) |
||||
|
||||
const message = useMessage() // 消息弹窗 |
||||
const { t } = useI18n() // 国际化 |
||||
|
||||
const loading = ref(true) // 列表的加载中 |
||||
const list = ref<QualityCollectionVO[]>([]) // 列表的数据 |
||||
const total = ref(0) // 列表的总页数 |
||||
const queryParams = reactive({ |
||||
pageNo: 1, |
||||
pageSize: 10, |
||||
siteName: undefined, |
||||
city: undefined, |
||||
type: undefined, |
||||
pm25: undefined, |
||||
pm10: undefined, |
||||
so2: undefined, |
||||
no2: undefined, |
||||
no: undefined, |
||||
nOx: undefined, |
||||
co: undefined, |
||||
o3: undefined, |
||||
remark: undefined, |
||||
remark2: undefined, |
||||
createTime: [], |
||||
}) |
||||
const queryFormRef = ref() // 搜索的表单 |
||||
const exportLoading = ref(false) // 导出的加载中 |
||||
|
||||
/** 查询列表 */ |
||||
const getList = async () => { |
||||
loading.value = true |
||||
try { |
||||
const data = await QualityCollectionApi.getQualityCollectionPage(queryParams) |
||||
list.value = data.list |
||||
total.value = data.total |
||||
} finally { |
||||
loading.value = false |
||||
} |
||||
} |
||||
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => { |
||||
console.log(tab, event) |
||||
} |
||||
|
||||
/** 搜索按钮操作 */ |
||||
const handleQuery = () => { |
||||
queryParams.pageNo = 1 |
||||
getList() |
||||
} |
||||
|
||||
/** 重置按钮操作 */ |
||||
const resetQuery = () => { |
||||
queryFormRef.value.resetFields() |
||||
handleQuery() |
||||
} |
||||
|
||||
/** 添加/修改操作 */ |
||||
const formRef = ref() |
||||
const openForm = (type: string, id?: number) => { |
||||
formRef.value.open(type, id) |
||||
} |
||||
|
||||
/** 删除按钮操作 */ |
||||
const handleDelete = async (id: number) => { |
||||
try { |
||||
// 删除的二次确认 |
||||
await message.delConfirm() |
||||
// 发起删除 |
||||
await QualityCollectionApi.deleteQualityCollection(id) |
||||
message.success(t('common.delSuccess')) |
||||
// 刷新列表 |
||||
await getList() |
||||
} catch {} |
||||
} |
||||
|
||||
/** 导出按钮操作 */ |
||||
const handleExport = async () => { |
||||
try { |
||||
// 导出的二次确认 |
||||
await message.exportConfirm() |
||||
// 发起导出 |
||||
exportLoading.value = true |
||||
const data = await QualityCollectionApi.exportQualityCollection(queryParams) |
||||
download.excel(data, '空气质量采集.xls') |
||||
} catch { |
||||
} finally { |
||||
exportLoading.value = false |
||||
} |
||||
} |
||||
|
||||
/** 初始化 **/ |
||||
onMounted(() => { |
||||
getList() |
||||
}) |
||||
</script> |
||||
<style> |
||||
.tabs { |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
::v-deep(.el-form-item__label) { |
||||
display: inline-flex; |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
.demo-tabs > .el-tabs__content { |
||||
color: #6b778c; |
||||
font-size: 32px; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
|
||||
</style> |
||||
@ -0,0 +1,397 @@
|
||||
<template> |
||||
|
||||
<el-dialog |
||||
v-model="visible" |
||||
title="筛选企业" |
||||
width="1200px" |
||||
style="padding: 40px; " |
||||
:close-on-click-modal="false" |
||||
append-to-body |
||||
> |
||||
<template #header > |
||||
<span style="font-size: 20px; font-weight: bold;">筛选企业</span> |
||||
</template> |
||||
<div class="enterprise-container"> |
||||
<!-- 搜索区域 --> |
||||
<div class="search-area"> |
||||
<el-form |
||||
:model="enterprise.queryParams" |
||||
ref="queryFormRef" |
||||
:inline="true" |
||||
label-width="0" |
||||
size="large" |
||||
class="search-form" |
||||
> |
||||
<div class="form-container"> |
||||
<el-form-item label="" prop="region" class="form-item"> |
||||
<el-select v-model="enterprise.queryParams.region" placeholder="请选择所属区域" clearable> |
||||
<el-option |
||||
v-for="dict in getStrDictOptions(DICT_TYPE.ENTERPRISES_AREA)" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
|
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="" prop="type" class="form-item"> |
||||
<el-select v-model="enterprise.queryParams.hy" placeholder="请选择行业" clearable> |
||||
<el-option |
||||
v-for="dict in hyList" |
||||
:key="dict.id" |
||||
:label="dict.tagName" |
||||
:value="dict.id" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="" prop="region" class="form-item"> |
||||
<el-select v-model="enterprise.queryParams.st" placeholder="请选择生态" clearable> |
||||
<el-option |
||||
v-for="dict in stList" |
||||
:key="dict.id" |
||||
:label="dict.tagName" |
||||
:value="dict.id" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="" prop="type" class="form-item"> |
||||
<el-select v-model="enterprise.queryParams.wr" placeholder="请选择污染程度" clearable> |
||||
<el-option |
||||
v-for="dict in wrList" |
||||
:key="dict.id" |
||||
:label="dict.tagName" |
||||
:value="dict.id" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="" prop="type" class="form-item"> |
||||
<el-select v-model="enterprise.queryParams.userId" placeholder="请选择执法人员" filterable clearable> |
||||
<el-option |
||||
v-for="dict in userList" |
||||
:key="dict.id" |
||||
:label="dict.deptName +'_'+ dict.realName" |
||||
:value="dict.id" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="" prop="enterprisesName" class="form-item"> |
||||
<el-input v-model="enterprise.queryParams.enterprisesName" placeholder="请输入企业名称" /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item class="form-item"> |
||||
<el-button @click="handleQuery" type="primary" plain> |
||||
<Icon icon="ep:search" class="mr-5px" /> 搜索 |
||||
</el-button> |
||||
<el-button @click="resetQuery" class="mr-10px" type="primary" plain> |
||||
<Icon icon="ep:refresh" class="mr-5px" /> 重置 |
||||
</el-button> |
||||
</el-form-item> |
||||
</div> |
||||
</el-form> |
||||
</div> |
||||
|
||||
<!-- 表格区域 --> |
||||
<el-table |
||||
ref="multipleTableRef" |
||||
:data="enterprise.list" |
||||
@select="handleSelectionChange" |
||||
@select-all="selectAll" |
||||
style="width: 100%; border: 1px solid #ebeef5" |
||||
:cell-style="{ borderBottom: '1px solid #EBEEF5', textAlign: 'left'}" |
||||
height="400px" |
||||
row-key="id" |
||||
:header-cell-style="{ |
||||
borderBottom: '1px solid #EBEEF5', |
||||
backgroundColor: '#F5F7FA' |
||||
}" |
||||
> |
||||
<el-table-column type="selection" :reserve-selection="true" /> |
||||
|
||||
<el-table-column property="enterprisesName" label="企业名称" /> |
||||
<el-table-column property="region" label="区域"> |
||||
<template #default="scope"> |
||||
{{ |
||||
getStrDictOptions(DICT_TYPE.ENTERPRISES_AREA).find( |
||||
(dict) => dict.value == scope.row.region |
||||
)?.label || '未知区域' |
||||
}} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column property="enterprisesName" label="行业"> |
||||
<template #default="scope"> |
||||
{{ |
||||
scope.row.tagListName && |
||||
scope.row.tagListName |
||||
.filter((item) => item.value == 1) |
||||
.map((item) => item.label) |
||||
.join(', ') |
||||
}} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column property="enterprisesName" label="生态"> |
||||
<template #default="scope"> |
||||
{{ |
||||
scope.row.tagListName && |
||||
scope.row.tagListName |
||||
.filter((item) => item.value == 2) |
||||
.map((item) => item.label) |
||||
.join(', ') |
||||
}} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column property="enterprisesName" label="类型"> |
||||
<template #default="scope"> |
||||
{{ |
||||
scope.row.tagListName && |
||||
scope.row.tagListName |
||||
.filter((item) => item.value == 4) |
||||
.map((item) => item.label) |
||||
.join(', ') |
||||
}} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column property="inviterName" label="执法人员" /> |
||||
</el-table> |
||||
|
||||
<!-- 分页 --> |
||||
<div class="pagination-container"> |
||||
<div class="selected">已选择 {{ selectedEnterprises.length }} / {{ enterprise.total }}</div> |
||||
<el-pagination |
||||
v-show="enterprise.total > 0" |
||||
:total="enterprise.total" |
||||
:show-page-size="false" |
||||
layout="total, prev, pager, next" |
||||
size="small" |
||||
v-model:current-page="enterprise.queryParams.pageNo" |
||||
@update:current-page="getEnterPriseList" |
||||
v-model:page-size="enterprise.queryParams.pageSize" |
||||
@pagination="getEnterPriseList" |
||||
/> |
||||
</div> |
||||
|
||||
<!-- 底部按钮 --> |
||||
<div class="footer"> |
||||
<el-button type="primary" @click="confirmSelect">确认选择</el-button> |
||||
<el-button @click="handleClose">关闭窗口</el-button> |
||||
</div> |
||||
</div> |
||||
</el-dialog> |
||||
</template> |
||||
<script setup lang="ts"> |
||||
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict' |
||||
import { EnterprisesApi, EnterprisesVO } from '@/api/enterprises' |
||||
import { TagLibraryVO, TagLibraryApi } from '@/api/system/taglibrary' |
||||
import { getSimpleUserZGList } from '@/api/system/user' |
||||
const loading = ref(true) // 列表的加载中 |
||||
const emit = defineEmits(['update:modelValue', 'success']) |
||||
const props = defineProps({ |
||||
modelValue: { |
||||
type: Boolean, |
||||
default: false |
||||
} |
||||
}) |
||||
const enterprise = ref({ |
||||
list: ref<EnterprisesVO[]>(), |
||||
queryParams: reactive({ |
||||
pageNo: 1, |
||||
pageSize: 20, |
||||
enterprisesName: undefined, |
||||
region: undefined, |
||||
hy: undefined, |
||||
st: undefined, |
||||
wr: undefined, |
||||
inviterName: undefined, |
||||
id: undefined, |
||||
userId: undefined, |
||||
tagList: [] |
||||
}), |
||||
total: ref(0) |
||||
}) |
||||
const queryParams = ref({ |
||||
enterprisesName: undefined, |
||||
hy: undefined, |
||||
st: undefined, |
||||
wr: undefined, |
||||
region: undefined, |
||||
userId: undefined, |
||||
// registrationNumber: undefined, |
||||
id: undefined |
||||
}) |
||||
|
||||
// 控制弹窗显示 |
||||
const visible = ref(false) // 弹窗的是否展示 |
||||
// ... 其他变量保持不变 ... |
||||
// 关闭弹窗 |
||||
const handleClose = () => { |
||||
visible.value = false |
||||
} |
||||
const selectedEnterprises = ref<EnterprisesVO[]>([]) |
||||
const handleSelectionChange = (selectedItems: EnterprisesVO[]) => { |
||||
selectedEnterprises.value = selectedItems |
||||
} |
||||
|
||||
const selectAll = (selection) => { |
||||
selectedEnterprises.value = selection |
||||
} |
||||
|
||||
//确认选择 |
||||
const confirmSelect = () => { |
||||
emit('success', selectedEnterprises.value) |
||||
} |
||||
|
||||
|
||||
// 分页数据选中事件 |
||||
// const handleSelectionChange = (selection) => { |
||||
// const currentPageIds = selection.map(item => item.id); |
||||
// currentPageIds.forEach(id => selectedIds.value.add(id)); |
||||
// }; |
||||
|
||||
/** |
||||
* 获取企业列表 |
||||
*/ |
||||
async function getEnterPriseList() { |
||||
loading.value = true |
||||
|
||||
console.log('enterprise.value.queryParams', enterprise.value.queryParams) |
||||
|
||||
if (enterprise.value.queryParams.hy || |
||||
enterprise.value.queryParams.st || |
||||
enterprise.value.queryParams.wr |
||||
) { |
||||
enterprise.value.queryParams.tagList.push(enterprise.value.queryParams.hy) |
||||
enterprise.value.queryParams.tagList.push(enterprise.value.queryParams.st) |
||||
enterprise.value.queryParams.tagList.push(enterprise.value.queryParams.wr) |
||||
} |
||||
|
||||
|
||||
try { |
||||
const data = await EnterprisesApi.getEnterpriseByUserId(enterprise.value.queryParams) |
||||
enterprise.value.list = data.list |
||||
enterprise.value.total = data.total |
||||
} finally { |
||||
loading.value = false |
||||
enterprise.value.queryParams.tagList = [] |
||||
} |
||||
} |
||||
// 打开弹窗时的初始化 |
||||
const open = async () => { |
||||
// TODO: 初始化数据，例如获取列表等 |
||||
visible.value = true |
||||
} |
||||
|
||||
/** 搜索按钮操作 */ |
||||
const handleQuery = () => { |
||||
enterprise.value.queryParams.pageNo = 1 |
||||
getEnterPriseList() |
||||
} |
||||
/** 重置按钮操作 */ |
||||
const resetQuery = () => { |
||||
// queryFormRef.value.resetFields() |
||||
// handleQuery() |
||||
} |
||||
|
||||
//行业 |
||||
const hyList: any = ref([]) |
||||
//生态 |
||||
const stList: any = ref([]) |
||||
//污染程度 |
||||
const wrList: any = ref([]) |
||||
//执法人员列表 |
||||
const userList:any = ref() |
||||
|
||||
async function init() { |
||||
try { |
||||
const codeList = 'codeList=hy&codeList=st&codeList=wr' |
||||
const data = await TagLibraryApi.tagLibraryList(codeList) |
||||
hyList.value = data[0].children |
||||
stList.value = data[1].children |
||||
wrList.value = data[2].children |
||||
} finally { |
||||
} |
||||
|
||||
const userData = await getSimpleUserZGList() |
||||
|
||||
userList.value = userData |
||||
|
||||
} |
||||
|
||||
|
||||
getEnterPriseList() |
||||
onMounted(() => { |
||||
init() |
||||
}) |
||||
defineExpose({ open }) |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
|
||||
::v-deep(.el-dialog) { |
||||
padding: 40px; |
||||
} |
||||
|
||||
::v-deep(.el-dialog__title) { |
||||
font-weight: bold !important; |
||||
font-size: 20px; |
||||
} |
||||
|
||||
.enterprise-container { |
||||
// ... 样式保持不变 ... |
||||
.search-form { |
||||
background-color: #fff; |
||||
padding: 20px 20px 0px 0; |
||||
border-radius: 4px; |
||||
position: relative; |
||||
.form-container { |
||||
display: grid; |
||||
grid-template-columns: repeat(4, 1fr); |
||||
gap: 24px; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.form-item { |
||||
margin: 0; |
||||
width: 100%; |
||||
|
||||
:deep(.el-input), |
||||
:deep(.el-select) { |
||||
width: 100%; |
||||
} |
||||
} |
||||
.action-buttons { |
||||
position: absolute; |
||||
right: 10px; |
||||
bottom: 0px; |
||||
} |
||||
|
||||
.button-container { |
||||
display: flex; |
||||
justify-content: center; |
||||
gap: 8px; |
||||
} |
||||
} |
||||
.pagination-container { |
||||
display: flex; |
||||
flex-direction: row; |
||||
|
||||
justify-content: space-between; |
||||
margin-top: 20px; // 确保分页和按钮之间有间距 |
||||
|
||||
.selected { |
||||
font-size: 12px; |
||||
margin-left: 10px; |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
.footer { |
||||
display: flex; |
||||
justify-content: center; // 将按钮居中 |
||||
gap: 8px; // 按钮之间的间距 |
||||
padding-top: 20px; |
||||
margin-top: 20px; // 添 |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue