vue-vben-admin/src/components/ProcessDesigner/package/penal/PropertiesPanel.vue

<template>
  <div :class="prefixCls" :style="{ width: `${props.width}px` }">
    <a-tabs v-model:activeKey="configActiveName">
      <a-tab-pane :tab="data.wfNodeName" key="1" >
        <start-event-option ref="startRef" :element="data.currentWfNode"
          :class="data.currentWfNode.type=='bpmn:StartEvent' ? '' : 'hidden'"></start-event-option>
        <user-task-option ref="taskRef" :element="data.currentWfNode" :class="data.currentWfNode.type=='bpmn:Task' ? '' : 'hidden'">
        </user-task-option>
        <end-event-option ref="endRef" :element="data.currentWfNode"
          :class="data.currentWfNode.type=='bpmn:EndEvent' ? '' : 'hidden'"></end-event-option>
        <subprocess-option ref="subprocessRef" :element="data.currentWfNode"
          :class="data.currentWfNode.type=='bpmn:SubProcess' ? '' : 'hidden'"></subprocess-option>
      </a-tab-pane>
      <a-tab-pane tab="流程属性" key="2">
        <shcemeinfo-config ref="shcemeinfoRef" :disabled="true"></shcemeinfo-config>
      </a-tab-pane>
      <a-tab-pane key="3" tab="发起权限" force-render>
        <auth-config ref="authRef"></auth-config>
      </a-tab-pane>

    </a-tabs>
  </div>
</template>
<script lang="ts" setup>
  import { h, reactive, onMounted, defineProps, computed, defineEmits, provide, watch, ref, inject } 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';
  import {lr_AESEncrypt} from '../utils.ts'
  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 './endEvent/index.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 './subprocess/index.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
    },
    element: Object
  })
  const configActiveName = ref('2')
  const data = reactive({
    currentWfNode: undefined,
    wfNodeName: ""
  })
  watch(
    () => props.element,
    (newVal, oldVal) => {
      var typeName = newVal.type.replace('bpmn:', '')
      console.log(newVal)
      if (newVal.type == "bpmn:Process") {
        data.currentWfNode = {
          type: newVal.type
        }
        configActiveName.value = '2'
      } else {
        data.currentWfNode = newVal
        configActiveName.value = '1'
        switch (typeName) {
          case 'StartEvent':
            data.wfNodeName = "开始节点"
            data.currentWfNode = {
              id: newVal.id,
              type: newVal.type
            }
            break;
          case 'EndEvent':
            data.wfNodeName = "结束节点"
            data.currentWfNode = {
              id: newVal.id,
              type: newVal.type
            }
            break;
          case 'Task':
            data.wfNodeName = "审核节点"
            data.currentWfNode = {
              id: newVal.id,
              type: newVal.type
            }
            break;
          case 'SubProcess':
            data.wfNodeName = "子流程"
            data.currentWfNode = {
              id: newVal.id,
              type: newVal.type
            }
            break;

          default:
            break;
        }
      }
    }
  )


  function scriptTaskNodeInit(node) {
    node.executeType = '1'
    node.sqlDb = ''
    node.sqlStr = ''
    node.sqlStrRevoke = ''
    node.apiUrl = ''
    node.apiUrlRevoke = ''
    node.ioc = ''
    node.iocRevoke = ''

  }
  function mylineNodeInit(node) {
    const wfdata = this.handleGetWFData();
    const fromNode = wfdata.find(t => t.id == node.from)
    node.lineConditions = ''
    if (fromNode.type == 'userTask') {
      if (fromNode.btnlist.findIndex(t => t.code == 'agree' && !t.hidden) != -1) {
        node.lineConditions = 'agree' // 流转条件
      }
    }
  }
  const startRef = ref < any > ()
  const shcemeinfoRef = ref < any > ()
  const authRef = ref < any > ()
  const taskRef = ref < any > ()
  const endRef = ref < any > ()
  const subprocessRef = ref < any > ()

  function getPanel() {
    // 1.获取流程配置基础属性
    let baseinfo = shcemeinfoRef.value.getForm();
    // 2.获取流程权限信息
    let auth = authRef.value.getForm();

    let startFrom = startRef.value.getForm();
    let taskFrom = taskRef.value.getForm();
    let endFrom = endRef.value.getForm();
    let subprocessFrom = subprocessRef.value.getForm();
    let wfData = []
    wfData.push(startFrom)
    wfData.push(taskFrom)
    wfData.push(endFrom)
    wfData.push(subprocessFrom)
    // 3.流程节点信息
    wfData.forEach(node => {
      if (node.type == 'myline' && !node.isInit) {
        node.isInit = true
        node.lineConditions = ''
        const fromNode = this.wfData.find(t => t.id == node.from)
        if (fromNode.type == 'userTask') {
          if (fromNode.btnlist.findIndex(t => t.code == 'agree' && !t.hidden) != -1) {
            node.lineConditions = 'agree' // 流转条件
          }
        }
      }
    });

    let scheme = {
      wfData: wfData,

      undoType: baseinfo.undoType,
      undoDbCode: baseinfo.undoDbCode,
      undoDbSQL: baseinfo.undoDbSQL,
      undoIOCName: baseinfo.undoIOCName,
      undoUrl: baseinfo.undoUrl,

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


      deleteDraftType: baseinfo.deleteDraftType,
      deleteDraftDbCode: baseinfo.deleteDraftDbCode,
      deleteDraftDbSQL: baseinfo.deleteDraftDbSQL,
      deleteDraftIOCName: baseinfo.deleteDraftIOCName,
      deleteDraftUrl: baseinfo.deleteDraftUrl,

    };
    let dto = {
      schemeinfo: {
        f_Code: baseinfo.f_Code,
        f_Name: baseinfo.f_Name,
        f_Category: baseinfo.f_Category,
        f_EnabledMark: baseinfo.f_EnabledMark,
        f_Mark: baseinfo.f_Mark,
        f_IsInApp: baseinfo.f_IsInApp,
        f_AuthType: auth.f_AuthType,
        f_Description: baseinfo.f_Description,
        f_Icon: baseinfo.f_Icon,
        f_Color: baseinfo.f_Color,
        f_SchemeId: baseinfo.f_SchemeId,
      },
      schemeAuthList: auth.f_AuthType == 1 ? [] : auth.authData.map(t => {
        return {
          f_ObjId: t.id,
          f_ObjName: t.name,
          f_ObjType: t.type
        };
      }),
      scheme: {
        f_Content: lr_AESEncrypt(JSON.stringify(scheme), "learun")
      }
    }
    console.log(dto)
    return dto
  }
  defineExpose({
    getPanel
  })

</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;
  }
  .hidden{
    display: none;
  }
</style>