HB
/
yudao-web
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

创建任务页面优化

master
DX 1 month ago
parent
47a10cebf7
commit
a778e2a7ea
8 changed files with 1116 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/api/system/user/index.ts
  2. BIN
      src/assets/imgs/no_data.png
  3. 22
      src/views/system/user/index.vue
  4. 616
      src/views/task/create copy.vue
  5. 2
      src/views/task/create.vue
  6. 170
      src/views/task/create2.vue
  7. 301
      src/views/task/createEnterprise.vue
  8. 2
      src/views/task/index.vue

6
src/api/system/user/index.ts
Unescape View File

@ -56,6 +56,12 @@ export const deleteUser = (id: number) => {
return request.delete({ url: '/system/user/delete?id=' + id }) return request.delete({ url: '/system/user/delete?id=' + id })
} }
// 删除用户
export const deleteUserAllData = (id: number) => {
return request.delete({ url: '/system/user/test_delete?id=' + id })
}
// 导出用户 // 导出用户
export const exportUser = (params) => { export const exportUser = (params) => {
return request.download({ url: '/system/user/export', params }) return request.download({ url: '/system/user/export', params })

BIN
src/assets/imgs/no_data.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

22
src/views/system/user/index.vue
Unescape View File

@ -156,6 +156,12 @@
> >
<Icon icon="ep:delete" />删除 <Icon icon="ep:delete" />删除
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item
command="handleDelete2"
v-if="checkPermi(['system:user:deleteAllData'])"
>
<Icon icon="ep:delete" />测试删除全部数据
</el-dropdown-item>
<el-dropdown-item <el-dropdown-item
command="handleResetPwd" command="handleResetPwd"
v-if="checkPermi(['system:user:update-password'])" v-if="checkPermi(['system:user:update-password'])"
@ -332,6 +338,9 @@ const handleCommand = (command: string, row: UserApi.UserVO) => {
case 'handleRole': case 'handleRole':
handleRole(row) handleRole(row)
break break
case 'handleDelete2':
handleDelete2(row.id)
break
default: default:
break break
} }
@ -350,6 +359,19 @@ const handleDelete = async (id: number) => {
} catch {} } catch {}
} }
/** 删除按钮操作 */
const handleDelete2 = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await UserApi.deleteUserAllData(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 重置密码 */ /** 重置密码 */
const handleResetPwd = async (row: UserApi.UserVO) => { const handleResetPwd = async (row: UserApi.UserVO) => {
try { try {

616
src/views/task/create copy.vue
Unescape View File

@ -0,0 +1,616 @@
<template>
<ContentWrap title="基本信息">
<section class="taskForm">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="auto">
<el-form-item label="标题" prop="title">
<el-input v-model="formData.title" placeholder="请输入任务标题" />
</el-form-item>
<el-form-item label="时间周期" prop="planTime">
<el-date-picker
v-model="formData.planTime"
type="daterange"
format="YYYY年MM月DD日"
range-separator="至"
start-placeholder="选择任务计划开始时间"
end-placeholder="选择任务计划结束时间"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item label="类型" prop="taskType">
<el-tree-select
v-model="formData.taskType"
:data="tagList"
:props="defaultProps"
check-strictly
node-key="id"
placeholder="请选择任务类型"
/>
</el-form-item>
<el-form-item label="执行周期" prop="execCycle" v-if="formData.taskType == 2">
<el-select v-model="formData.execCycle" placeholder="请选择执行周期">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.TASK_EXEC_TIME)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="优先级" prop="priority">
<el-select v-model="formData.priority" placeholder="请选择任务优先级">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.TASK_PRIORITY)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<!-- <el-form-item label="标签" prop="tags" style="width: 100%">-->
<!-- <el-tree-select-->
<!-- v-model="formData.tags"-->
<!-- :data="tagList"-->
<!-- check-strictly-->
<!-- :render-after-expand="false"-->
<!-- placeholder="请选择标签"-->
<!-- node-key="id"-->
<!-- show-checkbox-->
<!-- multiple-->
<!-- :props="{-->
<!-- label: 'tagName'-->
<!-- }"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item label="描述" prop="description" style="width: 100%">
<el-input
type="textarea"
v-model="formData.description"
:autosize="{
minRows: 3
}"
placeholder="请输入描述"
/>
</el-form-item>
</el-form>
</section>
</ContentWrap>
<ContentWrap title="执行范围">
<!-- <template #header> </template> -->
<section class="select-area" v-loading="loading">
<section>
<el-form :model="enterprise.queryParams" ref="queryFormRef" :inline="true" label-width="0" 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
@clear="handleQuery"
@change="handleQuery"
>
<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.type"
placeholder="请选择行业"
clearable
@change="handleQuery"
@clear="handleQuery"
>
<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="enterprise.queryParams.type"
placeholder="请选择生态"
clearable
@change="handleQuery"
@clear="handleQuery"
>
<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="enterprise.queryParams.type"
placeholder="请选择类型"
clearable
@change="handleQuery"
@clear="handleQuery"
>
<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="enterprisesName" class="form-item">
<el-input
v-model="enterprise.queryParams.enterprisesName"
placeholder="请选择执法人员"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="" prop="enterprisesName" class="form-item">
<el-input
v-model="enterprise.queryParams.enterprisesName"
placeholder="请输入企业名称"
clearable
@keyup.enter="handleQuery"
/>
</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>
<el-form-item class="action-buttons" >
<el-button @click="insertEnterprise" type="primary">
<el-icon><CirclePlus /></el-icon> &nbsp; 新增企业
</el-button>
</el-form-item>
</div>
</el-form>
<section class="enterprise-area">
<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'
}"
>
<template #empty>
<div class="no-data">
<el-image src="/src/assets/imgs/no_data.png" style="width: 120px;" />
<p>暂无数据</p>
</div>
</template>
<el-table-column type="selection" width="30"/>
<el-table-column property="enterprisesName" label="企业名称" min-width="100" />
<el-table-column property="region" label="区域" min-width="100">
<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="行业" min-width="100" />
<el-table-column property="enterprisesName" label="生态" min-width="100" />
<el-table-column property="enterprisesName" label="类型" min-width="100" />
<el-table-column property="enterprisesName" label="执法人员" min-width="100" />
</el-table>
</section>
<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"
/>
</section>
<div class="footer">
<el-button type="primary" @click="submitForm">提 交</el-button>
<el-button
type="primary" @click="submitForm" v-hasPermi="['system:enterprise-inspections:audit']">审核通过</el-button>
<el-button
type="danger"
@click="submitForm"
v-hasPermi="['system:enterprise-inspections:audit']"
>删除</el-button>
</div>
</section>
</ContentWrap>
<CreateEnterprise ref="formRef"/>
</template>
<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import { TagLibraryApi } from '@/api/system/taglibrary'
import { EnterprisesApi, EnterprisesVO } from '@/api/enterprises'
import { TaskInfoApi } from '@/api/system/taskinfo'
import { useTagsViewStore} from '@/store/modules/tagsView'
import {defaultProps} from "@/utils/tree";
import CreateEnterprise from './createEnterprise.vue'
defineOptions({ name: 'CreateTask' })
const loading = ref(false)
const formData = ref({
id: undefined,
title: undefined,
description: undefined,
execCycle: undefined,
taskType: undefined,
priority: undefined,
status: undefined,
startDate: undefined,
endDate: undefined,
createBy: undefined,
updateBy: undefined,
parentId: undefined,
parentType: undefined,
taskStep: undefined,
taskTotal: undefined,
planTime: [] as any,
tags: [],
enterprises: [] as any
})
const router=useRouter()
const route=useRoute()
const tagView=useTagsViewStore()
const message = useMessage() // 消息弹窗
const formRules = reactive({
title: [{ required: true, message: '任务标题不能为空', trigger: 'blur' }],
taskType: [
{
required: true,
message: '任务类型不能为空',
trigger: 'change'
}
],
planTime: [{ required: true, message: '时间周期不能为空', trigger: 'blur' }]
})
const {query}=useRoute()
const formRef = ref() // 表单 Ref`
const tagList = ref([])
const queryFormRef = ref() // 搜索的表单
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 handleQuery = () => {
enterprise.value.queryParams.pageNo = 1
getEnterPriseList()
}
const insertEnterprise = () => {
formRef.value.open()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/**
* 获取标签列表
*/
function getTagList() {
TagLibraryApi.getTagLibraryPage({tagType:2}).then((res) => {
tagList.value = res
})
}
const defaultProps = {
label: 'tagName', // 使用 'name' 字段作为选项的标签
children: 'children', // 如果存在子节点，则使用 'children' 字段
};
/**
* 获取企业列表
*/
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
}
}
/**
* 全选
*/
async function selectAll() {
loading.value = true
const data = JSON.parse(JSON.stringify(enterprise.value.queryParams));
data.pageSize = -1
delete data.pageNo
const { list } = await EnterprisesApi.getEnterprisesPage(data)
const arr = [...formData.value.enterprises, ...list]
formData.value.enterprises = uniqueFunc(arr, 'id')
loading.value = false
}
/**
* 取消全选
*/
async function cancelAll() {
loading.value = true
const data = JSON.parse(JSON.stringify(enterprise.value.queryParams));
data.pageSize = -1
delete data.pageNo
const { list } = await EnterprisesApi.getEnterprisesPage(data)
if (list) {
formData.value.enterprises = formData.value.enterprises.filter((e) => {
return !list.some((r) => e.id == r.id)
})
}
loading.value = false
}
/**
* 单选企业
* @param enterprise
*/
function selectEnterprise(enterprise) {
formData.value.enterprises.push(enterprise)
}
/**
* 单选取消
* @param enterprise
*/
function checkEnterprise(enterprise) {
formData.value.enterprises = formData.value.enterprises.filter((e) => e.id != enterprise.id)
}
/**
* 数组去重
* @param arr
* @param uniId 唯一id
* @returns
*/
function uniqueFunc(arr, uniId) {
const res = new Map()
return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1))
}
/**
* 提交表单
*/
async function submitForm() {
const validate = await unref(formRef).validate()
if (validate) {
const data = JSON.parse(JSON.stringify(formData.value))
//任务状态默认初始值1
data.status=1;
console.log("任务类型：",formData.value.taskType)
data.enterpriseIds = formData.value.enterprises.map((i) => i.id)
if(data.enterpriseIds.length==0){
message.success("温馨提示：请您选择执法对象")
}else{
if(data.status<2){
data.startDate = data.planTime[0]
data.endDate = data.planTime[1]
if (data.id) {
TaskInfoApi.updateTaskInfo(data).then(() => {
message.success('操作成功')
tagView.delView(route)
router.go(-1)
})
} else {
TaskInfoApi.createTaskInfo(data).then(() => {
message.success('操作成功')
tagView.delView(route)
router.go(-1)
})
}
}else{
message.success('温馨提示：该任务已经执行,无法再进行修改')
}
}
}
}
function init(){
if(query.id){
TaskInfoApi.getTaskInfo(query.id).then(res=>{
formData.value=res
formData.value.planTime=[formData.value.startDate,formData.value.endDate]
formData.value.enterprises=res.enterpriseIdes
formData.value.tags=res.taskTagIdes.map(t=>t.tagId)
})
}
}
// getEnterPriseList()
getTagList()
onMounted(()=>{
init()
})
</script>
<style scoped lang="scss">
::v-deep .ContentWrap .el-card__header {
text-decoration: none !important; /* 去除下划线 */
border-bottom: 0px solid #ebeef5 !important;
padding-left: 20px;
}
::v-deep(.taskForm .el-form) {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
gap: 10px;
.el-form-item {
width: calc(50% - 10px);
display: flex;
align-items: flex-start;
}
}
.enterprise-area {
flex: 1;
gap: 10px;
margin: 0 20px; // 添加与搜索框相同的边距
overflow-x: hidden; // 添加这行
width: calc(100% - 40px); // 添加这行
:deep(.el-table) {
width: 100% !important; // 添加这行
.el-table__cell {
text-align: center;
}
}
:deep(.no-data) {
padding: 30px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
p {
margin-top: 10px;
color: #909399;
}
}
.enterprise {
cursor: pointer;
box-shadow: 0 0 1px 1px #eaeaea;
border-radius: 6px;
padding: 10px;
transition: 0.2s all;
margin-bottom: 5px;
&:hover {
box-shadow: 0 0 1px 1px #ccc;
}
}
}
.check-area {
border: 1px dashed #ccc;
border-radius: 6px;
overflow: hidden;
overflow-y: scroll;
height: 550px;
max-height: 550px;
scroll-behavior: smooth;
padding: 10px;
display: flex;
flex-flow: row wrap;
gap: 10px;
align-content: flex-start;
&::-webkit-scrollbar {
width: 3px;
height: 100%;
padding: 2px;
}
&::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 5px;
}
.isChecked {
width: calc(100% / 4 - 10px);
height: 80px;
color: #fff;
background-color: var(--el-color-primary);
padding: 5px 10px;
box-shadow: 0px 0px 1px 1px #ccc;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
}
.total {
width: 100%;
margin-top: 10px;
text-align: right;
}
.select-area {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: minmax(0, 1fr);
grid-gap: 20px;
::v-deep(.select-area .el-form) {
margin-bottom: 15px;
.el-form-item {
margin-right: 10px;
margin-bottom: 10px;
}
}
:deep(.el-form) {
margin-bottom: 15px;
.el-form-item {
margin-right: 10px;
margin-bottom: 10px;
}
}
.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: 10px; // 确保分页和按钮之间有间距
}
.footer {
display: flex;
justify-content: center; // 将按钮居中
gap: 8px; // 按钮之间的间距
padding-top: 20px;
margin: 10px; // 添
}
}
</style>

