<!--
  @description: 办结事务
  @Modifier: hfx
  @routerPath:
  @date: 2020-2-20-14:56
-->
<template>
  <div>
    <table-crud
      ref="tableCrud"
      :search-form.sync="searchForm"
      search-label-width="100px"
      @on-load="loadData"
    >
      <!--标题-->
      <template v-slot:header>
        办结事务列表
      </template>
      <template v-slot:search="search">
        <el-form-item label="审批类型" prop="processName">
          <el-input v-model.trim="searchForm.processName" placeholder="审批类型" @keyup.enter.native="search.onSearch" />
        </el-form-item>
        <el-form-item label="业务编号" prop="tenderNo">
          <el-input v-model.trim="searchForm.tenderNo" placeholder="业务编号" @keyup.enter.native="search.onSearch" />
        </el-form-item>
        <el-form-item label="业务名称" prop="tenderName">
          <el-input v-model.trim="searchForm.tenderName" placeholder="业务名称" @keyup.enter.native="search.onSearch" />
        </el-form-item>
        <el-form-item label="提交时间" prop="submitDate">
          <el-date-picker
            v-model="searchForm.submitDate"
            :value-format="elValueFormatDate"
            type="date"
            placeholder="选择提交时间"
          />
        </el-form-item>
        <el-form-item label="办理完成时间" prop="endDate">
          <el-date-picker
            v-model="searchForm.endDate"
            :value-format="elValueFormatDate"
            type="date"
            placeholder="选择办理完成时间"
          />
        </el-form-item>
        <el-form-item label="办理完成日期" label-width="130px">
          <el-date-picker
            v-model="searchForm.section"
            :value-format="elValueFormatDate"
            type="daterange"
            placeholder="选择办理完成日期"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width:200px;"
            @change="onHandelTime"
          />
        </el-form-item>
        <el-form-item label="发起人" prop="createUserRname">
          <el-input v-model.trim="searchForm.createUserRname" placeholder="发起人" @keyup.enter.native="search.onSearch" />
        </el-form-item>
        <el-form-item label="办理结果" prop="createUserRname">
          <el-select v-model="searchForm.teviewType" @change="teviewTypeChange">
            <el-option
              v-for="item in teviewTypeList"
              :key="item.typename"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>
      </template>
      <template v-slot:GXTable>
        <el-table
          ref="smallTable"
          v-loading="loading"
          :data="tableData"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="60"
          />
          <el-table-column
            header-align="center"
            prop="processName"
            label="审核类型"
            min-width="160"
          />
          <el-table-column
            header-align="center"
            prop="tenderNo"
            label="业务编号"
            min-width="230"
          />
          <el-table-column
            header-align="center"
            prop="tenderName"
            label="业务名称"
            min-width="230"
          />
          <el-table-column
            header-align="center"
            prop="createUserRname"
            label="发起人"
            min-width="100"
          />
          <el-table-column
            header-align="center"
            prop="createDate"
            label="提交时间"
            align="center"
            width="150"
          />
          <!--审核类型 00驳回 01提交 02通过  03撤回-->
          <el-table-column
            :formatter="formatTeviewType"
            header-align="center"
            prop="teviewType"
            label="办理结果"
            align="center"
            width="90"
          />
          <el-table-column
            header-align="center"
            prop="handler"
            label="当前处理人"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.handler?scope.row.handler:'已完成' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="endDate"
            label="办理完成时间"
            align="center"
            width="150"
          />
          <el-table-column label="操作" align="center" width="180" fixed="right">
            <template slot-scope="scope">
              <el-link
                v-if="((scope.row.teviewType!=='03' && scope.row.id===scope.row.hiRuTaskId && scope.row.isMeeting!=='01' && scope.row.handler !== ''
                  && scope.row.teviewType!=='00')|| (scope.row.isInitialOne==='01' && scope.row.teviewType!=='03' && scope.row.handler!=='')) && scope.row.informId ===''"
                type="primary"
                @click.stop="revoke(scope.row)"
              >
                [撤回]
              </el-link>
              <el-link
                type="primary"
                @click.stop="viewDetails(scope.row)"
              >
                [详情]
              </el-link>
              <el-link
                type="primary"
                @click.stop="handleDetail(scope.row)"
              >
                [流程跟踪]
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </table-crud>
    <!--流程追踪查看弹框-->
    <flow-detail-dialog ref="tracingFlow" />
  </div>
