fs-admin/src/components/workflow/WorkflowEdit.vue

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { addFlow, getFlow, putFlow, getExecuteFlow } from '@/api/workflow'
import { useWorkflow } from '@/stores/workflow'
const workFlow = useWorkflow()
const emits = defineEmits(['click-change', 'previous-step'])
const tipList = ref<any>([])
let tipVisible = ref(false)
let islook = ref(false)
let nowVal = ref(100)
let processConfig = ref<any>({
  nodeConfig: {
    nodeName: '流程发起',
    nodeType: 0,
    priorityLevel: '',
    approvalType: 'or',
    subjects: [],
    copyTo: [],
    settype: '',
    directorLevel: '',
    examineMode: '',
    noHanderAction: '',
    ccSelfSelectFlag: '',
    condGroup: {
      type: 'and',
      items: []
    },
    nodeUserList: [],
    childNode: {},
    conditionNodes: []
  }
})
let nodeConfig = ref({})
let workflowId = ref('')
let state = ref<any>('')
let operateShow = ref(false)
const init = (row: any) => {
  workflowId = row.id
  state = row.state
  if (row.state == 1 || !row.state) {
    // 新增流程
    let { nodeConfig: nodes } = processConfig.value
    nodeConfig.value = nodes
  } else if (row.state == 2) {
    operateShow.value = row.operateShow
    islook.value = row.islook
    getFlow({
      workflowId: workflowId
    }).then((res: any) => {
      processConfig.value = JSON.parse(res.flowExpr)
      let { nodeConfig: nodes } = JSON.parse(res.flowExpr)
      nodeConfig.value = nodes
    })
  } else if (row.state == 3) {
    operateShow.value = row.operateShow
    islook.value = row.islook
    getExecuteFlow({
      workflowExecuteId: workflowId
    }).then((res: any) => {
      processConfig.value = JSON.parse(res.flowExpr)
      let { nodeConfig: nodes } = JSON.parse(res.flowExpr)
      nodeConfig.value = nodes
    })
  }
}
const reErr = (childNode: any) => {
  if (childNode) {
    let { nodeType, error, nodeName, conditionNodes } = childNode
    if (nodeType == 1 || nodeType == 4) {
      if (error) {
        tipList.value.push({
          name: nodeName,
          type: ['', '审核人', '抄送人'][nodeType]
        })
      }
      reErr(childNode)
    } else if (nodeType == 3) {
      reErr(childNode)
    } else if (nodeType == 2) {
      reErr(childNode)
      for (var i = 0; i < conditionNodes.length; i++) {
        if (conditionNodes[i].error) {
          tipList.value.push({ name: conditionNodes[i].nodeName, type: '条件' })
        }
        reErr(conditionNodes[i])
      }
    }
  } else {
    childNode = null
  }
}
const saveSet = async () => {
  workFlow.setIsTried(true)
  tipList.value = []
  reErr(nodeConfig.value)
  if (tipList.value.length != 0) {
    tipVisible.value = true
    return
  }
  processConfig.value.nodeConfig = nodeConfig.value
  if (state == 1 || !state) {
    addFlow({
      workflowId: workflowId,
      firstNode: processConfig.value.nodeConfig.childNode,
      flowExpr: JSON.stringify(processConfig.value)
    }).then((res: any) => {
      ElMessage({
        type: 'success',
        message: res.msg
      })
      closeDialog()
      emits('click-change')
    })
  } else {
    putFlow({
      workflowId: workflowId,
      firstNode: processConfig.value.nodeConfig.childNode,
      flowExpr: JSON.stringify(processConfig.value)
    }).then((res: any) => {
      ElMessage({
        type: 'success',
        message: res.msg
      })
      closeDialog()
      emits('click-change')
    })
  }
}
const zoomSize = (type: any) => {
  if (type == 1) {
    if (nowVal.value == 50) {
      return
    }
    nowVal.value -= 10
  } else {
    if (nowVal.value == 300) {
      return
    }
    nowVal.value += 10
  }
}
const resetForm = (formEl: any | undefined) => {
  emits('previous-step')
}
const closeDialog = () => {
  processConfig.value = {
    nodeConfig: {
      nodeName: '流程发起',
      nodeType: 0,
      priorityLevel: '',
      approvalType: 'or',
      subjects: [],
      copyTo: [],
      settype: '',
      directorLevel: '',
      examineMode: '',
      noHanderAction: '',
      ccSelfSelectFlag: '',
      condGroup: {
        type: 'and',
        items: []
      },
      nodeUserList: [],
      childNode: {},
      conditionNodes: []
    }
  }
}
defineExpose({
  init
})
</script>
<template>
  <div class="m-t-10">
    <div style="height: 800px">
      <section class="dingflow-design">
        <div class="zoom">
          <div class="zoom-out" :class="nowVal == 50 && 'disabled'" @click="zoomSize(1)"></div>
          <span>{{ nowVal }}%</span>
          <div class="zoom-in" :class="nowVal == 300 && 'disabled'" @click="zoomSize(2)"></div>
        </div>
        <div class="box-scale" :style="`transform: scale(${nowVal / 100});`">
          <nodeWrap v-model:nodeConfig="nodeConfig" :operateShow="operateShow" />
          <div class="end-node">
            <div class="end-node-circle"></div>
            <div class="end-node-text">
              <el-button type="primary">流程结束</el-button>
            </div>
          </div>
        </div>
      </section>
    </div>
    <errorDialog v-model:visible="tipVisible" :list="tipList" />
    <approverDrawer :operateShow="operateShow" />
    <copyerDrawer :operateShow="operateShow" />
    <conditionDrawer :workflowId="workflowId" :operateShow="operateShow" :islook="islook" />
    <div class="flex justify-end w-full m-t-10" v-if="!operateShow">
      <el-button size="default" @click="resetForm">上一步</el-button>
      <el-button size="default" type="primary" @click="saveSet">确认</el-button>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.error-modal-list {
  width: 455px;
}
</style>