2
src/views/task/create.vue
Unescape View File

@ -75,7 +75,7 @@
</section> </section>
</ContentWrap> </ContentWrap>
<ContentWrap title="执行范围"> <ContentWrap title="执行范围">
<template #header> </template> <!-- <template #header> </template> -->
<section class="select-area" v-loading="loading"> <section class="select-area" v-loading="loading">
<section> <section>
<el-form :model="enterprise.queryParams" ref="queryFormRef" :inline="true" label-width="0"> <el-form :model="enterprise.queryParams" ref="queryFormRef" :inline="true" label-width="0">

170
src/views/task/create2.vue
Unescape View File

@ -0,0 +1,170 @@
<template>
<ContentWrap title="基本信息">
<section class="taskForm">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="任务标题" prop="title">
<el-input v-model="formData.title" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="任务周期" prop="planTime">
<el-date-picker
v-model="formData.planTime"
type="daterange"
start-placeholder="选择日期"
end-placeholder="选择日期"
value-format="YYYY-MM-DD"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="任务类型" prop="taskType">
<el-select v-model="formData.taskType" placeholder="请选择">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.TASK_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="任务描述" prop="description">
<el-input
type="textarea"
v-model="formData.description"
:autosize="{ minRows: 3 }"
placeholder="请输入"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</section>
</ContentWrap>
<ContentWrap title="执行范围">
<section class="select-area">
<el-row :gutter="20">
<el-col :span="24">
<el-form :inline="true" :model="enterprise.queryParams">
<el-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>
<el-select v-model="enterprise.queryParams.type" placeholder="请选择行业" clearable>
<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>
<el-select v-model="enterprise.queryParams.life" placeholder="请选择生态" clearable>
<el-option label="水质污染" value="1" />
<el-option label="大气污染" value="2" />
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="enterprise.queryParams.type" placeholder="请选择类型" clearable>
<el-option label="危险企业" value="1" />
<el-option label="一般企业" value="2" />
</el-select>
</el-form-item>
<el-form-item>
<el-input
v-model="enterprise.queryParams.enterprisesName"
placeholder="请输入执法人员"
clearable
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">
<Icon icon="ep:search" /> 查询
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" /> 重置
</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-table :data="enterprise.list" style="width: 100%" v-loading="loading">
<el-table-column type="selection" width="55" />
<el-table-column prop="enterprisesName" label="企业名称" />
<el-table-column prop="region" label="区域">
<template #default="scope">
<DictTag :type="DICT_TYPE.ENTERPRISES_AREA" :value="scope.row.region" />
</template>
</el-table-column>
<el-table-column prop="type" label="行业" />
<el-table-column prop="life" label="生态" />
<el-table-column prop="type" label="类型" />
<el-table-column prop="person" label="执法人员" />
<el-table-column label="操作" width="100">
<template #default="scope">
<el-button link type="primary" @click="selectEnterprise(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<el-pagination
v-model:current-page="enterprise.queryParams.pageNo"
v-model:page-size="enterprise.queryParams.pageSize"
:total="enterprise.total"
layout="prev, pager, next"
/>
</div>
</section>
</ContentWrap>
<ContentWrap>
<div class="flex justify-center gap-20px">
<el-button type="primary" @click="submitForm">创建任务</el-button>
<el-button @click="router.back()">返回列表</el-button>
</div>
</ContentWrap>
</template>
<style scoped lang="scss">
.taskForm {
padding: 20px;
.el-form {
.el-form-item {
margin-bottom: 20px;
}
}
}
.select-area {
padding: 20px;
.el-form {
margin-bottom: 20px;
}
.pagination-container {
margin-top: 20px;
text-align: center;
}
}
.el-table {
margin: 20px 0;
}
</style>

301
src/views/task/createEnterprise.vue
Unescape View File

@ -0,0 +1,301 @@
<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>

2
src/views/task/index.vue
Unescape View File

@ -294,8 +294,6 @@ const taskExec = async (data) => {
loading.value = false loading.value = false
} }
} }
//选择任务中企业范围 //选择任务中企业范围

Write Preview
Loading…
Cancel
Save