ui-process-h5 0.1.20 → 0.1.23

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;
 });
 

package/lib/design.js

@@ -1,163 +0,0 @@
-import { defineComponent as L, ref as p, watch as b, onMounted as $, openBlock as f, createElementBlock as r, createElementVNode as k, Fragment as _, renderList as m, normalizeClass as T, toDisplayString as g, createCommentVNode as d, withDirectives as W, renderSlot as y, vShow as C } from "vue";
-const A = L({
-  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(e) {
-    const u = p(""), i = p([
-      {
-        label: "基本信息",
-        key: "a",
-        type: "default",
-        slot: "default"
-      },
-      {
-        label: "流程图",
-        key: "b",
-        type: "default",
-        slot: "tab2"
-      },
-      {
-        label: "审批记录",
-        key: "c",
-        type: "default",
-        slot: "tab3"
-      }
-    ]), o = p([
-      {
-        label: "基本信息",
-        key: "a",
-        type: "default",
-        slot: "default"
-      },
-      {
-        label: "流程图",
-        key: "b",
-        type: "default",
-        slot: "tab2"
-      },
-      {
-        label: "审批记录",
-        key: "c",
-        type: "default",
-        slot: "tab3"
-      }
-    ]), s = p(), h = (t, n) => {
-      t !== u.value && (u.value = t, a(n));
-    }, a = (t) => {
-      if (s.value.length) {
-        let n = document.getElementsByClassName("bottom-line")[0], l;
-        if (n.offsetWidth < s.value[t].offsetWidth - 10) {
-          let c = (s.value[t].offsetWidth - n.offsetWidth - 10) / 2;
-          l = `${s.value[t].offsetLeft + c}px`;
-        } else if (n.offsetWidth > s.value[t].offsetWidth - 10) {
-          let c = (n.offsetWidth - s.value[t].offsetWidth + 10) / 2;
-          l = `${s.value[t].offsetLeft - c}px`;
-        } else
-          l = `${s.value[t].offsetLeft}px`;
-        n.style.transition = ".3s", n.style.transform = `translateX(${l})`;
-      }
-    };
-    return b(
-      () => e.selfTapList,
-      (t, n) => {
-        t.length && (o.value = [].concat(t), u.value = o.value[0].key);
-      },
-      {
-        //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
-        //那么首次执行，val为默认值,preVal为undefined
-        immediate: !0,
-        //这个参数代表监听对象时，可以监听深度嵌套的对象属性
-        deep: !0
-      }
-    ), b(
-      () => e.tapList,
-      (t, n) => {
-        e.selfTapList.length || (o.value = [].concat(i.value), t.length > 0 && t.forEach((l, c) => {
-          l.sort && l.sort > 1 ? o.value.splice(l.sort - 1, 0, l) : l.sort == 1 ? o.value.unshift(l) : o.value.push(l);
-        }), u.value = o.value[0].key);
-      },
-      {
-        //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
-        //那么首次执行，val为默认值,preVal为undefined
-        immediate: !0,
-        //这个参数代表监听对象时，可以监听深度嵌套的对象属性
-        deep: !0
-      }
-    ), $(() => {
-      a(0);
-    }), {
-      isTapList: o,
-      active: u,
-      handleActive: h,
-      label: s
-    };
-  }
-});
-const E = (e, u) => {
-  const i = e.__vccOpts || e;
-  for (const [o, s] of u)
-    i[o] = s;
-  return i;
-}, V = { class: "tops-tab" }, w = { class: "tops-tab-header" }, B = ["onClick"], N = {
-  key: 0,
-  class: "bottom-line"
-}, S = { class: "tops-tab-body" };
-function D(e, u, i, o, s, h) {
-  return f(), r("div", V, [
-    k("div", w, [
-      (f(!0), r(_, null, m(e.isTapList, (a, t) => (f(), r("div", {
-        class: T(["tops-tab-header-items", [a.key === e.active ? "active" : ""]]),
-        onClick: (n) => e.handleActive(a.key, t),
-        ref_for: !0,
-        ref: "label"
-      }, g(a.label), 11, B))), 256)),
-      e.isTapList.length ? (f(), r("div", N)) : d("", !0)
-    ]),
-    k("div", S, [
-      (f(!0), r(_, null, m(e.isTapList, (a) => W((f(), r("div", {
-        key: a.key,
-        style: { height: "100%" }
-      }, [
-        a.key === "a" && a.type === "default" ? y(e.$slots, "default", { key: 0 }, void 0, !0) : d("", !0),
-        a.key === "tab2" && a.type === "default" ? y(e.$slots, "default", { key: 1 }, void 0, !0) : d("", !0),
-        a.key === "tab3" && a.type === "default" ? y(e.$slots, "default", { key: 2 }, void 0, !0) : d("", !0),
-        a.type == "slot" ? y(e.$slots, a.slot, { key: 3 }, void 0, !0) : d("", !0)
-      ])), [
-        [C, e.active === a.key]
-      ])), 128))
-    ])
-  ]);
-}
-const v = /* @__PURE__ */ E(A, [["render", D], ["__scopeId", "data-v-a3457e59"]]);
-v.install = function(e) {
-  return e.component(v.name, v), e;
-};
-const z = [v], F = function(e) {
-  z.forEach((u) => {
-    e.use(u);
-  });
-}, M = {
-  install: F
-};
-export {
-  v as TopTab,
-  M as default
-};

