ui-process-h5 0.1.36 → 1.0.1

package/src/packages/process/index.scss

@@ -0,0 +1,175 @@
+.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;
+    height: auto;
+}
+
+.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;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.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;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+}
+
+.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;
+}
+
+.footBtnRow {
+    width: 100%;
+}

package/src/packages/process/index.vue

@@ -0,0 +1,263 @@
+<template>
+    <div>
+        <div class="process-warp">
+            <div
+                class="process-main"
+                v-if="
+                    formData.currentState ||
+                    processStatus.bizStatusName ||
+                    processStatus.status
+                "
+                id="process-header"
+                ref="processheader"
+            >
+                <div class="process-ml-item border">
+                    <div class="process-mli-name">流程状态</div>
+                    <!-- <div class="process-mli-name" @click="handleTestS">测试</div> -->
+                    <div class="process-mli-value">
+                        <div
+                            class="process-mliv-dd"
+                            :style="{
+                                background: getColor(
+                                    formData.currentState ||
+                                        processStatus.bizStatusName ||
+                                        processStatus.status
+                                ),
+                            }"
+                            v-if="
+                                formData.currentState ||
+                                processStatus.bizStatusName ||
+                                processStatus.status
+                            "
+                        >
+                            {{
+                                formData.currentState ||
+                                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"
+                        style="width: 50%; text-align: right;"
+                    >
+                        <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"
+                    :trackList="trackList"
+                >
+                    <template v-if="selfTapList && selfTapList.length">
+                        <div
+                            v-for="(v, i) in selfTapList"
+                            :key="i"
+                            :slot="v.slot"
+                        >
+                            <slot :name="v.slot"></slot>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div slot="default" style="100%">
+                            <slot name="default"> </slot>
+                        </div>
+                        <div
+                            style="100%"
+                            v-for="(v, i) in tapList"
+                            :key="i"
+                            :slot="v.slot"
+                        >
+                            <slot :name="v.slot"></slot>
+                        </div>
+                    </template>
+                </TopTab>
+            </div>
+            <div
+                class="process-btn"
+                id="process-footer"
+                :style="{ bottom: processBtn }"
+                v-if="!isView"
+            >
+                <div class="footBtnRow" v-if="isAdditional">
+                    <slot name="btn" :data="processStatus"></slot>
+                </div>
+                <template v-else>
+                    <template
+                        v-if="
+                            isDocument &&
+                            (formData.currentState == '编文号套红' ||
+                                formData.currentState == '盖章')
+                        "
+                    >
+                        <div class="top-button" :style="getBtnStyle('default')">
+                            请去PC端处理该流程
+                        </div>
+                    </template>
+                    <template v-else>
+                        <template
+                            v-if="
+                                formData.currentState != '已完成' ||
+                                processStatus.status != '已完成' ||
+                                processStatus.bizStatusName != '已完成'
+                            "
+                        >
+                            <template 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>
+                    </template>
+                </template>
+            </div>
+        </div>
+        <TopPopup
+            ref="TopPopup1"
+            :cancel="handleCancel"
+            :comfig="handleComfig"
+            :titleText="titleText"
+            :visible.sync="TopPopup1"
+        >
+            <!--  @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>
+        <TopSumbitPopup
+            :visible.sync="visibleSong"
+            ref="actionPop"
+            :request="request"
+            :appId="processStatus.appId"
+            :id="formData.businessKey"
+            :resubmit="true"
+            v-bind="restartDataS"
+            @successFn="endFunction"
+            :selfList="selfList"
+            @change="handleTestsss"
+        ></TopSumbitPopup>
+        <!--  @change="handleChange"
+            :todoParameter="todoParameter" :resubmit="resubmit" :beforeFunction="saveAndStart" -->
+    </div>
+</template>
+<script src="./index.js"></script>
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>