Template.vue

<!--
 * @Description: 模板渲染页面
 * @version:
 * @Author: jooey wong
 * @Date: 2020-06-30 09:27:17
 * @LastEditors: jooey wong
 * @LastEditTime: 2020-07-15 09:49:55
-->
<template>
  <div ref="instance-template" class="instance-template">
    <!-- 项目审批单 蓝色页头 （预留） -->
    <!--<div class="instance-template-blue-header">
      <div class="instance-template-blue-header-title">项目启动审批单</div>
    </div>-->
    <!-- 项目审批单 标题容器 （预留） -->
    <div class="instance-template-title-container">
      <div class="instance-template-title-container-info">
        <!--<div>流程实例编号：89757</div>-->
        <div>发起时间：{{ new Date().toDateString() }}</div>
      </div>
      <div class="instance-template-title-container-title">
        {{ getTitle }}
      </div>
    </div>
    <!-- 主容器 -->
    <div class="instance-template-main-container">
      <div class="instance-template-main-container-iframe">
        <div class="instance-common-title">
          基础信息
        </div>
        <iframe
          v-show="iframeVisible"
          id="templateIframe"
          ref="templateIframe"
          frameborder="0"
          name="templateIframe"
          scrolling="auto"
          :src="templateUrl"
          :style="iframeStyle"
        />
        <div
          v-if="flowType !== 1"
          class="history-records"
        >
          <div class="instance-common-title">
            审批历史记录
          </div>
          <el-table :data="approvalRecordTableData" style="width: 100%">
            <el-table-column
              label="序号"
              type="index"
              width="50">
            </el-table-column>
            <el-table-column prop="actName" label="操作步骤" />
            <el-table-column prop="updateBy" label="操作人" />
            <el-table-column prop="transition" label="操作" />
            <el-table-column prop="remarks" label="操作意见" />
            <el-table-column prop="updateDate" label="时间" />
          </el-table>
        </div>
      </div>
      <div class="instance-template-main-container-flow">
        <!--        <el-steps direction="vertical" :active="1" align-center>-->
        <!--          <el-step title="申请" />-->
        <!--          <el-step title="（网络办、档案室、财务部、办公室）审批" />-->
        <!--          <el-step title="部门领导审批" />-->
        <!--          <el-step title="政治部/本部门（备档）" />-->
        <!--          <el-step title="结束" />-->
        <!--        </el-steps>-->
      </div>
    </div>
    <!-- 审批意见 -->
    <div v-if="isApprovalNode" class="instance-template-approval-comments">
      <div class="instance-common-title">
        审批意见
      </div>
      <el-input
        v-model="approvalComments"
        type="textarea"
        rows="10"
        placeholder="请输入内容"
        maxlength="30"
        show-word-limit
      />
    </div>
    <div class="commit-btns">
      <!-- 提交节点 -->
      <el-button
        v-show="!instanceStatus || instanceStatus === '2'"
        size="small"
        type="primary"
        @click.prevent.stop="eventDistribution('onSubmissionProcess', '提交')"
      >提交</el-button>
      <!-- 个人申请 被驳回时 可以撤销 -->
      <el-button
        v-if="!instanceStatus || instanceStatus === '2'"
        size="small"
        type="info"
        @click="revokeProcess"
      >撤销</el-button>
      <!-- 非审批节点 只能完成 -->
      <el-button
        v-if="flowType === 2 && !isApprovalNode && instanceStatus !== '2'"
        type="primary"
        size="small"
        @click="eventDistribution('approvalProcessEvent', '完成')"
      >完成</el-button>
      <!-- 审核节点 进行通过和驳回 -->
      <el-button
        v-if="isApprovalNode"
        type="primary"
        size="small"
        @click.prevent.stop="eventDistribution('approvalProcessEvent', '通过')"
      >通过</el-button>
      <el-button
        v-if="isApprovalNode"
        type="danger"
        size="small"
        @click.prevent.stop="approvalProcessEvent('驳回')"
      >驳回</el-button>
      <el-button
        v-if="isApprovalNode"
        type="danger"
        size="small"
        @click.prevent.stop="approverRejectProcess"
      >拒绝</el-button>
      <!--      <el-button-->
      <!--        size="small"-->
      <!--        @click.prevent.stop="endorsementDialogVisible = true"-->
      <!--      >加签</el-button>-->
      <!-- 加签节点 -->
      <el-button v-if="isCourtSign" type="primary" size="small">加签</el-button>
    </div>
    <el-dialog
      title="选择审批人"
      :visible.sync="approverDialogVisible"
      @closed="resetDialog"
    >
      <el-form :model="approverForm">
        <el-form-item
          v-for="(act, i) in dialogFormNotCourtSignList"
          :key="`approverNotFormItem${i}`"
          :label="act.actName"
          label-width="100px"
        >
          <el-select
            v-model="approverForm[act.actId]"
            :placeholder="`请选择${act.actName}`"
          >
            <el-option
              v-for="(item, index) in act.resultUserDTOList"
              :key="`ad-option-${index}`"
              :label="item.userName"
              :value="item.userId"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-for="(actCourt, i) in dialogFormCourtSignList"
          :key="`approverFormItem${i}`"
          :label="actCourt.actName"
          label-width="100px"
        >
          <span
            v-for="(user, index) in actCourt.resultUserDTOList"
            :key="`username-face-${index}`"
          >
            {{ user.userName }}
          </span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="approverDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="approverSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <template-reject-dialog
      :visible.sync="rejectDialogFormVisible"
      @onConfirm="approverReject"
    />
    <template-endorsement-dialog :visible.sync="endorsementDialogVisible" />
  </div>
