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.
301 lines
8.3 KiB
301 lines
8.3 KiB
8 months ago
|
<template>
|
||
|
|
<el-dialog
|
||
|
|
v-model="visible"
|
||
|
|
title="新增企业"
|
||
|
|
width="1200px"
|
||
|
|
:close-on-click-modal="false"
|
||
|
|
append-to-body
|
||
|
|
>
|
||
|
|
<div class="enterprise-container">
|
||
|
|
<!-- 搜索区域 -->
|
||
|
|
<div class="search-area">
|
||
|
|
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="0" class="search-form">
|
||
|
|
<div class="form-container">
|
||
|
|
<el-form-item label="" prop="enterprisesName" class="form-item">
|
||
|
|
<el-input
|
||
|
|
v-model="queryParams.enterprisesName"
|
||
|
|
placeholder="请输入企业名称"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="" prop="type" class="form-item">
|
||
|
|
<el-select
|
||
|
|
v-model="queryParams.type"
|
||
|
|
placeholder="请选择企业规模"
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="dict in getStrDictOptions(DICT_TYPE.ENTERPRISES_TYPE)"
|
||
|
|
: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="queryParams.type"
|
||
|
|
placeholder="请选择企业规模"
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="dict in getStrDictOptions(DICT_TYPE.ENTERPRISES_TYPE)"
|
||
|
|
: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="queryParams.type"
|
||
|
|
placeholder="请选择企业规模"
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="dict in getStrDictOptions(DICT_TYPE.ENTERPRISES_TYPE)"
|
||
|
|
:key="dict.value"
|
||
|
|
:label="dict.label"
|
||
|
|
:value="dict.value"
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="" prop="region" class="form-item">
|
||
|
|
<el-select
|
||
|
|
v-model="queryParams.region"
|
||
|
|
placeholder="请选择所属区域"
|
||
|
|
>
|
||
|
|
<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="region" class="form-item">
|
||
|
|
<el-select
|
||
|
|
v-model="queryParams.region"
|
||
|
|
placeholder="请选择所属区域"
|
||
|
|
>
|
||
|
|
<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 class="form-item">
|
||
|
|
<el-button @click="handleQuery">
|
||
|
|
<Icon icon="ep:search" class="mr-5px" /> 搜索
|
||
|
|
</el-button>
|
||
|
|
<el-button @click="resetQuery" class="mr-10px">
|
||
|
|
<Icon icon="ep:refresh" class="mr-5px" /> 重置 </el-button
|
||
|
|
>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 表格区域 -->
|
||
|
|
<el-table
|
||
|
|
ref="multipleTableRef"
|
||
|
|
:data="enterprise.list"
|
||
|
|
@selection-change="handleSelectionChange"
|
||
|
|
style="width: 100%; border: 1px solid #EBEEF5"
|
||
|
|
:cell-style="{ borderBottom: '1px solid #EBEEF5' }"
|
||
|
|
:header-cell-style="{
|
||
|
|
borderBottom: '1px solid #EBEEF5',
|
||
|
|
backgroundColor: '#F5F7FA'
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
<el-table-column type="selection" />
|
||
|
|
<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="行业" />
|
||
|
|
<el-table-column property="enterprisesName" label="生态" />
|
||
|
|
<el-table-column property="enterprisesName" label="类型" />
|
||
|
|
<el-table-column property="enterprisesName" label="执法人员" />
|
||
|
|
</el-table>
|
||
|
|
|
||
|
|
<!-- 分页 -->
|
||
|
|
<!-- 分页 -->
|
||
|
|
<div class="pagination-container">
|
||
|
|
<pagination
|
||
|
|
v-show="enterprise.total > 0"
|
||
|
|
:total="enterprise.total"
|
||
|
|
:show-page-size="false"
|
||
|
|
size="small"
|
||
|
|
v-model:page="enterprise.queryParams.pageNo"
|
||
|
|
v-model:limit="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'
|
||
|
|
|
||
|
|
|
||
|
|
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: 9,
|
||
|
|
enterprisesName: undefined,
|
||
|
|
type: undefined,
|
||
|
|
region: undefined,
|
||
|
|
registrationNumber: undefined,
|
||
|
|
id:undefined
|
||
|
|
}),
|
||
|
|
total: ref(0)
|
||
|
|
})
|
||
|
|
|
||
|
|
const queryParams = ref({
|
||
|
|
enterprisesName: undefined,
|
||
|
|
type: '',
|
||
|
|
region: 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 confirmSelect = () => {
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
// 确认选择
|
||
|
|
const handleConfirm = () => {
|
||
|
|
// TODO: 处理选择逻辑
|
||
|
|
visible.value = false
|
||
|
|
emit('success')
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 获取企业列表
|
||
|
|
*/
|
||
|
|
async function getEnterPriseList() {
|
||
|
|
loading.value = true
|
||
|
|
try {
|
||
|
|
const data = await EnterprisesApi.getEnterprisesPage(enterprise.value.queryParams)
|
||
|
|
enterprise.value.list = data.list
|
||
|
|
enterprise.value.total = data.total
|
||
|
|
} finally {
|
||
|
|
loading.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 打开弹窗时的初始化
|
||
|
|
const open = async () => {
|
||
|
|
// TODO: 初始化数据，例如获取列表等
|
||
|
|
visible.value = true
|
||
|
|
queryParams.value = {
|
||
|
|
enterprisesName: undefined,
|
||
|
|
type: undefined, // 确保这里是 undefined
|
||
|
|
region: undefined,
|
||
|
|
registrationNumber: undefined,
|
||
|
|
id: undefined
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
getEnterPriseList()
|
||
|
|
|
||
|
|
defineExpose({ open })
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.enterprise-container {
|
||
|
|
// ... 样式保持不变 ...
|
||
|
|
|
||
|
|
.search-form {
|
||
|
|
background-color: #fff;
|
||
|
|
padding: 20px 20px 0px 20px;
|
||
|
|
border-radius: 4px;
|
||
|
|
position: relative;
|
||
|
|
margin: 0 20px; // 改用 margin 控制间距
|
||
|
|
.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;
|
||
|
|
justify-content: right;
|
||
|
|
margin-top: 20px; // 确保分页和按钮之间有间距
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center; // 将按钮居中
|
||
|
|
gap: 8px; // 按钮之间的间距
|
||
|
|
padding-top: 20px;
|
||
|
|
margin-top: 20px; // 添
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|