ui-process-h5 0.1.36 → 0.1.40

package/{packages/components/process/src/process.vue → src/packages/process/index.js}

@@ -1,200 +1,18 @@
-<template>
-    <div>
-        <div class="process-warp">
-            <div class="process-main" v-if="processStatus.status">
-                <div class="process-ml-item border">
-                    <div class="process-mli-name">流程状态</div>
-                    <div class="process-mli-name" @click="handleTest">测试</div>
-                    <div class="process-mli-value">
-                        <div
-                            class="process-mliv-dd"
-                            :style="{
-                                background: getColor(processStatus.status),
-                            }"
-                            v-if="
-                                processStatus.status ||
-                                processStatus.bizStatusName
-                            "
-                        >
-                            {{
-                                processStatus.bizStatusName
-                                    ? processStatus.bizStatusName
-                                    : processStatus.status
-                            }}
-                        </div>
-                    </div>
-                </div>
-                <div class="process-ml-item border">
-                    <div class="process-mli-name">流程发起时间</div>
-                    <div class="process-mli-value">
-                        <span>{{ processStatus.createTime }}</span>
-                    </div>
-                </div>
-
-                <div
-                    class="process-ml-item"
-                    v-if="
-                        processStatus.allUserNames &&
-                        processStatus.allUserNames.length
-                    "
-                >
-                    <div class="process-mli-name">审批节点</div>
-                    <div class="process-mli-value">
-                        <span class="process-mliv-jd">{{
-                            `${
-                                processStatus.taskState == 4
-                                    ? processStatus.currUserName
-                                    : processStatus.allUserNames.toString()
-                            }审批中`
-                        }}</span>
-                    </div>
-                </div>
-            </div>
-            <div class="process-card" :style="{ height: processCardHeight }">
-                <TopTab
-                    :tapList="tapList"
-                    :selfTapList="selfTapList"
-                    :processIntId="processIntId"
-                    :track="trackUrl"
-                    :taskComment="taskCommentList"
-                >
-                    <template #default><slot></slot></template>
-                </TopTab>
-            </div>
-            <div class="process-foot" v-if="isAdditional">
-                <div class="footBtnRow">
-                    <slot name="btn"></slot>
-                </div>
-            </div>
-            <div class="process-btn">
-                <template v-if="processStatus.status != '已完成'">
-                    <div
-                        v-if="
-                            processStatus.status === '已撤销' ||
-                            processStatus.status === '已驳回'
-                        "
-                        class="top-button"
-                        :style="getBtnStyle('default')"
-                        @click="handleRestart"
-                    >
-                        重新提交
-                    </div>
-                    <template v-else v-for="(item, index) in operBtn">
-                        <div
-                            class="top-button"
-                            :style="getBtnStyle(item.btnProps.type.toString())"
-                            :key="item.name"
-                            v-if="index < 3"
-                            @click="item.click(item.name)"
-                        >
-                            {{ item.name }}
-                        </div>
-                    </template>
-                </template>
-                <div
-                    class="elips"
-                    v-if="operBtn.length > 3 && actionBtn && actionBtn.length"
-                    @click="handleActionOpen"
-                >
-                    <div class="circle"></div>
-                    <div class="circle"></div>
-                    <div class="circle"></div>
-                </div>
-            </div>
-        </div>
-        <TopPopup
-            ref="TopPopup1"
-            :cancel="handleCancel"
-            :comfig="handleComfig"
-            :titleText="titleText"
-        >
-            <!--  @success="operationSuccess"
-            @fail="operationFail" -->
-            <component
-                :is="operationCom"
-                ref="operationRef"
-                :param="operationParam"
-                @handleClosePopup1="handleClosePopup1"
-            ></component>
-        </TopPopup>
-        <TopPopup
-            ref="TopPopup2"
-            :titleText="titleText"
-            :isTips="true"
-            :context="popupContext"
-            :cancel="handleTipsCancel"
-            :comfig="handleTipsComfig"
-        >
-        </TopPopup>
-        <TopTips
-            ref="topTips"
-            :text="textTips"
-            :statusTips="statusTips"
-            :type="typeTips"
-        />
-        <div
-            class="top-elips"
-            v-if="
-                (actionBtn && actionBtn.length) ||
-                (taskNodeList && taskNodeList.length)
-            "
-            :style="
-                actionShow
-                    ? 'transform: translateY(0)'
-                    : 'transform: translateY(100%)'
-            "
-        >
-            <template v-if="taskNodeShow">
-                <div
-                    class="top-elips-items"
-                    v-for="v in taskNodeList"
-                    @click="handleGet(v)"
-                    :key="v.taskId"
-                >
-                    {{ v.name }}
-                </div>
-            </template>
-            <template v-else>
-                <div
-                    class="top-elips-items"
-                    v-for="v in actionBtn"
-                    @click="v.click(v.name)"
-                    :key="v.name"
-                >
-                    {{ v.name }}
-                </div>
-            </template>
-            <div
-                class="top-elips-items top-elips-items--cancel"
-                @click="handleActionClose"
-            >
-                取消
-            </div>
-        </div>
-        <div
-            class="top-elips-mask"
-            @click="handleActionClose"
-            :style="
-                actionShow
-                    ? 'visibility: visible; opacity: .7;'
-                    : 'visibility: hidden; opacity: 0;'
-            "
-        ></div>
-    </div>
-</template>
-
-<script>
-import TopTab from "./tab.vue";
-import TopPopup from "./popup.vue";
-import TopTips from "./tip.vue";
+import TopTab from "../tab/index.vue";
+import TopPopup from "../popup/index.vue";
+import TopTips from "../tip/index.vue";
+import TopSumbitPopup from "../submitPopup/index.vue";
 import * as operation from "./operation";