package/lib/design.umd.cjs

@@ -1 +0,0 @@
-(function(d,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis<"u"?globalThis:d||self,e(d.Design={},d.Vue))})(this,function(d,e){"use strict";const y=e.defineComponent({name:"TopTab",props:{tapList:{type:Array,default:()=>[]},selfTapList:{type:Array,default:()=>[]}},setup(t){const i=e.ref(""),c=e.ref([{label:"基本信息",key:"a",type:"default",slot:"default"},{label:"流程图",key:"b",type:"default",slot:"tab2"},{label:"审批记录",key:"c",type:"default",slot:"tab3"}]),n=e.ref([{label:"基本信息",key:"a",type:"default",slot:"default"},{label:"流程图",key:"b",type:"default",slot:"tab2"},{label:"审批记录",key:"c",type:"default",slot:"tab3"}]),a=e.ref(),u=(l,r)=>{l!==i.value&&(i.value=l,o(r))},o=l=>{if(a.value.length){let r=document.getElementsByClassName("bottom-line")[0],s;if(r.offsetWidth<a.value[l].offsetWidth-10){let p=(a.value[l].offsetWidth-r.offsetWidth-10)/2;s=`${a.value[l].offsetLeft+p}px`}else if(r.offsetWidth>a.value[l].offsetWidth-10){let p=(r.offsetWidth-a.value[l].offsetWidth+10)/2;s=`${a.value[l].offsetLeft-p}px`}else s=`${a.value[l].offsetLeft}px`;r.style.transition=".3s",r.style.transform=`translateX(${s})`}};return e.watch(()=>t.selfTapList,(l,r)=>{l.length&&(n.value=[].concat(l),i.value=n.value[0].key)},{immediate:!0,deep:!0}),e.watch(()=>t.tapList,(l,r)=>{t.selfTapList.length||(n.value=[].concat(c.value),l.length>0&&l.forEach((s,p)=>{s.sort&&s.sort>1?n.value.splice(s.sort-1,0,s):s.sort==1?n.value.unshift(s):n.value.push(s)}),i.value=n.value[0].key)},{immediate:!0,deep:!0}),e.onMounted(()=>{o(0)}),{isTapList:n,active:i,handleActive:u,label:a}}}),$="",h=(t,i)=>{const c=t.__vccOpts||t;for(const[n,a]of i)c[n]=a;return c},k={class:"tops-tab"},m={class:"tops-tab-header"},b=["onClick"],_={key:0,class:"bottom-line"},T={class:"tops-tab-body"};function L(t,i,c,n,a,u){return e.openBlock(),e.createElementBlock("div",k,[e.createElementVNode("div",m,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.isTapList,(o,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["tops-tab-header-items",[o.key===t.active?"active":""]]),onClick:r=>t.handleActive(o.key,l),ref_for:!0,ref:"label"},e.toDisplayString(o.label),11,b))),256)),t.isTapList.length?(e.openBlock(),e.createElementBlock("div",_)):e.createCommentVNode("",!0)]),e.createElementVNode("div",T,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.isTapList,o=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:o.key,style:{height:"100%"}},[o.key==="a"&&o.type==="default"?e.renderSlot(t.$slots,"default",{key:0},void 0,!0):e.createCommentVNode("",!0),o.key==="tab2"&&o.type==="default"?e.renderSlot(t.$slots,"default",{key:1},void 0,!0):e.createCommentVNode("",!0),o.key==="tab3"&&o.type==="default"?e.renderSlot(t.$slots,"default",{key:2},void 0,!0):e.createCommentVNode("",!0),o.type=="slot"?e.renderSlot(t.$slots,o.slot,{key:3},void 0,!0):e.createCommentVNode("",!0)])),[[e.vShow,t.active===o.key]])),128))])])}const f=h(y,[["render",L],["__scopeId","data-v-a3457e59"]]);f.install=function(t){return t.component(f.name,f),t};const g=[f],B={install:function(t){g.forEach(i=>{t.use(i)})}};d.TopTab=f,d.default=B,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});