ui-process-h5 0.1.33 → 0.1.40

package/vite.config.ts

@@ -0,0 +1,78 @@
+import { defineConfig } from 'vite'
+import { createVuePlugin } from 'vite-plugin-vue2'
+import * as compiler from '@vue/compiler-sfc'
+import vue3 from '@vitejs/plugin-vue'
+import path from 'path'
+import { getLibDir } from './build/scripts/utils.mjs'
+import { isVue2, version } from 'vue-demi'
+import { baseConfig } from './src/assets/js/utils.js'
+import copy from 'rollup-plugin-copy'
+import relaxedUnit from 'postcss-relaxed-unit'
+console.log({ version })
+const resolve = (str) => {
+  return path.resolve(__dirname, str)
+}
+let isVueCode = 1
+if (version.startsWith('2.7.')) isVueCode = 2
+else if (version.startsWith('2.')) isVueCode = 1
+else isVueCode = 3
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': resolve('src'),
+      vue: isVueCode === 1 ? path.resolve('./node_modules/vue2')
+        : isVueCode === 2 ? path.resolve('./node_modules/vue2.7')
+          : path.resolve('./node_modules/vue3'),
+      '@vue/composition-api': resolve('./node_modules/@vue/composition-api')
+    }
+  },
+  build: {
+    lib: {
+      entry: resolve('./src/packages/index.js'),
+      name: 'ui-process-h5',
+      fileName: 'ui-process-h5'
+    },
+    cssTarget: 'chrome61',
+    rollupOptions: {
+      // external: ['vue-demi', 'vue'],
+      external: ['vue'],
+      output: {
+        dir: getLibDir(version),
+        globals: {
+          vue: 'Vue',
+          // 'vue-demi': 'VueDemi'
+        }
+      }
+    }
+  },
+  optimizeDeps: {
+    // exclude: ['vue-demi']
+  },
+  plugins: [
+    isVue2 ? createVuePlugin() : vue3({ compiler: compiler }),
+    copy({
+      targets: [
+        { src: './build/configure/*', dest: './ui-process-h5' },
+        { src: './build/scripts/*', dest: './ui-process-h5/scripts' },
+      ]
+    })
+  ],
+  css: {
+    postcss: {                          // 配置自定义组件插件
+      plugins: [
+        relaxedUnit({ rules: { rpx: "div(2).unit(px)" } }),
+      ]
+    }
+  },
+  server: {
+    proxy: {
+      [baseConfig.apiUrl]: {
+        target: process.env.domain || `http://59.53.91.231:2100`,
+        changeOrigin: true,
+        //rewrite: (path) => path.replace(/^\/api/, ""),
+      },
+    },
+  },
+})

package/packages/components/process/index.js

@@ -1,8 +0,0 @@
-import TopProcess from "./src/index.vue";
-
-TopProcess.install = function (app) {
-    // 组件注册，按需引入
-    app.component(TopProcess.name, TopProcess);
-    return app;
-};
-export default TopProcess;

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

@@ -1,55 +0,0 @@
-<template>
-    <div
-        class="top-button"
-        :style="`background-color:${style.bckColor};color:${style.textColor}`"
-    >
-        <slot></slot>
-    </div>
-</template>
-<script>
-import { defineComponent, ref, watch, computed, onMounted } from "vue-demi";
-export default defineComponent({
-    name: "TopButton",
-    props: {
-        type: { default: "default", type: String },
-    },
-    setup(props) {
-        const style = ref({
-            textColor: "#fff",
-            bckColor: "3c9cff",
-        });
-
-        switch (props.type) {
-            case "primary":
-                style.value.textColor = "#fff";
-                style.value.bckColor = "#3c9cff";
-                break;
-            case "danger":
-                style.value.textColor = "rgb(255, 96, 96)";
-                style.value.bckColor = "rgb(255, 230, 230)";
-                break;
-            case "default":
-                style.value.textColor = "rgb(51, 51, 51)";
-                style.value.bckColor = "rgb(241, 241, 241)";
-                break;
-        }
-
-        return {
-            style,
-        };
-    },
-});
-</script>
-<style scoped>
-.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;
-}
-</style>

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

