152 lines
4.6 KiB
Vue
152 lines
4.6 KiB
Vue
<template>
|
|
<div :class="prefixCls" :style="{ width: `${props.width}px` }">
|
|
<a-tabs v-model:activeKey="activeKey">
|
|
<a-tab-pane key="1" tab="流程属性">
|
|
<shcemeinfo-config ref="shcemeinfo" :disabled="true"></shcemeinfo-config>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="2" tab="发起权限" force-render>
|
|
<auth-config ref="auth"></auth-config>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="3" tab="开始节点">
|
|
<start-event-option ref="start" :element="data.elementData"></start-event-option>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="4" tab="审核节点">
|
|
<user-task-option ref="task"></user-task-option>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="3" tab="结束节点">
|
|
<end-event-option ref="end" :element="data.elementData"></end-event-option>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
<!-- <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> -->
|
|
</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 { PageWrapper } from '@/components/Page';
|
|
import { useDesign } from '@/hooks/web/useDesign';
|
|
const { prefixCls } = useDesign('process-property');
|
|
|
|
|
|
// 流程属性
|
|
import shcemeinfoConfig from './shcemeInfo/index.vue'
|
|
// 发起权限
|
|
import authConfig from './auth/index.vue'
|
|
// 开始节点
|
|
import startEventOption from './startEvent/index.vue'
|
|
// 审核节点
|
|
import userTaskOption from './userTask/index.vue'
|
|
// 结束节点
|
|
import endEventOption from './config/endEvent.vue'
|
|
// 网关和
|
|
import gatewayAndOption from './config/gatewayAnd.vue'
|
|
// 网关包容
|
|
import gatewayInclusiveOption from './config/gatewayInclusive.vue'
|
|
// 网关Xor
|
|
import gatewayXorOption from './config/gatewayXor.vue'
|
|
// 脚本任务
|
|
import scriptTaskOption from './config/scriptTask.vue'
|
|
// 子流程
|
|
import subprocessOption from './config/subprocess.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: 520
|
|
},
|
|
idEditDisabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
element: Object
|
|
})
|
|
|
|
provide('prefix', props.prefix)
|
|
provide('width', props.width)
|
|
const activeKey = ref("5")
|
|
const data = reactive({
|
|
configActiveName: 'tab02',
|
|
currentWfNode: undefined,
|
|
wfNodeName: {
|
|
startEvent: '开始节点',
|
|
endEvent: '结束节点',
|
|
gatewayAnd: '并行网关',
|
|
gatewayInclusive: '包含网关',
|
|
gatewayXor: '排他网关',
|
|
scriptTask: '脚本节点',
|
|
userTask: '审核节点',
|
|
subprocess: '子流程',
|
|
myline: '线条'
|
|
},
|
|
elementData:{}
|
|
})
|
|
watch(
|
|
() => props.element,
|
|
(newVal, oldVal) => {
|
|
data.elementData = newVal
|
|
}
|
|
)
|
|
const achieveList = ref([
|
|
{
|
|
key: '1',
|
|
name: '文章',
|
|
component: 'startEventOption',
|
|
},
|
|
{
|
|
key: '2',
|
|
name: '应用',
|
|
component: 'startEventOption',
|
|
},
|
|
])
|
|
const tabs = {
|
|
startEventOption,
|
|
startEventOption,
|
|
};
|
|
|
|
</script>
|
|
<style lang="less" scoped>
|
|
@prefix-cls: ~'@{namespace}-process-property';
|
|
|
|
.@{prefix-cls} {
|
|
background-color: @component-background;
|
|
}
|
|
|
|
::v-deep .ant-tabs {
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 0 20px;
|
|
|
|
}
|
|
|
|
::v-deep .ant-tabs-content-holder {
|
|
overflow-y: auto;
|
|
}
|
|
</style> |