10 changed files with 539 additions and 113 deletions
@ -1,9 +1,470 @@ |
|||||||
<template> |
<template> |
||||||
<ContentWrap > 创建任务 </ContentWrap> |
<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" |
||||||
|
value-format="x" |
||||||
|
range-separator="至" |
||||||
|
start-placeholder="选择任务计划开始时间" |
||||||
|
end-placeholder="选择任务计划结束时间" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<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-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-180px" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="" prop="type"> |
||||||
|
<el-select |
||||||
|
v-model="enterprise.queryParams.type" |
||||||
|
placeholder="请选择企业类型" |
||||||
|
clearable |
||||||
|
@change="handleQuery" |
||||||
|
@clear="handleQuery" |
||||||
|
class="!w-180px" |
||||||
|
> |
||||||
|
<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-180px" |
||||||
|
> |
||||||
|
<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-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 }} |
||||||
|
</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> |
</template> |
||||||
|
|
||||||
<script setup lang="ts"> |
<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' |
||||||
|
|
||||||
defineOptions({ name: 'CreateTask' }) |
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: [], |
||||||
|
tags: [], |
||||||
|
enterprises: ref<any>([]) |
||||||
|
}) |
||||||
|
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 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 |
||||||
|
}), |
||||||
|
total: ref(0) |
||||||
|
}) |
||||||
|
/** 搜索按钮操作 */ |
||||||
|
const handleQuery = () => { |
||||||
|
enterprise.value.queryParams.pageNo = 1 |
||||||
|
getEnterPriseList() |
||||||
|
} |
||||||
|
|
||||||
|
/** 重置按钮操作 */ |
||||||
|
const resetQuery = () => { |
||||||
|
queryFormRef.value.resetFields() |
||||||
|
handleQuery() |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 获取标签列表 |
||||||
|
*/ |
||||||
|
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 = enterprise.value.queryParams |
||||||
|
data.pageNo = -1 |
||||||
|
const res = await EnterprisesApi.getEnterprisesPage(enterprise.value.queryParams) |
||||||
|
const arr = [...formData.value.enterprises, ...res.list] |
||||||
|
formData.value.enterprises = uniqueFunc(arr, 'id') |
||||||
|
loading.value = false |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 取消全选 |
||||||
|
*/ |
||||||
|
async function cancelAll() { |
||||||
|
loading.value = true |
||||||
|
const data = enterprise.value.queryParams |
||||||
|
data.pageNo = -1 |
||||||
|
const { list } = await EnterprisesApi.getEnterprisesPage(enterprise.value.queryParams) |
||||||
|
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() |
||||||
|
console.log(validate, formData.value) |
||||||
|
if (validate) { |
||||||
|
const data = formData.value |
||||||
|
data.enterprises = formData.value.enterprises.map((i) => i.id) |
||||||
|
data.startDate = data.planTime[0] |
||||||
|
data.endDate = data.planTime[1] |
||||||
|
if (data.id) { |
||||||
|
} else { |
||||||
|
TaskInfoApi.createTaskInfo(data).then(() => { |
||||||
|
message.success('操作成功') |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
getEnterPriseList() |
||||||
|
getTagList() |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style scoped lang="scss"></style> |
<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: 50px; |
||||||
|
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> |
||||||
|
|||||||
Loading…
Reference in new issue