vue-vben-admin/src/views/demo/workflow/scheme/preview.vue

<!--
 * @Author: 刘妍
 * @Date: 2024-02-27 10:35:52
 * @LastEditors: Do not edit
 * @LastEditTime: 2024-03-01 09:54:26
 * @FilePath: \费县天空地大屏正式代码e:\新架构\vue-vben-admin\src\views\demo\workflow\scheme\preview.vue
 * @Description: 
-->
<!-- <template>
  <PageWrapper title="流程模板设计" contentBackground @back="goBack">
    <div class="preview-box">
      <a-button class="ml-2" title="撤销" size="small">
        <RedoOutlined />
      </a-button>
      <a-button title="重做" size="small">
        <UndoOutlined />
      </a-button>
      <a-button class="ml-2" title="复原" size="small">
        <StopOutlined />
      </a-button>
      <a-button title="放大" size="small">
        <PlusCircleOutlined />
      </a-button>
      <a-button title="缩小" size="small">
        <MinusCircleOutlined />
      </a-button>
      <FlowChart :data="demoData" @click="elementClick"/>
      <b-wflow-viewer
      ref="bflow" 
      @elementClick="elementClick"
      >
  </b-wflow-viewer>
    </div>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useRoute } from 'vue-router';
  import { PageWrapper } from '@/components/Page';
  import { useGo } from '@/hooks/web/usePage';
  import { useTabs } from '@/hooks/web/useTabs';
  import { Tabs } from 'ant-design-vue';
  import { RedoOutlined, UndoOutlined,StopOutlined,PlusCircleOutlined ,MinusCircleOutlined} from '@ant-design/icons-vue';
  import { FlowChart } from '@/components/FlowChart';
  import demoData from './dataTurbo.json';

  defineOptions({ name: 'AccountDetail' });

  const ATabs = Tabs;
  const ATabPane = Tabs.TabPane;

  const route = useRoute();
  const go = useGo();
  // 此处可以得到用户ID
  const userId = ref(route.params?.id);
  const currentKey = ref('detail');
  const { setTitle } = useTabs();
  // TODO
  // 本页代码仅作演示，实际应当通过userId从接口获得用户的相关资料

  // 设置Tab的标题（不会影响页面标题）
  // setTitle('详情：用户' + userId.value);

  // 页面左侧点击返回链接时的操作
  function goBack() {
    // 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
    go('/workflow/scheme');
  }
  function elementClick(node){
    console.log(node)
  }
</script>

<style scoped lang="less">
  .preview-box{
    margin: 16px 16px 12px;
      padding: 10px;
      border-radius: 3px;
      background-color: @component-background;
      height:50vh;
  }
</style> -->

<template>
  <l-layout class="l-tab-page" :right="500" >
      <l-panel style="padding-right:0;" >
          <template #title>
              <el-button-group>
                  <el-tooltip effect="dark" :content="$t('复原')" placement="bottom">
                      <el-button  size="mini" icon="el-icon-aim" @click="resetZoom"></el-button>
                  </el-tooltip>
                  <el-tooltip effect="dark" :content="$t('放大')" placement="bottom">
                      <el-button  size="mini" icon="el-icon-zoom-in" @click="handlerZoom(0.1)"></el-button>
                  </el-tooltip>
                  <el-tooltip effect="dark" :content="$t('缩小')" placement="bottom">
                      <el-button  size="mini" icon="el-icon-zoom-out" @click="handlerZoom(-0.1)"></el-button>
                  </el-tooltip>
              </el-button-group>
          </template>
          <b-wflow-viewer
              ref="bflow" 
              @elementClick="elementClick"
              >
          </b-wflow-viewer>
      </l-panel>
      <template #right>
          <l-panel style="padding-left:0;" >
              <div class="l-auto-window" >
                  <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>
              </div>
          </l-panel>
      </template>
  </l-layout>
</template>
<script>

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'

export default {
  provide () {
      return {
          wfdesign: this
      };
  },
  components: {
      shcemeinfoConfig,

      startEventOption,
      endEventOption,
      gatewayAndOption,
      gatewayInclusiveOption,
      gatewayXorOption,
      scriptTaskOption,
      subprocessOption,
      userTaskOption,
      mylineOption
  },
  data(){
      return {
          configActiveName:'tab02',
          currentWfNode:undefined,
          wfNodeName:{
              startEvent:'开始节点',
              endEvent:'结束节点',
              gatewayAnd:'并行网关',
              gatewayInclusive:'包含网关',
              gatewayXor:'排他网关',
              scriptTask:'脚本节点',
              userTask:'审核节点',
              subprocess:'子流程',
              myline:'线条'
          },

      };
  },
  computed:{
  },
  created () {
  },
  methods:{
      resetZoom(){
          this.$refs.bflow.reset()
      },
      handlerZoom(r){
          this.$refs.bflow.handlerZoom(r)
      },
      elementClick(node){
          this.currentWfNode = node;
          if(node == undefined){
              this.configActiveName = 'tab02';  
          }
          else{
              if(node.type == 'myline'){
                  this.$nextTick(()=>{
                      this.$refs.wfcongfig && this.$refs.wfcongfig.getConditions()
                  })
                  
              }
              this.configActiveName = 'tab01';  
          }
      },
      handleGetWFData(){
          return this.$deepClone(this.$refs.bflow.getData());
      },


      resetForm(){
      },
      setForm({f_Content}){
          const scheme = JSON.parse(f_Content)

          let baseinfo = {
              undoType: scheme.undoType,
              undoDbCode: scheme.undoDbCode,
              undoDbSQL: scheme.undoDbSQL,
              undoIOCName: scheme.undoIOCName,
              undoUrl: scheme.undoUrl,

              deleteType: scheme.deleteType,
              deleteDbCode: scheme.deleteDbCode,
              deleteDbSQL: scheme.deleteDbSQL,
              deleteIOCName: scheme.deleteIOCName,
              deleteUrl: scheme.deleteUrl,


              deleteDraftType: scheme.deleteDraftType,
              deleteDraftDbCode: scheme.deleteDraftDbCode,
              deleteDraftDbSQL: scheme.deleteDraftDbSQL,
              deleteDraftIOCName: scheme.deleteDraftIOCName,
              deleteDraftUrl: scheme.deleteDraftUrl
          }
          this.$refs.shcemeinfo.setForm(baseinfo)
          this.$refs.bflow.setData(scheme.wfData)
      }
  }
}
</script>