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

<template>
  <div>
    <div class="flex-handle">
      <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="manyReassignment" :class="actives" @click="clickManyTransfer(1)">
                  转派
                </div>
                <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>
      <div class="flex-right" :class="{ copyClass: CopyStatus }">
        <div class="flex-left-header-text" :class="{ 'flex-right-text': CopyStatus }">
          本部门人员办理
          <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="">{{ selectUser }}</div> -->
              <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="" v-for="(item, index) in copyUser" :key="index">
                {{ item.loginNameStr }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-footer-botton">
      <div class="flex-button">
        <el-button type="primary" @click="submitWork()" :loading="buttonLoading">提交</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: "",
      buttonLoading: false, //按钮loadding
      manyPeopleStatus: false, //多人处理下发任务
      editStatus: false, //常用意见控制
      transferStatus: false, //转派按钮控制
      TransferStatus: false, //是否点击转派状态
      copyStatus: false, //抄送按钮控制
      CopyStatus: false, //是否点击抄送状态
      node: [], //路径列表
      seleIndex: "1099", //点击路径下标
      commonlyList: [], //常用意见数组
      textarea: "未填写意见", //意见内容字段
      copyUser: "", //抄送人员列表
      selectUser: "", //已选人员列表
      treeList: [], // 待选人员列表
      propsList: [],
      nodes: [],
      initialList: [], //第一次进入是加载节点
      clicknextName: "", //获取的流程节点
      backThree: [],
      treeCopyList: [],
      demand: "",
      nextDealManList: "",
      isLastManStatus: false,
      manyReassignment: false,
      actives: "",
    };
  },
  props: {
    //  表格数据和表格部分属性的对象
    // eslint-disable-next-line vue/require-default-prop
    list: {
      type: Object,
    },
    requestForm: {
      type: Object,
    },
    adminResourceId: {
      type: String,
    },
  },
  created() {
    console.log(this.list);
    this.getNextPath(this.list.resourceId, 1);
    this.getMetirialType();
  },
  methods: {
    //多人转派
    clickManyTransfer() {
      (this.actives = this.actives != "" ? "" : "active"),
        (this.seleIndex = "1099");
      this.getNextPath(this.adminResourceId, 3);
    },
    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 listss = {
        userId: this.nextDealManList, //人员id
        taskId: this.list.taskId, //表单标识
        loginstr: JSON.parse(window.sessionStorage.userInfo).loginNoStr,
        // taskName: this.clicknextName, //流程节点
        content: this.textarea, //意见内容
      };
      if (this.manyReassignment == true) {
        let _this = this;
        let obj = {
          url: _this.$url.formList.getNewTransferTask + _this.list.taskId, //下一步工作流接口
          data: listss,
          status: "form",
        };
        await this.common.httpPost(obj, success);
        function success(data) {
          _this.$emit("beforeClose", true);
        }
      } else {
        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,
            tableName: _this.requestForm.processDefinitionKey,
          };
          list.taskId = data.taskid;
          _this.setUpdate(updateList);
          _this.getLastManList(list);
        }
      }
    },
    submitWork() {
      this.buttonLoading = true
      //多人会签处理环节
      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.process_id;
        // 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.copyUser.length) {
            //抄送
            // list.copyman = this.treeCopyList[0].loginNoStrCopy;
            // list.copyman = this.copyUser;
            list.copyman = ''
            this.copyUser.map((item) => {
              list.copyman += item.loginNoStr + ','
            })
          }
          if (this.isLastManStatus == true) {
            list.lastman = "yes";
            list.lastManDecision = "yes";
            list.resourceId = this.nodes.currentShape[0].resourceId
          }
          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 === "流程结束" || this.clicknextName === "提交至任务发起人") {
            } else {
              this.$message.error("请选择候选人");
              return false;
            }
          }
          this.nextWork(list);
        }
      }
    },
    //生成需求决策编号接口
    getDemand() {
      this.$http({
        url: "/market/waf/getBusi",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {},
      }).then((res) => {
        this.demand = res.data;
      });
    },
    async nextWork(list) {
      console.log(list);
      //e:yes||no,list：传入数组，title:结束标签，res:驳回标签,id:工单更新id
      let _this = this;
      let copylist = list
      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) {
          console.log(123);
          if (_this.TransferStatus === true) {
            let list = {
              taskId: data.taskid,
              id: _this.list.id,
              tableName: _this.requestForm.processDefinitionKey,
            };

            _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,
              tableName: _this.requestForm.processDefinitionKey,
            };
            if (data.copytaskid) {
              list.copytaskid = data.copytaskid;
              // list.copyman = _this.treeCopyList[0].loginNoStrCopy;
              list.copyman = copylist.copyman;
            }
            if (_this.demand) {
              list.needNo = _this.demand;
            }
            _this.setUpdate(list);
          }
        } else {
          console.log(_this.list.id);
          console.log(_this.requestForm.processDefinitionKey);
          console.log(456);
          let list = {
            taskName: "结束",
            id: _this.list.id,
            tableName: _this.requestForm.processDefinitionKey,
          };
          _this.setUpdate(list);
        }
      }
    },
    setUpdate(e) {
      this.$http({
        url: "/market/waf/updateBase",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: e,
      }).then((res) => {
        this.$emit("updateForm", true);
        this.buttonLoading = false
      });
    },
    //查询路径接口
    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 createdId = "createId";
      let id =
        e.nextShapes[0].properties.documentation.indexOf(createdId) != -1
          ? this.list.createId
          : e.nextShapes[0].properties.documentation;
      console.log(id);
      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; //抄送
          //  this.$refs.defTrees.treeList = res.data;
        } else {
          this.treeList = res.data; //抄送
          // this.$refs.defTree.treeList = res.data;
          console.log(this.treeList);
        }
      });
      if (this.copyStatus == true) {
        this.$http({
          url: "/market/api/user/info/queryNodePers?params=" + e.nextShapes[0].properties.formkeydefinition,
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: "",
        }).then((res) => {
          console.log(status);
          this.treeCopyList = res.data; //抄送

        });
      } else {

      }
    },
    //转派按钮方法
    clickTransfer(e) {
      if (e == 1) {
        this.TransferStatus = true;
      } else if (e == 2) {
        this.CopyStatus = true;
      }
      this.getTreeLists(this.initialList, e);
    },
    //点击节点获取下一步的处理人字段
    clickGetTree(e, index) {
      this.$refs.defTree.userList = [];
      this.backThree = [];
      this.$refs.defTree.userList = [];
      this.backThree = [];
      this.copyUser = [];
      // this.CopyStatus = false;
      this.TransferStatus = false;
      //   this.clickTaskName = e.properties.name;
      this.clicknextName = e.properties.name;
      console.log(this.clicknextName);
      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 = "暂无选择";
          }
        }
      }
    },
    changeTreeCopy(e) {
      console.log(e);
      this.copyUser = e
    },
    //获取字典表常用意见
    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();
      });
    },
    //关闭修改
    editCloses() {
      this.editStatus = false;
    },
    //常用意见添加
    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: "已取消删除",
          });
        });
    },
    //删除字典表常用意见
    geDelectType(e) {
      this.$http({
        url: "/market/cfgDataDicts/del",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: e,
      }).then((res) => {
        this.getMetirialType();
      });
    },
  },
};
</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;
  }
}

.copyClass {
  display: flex;
}
</style>