vue3/src/views/bpm/simpleWorkflow/index.vue

<template>
  <div>
    <section class="dingflow-design">
      <el-row>
        <el-col :span="20" />
        <el-col :span="4">
          <el-button type="primary" size="small" @click="test">保存(用于测试，还未完成)</el-button>
        </el-col>
      </el-row>
      <div class="box-scale">
        <div class="start-event-node">
          <div class="start-event-node-circle">开始</div>
        </div>
        <div class="start-event-node-line"></div>
        <nodeWrap v-model:nodeConfig="nodeConfig" />
        <!-- <div class="end-node">
          <div class="end-node-circle"></div>
          <div class="end-node-text">流程结束</div>
        </div> -->
        <div class="end-event">
          <div class="end-event-circle">结束</div>
        </div>
      </div>
    </section>
  </div>
  <approverDrawer />
  <copyerDrawer />
</template>
<script lang="ts" setup>
import nodeWrap from '@/components/SimpleProcessDesigner/src/nodeWrap.vue'
import approverDrawer from '@/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue'
import copyerDrawer from '@/components/SimpleProcessDesigner/src/drawer/copyerDrawer.vue'
import { WorkFlowNode } from '@/components/SimpleProcessDesigner/src/consts'
import { ref } from 'vue'
import { saveBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple'
defineOptions({ name: 'SimpleWorkflowDesignEditor' })
const uid = getCurrentInstance().uid
const router = useRouter() // 路由
const { query } = useRoute() // 路由的查询
const modelId = query.modelId
const message = useMessage() // 国际化
const nodeConfig = ref<WorkFlowNode>({
    name: '发起人',
    type: 0,
    id: 'StartEvent_' + uid,
    childNode: undefined,
    attributes: undefined,
    conditionNodes: undefined
  }
)
const test = async () => {
  if (!modelId) {
    message.error('缺少模型 modelId 编号')
    return
  }
  const test = nodeConfig.value;
  console.log('test is ', test)
  console.log('nodeConfig.value ', nodeConfig.value)
  const data = {
    modelId: modelId,
    simpleModelBody: toRaw(nodeConfig.value)
  }
  const data1 = {
    modelId: modelId,
    simpleModelBody: nodeConfig.value
  }
  console.log('request json data is ', data)
  console.log('request json data1 is ', data1)
  const result = await saveBpmSimpleModel(data1)
  console.log('save the result is ', result)
  if (result) {
    message.success('修改成功')
    close()
  } else {
    message.alert('修改失败')
  }
  
}
const close = () => {
  router.push({ path: '/bpm/manager/model' })
}
onMounted(async () => {
  console.log('the modelId is ', modelId)
  const result = await getBpmSimpleModel(modelId)
  if(result){
    console.log('get the result is ', result)
    nodeConfig.value = result;
  }
})
</script>
<style>
@import url('@/components/SimpleProcessDesigner/theme/workflow.css');

.end-event {
  display: flex;
  direction: columns;
  justify-content: center;
  align-items: center;
}

.end-event-circle {
  display: flex;
  width: 40px;
  height: 40px;
  font-size: 14px;
  color: #f8f8fa;
  background-image: linear-gradient(-30deg,#bbbbc4,#d5d5de),linear-gradient(#bcbcc5,#bcbcc5);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
}

/* .start-event-node {
  color: #191f2566;
  text-align: left;
  border-radius: 50%;
} */
.start-event-node {
  display: flex;
  direction: columns;
  justify-content: center;
  align-items: center;
}

.start-event-node-circle {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #f8f8fa;
  background-image: linear-gradient(90deg,#ff6a00,#f78b3e),linear-gradient(#ff6a00,#ff6a00);
  border-radius: 50%;
}

.start-event-node-line::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 2px;
    height: 100%;
    margin: auto;
    background-color: #cacaca;
    content: "";
}

.start-event-node-line {
  position: relative;
  padding: 20px 0 32px;
}
</style>