<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="选择任务计划结束时间"
/>
</el-form-item>
<el-form-item label="类型" prop="taskType">
<el-tree-select
v-model="formData.taskType"
:data="typeList"
: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">
<el-form-item label="" prop="enterprisesName">
<el-input
v-model="enterprise.queryParams.enterprisesName"
placeholder="请输入企业名称"
clearable
@keyup.enter="handleQuery"
class="!w-150px"
/>
</el-form-item>
<el-form-item label="" prop="type">
<el-select
v-model="enterprise.queryParams.type"
placeholder="请选择企业规模"
clearable
@change="handleQuery"
@clear="handleQuery"
class="!w-150px"
>
<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">
<el-select
v-model="enterprise.queryParams.region"
placeholder="请选择所属区域"
clearable
@clear="handleQuery"
@change="handleQuery"
class="!w-150px"
>
<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="id">-->
<!-- <el-select-->
<!-- v-model="enterprise.queryParams.id"-->
<!-- placeholder="请选择企业资质"-->
<!-- clearable-->
<!-- @clear="handleQuery"-->
<!-- @change="handleQuery"-->
<!-- class="!w-150px"-->
<!-- >-->
<!-- <el-option-->
<!-- v-for="dict in getStrDictOptions(DICT_TYPE.ENTERPRISES_QUA)"-->
<!-- :key="dict.value"-->
<!-- :label="dict.label"-->
<!-- :value="dict.value"-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-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-button-group>
<el-button type="primary" @click="selectAll()"> 选择全部 </el-button>
<el-button type="danger" @click="cancelAll()"> 排除全部 </el-button>
</el-button-group>
</el-form-item>
</el-form>
<section class="enterprise-area">
<section
v-for="enterprise in enterprise.list"
:key="enterprise.id"
class="enterprise flex flex-col justify-around"
>
<section class="flex justify-between">
<span>
{{ enterprise.enterprisesName }}
</span>
<section class="flex gap-5px">
<DictTag :type="DICT_TYPE.ENTERPRISES_AREA" :value="Number(enterprise.region)" />
<DictTag :type="DICT_TYPE.ENTERPRISES_TYPE" :value="Number(enterprise.type)" />
</section>
<el-button
type="primary"
size="small"
plain
@click="selectEnterprise(enterprise)"
v-show="formData.enterprises.findIndex((e) => e.id == enterprise.id) == -1"
>
选择
</el-button>
<el-button
type="danger"
size="small"
plain
@click="checkEnterprise(enterprise)"
v-show="formData.enterprises.findIndex((e) => e.id == enterprise.id) > -1"
>
排除
</el-button>
</section>
</section>
</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>
<section>
<section class="check-area">
<section v-for="item in formData.enterprises" :key="item.id" class="isChecked" >
<el-tooltip :content="item.enterprisesName" placement="top">
<span >
企业名称：{{ item.enterprisesName }}
<section class="flex gap-5px">
区域: <DictTag :type="DICT_TYPE.ENTERPRISES_AREA" :value="Number(item.region)" />
规模：<DictTag :type="DICT_TYPE.ENTERPRISES_TYPE" :value="Number(item.type)" />
</section>
</span>
</el-tooltip>
<el-icon @click="checkEnterprise(item)"><Close /></el-icon>
</section>
<el-empty
description="待选择"
v-if="formData.enterprises?.length == 0"
class="w-100% h-100%"
/>
</section>
<section class="total">
<el-tag type="primary" size="large" class="font-800">
共选择
<count-to :end-val="formData.enterprises.length" />
家企业
</el-tag></section
>
</section>
</section>
</ContentWrap>
<ContentWrap>
<el-button type="primary" @click="submitForm">提 交</el-button>
</ContentWrap>
</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";
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 resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
//
typeList.value = handleTree(await DeptApi.getSimpleDeptList())
/**
* 获取标签列表
*/
function getTagList() {
TagLibraryApi.getTagLibraryPage({}).then((res) => {
tagList.value = res
})
}
/**
* 获取企业列表
*/
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))
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(.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;
height: 450px;
.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: 1fr 1.5fr;
height: 600px;
grid-gap: 20px;
::v-deep(.select-area .el-form) {
margin-bottom: 15px;
.el-form-item {
margin-right: 10px;
margin-bottom: 10px;
}
}
}
</style>