<template>
  <div class="app-container">
    <el-dialog :title="taskDialog.title" :visible.sync="taskDialog.visible">
      <el-form ref="form1" :model="form" label-width="120px">
        <el-form-item label="选择办理人">
          <el-select
            style="width: 50%"
            v-model="assignee"
            @change="handleCheckChange"
            :multiple="taskForm.multiple"
            placeholder="请选择"
          >
            <el-option
              v-for="item in userDataList"
              :key="item.loginName"
              :label="item.realName"
              :value="item.loginName"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="taskConfirm">确 定</el-button>
        <el-button @click="taskCancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="el-icon-document">办理信息</span>
        <el-button style="float: right" type="primary" @click="goBack"
          >返回</el-button
        >
      </div>

      <el-col :span="22" :offset="2" v-if="variableOpen">
        <el-descriptions
          style="margin-bottom: 10px; font-size: 14px"
          class="margin-top"
          title="申请事项信息"
          direction="vertical"
          :column="1"
          :size="size"
          border
        >
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-notebook-2"></i>
              一次办名称
            </template>
            {{ businessData.oneThingName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              事项申报内容
            </template>
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item
                style="font-size: 14px"
                v-for="(value, key, index) in businessData.matterGroup"
                :key="index"
                :title="key | ellipsis"
                :name="index"
              >

         
                <!--附件列表-->
                <el-table
                  v-if="value.length > 0"
                  class="down"
                  :data="value"
                  style="margin-top: 20px; margin-bottom: 10px"
                >
                  <el-table-column
                    prop="datumName"
                    width="500px"
                    label="材料名称"
                  >
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{
                        scope.row.datumName
                      }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column
                    width="150px"
                    prop="fileName"
                    label="文件名称"
                  ></el-table-column>

                  <el-table-column width="150px" label="操作">
                    <template slot-scope="scope">
                      <el-button size="small" type="text">
                        <el-link
                          type="primary"
                          @click="
                            downloadDatumFile(
                              scope.row.matterId,
                              scope.row.filePath
                            )
                          "
                          >下载</el-link
                        >
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-collapse-item>
            </el-collapse>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              描述信息
            </template>
            {{ businessData.oneThingDesc }}
          </el-descriptions-item>
        </el-descriptions>

        <!--附件列表-->
        <el-table
          v-if="datumFileList.length > 0"
          class="down"
          :data="datumFileList"
          border
          stripe
          style="width: 100%; margin-top: 20px; margin-bottom: 10px"
        >
          <el-table-column prop="datumid" label="材料名称">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                util_formatter("datumid", scope.row.datumid)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="file" label="文件名称"></el-table-column>

          <el-table-column prop="uploadtime" label="上传时间">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{
                formatterDate(scope.row.uploadtime)
              }}</span>
            </template>
          </el-table-column>

          <el-table-column width="150px" label="操作">
            <template slot-scope="scope">
              <el-button size="small" type="text">
                <el-link
                  type="primary"
                  @click="downloadDatumFile(scope.row.id, scope.row.file)"
                  >下载</el-link
                >
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--审批流程模块-->
        <div
          style="margin-left: 20px; margin-bottom: 20px; font-size: 14px"
          v-if="finished === 'true'"
        >
          <el-form
            ref="taskForm"
            :model="taskForm"
            label-width="80px"
            size="mini"
          >
            <el-form-item
              label="审批意见"
              prop="message"
              :rules="[
                { required: true, message: '请输入意见', trigger: 'blur' },
              ]"
            >
              <el-input
                style="width: 50%"
                type="textarea"
                v-model="taskForm.message"
                placeholder="请输入意见"
              />
            </el-form-item>

            <el-form-item prop="attachUrl" label="附件">
              <el-upload
                class="upload-demo"
                action="/m/file/upload"
                :on-success="handleAttsSuccess"
                name="uploadFile"
                :file-list="fileList"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>

            <el-form-item
              label="退回节点"
              prop="targetKey"
              v-show="taskForm.returnTaskShow"
            >
              <el-radio-group v-model="taskForm.targetKey">
                <el-radio-button
                  v-for="item in returnTaskList"
                  :key="item.id"
                  :label="item.id"
                  >{{ item.name }}</el-radio-button
                >
              </el-radio-group>
            </el-form-item>

            <el-form-item
              label="下一步办理人"
              prop="targetKey"
              v-show="taskForm.sendUserShow"
            >
              <el-select
                style="width: 50%"
                v-model="assignee"
                @change="handleCheckChange"
                :multiple="taskForm.multiple"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in userDataList"
                  :key="item.loginName"
                  :label="item.realName"
                  :value="item.loginName"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <div v-show="taskForm.defaultTaskShow">
                <el-button
                  icon="el-icon-edit-outline"
                  type="success"
                  size="mini"
                  @click="handleComplete"
                  >审批</el-button
                >
                <el-button
                  icon="el-icon-edit-outline"
                  type="primary"
                  size="mini"
                  @click="handleDelegate"
                  >委派</el-button
                >
                <el-button
                  icon="el-icon-edit-outline"
                  type="primary"
                  size="mini"
                  @click="handleAssign"
                  >转办</el-button
                >
                <el-button
                  icon="el-icon-edit-outline"
                  type="primary"
                  size="mini"
                  @click="handleAddSign"
                  >加签</el-button
                >
                <el-button
                  icon="el-icon-refresh-left"
                  type="warning"
                  size="mini"
                  @click="handleReturn"
                  >退回</el-button
                >
                <el-button
                  icon="el-icon-circle-close"
                  type="danger"
                  size="mini"
                  @click="handleReject"
                  >驳回</el-button
                >
              </div>
              <div v-show="taskForm.returnTaskShow">
                <el-button type="primary" @click="submitReturnTask"
                  >确 定</el-button
                >
                <el-button @click="cancelTask">取 消</el-button>
              </div>
              <div v-show="taskForm.delegateTaskShow">
                <el-button type="primary" @click="submitDeleteTask"
                  >确 定</el-button
                >
                <el-button @click="cancelDelegateTask">取 消</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-col>

      <!--初始化流程加载表单信息-->
      <el-col :span="16" :offset="4" v-if="formConfOpen">
        <div class="test-form">
          <parser
            :key="new Date().getTime()"
            :form-conf="formConf"
            @submit="submitForm"
            ref="parser"
            @getData="getData"
          />
        </div>
      </el-col>
    </el-card>

    <!--流程流转记录-->
    <el-card class="box-card" v-if="flowRecordList">
      <div slot="header" class="clearfix">
        <span class="el-icon-notebook-1">审批记录</span>
      </div>
      <el-col :span="16" :offset="4">
        <div class="block">
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in flowRecordList"
              :key="index"
              :icon="setIcon(item.finishTime)"
              :color="setColor(item.finishTime)"
            >
              <p style="font-weight: 700">{{ item.taskName }}</p>
              <el-card :body-style="{ padding: '10px' }">
                <label
                  v-if="item.assigneeName"
                  style="font-weight: normal; margin-right: 30px"
                  >实际办理： {{ item.assigneeName }}</label
                >
                <label
                  v-if="item.candidate"
                  style="font-weight: normal; margin-right: 30px"
                  >候选办理： {{ item.candidate }}</label
                >
                <label style="font-weight: normal">接收时间： </label
                ><label style="color: #8a909c; font-weight: normal">{{
                  formatterDate(item.createTime)
                }}</label>
                <label
                  v-if="item.finishTime"
                  style="margin-left: 30px; font-weight: normal"
                  >办结时间： </label
                ><label
                  v-if="item.finishTime"
                  style="color: #8a909c; font-weight: normal"
                  >{{ formatterDate(item.finishTime) }}</label
                >
                <label
                  v-if="item.duration"
                  style="margin-left: 30px; font-weight: normal"
                  >耗时： </label
                ><label style="color: #8a909c; font-weight: normal">{{
                  item.duration
                }}</label>
                <el-divider></el-divider>
                <p v-if="item.comment">
                  <el-tag type="success" v-if="item.comment.type === '1'">
                    {{ item.comment.comment }}</el-tag
                  >
                  <el-tag type="warning" v-if="item.comment.type === '2'">
                    {{ item.comment.comment }}</el-tag
                  >
                  <el-tag type="danger" v-if="item.comment.type === '3'">
                    {{ item.comment.comment }}</el-tag
                  >
                </p>

                <!--附件列表-->
                <el-table
                  v-if="item.attachmentList && item.attachmentList.length > 0"
                  class="down"
                  :data="item.attachmentList"
                  border
                  stripe
                  style="width: 100%; margin-top: 20px"
                >
                  <el-table-column
                    prop="name"
                    label="文件名称"
                  ></el-table-column>

                  <el-table-column
                    prop="type"
                    label="文件类型"
                  ></el-table-column>
                  <el-table-column prop="attachSize" label="文件大小">
                  </el-table-column>

                  <el-table-column width="150px" label="操作">
                    <template slot-scope="scope">
                      <el-button size="small" type="text">
                        <el-link
                          type="primary"
                          @click="downloadFile(scope.row.name, scope.row.url)"
                          >下载</el-link
                        >
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-col>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="el-icon-picture-outline">流程图</span>
      </div>
      <flow :xmlData="xmlData" :taskData="taskList"></flow>
    </el-card>
  </div>
