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

<template>
    <div class="shceme-info">
        <a-form ref="formRef" :rules="rules" :model="formState" labelAlign="left" :label-col="labelCol"
            :wrapper-col="wrapperCol" :disabled="data.componentDisabled">
            <template v-if="!data.componentDisabled">
                <a-form-item label="模板编号" name="code">
                    <a-input v-model:value="formState.code" placeholder="请输入" />
                </a-form-item>
                <a-form-item label="模板名称" name="name">
                    <a-input v-model:value="formState.name" placeholder="请输入" />
                </a-form-item>
                <a-form-item label="模板图标" name="icon">
                    <IconPicker v-model:value="formState.icon" />
                </a-form-item>
                <a-form-item label="图标颜色" name="color">
                    <a-input type="color" v-model="formState.color" placeholder="请输入"></a-input>
                </a-form-item>
                <a-form-item label="模板分类" name="category">
                    <a-select v-model:value="formState.category" placeholder="请选择" :options="data.optionsType"
                        :field-names="{ label: 'itemName', value: 'itemValue' }">
                    </a-select>
                </a-form-item>
                <a-form-item label="我的任务创建">
                    <a-radio-group v-model:value="formState.mark" name="radioGroup">
                        <a-radio v-for="item in data.optionsNotOrOk" :value="item.value">{{item.label}}</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="移动端创建">
                    <a-radio-group v-model:value="formState.isInApp" name="radioGroup">
                        <a-radio v-for="item in data.optionsNotOrOk" :value="item.value">{{item.label}}</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-textarea v-model:value="formState.description" placeholder="请填写备注"
                    :auto-size="{ minRows: 5, maxRows: 8 }" />
            </template>
            <a-divider plain="true">撤销操作</a-divider>
            <a-tabs v-model:activeKey="formState.undoType" type="card" size="small" centered="true">
                <a-tab-pane key="1" tab="执行SQL">
                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                        <a-space-compact block>
                            <a-select v-model:value="formState.undoDbCode" placeholder="请选择执行SQL数据库" :options="sqlOptions"
                            :field-names="{ label: 'text', value: 'id',options :'childNodes' }">
                            </a-select>
                        </a-space-compact>
                        <a-space-compact block>
                            <a-textarea v-model:value="formState.undoDbSQL"
                                placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门"
                                :auto-size="{ minRows: 5, maxRows: 8 }" />
                        </a-space-compact>
                    </a-space>
                </a-tab-pane>
                <a-tab-pane key="2" tab=".NET方法">
                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                        <a-space-compact block>
                            <a-textarea v-model:value="formState.undoIOCName" placeholder="请填写.NET方法IOC别名"
                                :auto-size="{ minRows: 5, maxRows: 8 }" />
                        </a-space-compact>
                    </a-space>
                </a-tab-pane>
                <a-tab-pane key="3" tab="第三方接口">
                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                        <a-space-compact block>
                            <a-textarea v-model:value="formState.undoUrl"
                                placeholder="请填写第三方接口地址(POST),JSON 格式,参数有 userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门"
                                :auto-size="{ minRows: 5, maxRows: 8 }" />
                        </a-space-compact>
                    </a-space>
                </a-tab-pane>
            </a-tabs>

            <a-divider plain="true">作废操作</a-divider>
            <a-tabs v-model:activeKey="formState.deleteType" type="card" size="small" centered="true">
                <a-tab-pane key="1" tab="执行SQL">
                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                        <a-space-compact block>
                            <a-select v-model:value="formState.deleteDbCode" placeholder="请选择执行SQL数据库" :options="sqlOptions"
                            :field-names="{ label: 'text', value: 'id',options :'childNodes' }">
                            </a-select>
                        </a-space-compact>
                        <a-space-compact block>
                            <a-textarea v-model:value="formState.deleteDbSQL"
                                placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门"
                                :auto-size="{ minRows: 5, maxRows: 8 }" />
                        </a-space-compact>
                    </a-space>
                </a-tab-pane>
                <a-tab-pane key="2" tab=".NET方法">
                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                        <a-space-compact block>
                            <a-textarea v-model:value="formState.deleteIOCName" placeholder="请填写.NET方法IOC别名"
                                :auto-size="{ minRows: 5, maxRows: 8 }" />
                        </a-space-compact>
                    </a-space>
                </a-tab-pane>
                <a-tab-pane key="3" tab="第三方接口">
                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                        <a-space-compact block>
                            <a-textarea v-model:value="formState.undoUrl"
                                placeholder="请填写第三方接口地址(POST),JSON 格式,参数有 userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门"
                                :auto-size="{ minRows: 5, maxRows: 8 }" />
                        </a-space-compact>
                    </a-space>
                </a-tab-pane>
            </a-tabs>

            <a-divider plain="true">删除草稿</a-divider>
            <a-tabs v-model:activeKey="formState.deleteDraftType" type="card" size="small" centered="true">
                <a-tab-pane key="1" tab="执行SQL">
                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                        <a-space-compact block>
                            <a-select v-model:value="formState.deleteDraftDbCode" placeholder="请选择执行SQL数据库" :options="sqlOptions"
                            :field-names="{ label: 'text', value: 'id',options :'childNodes' }">
                            </a-select>
                        </a-space-compact>
                        <a-space-compact block>
                            <a-textarea v-model:value="formState.deleteDraftDbSQL"
                                placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门"
                                :auto-size="{ minRows: 5, maxRows: 8 }" />
                        </a-space-compact>
                    </a-space>
                </a-tab-pane>
                <a-tab-pane key="2" tab=".NET方法">
                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                        <a-space-compact block>
                            <a-textarea v-model:value="formState.deleteDraftIOCName" placeholder="请填写.NET方法IOC别名"
                                :auto-size="{ minRows: 5, maxRows: 8 }" />
                        </a-space-compact>
                    </a-space>
                </a-tab-pane>
                <a-tab-pane key="3" tab="第三方接口">
                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                        <a-space-compact block>
                            <a-textarea v-model:value="formState.undoUrl"
                                placeholder="请填写第三方接口地址(POST),JSON 格式,参数有 userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门"
                                :auto-size="{ minRows: 5, maxRows: 8 }" />
                        </a-space-compact>
                    </a-space>
                </a-tab-pane>
            </a-tabs>
        </a-form>
    </div>
