110 lines
3.5 KiB
Vue
110 lines
3.5 KiB
Vue
|
<template>
|
||
|
|
<div class="process-panel__container" :style="{ width: `${props.width}px` }">
|
||
|
|
属性面板
|
||
|
|
<!-- <el-tabs v-model="configActiveName" :stretch="true">
|
||
|
|
<el-tab-pane :label="$t(wfNodeName[currentWfNode.type])" name="tab01" v-if="currentWfNode != undefined">
|
||
|
|
<component :disabled="true" ref="wfcongfig" :is="`${currentWfNode.type}Option`"></component>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="流程属性" name="tab02">
|
||
|
|
<shcemeinfo-config ref="shcemeinfo" :disabled="true"></shcemeinfo-config>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs> -->
|
||
|
|
<!-- <Tabs v-model:activeKey="configActiveName">
|
||
|
|
<Tabs.TabPane :label="$t(wfNodeName[currentWfNode.type])" name="tab01" v-if="currentWfNode != undefined">
|
||
|
|
<component :disabled="true" ref="wfcongfig" :is="`${currentWfNode.type}Option`"></component>
|
||
|
|
</Tabs.TabPane>
|
||
|
|
<Tabs.TabPane label="流程属性" name="tab02">
|
||
|
|
<shcemeinfo-config ref="shcemeinfo" :disabled="true"></shcemeinfo-config>
|
||
|
|
</Tabs.TabPane>
|
||
|
|
</Tabs> -->
|
||
|
|
<!-- <Tabs>
|
||
|
|
<template v-for="item in achieveList" :key="item.key">
|
||
|
|
<Tabs.TabPane :tab="item.name">
|
||
|
|
<component :is="tabs[item.component]" />
|
||
|
|
<component :is="ElementBaseInfo" />
|
||
|
|
<element-base-info :id-edit-disabled="idEditDisabled" :business-object="data.elementBusinessObject"
|
||
|
|
:type="data.elementType" />
|
||
|
|
</Tabs.TabPane>
|
||
|
|
</template>
|
||
|
|
</Tabs> -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { h, reactive, onMounted, defineProps, computed, defineEmits, provide, watch, ref } from 'vue';
|
||
|
|
import { SaveOutlined, ZoomOutOutlined, ZoomInOutlined, RotateLeftOutlined, RotateRightOutlined, ClearOutlined } from '@ant-design/icons-vue';
|
||
|
|
import { Tabs } from 'ant-design-vue';
|
||
|
|
|
||
|
|
|
||
|
|
// 流程属性
|
||
|
|
import shcemeinfoConfig from './config/shcemeInfo.vue'
|
||
|
|
// 开始节点
|
||
|
|
import startEventOption from './config/startEvent.vue'
|
||
|
|
// 结束节点
|
||
|
|
import endEventOption from './config/endEvent.vue'
|
||
|
|
|
||
|
|
import gatewayAndOption from './config/gatewayAnd.vue'
|
||
|
|
import gatewayInclusiveOption from './config/gatewayInclusive.vue'
|
||
|
|
import gatewayXorOption from './config/gatewayXor.vue'
|
||
|
|
import scriptTaskOption from './config/scriptTask.vue'
|
||
|
|
import subprocessOption from './config/subprocess.vue'
|
||
|
|
import userTaskOption from './config/userTask.vue'
|
||
|
|
import mylineOption from './config/myline.vue'
|
||
|
|
/**
|
||
|
|
* 侧边栏
|
||
|
|
* @Author MiyueFE
|
||
|
|
* @Home https://github.com/miyuesc
|
||
|
|
* @Date 2021年3月31日18:57:51
|
||
|
|
*/
|
||
|
|
const props = defineProps({
|
||
|
|
bpmnModeler: Object,
|
||
|
|
prefix: {
|
||
|
|
type: String,
|
||
|
|
default: "camunda"
|
||
|
|
},
|
||
|
|
width: {
|
||
|
|
type: Number,
|
||
|
|
default: 480
|
||
|
|
},
|
||
|
|
idEditDisabled: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
console.log(props)
|
||
|
|
provide('prefix', props.prefix)
|
||
|
|
provide('width', props.width)
|
||
|
|
const data = reactive({
|
||
|
|
configActiveName: 'tab02',
|
||
|
|
currentWfNode: undefined,
|
||
|
|
wfNodeName: {
|
||
|
|
startEvent: '开始节点',
|
||
|
|
endEvent: '结束节点',
|
||
|
|
gatewayAnd: '并行网关',
|
||
|
|
gatewayInclusive: '包含网关',
|
||
|
|
gatewayXor: '排他网关',
|
||
|
|
scriptTask: '脚本节点',
|
||
|
|
userTask: '审核节点',
|
||
|
|
subprocess: '子流程',
|
||
|
|
myline: '线条'
|
||
|
|
},
|
||
|
|
|
||
|
|
})
|
||
|
|
const achieveList = ref([
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
name: '文章',
|
||
|
|
component: 'startEventOption',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '2',
|
||
|
|
name: '应用',
|
||
|
|
component: 'startEventOption',
|
||
|
|
},
|
||
|
|
])
|
||
|
|
const tabs = {
|
||
|
|
startEventOption,
|
||
|
|
startEventOption,
|
||
|
|
};
|
||
|
|
|
||
|
|
</script>
|