ui-process-h5 2.0.7-beta → 2.1.0-beta

package/src/packages/submitPopup/index.scss

@@ -0,0 +1,190 @@
+.textnone {
+    text-align: center;
+    margin-top: 30px;
+    color: #999;
+    font-size: 14px;
+}
+
+.viewTrack {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    color: #1389ff;
+}
+
+.person-views .views-items {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 22px 20px;
+    box-sizing: border-box;
+    position: relative;
+
+    &::after {
+        content: "";
+        position: absolute;
+        border-top-width: 0;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background-color: #eee;
+    }
+}
+
+.person-views .views-items-set {
+    width: 50%;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    color: #1389ff;
+}
+
+.person-views .views-items-set-btn {
+    color: #1389ff;
+    margin-left: 10px;
+    min-width: 30px;
+}
+
+.person-views .views-items-name {
+    width: 50%;
+    color: #333;
+}
+
+.person-views .views-items-name--re {
+    color: #ee0000;
+}
+
+.person-views-white {
+    text-align: center;
+}
+
+.person-btn {
+    display: flex;
+    min-height: 60px;
+    padding-top: 5px;
+    background: #fff;
+    border-top: 1px solid #dddddf9e;
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row-reverse;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+}
+
+.person-btn .top-button {
+    width: 100%;
+    border-radius: 20px;
+    height: 36px;
+    background-color: #3c9cff;
+    color: #fff;
+    font-size: 14px;
+    justify-content: center;
+    display: flex;
+    align-items: center;
+    margin: 0 5px;
+}
+
+::v-deep .departPerson-main {
+    width: 100% !important;
+    height: 100% !important;
+}
+
+::v-deep .top-popup {
+    padding: 0;
+    background-color: #f8f8f8;
+}
+
+::v-deep .top-popup-header {
+    border-radius: 20px 20px 0 0;
+    padding: 10px 20px;
+}
+
+.sumbmitPopup-select {
+    padding: 0 20px;
+    background: #fff;
+    &-checked {
+        position: relative;
+        z-index: 80;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 22px 0;
+
+        &-title {
+            color: #333;
+        }
+
+        &-node {
+            color: #565959;
+            position: relative;
+            padding-right: 18px;
+
+            &::after {
+                content: "";
+                height: 6px;
+                width: 6px;
+                border-color: #999999;
+                border-style: solid;
+                position: absolute;
+                border-width: 1px 1px 0 0;
+                transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
+                right: 0;
+                top: calc(50% - 3px);
+            }
+        }
+
+        &::after {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 1px;
+            background-color: #eee;
+        }
+    }
+
+    &-viewTrack {
+        padding: 22px 0;
+
+        .viewTrack {
+            padding: 0;
+            height: auto;
+
+            img {
+                width: 16px;
+                height: 16px;
+                margin-right: 8px;
+            }
+        }
+    }
+}
+
+.person-views {
+    margin-top: 16px;
+    background-color: #fff;
+
+    &-title {
+        padding: 8px 20px;
+        font-size: 12px;
+        color: #333333;
+        position: relative;
+    }
+}
+
+.sumbmitPopup-select-checked-node--noafter {
+    &::after {
+        display: none;
+    }
+}