</template>

<script>
import {
  queryWfTaskMess,
  getFirstTemplate,
  onProcessSubmit,
  completeTask,
  getCommitBtns,
  getRolesByInsId,
  revokeProcess,
  rejectProcess
} from '@/api/businessManage/template'
import { toDoTaskByTaskId, doneTaskByTaskId } from '@/api/workflow.js'
import { treeselect } from '@/api/system/dept.js'
import TemplateRejectDialog from '@/views/instance/components/TemplateRejectDialog'
import TemplateEndorsementDialog from '@/views/instance/components/TemplateEndorsementDialog'
// const INSTANCE_STATUS_OBJECT = {
//   0: '已提交',
//   1: '审核中',
//   2: '已驳回',
//   3: '待填写',
//   4: '已通过',
//   5: '已撤销'
// }
export default {
  components: {
    // 拒绝 dialog
    TemplateRejectDialog,
    // 加签 dialog
    TemplateEndorsementDialog
  },
  data() {
    return {
      // 列表页path路径
      instanceListPath: '/instance/InstanceList',
      iframeApis: { treeselect: treeselect },
      // 控制iframe是否显示
      iframeVisible: true,
      // 模板地址
      // templateUrl: `${process.env.BASE_URL}template/unionConsolationFund.html`,
      // templateUrl: `${process.env.BASE_URL}template/handover.html`,
      templateUrl: '',
      // iframe 样式
      iframeStyle: {
        width: '100%',
        height: '400px'
      },
      // iframe contentWindow对象
      iframeContentWin: null,
      // 审批意见
      approvalComments: '',
      // 审批历史记录表格数据
      approvalRecordTableData: [],
      // 流程实例的Id
      instanceId: this.$route.query.instanceId,
      // processId
      processId: this.$route.query.processId,
      // taskId
      taskId: this.$route.query.taskId || '',
      // templateId
      templateId: this.$route.query.templateId,
      // processName
      processName: this.$route.query.processName || '',
      // userTaskId
      userTaskId: this.$route.query.taskId,
      // 判断是否为加签节点
      isCourtSign: false,
      // 流程说明 (number) 1:提交进入 2:代办进入 3:已办进入
      flowType: Number(this.$route.query.flowType),
      // 流程实例状态
      instanceStatus: this.$route.query.instanceStatus || null,
      // 是否是审批节点
      isApprovalNode: false,
      // 判断是否为第一节点
      isFirstFlow: false,
      // 提交节点 提交按钮表单项
      // 表单权限Json
      powerJson: {},
      // 提交消息 通过 驳回 提交
      commitMessage: '',
      // 审批人dialog visible
      approverDialogVisible: false,
      // 审批人表单
      approverForm: {},
      // 审批人表单数量
      approverFormItemList: [],
      // dialog submit function name
      approverDialogFuncName: '',
      // 指定审批人选项列表
      approverDialogOptions: [],
      // 按钮列表
      buttonList: [],
      // 该节点是否需要指定审批人
      isApproval: false,
      // 控制拒绝备注是否显示
      rejectDialogFormVisible: false,
      // 加签dialog显隐
      endorsementDialogVisible: false
    }
  },
  computed: {
    getTitle() {
      let temp = ''
      switch (this.flowType) {
        case 1:
          temp = '申请'
          break
        case 2:
          temp = '审批'
          break
        default:
          temp = '管理'
      }
      return this.processName + temp + '信息'
    },
    dialogFormNotCourtSignList() {
      return this.approverFormItemList.filter(function(item) {
        return item.iscountersign === '0'
      })
    },
    dialogFormCourtSignList() {
      return this.approverFormItemList.filter(function(item) {
        return item.iscountersign === '1'
      })
    }
  },
  watch: {},
  created() {},
  mounted() {
    const that = this
    const loading = that.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    window.onmessage = that.handleMessage
    that.iframeContentWin = this.$refs.templateIframe.contentWindow
    that.iframeContentWin.onload = function() {
      // 查询审批时间
      that.queryWfTaskMess()
      // 方法控制底部按钮的显隐
      that.controlButtonVisible(that.flowType)
      // 区分由何处进入模板 调用不同接口
      if (that.flowType === 1) {
        // 获取第一节点模板
        that.getFirstTemplate()
      } else if (that.flowType === 2) {
        // 获取模板详情 准备回显
        that.getTemplateDetial()
      } else if (that.flowType === 3) {
        // 准备获取已办事项模板详情
        that.getDoneTemplateDetial()
      }
      loading.close()
    }
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  methods: {
    /**
     * @author: jooey wong
     * @description: 提交节点 流程
     * @return:
     */
    onSubmissionProcess() {
      // 向模板发送提交请求
      this.iframeContentWin.postMessage(
        {
          cmd: 'onSubmit'
        },
        '*'
      )
      this.commitMessage = '提交'
    },
    /**
     * @author: Comrade Wong
     * @describe: 审批节点 点击通过或者驳回按钮
     **/
    approvalProcessEvent(message) {
      this.iframeContentWin.postMessage(
        {
          cmd: 'onPassOrRejected'
        },
        '*'
      )
      this.commitMessage = message
    },
    /**
     * @author: jooey wong
     * @description: 处理iframe返回的数据
     * @return:
     */
    handleMessage(event) {
      // 根据上面制定的结构来解析iframe内部发回来的数据
      const that = this
      const data = event.data
      const switchCmd = {
        iframeSubmit: () => {
          // 业务逻辑
          if (data.params.success) {
            this.$message.success('验证成功！')
          } else {
            this.$message.error('验证失败！')
          }
        },
        iframeGetData: () => {
          data.params.api.forEach(item => {
            that.getDataByApi(item)
          })
        },
        // 获取iframe高度
        getClientHeight() {
          that.iframeStyle.height = data.params.clientHeight + 'px'
        },
        // 提交节点 提交按钮的功能
        onSubmissionProcess() {
          // 模拟表单验证成功
          that.submitProcess(data)
        },
        // 审批节点 通过 或者 驳回 流程实例
        completeTask() {
          that.handleCompleteTask(data.params.data, that.commitMessage)
        }
      }
      if (data.cmd) {
        switchCmd[data.cmd]()
      }
    },
    /**
     * @description: 根据qpi信息查询接口
     */
    getDataByApi(item) {
      const that = this
      // 动态加载
      this.iframeApis[item]({})
        .then(res => {
          const tempJson = { name: item, data: res }
          that.iframeContentWin.postMessage(
            {
              cmd: 'backData',
              params: tempJson
            },
            '*'
          )
        })
        .catch(err => {
        })
    },
    /**
     * @author: jooey wong
     * @description: 查询审批记录
     */
    queryWfTaskMess() {
      // TODO: wxy 未调通 由于不知道返回参数字段 所以未调通
      if (this.instanceId && this.instanceId !== '') {
        queryWfTaskMess(this.instanceId).then(res => {
          if (res.code === 200) {
            this.approvalRecordTableData = res.data
          }
        })
      }
    },
    /**
     * @author: jooey wong
     * @description: 获取第一节点的模板
     */
    getFirstTemplate() {
      const processId = this.processId
      const that = this
      getFirstTemplate(processId).then(res => {
        this.isApproval = !(!res.data.ifApprove || res.data.ifApprove === '0')

        this.templateUrl = res.data.pcHtml
        that.powerJson = {}
        res.data.resultFieldAndPermissionDTOList.forEach(function(item) {
          that.powerJson[item.specialTag] = item
        })
        that.powerJson['flowType'] = that.flowType
        // 将powerJson 传给iframe
        that.iframeContentWin.postMessage(
          {
            cmd: 'powerJson',
            params: that.powerJson
          },
          '*'
        )
      })
    },
    /**
     * @author: liuhuaizhi
     * @description: 获取代办模板详情
     */
    getTemplateDetial() {
      const taskId = this.taskId
      const processId = this.processId
      const that = this
      toDoTaskByTaskId({ taskId: taskId, processId: processId }).then(res => {
        this.isApproval = !(!res.data.ifApprove || res.data.ifApprove === '0')
        this.templateUrl = res.data.pcHtml
        if (res.data.resultFieldAndPermissionDTOList.length > 0) {
          this.processId = res.data.resultFieldAndPermissionDTOList[0].processId
        }
        that.powerJson = {}
        res.data.resultFieldAndPermissionDTOList.forEach(function(item) {
          that.powerJson[item.specialTag] = item
        })
        that.powerJson['flowType'] = that.flowType
        // 将powerJson 传给iframe
        that.iframeContentWin.postMessage(
          {
            cmd: 'powerJson',
            params: that.powerJson
          },
          '*'
        )
      })
    },
    /**
     * @author: liuhuaizhi
     * @description: 获取已办模板详情
     */
    getDoneTemplateDetial() {
      const taskId = this.taskId
      const that = this
      doneTaskByTaskId({ taskId: taskId }).then(res => {
        this.templateUrl = res.data.pcHtml
        that.powerJson = {}
        res.data.resultDoneFieldAndPermissionDTOList.forEach(function(item) {
          that.powerJson[item.specialTag] = item
        })
        that.powerJson['flowType'] = that.flowType
        // 将powerJson 传给iframe
        that.iframeContentWin.postMessage(
          {
            cmd: 'powerJson',
            params: that.powerJson
          },
          '*'
        )
      })
    },
    /**
     * @author Comrade Wong
     * @describe 审批流程处理 通过 或者 驳回的事件
     * @param {Object} data 从iframe获取到的表单数据
     * @param {String} commitMessage 通过 或者 驳回
     **/
    handleCompleteTask(data, commitMessage) {
      this.$confirm(`此操作将${commitMessage}该流程实例, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const takeUserMesJson = []
        if (!data) {
          return
        }
        const queryProcessCommitDtoList = JSON.stringify(data)
        // form表单的数据
        Object.keys(this.approverForm).forEach(item => {
          takeUserMesJson.push({
            actId: item,
            takeUsers: this.approverForm[item]
          })
        })
        // 获取会签节点的数据
        this.dialogFormCourtSignList.forEach(item => {
          item.resultUserDTOList.forEach(user => {
            takeUserMesJson.push({
              actId: item.actId,
              takeUsers: user.userId
            })
          })
        })
        // 如果为空传空
        const takeUserMes =
          JSON.stringify(takeUserMesJson) === '[]'
            ? ''
            : JSON.stringify(takeUserMesJson)
        completeTask(
          this.processId,
          this.instanceId,
          this.userTaskId,
          queryProcessCommitDtoList,
          commitMessage,
          takeUserMes
        ).then(res => {
          this.$message.success(`${commitMessage}成功！`)
          this.$router.push({
            path: '/businessManage/todolist'
          })
        })
      })
    },
    /**
     * @author WangXinYu
     * @describe 提交节点 提交事件
     * @param {Object} data 从iframe传来的参数
     **/
    submitProcess(data) {
      this.$confirm('此操作将提交该流程实例, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const queryProcessCommitDtoList = JSON.stringify(data.params.data)
        // 处理审批人数据
        const takeUserMesJson = []
        Object.keys(this.approverForm).forEach(item => {
          takeUserMesJson.push({
            actId: item,
            takeUsers: this.approverForm[item]
          })
        })
        // 获取会签节点的数据
        this.dialogFormCourtSignList.forEach(item => {
          item.resultUserDTOList.forEach(user => {
            takeUserMesJson.push({
              actId: item.actId,
              takeUsers: user.userId
            })
          })
        })
        const takeUserMes = JSON.stringify(takeUserMesJson)
        if (data.params.success) {
          onProcessSubmit(
            this.processId,
            queryProcessCommitDtoList,
            '提交',
            takeUserMes
          ).then(res => {
            if (res.code === 200) {
              this.$message.success('提交成功！')
              this.$router.go(-1)
              this.approverDialogVisible = false
            }
          })
        }
      })
    },
    /**
     * @author WangXinYu
     * @describe 控制 流程 中 通过 和 驳回 的 按钮显示
     **/
    getProcessBtnsState(taskId, processId) {
      // 待办情况下
      if (taskId === '' || !taskId) {
        return
      }
      getCommitBtns(taskId, processId).then(res => {
        if (res.data) {
          // '1' 是 审批节点 ‘0’不是审批节点
          const obj = {
            0: false,
            1: true
          }
          this.isApprovalNode = obj[res.data]
        }
      })
    },
    /**
     * @author WangXinYu
     * @describe 控制流程模板显示
     **/
    controlButtonVisible(flowType) {
      if (flowType === 1) {
        this.isFirstFlow = true
      } else if (flowType === 2) {
        this.getProcessBtnsState(this.taskId, this.processId)
      }
    },
    /**
     * @author WangXinYu
     * @describe 撤销按钮功能事件
     **/
    revokeProcess() {
      this.$confirm('此操作将撤销该流程实例, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 如果是第一节点 撤销就是返回上一页
        if (this.flowType === 1) {
          this.$router.go(-1)
        } else {
          // 其他情况下 如果不是审批节点
          // 已驳回状态
          if (this.instanceStatus && Number(this.instanceStatus) === 2) {
            revokeProcess(
              this.instanceId,
              this.taskId,
              this.approvalComments
            ).then(res => {
              console.warn(res)
              this.$message.success('撤销流程成功！')
              this.$router.go(-1)
            })
          }
        }
      })
    },
    /**
     * @author WangXinYu
     * @describe dialog 打开dialog操作
     **/
    openApproverDialog(funcName, commitMessage) {
      this.approverDialogFuncName = funcName || ''
      this.commitMessage = commitMessage
      getRolesByInsId(this.processId, this.taskId).then(res => {
        // 清空之前的数据
        this.approverFormItemList = []
        // 处理返回的数据
        const data = res.data
        Object.keys(data).forEach(actId => {
          this.$set(this.approverForm, actId, '')
          this.approverFormItemList.push(
            Object.assign(data[actId], { actId: actId })
          )
        })
        this.approverDialogVisible = true
      })
    },
    /**
     * @author: Comrade Wong
     * @describe: 指定审批人提交功能
     **/
    approverSubmit() {
      this[this.approverDialogFuncName](this.commitMessage)
    },
    /**
     * @author: Comrade Wong
     * @describe: 重置dialog中数据
     **/
    resetDialog() {
      this.approverDialogFuncName = ''
      this.approverForm = {
        approver: ''
      }
    },
    /**
     * @author WangXinYu
     * @describe 根据ifApprove 判断该节点是否需要指定审批人，进而分发事件
     * @param {String} funcName 选择完了之后执行的函数名
     * @param {String} commitMessage 提交信息
     **/
    eventDistribution(funcName, commitMessage) {
      // if (commitMessage === '提交' || this.isApproval) {
      //   this.openApproverDialog(funcName, commitMessage)
      // } else {
      //   this[funcName](commitMessage)
      // }
      this[funcName](commitMessage)
    },
    /**
     * @author WangXinYu
     * @describe dialog 审批人拒绝事件
     * @param {Object} rejectForm 拒绝表单对象
     **/
    approverReject(rejectForm) {
      // TODO: 处理审批人拒绝事件
      alert(rejectForm)
      // 关闭模态框
      this.rejectDialogFormVisible = false
    },
    /**
     * @author WangXinYu
     * @describe 审批人拒绝
     **/
    approverRejectProcess() {
      this.$confirm('此操作将拒绝该流程实例, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const instanceId = this.instanceId
        const taskId = this.taskId
        const remarks = this.approvalComments
        rejectProcess(instanceId, taskId, remarks).then(res => {
          if (res.code === 200) {
            this.$message.success('拒绝流程成功！')
            this.$router.go(-1)
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// @import url(); 引入公共css类
$header-height: 40px;
$left-width: 100%;
$color-main-text: #303133;
$color-meta-text: #909399;
.instance-template {
  width: 100%;
  /*height: calc(100vh - 90px);*/
  padding-bottom: 12px;
  > div {
    margin-bottom: 12px;
    padding: 0 12px;
  }
  .commit-btns {
    text-align: center;
    margin: 12px;
  }
  &-blue-header {
    background-color: #276fc4;
    height: $header-height;
    cursor: default;
    &-title {
      text-align: left;
      line-height: $header-height;
      padding: 0 12px;
      color: #ffffff;
      font-weight: 500;
      box-sizing: border-box;
    }
  }
  &-title-container {
    position: relative;
    height: $header-height;
    padding: 0 12px;
    &-info {
      font-size: 12px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      color: $color-meta-text;
    }
    &-title {
      line-height: $header-height;
      text-align: center;
      font-weight: 800;
      color: $color-main-text;
    }
  }
  &-main-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    &-iframe {
      width: $left-width;
      margin-bottom: 12px;
      .history-records {
        width: 100%;
      }
    }
    &-flow {
      width: calc(100% - #{$left-width});
      height: 400px;
    }
  }
  &-approval-comments {
    width: $left-width;
  }
  .instance-common-title {
    line-height: 40px;
    background-color: #f2f6fc;
    padding: 0 12px;
  }
}
</style>