spfm-market-front/src/components/workflowEntrance.vue

<template>
  <div>
    <div class="flex-handle">
      <!-- <button @click="qqq">123</button> -->
      <div class="flex-left">
        <div class="flex-left-header">
          <div class="flex-path">
            <div class="flex-left-header-text">
              选择路径

              <div class="flex-path-list">
                <div :class="active" @click="getTreeLists(9)">转派</div>
                <div :class="actives" @click="getclose()">结束</div>
                <!-- <div
                  v-for="(item, index) in node.nextShapes"
                  :key="index"
                  :class="seleIndex == index ? 'active' : ''"
                  @click="clickGetTree(item, index)"
                > 
                  {{ item.properties.name }}
                </div> -->
              </div>
            </div>
          </div>
          <div class="flex-commons">
            <div class="flex-left-header-text">
              常用意见
              <span @click="clickEdit" class="flex-icon"><i class="el-icon-edit"></i>修改</span>
            </div>
            <div class="flex-slide">
              <div v-for="(item, index) in commonlyList" :key="index" ref="common" class="flex-common"
                @click="clickCommonly($event)">
                {{ item.dataName }}
              </div>
            </div>
          </div>
        </div>
        <div class="flex-opinion">
          <div class="flex-left-header-text">意见内容</div>
          <el-input type="textarea" autosize placeholder="请输入内容" v-model="textarea">
          </el-input>
        </div>
      </div>
      <!-- :class="{ copyClass: CopyStatus }" -->
      <!-- :class="{ 'flex-right-text': CopyStatus }" -->
      <div class="flex-right">
        <div class="flex-left-header-text">
          本部门人员办理
          <div style="display: flex">
            <div class="flex-header-text-tree">
              候选人
              <deptTree ref="defTree" class="flex-slide" :treeList="treeList" @changeTree="changeTree" />
            </div>
            <div class="flex-header-text-tree">
              已选人员
              <div class="" v-for="(item, index) in backThree" :key="index">
                {{ item.loginNameStr }}
              </div>
            </div>
          </div>
        </div>
        <!-- <div v-if="CopyStatus" class="flex-left-header-text flex-right-text">
          抄送人员
          <div style="display: flex">
            <div class="flex-header-text-tree">
              抄送人
              <deptTree
                ref="defTrees"
                class="flex-slide"
                :treeList="treeCopyList"
                @changeTree="changeTreeCopy"
              />
            </div>
            <div class="flex-header-text-tree">
              已选人员
              <div class="">{{ copyUser }}</div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
    <div class="flex-footer-botton">
      <div class="flex-button">
        <el-button type="primary" @click="getnewtransfertask(1)">提交</el-button>
      </div>
    </div>
    <el-dialog title="修改常用意见" :visible.sync="editStatus" width="100%" :before-close="editCloses" :modal="false"
      :destroy-on-close="true">
      <div style="overflow-y: scroll; overflow-x: hidden; height: 240px">
        <div v-for="(item, index) in commonlyList" :key="index" ref="common" class="flex-common">
          {{
            item.dataName
          }}<i class="el-icon-circle-close" @click="deleStatus(item)"></i>
        </div>
        <div class="flex-common">
          <i class="el-icon-circle-plus-outline" @click="addStatus()"></i>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import deptTree from "./workDeptThree.vue";
