
<template>
  <div class="page">
    <LayoutTable :data="tableData" :config="tableConfig" notAdd notDel>
      <!-- <el-button
        slot="table-head-left2"
        icon="el-icon-plus"
        size="mini"
        @click="handleAdd"
        >新增流程</el-button
      >

      <el-button
        slot="table-head-left2"
        style="margin-left: 10px"
        icon="el-icon-download"
        size="mini"
        @click="handleExport"
        >导出</el-button
      > -->
    </LayoutTable>

    <el-dialog
      title="流程预览图"
      :visible.sync="viewImageDialog.visible"
      width="80%"
    >
      <img :src="'data:image/png;base64,' + viewImageDialog.img" />
    </el-dialog>

    <!-- 添加或修改流程定义对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
      <el-table v-loading="processLoading" fit :data="definitionList" border>
        <el-table-column
          label="流程编号"
          width="300"
          align="center"
          prop="deploymentId"
        />
        <el-table-column label="流程名称" align="center" prop="name" />
        <el-table-column label="流程版本" align="center">
          <template slot-scope="scope">
            <el-tag size="medium">{{ scope.row.version }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="流程分类" align="center" prop="category" />

        <el-table-column label="表单名称" align="center" prop="formName" />
        <el-table-column
          label="操作"
          align="center"
          width="200"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit-outline"
              @click="handleStartProcess(scope.row)"
              >发起流程</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="definitionTotal > 0"
        :total="definitionTotal"
        :page.sync="formquery.pageInfo.currPage"
        :limit.sync="formquery.pageInfo.prePageResult"
      />
    </el-dialog>
  </div>
</template>

<script>
import {
  getDeployment,
  delDeployment,
  addDeployment,
  updateDeployment,
  exportDeployment,
  flowRecord,
} from "@/api/flowable/finished";
import { myProcessList, stopProcess } from "@/api/flowable/process";
import { listDefinition } from "@/api/flowable/definition";
import table from "@/assets/mixins/table";

export default {
  mixins: [table],
  methods: {
    /** 查询流程定义列表 */
    getList() {
      this.loading = true;
      myProcessList(this.queryParams).then((response) => {
        this.myProcessList = response.data.records;
        this.processTotal = response.data.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        category: null,
        key: null,
        tenantId: null,
        deployTime: null,
        derivedFrom: null,
        derivedFromRoot: null,
        parentDeploymentId: null,
        engineVersion: null,
      };
      this.resetForm("form");
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
      this.title = "发起流程";
      listDefinition(this.formquery).then((res) => {
        console.log(res);

        this.definitionList = res.data.result;
        this.definitionTotal = res.data.pageInfo.totalResult;
        this.formquery.pageInfo = res.data.pageInfo;
        this.processLoading = false;
      });
    },
    /**  发起流程申请 */
    handleStartProcess(row) {
      console.log("发起流程申请", row);
      this.$router.push({
        path: "/flowable/task/record/index",
        query: {
          deployId: row.deploymentId,
          procDefId: row.procDefId,
          finished: true,
        },
      });
    },
    /**  取消流程申请 */
    handleStop(row) {
      console.log(row);
      const params = {
        processInstanceId: row.procInsId,
      };
      stopProcess(params).then((res) => {
        this.$message.success(res.msg);
        this.getData();
      });
    },
    /** 流程流转记录 */
    handleFlowRecord(row) {
      this.$router.push({
        path: "/flowable/task/record/index",
        query: {
          procInsId: row.procInsId,
          deployId: row.deployId,
          taskId: row.taskId,
          finished: false,
        },
      });
    },

    /**  预览当前流程图 */
    handleView(row) {
      console.log("预览当前流程图", row);
      this.viewImageDialog.img = "";
      this.$post("/task/process/preViewImage", {
        processInstanceId: row.procInsId,
      })
        .then((res) => {
          this.viewImageDialog.img = res.pic;

          this.viewImageDialog.visible = true;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getDeployment(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改流程定义";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateDeployment(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addDeployment(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm(
        '是否确认删除流程定义编号为"' + ids + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$post("/task/process/deleteProcess", {
            processInstanceId: row.procInsId,
            deleteReason: "强制删除",
          })
            .then((res) => {
              this.getData();
              this.$message.success("删除成功");
            })
            .catch((error) => {
              this.$message.error(error.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有流程定义数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return exportDeployment(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
  },
  data() {
    return {
      viewImageDialog: {
        visible: false,
        img: "",
      },
      // 遮罩层
      loading: true,
      processLoading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      processTotal: 0,
      // 我发起的流程列表数据
      myProcessList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      src: "",
      definitionList: [],
      definitionTotal: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        category: null,
        key: null,
        tenantId: null,
        deployTime: null,
        derivedFrom: null,
        derivedFromRoot: null,
        parentDeploymentId: null,
        engineVersion: null,
      },
      //formlist pos
      formquery: {
        pageInfo: {
          beginIndex: 0,
          currPage: 1,
          displayPageSize: 5,
          hasNextPage: false,
          hasPrePage: false,
          prePageResult: 10,
          totalPage: 0,
          totalResult: 0,
        },
        query: {},
      },

      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      config: {
        search: [
          {
            name: "name",
            type: "text",
            label: "名称",
          },
        ],
        columns: [
          {
            prop: "procInsId",
            label: "流程实例编号",
          },

          {
            prop: "procDefName",
            label: "流程名称",
          },

          {
            prop: "category",
            label: "流程分类",
          },

          {
            prop: "procDefVersion",
            label: "流程版本",
          },

          {
            prop: "createTime",
            label: "提交时间",
            width: 140,
            formatter: this.formatterDate,
          },

          {
            prop: "flowStatus",
            label: "流程状态",
            formatter: this.formatter,
          },

          {
            prop: "duration",
            label: "耗时",
          },

          {
            prop: "taskName",
            label: "当前节点",
          },

          {
            prop: "assigneeName",
            label: "办理人",
            formatter: this.formatter,
          },

          {
            label: "操作",
            width: 240,
            formatter: (row) => {
              return (
                <el-row>
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-tickets"
                    onClick={() => {
                      this.handleFlowRecord(row);
                    }}
                  >
                    详情
                  </el-button>

                  <span> </span>

                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-connection"
                    v-if="row.formId != null"
                    onClick={() => {
                      this.handleStop(row);
                    }}
                  >
                    取消申请
                  </el-button>

                  <span> </span>
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    onClick={() => {
                      this.handleDelete(row);
                    }}
                  >
                    删除
                  </el-button>

                  <span> </span>
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    onClick={() => {
                      this.handleView(row);
                    }}
                  >
                    预览
                  </el-button>
                </el-row>
              );
            },
          },
        ],
      },
    };
  },
};
</script>
