기술나눔

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

이 프로젝트의 라이센스 문제로 인해 오픈 소스화할 수 없습니다. 더 많은 기술 지원 및 서비스를 받으려면 내 Knowledge Planet에 가입하세요.

1. 딩톡을 흉내내는 과정을 저장하고 표시하기 위한 인터페이스를 만들어야 합니다. 먼저 테이블을 생성하고 이를 온라인으로 사용하여 테이블을 생성합니다.

2. 위의 코드를 생성하여 해당 프런트엔드 및 백엔드 프로젝트에 넣습니다.

3. 프런트 엔드 모방 DingTalk 프로세스의 디자인 기능을 수정하고 다음과 같이 원본 목록 페이지에 대화 상자를 추가합니다.

<el-dialog :title="designerData.name" class="ddDialog" v-model="designerOpen" append-to-body fullscreen>
      <ding-designer
        ref="ddDesigner"
        v-loading="designerLoading"
        :process = "flowJsonData"
        @save="onSaveDesigner"
      />
    </el-dialog>

4. 위의 모조 못 박기 프로세스 구성 요소를 추가합니다.

<template>
  <div class="formDesign">
    <FlowDesign :process="process" :fields="fields" :readOnly="readOnly">
    <el-switch
      inline-prompt
      size="large"
      active-text="正常模式"
      inactive-text="暗黑模式"
      @change="handleToggleDark"
      v-model="isDark"
    />
    <el-switch
      v-model="readOnly"
      size="large"
      active-text="只读模式"
      inactive-text="编辑模式"
      inline-prompt
      :active-value="true"
      :inactive-value="false"
    />
    <el-button-group>
      <el-button @click="viewJson" size="small" type="primary" round icon="View"> 查看Json</el-button>
    </el-button-group>
    <el-button-group>
      <el-button @click="viewXmlBpmn" size="small" type="primary" round icon="View"> 查看XML </el-button>
    </el-button-group>
    <el-button-group>
      <el-button @click="converterBpmn" size="small" type="primary" round icon="View"> 预览bpmn </el-button>
    </el-button-group>
    <el-button-group>
      <el-button @click="save" size="small" type="primary" round icon="View"> 保存 </el-button>
    </el-button-group>
  </FlowDesign>
  <el-dialog title="预览" width="60%" v-model="previewModelVisible" append-to-body destroy-on-close>
    <highlightjs :language="previewType" :code="previewResult" style="height: 80vh" />
  </el-dialog>
  <!-- Bpmn流程图 -->
  <el-dialog :title="processView.title" v-model="processView.open" width="70%" append-to-body>
    <process-viewer :key="`designer-${processView.title}`" :xml="processView.xmlData" :style="{height: '500px'}" />
  </el-dialog>
  </div>
  
</template>
 
 
<script setup lang="ts" name="DingDesigner">
import { ref, reactive, toRaw, onMounted } from 'vue';
import '@/views/lowflow/styles/index.scss'
 
// If you want to use ElMessage, import it.
import 'element-plus/dist/index.css';
import 'element-plus/theme-chalk/display.css';
 
import FlowDesign from '@/views/lowflow/flowDesign/index.vue'
import type { Field } from '@/views/lowflow/components/Render/type'
import type { EndNode, FlowNode, StartNode } from '@/views/lowflow/flowDesign/nodes/type'
import { viewXml, ddToBpmnXml } from '@/views/lowflow/api/modules/model'
import ProcessViewer from '@/components/ProcessViewer/index.vue';
import { useMessage } from '/@/hooks/web/useMessage';
 
const { createMessage, createConfirm } = useMessage();
 
const props = defineProps({
   process: {
     type: Object,
     required: true
   },
});
 
const emit = defineEmits([
  'save'
])
 
const previewModelVisible = ref(false)
const previewResult = ref('')
const previewType = ref('xml')
 
const processView =  reactive<any>({
  title: '',
  open: false,
  xmlData:'',
})
 
