ui-process-h5 0.1.32 → 0.1.36

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

@@ -6,7 +6,6 @@
                     class="tops-tab-header-items"
                     :class="[item.key === active ? 'active' : '']"
                     @click="handleActive(item.key, i)"
-                    ref="label"
                 >
                     {{ item.label }}
                 </div>
@@ -32,7 +31,7 @@
                     <iframe
                         v-if="trackUrl"
                         :src="trackUrl"
-                        style="width: 100%; min-height: 500px; border: none;"
+                        style="width: 100%; height: 100%; border: none;"
                         scrolling="no"
                         frameborder="0"
                     ></iframe>
@@ -44,46 +43,45 @@
                     v-if="item.key === 'c' && item.type === 'default'"
                     :name="item.slot"
                 >
-                    <div
-                        v-if="taskCommentList?.length > 0"
-                        v-for="(item, index) in taskCommentList"
-                        :key="item.id"
-                        class="seal-list__item"
-                    >
-                        <!-- <div v-for="item in list" :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="linkUrl(item.metaAnnexList, index)" -->
-                                <span>查看附件</span>
+                    <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"
+                                >
+                                    <span>查看附件</span>
+                                </div>
                             </div>
                         </div>
-                    </div>
+                    </template>
                     <div v-else class="textnone">暂无数据</div>
                 </slot>
                 <slot v-if="item.type == 'slot'" :name="item.slot"></slot>
@@ -92,11 +90,8 @@
     </div>
 </template>
 
