@ganwei-web/ganwei-pc-cli 6.2.0

package/ganwei-iotcenter-index-6.2.0/packages/ganwei-iotcenter-index/src/components/indexRightContent/headerRight/processDesign/ApprovalDialog.vue

@@ -0,0 +1,135 @@
+<template>
+    <el-dialog v-model="dialogBaseProcess" width="800" top="5vh" class="base-dialog-process-details"
+        :close-on-click-modal="false">
+        <div v-loading="loading" :element-loading-text="$tt('加载中') + '...'" class="dialogBaseProcess-container">
+            <iframe :src="dialogBaseProcessUrl" frameborder="0" class="dialogBaseProcess" id="dialogBaseProcess"
+                :class="loading ? 'displayNone' : ''"></iframe>
+        </div>
+    </el-dialog>
+</template>
+<script>
+export default {
+    name: 'ApprovalDialog',
+    data() {
+        return {
+            dialogBaseProcessUrl: '',
+            loading: true
+        }
+    },
+    props: {
+        visible: {  // 弹窗控制
+            type: Boolean,
+            default: false
+        },
+        btnLoading: {
+            type: Boolean,
+            default: false
+        },
+        item: {  // 当前操作行数据
+            type: Object,
+            default: () => ({})
+        },
+        state: {
+            type: Number,
+            default: 10
+        },
+        btcControl: {
+            type: Boolean,
+            default: false
+        }
+    },
+    inject: ['update:visible', 'close', 'approve', 'reject', 'initData'],
+    computed: {
+        dialogBaseProcess: {
+            get() {
+                return this.visible
+            },
+            set(val) {
+                this.$emit('update:visible', val)
+            }
+        }
+    },
+    mounted() {
+        this.loading = true
+        this.dialogBaseProcessUrl = this.$hostMap('ganwei-iotcenter-lowcodeformflow') + '/#/processDetails'
+        let _this = this
+        window.onmessage = (event) => {
+            console.log(event.data)
+            if (event.data.type === "processCode") {
+                switch (event.data.processCode) {
+                    case "close": _this.close(); break;
+                    case "approve": _this.approve(this.item); break;
+                    case "reject": _this.reject(this.item); break;
+                    case "initData": _this.initData(); break;
+                    default: break;
+                }
+            }
+        }
+        let messageContent = {
+            "dialogVisible": this.visible,
+            "currentItem": JSON.stringify(this.item),
+            "btcControl": this.btcControl
+        }
+        this.$nextTick(() => {
+            let dom = document.getElementById('dialogBaseProcess')
+            dom.onload = () => {
+                dom.contentWindow.postMessage(messageContent, "*")
+                this.loading = false
+            }
+        })
+    },
+    methods: {
+
+        /**
+         * 翻译函数
+         * 用于获取国际化文本，支持路由前缀
+         * @param {string} str - 需要翻译的文本键值
+         * @returns {string} 翻译后的文本
+         */
+        $tt(str) {
+            // 获取当前路由
+            const currentRoute = 'login';
+            // 尝试获取完整路径的翻译
+            let fullKey = currentRoute + '.' + str;
+            let result = this.$t(fullKey);
+            // 如果完整路径的翻译不存在，则使用原始key
+            return result === fullKey ? this.$t(str) : result;
+        },
+    }
+}
+</script>
+<style lang="scss">
+.base-dialog-process-details {
+    width: 100%;
+    height: 100%;
+    background: transparent;
+
+    .el-dialog__header {
+        display: none;
+    }
+
+    .el-dialog__body {
+        height: 100% !important;
+        overflow: hidden !important;
+    }
+
+    .dialogBaseProcess-container,
+    iframe {
+        width: 800px;
+        height: 660px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+
+        &>.el-loading-mask {
+            visibility: visible !important;
+        }
+    }
+
+    .displayNone {
+        display: none;
+    }
+
+}
+</style>

package/ganwei-iotcenter-index-6.2.0/packages/ganwei-iotcenter-index/src/components/indexRightContent/headerRight/processDesign/index.js

