vue-vben-admin/src/components/ProcessDesigner/package/penal/exclusiveGateway/index.vue

<template>
    <div class="user-task">
        <a-form ref="formRef" :rules="rules" :model="node" labelAlign="left" :label-col="labelCol"
            :wrapper-col="wrapperCol" :disabled="data.componentDisabled">
            <a-form-item label="节点标识">
                <a-input v-model:value="node.id" placeholder="请输入" readonly />
            </a-form-item>
            <a-alert message="排他网关说明"
                description="排他网关不会等待所有分支汇入才往下执行，只要有分支汇入就会往下执行，出口分支只会执行一条（条件为true，如果多条出口分支条件为true也执行一条）" type="info"
                show-icon />
            <a-space>
                <a-radio-group>
                    <a-radio-button value="1" @click="handleFormulaClick">公式</a-radio-button>
                    <a-radio-button value="2" @click="handleSQlClick">sql语句</a-radio-button>
                </a-radio-group>
                <a-button danger :size="size" @click="handleClearClick">清空</a-button>
            </a-space>
            <a-table :columns="data.columns" :data-source="node.conditions" bordered :pagination="false">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="['name', 'type'].includes(column.dataIndex)">
                        <div>
                            {{ text }}
                        </div>
                    </template>
                    <template v-else-if="column.dataIndex === 'operation'">
                        <a-button>编辑</a-button>
                        <a-button danger @click='onDelete(record.name,false)'>删除</a-button>
                    </template>
                </template>
            </a-table>
        </a-form>
        <a-modal width="40%" v-model:open="data.formulaVisible" title="添加公式条件" @ok="handleFormulaOk">
            <conditionFormula ref="conditionFormulaRef"></conditionFormula>
        </a-modal>
        <a-modal width="40%" v-model:open="data.sqlVisible" title="添加sql条件" @ok="handleSqlOk">
            <conditionSql ref="conditionSqlRef"></conditionSql>
        </a-modal>
    </div>
</template>

<script lang="ts" setup>
    import conditionFormula from './src/conditionFormula.vue'
    import conditionSql from './src/conditionSql.vue'
    import { getDetail } from '@/api/sys/WFSchemeInfo'
    import { reactive, ref, onMounted, nextTick, unref, h, watch, defineProps } from 'vue';
    const labelCol = { span: 7 };
    const wrapperCol = { span: 17 };
    const conditionFormulaRef = ref < any > ()
    const conditionSqlRef = ref < any > ()
    const props = defineProps({
        element: Object,
        schemeCode: String,
        pageType: String,
        pageView: String,
    })
    const node = ref({
        conditions: [],
        id: ''
    })
    watch(
        () => props.element,
        (newVal, oldVal) => {
            console.log(newVal)
            if (newVal.type == "bpmn:ExclusiveGateway") {
                node.value.id = newVal.id
                node.value.type = newVal.type
                if (props.pageType == 'detail') {
                    getNode()
                }
                if (props.schemeCode) {
                    getDetailInfo()
                }
            }
        }
    )

    const data = reactive({
        tableBtns: [
            { prop: 'Edit', label: '编辑' },
            { prop: 'Delete', label: '删除' }
        ],
        columns: [
            { title: '类型', dataIndex: 'type' },
            { title: '名称', dataIndex: 'name' },
        ],
        tableData: [],

        formulaVisible: false,
        sqlVisible: false,

        editRow: null,
        rowIndex: 0,
    componentDisabled: props.pageType == 'detail' ? true : false

    })
    function getNode() {
        var content = JSON.parse(props.pageView)
        content.wfData.forEach(element => {
            if (element.id == node.value.id) {
                node.value = element
            }
        });
    }
    async function getDetailInfo() {
        let data = await getDetail({ code: props.schemeCode })
        let scheme = JSON.parse(data.scheme.content);
        let wfData = scheme.wfData
        wfData.forEach(element => {
            if (element.id == node.value.id) {
                node.value = element
            }
        });

    }
    onMounted(() => {
        if (props.schemeCode) {
            getDetailInfo()
        }
        if (props.pageType == 'detail') {
            getNode()
        }
    })
    function typeFormat(type) {
        switch (type) {
            case '1':
                return '表达式'
            case '2':
                return 'sql语句'
        }
    }

    function handleFormulaClick() {
        data.formulaVisible = true;
    }
    function handleSQlClick() {
        data.sqlVisible = true;
    }
    function handleClearClick() {
        node.conditions = [];
    }
    async function handleFormulaOk() {
        conditionFormulaRef.value.validateForm()
        let obj = conditionFormulaRef.value.getForm()
        if (obj.name == '' || obj.dbCode == '' || obj.sql == '') {
            data.formulaVisible = true;
        }else{
            data.formulaVisible = false;
        }

    }
    function handleSqlOk() {
        console.log(conditionSqlRef.value.getForm())
        // this.sqlVisible = false;
        conditionSqlRef.value.validateForm()
        let obj = conditionSqlRef.value.getForm()
        if (obj.name == '' || obj.table == '' || obj.value == '' || obj.rfield == '' || obj.cfield == '' || obj.compareType == '') {
            data.formulaVisible = true;
        }else{
            data.formulaVisible = false;
        }
    }
    function getForm() {
        return node.value
    }
    defineExpose({
        getForm
    })
</script>

<style scoped>
    ::v-deep .ant-alert-info {
        margin-bottom: 20px;
    }

    ::v-deep .ant-table-wrapper {
        margin-top: 20px;
    }
</style>