<template>
  <div class="container">
    <fullscreen :fullscreen.sync="fullscreen" class="container-box">
      <div class="titbox">
        <h2>已办工单查询</h2>
        <div>
          <i class="el-icon-refresh" @click="iconCli(1)"></i>
          <i class="el-icon-full-screen" @click="iconCli(2)"></i>
          <!--                    <i class="el-icon-folder-opened"></i>-->
          <!--                    <i class="el-icon-view"></i>-->
          <!--                    <i class="el-icon-more"></i>-->
        </div>
      </div>
      <div class="search">
        <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
      </div>
      <div class="tabbox">
        <el-table
		 height="calc(100% - 40px)"
          v-loading="loading"
          class="com-table"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          size="small"
          border
          style="width: 100%"
        >
          <el-table-column
            align="center"
            prop="taskId"
            show-overflow-tooltip
            label="任务编码"
          >
          </el-table-column>
          <el-table-column
            prop="taskName"
            label="任务名称"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="woNo"
            show-overflow-tooltip
            label="工单编号"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="stepId"
            show-overflow-tooltip
            label="环节编码"
          >
          </el-table-column>
          <el-table-column align="center" prop="stsDesc" label="工单状态">
          </el-table-column>
          <el-table-column
            align="center"
            prop="procId"
            show-overflow-tooltip
            label="流程编号"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="procName"
            label="流程名称"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column align="center" prop="opName" label="处理人">
          </el-table-column>
          <el-table-column
            align="center"
            prop="opTime"
            show-overflow-tooltip
            label="处理时间"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="roleCode"
            show-overflow-tooltip
            label="角色编码"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="roleName"
            show-overflow-tooltip
            label="角色名称"
          >
          </el-table-column>
          <el-table-column align="center" prop="dealTypeDesc" label="处理状态">
          </el-table-column>
          <el-table-column align="center" prop="dealType" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                plain
                type="primary"
                @click="detailes(scope.row)"
                >轨迹</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pageBox"
          @current-change="currchange"
          layout="prev, pager, next"
          background
          :total="total"
        >
        </el-pagination>
      </div>
    </fullscreen>
    <el-dialog
      :modal-append-to-body="false"
      :close-on-click-modal="true"
      title="流程轨迹"
      :visible.sync="dateVisible"
      width="80%"
    >
      <div style="height: 500px; width: 100%">
        <iframe
          width="100%"
          height="100%"
          :src="`/static/views/flow/flowDesignPrew.html?prevFlag=true&woNo=${rowData.woNo}&taskName=${rowData.actionName}&fqFlag=Y&procId=${rowData.procId}#&woTitle=${rowData.procName}&procName=${rowData.procName}&procVersion=${rowData.procVersion}`"
          frameborder="0"
        ></iframe>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import mySearch from "../../../components/search";

export default {
  components: {
    mySearch,
  },
  data() {
    return {
      rowData: "",
      dateVisible: false,
      fullscreen: false,
      total: 0,
      pageSize: 1,
      tableData: [],
      searchList: [
        {
          type: "input",
          tit: "工单名称",
          value: "",
          width: "24%",
          options: [],
        },
        {
          type: "input",
          tit: "工单编号",
          value: "",
          width: "24%",
          options: [],
        },
        {
          type: "input",
          tit: "任务名称",
          value: "",
          width: "24%",
          options: [],
        },
        {
          type: "input",
          tit: "任务编号",
          value: "",
          width: "24%",
          options: [],
        },
      ],
      params: {
        taskId: "",
        taskName: "",
        woNo: "",
        woTitle: "",
      },
      loading: false,
    };
  },
  methods: {
    detailes(row) {
      this.rowData = row;
      this.dateVisible = true;
    },
    //搜索数据
    searchInfo(v) {
      this.params = {};
      v[0] ? (this.params.woTitle = v[0]) : "";
      v[1] ? (this.params.woNo = v[1]) : "";
      v[2] ? (this.params.taskName = v[2]) : "";
      v[3] ? (this.params.taskId = v[3]) : "";
      this.getList(this.params, this.pageSize);
    },
    //获取列表
    getList(v, n) {
      this.loading = true;
      this.pageSize = n;
      this.$http({
        url: "/bpm/api/queryDoneTaskList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + n + '","pageSize":"10"}',
        },
        data: v,
      }).then((res) => {
        this.loading = false;
        this.tableData = res.data.data;
        this.total = res.data.totalRecord;
      });
    },
    //功能栏
    iconCli(v) {
      if (v === 1) {
        this.getList(this.params, this.pageSize);
      }
      if (v === 2) {
        this.fullscreen = !this.fullscreen;
      }
    },
    // 分页
    currchange(v) {
      this.pageSize = v;
      this.getList(this.params, this.pageSize);
    },
  },
  mounted() {
    this.getList(this.params, this.pageSize);
  },
};
</script>
<style>
.el-input__suffix {
  cursor: pointer;
}
</style>
<style scoped lang="scss">
.titbox {
  div {
    float: right;

    i {
      font-size: 22px;
      margin-left: 20px;
      cursor: pointer;
    }
  }
}

.tabbox {
  margin-top: 15px;
}

.pageBox {
  text-align: right;
  margin-top: 10px;
}
</style>