// 流程节点
/*const process = ref<FlowNode>({
  id: 'root',
  pid: undefined,
  type: 'start',
  name: '流程开始',
  executionListeners: [],
  formProperties: [],
  child: {
    id: 'end',
    pid: 'root',
    type: 'end',
    name: '流程结束',
    executionListeners: [],
    child: undefined
  } as EndNode
} as StartNode)*/
 
 
// 表单字段
const fields = ref<Field[]>([
  {
    id: 'field_da2w55',
    type: 'formItem',
    label: '请假人',
    name: 'UserSelector',
    value: null,
    readonly: false,
    required: true,
    hidden: false,
    props: {
      multiple: false,
      disabled: false,
      placeholder: '请选择用户',
      style: {
        width: '100%'
      }
    }
  },
  {
    id: 'field_fa2w40',
    type: 'formItem',
    label: '请假天数',
    name: 'ElInputNumber',
    value: null,
    readonly: false,
    required: true,
    hidden: false,
    props: {
      disabled: false,
      placeholder: '请假天数',
      style: {
        width: '100%'
      },
      min: 0,
      max: 100,
      step: 1,
      precision: 0
    }
  },
  {
    id: 'field_d42t45',
    type: 'formItem',
    label: '请假事由',
    name: 'ElSelect',
    value: null,
    readonly: false,
    required: true,
    hidden: false,
    props: {
      disabled: false,
      multiple: false,
      placeholder: '请选择请假事由',
      options: [
        {
          label: '事假',
          value: '事假'
        },
        {
          label: '病假',
          value: '病假'
        },
        {
          label: '婚假',
          value: '婚假'
        },
        {
          label: '产假',
          value: '产假'
        },
        {
          label: '丧假',
          value: '丧假'
        },
        {
          label: '其他',
          value: '其他'
        }
      ],
      style: {
        width: '100%'
      }
    }
  },
  {
    id: 'field_522g58',
    type: 'formItem',
    label: '请假原因',
    name: 'ElInput',
    value: null,
    readonly: false,
    required: true,
    hidden: false,
    props: {
      type: 'textarea',
      placeholder: '请输入请假原因',
      autosize: {
        minRows: 3,
        maxRows: 3
      },
      disabled: false,
      style: {
        width: '100%'
      }
    }
  }
])
// 是否只读
const readOnly = ref(false)
// 是否暗黑模式
const isDark = ref(false)
 
const viewJson = () => {
  const processJson = JSON.stringify(props.process,undefined, 2); 
  previewResult.value = processJson; 
  previewType.value = 'json'
  previewModelVisible.value = true
}
const viewXmlBpmn = () => {
  const processModel = {
    code: 'test',
    name: '测试',
    icon: {
      name: 'el:HomeFilled',
      color: '#409EFF'
    },
    process: props.process,
    enable: true,
    version: 1,
    sort: 0,
    groupId: '',
    remark: ''
  }
  const xmlData = viewXml(processModel)
  xmlData.then((result) => {
    previewResult.value = result
    previewType.value = 'xml'
    previewModelVisible.value = true
  })
  
}
const converterBpmn = () => {
  const processModel = {
    code: 'test',
    name: '测试',
    icon: {
      name: 'el:HomeFilled',
      color: '#409EFF'
    },
    process: props.process,
    enable: true,
    version: 1,
    sort: 0,
    groupId: '',
    remark: ''
  }
  ddToBpmnXml(processModel).then(res => {
     console.log("ddToBpmnXml res",res)
     processView.xmlData = res.result
     processView.title = "Bpmn流程图预览"
     processView.open = true
  })  
}
 
const save = () => {
    const flowData = props.process
    emit('save', flowData);
}
 
const handleToggleDark = () => {
  if (isDark.value) {
    document.documentElement.classList.add('dark')
  } else {
    document.documentElement.classList.remove('dark')
  }
}
 
onMounted(() => {
  
});
 
</script>
 
<style scoped lang="scss">
  .formDesign {
    z-index: 999;
    top: 120px;
    height: 100%;
  }
</style>

5. 렌더링은 다음과 같습니다.

포인트 디자인은 다음과 같습니다.