ui-process-h5 0.1.36 → 1.0.1

package/src/packages/tab/index.vue

@@ -0,0 +1,155 @@
+<template>
+    <div class="tops-tab">
+        <div class="tops-tab-header">
+            <template v-for="(item, i) of isTapList">
+                <div
+                    class="tops-tab-header-items"
+                    :class="[item.key === active ? 'active' : '']"
+                    @click="handleActive(item.key, i)"
+                >
+                    {{ item.label }}
+                </div>
+            </template>
+            <div class="bottom-line" v-if="isTapList.length"></div>
+        </div>
+        <div class="tops-tab-body">
+            <div
+                v-for="item in isTapList"
+                :key="item.key"
+                v-show="active === item.key"
+                style="height: 100%;"
+                :class="[item.key === 'c' && 'tops-tab-body-taskcommentlist']"
+            >
+                <!--  :taskNode="getTaskNode()" -->
+                <slot
+                    v-if="item.key === 'a' && item.type === 'default'"
+                    name="default"
+                ></slot>
+                <div style="height:100%;"
+                    v-if="item.key === 'b' && item.type === 'default'"
+                    :name="item.slot"
+                >
+                    <div
+                        style="padding: 10px 20px; color: #1389ff;"
+                        v-if="trackUrl"
+                        @click="() => (visibleTack = true)"
+                    >
+                        查看流程节点信息
+                    </div>
+                    <iframe
+                        v-if="trackUrl"
+                        :src="trackUrl"
+                        style="
+                            width: 100%;
+                            height: calc(100% - 41px);
+                            border: none;
+                        "
+                        scrolling="no"
+                        frameborder="0"
+                    ></iframe>
+                    <div v-else class="textnone">
+                        暂无流程图
+                    </div>
+                </div>
+                <div style="height:100%;"
+                    v-if="item.key === 'c' && item.type === 'default'"
+                >
+                    <template v-if="taskCommentList.length > 0">
+                        <div
+                            v-for="(item, index) in taskCommentList"
+                            :key="item.id"
+                            class="seal-list__item"
+                        >
+                            <div>
+                                <div class="seal-list__item--option">
+                                    <span>节点名称</span>
+                                    <span>{{ item.activityName }}</span>
+                                </div>
+                                <div class="seal-list__item--option">
+                                    <span>审批人</span>
+                                    <span>{{ item.createUserName }}</span>
+                                </div>
+                                <div class="seal-list__item--option">
+                                    <span>审批操作</span>
+                                    <span>{{ item.actionName }}</span>
+                                </div>
+                                <div class="seal-list__item--option">
+                                    <span>审批意见</span>
+                                    <span v-html="item.msg"></span>
+                                </div>
+                                <div class="seal-list__item--option">
+                                    <span>审批时间</span>
+                                    <span>{{ item.createDate }}</span>
+                                </div>
+                                <div
+                                    v-if="
+                                        item.metaAnnexList &&
+                                        item.metaAnnexList.length
+                                    "
+                                    class="seal-list__item--attch"
+                                    @click="viewList(item.metaAnnexList)"
+                                >
+                                    <span>查看附件</span>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                    <div v-else class="textnone">暂无数据</div>
+                </div>
+                <slot v-if="item.type == 'slot'" :name="item.slot"></slot>
+            </div>
+        </div>
+        <TopPopup
+            v-bind:visible="visible"
+            v-on:update:visible="(val) => (visible = val)"
+            ref="TopPopup"
+            titleText="附件列表"
+            isDrawer
+            :isIndex="5"
+        >
+            <ViewAttchList :inList="inList"></ViewAttchList>
+        </TopPopup>
+        <TopPopup
+            v-bind:visible="visibleTack"
+            v-on:update:visible="(val) => (visibleTack = val)"
+            ref="TopPopups"
+            titleText="流程信息"
+            isDrawer
+            width="60vw"
+        >
+            <template v-if="trackListss && trackListss.length">
+                <div
+                    v-for="(item, index) in trackListss"
+                    :key="item.id"
+                    class="seal-list__item"
+                >
+                    <div>
+                        <div class="seal-list__item--option">
+                            <span>序号</span>
+                            <span style="max-width: 100px;">{{ item.no }}</span>
+                        </div>
+                        <div class="seal-list__item--option">
+                            <span>节点名称</span>
+                            <span style="max-width: 100px;"
+                                >{{ item.name
+                                }}{{
+                                    item.type !== "普通" ? `[${item.type}]` : ""
+                                }}</span
+                            >
+                        </div>
+                        <div class="seal-list__item--option">
+                            <span>审批人</span>
+                            <span style="max-width: 100px;">{{
+                                item.assigneeNames
+                            }}</span>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </TopPopup>
+    </div>
+</template>
+<script src="./index.js"></script>
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