@@ -0,0 +1,327 @@
+
+import { mapState } from 'vuex';
+
+import ApprovalDialog from './ApprovalDialog.vue';
+export const approveStatus = {
+    "pass": 1, // 通过
+    "reject": 2, // 驳回
+    "transfer": 3, // 转办
+    "abandoned": 4, // 废弃
+    "revoke": 5 // 撤回
+}
+export default {
+    components: {
+        ApprovalDialog  // 引入审批对话框组件
+    },
+    data() {
+        return {
+            drawer: false, // 控制抽屉组件的显示状态
+            processDesignList: [], // 存储流程设计列表数据
+            processDesignLoading: false, // 控制流程设计加载状态
+            processDesignBtnLoading: '', // 控制流程设计按钮的加载状态
+            rejectLoading: "", // 拒绝审批的加载状态
+            agreeLoading: "", // 同意审批的加载状态
+            allAgreeLoading: false, // 全部同意的加载状态
+            totalMessage: window.totalMessage || 0, // 总消息数量
+            approvalDialogVisible: false, // 控制审批对话框的显示状态
+            currentItem: null, // 当前选中的项目
+            loadingMore: false, // 是否正在加载更多数据
+            noMoreData: false, // 是否没有更多数据
+            searchCriteria: {
+                searchText: '', // 搜索文本
+                pageNo: 1, // 当前页码
+                pageSize: 20, // 每页大小，减少以支持懒加载
+                userName: '' // 搜索名称
+            }
+        }
+    },
+    provide() {
+        return {
+            close: this.closeApprovalDialog,
+            reject: this.rejectApproval,
+            approve: this.agreeApproval,
+            initData: this.init
+        }
+    },
+    computed: {
+        ...mapState({
+            processesStatistics: state => state.processesStatistics, // 将 state.processesStatistics 映射为组件的计算属性 processesStatistics
+        })
+    },
+    watch: {
+        processesStatistics: {
+            handler(newVal) {
+                this.totalMessage = newVal
+                if (this.drawer) {
+                    this.init()
+                }
+            },
+            immediate: true
+        }
+    },
+    methods: {
+
+        /**
+         * 翻译函数
+         * 用于获取国际化文本，支持路由前缀
+         * @param {string} str - 需要翻译的文本键值
+         * @returns {string} 翻译后的文本
+         */
+        $tt(str) {
+            // 获取当前路由
+            const currentRoute = 'login';
+            // 尝试获取完整路径的翻译
+            let fullKey = currentRoute + '.' + str;
+            let result = this.$t(fullKey);
+            // 如果完整路径的翻译不存在，则使用原始key
+            return result === fullKey ? this.$t(str) : result;
+        },
+
+        /**
+         * 初始化方法
+         * 用于获取流程设计列表数据
+         * @param {boolean} reset - 是否重置页码和列表，默认为true
+         */
+        init(reset = true) {
+            if (reset) {
+                // 重置页码和列表
+                this.searchCriteria.pageNo = 1;
+                this.noMoreData = false;
+            }
+
+            // 构建请求数据
+            let data = this.searchCriteria
+
+            // 设置加载状态
+            if (reset) {
+                this.processDesignLoading = true;
+            } else {
+                this.loadingMore = true;
+            }
+
+            // 调用API获取审批列表
+            this.$api.getToDoMainList(data).then(rt => {
+                if (rt?.data?.code == 200) {
+                    const list = rt?.data?.data?.list || [];
+
+                    if (reset) {
+                        // 首次加载或刷新，直接替换列表
+                        this.processDesignList = list;
+                    } else {
+                        // 懒加载，追加到列表
+                        this.processDesignList = [...this.processDesignList, ...list];
+                    }
+
+                    this.totalMessage = rt?.data?.data?.totalCount || 0;
+
+                    // 如果返回的数据少于pageSize，说明没有更多数据了
+                    if (list.length < this.searchCriteria.pageSize) {
+                        this.noMoreData = true;
+                    }
+                }
+            })
+                .catch(e => {
+                    // 捕获并打印错误
+                    console.log(e)
+                }).finally((r) => {
+                    console.log(r)
+                    // 无论成功失败都会执行
+                    if (reset) {
+                        this.processDesignLoading = false;
+                    } else {
+                        this.loadingMore = false;
+                    }
+                })
+        },
+
+        /**
+         * 批量审批流程
+         * 对流程设计列表中的第一项进行批量审批操作
+         */
+        batchFlowAudit() {
+            let item = this.processDesignList.length > 0 ? this.processDesignList[0] : []
+            this.allAgreeLoading = true
+            let data =
+            {
+                "crtim": item.crtim
+            }
+            this.$api.batchFlowAudit(data).then(rt => {
+                if (rt?.data?.code == 200) {
+                    this.$message.success(rt?.data?.message)
+                } else {
+                    this.$message.warning(rt?.data?.message)
+                }
+            }).catch(e => {
+                console.log(e)
+            }).finally((r) => {
+                this.allAgreeLoading = false
+                this.init()
+                console.log(r)
+            })
+        },
+
+        /**
+         * 拒绝审批操作
+         * 对指定的审批项执行拒绝操作
+         * @param {Object} item - 需要拒绝的审批项
+         */
+        rejectApproval(item) {
+            this.rejectLoading = item.id
+            let data =
+            {
+                "id": item.id,
+                "approveStatus": approveStatus.reject,
+                "remark": "string",
+                "transferId": "string"
+            }
+            this.$api.FlowAudit(data).then(rt => {
+                if (rt?.data?.code == 200) {
+                    this.$message.success(rt?.data?.message)
+                } else {
+                    this.$message.warning(rt?.data?.message)
+                }
+            }).catch(e => {
+                console.log(e)
+            }).finally((r) => {
+                this.rejectLoading = ""
+                this.init()
+                console.log(r)
+            })
+        },
+
+        /**
+         * 同意审批的方法
+         * 对指定的审批项执行同意操作
+         * @param {Object} item - 需要审批的项目对象
+         */
+        agreeApproval(item) {
+            this.agreeLoading = item.id
+            let data =
+            {
+                "id": item.id,
+                "approveStatus": approveStatus.pass,
+                "remark": "",
+                "transferId": ""
+            }
+            this.$api.FlowAudit(data).then(rt => {
+                if (rt?.data?.code == 200) {
+                    this.$message.success(rt?.data?.message)
+                } else {
+                    this.$message.warning(rt?.data?.message)
+                }
+            }).catch(e => {
+                console.log(e)
+            }).finally((r) => {
+                this.agreeLoading = false
+                this.init()
+                console.log(r)
+            })
+        },
+
+        /**
+         * 数据处理方法
+         * 将processDesignList转换为API所需格式
+         * @return {Array} 处理后的数据数组
+         */
+        dataHandle() {
+            let arry = [], data = this.processDesignList
+            if (Array.isArray(data) && data.length > 0) {
+                // 遍历数据并格式化
+                data.forEach(item => {
+                    arry.push({
+                        pluginId: item?.id,
+                        pluginVersionId: item?.lastAssest?.id
+                    })
+                })
+            }
+            return arry
+        },
+
+        /**
+         * 打开抽屉组件
+         * 设置drawer为true并初始化数据
+         */
+        openElDrawer() {
+            this.drawer = true
+            this.init()
+        },
+
+        /**
+         * 格式化名称的方法
+         * 截取名称的第一个字符作为显示内容
+         * @param {string} name - 需要格式化的名称
+         * @returns {string} 格式化后的名称
+         */
+        formatName(name) {
+            return name.slice(0, 1);
+        },
+
+        /**
+         * 处理已完成操作
+         * 关闭抽屉并跳转到已办事宜页面
+         */
+        handleProcessed() {
+            this.drawer = false;  // 关闭抽屉
+            this.$router.push('/Index/jumpIframe/ganwei-iotcenter-lowcodeformflow/processed');  // 跳转到已办事宜页面
+        },
+
+        /**
+         * 显示审批详情弹窗
+         * 打开审批详情对话框并设置当前选中项
+         * @param {Object} item - 当前选中的审批项
+         */
+        showApprovalDetail(item) {
+            this.approvalDialogVisible = true;
+            this.currentItem = item;
+        },
+
+        /**
+         * 关闭审批详情弹窗
+         * 关闭对话框并清空当前选中项
+         */
+        closeApprovalDialog() {
+            this.approvalDialogVisible = false;
+            this.currentItem = null;
+        },
+
+        /**
+         * 处理滚动事件
+         * 检测是否滚动到底部，如果是则加载更多数据
+         */
+        handleScroll() {
+            // 如果正在加载或没有更多数据，则不处理
+            if (this.loadingMore || this.noMoreData) {
+                return;
+            }
+
+            const scrollContainer = this.$refs.scrollContainer;
+            if (!scrollContainer) return;
+
+            // 计算滚动位置
+            const scrollTop = scrollContainer.scrollTop;
+            const scrollHeight = scrollContainer.scrollHeight;
+            const clientHeight = scrollContainer.clientHeight;
+
+            // 当滚动到距离底部50px以内时，加载更多数据
+            if (scrollHeight - scrollTop - clientHeight < 50) {
+                this.loadMore();
+            }
+        },
+
+        /**
+         * 加载更多数据
+         * 增加页码并调用init方法加载下一页数据
+         */
+        loadMore() {
+            // 设置加载状态
+            this.loadingMore = true;
+
+            // 增加页码
+            this.searchCriteria.pageNo += 1;
+
+            // 调用init方法，传入false表示不清空现有数据
+            this.init(false);
+        }
+
+    }
+}

