ui-process-h5 0.1.36 → 1.0.1

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

@@ -1,900 +0,0 @@
-<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>