package/src/packages/tip/index.js

@@ -0,0 +1,80 @@
+import { defineComponent } from "vue-demi";
+import error from "@/assets/status/error.png";
+import loading from "@/assets/status/loading.png";
+import success from "@/assets/status/success.png";
+
+export default defineComponent({
+    name: "TopTips",
+    props: {
+        text: { default: "", type: String }, // tips文本展示
+        type: { default: "default", type: String }, // tips 类型 (success, error, loading)
+        statusTips: { default: false, type: Boolean }, // 开启状态展示
+        domNode: { default: "", type: String },
+        visible: { default: false, type: Boolean },
+    },
+    data() {
+        return {
+            show: false,
+            status: "",
+            timeOut: null,
+        };
+    },
+    computed: {
+        error() {
+            return error;
+        },
+        loading() {
+            return loading;
+        },
+        success() {
+            return success;
+        },
+    },
+    watch: {
+        type: {
+            handler(val, preVal) {
+                if (val == "loading") {
+                    clearInterval(this.timeOut);
+                    return;
+                } else {
+                    this.timeOut = setTimeout(() => {
+                        this.show = false;
+                    }, 1500);
+                }
+            },
+            immediate: true,
+            deep: true,
+        },
+    },
+    mounted() {
+        this.$nextTick(() => {
+            const body = document.getElementsByClassName("process-warp")[0]
+                ? document.getElementsByClassName("process-warp")[0]
+                : document
+                      .getElementsByClassName("sumbmitPopup-index-sumbit")[0]
+                      .getElementsByClassName("top-popup-drawer")[0];
+            if (body.append) {
+                body.append(this.$el);
+            } else {
+                body.appendChild(this.$el);
+            }
+        });
+    },
+    methods: {
+        handleOpen() {
+            if (!this.show) {
+                this.show = true;
+                if (this.type == "loading") {
+                    clearInterval(this.timeOut);
+                } else {
+                    this.timeOut = setTimeout(() => {
+                        this.show = false;
+                    }, 1500);
+                }
+            }
+        },
+        handleClose() {
+            this.show = false;
+        },
+    },
+});

package/src/packages/tip/index.scss

