cbjsxt-front-master/src/views/costAudit/projectInfo/auditTaskManage/taskCustomizedRelease/workflowTab.vue

<template>
  <div class="task-formulate">
    <div class="operation-bar">
      <span>预定的监审工作起止时间：</span>
      <el-date-picker
        v-model="formData.workflow.plannedAuditStartDate"
        type="date"
        placeholder="开始日期"
        style="width: 150px; margin: 0 10px"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        disabled
      ></el-date-picker>
      <span>至</span>
      <el-date-picker
        v-model="formData.workflow.plannedAuditEndDate"
        type="date"
        placeholder="结束日期"
        style="width: 150px; margin: 0 10px"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        disabled
      ></el-date-picker>
    </div>
    <div class="operation-bar">
      <el-button
        type="success"
        plain
        icon="el-icon-circle-plus"
        :disabled="isView"
        @click="handleSetWorkflow"
      >
        工作环节设置
      </el-button>
    </div>
    <CostAuditTable
      :table-data="workflowData.list"
      :columns="workflowData.listColumns"
      :show-index="true"
      :show-action-column="true"
    >
      <template #action="{ row }">
        <!-- v-if="row.nodeType == 1" -->
        <el-button type="text" :disabled="isView" @click="handleSetStep(row)">
          设置
        </el-button>
      </template>
    </CostAuditTable>
    <div class="table-description">
      说明：为所有内部环节预置办理人员、流转操作按钮、环节截止时间；环节时限不能超过预定的工作流程起止时间。
    </div>
    <el-dialog
      title="工作环节设置"
      :visible.sync="dialogs.setStepDialogVisible"
      width="70%"
    >
      <div class="operation-bar">
        <span>请选择预定的监审工作起止时间：</span>
        <el-date-picker
          v-model="formData.workflow.plannedAuditStartDate"
          type="date"
          placeholder="开始日期"
          style="width: 150px; margin: 0 10px"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        <span>至</span>
        <el-date-picker
          v-model="formData.workflow.plannedAuditEndDate"
          type="date"
          placeholder="结束日期"
          style="width: 150px; margin: 0 10px"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </div>
      <CostAuditTable
        :table-data="workflowData.stepList"
        :columns="workflowData.workflowColumns"
        :show-index="true"
        :show-pagination="true"
        :show-action-column="true"
        :table-props="{
          maxHeight: '500',
        }"
        :pagination="workflowData.pagination"
        @pagination-change="handlePaginationChange"
      >
        <template #mainUserId="{ row }">
          <el-select
            v-if="row.nodeType == 1"
            v-model="row.mainUserId"
            filterable
            allow-create
            default-first-option
            placeholder="请选择主办人员"
            style="width: 100%"
          >
            <el-option
              v-for="item in formatterMainUserList()"
              :key="item.userId"
              :label="item.fullname"
              :value="item.userId"
            />
          </el-select>
        </template>
        <template #userId="{ row }">
          <el-select
            v-if="row.nodeType == 1"
            v-model="row.userId"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择从办人员"
            style="width: 100%"
            :disabled="!row.mainUserId"
          >
            <el-option
              v-for="item in formatterUserList(row.mainUserId)"
              :key="item.userId"
              :label="item.fullname"
              :value="item.userId"
            />
          </el-select>
        </template>
        <template #status="{ row }">
          <el-select
            v-if="row.nodeType == 1"
            v-model="row.status"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择预置流转操作"
            style="width: 100%"
          >
            <el-option
              v-for="item in dictData['processStatus']"
              :key="item.key"
              :label="item.name"
              :value="item.key"
            />
          </el-select>
        </template>
        <template #endTime="{ row }">
          <el-date-picker
            v-model="row.endTime"
            type="date"
            placeholder="请选择截止时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 100%"
            :picker-options="getPickerOptions(row)"
          ></el-date-picker>
        </template>
      </CostAuditTable>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :loading="loading.saveStep"
          @click="handleSaveSetStep"
        >
          确认
        </el-button>
        <el-button @click="dialogs.setStepDialogVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog>
    <!-- 设置流程环节弹窗 -->
    <el-dialog
      v-loading="loading.save"
      title="设置流程环节"
      :visible.sync="dialogs.stepDialogVisible"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form
        ref="currentStepForm"
        :model="formData.currentStep"
        label-width="120px"
        :rules="formData.currentStepRules"
      >
        <el-form-item label="流程环节：" prop="processNodeValue">
          <el-input
            v-model="formData.currentStep.processNodeValue"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="主办人员：" prop="mainUserId">
          <el-select
            v-model="formData.currentStep.mainUserId"
            filterable
            allow-create
            default-first-option
            placeholder="请选择主办人员"
            style="width: 100%"
            :disabled="formData.currentStep.nodeType == 0"
          >
            <el-option
              v-for="item in formatterMainUserList()"
              :key="item.userId"
              :label="item.fullname"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="从办人员：" prop="userId">
          <el-select
            v-model="formData.currentStep.userId"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择从办人员"
            style="width: 100%"
            :disabled="
              !formData.currentStep.mainUserId ||
              formData.currentStep.nodeType == 0
            "
          >
            <el-option
              v-for="item in formatterUserList(formData.currentStep.mainUserId)"
              :key="item.userId"
              :label="item.fullname"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预置流转操作：" prop="status">
          <el-select
            v-model="formData.currentStep.status"
            filterable
            multiple
            allow-create
            default-first-option
            placeholder="请选择预置流转操作"
            style="width: 100%"
            :disabled="formData.currentStep.nodeType == 0"
          >
            <el-option
              v-for="item in dictData['processStatus']"
              :key="item.key"
              :label="item.name"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="截止时间：" prop="endTime">
          <el-date-picker
            v-model="formData.currentStep.endTime"
            type="date"
            placeholder="请选择截止时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 100%"
            :disabled="isTimePickerDisabled"
            :picker-options="getPickerOptions(formData.currentStep)"
          ></el-date-picker>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :loading="loading.save"
          @click="handleSaveStep('currentStepForm', 'list')"
        >
          确认
        </el-button>
        <el-button @click="dialogs.stepDialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { taskMixin } from './index.js'
  import {
    getCostProjectNodeTmpletePageList,
    saveProcess,
  } from '@/api/taskCustomizedRelease.js'
  import CostAuditTable from '@/components/costAudit/CostAuditTable.vue'
  export default {
    components: { CostAuditTable },
    mixins: [taskMixin],
    props: {
      // 父组件传递的参数
      project: {
        type: Object,
        default: () => {},
      },
      isView: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        formData: {
          currentStepRules: {
            endTime: [
              { required: true, message: '请选择截止时间', trigger: 'change' },
              {
                validator: (rule, value, callback) => {
                  // 检查单个环节时间是否在总流程时间范围内
                  if (
                    !this.formData.workflow.plannedAuditStartDate ||
                    !this.formData.workflow.plannedAuditEndDate
                  ) {
                    return callback()
                  }
                  if (value < this.formData.workflow.plannedAuditStartDate) {
                    return callback(new Error('截止时间不能早于工作开始时间'))
                  }
                  if (value > this.formData.workflow.plannedAuditEndDate) {
                    return callback(new Error('截止时间不能晚于工作结束时间'))
                  }
                  callback()
                },
                trigger: 'change',
              },
            ],
          },
        },
      }
    },
    computed: {
      // 计算是否应该禁用当前步骤的时间选择器
      isTimePickerDisabled() {
        // 如果当前没有选中步骤，不禁用
        if (
          !this.formData.currentStep ||
          !this.formData.currentStep.processNodeKey
        ) {
          return false
        }

        // 获取当前步骤列表（优先使用已保存的列表）
        const stepList =
          this.workflowData.list.length > 0
            ? this.workflowData.list
            : this.workflowData.stepList

        if (!stepList || stepList.length <= 1) {
          return false
        }

        // 找到当前步骤在列表中的索引
        const currentIndex = stepList.findIndex(
          (item) =>
            item.processNodeKey === this.formData.currentStep.processNodeKey
        )

        // 如果是第一个步骤或找不到当前步骤，不禁用
        if (currentIndex <= 0) {
          return false
        }

        // 检查上一个步骤是否有设置时间
        const prevStep = stepList[currentIndex - 1]
        return !prevStep.endTime
      },
    },
    watch: {
      // 监听workflowData.stepList变化，动态更新下一个环节的最小可选时间
      'workflowData.stepList': {
        handler(newList) {
          // 对步骤列表按顺序排序，确保时间验证的准确性
          if (newList && newList.length > 0) {
            // 这里可以根据需要添加排序逻辑，假设步骤已经按顺序排列
          }
        },
        deep: true,
      },
    },
    mounted() {
      this.getWorkflow()
    },

    methods: {
      formatterUserList(userId) {
        // 筛选出除主办人员之外的人员
        return this.formatterMainUserList().filter(
          (item) => item.userId !== userId
        )
      },
      formatterMainUserList() {
        // 防御性编程，确保userList存在
        if (!this.userList || !Array.isArray(this.userList)) {
          return []
        }

        // 防御性编程，确保project.projectMembers存在且为字符串
        if (
          !this.project ||
          !this.project.projectMembers ||
          typeof this.project.projectMembers !== 'string'
        ) {
          return this.userList // 返回全部用户作为后备方案
        }

        try {
          // 分割项目组成员ID并过滤用户列表
          const projectMemberIds = this.project.projectMembers.split(',')
          const filteredUsers = this.userList.filter((item) =>
            projectMemberIds.includes(item.userId)
          )
          return filteredUsers
        } catch (error) {
          return this.userList // 出错时返回全部用户作为后备方案
        }
      },
      // 获取日期选择器的配置选项，动态设置最小可选日期
      getPickerOptions(row) {
        const stepList = this.workflowData.stepList
        const rowIndex = stepList.findIndex(
          (item) => item.processNodeKey === row.processNodeKey
        )

        let pickerOptions = {
          disabledDate: (time) => {
            // 基础限制：不能早于工作开始时间，不能晚于工作结束时间
            const startLimit = this.formData.workflow.plannedAuditStartDate
              ? new Date(this.formData.workflow.plannedAuditStartDate).getTime()
              : null
            const endLimit = this.formData.workflow.plannedAuditEndDate
              ? new Date(this.formData.workflow.plannedAuditEndDate).getTime()
              : null

            if (startLimit && time.getTime() < startLimit - 8.64e7) {
              return true // 禁用开始时间之前的日期
            }
            if (endLimit && time.getTime() > endLimit) {
              return true // 禁用结束时间之后的日期
            }

            // 如果不是第一个步骤，需要确保时间大于上一个步骤的时间
            if (rowIndex > 0) {
              const prevStep = stepList[rowIndex - 1]
              if (prevStep && prevStep.endTime) {
                const prevEndTime = new Date(prevStep.endTime).getTime()
                if (time.getTime() <= prevEndTime - 8.64e7) {
                  return true // 禁用上一步骤结束时间之前的日期
                }
              }
            }

            return false
          },
        }

        return pickerOptions
      },
      handleSetWorkflow() {
        this.getUser()
        this.dialogs.setStepDialogVisible = true
        if (this.workflowData.list.length > 0) {
          this.workflowData.stepList = this.workflowData.list
          this.workflowData.stepList = this.workflowData.list.map((item) => ({
            ...item,
            userId: item.userId ? item.userId.split(',') : [],
            status: item.status ? item.status.split(',') : [],
          }))
        } else {
          getCostProjectNodeTmpletePageList({
            pageNum: this.workflowData.pagination.currentPage,
            pageSize: this.workflowData.pagination.pageSize,
            processId: '1',
          }).then((res) => {
            this.workflowData.stepList = res.value.records.map((item) => ({
              ...item,
              userId: item.userId ? item.userId.split(',') : [],
              status: item.status ? item.status.split(',') : [],
            }))
            this.workflowData.pagination.total = res.value.total
          })
        }
      },
      // 设置流程环节
      handleSetStep(row) {
        this.getUser()
        this.formData.currentStep = {
          ...row,
          userId: row.userId ? row.userId.split(',') : [],
          status: row.status ? row.status.split(',') : [],
        }
        this.dialogs.stepDialogVisible = true
        this.loading.save = false
        // 重置表单验证状态
        this.$nextTick(() => {
          if (this.$refs.currentStepForm) {
            this.$refs.currentStepForm.clearValidate()
          }
        })
      },

      // 保存流程环节设置
      handleSaveStep(formName, type) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (type == 'list') {
              this.workflowData.list = this.workflowData.list.map((item) => {
                if (
                  item.processNodeKey ==
                  this.formData.currentStep.processNodeKey
                ) {
                  return {
                    ...item,
                    ...this.formData.currentStep,
                    userId: this.formData.currentStep.userId.join(','),
                    status: this.formData.currentStep.status.join(','),
                  }
                }
                return item
              })
              // 触发自定义事件通知父组件数据已更新
              this.$emit('update:workflowData', { ...this.workflowData })
              this.handleSaveSetStep('list')
            }
          } else {
            return false
          }
        })
      },
      // 保存工作环节设置
      handleSaveSetStep(type) {
        if (!this.formData.workflow.plannedAuditStartDate) {
          this.$message.error('请选择预定的监审工作开始日期')
          return
        }
        if (!this.formData.workflow.plannedAuditEndDate) {
          this.$message.error('请选择预定的监审工作结束日期')
          return
        }

        // 验证环节时间顺序，确保下一个环节的时间大于上一个环节的时间
        let stepList =
          type === 'list' ? this.workflowData.list : this.workflowData.stepList
        if (stepList && stepList.length > 1) {
          // 按顺序排序步骤（假设存在排序字段或按数组顺序）
          const sortedSteps = [...stepList].sort((a, b) => {
            // 假设步骤有某种排序标识，这里简单按数组顺序处理
            return stepList.indexOf(a) - stepList.indexOf(b)
          })

          // 验证每个步骤的时间是否符合要求
          for (let i = 1; i < sortedSteps.length; i++) {
            const currentStep = sortedSteps[i]
            const prevStep = sortedSteps[i - 1]

            // 检查当前步骤和上一步骤是否都有时间设置
            if (currentStep.endTime && prevStep.endTime) {
              if (new Date(currentStep.endTime) <= new Date(prevStep.endTime)) {
                this.$message.error(
                  `第${i + 1}个环节的截止时间必须大于第${i}个环节的截止时间`
                )
                return
              }
            } else if (currentStep.endTime && !prevStep.endTime) {
              this.$message.error(`请先设置第${i}个环节的截止时间`)
              return
            } else if (!currentStep.endTime && prevStep.endTime) {
              this.$message.error(`请设置第${i + 1}个环节的截止时间`)
              return
            }
          }
        }
        this.loading.save = true
        let data = {
          nodeReqList: [
            {
              endTime: '',
              id: '',
              mainUserId: '',
              processNodeKey: '',
              status: '',
              userId: '',
            },
          ],
          plannedAuditEndDate: this.formData.workflow.plannedAuditEndDate,
          plannedAuditStartDate: this.formData.workflow.plannedAuditStartDate,
          processId: this.workflowData.detailInfo.processId || '1',
          projectId: this.project.projectId,
        }
        if (type == 'list') {
          data.nodeReqList = this.workflowData.list
        } else {
          data.nodeReqList = this.workflowData.stepList.map((item) => {
            return {
              ...item,
              userId: item.userId.join(','),
              status: item.status.join(','),
            }
          })
        }
        saveProcess(data)
          .then((res) => {
            if (res.code === 200) {
              this.$message.success('保存成功')
              this.loading.save = false
              if (type == 'list') {
                this.dialogs.stepDialogVisible = false
              } else {
                this.dialogs.setStepDialogVisible = false
              }
              this.getWorkflow()
            }
          })
          .catch(() => {
            this.loading.save = false
          })
      },
    },
  }
</script>
<style scoped lang="scss">
  @import '@/styles/costAudit.scss';
</style>