-<script >
-import { defineComponent, ref, watch, onMounted, computed } from "vue-demi";
-// import { getProcessStatus } from "../../utils/request/api";
-
-export default defineComponent({
+<script>
+export default {
     name: "TopTab",
     props: {
         /**
@@ -116,178 +111,168 @@ export default defineComponent({
             type: Array,
             default: () => [],
         },
+        track: {
+            type: String,
+            default: "",
+        },
+        taskComment: {
+            type: Array,
+            default: () => [],
+        },
     },
-    setup(props) {
-        // 流程图
-        const trackUrl = ref(
-            "http://59.53.91.231:8088/portal/r/w?sid=6f714ec1-7570-4525-ac51-b092402d8295&cmd=CLIENT_BPM_FORM_TRACK_OPEN&processInstId=1f6e7196-e1ea-428e-b295-aa23a54a2402&supportCanvas=true&formInfo="
-        );
-
-        // 审批信息
-        const taskCommentList = ref([
-            {
-                actionName: "提交",
-                activityName: "部门负责人",
-                createDate: "2023-04-20 14:47:35",
-                createUser: "18ccbf63229f0c79f39940ae284c111e",
-                createUserName: "朱鸿飞",
-                customUniqueId: "",
-                departmentName: "测试部",
-                id: "88df38c8-9756-4b4a-a9b0-dcb0ec1b57d5",
-                metaAnnexList: null,
-                msg: "同意",
-                positionName: "测试部119147",
-                processInstId: "1f6e7196-e1ea-428e-b295-aa23a54a2402",
-                taskInstId: "38bbef1c-efbb-456d-bd79-08ed9d96b4b3",
-            },
-        ]);
-
-        // 选中
-        const active = ref("");
 
-        // tab 渲染
-        const defaultTabList = ref([
-            {
-                label: "基本信息",
-                key: "a",
-                type: "default",
-                slot: "default",
-            },
-            {
-                label: "流程图",
-                key: "b",
-                type: "default",
-                slot: "tab2",
-            },
-            {
-                label: "审批记录",
-                key: "c",
-                type: "default",
-                slot: "tab3",
+    data() {
+        return {
+            // 流程图
+            trackUrl: "",
+            // 审批信息
+            taskCommentList: [],
+            // 选中
+            active: "",
+
+            /* tab 渲染 */
+            // 默认弹窗列表
+            defaultTabList: [
+                {
+                    label: "基本信息",
+                    key: "a",
+                    type: "default",
+                    slot: "default",
+                },
+                {
+                    label: "流程图",
+                    key: "b",
+                    type: "default",
+                    slot: "tab2",
+                },
+                {
+                    label: "审批记录",
+                    key: "c",
+                    type: "default",
+                    slot: "tab3",
+                },
+            ],
+            // 弹窗操作
+            isTapList: [
+                {
+                    label: "基本信息",
+                    key: "a",
+                    type: "default",
+                    slot: "default",
+                },
+                {
+                    label: "流程图",
+                    key: "b",
+                    type: "default",
+                    slot: "tab2",
+                },
+                {
+                    label: "审批记录",
+                    key: "c",
+                    type: "default",
+                    slot: "tab3",
+                },
+            ],
+            // 绑定tab块
+            label: document.getElementsByClassName("tops-tab-header-items"),
+        };
+    },
+    watch: {
+        // 接受外部数组,渲染tab
+        tapList: {
+            handler(val, preVal) {
+                if (!this.selfTapList.length) {
+                    this.isTapList = [].concat(this.defaultTabList);
+                    if (val.length > 0) {
+                        /* return [] */
+                        val.forEach((v, i) => {
+                            if (v.sort && v.sort > 1) {
+                                this.isTapList.splice(v.sort - 1, 0, v);
+                            } else if (v.sort == 1) {
+                                this.isTapList.unshift(v);
+                            } else {
+                                this.isTapList.push(v);
+                            }
+                        });
+                    }
+                    this.active = this.isTapList[0].key;
+                    console.log("isTapList", this.isTapList);
+                }
             },
-        ]);
-
-        const isTapList = ref([
-            {
-                label: "基本信息",
-                key: "a",
-                type: "default",
-                slot: "default",
+            immediate: true,
+            deep: true,
+        },
+        // 自定义tab,覆盖默认项
+        selfTapList: {
+            handler(val, preVal) {
+                if (val.length) {
+                    this.isTapList = [].concat(val);
+                    this.active = this.isTapList[0].key;
+                }
             },
-            {
-                label: "流程图",
-                key: "b",
-                type: "default",
-                slot: "tab2",
+            immediate: true,
+            deep: true,
+        },
+        // 流程图链接
+        track: {
+            handler(val, preVal) {
+                if (val) {
+                    this.trackUrl = val;
+                }
             },
-            {
-                label: "审批记录",
-                key: "c",
-                type: "default",
-                slot: "tab3",
+            immediate: true,
+            deep: true,
+        },
+        // 审批记录列表
+        taskComment: {
+            handler(val, preVal) {
+                if (val) {
+                    this.taskCommentList = val;
+                }
             },
-        ]);
-
-        const label = ref();
+            immediate: true,
+            deep: true,
+        },
+    },
 
-        // taskNode taskObj
+    mounted() {
+        // 渲染后初始化为第一个位置
+        this.tabAnimation(0);
+    },
 
-        /* method */
-        // 选中方法
-        const handleActive = (e, i) => {
-            if (e === active.value) {
+    methods: {
+        // 选中
+        handleActive(e, i) {
+            if (e === this.active) {
                 return;
             }
 
-            active.value = e;
-            tabAnimation(i);
-        };
+            this.active = e;
+            this.tabAnimation(i);
+        },
 
-        const tabAnimation = (i) => {
-            if (label.value.length) {
-                let doc = (
-                    document.getElementsByClassName("bottom-line")[0]
-                );
+        // tab切换动画
+        tabAnimation(i) {
+            if (this.label.length) {
+                let doc = document.getElementsByClassName("bottom-line")[0];
                 let left;
-                if (doc.offsetWidth < label.value[i].offsetWidth - 10) {
+                if (doc.offsetWidth < this.label[i].offsetWidth - 10) {
                     let num =
-                        (label.value[i].offsetWidth - doc.offsetWidth - 10) / 2;
-                    left = `${label.value[i].offsetLeft + num}px`;
-                } else if (doc.offsetWidth > label.value[i].offsetWidth - 10) {
+                        (this.label[i].offsetWidth - doc.offsetWidth - 10) / 2;
+                    left = `${this.label[i].offsetLeft + num}px`;
+                } else if (doc.offsetWidth > this.label[i].offsetWidth - 10) {
                     let num =
-                        (doc.offsetWidth - label.value[i].offsetWidth + 10) / 2;
-                    left = `${label.value[i].offsetLeft - num}px`;
+                        (doc.offsetWidth - this.label[i].offsetWidth + 10) / 2;
+                    left = `${this.label[i].offsetLeft - num}px`;
                 } else {
-                    left = `${label.value[i].offsetLeft}px`;
+                    left = `${this.label[i].offsetLeft}px`;
                 }
                 doc.style.transition = ".3s";
                 doc.style.transform = `translateX(${left})`;
             }
-        };
-
-        /* watch */
-        watch(
-            () => props.selfTapList,
-            (val, preVal) => {
-                if (val.length) {
-                    isTapList.value = [].concat(val);
-                    active.value = isTapList.value[0].key;
-                }
-            },
-            {
-                //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
-                //那么首次执行，val为默认值,preVal为undefined
-                immediate: true,
-                //这个参数代表监听对象时，可以监听深度嵌套的对象属性
-                deep: true,
-            }
-        );
-
-        watch(
-            () => props.tapList,
-            (val, preVal) => {
-                if (!props.selfTapList.length) {
-                    isTapList.value = [].concat(defaultTabList.value);
-                    if (val.length > 0) {
-                        /* return [] */
-                        val.forEach((v, i) => {
-                            if (v.sort && v.sort > 1) {
-                                isTapList.value.splice(v.sort - 1, 0, v);
-                            } else if (v.sort == 1) {
-                                isTapList.value.unshift(v);
-                            } else {
-                                isTapList.value.push(v);
-                            }
-                        });
-                    }
-                    active.value = isTapList.value[0].key;
-                }
-            },
-            {
-                //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
-                //那么首次执行，val为默认值,preVal为undefined
-                immediate: true,
-                //这个参数代表监听对象时，可以监听深度嵌套的对象属性
-                deep: true,
-            }
-        );
-
-        /* mounted */
-        onMounted(() => {
-            // 渲染后初始化为第一个位置
-            tabAnimation(0);
-        });
-
-        return {
-            isTapList,
-            active,
-            handleActive,
-            label,
-            taskCommentList,
-            trackUrl,
-        };
+        },
     },
-});
+};
 </script>
 
 <style scoped>
@@ -368,7 +353,7 @@ export default defineComponent({
     z-index: 12;
 }
 .tops-tab-body {
-    height: 100%;
+    height: calc(100% - 45px);
 }
 
 .seal-list__item {
@@ -464,4 +449,11 @@ export default defineComponent({
 .seal-list__item .seal-list__item--actions .van-button:last-child ::after {
     content: none;
 }
+
+.textnone {
+    text-align: center;
+    margin-top: 30px;
+    color: #999;
+    font-size: 14px;
+}
 </style>

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

@@ -0,0 +1,207 @@
+<template>
+    <div>
+        <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="status" v-if="type == 'loading'">
+                    <img src="../theme/status/loading.png" />
+                    <div v-if="text" class="top-tipss-status-text">
+                        {{ text }}
+                    </div>
+                </div>
+                <div :class="status" v-if="type == 'success'">
+                    <img src="../theme/status/success.png" />
+                    <div v-if="text" class="top-tipss-status-text">
+                        {{ text }}
+                    </div>
+                </div>
+                <div :class="status" v-if="type == 'error'">
+                    <img src="../theme/status/error.png" />
+                    <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>
+export default {
+    props: {
+        text: { default: "", type: String },
+        type: { default: "default", type: String },
+        statusTips: { default: false, type: Boolean },
+    },
+    data() {
+        return {
+            show: false,
+            status: "",
+        };
+    },
+    watch: {
+        type: {
+            handler(val, preVal) {
+                switch (val) {
+                    case "loading":
+                        this.status = "top-tipss-loadinig";
+                        break;
+                    case "success":
+                        this.status = "top-tipss-success";
+                        setTimeout(() => {
+                            this.handleClose();
+                        }, 1500);
+                        break;
+                    case "error":
+                        this.status = "top-tipss-error";
+                        setTimeout(() => {
+                            this.handleClose();
+                        }, 1500);
+                        break;
+                }
+            },
+            immediate: true,
+            deep: true,
+        },
+    },
+    mounted() {
+        this.$nextTick(() => {
+            const body = document.querySelector("body");
+            if (body.append) {
+                body.append(this.$el);
+            } else {
+                body.appendChild(this.$el);
+            }
+        });
+    },
+    methods: {
+        handleOpen() {
+            if (
+                !this.show &&
+                (this.type == "success" ||
+                    this.type == "error" ||
+                    this.type == "default")
+            ) {
+                this.show = true;
+                setTimeout(() => {
+                    this.handleClose();
+                }, 1500);
+            } else {
+                this.show = true;
+            }
+        },
+        handleClose() {
+            this.show = false;
+        },
+    },
+};
+</script>
+<style>
+.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;
+}
+
+.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;
+    padding-top: 10px;
+    font-size: 12px;
+}
+
+@-webkit-keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>