package/ganwei-iotcenter-index-6.2.0/packages/ganwei-iotcenter-index/src/components/indexRightContent/headerRight/processDesign/index.scss

@@ -0,0 +1,253 @@
+.processDesign {
+    >.processDesign-btn {
+        display: flex;
+        align-items: center;
+        font-size: 12px;
+        user-select: none;
+
+        i {
+            font-size: 28px;
+        }
+
+        >span {
+            color: var(--frame-main-color-2);
+        }
+
+        .el-badge .el-badge__content {
+            background-color: var(--gw-color-danger);
+            color: white;
+        }
+
+        .el-badge__content.is-fixed {
+            top: 3px;
+        }
+
+        .el-badge__content {
+            border-color: #ff0024;
+        }
+    }
+
+}
+
+.processDesign-drawer {
+    box-shadow: 0px 0px;
+
+    .el-drawer__header {
+        border-bottom: 1px solid var(--frame-main-border);
+        margin-bottom: 0;
+
+        .titleClass {
+            font-size: 18px;
+            text-align: left;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 10px 0;
+            color: var(--frame-main-color);
+
+            .titleClassLabel {
+                font-size: 14px !important;
+            }
+
+            label {
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 600;
+                margin-right: 10px;
+                font-size: 18px;
+                color: var(--frame-main-color);
+
+                i {
+                    font-size: 18px;
+                    margin-right: 10px;
+                }
+            }
+
+            a {
+                font-size: 18px;
+                height: 24px;
+                line-height: 24px;
+                text-decoration: none;
+                text-align: center;
+                margin-right: 10px;
+                color: var(--button-primary-color);
+            }
+        }
+    }
+
+
+    .el-drawer__body {
+        overflow: hidden;
+        padding: 0;
+
+        .el-modal-dialog .el-overlay-dialog {
+            overflow: hidden;
+        }
+
+        .processDesign-item {
+            height: calc(100% - 46px);
+            overflow-y: auto;
+            padding: 20px;
+            position: relative;
+
+            li {
+                height: 158px;
+                border-radius: 4px;
+                padding: 14px;
+                background-color: var(--frame-main-background-4);
+                margin-bottom: 10px;
+
+                h4 {
+                    height: 38px;
+                    line-height: 38px;
+                    font-size: 14px;
+                    text-align: left;
+
+                    label {
+                        color: var(--button-primary-color);
+                        font-family: PingFangSC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 14px;
+                    }
+                }
+
+                .bodySection {
+                    height: calc(100% - 68px);
+                    padding-top: 4px;
+
+                    >span {
+                        margin-bottom: 8px;
+
+                        label,
+                        b {
+                            font-size: 14px;
+                            color: var(--frame-main-color);
+                            font-weight: 500;
+                        }
+
+                        label {
+                            display: inline-block;
+                            max-width: 80px;
+                            text-overflow: ellipsis;
+                            padding-right: 10px;
+                            white-space: nowrap;
+                            overflow: hidden;
+                        }
+
+                        display: flex;
+                        text-align: left;
+                        line-height: 20px;
+                        white-space: break-spaces;
+                    }
+                }
+
+                .footer {
+                    display: block;
+                    text-align: right;
+
+                    .el-button {
+                        width: 84px;
+                        height: 30px;
+                        border-radius: 2px;
+                        border: 1px solid var(--button-primary-color) !important;
+                        margin-left: 10px;
+
+                        span {
+                            font-size: 12px;
+                        }
+                    }
+
+                }
+            }
+
+            .loading-more {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                padding: 15px;
+                color: var(--frame-main-color);
+
+                .el-icon {
+                    margin-right: 8px;
+                    font-size: 16px;
+                }
+            }
+
+            .no-more-data {
+                text-align: center;
+                padding: 15px;
+                color: var(--frame-main-color);
+                font-size: 14px;
+            }
+        }
+
+        .el-button {
+            padding: 0;
+            text-align: center;
+            margin-left: 0;
+            margin-right: 4px;
+            overflow: hidden;
+            border: unset !important;
+            position: relative;
+
+            &.is-loading {
+                cursor: pointer;
+
+                &::before {
+                    background: linear-gradient(270deg, var(--gw-color-primary5) 0%, var(--gw-color-primary4) 3%, var(--gw-color-primary) 100%);
+                    box-shadow: 0px 6px 10px 0px rgba(38, 105, 236, 0.18);
+                    animation: installing 1s ease-in-out infinite;
+                }
+
+                .el-icon-loading {
+                    display: none;
+                }
+            }
+        }
+    }
+
+
+    .footer {
+        .el-button {
+            width: 100%;
+            height: 46px;
+            border-radius: 0;
+
+            &.is-loading {
+                cursor: pointer;
+
+                &::before {
+                    background: linear-gradient(270deg, var(--gw-color-primary5) 0%, var(--gw-color-primary4) 3%, var(--gw-color-primary) 100%);
+                    box-shadow: 0px 6px 10px 0px rgba(38, 105, 236, 0.18);
+                    animation: installing 1s ease-in-out infinite;
+                }
+
+                .el-icon-loading {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    .el-dialog {
+        .el-dialog__header {
+            padding: 0;
+        }
+    }
+
+    @keyframes installing {
+        from {
+            width: 0%;
+        }
+
+        50% {
+            opacity: 1;
+        }
+
+        to {
+            width: 100%;
+            opacity: 0.1;
+        }
+    }
+
+
+}