@@ -1,447 +0,0 @@
-<template>
-    <div class="process-warp">
-        <div class="process-main" v-if="processStatus.status">
-            <div class="process-ml-item border">
-                <div class="process-mli-name">流程状态</div>
-                <div class="process-mli-value">
-                    <div
-                        class="process-mliv-dd"
-                        :style="{ background: getColor(processStatus.status) }"
-                        v-if="
-                            processStatus.status || processStatus.bizStatusName
-                        "
-                    >
-                        {{
-                            processStatus.bizStatusName
-                                ? processStatus.bizStatusName
-                                : processStatus.status
-                        }}
-                    </div>
-                </div>
-            </div>
-            <div class="process-ml-item border">
-                <div class="process-mli-name">流程发起时间</div>
-                <div class="process-mli-value">
-                    <span>{{ processStatus.createTime }}</span>
-                </div>
-            </div>
-
-            <div
-                class="process-ml-item"
-                v-if="
-                    processStatus.allUserNames &&
-                    processStatus.allUserNames.length
-                "
-            >
-                <div class="process-mli-name">审批节点</div>
-                <div class="process-mli-value">
-                    <span class="process-mliv-jd">{{
-                        `${
-                            processStatus.taskState == 4
-                                ? processStatus.currUserName
-                                : processStatus.allUserNames.toString()
-                        }审批中`
-                    }}</span>
-                </div>
-            </div>
-        </div>
-        <div class="process-card" :style="{ height: processCardHeight }">
-            <TopTab :tapList="tapList">
-                <template #default><slot></slot></template>
-            </TopTab>
-        </div>
-        <div class="process-foot" v-if="isAdditional">
-            <div class="footBtnRow">
-                <slot name="btn"></slot>
-            </div>
-        </div>
-        <div class="process-btn">
-            <template v-if="processStatus.status != '已完成'">
-                <template v-for="(item, index) in operBtn" :key="item.name">
-                    <TopButton
-                        v-if="index < 3"
-                        @click="handleTest"
-                        :type="item.btnProps.type.toString()"
-                    >
-                        {{ item.name }}
-                    </TopButton>
-                </template>
-            </template>
-            <div class="elips" v-if="operBtn.length > 3">
-                <div class="circle"></div>
-                <div class="circle"></div>
-                <div class="circle"></div>
-            </div>
-            <!--  <TopButton @click="handleTest">撤销</TopButton>
-            <TopButton @click="handleTest" type="danger">拒绝</TopButton>
-            <TopButton @click="handleTest" type="primary">同意</TopButton> -->
-        </div>
-    </div>
-    <TopPopup ref="TopPopup1" :cancel="handleCancel" :comfig="handleComfig">
-        csaasd1
-    </TopPopup>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, watch, computed } from "vue-demi";
-import TopTab from "./tab.vue";
-import TopPopup from "./popup.vue";
-import TopButton from "./button.vue";
-// import { getProcessStatus } from "../../utils/request/api";
-
-export default defineComponent({
-    name: "TopProcess",
-    components: {
-        TopTab,
-        TopPopup,
-        TopButton,
-    },
-    props: {
-        tapList: { require: false, default: () => [], type: Array },
-        processId: { require: true, default: "", type: String },
-        processDefId: { require: true, default: "", type: String },
-        taskId: { require: true, default: "", type: String },
-        isAdditional: { require: false, default: false, type: Boolean },
-        isView: { default: false, type: Boolean },
-        userId: { default: "", type: String}
-    },
-    setup(props) {
-        const processStatus = ref<any>({});
-
-        const TopPopup1 = ref<any>();
-
-        // 底部按钮
-        const taskNode = ref<any>([
-            {
-                taskId: "ecd82a93-4a62-42a7-b7bd-df38d2f1609a",
-                taskState: 1,
-                nodeId: "obj_026aac284c1a4303854f978b674be4b9",
-                customUniqueId: "",
-                nodeName: "部门负责人",
-            },
-        ]);
-
-        const taskObj = ref<any>({
-            id: "obj_026aac284c1a4303854f978b674be4b9",
-            name: "部门负责人",
-            no: "1",
-            buttons: [],
-            ccTaskButtonLabel: "",
-            ccTaskButtonAnnex: null,
-            completeButtonLabel: "同意",
-            completeButtonAnnex: null,
-            delegateTaskButtonLabel: "转办",
-            delegateTaskButtonAnnex: null,
-            printFormButtonLabel: "",
-            supplyUnusualTransferButtonLabel: "",
-            readingOfficeLabel: "",
-            readingOfficeButtonAnnex: null,
-            jointlySignLabel: "",
-            jointlySignButtonAnnex: null,
-            counterSignLabel: "加签",
-            counterSignButtonAnnex: null,
-            coordinationLabel: "",
-            coordinationButtonAnnex: null,
-            otherButtonAnnexList: null,
-            humanPerformer: {
-                id: "obj_2bd3494ae5c54309b7f2ea452921790b",
-                name: "任意指定",
-                resourceAssignmentExpressionModel: {
-                    formalExpression: "",
-                },
-            },
-            commentModels: [
-                {
-                    actionName: "提交",
-                    isDefault: true,
-                },
-                {
-                    actionName: "作废",
-                    isDefault: false,
-                },
-            ],
-            routeTxt: {
-                departmentIds: null,
-                companyIds: null,
-                teamList: null,
-                routeType: "DynamicUsers",
-            },
-            loopCardinality: 1,
-            isHistoryRoute: false,
-            participantList: null,
-            historyRoute: false,
-        });
-
-        watch(
-            () => props.processId,
-            (val, preVal) => {
-                if (val) {
-                    processStatus.value = {
-                        status: "审批中",
-                        createUid: "18ccbf63229f0c79f39940ae284c111e",
-                        createTopUserId: "128ec9c9b7f26135272596fe01c57690",
-                        createTime: "2023-04-20 15:01:48",
-                        currUserName: "朱鸿飞",
-                        allUserNames: ["朱鸿飞"],
-                        userNodeGroup: {
-                            分管领导: ["朱鸿飞"],
-                        },
-                        appId: "com.awspaas.user.apps.top.study.project",
-                        statusCode: "1",
-                        statusName: "审批中",
-                        bizStatusName: "审批中",
-                        taskState: 1,
-                    };
-                }
-            },
-            {
-                //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
-                //那么首次执行，val为默认值,preVal为undefined
-                immediate: true,
-                //这个参数代表监听对象时，可以监听深度嵌套的对象属性
-                deep: true,
-            }
-        );
-
-       /*  getProcessStatus({
-            processInstId: "4ac28800-7056-483b-8d38-a4932daf055b",
-        }).then((res) => {
-            console.log("res", res);
-        }); */
-
-        console.log("asd", taskNode.value[0].taskState);
-        /* copmuted */
-        // 按钮对象
-        const operBtn = computed<any>(() => {
-            let btnList = <any>[];
-            let flag =
-                taskNode.value &&
-                taskNode.value[0] &&
-                taskNode.value[0].taskState != 4;
-
-            if (flag && !props.isView && taskObj.value.completeButtonLabel) {
-                let obj = <any>{};
-                obj.name = taskObj.value.completeButtonLabel;
-                obj.btnProps = { type: "primary" };
-                btnList.push(obj);
-            }
-
-            if (flag && !props.isView && processStatus.value.currUserName) {
-                let obj = <any>{};
-                obj.name = "拒绝";
-                obj.btnProps = { type: "danger" };
-                btnList.push(obj);
-            }
-
-            if (
-                flag &&
-                !props.isView &&
-                taskObj.value.buttons &&
-                taskObj.value.buttons.length
-            ) {
-                taskObj.value.buttons.forEach((s: any) => {
-                    if (s.label === "退回") {
-                        let obj = <any>{};
-                        obj.name = s.label;
-                        obj.btnProps = { type: "danger" };
-                        btnList.push(obj);
-                    }
-                });
-            }
-
-            if (
-                flag &&
-                !props.isView &&
-                taskObj.value.delegateTaskButtonLabel
-            ) {
-                let obj = <any>{};
-                obj.name = taskObj.value.delegateTaskButtonLabel;
-                obj.btnProps = { type: "default" };
-                btnList.push(obj);
-            }
-            if (
-                props.processId &&
-                processStatus.value.createTopUserId == props.userId &&
-                taskNode.value[0]?.taskState != 2 &&
-                processStatus.value.status !== "已驳回" &&
-                processStatus.value.status !== "已撤销"
-            ) {
-                let obj = <any>{};
-                obj.name = "催办";
-                obj.btnProps = { type: "default" };
-                btnList.push(obj);
-            }
-            if (
-                props.processId &&
-                processStatus.value.createTopUserId == props.userId &&
-                taskNode.value[0]?.taskState != 2 &&
-                processStatus.value.status !== "已驳回" &&
-                processStatus.value.status !== "已撤销"
-            ) {
-                let obj = <any>{};
-                obj.name = "撤销";
-                obj.btnProps = { type: "default" };
-                btnList.push(obj);
-            }
-            if (flag && !props.isView && taskObj.value.counterSignLabel) {
-                let obj = <any>{};
-                obj.name = taskObj.value.counterSignLabel;
-                obj.btnProps = { type: "primary" };
-                btnList.push(obj);
-            }
-
-            return btnList;
-        });
-
-        //筛选
-        const actionBtn = computed(() => {
-            if (operBtn.value.length > 3) {
-                return operBtn.value.slice(3);
-            }
-            return [];
-        });
-
-        const handleCancel = () => {
-            console.log("handleCancel");
-        };
-
-        const handleComfig = () => {
-            console.log("handleComfig", "确定按钮");
-            TopPopup1.value.handleClose();
-        };
-
-        const processCardHeight = computed(() => {
-            /*   let num = 210;
-            if (
-                ProcessInsObj.value.end ||
-                !operBtn.value ||
-                operBtn.value?.length == 0
-            ) {
-                num -= 80;
-            }
-            if (!processStatus.value.status) num -= 140;
-            else if (!processStatus.value.currUserName) num -= 40; */
-            return `calc(100vh - ${205}px)`;
-        });
-
-        const handleTest = () => {
-            TopPopup1.value.handleOpen();
-        };
-
-        return {
-            processStatus,
-            processCardHeight,
-            handleTest,
-            TopPopup1,
-            handleCancel,
-            handleComfig,
-            operBtn,
-            actionBtn,
-        };
-    },
-    methods: {
-        getColor(status: string) {
-            if (status == "审核中") return "#FFA52D";
-            if (status == "已驳回") return "#F14B4C";
-            if (status == "已撤销") return "#CECECE";
-            if (status == "已完成") return "#6DC743";
-
-            return "#1389FF";
-        },
-    },
-});
-</script>
-
-<style scoped>
-.process-warp {
-    overflow: hidden;
-    height: 100vh;
-    width: 100%;
-    position: relative;
-    background-color: #f3f3f7;
-}
-.process-main {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-    align-items: center;
-    padding: 0 17px;
-    background: #fff;
-    margin: 0 0 10px 0;
-}
-
-.process-main .border {
-    border-bottom: #e8e8e8 1px solid;
-}
-
-.process-main .process-ml-item {
-    display: flex;
-    align-items: center;
-    font-size: 15px;
-    font-weight: 400;
-    width: 100%;
-    justify-content: space-between;
-    height: 44px;
-}
-
-.process-main .process-ml-item .process-mli-name {
-    color: #333333;
-}
-
-.process-main .process-ml-item .process-mli-value {
-    color: #888888;
-}
-
-.process-main .process-ml-item .process-mli-value .process-mliv-dd {
-    height: 26px;
-    min-width: 30px;
-    padding: 0 12px;
-    border-radius: 20px;
-    background: #1389ff;
-    color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 12px;
-}
-
-.process-main .process-ml-item .process-mli-value .process-mliv-jd {
-    color: #1389ff;
-}
-
-.process-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;
-}
-
-.process-btn .top-button,
-.process-btn .elips {
-    margin: 0 5px;
-}
-/* .process-btn .top-button:first-child{
-    margin-left: 0;
-} */
-
-.elips {
-    min-width: 60px;
-    height: 100%;
-    background-color: white;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.elips .circle {
-    width: 6px;
-    height: 6px;
-    margin: 0 2px;
-    background-color: #333333;
-    border-radius: 50%;
-}
-</style>