ui-process-h5 0.1.36 → 0.1.40

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

@@ -1,230 +0,0 @@
-<template>
-    <div>
-        <div
-            v-if="!isTips"
-            class="top-popup"
-            :style="
-                show
-                    ? 'transform: translateY(0)'
-                    : 'transform: translateY(100%)'
-            "
-        >
-            <div class="top-popup-header">
-                <div class="header-cancel" @click="handleCancel">
-                    {{ cancelText }}
-                </div>
-                <div class="header-title">{{ titleText }}</div>
-                <div class="header-comfig" @click="handleComfig">
-                    {{ comfigText }}
-                </div>
-            </div>
-            <div class="top-popup-body">
-                <slot name="default"></slot>
-            </div>
-        </div>
-        <div
-            class="top-tips"
-            v-else
-            :style="
-                show
-                    ? 'visibility: visible; opacity: 1; transform: scale(1)'
-                    : 'visibility: hidden; opacity: 0; transform: scale(1.2)'
-            "
-        >
-            <div class="top-tips-header">{{ titleText }}</div>
-            <div class="top-tips-body">{{ context }}</div>
-            <div class="top-tips-footer">
-                <div class="top-tips-btn" @click="handleCancel">
-                    {{ cancelText }}
-                </div>
-                <div class="top-tips-btn" @click="handleComfig">
-                    {{ comfigText }}
-                </div>
-            </div>
-        </div>
-        <div
-            class="top-popup-mask"
-            :style="
-                show && isMask
-                    ? 'visibility: visible; opacity: .7;'
-                    : 'visibility: hidden; opacity: 0;'
-            "
-            @click="isMaskClose && handleClose()"
-        ></div>
-    </div>
-</template>
-<script>
-export default {
-    name: "TopPopup",
-    props: {
-        titleText: { default: "top-popup", type: String },// 标题文本
-        context: { default: "内容", type: String },// 内容文本
-        cancelText: { default: "取消", type: String },// 取消按钮文案
-        comfigText: { default: "确定", type: String },// 确定按钮文案
-        comfig: { default: null, type: Function },// 确定方法
-        cancel: { default: null, type: Function }, // 取消方法
-        isMask: { default: true, type: Boolean },// 是否开启蒙版
-        isMaskClose: { default: true, type: Boolean },// 蒙版关闭功能
-        isTips: { default: false, type: Boolean },//判断当前是否为dialog
-    },
-    data() {
-        return {
-            show: false,
-        };
-    },
-
-    methods: {
-        handleOpen() {
-            this.show = true;
-        },
-        handleClose() {
-            this.show = false;
-        },
-        handleCancel() {
-            typeof this.cancel === "function" && this.cancel();
-            this.handleClose();
-        },
-        handleComfig() {
-            typeof this.comfig === "function" && this.comfig();
-        },
-    },
-    mounted() {
-        // 渲染组件到body
-        this.$nextTick(() => {
-            const body = document.querySelector("body");
-            if (body.append) {
-                body.append(this.$el);
-            } else {
-                body.appendChild(this.$el);
-            }
-        });
-    },
-};
-</script>
-<style scoped>
-.top-popup {
-    width: 100%;
-    max-height: 80vh;
-    min-height: 65vh;
-    position: fixed;
-    left: 0;
-    background-color: #fff;
-    z-index: 399;
-    border-radius: 20px 20px 0 0;
-    padding: 0 20px;
-    box-sizing: border-box;
-    transition: transform 0.3s ease;
-    bottom: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-}
-.top-popup-mask {
-    position: fixed;
-    width: 100vw;
-    height: 100vh;
-    background-color: #000;
-    opacity: 0.7;
-    top: 0;
-    left: 0;
-    z-index: 299;
-    transition: all 0.3s ease;
-}
-.top-popup-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 0;
-    font-size: 15px;
-}
-
-.top-popup-header .header-title {
-    font-size: 16px;
-    font-weight: 700;
-    color: #333;
-}
-
-.top-popup-header .header-cancel {
-    color: #333;
-}
-.top-popup-header .header-comfig {
-    color: #1389ff;
-}
-
-
-.top-tips {
-    width: 80vw;
-    /* height: 200px; */
-    border-radius: 11px;
-    background-color: #fff;
-    position: fixed;
-    top: calc(50% - 100px);
-    left: calc(50% - 40vw);
-    z-index: 399;
-    box-sizing: border-box;
-    transition: all 0.3s ease;
-}
-
-.top-tips-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    padding-top: 25px;
-    font-size: 15px;
-    color: #323233;
-}
-
-.top-tips-body {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    padding: 20px;
-    padding-top: 8px;
-    font-size: 14px;
-    color: #6c6c6c;
-}
-
-.top-tips-footer {
-    display: flex;
-    flex-direction: row;
-    border-top-color: #f5f5f5;
-    border-top-style: solid;
-    border-top-width: 1px;
-    position: relative;
-}
-.top-tips-footer::before {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 0.5px;
-    top: 0;
-    left: 0;
-    background-color: #f2f2f2;
-}
-
-.top-tips-btn {
-    display: flex;
-    flex: 1;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    height: 45px;
-    position: relative;
-    font-size: 16px;
-    color: #333;
-}
-
-.top-tips-btn:last-child {
-    color: #ee0a24;
-}
-
-.top-tips-btn:last-child::before {
-    content: "";
-    position: absolute;
-    width: 1px;
-    height: 100%;
-    top: 0;
-    left: 0;
-    background-color: #f2f2f2;
-}
-</style>

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