@@ -0,0 +1,121 @@
+.top-tipss {
+    position: absolute;
+    z-index: 2999;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    text-align: center;
+    max-width: 80%;
+    transition: all 0.3s ease;
+    visibility: hidden;
+    opacity: 0;
+}
+
+.top-tipss-animal {
+    animation: shows 1.5s ease;
+}
+
+.top-tipss-mask {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    background-color: #000;
+    opacity: 0.7;
+    top: 0;
+    left: 0;
+    z-index: 1999;
+    transition: all 0.3s ease;
+}
+
+.top-tipss-text {
+    display: inline-block;
+    vertical-align: middle;
+    color: #fff;
+    padding: 10px 20px;
+    border-radius: 5px;
+    font-size: 13px;
+    text-align: center;
+    max-width: 100%;
+    word-break: break-all;
+    white-space: normal;
+    background-color: rgba(17, 17, 17, 0.7);
+}
+.top-tipss-status {
+    width: 120px;
+    height: 120px;
+    border-radius: 12px;
+    background-color: rgba(17, 17, 17, 0.7);
+    display: flex;
+}
+
+.top-tipss-loadinig,
+.top-tipss-success,
+.top-tipss-error {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.top-tipss-loadinig img,
+.top-tipss-success img,
+.top-tipss-error img {
+    width: 40px;
+    height: 40px;
+}
+
+.top-tipss-loadinig img {
+    -webkit-animation: rotation 0.8s linear infinite;
+    animation: rotation 0.8s linear infinite;
+}
+
+.top-tipss-status-text {
+    color: #fff;
+    font-size: 12px;
+    padding: 10px 5px 0;
+}
+
+@-webkit-keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.fade-enter,
+.fade-leave-to {
+    visibility: hidden;
+    opacity: 0;
+}
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 2s;
+}
+
+@keyframes shows {
+    0% {
+        visibility: hidden;
+        opacity: 0;
+    }
+    25% {
+        visibility: hidden;
+        opacity: 0.5;
+    }
+    50% {
+        visibility: visible;
+        opacity: 1;
+    }
+    75% {
+        visibility: hidden;
+        opacity: 0.5;
+    }
+    100% {
+        visibility: hidden;
+        opacity: 0.5;
+    }
+}

package/src/packages/tip/index.vue

