programs_info/三资项目/删除前备份/前段代码/workflow/flowPage.vue

<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane :label="formTitle">
        <!--<bidding-view v-if="formType==='BIDDING'" :bid-id="formId" />-->
        <!--<contract-view v-if="formType==='CONTRACT'" :contract-id="formId" />-->
      </el-tab-pane>
      <el-tab-pane label="流程图及意见">
        <el-card>
          <el-image v-if="processInstanceId" :src="$constant.BASE_URI + '/ActivitiController/readByPid?processInstanceId=' + processInstanceId " fit="scale-down" />
          <el-image v-if="!processInstanceId && taskId" :src="$constant.BASE_URI + '/ActivitiController/readByTid?taskId=' + taskId + '&isHistoric=' + taskHistoric + '&type=image'" fit="scale-down" />
          <!--<img v-if="taskId" :src="'/webServer/ActivitiController/read?taskId=' + taskId + '&isHistoric=' + taskHistoric + '&type=image'" style="height: 100%">-->
        </el-card>
        <el-card class="space-top">
          <el-table :data="CommentData" stripe>
            <el-table-column type="index" width="60" />
            <el-table-column label="节点名称" prop="activityName" />
            <el-table-column label="处理人" prop="commitUserName" />
            <el-table-column label="处理意见" prop="comments" />
            <el-table-column label="处理时间" prop="commitTime" />
          </el-table>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <el-card v-if="flowType=='OPERA'" class="space-top">
      <el-form ref="commitForm" :model="commitForm" style="width: 100%;padding: 5px" :rules="commitRules">
        <el-row class="col-self">
          <el-col :span="4" class="col-txt"><span>当前节点</span></el-col>
          <el-col :span="19" class="col-input col-bg">
            <span>{{ nodeName }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="col-txt"><span>处理意见</span></el-col>
          <el-col :span="19" class="col-input">
            <el-form-item prop="comments">
              <el-input v-model="commitForm.comments" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div class="el-dialog__footer">
      <el-button type="info" @click="handleClose()">关闭</el-button>
      <!--<el-button v-if="flowType=='OPERA'" type="danger" @click="handleBack()">退回</el-button>-->
      <el-button v-if="flowType=='OPERA'" type="primary" @click="handleSubmit()">{{ submitTxt }}</el-button>
    </div>

    <el-dialog title="选择用户" :visible.sync="dialogUserSelectVisible" width="50%" top="30px" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body>
      <auditor-select
        v-if="dialogUserSelectVisible"
        :data-roles="TaskGroup"
        :dept-id="formDeptId"
        @handleUserSelectClose="handleUserSelectClose"
        @handleUserSelectCommit="handleUserSelectCommit"
      />
    </el-dialog>
  </div>
</template>

<script>
import Base from '@/views/base/base'
// import BiddingView from '../zj/bidding/biddingView'
// import ContractView from '../zj/contract/contractView'
import AuditorSelect from './auditorSelect'
export default {
    name: 'FlowPage',
    components: {
        // BiddingView,
        // ContractView,
        AuditorSelect
    },
    mixins: [Base],
    props: {
        flowType: { // 流程类型
            type: String,
            default: 'OPERA' // OPERA, VIEW
        },
        formTitle: { // 表单名称
            type: String,
            default: ''
        },
        formType: { // 表单类型
            type: String,
            default: 'BIDDING' // BIDDING, CONTRACT
        },
        formId: { // 表单主键ID
            type: String,
            default: ''
        },
        taskId: { // 任务ID
            type: String,
            default: ''
        },
        taskHistoric: { // 选择部门
            type: Boolean,
            default: false
        },
        processInstanceId: { // 流程实例ID
            type: String,
            default: ''
        }
    },
    data() {
        return {
            CommentData: [],

            commitForm: {
                comments: ''
            },
            commitRules: {
                comments: [{ required: true, trigger: 'blur', message: '请输入处理意见' }]
            },

            // 节点信息
            lastNode: '',
            isLastNode: false,
            nodeName: '审批',
            submitTxt: '提交下一步',

            formDeptId: '',
            TaskGroup: [],
            dialogUserSelectVisible: false
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initFlowDeptId(this.formId, this.formType)
            if (this.processInstanceId) {
                this.initCommentsByPid(this.processInstanceId)
            } else if (this.taskId) {
                this.initFlowInfo(this.taskId)
                this.initCommentsByTid(this.taskId)
                this.initNodeState(this.taskId)
            }
        })
    },
    methods: {
        initFlowInfo: function(_taskId) {
            const _this = this
            this.flowRequest('nextTaskGroups', { taskId: _taskId, isHistoric: this.taskHistoric }).then(res => {
                if (res.data) {
                    _this.TaskGroup = res.data.data
                    console.log('_this.TaskGroup', res.data)
                }
            })
        },
        initFlowDeptId: function(_formId, _formType) {
            const _this = this
            if (_formType === 'BIDDING') {
                this.lastNode = 'ZJ_AUDIT'
                this.bidRequest('getById', { id: _formId }).then((res) => {
                    if (res.data) {
                        _this.formDeptId = res.data.agentConstructionCompany
                        // console.log('BIDDING_this.formDeptId', res.data)
                    }
                })
            } else if (_formType === 'CONTRACT') {
                this.lastNode = 'ZJ_AUDIT'
                this.ctrRequest('getById', { id: _formId }).then((res) => {
                    if (res.data) {
                        _this.formDeptId = res.data.agentConstructionCompany
                        // console.log('CONTRACT_this.formDeptId', res.data)
                    }
                })
            }
        },
        initCommentsByTid: function(_taskId) {
            const _this = this
            _this.CommentData = []

            this.flowRequest('getCommentsByTid', { taskId: _taskId, isHistoric: this.taskHistoric }).then((res) => {
                if (res.data.data) {
                    res.data.data.forEach(function(item) {
                        item.commitTime = _this.$common.transServDate(item.commitTime)
                        _this.CommentData.push(item)
                    })
                }
            })
        },
        initCommentsByPid: function(_processInstanceId) {
            const _this = this
            _this.CommentData = []

            this.flowRequest('getCommentsByPid', { processInstanceId: _processInstanceId }).then((res) => {
                if (res.data.data) {
                    res.data.data.forEach(function(item) {
                        item.commitTime = _this.$common.transServDate(item.commitTime)
                        _this.CommentData.push(item)
                    })
                }
            })
        },
        initNodeState: function(_taskId) {
            const _this = this

            this.flowRequest('getCurrentFlowNode', { taskId: _taskId }).then((res) => {
                console.log(res)
                if (res.data.data) {
                    const data = res.data.data
                    _this.nodeName = data.name
                    _this.isLastNode = data.candidateGroups.includes(_this.lastNode)
                    if (_this.isLastNode) {
                        _this.submitTxt = '通过并结束'
                    } else {
                        _this.submitTxt = '提交下一步'
                    }

                    console.log(_this.nodeName, _this.isLastNode)
                }
            })
        },
        handleUserSelectClose: function() {
            this.dialogUserSelectVisible = false
        },
        handleUserSelectCommit: function(_selectRole, _selectUserInfo) {

            const flowData = {
                taskId: this.taskId,
                dataRole: _selectRole,
                comments: this.commitForm.comments
            }

            if (_selectUserInfo) {
                flowData.id = _selectUserInfo.id
                flowData.truename = _selectUserInfo.label
            }

            // console.log('flowData', flowData)

            this.flowRequest('runTask', flowData).then(res => {
                if (res.data) {
                    this.$message('流程处理成功')
                    const submitData = {
                        formType: this.formType,
                        formId: this.formId,
                        selectRole: _selectRole
                    }
                    this.$emit('handleSubmit', submitData)
                    this.dialogUserSelectVisible = false
                } else {
                    this.$alert('流程处理失败')
                }
            })
        },
        handleClose: function() {
            this.$emit('handleClose')
        },
        handleBack: function() {
            this.confirm('是否确认退回？').then(() => {
                this.flowRequest('jump', { taskId: this.taskId }).then(res => {
                    if (res.data) {
                        this.$message('流程回退成功')
                        this.$emit('handleBack')
                    } else {
                        this.$alert('流程回退失败：' + res.data)
                    }
                })
            })
        },
        handleSubmit: function() {
            this.$refs.commitForm.validate(valid => {
                if (valid) {
                    let info = '是否确认提交下一步'
                    if (this.isLastNode) {
                        info = '是否通过审批并结束流程'
                    }
                    this.confirm(info).then(() => {
                        if (this.isLastNode) {
                            this.handleUserSelectCommit(this.$constant.FLOW.APPROVE, '')
                        } else {
                            this.dialogUserSelectVisible = true
                        }
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        // Request
        flowRequest(opUrl, postData) {
            return this.$channel.globleRequest('ActivitiController', opUrl, postData, 'Flow Controller')
        },
        bidRequest(opUrl, postData) {
            return this.$channel.globleRequest('ProjectBiddingManageController', opUrl, postData, 'bid')
        },
        ctrRequest(opUrl, postData) {
            return this.$channel.globleRequest('ProjectContractManageController', opUrl, postData, 'ctr')
        }
    }
}
</script>

<style scoped>

</style>