You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
397 lines
11 KiB
397 lines
11 KiB
<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>
|
|
|