@@ -0,0 +1,57 @@
+<template>
+    <div v-if="show">
+        <div
+            v-if="!statusTips"
+            class="top-tipss"
+            :style="
+                show
+                    ? 'visibility: visible; opacity: 1;'
+                    : 'visibility: hidden; opacity: 0;'
+            "
+        >
+            <div v-if="text" class="top-tipss-text">{{ text }}</div>
+        </div>
+        <div
+            v-else
+            class="top-tipss"
+            :style="
+                show
+                    ? 'visibility: visible; opacity: 1;'
+                    : 'visibility: hidden; opacity: 0;'
+            "
+        >
+            <div class="top-tipss-status">
+                <div class="top-tipss-loadinig" v-if="type == 'loading'">
+                    <img :src="loading" />
+                    <div v-if="text" class="top-tipss-status-text">
+                        {{ text }}
+                    </div>
+                </div>
+                <div class="top-tipss-success" v-if="type == 'success'">
+                    <img :src="success" />
+                    <div v-if="text" class="top-tipss-status-text">
+                        {{ text }}
+                    </div>
+                </div>
+                <div class="top-tipss-error" v-if="type == 'error'">
+                    <img :src="error" />
+                    <div v-if="text" class="top-tipss-status-text">
+                        {{ text }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div
+            class="top-tipss-mask"
+            :style="
+                show && statusTips
+                    ? 'visibility: visible; opacity: .7;'
+                    : 'visibility: hidden; opacity: 0;'
+            "
+        ></div>
+    </div>
+</template>
+<script src="./index.js"></script>
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

package/src/packages/viewAttchList/index.js

@@ -0,0 +1,134 @@
+import { defineComponent } from "vue-demi";
+import dsBridge from "dsbridge";
+
+import PreView from "../preview/index.vue";
+import TopPopup from "../popup/index.vue";
+import PreviewImage from "../previewImage/index.vue";
+
+import del from "@/assets/img/del.png";
+import doc from "@/assets/img/doc.png";
+import file from "@/assets/img/file.png";
+import image from "@/assets/img/image.png";
+import pdf from "@/assets/img/pdf.png";
+import xls from "@/assets/img/xls.png";
+import zip from "@/assets/img/zip.png";
+
+export default defineComponent({
+    name: "ViewAttchList",
+    components: {
+        PreView,
+        TopPopup,
+        PreviewImage,
+    },
+    computed: {
+        del() {
+            return del;
+        },
+        doc() {
+            return doc;
+        },
+        file() {
+            return file;
+        },
+        image() {
+            return image;
+        },
+        pdf() {
+            return pdf;
+        },
+        xls() {
+            return xls;
+        },
+        zip() {
+            return zip;
+        },
+    },
+    props: {
+        inList: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    data() {
+        return {
+            listData: [],
+            imgIcon: ["jpg", "jpge", "png", "gif"],
+            docIcon: ["doc", "docx"],
+            xlsIcon: ["xls", "xlsx"],
+            zipIcon: ["zip", "rar", "7z"],
+            preList: [],
+            fileUrl: "",
+            visible: false,
+
+            visibleImg: false,
+            lists: [],
+            indexd: 0,
+        };
+    },
+    watch: {
+        inList: {
+            handler(val, preVal) {
+                if (val.length) {
+                    this.listData = val;
+
+                    this.lists = [];
+                    let arr = [];
+                    val.map((v, i) => {
+                        if (
+                            this.imgIcon.includes(
+                                v.name.substring(v.name.lastIndexOf(".") + 1)
+                            )
+                        ) {
+                        }
+                    });
+                    arr = val.filter((value) => {
+                        return this.imgIcon.includes(
+                            value.name.substring(
+                                value.name.lastIndexOf(".") + 1
+                            )
+                        );
+                    });
+                    arr.forEach((v, i) => {
+                        this.lists.push(v.url);
+                    });
+                }
+            },
+            immediate: true,
+            deep: true,
+        },
+    },
+    methods: {
+        viewFile(val) {
+            if (
+                this.imgIcon.includes(
+                    val.url.substring(val.url.lastIndexOf(".") + 1)
+                )
+            ) {
+                this.visibleImg = true;
+                this.indexd = this.lists.indexOf(val.url);
+            } else {
+                this.fileUrl = val.url;
+                this.visible = true;
+            }
+        },
+        loadFile(val) {
+            // console.log("loadFile", val);
+
+            if (dsBridge.hasNativeMethod("vueUpLoadFile")) {
+                let res = dsBridge.call("vueUpLoadFile", val.url);
+            } else {
+                if (
+                    "undefined" != typeof nativeMethod &&
+                    nativeMethod?.vueUpLoadFile
+                ) {
+                    nativeMethod.vueUpLoadFile(val.url);
+                    return false;
+                }
+                const a = document.createElement("a");
+                a.download = val.url?.match(/([^\/]+)$/g)[0];
+                a.href = val.url;
+                a.click();
+            }
+        },
+    },
+});

package/src/packages/viewAttchList/index.scss

@@ -0,0 +1,76 @@
+.wrap-header {
+    height: 40px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+}
+.wrap-header-back {
+    transform: rotateY(180deg);
+    width: 18px;
+    height: 18px;
+    
+}
+.wrap-header-back img {
+        width: 100%;
+        height: 100%;
+    }
+.wrap-header-title {
+    padding-left: calc(50% - 54px);
+    font-size: 18px;
+    color: #333;
+}
+
+.attch-list {
+    width: 100%;
+}
+.list-items {
+    display: flex;
+    margin-top: 18px;
+    padding: 0 20px 0 10px;
+}
+
+.list-items-icon {
+    width: 36px;
+    height: 40px;
+    margin-right: 10px;
+    line-height: 44px;
+}
+.list-items-icon .icon-img {
+    width: 100%;
+    height: 100%;
+}
+
+.list-items-info {
+    width: 225px;
+}
+
+.info-name {
+    font-size: 15px;
+    color: #333;
+    overflow-wrap: break-word;
+}
+.info-attribute {
+    color: #999;
+    font-size: 13px;
+    margin-top: 4px;
+}
+.info-attribute-time {
+    margin-right: 10px;
+}
+
+.list-items-download {
+    width: 26px;
+    margin-left: auto;
+    color: #1389ff;
+    font-size: 13px;
+    line-height: 44px;
+    white-space: nowrap;
+}
+
+.attch-list--white {
+    text-align: center;
+    margin-top: 50%;
+    font-size: 15px;
+    color: #333;
+}