yudao-web/src/views/task/create.vue

<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"
            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>

<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' })

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>

<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>