ui-process-h5 0.1.32 → 0.1.36

package/packages/components/process/src/process.vue

@@ -0,0 +1,900 @@
+<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 * as operation from "./operation";
+
+export default {
+    name: "TopProcess",
+    components: {
+        TopTab,
+        TopPopup,
+        TopTips,
+    },
+    props: {
+        // tab控制
+        tapList: { require: false, default: () => [], type: Array },
+        // 自定义tab
+        selfTapList: { require: false, default: () => [], type: Array },
+        // 流程id
+        processDefId: { 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 },
+    },
+    data() {
+        return {
+            processStatus: {},
+            // 底部按钮
+            taskNode: [],
+            taskNodeList: [],
+            taskNodeIds: [],
+            taskState: NaN,
+            taskCurrent: 0,
+            taskObj: {},
+            taskId: "",
+            taskNodeShow: false,
+            //额外按钮
+            actionShow: false,
+            // 弹窗标题
+            titleText: "",
+            btnStyle: "",
+            processIntId: "",
+            // 流程图
+            trackUrl: "",
+            // 审批记录
+            taskCommentList: [],
+            // 节点dom
+            operationCom: null,
+            // 流程实例对象
+            ProcessInsObj: {},
+
+            // 确认弹窗文本
+            popupContext: "",
+            // 弹窗数据
+            operationParam: {},
+
+            nextTaskNode: {},
+
+            //附件信息
+            annexlabel: "",
+
+            // 小弹窗处理逻辑类型
+            handleTipsType: "",
+
+            /* tips 相关属性 */
+            // 文本
+            textTips: "",
+            // 是否为状态弹窗
+            statusTips: false,
+            // 状态类型
+            typeTips: "",
+        };
+    },
+    watch: {
+        processDefId: {
+            // 初始化获取流程相关信息
+            async handler(val, preVal) {
+                this.processIntId = this.processDefId;
+                if (val) {
+                    // 流程图
+                    this.api.process
+                        .getTrackUrl({
+                            processInstId: this.processDefId,
+                            type: "mobile",
+                        })
+                        .then((res) => {
+                            if (res.code == 200) {
+                                this.trackUrl = res.data;
+                            }
+                        });
+
+                    // 流程信息
+                    this.api.process
+                        .getTaskCommentList({
+                            processInstId: this.processDefId,
+                            processBusinessKey: this.formData.businessKey,
+                        })
+                        .then((res) => {
+                            if (res.code == 200) {
+                                this.taskCommentList = res.data;
+                            }
+                        });
+
+                    // id
+                    this.api.process
+                        .getProcessInstanceById({
+                            processInstId: this.processDefId,
+                        })
+                        .then((res) => {
+                            if (res.code == 200) {
+                                this.ProcessInsObj = res.data;
+                            }
+                        });
+
+                    // task信息  任务节点
+                    await this.api.process
+                        .queryTaskNodeList({
+                            processInstId: this.processDefId,
+                        })
+                        .then((res) => {
+                            if (res.code == 200) {
+                                this.taskNode = res.data;
+                                this.taskNodeList = res.data;
+                                if (this.taskNodeList.length == 1) {
+                                    if (this.taskNodeList[0].taskState == 4) {
+                                        this.taskState = 4;
+                                        return false;
+                                    }
+                                    if (this.taskNodeList[0].taskState == 11) {
+                                        this.taskState = 11;
+                                    }
+                                    let tid = this.taskNodeList[0].taskId;
+
+                                    this.handleGetProcessStatus();
+                                    this.handleGetUserTaskModel();
+                                } else if (this.taskNodeList.length > 1) {
+                                    this.taskNodeList.forEach((item) => {
+                                        item.name = item.nodeName;
+                                    });
+                                    this.taskNodeShow = true;
+                                    this.actionShow = true;
+                                } else {
+                                    this.handleGetProcessStatus();
+                                    this.handleGetUserTaskModel();
+                                }
+                            }
+                        });
+                }
+            },
+            immediate: true,
+            deep: true,
+        },
+    },
+    computed: {
+        //筛选
+        actionBtn() {
+            if (this.operBtn.length > 3) {
+                return this.operBtn.slice(3);
+            }
+            return [];
+        },
+        // 按钮对象
+        operBtn() {
+            let btnList = [];
+            let flag =
+                this.taskNode &&
+                this.taskNode[0] &&
+                this.taskNode[0].taskState != 4;
+
+            //处理
+            if (flag && !this.isView && this.taskObj.completeButtonLabel) {
+                let obj = {};
+                obj.name = this.taskObj.completeButtonLabel;
+                obj.btnProps = { type: "primary" };
+                btnList.push(obj);
+                obj.click = (name) => {
+                    this.$refs.TopPopup1.handleOpen();
+                    this.handleActionClose();
+                    this.showOperation(
+                        operation.complete,
+                        name,
+                        this.api.operation,
+                        this.taskObj.completeButtonAnnex
+                    );
+                };
+            }
+
+            // 拒绝
+            if (flag && !this.isView && this.processStatus.currUserName) {
+                let obj = {};
+                obj.name = "拒绝";
+                obj.btnProps = { type: "danger" };
+                btnList.push(obj);
+                obj.click = (name) => {
+                    this.$refs.TopPopup1.handleOpen();
+                    this.handleActionClose();
+                    this.showOperation(
+                        operation.cancel,
+                        name,
+                        this.api.operation,
+                        this.taskObj.otherButtonAnnexList
+                    );
+                };
+            }
+
+            // 退回
+            if (
+                flag &&
+                !this.isView &&
+                this.taskObj.buttons &&
+                this.taskObj.buttons.length
+            ) {
+                this.taskObj.buttons.forEach((s) => {
+                    if (s.label === "退回") {
+                        let obj = {};
+                        obj.name = s.label;
+                        obj.btnProps = { type: "danger" };
+                        btnList.push(obj);
+                        obj.click = (name) => {
+                            this.$refs.TopPopup1.handleOpen();
+                            this.handleActionClose();
+                            this.showOperation(
+                                operation.backNode,
+                                name,
+                                this.api.operation,
+                                this.taskObj.otherButtonAnnexList
+                            );
+                        };
+                    }
+                });
+            }
+
+            // 抄送
+            if (flag && !this.isView && this.taskObj.ccTaskButtonLabel) {
+                let obj = {};
+                obj.name = this.taskObj.ccTaskButtonLabel;
+                obj.btnProps = { type: "default" };
+                obj.click = (name) => {
+                    this.$refs.TopPopup1.handleOpen();
+                    this.handleActionClose();
+                    this.showOperation(
+                        operation.ccTask,
+                        name,
+                        this.api.operation,
+                        this.taskObj.ccTaskButtonAnnex
+                    );
+                };
+                btnList.push(obj);
+            }
+
+            // 转审
+            if (flag && !this.isView && this.taskObj.delegateTaskButtonLabel) {
+                let obj = {};
+                obj.name = this.taskObj.delegateTaskButtonLabel;
+                obj.btnProps = { type: "default" };
+                obj.click = (name) => {
+                    this.$refs.TopPopup1.handleOpen();
+                    this.handleActionClose();
+                    this.showOperation(
+                        operation.delegateTask,
+                        name,
+                        this.api.operation,
+                        this.taskObj.delegateTaskButtonAnnex
+                    );
+                };
+                btnList.push(obj);
+            }
+
+            // 加签
+            if (flag && !this.isView && this.taskObj.counterSignLabel) {
+                let obj = {};
+                obj.name = this.taskObj.counterSignLabel;
+                obj.btnProps = { type: "primary" };
+                obj.click = (name) => {
+                    this.$refs.TopPopup1.handleOpen();
+                    this.handleActionClose();
+                    this.showOperation(
+                        operation.counterSign,
+                        name,
+                        this.api.operation,
+                        this.taskObj.counterSignButtonAnnex
+                    );
+                };
+                btnList.push(obj);
+            }
+
+            // 催办
+            if (
+                this.processIntId &&
+                this.processStatus.createTopUserId == this.userId &&
+                this.taskNode[0]?.taskState != 2 &&
+                this.processStatus.status !== "已驳回" &&
+                this.processStatus.status !== "已撤销"
+            ) {
+                let obj = {};
+                obj.name = "催办";
+                obj.btnProps = { type: "default" };
+                obj.click = (name) => {
+                    this.$refs.TopPopup2.handleOpen();
+                    this.handleActionClose();
+                    this.titleText = name;
+                    this.popupContext = `确定${name}吗?`;
+                    this.handleTipsType = "催办";
+                };
+                btnList.push(obj);
+            }
+
+            // 撤销
+            if (
+                this.processIntId &&
+                this.processStatus.createTopUserId == this.userId &&
+                this.taskNode[0]?.taskState != 2 &&
+                this.processStatus.status !== "已驳回" &&
+                this.processStatus.status !== "已撤销"
+            ) {
+                let obj = {};
+                obj.name = "撤销";
+                obj.btnProps = { type: "default" };
+                obj.click = (name) => {
+                    this.$refs.TopPopup2.handleOpen();
+                    this.handleActionClose();
+                    this.titleText = name;
+                    this.popupContext = `确定${name}吗?`;
+                    this.handleTipsType = "撤销";
+                };
+                btnList.push(obj);
+            }
+            return btnList;
+        },
+        // 底部高度
+        processCardHeight() {
+            let num = 210;
+            //  || !this.operBtn || this.operBtn?.length == 0
+            /* if (this.ProcessInsObj.end) {
+                num -= 80;
+            } */
+            if (!this.processStatus.status) num -= 140;
+            else if (!this.processStatus.currUserName) num -= 40;
+            return `calc(100vh - ${num}px)`;
+        },
+    },
+    methods: {
+        // 测试
+        handleTest() {
+            console.log("window.location", window.location);
+        },
+        // 集合
+        handleGet(task) {
+            this.taskNode = [].concat(task);
+            this.taskNodeShow = false;
+            this.actionShow = false;
+            this.handleGetProcessStatus();
+            this.handleGetUserTaskModel();
+        },
+        // 流程状态
+        handleGetProcessStatus() {
+            this.api.process
+                .getProcessStatus({
+                    processInstId: this.processDefId,
+                    taskId: this.taskNode.length ? this.taskNode[0].taskId : "",
+                })
+                .then((res) => {
+                    if (res.code == 200) {
+                        this.processStatus = res.data;
+                    }
+                });
+        },
+        // 按钮操作信息
+        handleGetUserTaskModel() {
+            this.api.process
+                .getUserTaskModel({
+                    taskId: this.taskNode.length ? this.taskNode[0].taskId : "",
+                })
+                .then((res) => {
+                    if (res.code == 200) {
+                        this.taskObj = res.data;
+                    }
+                });
+        },
+
+        // 弹窗内部渲染
+        async showOperation(com, label, api, 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 (api) {
+                this.operationParam.api = api;
+            }
+
+            this.annexlabel = annex;
+            this.titleText = label;
+            this.operationCom = com;
+
+            this.operationParam.annex = annex;
+            this.operationParam.subjectId = this.formData.subjectId;
+            this.operationParam.processInstId = this.processIntId;
+            this.operationParam.taskInstId = this.taskNode[0].taskId;
+            this.operationParam.actionName = label;
+            this.operationParam.formData = this.formData;
+        },
+        // 弹窗取消
+        handleCancel() {
+            console.log("handleCancel");
+        },
+        // 弹窗确认
+        async handleComfig() {
+            this.$refs.operationRef.confirm();
+        },
+        // 关闭弹窗TopPopup1
+        handleClosePopup1() {
+            this.$refs.TopPopup1.handleClose();
+        },
+        // 确认弹窗
+        handleTipsComfig() {
+            this.$refs.TopPopup2.handleCancel();
+            if (this.handleTipsType == "催办") {
+                this.handleTips("", true, "loading");
+                this.api.operation
+                    .reminders({ processInstId: this.processIntId })
+                    .then((res) => {
+                        if (res.code == 200) {
+                            this.handleTips("催办成功", true, "success");
+                        } else {
+                            this.handleTips(res.msg, true, "error");
+                        }
+                    });
+            }
+            if (this.handleTipsType == "撤销") {
+                this.handleTips("", true, "loading");
+                this.api.operation
+                    .revoke({
+                        processInstId: this.ProcessInsObj.id,
+                        processBusinessKey: this.ProcessInsObj
+                            .processBusinessKey,
+                    })
+                    .then((res) => {
+                        if (res.code == 200) {
+                            this.handleTips("撤销成功", true, "success");
+                        } else {
+                            this.textTips = res.msg;
+                            this.typeTips = "error";
+                            this.handleTips(res.msg, true, "error");
+                        }
+                    });
+            }
+        },
+        handleTipsCancel() {
+            console.log("handleTipsCancel");
+        },
+
+        // 当前流程进度状态回显
+        getColor(status) {
+            if (status == "审核中") return "#FFA52D";
+            if (status == "已驳回") return "#F14B4C";
+            if (status == "已撤销") return "#CECECE";
+            if (status == "已完成") return "#6DC743";
+
+            return "#1389FF";
+        },
+        // 额外按钮tips
+        handleActionOpen() {
+            this.actionShow = true;
+        },
+        // 关闭额外按钮弹窗
+        handleActionClose() {
+            this.actionShow = false;
+        },
+        // 按钮执行方法
+        actionClick(name) {
+            this.$refs.TopPopup1.handleOpen();
+            this.titleText = name;
+            this.actionShow = false;
+        },
+        // 按钮状态回显
+        getBtnStyle(type) {
+            switch (type) {
+                case "primary":
+                    return `background-color:#3c9cff;color:#fff`;
+
+                case "danger":
+                    return `background-color:rgb(255, 230, 230);color:rgb(255, 96, 96)`;
+
+                case "default":
+                    return `background-color:rgb(241, 241, 241);color:rgb(51, 51, 51)`;
+                default:
+                    return `background-color:rgb(241, 241, 241);color:rgb(51, 51, 51)`;
+            }
+        },
+        // 复活流程
+        handleRestart() {
+            this.$refs.TopPopup1.handleOpen();
+            this.handleActionClose();
+            this.showOperation(
+                operation.restart,
+                "重新提交",
+                this.api.operation
+            );
+        },
+        // tips公用方法(tips)
+        handleTips(text, status, type) {
+            this.textTips = text;
+            this.statusTips = status;
+            this.typeTips = type;
+            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>