8 changed files with 815 additions and 2176 deletions
@ -1,841 +0,0 @@
|
||||
<template> |
||||
<ContentWrap> |
||||
<section class="taskForm"> |
||||
<div class="title">基本信息</div> |
||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="auto" class="formClass" size="large"> |
||||
|
||||
<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="至" |
||||
size="large" |
||||
start-placeholder="选择开始时间" |
||||
end-placeholder="选择结束时间" |
||||
value-format="YYYY-MM-DD" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="描述" prop="description" style="width: 100%; padding: 0; margin-top: 0px;" class="descClass"> |
||||
<el-input |
||||
type="textarea" |
||||
v-model="formData.description" |
||||
:autosize="{ |
||||
minRows: 5 |
||||
}" |
||||
placeholder="请输入描述" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="任务类型" prop="taskType"> |
||||
<el-select v-model="formData.taskTopType" placeholder="请选择任务优先级" size="large" @change="selectChild"> |
||||
<el-option |
||||
v-for="dict in taskTagTopList" |
||||
:key="dict.id" |
||||
:label="dict.tagName" |
||||
:value="dict.id" |
||||
/> |
||||
</el-select> |
||||
</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.taskType" placeholder="请选择任务选项" > |
||||
<el-option |
||||
v-for="dict in tagChildList" |
||||
:key="dict.id" |
||||
:label="dict.tagName" |
||||
:value="dict.id" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-form> |
||||
</section> |
||||
</ContentWrap> |
||||
<ContentWrap> |
||||
<div class="title">执行范围</div> |
||||
<section class="select-area" v-loading="loading"> |
||||
<section> |
||||
<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.qy" |
||||
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.tagName" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="" prop="type" class="form-item"> |
||||
<el-select |
||||
v-model="enterprise.queryParams.st" |
||||
placeholder="请选择生态" |
||||
> |
||||
<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="请选择污染程度" |
||||
> |
||||
<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="userId" class="form-item"> |
||||
<el-select v-model="enterprise.queryParams.userId" placeholder="请选择执法人员" 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 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> |
||||
<el-form-item class="action-buttons"> |
||||
<el-button @click="insertEnterprise" type="primary"> |
||||
<el-icon><CirclePlus /></el-icon> 新增企业 |
||||
</el-button> |
||||
</el-form-item> |
||||
</div> |
||||
</el-form> |
||||
<section class="enterprise-area" style="border: 1px solid #ebeef5"> |
||||
<el-table |
||||
ref="multipleTableRef" |
||||
:data="enterprise.list" |
||||
@selection-change="handleSelectionChange" |
||||
:cell-style="{ borderBottom: '1px solid #EBEEF5' }" |
||||
:header-cell-style="{ |
||||
borderBottom: '1px solid #EBEEF5', |
||||
backgroundColor: '#F5F7FA' |
||||
}" |
||||
> |
||||
<template #empty> |
||||
<el-empty description="暂无数据" /> |
||||
</template> |
||||
<el-table-column type="selection" width="30" /> |
||||
<el-table-column property="enterprisesName" label="企业名称" min-width="100" /> |
||||
<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="执法人员" min-width="100" /> |
||||
<el-table-column label="操作" align="center" min-width="80px"> |
||||
<template #default="scope"> |
||||
<el-button |
||||
link |
||||
type="danger" |
||||
@click="handleDelete(scope.row.id)" |
||||
> |
||||
删除 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</section> |
||||
<div class="pageArea" v-show="enterprise.total > 0"> |
||||
<div class="selected">已选择 {{ selectedEnterprises.length }} / {{ enterprise.total }} |
||||
<el-button |
||||
link |
||||
type="primary" |
||||
@click="deletedSelected" |
||||
v-show="selectedEnterprises.length > 0" |
||||
> |
||||
删除所选 |
||||
</el-button> |
||||
</div> |
||||
<el-pagination |
||||
:total="enterprise.total" |
||||
:show-page-size="false" |
||||
size="small" |
||||
layout="total, prev, pager, next" |
||||
v-model:page="enterprise.queryParams.pageNo" |
||||
v-model:limit="enterprise.queryParams.pageSize" |
||||
@pagination="getEnterPriseList" |
||||
class="page" |
||||
/> |
||||
</div> |
||||
|
||||
</section> |
||||
|
||||
<div class="footer"> |
||||
<el-button type="primary" @click="submitForm" size="large">创建任务</el-button> |
||||
<el-button @click="submitForm" size="large">返回列表</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="formCreateRef" @success="getList" /> |
||||
</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' |
||||
import { cloneDeep } from 'lodash-es'; |
||||
import { getSimpleUserZGList } from '@/api/system/user' |
||||
|
||||
|
||||
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 formCreateRef = ref() |
||||
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: [] as any, |
||||
queryParams: reactive({ |
||||
pageNo: 1, |
||||
pageSize: 10, |
||||
enterprisesName: undefined, |
||||
qy: undefined, |
||||
hy: undefined, |
||||
st: undefined, |
||||
wr: undefined, |
||||
inviterName: undefined, |
||||
userId: undefined, |
||||
tagList: [] |
||||
}), |
||||
total: ref(0) as any |
||||
}) |
||||
|
||||
//删除所选 |
||||
const deletedSelected = async () => { |
||||
await message.delConfirm() |
||||
|
||||
selectedEnterprises.value.forEach(item=> { |
||||
deleteHandle(item.id) |
||||
}) |
||||
|
||||
} |
||||
|
||||
|
||||
const selectedEnterprises = ref<EnterprisesVO[]>([]) |
||||
const handleSelectionChange = (selectedItems: EnterprisesVO[]) => { |
||||
selectedEnterprises.value = selectedItems |
||||
} |
||||
const handleDelete = async (id: number) => { |
||||
|
||||
// 删除的二次确认 |
||||
await message.delConfirm() |
||||
// 找到目标索引 |
||||
deleteHandle(id) |
||||
} |
||||
|
||||
const deleteHandle = (id: number) => { |
||||
const targetIndex = enterprise.value.list.findIndex(item => item.id === id); |
||||
|
||||
if (targetIndex === -1) return; |
||||
|
||||
// 删除元素（触发响应式更新） |
||||
enterprise.value.list.splice(targetIndex, 1); |
||||
|
||||
enterprise_copy.value = cloneDeep(enterprise.value); |
||||
|
||||
enterprise.value.total = enterprise.value.list.length |
||||
|
||||
// 可选：自动调整分页页码（如果当前页数据被删空） |
||||
const { pageNo, pageSize } = enterprise.value.queryParams; |
||||
const itemsOnCurrentPage = enterprise.value.list.slice( |
||||
(pageNo - 1) * pageSize, |
||||
pageNo * pageSize |
||||
); |
||||
|
||||
if (itemsOnCurrentPage.length === 0 && pageNo > 1) { |
||||
enterprise.value.queryParams.pageNo = pageNo - 1; |
||||
} |
||||
} |
||||
|
||||
const enterprise_copy = ref({ |
||||
list: [] as any, |
||||
queryParams: reactive({ |
||||
pageNo: 1, |
||||
pageSize: 10, |
||||
enterprisesName: undefined, |
||||
qy: undefined, |
||||
hy: undefined, |
||||
st: undefined, |
||||
wr: undefined, |
||||
userId: undefined |
||||
}), |
||||
total: ref(0) as any |
||||
}) |
||||
|
||||
const userList:any = ref() |
||||
|
||||
|
||||
// 检查是否所有条件均为空 |
||||
const isAllConditionsEmpty = computed(() => { |
||||
const params = enterprise.value.queryParams; |
||||
return ( |
||||
!params.enterprisesName && |
||||
!params.qy && |
||||
!params.hy && |
||||
!params.st && |
||||
!params.wr && |
||||
!params.userId |
||||
); |
||||
}); |
||||
|
||||
|
||||
/** 搜索按钮操作 */ |
||||
const handleQuery = () => { |
||||
|
||||
|
||||
const list = filterList(enterprise.value.list) |
||||
|
||||
enterprise.value.list = list |
||||
enterprise.value.total = list?.length |
||||
} |
||||
|
||||
// 动态过滤函数 |
||||
const filterList = (list: EnterprisesVO[]) => { |
||||
if (isAllConditionsEmpty.value) return enterprise_copy.value.list; // 直接返回完整列表 |
||||
if (list.length > 0) { |
||||
const { enterprisesName, qy, hy, st, wr , userId } = enterprise.value.queryParams; |
||||
|
||||
|
||||
return list.filter(item => { |
||||
// 名称匹配（模糊查询） |
||||
const nameMatch = enterprisesName ? |
||||
item.enterprisesName?.toLowerCase().includes(enterprisesName.toLowerCase()) : true; |
||||
// 类型精确匹配 |
||||
const typeMatch = qy ? item.region == qy : true; |
||||
//地区精确匹配 |
||||
const hyMatch = hy ? item.tagList.includes(hy) : true |
||||
|
||||
const stMatch = st ? item.tagList.includes(st) : true |
||||
|
||||
const wrMatch = wr ? item.tagList.includes(wr) : true |
||||
|
||||
const userIdMatch = userId ? item.userId == userId : true |
||||
|
||||
|
||||
// 注册号精确匹配 |
||||
// const regNumMatch = registrationNumber ? |
||||
// item.registrationNumber === registrationNumber : true; |
||||
// // ID精确匹配 |
||||
// const idMatch = id !== undefined ? item.id === id : true; |
||||
|
||||
return nameMatch && typeMatch && hyMatch && stMatch && wrMatch && userIdMatch; |
||||
|
||||
|
||||
}); |
||||
} |
||||
} |
||||
|
||||
|
||||
const insertEnterprise = () => { |
||||
formCreateRef.value.open() |
||||
} |
||||
/** 重置按钮操作 */ |
||||
const resetQuery = () => { |
||||
queryFormRef.value.resetFields() |
||||
handleQuery() |
||||
} |
||||
|
||||
|
||||
//行业 |
||||
const hyList:any = ref([]) |
||||
//生态 |
||||
const stList:any = ref([]) |
||||
//污染程度 |
||||
const wrList:any = ref([]) |
||||
/** |
||||
* 获取标签列表 |
||||
*/ |
||||
async function getTagList() { |
||||
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 |
||||
} |
||||
const defaultProps = { |
||||
label: 'tagName', // 使用 'name' 字段作为选项的标签 |
||||
children: 'children' // 如果存在子节点，则使用 'children' 字段 |
||||
} |
||||
|
||||
/** |
||||
* 单选企业 |
||||
* @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() { |
||||
//把所有数据转成 id的数组 |
||||
|
||||
const validate = await unref(formRef).validate() |
||||
if (validate) { |
||||
const data = JSON.parse(JSON.stringify(formData.value)) |
||||
|
||||
enterprise.value.list |
||||
|
||||
//任务状态默认初始值1 |
||||
data.status = 1 |
||||
console.log('任务类型：', formData.value.taskType) |
||||
// data.enterpriseIds = formData.value.enterprises.map((i) => i.id) |
||||
|
||||
|
||||
if (enterprise.value.list.length == 0) { |
||||
message.success('温馨提示：请您选择执法对象') |
||||
} else { |
||||
if (data.status < 2) { |
||||
data.startDate = data.planTime[0] |
||||
data.endDate = data.planTime[1] |
||||
|
||||
data.enterpriseIds = enterprise.value.list.map(i=>i.id) |
||||
|
||||
console.log('data', data) |
||||
|
||||
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('温馨提示：该任务已经执行,无法再进行修改') |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
// async function taskTopType() { |
||||
// const data = TagLibraryApi.getTagLibraryPage() |
||||
// } |
||||
|
||||
//任务顶级标签列表 |
||||
const taskTagTopList:any = ref([]) |
||||
//任务二级标签列表 |
||||
const tagChildList:any = ref([]) |
||||
|
||||
async function taskTopQuery() { |
||||
const params = { |
||||
tagType: 2 |
||||
} |
||||
|
||||
const data = await TagLibraryApi.getTagLibraryPage(params) |
||||
taskTagTopList.value = data |
||||
} |
||||
|
||||
async function init() { |
||||
|
||||
//执法人员列表 |
||||
const userData = await getSimpleUserZGList() |
||||
userList.value = userData |
||||
|
||||
//任务类型列表 |
||||
taskTopQuery() |
||||
|
||||
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) |
||||
}) |
||||
} |
||||
} |
||||
|
||||
const selectChild = (value: any) => { |
||||
const data = taskTagTopList.value.find(item=>item.id == value) |
||||
console.log('daratata', data.children) |
||||
tagChildList.value = data.children |
||||
} |
||||
|
||||
function getList(data) { |
||||
enterprise.value.list.push(...data) |
||||
//去重 |
||||
enterprise.value.list = uniqueFunc(enterprise.value.list, 'id') |
||||
enterprise.value.total = enterprise.value.list.length |
||||
enterprise_copy.value = cloneDeep(enterprise.value); |
||||
|
||||
} |
||||
|
||||
// getEnterPriseList() |
||||
getTagList() |
||||
onMounted(() => { |
||||
init() |
||||
}) |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
|
||||
|
||||
|
||||
.title { |
||||
font-size: 16px; |
||||
font-weight: bold; |
||||
margin: 20px; |
||||
font-size: 17px; |
||||
} |
||||
|
||||
.taskForm{ |
||||
padding-right: 20px; |
||||
|
||||
.formClass { |
||||
display: grid; |
||||
grid-template-columns: repeat(3, 1fr); |
||||
grid-template-rows: repeat(2, 1fr); |
||||
align-items: center; |
||||
gap: 20px; |
||||
width: 100%; |
||||
|
||||
|
||||
.descClass { |
||||
grid-row: span 2; |
||||
flex: 1 0 0; |
||||
align-self: stretch; |
||||
|
||||
} |
||||
|
||||
::v-deep(.el-form-item) { |
||||
width: 100%; |
||||
align-items: flex-start; |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
.pageArea{ |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
font-size: 13px; |
||||
padding: 20px 1.5%; |
||||
|
||||
} |
||||
|
||||
.enterprise-area { |
||||
flex: 1; |
||||
gap: 10px; |
||||
margin: 0 20px; // 添加与搜索框相同的边距 |
||||
overflow-x: hidden; // 添加这行 |
||||
width: calc(100% - 40px); // 添加这行q |
||||
::v-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); |
||||
align-items: center; |
||||
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; |
||||
border-radius: 4px; |
||||
margin: 0 20px; // 改用 margin 控制间距 |
||||
.form-container { |
||||
display: grid; |
||||
grid-template-columns: repeat(4, 1fr); |
||||
gap: 20px; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.form-item { |
||||
margin: 0; |
||||
width: 100%; |
||||
|
||||
:deep(.el-input), |
||||
:deep(.el-select) { |
||||
width: 100%; |
||||
} |
||||
} |
||||
.action-buttons { |
||||
display: flex; |
||||
justify-content: flex-end; /* 水平右对齐 */ |
||||
align-items: center; |
||||
width: 100%; |
||||
button{ |
||||
margin-left: auto; |
||||
margin-top: auto; |
||||
|
||||
} |
||||
} |
||||
|
||||
.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> |
||||
@ -1,170 +0,0 @@
|
||||
<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> |
||||
@ -1,350 +0,0 @@
|
||||
<template> |
||||
|
||||
<el-dialog |
||||
v-model="visible" |
||||
title="筛选企业" |
||||
width="1200px" |
||||
style="padding: 40px; " |
||||
top="5vh" |
||||
: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" |
||||
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="hy" 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="userId" 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" |
||||
size="large" |
||||
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="inviterName" label="执法人员" > |
||||
<template #default="scope"> |
||||
{{scope.row.inviterName}} | {{scope.row.inviterNameDept}} |
||||
</template> |
||||
</el-table-column> |
||||
</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" size="large">确认选择</el-button> |
||||
<el-button @click="handleClose" size="large">关闭窗口</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 { 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: [], |
||||
isAudit: true |
||||
}), |
||||
total: ref(0) |
||||
}) |
||||
|
||||
// 控制弹窗显示 |
||||
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 = () => { |
||||
visible.value = false |
||||
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.tagList.push(enterprise.value.queryParams.hy) |
||||
} |
||||
|
||||
|
||||
try { |
||||
const data = await EnterprisesApi.getEnterpriseByUserId(enterprise.value.queryParams) |
||||
enterprise.value.list = data.list |
||||
enterprise.value.total = data.total |
||||
console.log('enterprise.value.list=>', enterprise.value.list) |
||||
} finally { |
||||
loading.value = false |
||||
enterprise.value.queryParams.tagList = [] |
||||
|
||||
} |
||||
} |
||||
// 打开弹窗时的初始化 |
||||
const open = async () => { |
||||
// TODO: 初始化数据，例如获取列表等 |
||||
visible.value = true |
||||
getEnterPriseList() |
||||
|
||||
} |
||||
|
||||
/** 搜索按钮操作 */ |
||||
const handleQuery = () => { |
||||
enterprise.value.queryParams.pageNo = 1 |
||||
getEnterPriseList() |
||||
} |
||||
|
||||
const queryFormRef = ref() |
||||
/** 重置按钮操作 */ |
||||
const resetQuery = () => { |
||||
queryFormRef.value.resetFields() |
||||
getEnterPriseList() |
||||
} |
||||
|
||||
//行业 |
||||
const hyList: any = ref([]) |
||||
|
||||
//执法人员列表 |
||||
const userList:any = ref() |
||||
|
||||
async function init() { |
||||
try { |
||||
const codeList = 'codeList=hy' |
||||
const data = await TagLibraryApi.tagLibraryList(codeList) |
||||
hyList.value = data[0].children |
||||
|
||||
} finally { |
||||
} |
||||
|
||||
const userData = await getSimpleUserZGList() |
||||
|
||||
userList.value = userData |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
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(3, 1fr); |
||||
gap: 24px; |
||||
margin-bottom: 20px; |
||||
width: 100%; |
||||
} |
||||
|
||||
.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