@@ -1,459 +0,0 @@
-<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: 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%; height: 100%; 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"
-                >
-                    <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>
-                    </template>
-                    <div v-else class="textnone">暂无数据</div>
-                </slot>
-                <slot v-if="item.type == 'slot'" :name="item.slot"></slot>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    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: () => [],
-        },
-        track: {
-            type: String,
-            default: "",
-        },
-        taskComment: {
-            type: Array,
-            default: () => [],
-        },
-    },
-
-    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);
-                }
-            },
-            immediate: true,
-            deep: true,
-        },
-        // 自定义tab,覆盖默认项
-        selfTapList: {
-            handler(val, preVal) {
-                if (val.length) {
-                    this.isTapList = [].concat(val);
-                    this.active = this.isTapList[0].key;
-                }
-            },
-            immediate: true,
-            deep: true,
-        },
-        // 流程图链接
-        track: {
-            handler(val, preVal) {
-                if (val) {
-                    this.trackUrl = val;
-                }
-            },
-            immediate: true,
-            deep: true,
-        },
-        // 审批记录列表
-        taskComment: {
-            handler(val, preVal) {
-                if (val) {
-                    this.taskCommentList = val;
-                }
-            },
-            immediate: true,
-            deep: true,
-        },
-    },
-
-    mounted() {
-        // 渲染后初始化为第一个位置
-        this.tabAnimation(0);
-    },
-
-    methods: {
-        // 选中
-        handleActive(e, i) {
-            if (e === this.active) {
-                return;
-            }
-
-            this.active = e;
-            this.tabAnimation(i);
-        },
-
-        // tab切换动画
-        tabAnimation(i) {
-            if (this.label.length) {
-                let doc = document.getElementsByClassName("bottom-line")[0];
-                let left;
-                if (doc.offsetWidth < this.label[i].offsetWidth - 10) {
-                    let num =
-                        (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 - this.label[i].offsetWidth + 10) / 2;
-                    left = `${this.label[i].offsetLeft - num}px`;
-                } else {
-                    left = `${this.label[i].offsetLeft}px`;
-                }
-                doc.style.transition = ".3s";
-                doc.style.transform = `translateX(${left})`;
-            }
-        },
-    },
-};
-</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: calc(100% - 45px);
-}
-
-.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;
-}
-
-.textnone {
-    text-align: center;
-    margin-top: 30px;
-    color: #999;
-    font-size: 14px;
-}
-</style>