export default {
  components: {
    deptTree,
  },
  name: "workflow",
  data() {
    return {
      active: '',
      actives: '',
      MultipersonTransfer: false,
      transferStatus: false, //转派按钮控制
      TransferStatus: false, //是否点击转派状态
      copyStatus: false, //抄送按钮控制
      CopyStatus: false, //是否点击抄送状态
      node: [], //路径列表
      seleIndex: "", //点击路径下标
      commonlyList: [], //常用意见数组
      textarea: "未填写意见", //意见内容字段
      copyUser: "", //抄送人员列表
      selectUser: "", //已选人员列表
      treeList: [], // 待选人员列表
      propsList: [],
      nodes: [],
      initialList: [], //第一次进入是加载节点
      clicknextName: "", //获取的流程节点
      backThree: [],
      editStatus: false, //修改控制显示字段
      treeCopyList: [],
      demand: "",
      close: "",
      nextDealManLists: ''
    };
  },
  props: {
    //  表格数据和表格部分属性的对象
    // eslint-disable-next-line vue/require-default-prop
    list: {
      type: Object,
    },
    requestForm: {
      type: Object,
    },
    lastManList: {
      type: Object,
    },
  },
  created() {
    this.getNextPath(this.list.resourceId, 1);
    this.getMetirialType();
  },
  methods: {
    getclose() {
      this.backThree = [];
      this.treeList = [];
      this.close = "1";
      this.actives = this.actives != "" ? "" : 'actives'
      this.active = ""
    },
    // async getqueryMultiTaskId() {
    //   let list = {
    //     procinstid: this.list.processId,
    //     userId: JSON.parse(window.sessionStorage.userInfo).loginNo,
    //     // procinstid:this.fromList.processId

    //     // taskId:e.taskId
    //   };
    //   let _this = this;
    //   let obj = {
    //     url: this.$url.formList.getQueryMultiTaskId, //流程追踪接口
    //     data: list,
    //     headers: {
    //       "Content-Type": "application/json",
    //     },
    //   };
    //   let res = await this.common.httpPost(obj, success);
    //   function success(data) {
    //     console.log(data);
    //     _this.list.taskId = data.taskid;
    //   }
    // },
    //新转派接口
    async getnewtransfertask() {
      let _this = this;
      let list = {
        userId: "",
        userId: JSON.parse(window.sessionStorage.userInfo).loginNo, //人员id
        taskId: this.list.taskId, //表单标识
        procinstid: this.list.processId,
        // taskName: this.clicknextName, //流程节点
        userCode: JSON.parse(window.sessionStorage.userInfo).loginNo, //人员code
        content: this.textarea, //意见内容
        resourceId: this.list.resourceId
      };
      let obj = {};
      if (this.close == "1") {
        (list.userId = JSON.parse(window.sessionStorage.userInfo).loginNo),
          (obj.url = _this.$url.formList.getComplateLastMan), //下一步工作流接口
          (obj.data = list);
      } else {
        let listss = {
          userId: _this.nextDealManLists, //人员id
          taskId: this.list.taskId, //表单标识
          loginstr: JSON.parse(window.sessionStorage.userInfo).loginNoStr,
          // taskName: this.clicknextName, //流程节点
          content: this.textarea, //意见内容
        };

        (obj.url = _this.$url.formList.getNewTransferTask + _this.list.taskId), //下一步工作流接口
          (obj.status = "form"),
          (obj.data = listss);
      }

      await _this.common.httpPost(obj, success);
      function success(data) {
        // let list = {
        //   taskId: data.taskid,
        //   id: _this.list.id,
        //   // resourceId: _this.nodes.currentShape[0].resourceId,
        //   // taskName: _this.nodes.nextShapes[0].properties.name,
        // };
        _this.$emit("beforeClose", true);
      }
    },
    //生成需求决策编号接口
    getDemand() {
      this.$http({
        url: "/market/waf/getBusi",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {},
      }).then((res) => {
        console.log(res);
        this.demand = res.data;
      });
    },
    submitWork() {
      //生成需求决策编号
      if (this.clicknextName === "起草人发送") {
        this.getDemand();
      }
      if (!this.list.taskId) {
        this.$message.error("请先保存表单后处理");
        return false;
      }
      if (this.TransferStatus === true) {
        if (this.backThree.length > 0) {
          this.nextWork();
        } else {
          this.$message.error("请选择候选人");
          return false;
        }
      } else {
        let list = {
          userId: JSON.parse(window.sessionStorage.userInfo).loginNo, //人员id
          taskId: this.list.taskId, //表单标识
          taskName: this.clicknextName, //流程节点
          userCode: JSON.parse(window.sessionStorage.userInfo).loginNo, //人员code
          content: this.textarea, //意见内容
          // resolution: this.nodes.currentShape[0].condition.resolution, //流程图线节点
          // nextDealMan: this.backThree[0].loginNoStr || '', //下一步处理人
        };
        if (this.treeCopyList.length) {
          //抄送
          list.copyman = this.treeCopyList[0].loginNoStrCopy;
        }
        if (this.nodes.currentShape) {
          list.resolution = this.nodes.currentShape[0].condition.resolution;
          list.approve = this.nodes.currentShape[0].condition.approve;
        }
        // if (this.clicknextName === "") {
        //   this.$message.error("请选择流程节点");
        //   return false;
        // }

        if (this.initialList.nextShapes[0].multi.multi === "true") {
          if (this.backThree.length > 0) {
            // list.nextDealManList = this.backThree[0].loginNoStr;
            list.nextDealManList = "qiuyu,fanyan";
          }
        } else {
          if (this.backThree.length > 0) {
            list.nextDealMan = this.backThree[0].loginNoStr;
          } else {
            if (this.clicknextName === "流程结束") {
            } else {
              this.$message.error("请选择候选人");
              return false;
            }
          }
        }

        // if (this.backThree.length > 0) {
        //   list.nextDealMan = this.backThree[0].loginNoStr;
        // } else {
        //   if (this.clicknextName === "流程结束") {
        //   } else {
        //     this.$message.error("请选择候选人");
        //     return false;
        //   }
        // }
        this.nextWork(list);
      }
    },
    async nextWork(list) {
      //e:yes||no,list：传入数组，title:结束标签，res:驳回标签,id:工单更新id
      let _this = this;
      let obj = {
        url: _this.$url.formList.nextWork, //下一步工作流接口
        data: list,
        status: "form",
      };
      if (_this.TransferStatus === true) {
        let lists = {
          userId: _this.backThree[0].loginNoStr,
          taskId: _this.list.taskId,
          content: _this.textarea,
        };
        obj.url = _this.$url.formList.transferTask + _this.list.taskId;
        obj.data = lists;
      }
      await this.common.httpPost(obj, success);
      function success(data) {
        if (data != null) {
          if (_this.TransferStatus === true) {
            let list = {
              taskId: data.taskid,
              id: _this.list.id,
            };

            _this.setUpdate(list);
          } else {
            let list = {
              taskId: data.taskid,
              id: _this.list.id,
              resourceId: _this.nodes.currentShape[0].resourceId,
              taskName: _this.nodes.nextShapes[0].properties.name,
            };
            if (data.copytaskid) {
              list.copytaskid = data.copytaskid;
              list.copyman = _this.treeCopyList[0].loginNoStrCopy;
            }
            if (_this.demand) {
              list.needNo = _this.demand;
            }
            _this.setUpdate(list);
          }
        } else {
          let list = {
            taskName: "结束",
            id: _this.list.id,
          };
          _this.setUpdate(list);
        }
      }
    },
    // qqq() {
    //   this.$emit("beforeClose", true);
    // },
    //更新工作流接口
    setUpdate(e) {
      this.$http({
        url: "/market/waf/update",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: e,
      }).then((res) => {
        this.$emit("beforeClose", true);
        // this.fromList.taskId = res.data.body.taskId;
        // this.fromList.taskName = res.data.body.taskName;
        // if (res.data.body.taskName === "起草") {
        //   this.isSync = res.data.body.isSync;
        // } else {
        //   this.isSync = "1";
        // }
        // if (res.data.result === 0) {
        //   this.$message.success("工作流更新成功");
        // }
      });
    },
    //查询路径接口
    getNextPath(e, status) {
      let list = {
        // fresourceId: "bf79721c-33f3-11ed-ba0b-00505687dcd3", //测试环境
        fresourceId: this.requestForm.fresourceId, // 本地环境
        processId: this.requestForm.processDefinitionKey,
        // fresourceId: "0d94de8a-0281-11ed-a302-4ae7da54db39", // 本地环境
        // processId: "request_form_process",
        // resourceId: e,
      };
      if (e) {
        // this.propsList = [];
        list.resourceId = e;
      }
      this.$http({
        url: "/market/waf/queryPath",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: list,
      }).then((res) => {
        if (status === 1) {
          //第一次进入取路径
          this.initialList = res.data.body;
          // console.log(this.initialList);
          // if (
          //   this.initialList.nextShapes[0].multi?.multi &&
          //   res.data.body.nextShapes[0].multi.multi === "true"
          // ) {
          // }
        }
        if (status === 2) {
          if (res.data.body.nextShapes[0].condition !== null) {
            this.node = res.data.body;
          } else {
            this.getNextPath(res.data.body.nextShapes[0].resourceId, 2);
          }
        }
        if (status === 3) {
          this.nodes = res.data.body;
          this.getTreeLists(res.data.body, 1);
        }
      });
    },
    //查询候选人接口
    getTreeLists(e, status) {
      if (e === 9) {
        this.close = ""
        this.active = this.active != "" ? '' : 'active'
        this.actives = ""
        this.MultipersonTransfer = true;
      } else {
        this.MultipersonTransfer = false;
      }
      let id = this.initialList.nextShapes[0].properties.documentation;
      // if (status === 2) {
      //   id = "copy." + e;
      // } else {
      //   id =
      //     e.nextShapes[0].properties.documentation == "createId" ||
      //     e.nextShapes[0].properties.documentation == "createId-copy"
      //       ? this.list.createId
      //       : e.nextShapes[0].properties.documentation;
      // }

      this.$http({
        url: "/market/api/user/info/queryNodePers?params=" + id,
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: "",
      }).then((res) => {
        console.log(status);
        if (status === 2) {
          this.treeCopyList = res.data; //抄送
          console.log(this.treeCopyList);
          //  this.$refs.defTrees.treeList = res.data;
        } else {
          this.treeList = res.data; //抄送
          // this.$refs.defTree.treeList = res.data;
          console.log(this.treeList);
        }
      });
    },
    //转派按钮方法
    a() {
      this.clickGetTree([], "");
    },
    clickTransfer(e) {
      if (e == 1) {
        // this.TransferStatus = true;
      } else if (e == 2) {
        this.CopyStatus = true;
      }
      this.getTreeLists(this.initialList, e);
    },
    //点击节点获取下一步的处理人字段
    clickGetTree(e, index) {
      // this.CopyStatus = false;
      this.TransferStatus = false;
      //   this.clickTaskName = e.properties.name;
      this.clicknextName = e.properties.name;
      this.seleIndex = index;
      this.getNextPath(e.resourceId, 3); //1 为点击后获取线
    },
    //点击常用意见方法
    clickCommonly(e) {
      this.textarea = e.currentTarget.innerHTML;
    },
    //点击修改
    clickEdit() {
      console.log(123);
      this.editStatus = true;
    },
    //选择树的回调
    changeTree(e) {
      if (this.MultipersonTransfer) {
        // if (e.length > 1) {
        //   this.$message.error("只能选择一个人");
        //   return;
        // } else {
          this.backThree = e;
          let arr = [];
          this.backThree.map((item) => {
            arr.push(item.loginNoStr);
          });
          this.nextDealManLists = arr.toString();
        }
      // }
    },
    //获取字典表常用意见
    getMetirialType(e) {
      this.$http({
        url: "/market/cfgDataDict/queryList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          dictCodePks: "approval",
        },
      }).then((res) => {
        console.log(res);
        this.commonlyList = res.data;
      });
    },
    //添加字典表常用意见
    geaddctType(e) {
      this.$http({
        url: "/market/cfgDataDict/add",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: e,
      }).then((res) => {
        this.getMetirialType();
      });
    },
    //删除字典表常用意见
    geDelectType(e) {
      this.$http({
        url: "/market/cfgDataDicts/del",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: e,
      }).then((res) => {
        this.getMetirialType();
      });
    },
    //常用意见添加
    addStatus() {
      let newData = Date.parse(new Date());
      this.$prompt("请输入常用意见", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          let list = {
            dictCode: "approval",
            dataCode: newData,
            dataName: value,
            dictName: "审批意见",
          };
          this.geaddctType(list);
          this.$message({
            type: "success",
            message: "常用意见添加成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    //常用意见删除
    deleStatus(e) {
      this.$confirm("此操作将删除此常用意见, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let list = {
            dataCode: e.dataCode,
            dictCode: "approval",
          };
          this.geDelectType(list);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //关闭修改
    editCloses() {
      this.editStatus = false;
    },
  },
};
</script>

<style lang='scss' scoped>
.active {
  background-color: #f3faff;
}

.actives {
  background-color: #f3faff;
}

.flex-header-text-tree {
  width: 50%;
  text-align: center;
}

.flex-icon {
  float: right;
  margin-right: 20px;
  color: #4277a1;
}

.flex-handle {
  width: 100%;
  padding: 30px;
  display: flex;

  .flex-right {
    width: 50%;
    border: 1px solid #e1e1e1;
    margin-left: 20px;
  }
}

.flex-left {
  width: 50%;
  display: flex;
  flex-direction: column;

  .flex-left-header {
    display: flex;
    justify-content: space-around;

    .flex-path {
      height: 280px;
      border: 1px solid #e1e1e1;
      width: 68%;
    }
  }
}

.flex-common {
  padding: 10px 5%;
  font-size: 18px;
}

.flex-left-header-text {
  height: 40px;
  line-height: 40px;
  color: black;
  padding-left: 10px;
  background-color: #cde4f6;
  font-size: 18px;
  font-weight: bold;
}

.flex-path-list {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 14rem;
}

.flex-slide {
  overflow-y: scroll;
  overflow-x: hidden;
}

.active {
  background-color: #f3faff;
}

.flex-opinion {
  height: 280px;
  border: 1px solid #e1e1e1;
  width: 100%;
  margin-top: 20px;
}

.flex-right-text {
  margin-right: 20px;
  width: 50%;
}

.flex-commons {
  height: 280px;
  border: 1px solid #e1e1e1;
  width: 30%;
}

.flex-footer-botton {
  display: flex;
  justify-content: space-evenly;
}

.flex-button {
  margin-top: 10px;
  margin-bottom: 10px;

  ::v-deep .el-button--primary {
    width: 222px;
  }
}
</style>