sl-sfy-safety/src/views/production-safety/safetyTrainingAndEducation/educationTrainingPlanManagement/components/issueEducationTrainingPlan.vue

<script lang="ts" setup>
  import { ref, reactive, onMounted, watch } from 'vue';
  import { queryUserGroupPage } from '@/api/system/person-group';
  import { IssueWorkPlanFormRules } from '../configs/form';
  import { DistributeParameters } from '../configs/tables';
  import { type FormInstance, ElMessage } from 'element-plus';
  
  const props = defineProps<{
    data: any;
    visible;
  }>();
  const emit = defineEmits(['update:visible', 'confirm']);
  /**
   * @description: 下发参数
   * @return {*}
   */

  const issueWorkPlanForm = reactive<DistributeParameters>({
    id: 0,
    groupId: '',
    startTime: '',
    endTime: '',
    responsibleDeptIds: '',
  });
  const dialogVisible = ref(props.visible);

  watch(
    () => props.visible,
    (newVal) => {
      dialogVisible.value = newVal;
    },
  );
  watch(dialogVisible, (newVal) => {
    emit('update:visible', newVal);
  });

  watch(
    () => props.data,
    (newData) => {
      if (!newData) return;
      Object.assign(issueWorkPlanForm, {
        id: newData.mid,
        responsibleDeptIds: newData.responsibleDeptIds,
        groupId: '',
        startTime: '',
        endTime: '',
      });
    },
    { immediate: true, deep: true },
  );

  /**
   * @description: 下发rules验证
   * @param {*} value
   * @return {*}
   */
  const issueWorkPlanFormRules = ref(IssueWorkPlanFormRules);

  const groupList = ref<any>([]);
  // 获取级联部门分组数据
  const loadGroupTreeData = async () => {
    queryUserGroupPage({
      pageNumber: 1,
      pageSize: 500,
    }).then((res) => {
      groupList.value = res.records;
    });
  };
  const handleCancelIssue = () => {
    dialogVisible.value = false;
  };
  // 表单引用
  const formRef = ref<FormInstance>();
  const handleConfirmIssue = async () => {
    if (!formRef.value) return;
    if( issueWorkPlanForm.startTime > issueWorkPlanForm.endTime ){
      ElMessage.error('计划开始时间不能晚于计划结束时间');
      return;
    }
    const res = await formRef.value.validateField();
    if (res) {
      emit('confirm', issueWorkPlanForm);
      handleCancelIssue();
    }
  };
  onMounted(() => {
    loadGroupTreeData();
  });
</script>
<template>
  <div class="content">
    <el-dialog
      v-model="dialogVisible"
      title="下发安全教育培训计划任务"
      width="600"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="handleCancelIssue"
    >
      <div>
        <el-form ref="formRef" :model="issueWorkPlanForm" :rules="issueWorkPlanFormRules" label-width="200px">
          <!-- 培训责任部门 -->
          <el-form-item label="培训责任部门：" prop="responsibleDeptIds">
            <el-select
              v-model="issueWorkPlanForm.responsibleDeptIds"
              :disabled="true"
              size="large"
              placeholder="分组名称"
              style="width: 100%"
            >
              <el-option :label="props.data.responsibleNames" :value="props.data.responsibleDeptIds" />
            </el-select>
          </el-form-item>

          <el-form-item label="培训责任部门责任人分组：" prop="groupId">
            <el-select
              v-model="issueWorkPlanForm.groupId"
              size="large"
              placeholder="请选择培训责任部门责任人所在分组名称"
              style="width: 100%"
            >
              <el-option v-for="group in groupList" :key="group.id" :label="group.name" :value="group.id" />
            </el-select>
          </el-form-item>

          <el-form-item label="计划开始时间：" prop="startTime">
            <el-date-picker
              v-model="issueWorkPlanForm.startTime"
              type="date"
              placeholder="请选择完成时间"
              style="width: 100%"
            />
          </el-form-item>

          <el-form-item label="计划完成时间：" prop="endTime">
            <el-date-picker
              v-model="issueWorkPlanForm.endTime"
              type="date"
              placeholder="请选择完成时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCancelIssue">取消</el-button>
          <el-button type="primary" @click="handleConfirmIssue"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>