</template>

<script>
import { doneList, revokeTask } from '@/api/work/work'
/* 混合开发方法-参数字段*/
import { ListMixin } from '@/mixins/ListMixin'
import { workCommonGroup } from './mixins/workCommonGroup'

import { filterDictText } from '@/assets/js/utils'// 常用方法
/* 组件*/
import pagination from '@comp/common/pagination/pagination'
import flowDetailDialog from './process/flowDetail-dialog'

export default {
  components: {
    pagination,
    'flow-detail-dialog': flowDetailDialog // 查看流程追踪
  },
  mixins: [ListMixin, workCommonGroup],
  data() {
    return {
      loading: true,
      searchForm: {
        teviewType: '', // 00驳回 01提交 02通过  03撤回
        processName: '', // 审核类型
        tenderNo: '', // 业务编号
        tenderName: '', // 业务名称
        createUserRname: '', // 发起人
        submitDate: '', // 提交时间
        section: [] // 办理完成时间
      },
      tableData: []
    }
  },
  methods: {
    filterDictText, // 字典值替换文本通用方法
    // 选择办结时间
    onHandelTime(val) {
      if (val) {
        this.searchForm.sectionStartTime = val[0]
        this.searchForm.sectionEndTime = val[1]
      }
    },
    // 表格字典值替换文本-处理结果
    formatTeviewType(row, column, cellValue) {
      return filterDictText(this.teviewTypeList, cellValue)
    },
    // 获取数据
    loadData(params, callback) {
      doneList(params).then(response => {
        const { data } = response.data
        this.tableData = data.records
        this.loading = false
        callback(data.total)
      }).catch(() => {
        this.loading = false
      })
    },
    // 流程追踪详情
    handleDetail(row) {
      // 查看流程追踪方法 传入实例化id processInstanceId 00为其它列表查看流程追踪 01为待办/办结列表查看
      this.$refs.tracingFlow.openDialogInitData(row.processInstanceId, '01')
    },
    // 查看详情
    viewDetails(row) {
      const workData = {
        processDefinitionKey: row.processDefinitionKey, // 工作流key
        bizId: row.bizId, // 业务主键id
        id: row.tenderId, // 招标项目id
        flowStatus: true, // flowStatus: true 工作流进入
        tenderType: row.tenderType, // 业务审核状态 有值时代表已办事项
        routePathStatus: '02', // 02办结进入
        processInstanceId: row.processInstanceId,
        processNodeCode: row.processNodeCode,
        businessKey: row.businessKey,
        processKey: row.processKey, // 区分工作流类型
        taskId: row.taskId,
        packId: row.packId,
        tenderName: row.tenderName // 业务名称//项目名称
      }
      this.$router.push({
        path: row.bizUrl,
        query: {
          ...workData
        }
      })
      sessionStorage.setItem('bizId', row.bizId) // 主键id
      sessionStorage.setItem('routePathStatus', '02') // 工作流处理 00桌面进入 01待办列表进入 02办结进入
    },
    // 撤回
    revoke(row) {
      this.$confirm('确认撤回?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        revokeTask(row.processInstanceId, row.processNodeCode, row.businessKey, row.taskId)
          .then(res => {
            this.$message({
              message: res.data.msg,
              type: 'success'
            })
            this.$refs.tableCrud.onSearchChange()
          }).catch(() => {
          })
      }).catch(() => {
      })
    },
    // 操作办理结果查询
    teviewTypeChange() {
      this.$refs.tableCrud.onSearchChange()
    }
  }
}
</script>

<style lang="less" scoped>

</style>
