You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.6 KiB
Plaintext
86 lines
2.6 KiB
Plaintext
11 months ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<Row type="flex" justify="space-around">
|
||
|
|
<Col :span="8" v-for="(type) in dataType" :key="type.FK_FlowSort">
|
||
|
|
<Collapse v-model:activeKey="activeKey">
|
||
|
|
<CollapsePanel :key="type.FK_FlowSort" :header="type.FK_FlowSortText">
|
||
|
|
<div v-for="(start) in dataFlow" :key="start.No" class="set_Start">
|
||
|
|
<div v-if="type.FK_FlowSort == start.FK_FlowSort">{{ start.No }} <a @click="StartFlow(start.No)">{{
|
||
|
|
start.Name }}</a></div>
|
||
|
|
</div>
|
||
|
|
</CollapsePanel>
|
||
|
|
</Collapse>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<Drawer title="节点流程" placement="right" :closable="true" v-model:visible="visible" width="90%">
|
||
|
|
<div style="width: 100%;height: 100%;">
|
||
|
|
<iframe :src="url" scrolling="auto" frameborder="no" style="width: 100%; height: 100%" />
|
||
|
|
</div>
|
||
|
|
</Drawer>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { Collapse, CollapsePanel, Row, Col, Drawer } from 'ant-design-vue'
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { DB_Start } from '@/api/flow';
|
||
|
|
import { useUserStore } from '@/stores/user';
|
||
|
|
import { ccbpmPortURL } from '@/utils/env';
|
||
|
|
const dataType = ref<any>([]); //类型
|
||
|
|
const dataFlow = ref<any>([]); //发起流程
|
||
|
|
const userStore = useUserStore();
|
||
|
|
const activeKey = ref<string[]>([]);
|
||
|
|
const visible = ref<boolean>(false);
|
||
|
|
const url = ref();
|
||
|
|
//获取数据
|
||
|
|
const InitPage = () => {
|
||
|
|
DB_Start().then((res) => {
|
||
|
|
if (!res?.code) {
|
||
|
|
dataFlow.value = res.sort(compare('No')); //排序
|
||
|
|
dataType.value = res.map((item: any) => {
|
||
|
|
return {
|
||
|
|
FK_FlowSort: item.FK_FlowSort,
|
||
|
|
FK_FlowSortText: item.FK_FlowSortText
|
||
|
|
}
|
||
|
|
})
|
||
|
|
let newArr = []; //索引
|
||
|
|
for (let i = 0; i < dataType.value.length; i++) {
|
||
|
|
if (newArr.indexOf(dataType.value[i]?.FK_FlowSort) == -1) {
|
||
|
|
newArr.push(dataType.value[i]?.FK_FlowSort);
|
||
|
|
activeKey.value.push(dataType.value[i]?.FK_FlowSort);
|
||
|
|
} else {
|
||
|
|
dataType.value.splice(i, 1);
|
||
|
|
i--;
|
||
|
|
};
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
InitPage();
|
||
|
|
//排序
|
||
|
|
const compare = (property) => {
|
||
|
|
return (a, b) => {
|
||
|
|
var value1 = a[property];
|
||
|
|
var value2 = b[property];
|
||
|
|
return value1 - value2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//调用vue3Port来发起流程
|
||
|
|
const StartFlow = (flowNo: string) => {
|
||
|
|
visible.value = true;
|
||
|
|
url.value = ccbpmPortURL + `DoWhat=StartFlow&UserNo=${userStore.webUser.No}&FK_Flow=${flowNo}`;
|
||
|
|
// window.open(url);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="less">
|
||
|
|
.ant-drawer-header-title{
|
||
|
|
flex-direction: row-reverse;
|
||
|
|
}
|
||
|
|
.ant-collapse {
|
||
|
|
margin: auto;
|
||
|
|
width: 95%;
|
||
|
|
.set_Start {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|