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.
734 lines
21 KiB
734 lines
21 KiB
<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.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.id" |
|
/> |
|
</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="enterprisesName" class="form-item"> |
|
<el-input |
|
v-model="enterprise.queryParams.inviterName" |
|
placeholder="请选择执法人员" |
|
clearable |
|
/> |
|
</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"> |
|
<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> 新增企业 |
|
</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> |
|
<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-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> |
|
<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" @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'; |
|
|
|
|
|
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: [] as any, |
|
queryParams: reactive({ |
|
pageNo: 1, |
|
pageSize: 9, |
|
enterprisesName: undefined, |
|
qy: undefined, |
|
hy: undefined, |
|
st: undefined, |
|
wr: undefined, |
|
inviterName: undefined |
|
}), |
|
total: ref(0) as any |
|
}) |
|
|
|
|
|
const handleDelete = (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: 9, |
|
enterprisesName: undefined, |
|
qy: undefined, |
|
hy: undefined, |
|
st: undefined, |
|
wr: undefined, |
|
inviterName: undefined |
|
}), |
|
total: ref(0) as any |
|
}) |
|
|
|
// 检查是否所有条件均为空 |
|
const isAllConditionsEmpty = computed(() => { |
|
const params = enterprise.value.queryParams; |
|
return ( |
|
!params.enterprisesName && |
|
!params.qy && |
|
!params.hy && |
|
!params.st && |
|
!params.wr && |
|
!params.inviterName |
|
); |
|
}); |
|
|
|
|
|
/** 搜索按钮操作 */ |
|
const handleQuery = () => { |
|
|
|
const list = filterList(enterprise.value.list) |
|
|
|
console.log('listlist', 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 , inviterName } = 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 regionMatch = hy ? item.region === region : true; |
|
// // 注册号精确匹配 |
|
// const regNumMatch = registrationNumber ? |
|
// item.registrationNumber === registrationNumber : true; |
|
// // ID精确匹配 |
|
// const idMatch = id !== undefined ? item.id === id : true; |
|
|
|
// return nameMatch && typeMatch && regionMatch && regNumMatch && idMatch; |
|
|
|
return nameMatch && typeMatch |
|
|
|
}); |
|
} |
|
} |
|
// // 计算属性：过滤后的全部数据 |
|
// const filteredData = computed(() => { |
|
// return filterList(enterprise.value.list); |
|
// }); |
|
|
|
// 计算属性：当前页数据 |
|
// const pagedData = computed(() => { |
|
// const { pageNo, pageSize } = enterprise.value.queryParams; |
|
// const start = (pageNo - 1) * pageSize; |
|
// const end = start + pageSize; |
|
// return filteredData.value.slice(start, end); |
|
// }); |
|
|
|
// // 更新总条数（监听过滤结果变化） |
|
// watch(filteredData, (newList) => { |
|
// enterprise.value.total = newList.length; |
|
// }, { immediate: true }); |
|
|
|
|
|
|
|
const insertEnterprise = () => { |
|
formRef.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' 字段 |
|
} |
|
|
|
/** |
|
* 全选 |
|
*/ |
|
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) |
|
}) |
|
} |
|
} |
|
|
|
function getList(data) { |
|
enterprise.value.list.push(...data) |
|
enterprise.value.total = enterprise.value.list.length |
|
enterprise_copy.value = cloneDeep(enterprise.value); |
|
|
|
} |
|
|
|
// getEnterPriseList() |
|
getTagList() |
|
onMounted(() => { |
|
init() |
|
}) |
|
</script> |
|
<style scoped lang="scss"> |
|
::v-deep(.el-card__header) { |
|
border-bottom: 0; |
|
} |
|
|
|
::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); // 添加这行 |
|
::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); |
|
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>
|
|
|