yudao-web/src/views/task/create copy.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"  class="search-form">
          <div class="form-container">
            <el-form-item label="" prop="region" class="form-item">
              <el-select
                v-model="enterprise.queryParams.region"
                placeholder="请选择所属区域"
                clearable
                @clear="handleQuery"
                @change="handleQuery"
              >
                <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.type"
                placeholder="请选择行业"
                clearable
                @change="handleQuery"
                @clear="handleQuery"
              >
                <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="type" class="form-item">
              <el-select
                v-model="enterprise.queryParams.type"
                placeholder="请选择生态"
                clearable
                @change="handleQuery"
                @clear="handleQuery"
              >
                <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="type" class="form-item">
              <el-select
                v-model="enterprise.queryParams.type"
                placeholder="请选择类型"
                clearable
                @change="handleQuery"
                @clear="handleQuery"
              >
                <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="enterprisesName" class="form-item">
              <el-input
                v-model="enterprise.queryParams.enterprisesName"
                placeholder="请选择执法人员"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="" prop="enterprisesName" class="form-item">
              <el-input
                v-model="enterprise.queryParams.enterprisesName"
                placeholder="请输入企业名称"
                clearable
                @keyup.enter="handleQuery"
              />
            </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> &nbsp; 新增企业
              </el-button>
            </el-form-item>
          </div>
        </el-form>
        <section class="enterprise-area">
          <el-table
          ref="multipleTableRef"
          :data="enterprise.list"
          @selection-change="handleSelectionChange"
          style="width: 100%; border: 1px solid #EBEEF5; "
          :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>
        </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"/>
</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'

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 insertEnterprise = () => {
  formRef.value.open()
}

/** 重置按钮操作 */
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 .ContentWrap .el-card__header {
  text-decoration: none !important;  /* 去除下划线 */
  border-bottom: 0px solid #ebeef5 !important;
  padding-left: 20px;
  
}

::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);  // 添加这行

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