</template>

<script>
import { flowRecord } from "@/api/flowable/finished";
import {
  definitionStart,
  getProcessVariables,
  userList,
  readXml,
  getFlowViewer,
} from "@/api/flowable/definition";
import {
  complete,
  rejectTask,
  returnList,
  returnTask,
  getNextFlowNode,
  delegate,
  assignTask,
  addSignTask,
} from "@/api/flowable/todo";
import flow from "@/views/flowable/task/record/flow";
export default {
  name: "Record",
  components: {
    flow,
  },
  props: {},
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 80) {
        return value.slice(0, 80) + "...";
      }
      return value;
    },
  },
  data() {
    return {
      taskDialog: {
        visible: false,
        title: "委派任务",
        type: "",
      },
      // 模型xml数据
      xmlData: "",
      entity: {},
      taskList: [],
      fileList: [],
      datumFileList: [],
      dict: {},
      businessData: {},
      activeNames:[0,1,2,3,4,5,6],

      loading: true,
      flowRecordList: [], // 流程流转数据
      formConfCopy: {},
      src: null,
      rules: {}, // 表单校验
      variablesForm: {}, // 流程变量数据
      taskForm: {
        returnTaskShow: false, // 是否展示回退表单
        delegateTaskShow: false, // 是否展示回退表单
        defaultTaskShow: true, // 默认处理
        sendUserShow: false, // 审批用户
        multiple: false,
        message: "", // 意见内容
        processInstanceId: "", // 流程实例编号
        instanceId: "", // 流程实例编号
        deployId: "", // 流程定义编号
        taskId: "", // 流程任务编号
        procDefId: "", // 流程编号
        vars: "",
        activityId: "",
        delegateUserCode: "", //委派对象人
        turnToUserId: "", //转办对象人id
        userCode: "", //当前任务人
        attachments: [],
      },
      userDataList: [], // 流程候选人
      assignee: null,
      formConf: {}, // 默认表单数据
      formConfOpen: false, // 是否加载默认表单数据
      variables: [], // 流程变量数据
      variablesData: {}, // 流程变量数据
      variableOpen: false, // 是否加载流程变量数据
      returnTaskList: [], // 回退列表数据
      finished: "false",
    };
  },
  created() {
    console.log("index", this.$route.query);
    //通过业务id查询详细

    this.getBusinessDetail(this.$route.query.businessKey);

    //this.getBusinessFiles(this.$route.query.businessKey);

    this.taskForm.deployId = this.$route.query && this.$route.query.deployId;
    this.taskForm.taskId = this.$route.query && this.$route.query.taskId;
    this.taskForm.processInstanceId =
      this.$route.query && this.$route.query.procInsId;
    this.taskForm.instanceId = this.$route.query && this.$route.query.procInsId;
    // 初始化表单
    this.taskForm.procDefId = this.$route.query && this.$route.query.procDefId;
    // 回显流程记录
    this.getFlowViewer(this.taskForm.processInstanceId);
    this.getModelDetail(this.taskForm.deployId);
    // 流程任务重获取变量表单
    if (this.taskForm.taskId) {
      this.processVariables(this.taskForm.taskId);
      this.getNextFlowNode(this.taskForm.taskId);
      this.taskForm.deployId = null;
    }
    //获取审批记录
    this.getFlowRecordList(
      this.taskForm.processInstanceId,
      this.taskForm.deployId
    );

    //获取当前人员

    userList({}).then(({ data }) => {
      // this.variables = res.data.variables;
      this.userDataList = data.result;
      console.log("userDataList", this.userDataList);
    });

    this.finished = this.$route.query && this.$route.query.finished;
  },
  mounted() {

  },
  methods: {
    downloadDatumFile(id, url) {
      console.log("下载地址", url);

      // window.open(this.GLOBAL.httpUrl + url, "_self");
      console.log(this.GLOBAL);
      window.open(this.GLOBAL.http.url + url, "_blank");

      //window.location.href = url
    },
    /** 流程变量赋值 */
    handleCheckChange(val) {
      if (val instanceof Array) {
        this.taskForm.values = {
          approval: val.join(","),
        };
      } else {
        this.taskForm.values = {
          approval: val,
        };
      }
    },
    taskCancel(val) {
      console.info("任务办理取消", val);

      this.taskDialog.visible = false;
    },
    handleAttsSuccess(response, file, fileList) {
      let code = response.code;
      if (code === 1) {
        let att = {};
        att.name = file.name;
        att.desc = "";
        att.type = file.name.split(".")[1];
        att.url = response.url;

        this.fileList.push(att);
      } else {
        this.$message.error("上传文件失败");
      }
    },
    formatterDate(time) {
      console.log("time:" + time);
      let date = new Date(Number(time));
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = this.panLeft(date.getDate()) + " ";
      let h = this.panLeft(date.getHours()) + ":";
      let m = this.panLeft(date.getMinutes()) + ":";
      let s = this.panLeft(date.getSeconds());
      return Y + M + D + h + m + s;
    },

    panLeft(num) {
      return num < 10 ? "0" + num : num;
    },

    // 从dict字段暴力取值，取不到则返回原值
    util_formatter(key, val) {
      try {
        return this.dict[key][val];
      } catch (error) {
        return val;
      }
    },

    getBusinessDetail(id) {
      //获取业务信息
      this.$post("/yth/onething/getBusinessDetail", {
        id: id,
      }).then((res) => {
        console.log("business", res);
        this.businessData = res.data;
        // this.entity = res.data.entity;
      });

      // this.$post("/yth/onething/view", {
      //   id: [id],
      // }).then((res) => {
      //   console.log("business", res);

      //   this.entity = res.data.entity;
      // });
    },

    // getBusinessFiles(id) {
    //   //获取业务详细
    //   this.$post("/datum/file/list", {
    //     "query.tid": id,
    //   }).then((res) => {
    //     console.log("business", res);
    //     this.datumFileList = res.data.result;

    //     this.dict = Object.assign({}, this.dict, res.data.dict);
    //   });
    // },

    /** xml 文件 */
    getModelDetail(deployId) {
      // 发送请求，获取xml
      console.log("发送请求，获取xml deployId:" + deployId);
      readXml(deployId).then((res) => {
        console.log(res);
        this.xmlData = res.data;
      });
    },
    getFlowViewer(procInsId) {
      getFlowViewer(procInsId).then((res) => {
        this.taskList = res.data;
      });
    },
    setIcon(val) {
      if (val) {
        return "el-icon-check";
      } else {
        return "el-icon-time";
      }
    },
    setColor(val) {
      if (val) {
        return "#2bc418";
      } else {
        return "#b3bdbb";
      }
    },
    /** 流程变量赋值 */
    handleCheckChange(val) {
      console.log("流程变量赋值val", val);
      if (val instanceof Array) {
        this.taskForm.values = {
          approval: val.join(","),
        };
      } else {
        this.taskForm.values = {
          approval: val,
        };
      }
    },
    /** 流程流转记录 */
    getFlowRecordList(procInsId, deployId) {
      console.log(
        "流程流转记录 procInsId:" + procInsId + " deployId:" + deployId
      );
      const params = { procInsId: procInsId, deployId: deployId };
      flowRecord(params)
        .then((res) => {
          console.log("flowRecord res:", res);
          this.flowRecordList = res.data.flowList.list;
          // 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
          if (res.data.formData) {
            this.formConf = res.data.formData;
            this.formConfOpen = true;
          }
        })
        .catch((res) => {
          this.goBack();
        });
    },
    fillFormData(form, data) {
      form.fields.forEach((item) => {
        const val = data[item.__vModel__];
        if (val) {
          item.__config__.defaultValue = val;
        }
      });
    },
    /** 获取流程变量内容 */
    processVariables(taskId) {
      if (taskId) {
        // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
        getProcessVariables(taskId).then((res) => {
          // this.variables = res.data.variables;
          console.log("流程变量信息", res);
          //console.log("variablesData",this.variablesData);
          //let json=JSON.parse(res.data.data);
          this.variablesData = res.data.variables;
          this.variableOpen = true;
        });
      }
    },
    /** 根据当前任务或者流程设计配置的下一步节点 */
    getNextFlowNode(taskId) {
      // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
      const params = { taskId: taskId };
      getNextFlowNode(params).then((res) => {
        console.log("nextFlow", res);
        const data = res.data;
        if (data && data.dateType == "dynamic") {
          if (data.type === "assignee") {
            //  this.userDataList = res.data.userList;
          } else if (data.type === "candidateUsers") {
            // this.userDataList = res.data.userList;
            this.taskForm.multiple = true;
          } else if (data.type === "candidateGroups") {
            res.data.roleList.forEach((role) => {
              role.userId = role.roleId;
              role.nickName = role.roleName;
            });
            // this.userDataList = res.data.roleList;
            this.taskForm.multiple = false;
          } else if (data.type === "multiInstance") {
            //this.userDataList = res.data.userList;
            this.taskForm.multiple = true;
          }
          this.taskForm.sendUserShow = true;
        }
      });
    },
    /** 审批任务 */
    handleComplete() {
      this.$refs["taskForm"].validate((valid) => {
        if (valid) {
          for (let item of this.fileList) {
            this.taskForm.attachments.push(item);
          }
          complete(this.taskForm).then((response) => {
            this.$message.success(response.msg);
            this.goBack();
          });
        }
      });
    },

    /** 任务办理 */
    taskConfirm() {
      //判断是委派，转办还是其它
      if (this.taskDialog.type === "delegate") {
        //委派 目标人员
        this.taskForm.delegateUserCode = this.assignee;
        this.submitDeleteTask();
      } else if (this.taskDialog.type === "assign") {
        this.taskForm.turnToUserId = this.assignee;
        this.submitAssignTask();
      } else if (this.taskDialog.type === "addSign") {
        console.log(this.assignee);
        this.taskForm.addSignUserList = this.assignee;
        this.submitAddSignTask();
      }
    },

    /** 委派任务 */
    submitDeleteTask() {
      this.$refs["taskForm"].validate((valid) => {
        if (valid) {
          delegate(this.taskForm).then((response) => {
            this.$message.success(response.msg);
            this.goBack();
          });
        }
      });
    },

    /** 转办任务 */
    submitAssignTask() {
      this.$refs["taskForm"].validate((valid) => {
        if (valid) {
          assignTask(this.taskForm).then((response) => {
            this.$message.success(response.msg);
            this.goBack();
          });
        }
      });
    },

    /** 加签任务 */
    submitAddSignTask() {
      this.$refs["taskForm"].validate((valid) => {
        if (valid) {
          addSignTask(this.taskForm).then((response) => {
            this.$message.success(response.msg);
            this.goBack();
          });
        }
      });
    },

    /** 委派任务 */
    handleDelegate() {
      console.log("委派人员，选择目标人员，进行办理");

      this.taskDialog.title = "委派任务";
      this.taskDialog.visible = true;
      this.taskDialog.type = "delegate";
      this.taskForm.multiple = false;
    },
    /** 转办任务 */
    handleAssign() {
      this.taskDialog.title = "转办任务";
      this.taskDialog.visible = true;
      this.taskDialog.type = "assign";
      this.taskForm.multiple = false;
    },

    handleAddSign() {
      console.log("加签");
      this.taskDialog.title = "加签";
      this.taskDialog.visible = true;
      this.taskDialog.type = "addSign";
      this.taskForm.multiple = true;
    },
    /** 返回页面 */
    goBack() {
      // 关闭当前标签页并返回上个页面
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.go(-1);
    },
    /** 接收子组件传的值 */
    getData(data) {
      if (data) {
        const variables = [];
        data.fields.forEach((item) => {
          let variableData = {};
          variableData.label = item.__config__.label;
          // 表单值为多个选项时
          if (item.__config__.defaultValue instanceof Array) {
            const array = [];
            item.__config__.defaultValue.forEach((val) => {
              array.push(val);
            });
            variableData.val = array;
          } else {
            variableData.val = item.__config__.defaultValue;
          }
          variables.push(variableData);
        });
        this.variables = variables;
      }
    },
    /** 申请流程表单数据提交 */
    submitForm(data) {
      if (data) {
        const variables = data.valData;
        const formData = data.formData;
        formData.disabled = true;
        formData.formBtns = false;
        if (this.taskForm.procDefId) {
          variables.variables = formData;
          // 启动流程并将表单数据加入流程变量
          definitionStart(
            this.taskForm.procDefId,
            JSON.stringify(variables)
          ).then((res) => {
            this.$message.success(res.msg);
            this.goBack();
          });
        }
      }
    },
    /** 驳回任务 */
    handleReject() {
      this.$refs["taskForm"].validate((valid) => {
        if (valid) {
          rejectTask(this.taskForm).then((res) => {
            this.$message.success(res.msg);
            this.goBack();
          });
        }
      });
    },
    /** 可退回任务列表 */
    handleReturn() {
      returnList(this.taskForm).then((res) => {
        this.returnTaskList = res.data;
        this.taskForm.returnTaskShow = true;
        this.taskForm.defaultTaskShow = false;
        this.taskForm.sendUserShow = false;
        this.taskForm.values = null;
      });
    },
    /** 取消回退任务按钮 */
    cancelTask() {
      this.taskForm.returnTaskShow = false;
      this.taskForm.defaultTaskShow = true;
      this.taskForm.sendUserShow = true;
      this.returnTaskList = [];
    },
    /** 提交退回任务 */
    submitReturnTask() {
      this.$refs["taskForm"].validate((valid) => {
        if (valid) {
          returnTask(this.taskForm).then((res) => {
            this.$message.success(res.msg);
            this.goBack();
          });
        }
      });
    },

    /** 取消回退任务按钮 */
    cancelDelegateTask() {
      this.taskForm.delegateTaskShow = false;
      this.taskForm.defaultTaskShow = true;
      this.taskForm.sendUserShow = true;
      this.returnTaskList = [];
    },
  },
};
</script>
<style lang="scss" scoped>
.test-form {
  margin: 15px auto;
  width: 800px;
  padding: 15px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}


</style>