package/src/packages/submitPopup/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="sumbmitPopup-index-sumbit">
+    <div class="top-popup"></div>
+    <TopPopup v-bind:visible="show" v-on:update:visible="
+                (val) => ((show = val), $emit('update:visible', val))
+            " ref="TopPopup" titleText="送审" :isIndex="99" :className="`sumbmitPopup-index`" comfigText="送审" :comfig="handleSumbit">
+      <TopDownSelect isSlots :option="option" @change="handleChange" :defaultValue="selectDefaultValue" ref="TopDownSelect" :disibled="resubmit">
+        <template v-slot:header="data">
+          <!--  <div>123{{ data.data }}</div> -->
+          <div class="sumbmitPopup-select">
+            <div class="sumbmitPopup-select-checked" @click="handleSelect">
+              <div class="sumbmitPopup-select-checked-title">
+                当前流程
+              </div>
+              <div class="sumbmitPopup-select-checked-node" :class="resubmit ? 'sumbmitPopup-select-checked-node--noafter' : ''">
+                {{
+                                    data.data.name
+                                        ? data.data.name
+                                        : data.data.placeholder
+                                }}
+              </div>
+            </div>
+            <div class="sumbmitPopup-select-viewTrack">
+              <div class="viewTrack" v-if="checkedItem.id" @click="taskurlshow = true">
+                <img :src="ProcessImg" /> 查看流程图
+              </div>
+            </div>
+          </div>
+        </template>
+      </TopDownSelect>
+
+      <div class="person-views" v-if="firstPerson && firstPerson.length">
+        <div class="person-views-title">下一步处理节点</div>
+        <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-if="v.routeTxt && v.routeTxt.userNames">
+              {{ v.routeTxt.userNames }}
+            </div>
+            <div v-if="
+                                v.humanPerformerName == '固定账户' ||
+                                v.humanPerformerName == '与流程申请人相关'
+                            "></div>
+            <div class="views-items-set-btn" @click="handleOpenPerson(v)" v-else>
+              设置
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="person-views" v-if="personList && personList.length">
+        <div class="person-views-title">其他处理节点</div>
+        <div class="views-items" v-for="(v, i) in personList">
+          <div class="views-items-name">
+            {{ v.name }}
+          </div>
+          <div class="views-items-set">
+            <div class="views-items-set-btn" @click="handleOpenPerson(v)">
+              设置
+            </div>
+            <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>
+        </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">
+      <div style="height: 100%;">
+        <departPerson :isTitle="false" v-if="visiblePerson" :visible.sync="visiblePerson" v-bind="entity" @callback="handleCallback" @cancel="handleCancel">
+        </departPerson>
+      </div>
+    </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,236 @@
+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: "b",
+                },
+                {
+                    label: "审批记录",
+                    key: "c",
+                    type: "default",
+                    slot: "c",
+                },
+            ],
+            // 弹窗操作
+            isTapList: [
+                {
+                    label: "基本信息",
+                    key: "a",
+                    type: "default",
+                    slot: "default",
+                },
+                {
+                    label: "流程图",
+                    key: "b",
+                    type: "default",
+                    slot: "b",
+                },
+                {
+                    label: "审批记录",
+                    key: "c",
+                    type: "default",
+                    slot: "c",
+                },
+            ],
+            // 绑定tab块
+            label: document.getElementsByClassName("tops-tab-header-items"),
+
+            // 侧边弹窗
+            visible: false,
+            inList: [],
+            visibleTack: false,
+            trackListss: [],
+        };
+    },
+    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) {
+                    // console.log("流程图:::", val);
+                    this.trackUrl = val;
+                    if (window.location.protocol == "https:") {
+                        this.trackUrl = this.trackUrl.replace(
+                            "http://59.53.91.230:8088/",
+                            "https://kq.ddzg.cn:8093/"
+                        );
+                        this.trackUrl = this.trackUrl.replace(
+                            "http://59.53.91.231:8088/",
+                            "https://qt.ddzg.cn:2119/"
+                        );
+                        this.trackUrl = this.trackUrl.replace(
+                            "http://121.40.143.183:80/",
+                            "https://www.ddzg.cn:2119/"
+                        );
+                        this.trackUrl = this.trackUrl.replace(
+                            "http://121.40.143.183/",
+                            "https://www.ddzg.cn:2119/"
+                        );
+                    }
+                }
+            },
+            immediate: true,
+            deep: true,
+        },
+        // 审批记录列表
+        taskComment: {
+            handler(val, preVal) {
+                if (val) {
+                    this.taskCommentList = val;
+                }
+            },
+            immediate: true,
+            deep: true,
+        },
+        trackList: {
+            handler(val, preVal) {
+                if (val) {
+                    this.trackListss = 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;
+        },
+    },
+});