spfm-market-front/src/components/workflow.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 v-if="transferStatus" :class="active" @click="clickTransfer(1)">转派</div>
                <div v-if="copyStatus" @click="clickTransfer(2)">抄送</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="submitWork()">提交</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:'',
      transferStatus: false, //转派按钮控制
      manyPeopleStatus: false, //多人处理下发任务
      TransferStatus: false, //是否点击转派状态
      copyStatus: false, //抄送按钮控制
      CopyStatus: false, //是否点击抄送状态
      node: [], //路径列表
      seleIndex: "", //点击路径下标
      commonlyList: [], //常用意见数组
      textarea: "未填写意见", //意见内容字段
      copyUser: "", //抄送人员列表
      selectUser: "", //已选人员列表
      treeList: [], // 待选人员列表
      propsList: [],
      nodes: [],
      initialList: [], //第一次进入是加载节点
      clicknextName: "", //获取的流程节点
      backThree: [],
      editStatus: false, //修改控制显示字段
      treeCopyList: [],
      demand: "",
      nextDealManList: "",
      isLastManStatus: false,
    };
  },
  props: {
    //  表格数据和表格部分属性的对象
    // eslint-disable-next-line vue/require-default-prop
    list: {
      type: Object,
    },
    requestForm: {
      type: Object,
    },
  },
  created() {
    this.getNextPath(this.list.resourceId, 1);
    this.getMetirialType();
  },
  methods: {
    //生成需求决策编号接口
    getDemand() {
      this.$http({
        url: "/market/waf/getBusi",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {},
      }).then((res) => {
        this.demand = res.data;
      });
    },
    async getLastManList(e) {
      let _this = this;
      let obj = {
        url: _this.$url.formList.getComplateLastMan, //开始工作流接口
        data: e,
        // status: "form",
        headers: {
          "Content-Type": "application/json",
        },
      };

      let res = await this.common.httpPost(obj, success);
      function success(data) {}
    },
    async nextWorks(lists, list) {
      let _this = this;
      let obj = {
        url: _this.$url.formList.nextWork, //下一步工作流接口
        data: lists,
        status: "form",
      };
      await this.common.httpPost(obj, success);
      function success(data) {
        console.log(data);
        let updateList = {
          taskId: data.taskid,
          id: _this.list.id,
          resourceId: _this.nodes.currentShape[0].resourceId,
        };
        list.taskId = data.taskid;
        _this.setUpdate(updateList);
        _this.getLastManList(list);
      }
    },
    submitWork() {
      //多人会签处理环节
      let list = {
        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, //意见内容
      };
      let newlist = {
        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, //意见内容
      };
      if (this.manyPeopleStatus == true) {
        list.procinstid = this.list.processId;
        // if (this.backThree.length <= 1) {
        //   this.$message.error("请选择多人");
        //   return;
        // } else {
          list.lastmanList = this.nextDealManList;
        // }
        if (this.nodes.currentShape) {
          newlist.resolution = this.nodes.currentShape[0].condition.resolution;
          newlist.approve = this.nodes.currentShape[0].condition.approve;
        }
        if (this.backThree.length > 0) {
          newlist.nextDealMan = "admin";
        }
        this.nextWorks(newlist, list);
      } else {
        console.log(456);
        //生成需求决策编号
        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 {
          if (this.treeCopyList.length) {
            //抄送
            list.copyman = this.treeCopyList[0].loginNoStrCopy;
          }
          if (this.isLastManStatus == true) {
            list.lastman = "yes";
          }
          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.backThree.length > 0) {
            if (this.manyPeopleStatus == true) {
              list.nextDealManList = this.nextDealManList;
            } else {
              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);
      });
    },
    //查询路径接口
    getNextPath(e, status) {
      let { fresourceId, processDefinitionKey } = this.requestForm;
      let list = {
        fresourceId: fresourceId,
        processId: processDefinitionKey,
      };
      e ? (list.resourceId = e) : list;
      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;
          if (res.data.body.nextShapes[0].multi !== null) {
            if (res.data.body.nextShapes[0].multi.multi === "true") {
              // this.getqueryMultiTaskId();
              this.isLastManStatus = true;
            } else {
              this.isLastManStatus = false;
            }
          }
          if (res.data.body.nextShapes[0].loop !== null) {
            if (res.data.body.nextShapes[0].loop.loop === "true") {
              this.transferStatus = true; //转派按钮生效
            } else {
              this.transferStatus = false;
            }
          } else {
            this.transferStatus = false;
          }
          if (res.data.body.nextShapes[0].copy !== null) {
            if (res.data.body.nextShapes[0].copy.copy === "true") {
              // this.copyStatus = true; //抄送按钮生效
              this.CopyStatus = true;
            } else {
              this.copyStatus = false;
            }
          } else {
            this.copyStatus = false;
          }
          res.data.body.currentShape.map((item, index) => {
            this.getNextPath(item.resourceId, 2);
          });
        }
        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);

          if (res.data.body.nextShapes[0].multi !== null) {
            if (res.data.body.nextShapes[0].multi.multi === "true") {
              this.manyPeopleStatus = true; //转派按钮生效
            } else {
              this.manyPeopleStatus = false;
            }
          } else {
            this.manyPeopleStatus = false;
          }
        }
      });
    },
    //查询候选人接口
    getTreeLists(e, status) {
      let id = "";
      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(res);
        if (status === 2) {
          console.log(777);
          this.treeCopyList = res.data; //抄送
          //  this.$refs.defTrees.treeList = res.data;
        } else {
          // let list = []
          // list.push(res.data)
          // this.treeList = list; //抄送
          this.treeList = res.data
          // this.$refs.defTree.treeList = res.data;
        }
      });
    },

   
    //转派按钮方法
    clickTransfer(e) {
      this.$refs.defTree.userList = [];
      this.backThree = [];
      this.treeList = [];
      if (e == 1) {
        this.active = this.active!=""?'':'active'
        this.manyPeopleStatus = false;
        this.TransferStatus = true;
      } else if (e == 2) {
        this.CopyStatus = true;
      }
      this.getTreeLists(this.initialList, e);
    },
    //点击节点获取下一步的处理人字段
    clickGetTree(e, index) {
      this.active = ''
      this.$refs.defTree.userList = [];
      this.backThree = [];
      // 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() {
      this.editStatus = true;
    },
    //选择树的回调
    changeTree(e) {
      if (this.manyPeopleStatus == true) {
        this.backThree = e;

        let arr = [];
        this.backThree.map((item) => {
          arr.push(item.loginNoStr);
        });
        this.nextDealManList = arr.toString();
      } else {
        if (e.length > 1) {
          this.$message.error("只能选择一个人");
          return;
        } else {
          this.backThree = e;
          if (this.CopyStatus === true) {
            this.getTreeLists(e[0].loginNoStr, 2);
          }

          if (e[0]) {
            this.selectUser = e[0].loginNameStr;
          } else {
            this.selectUser = "暂无选择";
          }
        }
      }
    },
    //获取字典表常用意见
    getMetirialType(e) {
      this.$http({
        url: "/market/cfgDataDict/queryList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          dictCodePks: "approval",
        },
      }).then((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>
.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>