ui-process-h5 0.1.20 → 0.1.23

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

@@ -0,0 +1,439 @@
+<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"
+                    >
+                        {{ 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";
+import TopPopup from "../../popup";
+import TopButton from "../../button";
+
+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 },
+    },
+    setup(props: any) {
+        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,
+            }
+        );
+
+        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>