ui-process-h5 0.1.15 → 0.1.22

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

@@ -0,0 +1,467 @@
+<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)"
+                    ref="label"
+                >
+                    {{ 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: calc(100% - 45px);"
+            >
+                <!--  :taskNode="getTaskNode()" -->
+                <slot
+                    v-if="item.key === 'a' && item.type === 'default'"
+                    name="default"
+                ></slot>
+                <slot
+                    v-if="item.key === 'b' && item.type === 'default'"
+                    :name="item.slot"
+                >
+                    <iframe
+                        v-if="trackUrl"
+                        :src="trackUrl"
+                        style="width: 100%; min-height: 500px; border: none;"
+                        scrolling="no"
+                        frameborder="0"
+                    ></iframe>
+                    <div v-else class="textnone">
+                        暂无流程图
+                    </div>
+                </slot>
+                <slot
+                    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>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-else class="textnone">暂无数据</div>
+                </slot>
+                <slot v-if="item.type == 'slot'" :name="item.slot"></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watch, onMounted, computed } from "vue-demi";
+// import { getProcessStatus } from "../../utils/request/api";
+
+export default defineComponent({
+    name: "TopTab",
+    props: {
+        /**
+         * 根据参数插入自定义tab
+         * label:选项卡title
+         * key:选项卡ID 请勿重复defaultTabList内已拥有的默认key
+         * type:插槽类型 "slot" "default"
+         * sort:排序参数,无参数默认插入末尾
+         * slot:插槽name
+         */
+        tapList: {
+            type: Array,
+            default: () => [],
+        },
+        // 自定义tab (传入后  默认tab,tapList,失效)
+        selfTapList: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    setup(props: any) {
+        // 流程图
+        const trackUrl = ref<string>(
+            "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<any>([
+            {
+                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<string>("");
+
+        // tab 渲染
+        const defaultTabList = ref<any>([
+            {
+                label: "基本信息",
+                key: "a",
+                type: "default",
+                slot: "default",
+            },
+            {
+                label: "流程图",
+                key: "b",
+                type: "default",
+                slot: "tab2",
+            },
+            {
+                label: "审批记录",
+                key: "c",
+                type: "default",
+                slot: "tab3",
+            },
+        ]);
+
+        const isTapList = ref<any>([
+            {
+                label: "基本信息",
+                key: "a",
+                type: "default",
+                slot: "default",
+            },
+            {
+                label: "流程图",
+                key: "b",
+                type: "default",
+                slot: "tab2",
+            },
+            {
+                label: "审批记录",
+                key: "c",
+                type: "default",
+                slot: "tab3",
+            },
+        ]);
+
+        const label = ref<any>();
+
+        // taskNode taskObj
+
+        /* method */
+        // 选中方法
+        const handleActive = (e: string, i: number) => {
+            if (e === active.value) {
+                return;
+            }
+
+            active.value = e;
+            tabAnimation(i);
+        };
+
+        const tabAnimation = (i: number) => {
+            if (label.value.length) {
+                let doc = <any>(
+                    document.getElementsByClassName("bottom-line")[0]
+                );
+                let left;
+                if (doc.offsetWidth < label.value[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) {
+                    let num =
+                        (doc.offsetWidth - label.value[i].offsetWidth + 10) / 2;
+                    left = `${label.value[i].offsetLeft - num}px`;
+                } else {
+                    left = `${label.value[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: any, i: number) => {
+                            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>
+.tops-tab {
+    height: 100%;
+}
+.tops-tab-header {
+    display: flex;
+    width: 100%;
+    height: 45px;
+    font-size: 14px;
+    color: #333;
+    padding: 10px 17px;
+    font-weight: 500;
+    box-sizing: border-box;
+    overflow-x: auto;
+    white-space: nowrap;
+    flex-wrap: nowrap;
+    flex-shrink: 0;
+    -ms-overflow-style: none;
+    position: relative;
+    background-color: #fff;
+}
+
+.tops-tab-header::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 1px;
+    background-color: #f2f2f2;
+    left: 0;
+    bottom: 0;
+    z-index: 10;
+}
+
+.tops-tab-header::-webkit-scrollbar {
+    display: none;
+}
+
+.tops-tab-header-items {
+    white-space: nowrap;
+    padding-right: 10px;
+    box-sizing: border-box;
+    display: inline-block;
+    height: 100%;
+    text-align: center;
+    margin-right: 32px;
+    font-weight: 400;
+    font-size: 15px;
+    text-align: left;
+    color: #333;
+    display: flex;
+    align-items: center;
+}
+
+.tops-tab-header-items:last-child {
+    padding-right: 0;
+    margin-right: 0;
+}
+
+.tops-tab-header .active {
+    position: relative;
+    color: #1389ff;
+    font-family: "PingFang SC Bold";
+    font-weight: 700;
+    font-size: 15px;
+    text-align: left;
+}
+
+.tops-tab-header .bottom-line {
+    width: 30px;
+    height: 3px;
+    border-radius: 1.5px;
+    background-color: #1389ff;
+    position: absolute;
+    bottom: 1px;
+    left: 0;
+    z-index: 12;
+}
+.tops-tab-body {
+    height: 100%;
+}
+
+.seal-list__item {
+    padding: 6px 10px;
+    margin: 10px;
+    margin-bottom: 0px;
+    padding-bottom: 0px;
+    background-color: #ffffff;
+    border-radius: 10px;
+    box-sizing: border-box;
+}
+
+.seal-list__item:last-child {
+    margin-bottom: 70px;
+}
+
+.seal-list__item .seal-list__item--header {
+    margin-bottom: 6px;
+    display: flex;
+    align-items: center;
+}
+
+.seal-list__item .seal-list__item--header span:first-of-type {
+    font-size: 15px;
+    margin-right: 6px;
+    font-weight: bold;
+}
+
+.seal-list__item .seal-list__item--option {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14px;
+    padding: 10px 0;
+    color: #333;
+}
+
+.seal-list__item .seal-list__item--option {
+}
+
+.seal-list__item .seal-list__item--option span:last-child {
+    max-width: 144px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: #888;
+}
+
+.seal-list__item .seal-list__item--option :last-child {
+    /* padding-bottom: 14px; */
+}
+.seal-list__item .seal-list__item--attch {
+    font-size: 14px;
+    padding: 10px 0;
+    color: #333;
+    text-align: right;
+    color: #1389ff;
+}
+
+.seal-list__item .seal-list__item--actions {
+    margin-top: 12px;
+    position: relative;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.seal-list__item .seal-list__item--actions ::before {
+    content: "";
+    top: 0;
+    width: 100%;
+    transform: scaleY(0.5);
+    transform-origin: top;
+    border-top: 1px #e8e8e8 solid;
+    position: absolute;
+}
+
+.seal-list__item .seal-list__item--actions .van-button {
+    width: 50%;
+}
+
+.seal-list__item .seal-list__item--actions .van-button ::after {
+    content: "";
+    height: 60%;
+    border-left: 1px #e8e8e8 solid;
+    position: absolute;
+    left: 100%;
+    top: 50%;
+    transform: translate(-50%, -50%) scaleX(0.5);
+    transform-origin: left;
+}
+
+.seal-list__item .seal-list__item--actions .van-button:last-child ::after {
+    content: none;
+}
+</style>

package/{request → packages/components/utils/request}/api.ts

@@ -2,7 +2,7 @@ import request from "./request";
 
 const proxyStr = "/aws";
 
-export function getProcessStatus(query:any) {
+export function getProcessStatus(query: any) {
     return request({
         url: proxyStr + "/pis/getProcessStatus",
         method: "get",

package/{request → packages/components/utils/request}/request.ts

@@ -7,6 +7,7 @@ import axios, {
 import { ACCESS_TOKEN, loadStorage } from "./cache";
 
 const host = process.env.VUE_APP_BASE_URL;
+// const host = "http://59.53.91.231:2100";
 
 axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
 
@@ -28,11 +29,13 @@ const opts = {
 
 const service = axios.create(opts);
 
-service.interceptors.request.use((config) => {
+service.interceptors.request.use((config)=> {
     const isToken = (config.headers || {}).isToken === false;
     if (loadStorage("token", "") && !isToken) {
-        config.headers["Authorization"] = "Bearer " + loadStorage("token", ""); // 让每个请求携带自定义token 请根据实际情况自行修改
+        config.headers["Authorization"] = "Bearer " + loadStorage("token", ""); // 让每个请求携带自定义token 请根据实际情况自行修改 15c572f2-1fff-4ef2-94dc-728fc8d6fe14
     }
+    /* config.headers["Authorization"] =
+        "Bearer " + "15c572f2-1fff-4ef2-94dc-728fc8d6fe14"; */
     return config;
 });
 

package/packages/index.ts

@@ -0,0 +1,15 @@
+import { App } from "vue";
+import components from "./component";
+
+// 完整引入组件
+const install = function (app: App) {
+    components.forEach((component) => {
+        app.use((component as unknown) as { install: () => any });
+    });
+};
+
+// 所有组件
+export * from "./component";
+export default {
+    install,
+};

package/lib/Tab/index.d.ts

@@ -1,2 +0,0 @@
-import Tab from "./src/tab.vue";
-export default Tab;

package/lib/Tab/src/tab.vue.d.ts

@@ -1,28 +0,0 @@
-declare const _default: {
-    name: string;
-    props: {
-        /**
-         * 根据参数插入自定义tab
-         * label:选项卡title
-         * key:选项卡ID 请勿重复defaultTabList内已拥有的默认key
-         * type:插槽类型 "slot" "default"
-         * sort:排序参数,无参数默认插入末尾
-         * slot:插槽name
-         */
-        tapList: {
-            type: ArrayConstructor;
-            default: () => never[];
-        };
-        selfTapList: {
-            type: ArrayConstructor;
-            default: () => never[];
-        };
-    };
-    setup(props: any): {
-        isTapList: any;
-        active: import("vue").Ref<string>;
-        handleActive: (e: string, i: number) => void;
-        label: import("vue").Ref<any>;
-    };
-};
-export default _default;