+import { defineComponent } from "vue-demi";
+import "checked-pick-app/style.css";
 
-export default {
+export default defineComponent({
     name: "TopProcess",
     components: {
         TopTab,
         TopPopup,
         TopTips,
+        TopSumbitPopup,
     },
     props: {
         // tab控制
@@ -203,31 +21,44 @@ export default {
         selfTapList: { require: false, default: () => [], type: Array },
         // 流程id
         processDefId: { require: true, default: "", type: String },
+        processInstId: { require: true, default: "", type: String },
         isAdditional: { require: false, default: false, type: Boolean },
         isView: { default: false, type: Boolean },
         // 当前账号 id
         userId: { require: true, default: "", type: String },
         // 表单信息
         formData: { default: {}, type: Object },
-        /**
-         * 接口对象
-         * getTrackUrl 获取流程图
-         * getTaskCommentList  流程信息
-         * getProcessInstanceById  ID
-         * queryTaskNodeList   审批记录
-         * getProcessStatus 流程状态
-         * getUserTaskModel 按钮信息
-         */
-
-        api: { defalut: {}, type: Object },
 
         // 弹窗开启前执行方法
         getVarsStatus: { default: true, type: Boolean },
         getVars: { default: null, type: Function },
+
+        // 请求
+        request: {
+            type: Function,
+            default: () => {
+                return { get: () => {}, post: () => {}, upload: () => {} };
+            },
+        },
+
+        // appid
+        appId: {
+            type: String,
+            default: "",
+        },
+
+        // 结束执行事件
+        endFunction: {
+            type: Function,
+            default: null,
+        },
     },
     data() {
         return {
             processStatus: {},
+            processDefList: {},
+            processBusiness: {},
+            getFirstProcessNode: {},
             // 底部按钮
             taskNode: [],
             taskNodeList: [],
@@ -272,19 +103,30 @@ export default {
             statusTips: false,
             // 状态类型
             typeTips: "",
+
+            // 节点
+            outGatewayUserTaskModel: [],
+            nextNodeData: [],
+
+            // 测试送审节点
+            visibleSong: false,
+
+            trackList: [],
         };
     },
     watch: {
-        processDefId: {
+        processInstId: {
             // 初始化获取流程相关信息
             async handler(val, preVal) {
-                this.processIntId = this.processDefId;
+                this.processIntId = this.processInstId;
                 if (val) {
                     // 流程图
-                    this.api.process
-                        .getTrackUrl({
-                            processInstId: this.processDefId,
-                            type: "mobile",
+                    this.request
+                        .get("/aws/repository/getTrackUrl", {
+                            params: {
+                                processInstId: this.processIntId,
+                                type: "mobile",
+                            },
                         })
                         .then((res) => {
                             if (res.code == 200) {
@@ -292,11 +134,27 @@ export default {
                             }
                         });
 
+                    // 流程图信息
+                    this.request
+                        .get("/aws/pis/findNodeParticipantRows", {
+                            params: {
+                                processInstId: this.processIntId,
+                            },
+                        })
+                        .then((res) => {
+                            // console.log("流程信息", res);
+                            if (res.code == 200) {
+                                this.trackList = res.data;
+                            }
+                        });
+
                     // 流程信息
-                    this.api.process
-                        .getTaskCommentList({
-                            processInstId: this.processDefId,
-                            processBusinessKey: this.formData.businessKey,
+                    this.request
+                        .get("/aws/tis/getTaskCommentList", {
+                            params: {
+                                processInstId: this.processInstId,
+                                processBusinessKey: this.formData.businessKey,
+                            },
                         })
                         .then((res) => {
                             if (res.code == 200) {
@@ -305,9 +163,9 @@ export default {
                         });
 
                     // id
-                    this.api.process
-                        .getProcessInstanceById({
-                            processInstId: this.processDefId,
+                    this.request
+                        .get("/aws/pis/getProcessInstanceById", {
+                            params: { processInstId: this.processInstId },
                         })
                         .then((res) => {
                             if (res.code == 200) {
@@ -316,9 +174,9 @@ export default {
                         });
 
                     // task信息  任务节点
-                    await this.api.process
-                        .queryTaskNodeList({
-                            processInstId: this.processDefId,
+                    await this.request
+                        .get("/aws/repository/queryTaskNodeList", {
+                            params: { processInstId: this.processInstId },
                         })
                         .then((res) => {
                             if (res.code == 200) {
@@ -382,7 +240,7 @@ export default {
                     this.showOperation(
                         operation.complete,
                         name,
-                        this.api.operation,
+                        this.request,
                         this.taskObj.completeButtonAnnex
                     );
                 };
@@ -400,7 +258,7 @@ export default {
                     this.showOperation(
                         operation.cancel,
                         name,
-                        this.api.operation,
+                        this.request,
                         this.taskObj.otherButtonAnnexList
                     );
                 };
@@ -425,7 +283,7 @@ export default {
                             this.showOperation(
                                 operation.backNode,
                                 name,
-                                this.api.operation,
+                                this.request,
                                 this.taskObj.otherButtonAnnexList
                             );
                         };
@@ -444,7 +302,7 @@ export default {
                     this.showOperation(
                         operation.ccTask,
                         name,
-                        this.api.operation,
+                        this.request,
                         this.taskObj.ccTaskButtonAnnex
                     );
                 };
@@ -462,7 +320,7 @@ export default {
                     this.showOperation(
                         operation.delegateTask,
                         name,
-                        this.api.operation,
+                        this.request,
                         this.taskObj.delegateTaskButtonAnnex
                     );
                 };
@@ -480,7 +338,7 @@ export default {
                     this.showOperation(
                         operation.counterSign,
                         name,
-                        this.api.operation,
+                        this.request,
                         this.taskObj.counterSignButtonAnnex
                     );
                 };
@@ -545,8 +403,43 @@ export default {
     methods: {
         // 测试
         handleTest() {
-            console.log("window.location", window.location);
+            // this.visibleSong = true
+        },
+        // 流程查询
+        async handleGetSimulation(vars) {
+            this.handleTips("", true, "loading");
+            let params = {
+                processInstId: this.processInstId,
+                taskInstId: this.taskNode.length ? this.taskNode[0].taskId : "",
+                vars: vars,
+            };
+
+            let simulationData = await this.request.post(
+                `/aws/tis/simulation`,
+                params
+            );
+
+            if (simulationData.success) {
+                this.handleTips("", false, "success");
+                this.nextNodeData = simulationData.data;
+            } else {
+                await this.request
+                    .get("/aws/repository/getOutgoingProcessNode", {
+                        params: {
+                            taskId: this.taskNode.length
+                                ? this.taskNode[0].taskId
+                                : "",
+                            processNodeId: "",
+                        },
+                    })
+                    .then((res) => {
+                        this.handleTips("", false, "success");
+                        console.log("outGatewayUserTaskModel", res);
+                        this.outGatewayUserTaskModel = res.data;
+                    });
+            }
         },
+
         // 集合
         handleGet(task) {
             this.taskNode = [].concat(task);
@@ -557,10 +450,14 @@ export default {
         },
         // 流程状态
         handleGetProcessStatus() {
-            this.api.process
-                .getProcessStatus({
-                    processInstId: this.processDefId,
-                    taskId: this.taskNode.length ? this.taskNode[0].taskId : "",
+            this.request
+                .get("/aws/pis/getProcessStatus", {
+                    params: {
+                        processInstId: this.processInstId,
+                        taskId: this.taskNode.length
+                            ? this.taskNode[0].taskId
+                            : "",
+                    },
                 })
                 .then((res) => {
                     if (res.code == 200) {
@@ -570,49 +467,41 @@ export default {
         },
         // 按钮操作信息
         handleGetUserTaskModel() {
-            this.api.process
-                .getUserTaskModel({
-                    taskId: this.taskNode.length ? this.taskNode[0].taskId : "",
-                })
-                .then((res) => {
-                    if (res.code == 200) {
-                        this.taskObj = res.data;
-                    }
-                });
+            if (this.taskNode && this.taskNode.length) {
+                this.request
+                    .get(`/aws/repository/getUserTaskModel`, {
+                        params: {
+                            taskId: this.taskNode[0].taskId,
+                        },
+                    })
+                    .then((res) => {
+                        if (res.code == 200) {
+                            this.taskObj = res.data;
+                        }
+                    });
+            }
         },
 
         // 弹窗内部渲染
-        async showOperation(com, label, api, annex) {
+        async showOperation(com, label, request, annex) {
             if (
                 this.processStatus.allUserNames &&
                 this.processStatus.allUserNames.length == 1
             ) {
                 if (this.taskNode[0] && this.taskNode[0].nodeId) {
                     let vars;
-                    if (this.getVarsStatus) {
-                        if (this.getVars) {
-                            vars = this.getVars();
-                            if (vars === false) {
-                                return false;
-                            }
-                        }
-                    } else {
-                        if (label === "办理") {
-                            if (this.getVars) {
-                                vars = this.getVars();
-                                if (vars === false) {
-                                    return false;
-                                }
-                            }
-                        }
+                    if (this.getVars) {
+                        vars = this.getVars();
                     }
+
+                    await this.handleGetSimulation(vars);
                 }
             }
-            if (api) {
-                this.operationParam.api = api;
-            }
 
-            this.annexlabel = annex;
+            if (request) {
+                this.operationParam.request = request;
+            }
+            if (request) this.annexlabel = annex;
             this.titleText = label;
             this.operationCom = com;
 
@@ -622,6 +511,17 @@ export default {
             this.operationParam.taskInstId = this.taskNode[0].taskId;
             this.operationParam.actionName = label;
             this.operationParam.formData = this.formData;
+
+            // 下次节点数据
+            this.operationParam.nextNodeData = this.nextNodeData;
+            this.operationParam.outGatewayUserTaskModel = this.outGatewayUserTaskModel;
+
+            this.operationParam.taskNode = this.taskNode;
+
+            this.operationParam.appId = this.processStatus.appId;
+
+            // 弹窗确认结束事件
+            this.operationParam.endFunction = this.endFunction;
         },
         // 弹窗取消
         handleCancel() {
@@ -635,13 +535,15 @@ export default {
         handleClosePopup1() {
             this.$refs.TopPopup1.handleClose();
         },
-        // 确认弹窗
+        // 确认弹窗(催办,撤销)
         handleTipsComfig() {
             this.$refs.TopPopup2.handleCancel();
             if (this.handleTipsType == "催办") {
                 this.handleTips("", true, "loading");
-                this.api.operation
-                    .reminders({ processInstId: this.processIntId })
+                this.request
+                    .get("/aws/tis/reminders", {
+                        params: { processInstId: this.processIntId },
+                    })
                     .then((res) => {
                         if (res.code == 200) {
                             this.handleTips("催办成功", true, "success");
@@ -652,8 +554,8 @@ export default {
             }
             if (this.handleTipsType == "撤销") {
                 this.handleTips("", true, "loading");
-                this.api.operation
-                    .revoke({
+                this.request
+                    .post("/aws/pis/revoke", {
                         processInstId: this.ProcessInsObj.id,
                         processBusinessKey: this.ProcessInsObj
                             .processBusinessKey,
@@ -712,14 +614,59 @@ export default {
             }
         },
         // 复活流程
-        handleRestart() {
-            this.$refs.TopPopup1.handleOpen();
-            this.handleActionClose();
-            this.showOperation(
-                operation.restart,
-                "重新提交",
-                this.api.operation
-            );
+        async handleRestart() {
+            this.handleTips("", true, "loading");
+            await this.request
+                .get("/aws/repository/getProcessDefList", {
+                    params: {
+                        appId: this.processStatus.appId,
+                    },
+                })
+                .then((res) => {
+                    this.processDefList = res.data;
+                    this.request
+                        .get("/aws/pis/getProcessInstanceByBusinessKey", {
+                            params: {
+                                businessKey: this.formData.businessKey,
+                            },
+                        })
+                        .then((res) => {
+                            this.processBusiness = res.data;
+                            this.request
+                                .get("/aws/repository/getFirstProcessNode", {
+                                    params: {
+                                        processDefId: this.processBusiness
+                                            .processDefId,
+                                    },
+                                })
+                                .then((res) => {
+                                    console.log(
+                                        "getProcessInstanceByBusinessKey:::",
+                                        res
+                                    );
+                                    this.getFirstProcessNode = res.data[0];
+                                    this.operationParam.getFirstProcessNode = this.getFirstProcessNode;
+                                    this.operationParam.formData = this.formData;
+                                    this.handleTips("", false, "success");
+                                    this.$refs.TopPopup1.handleOpen();
+                                    this.handleActionClose();
+                                    this.showOperation(
+                                        operation.restart,
+                                        "重新提交",
+                                        this.request
+                                    );
+                                })
+                                .catch((err) => {
+                                    this.handleTips("请求出错", true, "error");
+                                });
+                        })
+                        .catch((err) => {
+                            this.handleTips("请求出错", true, "error");
+                        });
+                })
+                .catch((err) => {
+                    this.handleTips("请求出错", true, "error");
+                });
         },
         // tips公用方法(tips)
         handleTips(text, status, type) {
@@ -729,172 +676,4 @@ export default {
             this.$refs.topTips.handleOpen();
         },
     },
-};
-</script>
-
-<style scoped>
-.process-warp {
-    overflow: hidden;
-    height: 100vh;
-    width: 100%;
-    position: relative;
-    background-color: #f3f3f7;
-}
-.process-main {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-    align-items: center;
-    padding: 0 17px;
-    background: #fff;
-    margin: 0 0 10px 0;
-}
-
-.process-main .border {
-    border-bottom: #e8e8e8 1px solid;
-}
-
-.process-main .process-ml-item {
-    display: flex;
-    align-items: center;
-    font-size: 15px;
-    font-weight: 400;
-    width: 100%;
-    justify-content: space-between;
-    height: 44px;
-}
-
-.process-main .process-ml-item .process-mli-name {
-    color: #333333;
-}
-
-.process-main .process-ml-item .process-mli-value {
-    color: #888888;
-}
-
-.process-main .process-ml-item .process-mli-value .process-mliv-dd {
-    height: 26px;
-    min-width: 30px;
-    padding: 0 12px;
-    border-radius: 20px;
-    background: #1389ff;
-    color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 12px;
-}
-
-.process-main .process-ml-item .process-mli-value .process-mliv-jd {
-    color: #1389ff;
-}
-
-.process-btn {
-    display: flex;
-    min-height: 60px;
-    padding-top: 5px;
-    background: #fff;
-    border-top: 1px solid #dddddf9e;
-    /* box-sizing: border-box; */
-    justify-content: center;
-    align-items: center;
-    flex-direction: row-reverse;
-}
-
-.process-btn .top-button,
-.process-btn .elips {
-    margin: 0 5px;
-}
-/* .process-btn .top-button:first-child{
-    margin-left: 0;
-} */
-
-.elips {
-    min-width: 60px;
-    height: 100%;
-    background-color: white;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.elips .circle {
-    width: 6px;
-    height: 6px;
-    margin: 0 2px;
-    background-color: #333333;
-    border-radius: 50%;
-}
-.top-elips {
-    width: 100%;
-    height: auto;
-    position: fixed;
-    left: 0;
-    background-color: #f7f8fa;
-    z-index: 197;
-    border-radius: 20px 20px 0 0;
-    box-sizing: border-box;
-    transition: all 0.3s ease;
-    bottom: 0;
-}
-.top-elips-mask {
-    position: fixed;
-    width: 100vw;
-    height: 100vh;
-    background-color: #000;
-    opacity: 0.7;
-    top: 0;
-    left: 0;
-    transition: all 0.5s ease;
-    z-index: 99;
-    display: block;
-}
-.top-elips-items {
-    padding: 14px 36px;
-    background-color: #fff;
-    width: 100%;
-    cursor: pointer;
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    box-sizing: border-box;
-    font-size: 16px;
-    color: #323233;
-    position: relative;
-}
-
-.top-elips-items::after {
-    content: "";
-    width: 100%;
-    height: 1px;
-    position: absolute;
-    left: 0;
-    top: 0;
-    background-color: #f2f2f2;
-}
-
-.top-elips-items:first-child {
-    border-radius: 20px 20px 0 0;
-}
-
-.top-elips-items:first-child::after,
-.top-elips-items:last-child::after {
-    display: none;
-}
-
-.top-elips-items:nth-last-child(2) {
-    margin-bottom: 8px;
-}
-
-.top-button {
-    width: 100%;
-    border-radius: 20px;
-    height: 36px;
-    background-color: #3c9cff;
-    color: #fff;
-    font-size: 14px;
-    justify-content: center;
-    display: flex;
-    align-items: center;
-}
-</style>
+});