merge

src/components/workflow.vue

@@ -0,0 +1,522 @@
+<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="transferStatus" @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>
+          </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>
+  </div>
+</template>
+
+<script>
+import deptTree from "./workDeptThree.vue";
+export default {
+  components: {
+    deptTree,
+  },
+  name: "workflow",
+  data() {
+    return {
+      transferStatus: false, //转派按钮控制
+      TransferStatus: false, //是否点击转派状态
+      copyStatus: false, //抄送按钮控制
+      CopyStatus: false, //是否点击抄送状态
+      node: [], //路径列表
+      seleIndex: "", //点击路径下标
+      commonlyList: [], //常用意见数组
+      textarea: "", //意见内容字段
+      copyUser: "", //抄送人员列表
+      selectUser: "", //已选人员列表
+      treeList: [], // 待选人员列表
+      propsList: [],
+      nodes: [],
+      initialList: [], //第一次进入是加载节点
+      clicknextName: "", //获取的流程节点
+      backThree: [],
+    };
+  },
+  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: {
+    submitWork() {
+      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.copyUser) {
+          //抄送
+          list.copyman = this.backCopyThree[0].loginNoStr;
+        }
+        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) {
+          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,
+          tableName: _this.requestForm.processDefinitionKey,
+        };
+        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,
+              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.backCopyThree[0].loginNoStr;
+              // list.tableName = _this.requestForm.processDefinitionKey;
+            }
+            _this.setUpdate(list);
+          }
+        } else {
+          let list = {
+            taskName: "结束",
+            id: _this.list.id,
+            tableName: _this.requestForm.processDefinitionKey,
+          };
+          _this.setUpdate(list);
+        }
+        _this.dialogStatus = false;
+        _this.handleCloses();
+      }
+    },
+    setUpdate(e) {
+      this.$http({
+        url: "/market/waf/updateBase",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        data: e,
+      }).then((res) => {
+        // 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,
+        // resourceId: e,
+      };
+      if (e) {
+        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;
+          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) {
+            console.log(res.data.body.nextShapes[0].copy.copy);
+            if (res.data.body.nextShapes[0].copy.copy === "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);
+        }
+      });
+    },
+    //查询候选人接口
+    getTreeLists(e, status) {
+      let createdId = "createld"
+      let id =
+        e.nextShapes[0].properties.documentation === createdId
+          ? 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);
+        }
+      });
+    },
+    //转派按钮方法
+    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() {
+      this.editStatus = true;
+    },
+    //选择树的回调
+    changeTree(e) {
+      if (e.length > 1) {
+        this.$message.error("只能选择一个人");
+        return;
+      } else {
+        this.backThree = e;
+        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) => {
+        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();
+      });
+    },
+  },
+};
+</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>