supervision-test-frontend-repo/src/views/super/bpm/process/personalOffice/myHandleTask/content/TaskHandleInnerContent.vue

<template>
  <div class="jeecg-task-handle-content">
    <!-- 横向步骤条，显示节点 -->
<!--    <task-node-step-list :taskStepList="taskStepList" :stepCount="bpmLogList.length" :currentNode="currentNode"></task-node-step-list>-->

    <!-- 意见信息 -->
<!--    <task-comment-list :bpmLogList="bpmLogList"></task-comment-list>-->

    <!-- 填写处理意见并提交 -->
    <my-handle-content
      v-if="isRunningTask"
      @success="handleSuccess"
      :taskId="taskId"
      :historyList="historyList"
      :turnbackTaskId="turnbackTaskId"
      :branchList="branchList"
      :selnextUserStatus="showSelnextUser ? selnextUserStatus : false"
      :ccStatus="ccStatus"
      :allowAddSign="allowAddSign"
      :allowCounterSignAddUser="allowCounterSignAddUser"
      :allowReject="allowReject"
      :beforeHandle="beforeHandle"
      :currentTaskName="currentNode.taskName">
    </my-handle-content>

    <!-- 签收 -->
    <div v-if="claim" style="width: 100%;text-align: center; padding-top: 10px">
      <a-button type="primary" @click="handleClaim" :loading="loading"><AuditOutlined/>确认签收</a-button>
    </div>
  </div>
</template>

<script lang="ts">
  import { taskTransInfo, taskComplete, taskClaim } from '../task.handle.api';
  import { ref, watch } from 'vue';
  import TaskNodeStepList from './TaskNodeStepList.vue';
  import TaskCommentList from './TaskCommentList.vue';
  import MyHandleContent from './MyHandleContent.vue';
  import { pick } from 'lodash-es';
  import { AuditOutlined } from '@ant-design/icons-vue';

  export default {
    name: 'TaskHandleInnerContent',
    components: {
      TaskNodeStepList,
      TaskCommentList,
      MyHandleContent,
      AuditOutlined
    },
    props: {
      formData: {
        type: Object,
        default: () => {},
      },
      //签收状态
      claim:{
        type: Boolean,
        default: false
      },
      beforeHandle: {
        type: Function,
        default: undefined
      },
      showSelnextUser: {
        type: Boolean,
        default: true,
      }
    },
    emits: ['success', 'claimSuccess'],
    setup(props, { emit }) {
      console.log('进入tab panel-content');
      const taskId = ref('');
      // 任务步骤条
      const taskStepList = ref([]);
      // 当前任务节点
      const currentNode = ref({});
      // 审批记录/意见信息
      const bpmLogList = ref([]);
      // 历史节点
      const historyList = ref([]);
      // 获取上一步的节点
      const turnbackTaskId = ref('');
      // 任务分支
      const branchList = ref([]);
      const isRunningTask = ref(true);
      const allowAddSign = ref(false);
      //允许驳回
      const allowReject = ref(true);
      const allowCounterSignAddUser = ref(false);
      const loading = ref(false);
      // 选择下一步处理人
      const selnextUserStatus = ref(true);
      // 选择抄送人
      const ccStatus = ref(true);

      getTaskTransInfo();

      async function getTaskTransInfo(type?) {
        let taskType = props.formData['PROCESS_TAB_TYPE'];
        console.log('taskType>>', taskType)
        if(type){
          taskType = type;
        }
        isRunningTask.value = taskType == 'run';
        //查询条件-run只需要taskId， history只需要procInstId
        let params = { taskId: props.formData.taskId, procInstId: props.formData.procInsId };
        let data = await taskTransInfo(params, taskType);
        console.log('获取流程流转信息', data);

        //update-begin-author:taoyan date:2022-7-5 for:
        //选择下一步操作人
        if(!data.selnextUserStatus || data.selnextUserStatus=='1'){
          //如果没有该值 或是该值为1
          selnextUserStatus.value = true;
        }else{
          selnextUserStatus.value = false;
        }

        // 选择抄送人
        if(!data.ccStatus || data.ccStatus=='1'){
          //如果没有该值 或是该值为1
          ccStatus.value = true;
        }else{
          ccStatus.value = false;
        }
        //是否允许加签
        allowAddSign.value= data.allowAddSign;
        //是否允许驳回
        allowReject.value = data?.rejectStatus == '1';
        //是否多实例- 会签加签 是否允许会签节点加人0否、1允许
        allowCounterSignAddUser.value = (data?.allowCounterSignAddUser && data.allowCounterSignAddUser =='1');
        taskStepList.value = data.bpmLogStepList;
        bpmLogList.value = data.bpmLogList;

        let nodeObject = pick(data, 'taskName', 'taskNameStartTime', 'taskAssigneeName');
        if (isRunningTask.value === false) {
          // 'taskName', 'taskNameStartTime', 'taskAssigneeName' 是正在运行流程的当前节点信息
          //  'currTaskName', 'currTaskNameAssignee', 'currTaskNameStartTime'这三个是历史查看中的节点信息
          nodeObject['taskName'] = data['currTaskName'];
          nodeObject['taskNameStartTime'] = data['currTaskNameStartTime'];
          nodeObject['taskAssigneeName'] = data['currTaskNameAssignee'];
        }
        currentNode.value = nodeObject;

        historyList.value = data.histListNode;
        branchList.value = data.transitionList;

        turnbackTaskId.value = data.turnbackTaskId;

        taskId.value = props.formData.taskId;
      }

      function handleSuccess() {
        emit('success');
      }

      /**
       * 签收调用
       */
      async function handleClaim(){
        loading.value = true;
        let params = { taskId: taskId.value };
        await taskClaim(params);
        await getTaskTransInfo('run');
        emit('claimSuccess')
        setTimeout(()=>{
          loading.value = false;
        }, 200)
      }

      watch(()=>props.claim, (val)=>{
        if(val===true){
          // 如果是签收状态 则定义isRunningTask为false
          isRunningTask.value = false
        }else{
          let taskType = props.formData['PROCESS_TAB_TYPE'];
          isRunningTask.value = taskType == 'run';
        }
      }, {immediate: true})

      return {
        taskId,
        bpmLogList,
        taskStepList,
        currentNode,
        historyList,
        branchList,
        handleSuccess,
        isRunningTask,
        handleClaim,
        loading,
        ccStatus,
        allowAddSign,
        allowCounterSignAddUser,
        allowReject,
        selnextUserStatus,
        turnbackTaskId
      };
    },
  };
</script>

<style lang="less">
  .jeecg-task-handle-content {

    .task-info {
      margin: 20px 0;
    }

    .task-title {
      font-weight: bold;
    }

    .task-date {
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .task-date span {
      /* color: #ff6d75;*/
    }

    .ant-steps-item-description {
      max-width: 200px !important;
    }

    /** Button按钮间距 */

    .ant-btn {
      margin-left: 3px;
    }

    /** 标题和描述对齐 */

    .ant-steps-item-content {
      text-align: left;
      margin-left: 50px;
    }

    /** 描述的样式 */

    .descriptionDiv {
      display: flex;
      justify-content: left;
      align-items: center;
      margin-top: 5px;
    }

    .jee-cust-selector .ant-select-selection__choice {
      padding-right: 10px !important;
    }
  }
</style>