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"
            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">
          <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>
    <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
    >
  </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()
}
/**
 * 获取标签列表
 */
function getTagList() {
  TagLibraryApi.getTagLibraryPage({ tagType: 2 }).then((res) => {
    tagList.value = res
  })
}
const defaultProps = {
  label: 'tagName', // 使用 'name' 字段作为选项的标签
  children: 'children' // 如果存在子节点，则使用 'children' 字段
}
/**
 * 获取企业列表
 */
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))
    //任务状态默认初始值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)
    })
  }
}
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>