</template>
<script lang="ts" setup>
    import { Dayjs } from 'dayjs';
    import { reactive, ref, toRaw, onMounted, defineProps } from 'vue';
    import type { UnwrapRef } from 'vue';
    import type { Rule } from 'ant-design-vue/es/form';
    import { IconPicker } from '/@/components/Icon';
    import { getLoad } from '@/api/sys/sysDataItemDetail';
  import { getLoadDataBaseLinkTree } from '@/api/demo/system';

    const formRef = ref();
    const labelCol = { span: 7 };
    const wrapperCol = { span: 17 };
    const activeKey = ref('1')
    const props = defineProps({
        pageType: String,
    })
    const data = reactive({
        optionsNotOrOk: [{ label: '允许', value: 1 }, { label: '不允许', value: 2 }],
        optionsType: [],
        componentDisabled: props.pageType == 'detail' ? true : false,
    })
    const sqlOptions =ref([])

    let formState = ref({
        code: '',
        name: '',
        category: '',
        enabledMark: 1,
        mark: 1,
        isInApp: 2,
        description: '',

        titleRules: '',

        undoType: "1",
        undoDbCode: '',
        undoDbSQL: '',
        undoIOCName: '',
        undoUrl: '',

        deleteType: "1",
        deleteDbCode: '',
        deleteDbSQL: '',
        deleteIOCName: '',
        deleteUrl: '',

        deleteDraftType: "1",
        deleteDraftDbCode: '',
        deleteDraftDbSQL: '',
        deleteDraftIOCName: '',
        deleteDraftUrl: '',
        icon: 'ant-design:appstore-outlined',
        color: '#409EFF',
    });
    const rules: Record<string, Rule[]> = {
        code: [
            { required: true, message: '请输入模板编号' },
            // { validator: lr_existDbFiled, keyValue: () => { return data.formData.f_Id }, tableName: 'lr_wf_schemeinfo', keyName: 'f_Id', trigger: 'blur' }
        ],
        name: [
            { required: true, message: '请输入模板名称' }
        ],
        category: [
            { required: true, message: '请选择模板分类' }
        ],
        icon: [
            { required: true, message: '请选择图标' }
        ],
        color: [
            { required: true, message: '请选择颜色' }
        ],
    };
    async function getSQL(){
        const data = await getLoadDataBaseLinkTree()
        data.forEach(element => {
            if(element.childNodes == null){
                element.childNodes = []
            }
        });
        sqlOptions.value = data
    }
    async function fetch() {
        let list = await getLoad({ code: 'FlowSort' });
        data.optionsType = list

    }
    async function validateForm() {
        let res = await formRef.value
            .validate()
            .then((values) => {
                return true
            })
            .catch((error: ValidateErrorEntity<FormState>) => {
                return false
            });
        return res
    }
    function setForm(data) {
        formState.value = data
    }
    function getForm() {
        return formState.value
    }
    defineExpose({
        setForm,
        getForm,
        validateForm
    })
    onMounted(() => {
        fetch();
        getSQL()
    });
</script>
<style lang="less" scoped>
    .site-space-compact-wrapper {
        width: 100%;

        .ant-select {
            width: 100%;
        }
    }

    ::v-deep .ant-tabs {
        padding: 0 !important;
    }
</style>