ui-process-h5 0.1.20 → 0.1.22

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

@@ -18,7 +18,7 @@
                 v-for="item in isTapList"
                 :key="item.key"
                 v-show="active === item.key"
-                style="height: 100%;"
+                style="height: calc(100% - 45px);"
             >
                 <!--  :taskNode="getTaskNode()" -->
                 <slot
@@ -26,13 +26,66 @@
                     name="default"
                 ></slot>
                 <slot
-                    v-if="item.key === 'tab2' && item.type === 'default'"
-                    name="default"
-                ></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 === 'tab3' && item.type === 'default'"
-                    name="default"
-                ></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>
@@ -40,7 +93,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watch, onMounted } from "vue";
+import { defineComponent, ref, watch, onMounted, computed } from "vue-demi";
+// import { getProcessStatus } from "../../utils/request/api";
+
 export default defineComponent({
     name: "TopTab",
     props: {
@@ -63,6 +118,30 @@ export default defineComponent({
         },
     },
     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>("");
 
@@ -113,6 +192,7 @@ export default defineComponent({
 
         // taskNode taskObj
 
+        /* method */
         // 选中方法
         const handleActive = (e: string, i: number) => {
             if (e === active.value) {
@@ -145,11 +225,7 @@ export default defineComponent({
             }
         };
 
-        /*  const getTaskNode = () => {
-            return taskNode.value.filter((o) => {
-                return o.nodeId == taskObj.value.id;
-            });
-        }; */
+        /* watch */
         watch(
             () => props.selfTapList,
             (val, preVal) => {
@@ -196,6 +272,7 @@ export default defineComponent({
             }
         );
 
+        /* mounted */
         onMounted(() => {
             // 渲染后初始化为第一个位置
             tabAnimation(0);
@@ -206,6 +283,8 @@ export default defineComponent({
             active,
             handleActive,
             label,
+            taskCommentList,
+            trackUrl,
         };
     },
 });
@@ -219,10 +298,9 @@ export default defineComponent({
     display: flex;
     width: 100%;
     height: 45px;
-    justify-content: space-between;
     font-size: 14px;
     color: #333;
-    padding: 0 10px;
+    padding: 10px 17px;
     font-weight: 500;
     box-sizing: border-box;
     overflow-x: auto;
@@ -231,6 +309,7 @@ export default defineComponent({
     flex-shrink: 0;
     -ms-overflow-style: none;
     position: relative;
+    background-color: #fff;
 }
 
 .tops-tab-header::after {
@@ -241,6 +320,7 @@ export default defineComponent({
     background-color: #f2f2f2;
     left: 0;
     bottom: 0;
+    z-index: 10;
 }
 
 .tops-tab-header::-webkit-scrollbar {
@@ -263,13 +343,10 @@ export default defineComponent({
     align-items: center;
 }
 
-.tops-tab-header-items :last-child {
+.tops-tab-header-items:last-child {
     padding-right: 0;
     margin-right: 0;
 }
-.tops-tab-header-items :last-child::after {
-    left: calc(50% - 17px);
-}
 
 .tops-tab-header .active {
     position: relative;
@@ -286,11 +363,105 @@ export default defineComponent({
     border-radius: 1.5px;
     background-color: #1389ff;
     position: absolute;
-    bottom: 0;
+    bottom: 1px;
     left: 0;
+    z-index: 12;
 }
 .tops-tab-body {
     height: 100%;
-    padding: 0 10px;
+}
+
+.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/packages/components/{theme → utils}/request/api.ts

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

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

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