增加流程内嵌表单demo

src/api/demo/index.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+import { BPMN_URL } from '@/api/baseUrl'
+/**
+ * 获取数据
+ * @param {*} params
+ */
+export function get (params) {
+    return request({
+        url: BPMN_URL() + '/bpm/demo/url/form/get',
+        method: 'get',
+        params
+    })
+}
+
+/**
+ * 启动流程
+ * @param {*} params
+ */
+export function startFlow (params) {
+    return request({
+        url: BPMN_URL() + '/bpm/demo/url/form/startFlow',
+        method: 'post',
+        data: params
+    })
+}
+

src/views/demo/url-form/external-form.vue

@@ -0,0 +1,172 @@
+<template>
+    <div>
+        <div class="form-toolbar hidden-print">
+            <div
+                :class="['ibps-toolbar--' +$ELEMENT.size]"
+                class="ibps-toolbar"
+            >
+                <div class="header">
+                    <div class="buttons">
+                        <ibps-toolbar
+                            :actions="actions"
+                            @action-event="handleButtonEvent"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <el-form ref="form" :model="form" label-width="120px" class="ibps-pt-10" @submit.native.prevent>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="输入框" prop="input">
+                        <el-input v-if="!readonly" v-model="form.text" />
+                        <span v-else>{{ form.input }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="输入计数器" prop="inputNumber">
+                        <el-input-number v-model="form.number" :min="1" :max="10" label="描述文字" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-form-item label="多行文本框" prop="desc">
+                <el-input v-model="form.textarea" type="textarea" />
+            </el-form-item>
+            <el-form-item label="富文本" prop="editor">
+                <ibps-ueditor v-model="form.editor" style="width:99%;" />
+            </el-form-item>
+
+        </el-form>
+    </div>
+</template>
+
+<script>
+import { get, startFlow } from '@/api/demo'
+import IbpsUeditor from '@/components/ibps-ueditor'
+export default {
+    components: {
+        IbpsUeditor
+    },
+    props: {
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        params: { // 接收表单传过来
+            type: Object
+        }
+    },
+    data () {
+        return {
+            form: {
+                text: '',
+                textarea: '',
+                number: 0,
+                editor: ''
+            },
+            actions: [
+            ]
+        }
+    },
+    watch: {
+        // 路由加载
+        '$route.query': {
+            handler (val, oldVal) {
+                const data = this.$route.query
+                if (this.$utils.isNotEmpty(data)) {
+                    this.loadFormData(data)
+                }
+            },
+            immediate: true
+        },
+        params: {
+            handler (val, oldVal) {
+                if (val) {
+                    this.loadFormData(val.attrs)
+                }
+            },
+            immediate: true
+        }
+    },
+    methods: {
+        loadFormData (attrs) {
+            this.loadButtons()
+            // 主键
+            const id = attrs.id
+            if (this.$utils.isEmpty(id)) {
+                return
+            }
+            this.dialogLoading = true
+            get({
+                id: id
+            }).then(response => {
+                this.form = response.data || {}
+                this.dialogLoading = false
+            }).catch(() => {
+                this.dialogLoading = false
+            })
+        },
+        /**
+         * 获取表单数据
+         */
+        getFormData () {
+            return this.form
+        },
+        loadButtons () {
+            const params = this.params
+            let buttons = []
+            if (this.$utils.isNotEmpty(params.taskId)) { // 处理流程任务
+                buttons = [{
+                    key: 'agree',
+                    icon: 'ibps-icon-send',
+                    label: '同意'
+                }]
+            } else if (this.$utils.isNotEmpty(params.defId)) { // 启动 或者草稿流程启动
+                buttons = [{
+                    key: 'startFlow',
+                    icon: 'ibps-icon-send',
+                    label: '编制提交'
+                }, {
+                    key: 'saveDraft',
+                    icon: 'ibps-icon-save',
+                    label: '临时保存'
+                }]
+            } else if (this.$utils.isNotEmpty(params.instanceId)) { // 流程实例
+
+            }
+
+            this.actions = this.actions.concat(buttons)
+        },
+        handleButtonEvent ({ key }) {
+            switch (key) {
+                case 'close':
+                    this.closeDialog()
+                    break
+                case 'startFlow':
+                    // 方式一：调用父组件，需要在前置脚本写 urlFormService.save
+                    this.handleActionEvent(key)
+                    // 方式二：自己调用API,需自己处理保存和启动流程
+                    // this.handleStartFlow()
+                    break
+                default:
+                    break
+            }
+        },
+        // 关闭当前窗口
+        closeDialog () {
+            this.$emit('close', false)
+        },
+        handleActionEvent (key) {
+            this.$emit('action-event', key)
+        },
+        handleStartFlow () {
+            // 如需表单验证，请写表单验证
+
+            // 后端启动流程的代码和数据
+            startFlow({
+                data: JSON.stringify(this.form)
+            })
+        }
+    }
+}
+</script>

src/views/demo/url-form/form.vue

@@ -0,0 +1,113 @@
+<template>
+    <el-form ref="form" :model="form" label-width="120px" class="ibps-pt-10" @submit.native.prevent>
+        <el-row>
+            <el-col :span="12">
+                <el-form-item label="输入框" prop="input">
+                    <el-input v-if="!readonly" v-model="form.text" />
+                    <span v-else>{{ form.text }}</span>
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+                <el-form-item label="输入计数器" prop="inputNumber">
+                    <el-input-number v-if="!readonly" v-model="form.number" :min="1" :max="10" label="描述文字" />
+                    <span v-else>{{ form.number }}</span>
+                </el-form-item>
+            </el-col>
+        </el-row>
+        <el-form-item label="多行文本框" prop="desc">
+            <el-input v-if="!readonly" v-model="form.textarea" type="textarea" />
+            <span v-else>{{ form.textarea }}</span>
+        </el-form-item>
+        <el-form-item label="日期控件" prop="desc">
+            <el-date-picker
+                v-if="!readonly"
+                v-model="form.time"
+                type="date"
+                :value-format="datefmt"
+                :format="datefmt"
+            />
+            <span v-else>{{ form.time }}</span>
+        </el-form-item>
+        <el-form-item label="富文本" prop="editor">
+            <ibps-ueditor v-if="!readonly" v-model="form.editor" style="width:99%;" />
+            <span v-else v-html=" form.editor" />
+        </el-form-item>
+
+    </el-form>
+</template>
+
+<script>
+import { get } from '@/api/demo'
+import IbpsUeditor from '@/components/ibps-ueditor'
+export default {
+    components: {
+        IbpsUeditor
+    },
+    props: {
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        params: { // 接收表单传过来
+            type: Object
+        }
+    },
+    data () {
+        return {
+            selectorVisible: false,
+            form: {
+                text: '',
+                textarea: '',
+                number: 0,
+                editor: '',
+                time: ''
+            },
+            datefmt: 'yyyy-MM-dd'
+        }
+    },
+    watch: {
+        // 路由加载
+        '$route.query': {
+            handler (val, oldVal) {
+                const data = this.$route.query
+                if (this.$utils.isNotEmpty(data)) {
+                    this.loadFormData(data)
+                }
+            },
+            immediate: true
+        },
+        params: {
+            handler (val, oldVal) {
+                if (val) {
+                    this.loadFormData(val.attrs)
+                }
+            },
+            immediate: true
+        }
+    },
+    methods: {
+        loadFormData (attrs) {
+            // 主键
+            const id = attrs.id
+            if (this.$utils.isEmpty(id)) {
+                return
+            }
+            this.dialogLoading = true
+            get({
+                id: id
+            }).then(response => {
+                this.form = response.data || {}
+                this.dialogLoading = false
+            }).catch(() => {
+                this.dialogLoading = false
+            })
+        },
+        /**
+         * 获取表单数据
+         */
+        getFormData () {
+            return this.form
+        }
+    }
+}
+</script>

src/views/demo/url-form/index.bak.vue

@@ -0,0 +1,338 @@
+<template>
+    <el-form ref="form" :model="form" label-width="120px" class="ibps-pt-10" @submit.native.prevent>
+        <el-row>
+            <el-col :span="12">
+                <el-form-item label="输入框" prop="input">
+                    <el-input v-if="!readonly" v-model="form.input" />
+                    <span v-else>{{ form.input }}</span>
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+                <el-form-item label="输入计数器" prop="inputNumber">
+                    <el-input-number v-model="form.inputNumber" :min="1" :max="10" label="描述文字" />
+                </el-form-item>
+            </el-col>
+        </el-row>
+
+        <el-form-item label="选择器" prop="region">
+            <el-select v-model="form.region" placeholder="请选择一个地址">
+                <el-option label="上海" value="shanghai" />
+                <el-option label="北京" value="beijing" />
+            </el-select>
+        </el-form-item>
+        <el-form-item label="日期时间选择器">
+            <el-col :span="11">
+                <el-form-item prop="date1">
+                    <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" />
+                </el-form-item>
+            </el-col>
+            <el-col :span="2" class="line">-</el-col>
+            <el-col :span="11">
+                <el-form-item prop="date2">
+                    <el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time" style="width: 100%;" />
+                </el-form-item>
+            </el-col>
+        </el-form-item>
+        <el-form-item label="Instant delivery" prop="delivery">
+            <el-switch v-model="form.delivery" />
+        </el-form-item>
+        <el-form-item label="Activity type" prop="type">
+            <el-checkbox-group v-model="form.type">
+                <el-checkbox label="Online activities" name="type" />
+                <el-checkbox label="Promotion activities" name="type" />
+                <el-checkbox label="Offline activities" name="type" />
+                <el-checkbox label="Simple brand exposure" name="type" />
+            </el-checkbox-group>
+        </el-form-item>
+        <el-form-item label="资源" prop="resource">
+            <el-radio-group v-model="form.resource">
+                <el-radio label="Sponsor" name="sponsor" />
+                <el-radio label="Venue" name="venue" />
+            </el-radio-group>
+        </el-form-item>
+        <el-form-item label="级联控件" prop="cascaderOptions">
+            <el-cascader
+                v-model="form.cascaderOptions"
+                :options="cascaderOptions"
+                filterable
+            />
+        </el-form-item>
+        <el-form-item label="多行文本框" prop="desc">
+            <el-input v-model="form.desc" type="textarea" />
+        </el-form-item>
+        <el-form-item label="富文本" prop="riceText">
+            <ibps-ueditor v-model="form.riceText" />
+        </el-form-item>
+
+    </el-form>
+</template>
+
+<script>
+import IbpsUeditor from '@/components/ibps-ueditor'
+export default {
+    components: {
+        IbpsUeditor
+    },
+    props: {
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        params: { // 接收表单传过来
+            type: Object
+        }
+    },
+    data () {
+        return {
+            selectorVisible: false,
+            selected: [],
+            cascaderOptions: [
+                {
+                    value: 'zhinan',
+                    label: '指南',
+                    children: [{
+                        value: 'shejiyuanze',
+                        label: '设计原则',
+                        children: [{
+                            value: 'yizhi',
+                            label: '一致'
+                        }, {
+                            value: 'fankui',
+                            label: '反馈'
+                        }, {
+                            value: 'xiaolv',
+                            label: '效率'
+                        }, {
+                            value: 'kekong',
+                            label: '可控'
+                        }]
+                    }, {
+                        value: 'daohang',
+                        label: '导航',
+                        children: [{
+                            value: 'cexiangdaohang',
+                            label: '侧向导航'
+                        }, {
+                            value: 'dingbudaohang',
+                            label: '顶部导航'
+                        }]
+                    }]
+                }, {
+                    value: 'zujian',
+                    label: '组件',
+                    children: [{
+                        value: 'basic',
+                        label: 'Basic',
+                        children: [{
+                            value: 'layout',
+                            label: 'Layout 布局'
+                        }, {
+                            value: 'color',
+                            label: 'Color 色彩'
+                        }, {
+                            value: 'typography',
+                            label: 'Typography 字体'
+                        }, {
+                            value: 'icon',
+                            label: 'Icon 图标'
+                        }, {
+                            value: 'button',
+                            label: 'Button 按钮'
+                        }]
+                    }, {
+                        value: 'form',
+                        label: 'Form',
+                        children: [{
+                            value: 'radio',
+                            label: 'Radio 单选框'
+                        }, {
+                            value: 'checkbox',
+                            label: 'Checkbox 多选框'
+                        }, {
+                            value: 'input',
+                            label: 'Input 输入框'
+                        }, {
+                            value: 'input-number',
+                            label: 'InputNumber 计数器'
+                        }, {
+                            value: 'select',
+                            label: 'Select 选择器'
+                        }, {
+                            value: 'cascader',
+                            label: 'Cascader 级联选择器'
+                        }, {
+                            value: 'switch',
+                            label: 'Switch 开关'
+                        }, {
+                            value: 'slider',
+                            label: 'Slider 滑块'
+                        }, {
+                            value: 'time-picker',
+                            label: 'TimePicker 时间选择器'
+                        }, {
+                            value: 'date-picker',
+                            label: 'DatePicker 日期选择器'
+                        }, {
+                            value: 'datetime-picker',
+                            label: 'DateTimePicker 日期时间选择器'
+                        }, {
+                            value: 'upload',
+                            label: 'Upload 上传'
+                        }, {
+                            value: 'rate',
+                            label: 'Rate 评分'
+                        }, {
+                            value: 'form',
+                            label: 'Form 表单'
+                        }]
+                    }, {
+                        value: 'data',
+                        label: 'Data',
+                        children: [{
+                            value: 'table',
+                            label: 'Table 表格'
+                        }, {
+                            value: 'tag',
+                            label: 'Tag 标签'
+                        }, {
+                            value: 'progress',
+                            label: 'Progress 进度条'
+                        }, {
+                            value: 'tree',
+                            label: 'Tree 树形控件'
+                        }, {
+                            value: 'pagination',
+                            label: 'Pagination 分页'
+                        }, {
+                            value: 'badge',
+                            label: 'Badge 标记'
+                        }]
+                    }, {
+                        value: 'notice',
+                        label: 'Notice',
+                        children: [{
+                            value: 'alert',
+                            label: 'Alert 警告'
+                        }, {
+                            value: 'loading',
+                            label: 'Loading 加载'
+                        }, {
+                            value: 'message',
+                            label: 'Message 消息提示'
+                        }, {
+                            value: 'message-box',
+                            label: 'MessageBox 弹框'
+                        }, {
+                            value: 'notification',
+                            label: 'Notification 通知'
+                        }]
+                    }, {
+                        value: 'navigation',
+                        label: 'Navigation',
+                        children: [{
+                            value: 'menu',
+                            label: 'NavMenu 导航菜单'
+                        }, {
+                            value: 'tabs',
+                            label: 'Tabs 标签页'
+                        }, {
+                            value: 'breadcrumb',
+                            label: 'Breadcrumb 面包屑'
+                        }, {
+                            value: 'dropdown',
+                            label: 'Dropdown 下拉菜单'
+                        }, {
+                            value: 'steps',
+                            label: 'Steps 步骤条'
+                        }]
+                    }, {
+                        value: 'others',
+                        label: 'Others',
+                        children: [{
+                            value: 'dialog',
+                            label: 'Dialog 对话框'
+                        }, {
+                            value: 'tooltip',
+                            label: 'Tooltip 文字提示'
+                        }, {
+                            value: 'popover',
+                            label: 'Popover 弹出框'
+                        }, {
+                            value: 'card',
+                            label: 'Card 卡片'
+                        }, {
+                            value: 'carousel',
+                            label: 'Carousel 走马灯'
+                        }, {
+                            value: 'collapse',
+                            label: 'Collapse 折叠面板'
+                        }]
+                    }]
+                }, {
+                    value: 'ziyuan',
+                    label: '资源',
+                    children: [{
+                        value: 'axure',
+                        label: 'Axure Components'
+                    }, {
+                        value: 'sketch',
+                        label: 'Sketch Templates'
+                    }, {
+                        value: 'jiaohu',
+                        label: '组件交互文档'
+                    }]
+                }],
+            form: {
+                input: '',
+                region: '',
+                date1: '',
+                date2: '',
+                delivery: false,
+                type: [],
+                resource: '',
+                desc: '',
+                riceText: ''
+            }
+        }
+    },
+    watch: {
+        // 路由加载
+        '$route.query': {
+            handler (val, oldVal) {
+                const data = this.$route.query
+                if (this.$utils.isNotEmpty(data)) {
+                    this.loadFormData(data)
+                }
+            },
+            immediate: true
+        },
+        params: {
+            handler (val, oldVal) {
+                if (val) {
+                    this.loadFormData(val.attrs)
+                }
+            },
+            immediate: true
+        }
+    },
+    methods: {
+        loadFormData (attrs) {
+            // 主键
+            const id = attrs.id
+            console.log(id)
+        },
+        /**
+         * 获取表单数据
+         */
+        getFormData () {
+            return this.form
+        }
+    }
+}
+</script>
+
+<style scoped>
+.line{
+  text-align: center;
+}
+</style>

src/views/demo/url-form/index.vue

@@ -0,0 +1,108 @@
+<template>
+    <el-form ref="form" :model="form" label-width="120px" class="ibps-pt-10" @submit.native.prevent>
+        <el-row>
+            <el-col :span="12">
+                <el-form-item label="输入框" prop="input">
+                    <el-input v-if="!readonly" v-model="form.text" />
+                    <span v-else>{{ form.input }}</span>
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+                <el-form-item label="输入计数器" prop="inputNumber">
+                    <el-input-number v-model="form.number" :min="1" :max="10" label="描述文字" />
+                </el-form-item>
+            </el-col>
+        </el-row>
+        <el-form-item label="多行文本框" prop="desc">
+            <el-input v-model="form.textarea" type="textarea" />
+        </el-form-item>
+        <el-form-item label="富文本" prop="editor">
+            <ibps-ueditor v-model="form.editor" style="width:99%;" />
+        </el-form-item>
+
+    </el-form>
+</template>
+
+<script>
+import { get } from '@/api/demo'
+import IbpsUeditor from '@/components/ibps-ueditor'
+
+export default {
+    components: {
+        IbpsUeditor
+    },
+    props: {
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        params: { // 接收表单传过来
+            type: Object
+        }
+    },
+    data () {
+        return {
+            form: {
+                text: '',
+                textarea: '',
+                number: 0,
+                editor: ''
+            },
+            actions: [
+                {
+                    key: 'close'
+                }
+            ]
+        }
+    },
+    watch: {
+    // 路由加载
+        '$route.query': {
+            handler (val, oldVal) {
+                const data = this.$route.query
+                if (this.$utils.isNotEmpty(data)) {
+                    this.loadFormData(data)
+                }
+            },
+            immediate: true
+        }
+    },
+    mounted () {
+        const _this = this
+        window.ibpsFormUrl = {
+            // 表单数据
+            getFormData () {
+                return _this.getFormData()
+            },
+            // 表单意见
+            getFormOpinionData () {
+
+            }
+        }
+    },
+    methods: {
+        loadFormData (attrs) {
+            // 主键
+            const id = attrs.id
+            if (this.$utils.isEmpty(id)) {
+                return
+            }
+            this.dialogLoading = true
+            get({
+                id: id
+            }).then(response => {
+                this.form = response.data
+                this.dialogLoading = false
+            }).catch(() => {
+                this.dialogLoading = false
+            })
+        },
+        /**
+     * 获取表单数据
+     */
+        getFormData () {
+            return this.form
+        }
+    }
+}
+</script>