<template>
  <div>
    <div class="tab-header">
      <el-form ref="queryForm" :inline="true" :model="queryParams" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="名称"><el-input v-model="queryParams.params.days" clearable placeholder="请输入名称" /></el-form-item>
            <el-form-item label="开始时间">
              <el-date-picker v-model="queryParams.params.startTime" clearable type="date" value-format="yyyy-MM-dd" placeholder="选择时间" />
            </el-form-item>
            <el-button @click="handleQuery">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table v-loading="tableLoading" :data="myTaskList" border>
      <el-table-column label="序号" width="50px" type="index" align="center" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit-outline" @click="handleProcess(scope.row)">处理</el-button>
        </template>
      </el-table-column>
      <el-table-column label="请假天数" width="90" align="center" prop="processVariables.zd1" />
      <el-table-column label="任务编号" width="300" align="center" prop="taskId" />
      <el-table-column label="流程名称" align="center" prop="procDefName" />
      <el-table-column label="任务节点" align="center" prop="taskName" />
      <el-table-column label="流程版本" align="center">
        <template slot-scope="scope">
          <el-tag size="medium">v{{ scope.row.procDefVersion }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="流程发起人" align="center">
        <template slot-scope="scope">
          <label>
            {{ scope.row.startUserName }}
            <el-tag type="info" size="mini">{{ scope.row.startDeptName }}</el-tag>
          </label>
        </template>
      </el-table-column>
      <el-table-column label="接收时间" align="center" prop="createTime" width="180" />
    </el-table>
    <pagination :total="queryParams.total" :page.sync="queryParams.current" :limit.sync="queryParams.size" @pagination="pagination" />
    <!-- 编辑信息 -->
    <el-dialog title="编辑用户信息" :visible.sync="editDialog" width="40%">
      <el-card class="box-card">
        <el-col :span="16" :offset="4">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="请假原因2"><el-input v-model="form.zd2" /></el-form-item>
            <el-form-item label="请假天数1"><el-input v-model="form.zd1" /></el-form-item>
            <el-form-item label="指定人员3"><el-input v-model="form.zd3" /></el-form-item>
            <el-form-item label="审批意见4"><el-input v-model="form.zd4" /></el-form-item>
            <el-form-item label="指定待办人"><el-input v-model="form.INITIATOR" /></el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleComplete">同意</el-button>
              <el-button @click="handleReject">驳回</el-button>
              <el-button @click="getNextNode">下一环节</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-card>
    </el-dialog>
  </div>
</template>
<script>
import reqFlow from '@/api/workflow/flow'
import {complete} from'@/api/workflow/flow'
import {  rejectTask } from "@/api/workflow/todo";
export default {
  data() {
    return {
      editDialog:false,
      queryParams: {
        current: 1,
        size: 10,
        total: 0,
        params: {
          processDefinitionId:'',
          days: '',
          startTime: '',
          userSid: window.sessionStorage.getItem('userSid')
        }
      },
      tableLoading: false,
      myTaskList: [],
      form: {
        zd: '',
        days: '',
        initiator: '',
        outcome: '',
        taskId:"",
        userSid:"",
        comment:"",
        instanceId:""
      }
    }
  },
  created() {
    this.loadList()
  },
  methods: {
    /** 审批任务 */
    handleComplete() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          complete(this.form).then(response => {
            this.editDialog = false;
            this.handleQuery();
          });
        }
      });
    },
    // 跳转到处理页面
    handleProcess(row) {
      this.editDialog = true
      this.form.zd1=row.processVariables.zd1;
      this.form.zd2=row.processVariables.zd2;
      this.form.zd3=row.processVariables.zd3;
      this.form.zd4=row.processVariables.zd4;
/*
      this.form.zd=row.processVariables.zd;
      this.form.outcome=row.processVariables.outcome;
      this.form.initiator=row.processVariables.initiator;
      this.form.days=row.processVariables.days;
*/
      this.form.taskId=row.taskId;
      this.form.userSid=  window.sessionStorage.getItem('userSid');
      this.form.comment='同意';
      this.form.instanceId=row.procInsId;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs['queryForm'].resetFields()
      this.handleQuery()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.loadList()
    },
    loadList() {
      this.queryParams.params.processDefinitionId="order_approve_96asleqi:1:227504"
      this.tableLoading = true
      reqFlow
        .todoTaskList(this.queryParams)
        .then(response => {
          this.myTaskList = response.data.records
          this.queryParams.total = response.data.total
          this.tableLoading = false
        })
        .catch(e => {
          this.tableLoading = false
        })
    },
    // 分页
    pagination(val) {
      this.queryParams.current = val.pageNum
      this.queryParams.size = val.pageSize
      this.loadList()
    },
    /** 驳回任务 */
    handleReject() {
      const params = {
        taskId: this.form.taskId
      }
      rejectTask(params).then(res => {
        this.msgSuccess(res.msg);
        this.goBack();
      });
    },
    /** 下一环节 */
    getNextNode() {
      const params = {
        taskId: this.form.taskId
      }
      reqFlow.getNextNodes(params).then(res => {
        this.msgSuccess(res.msg);
      });
    }
  }
}
</script>

<style></style>
