ui-process-h5 0.1.36 → 0.1.40

package/src/packages/submitPopup/index.vue

@@ -0,0 +1,138 @@
+<template>
+    <div>
+        <TopPopup
+            v-bind:visible="show"
+            v-on:update:visible="
+                (val) => ((show = val), $emit('update:visible', val))
+            "
+            ref="TopPopup"
+            titleText="送审"
+            isDrawer
+            :isIndex="99"
+        >
+            <TopDownSelect
+                :option="option"
+                @change="handleChange"
+            ></TopDownSelect>
+            <div class="viewTrack" @click="taskurlshow = true">查看流程图</div>
+            <div class="person-views" v-if="firstPerson && firstPerson.length">
+                <div class="views-items" v-for="(v, i) in firstPerson">
+                    <div class="views-items-name">
+                        {{ v.name }}
+                        <span class="views-items-name--re"
+                            >*</span
+                        >
+                    </div>
+                    <div class="views-items-set">
+                        <div v-if="partNode[v.id] && partNode[v.id].length">
+                            <span v-for="(name, index) in partNode[v.id]">
+                                {{
+                                    index >= 3
+                                        ? ""
+                                        : index == 0
+                                        ? name
+                                        : `,${name}`
+                                }}
+                            </span>
+                            <span v-if="partNode[v.id].length > 3"
+                                >...等{{ partNode[v.id].length }}人</span
+                            >
+                        </div>
+                        <div v-else></div>
+                        <div
+                            class="views-items-set-btn"
+                            @click="handleOpenPerson(v)"
+                        >
+                            设置
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="person-views" v-if="personList && personList.length">
+                <div class="views-items" v-for="(v, i) in personList">
+                    <div class="views-items-name">
+                        {{ v.name }}
+                    </div>
+                    <div class="views-items-set">
+                        <div v-if="partNode[v.id] && partNode[v.id].length">
+                            <span v-for="(name, index) in partNode[v.id]">
+                                {{
+                                    index >= 3
+                                        ? ""
+                                        : index == 0
+                                        ? name
+                                        : `,${name}`
+                                }}
+                            </span>
+                            <span v-if="partNode[v.id].length > 3"
+                                >...等{{ partNode[v.id].length }}人</span
+                            >
+                        </div>
+                        <div v-else></div>
+                        <div
+                            class="views-items-set-btn"
+                            @click="handleOpenPerson(v)"
+                        >
+                            设置
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div
+                class="person-views-white"
+                v-if="
+                    !firstPerson &&
+                    !firstPerson.length &&
+                    !personList &&
+                    !personList.length
+                "
+            >
+                无需设置
+            </div>
+            <div class="person-btn">
+                <div
+                    class="top-button"
+                    style="background-color: #3c9cff; color: #fff;"
+                    @click="handleSumbit"
+                >
+                    送审
+                </div>
+            </div>
+        </TopPopup>
+        <TopPopup
+            v-bind:visible="visiblePerson"
+            v-on:update:visible="(val) => (visiblePerson = val)"
+            ref="TopPopup"
+            titleText="选人"
+            :isDrawer="true"
+            :isIndex="199"
+        >
+            <departPerson
+                :visible.sync="visiblePerson"
+                v-bind="entity"
+                @callback="handleCallback"
+                @cancel="handleCancel"
+            >
+            </departPerson>
+        </TopPopup>
+        <PreviewImage
+            :images="trackUrl"
+            v-bind:visible="taskurlshow"
+            v-on:update:visible="(val) => (taskurlshow = val)"
+            :indexd="0"
+            :isOne="true"
+            :isStyle="isStyle"
+        >
+        </PreviewImage>
+        <TopTips
+            ref="topTips"
+            :text="textTips"
+            :statusTips="statusTips"
+            :type="typeTips"
+        />
+    </div>
+</template>
+<script src="./index.js"></script>
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

package/src/packages/tab/index.js

@@ -0,0 +1,207 @@
+import { defineComponent } from "vue-demi";
+import TopPopup from "../popup/index.vue";
+import ViewAttchList from "../viewAttchList/index.vue";
+
+export default defineComponent({
+    name: "TopTab",
+    components: {
+        TopPopup,
+        ViewAttchList,
+    },
+    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: () => [],
+        },
+        // 流程图url
+        track: {
+            type: String,
+            default: "",
+        },
+        // 审批记录列表
+        taskComment: {
+            type: Array,
+            default: () => [],
+        },
+        // 流程信息列表
+        trackList: {
+            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"),
+
+            // 侧边弹窗
+            visible: false,
+            inList: [],
+            visibleTack: false,
+        };
+    },
+    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})`;
+            }
+        },
+        // 附件列表
+        viewList(val) {
+            this.visible = true;
+            this.inList = val;
+        },
+    },
+});

package/src/packages/tab/index.scss

@@ -0,0 +1,176 @@
+.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;
+}
+
+.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;
+}
+.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: 15px;
+}
+
+.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 span:last-child {
+    max-width: 144px;
+    /* overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis; */
+    color: #888;
+}
+
+.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;
+}
+
+.tops-tab-body-taskcommentlist{
+    overflow-y: auto;
+}

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>
+                <slot
+                    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>
+                </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"
+                                    @click="viewList(item.metaAnnexList)"
+                                >
+                                    <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>
+        <TopPopup
+            v-bind:visible="visible"
+            v-on:update:visible="(val) => (visible = val)"
+            ref="TopPopup"
+            titleText="附件列表"
+            isDrawer
+        >
+            <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="trackList && trackList.length">
+                <div
+                    v-for="(item, index) in trackList"
+                    :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>