mosr-web/src/views/workflow/process/nodes/ApprovalNode.vue

<template>
  <node :title="config.name" :show-error="showError" :content="content"
        :show-avatar="config.props.assignedType === 'ASSIGN_USER'" :user-info="assignedUser"
        :error-info="errorInfo"
        :select-user="selectUser"
        :mode="mode"
        @selected="emit('selected')" @delNode="emit('delNode')" @insertNode="type => emit('insertNode', type)"
        placeholder="请设置审批人" :header-bgc="headerBgc" :header-icon="Stamp"/>
</template>

<script setup>
import Node from './Node.vue'
import {computed, defineExpose} from 'vue'
import {Stamp} from '@element-plus/icons-vue'
const emit = defineEmits(['insertNode', 'selected', 'delNode'])
const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {}
    }
  },
  mode: {
    type: String,
    default: 'design'
  }
})

const showError = ref(false)
const errorInfo = ref('')


const selectUser = computed(() => {
  return {
    show: props.config.props.assignedType === 'SELF_SELECT',
    multiple: props.config.props.selfSelect.multiple
  };
})

const assignedUser = computed(() => {
  if (props.config.props.assignedType === 'SELF_SELECT') {
    props.config.props.assignedUser = []
  }
  return props.config.props.assignedUser;
})

const headerBgc = computed(() => {
  if (props.mode === 'design' || props.mode === 'view') {
    return '#F0A32E'
  } else {
    return props.config.props.headerBgc
  }
})


const content = computed(() => {
  const config = props.config.props
  switch (config.assignedType) {
    case "ASSIGN_USER":
      if (config.assignedUser.length > 0) {
        let texts = []
        config.assignedUser.forEach(org => texts.push(org.name))
        return String(texts).replaceAll(',', '、')
      } else {
        return '请指定审批人'
      }
    case "SELF":
      return '发起人自己'
    case "SELF_SELECT":
      return config.selfSelect.multiple ? '发起人自选多人' : '发起人自选一人'
    case "LEADER_TOP":
      return '多级主管依次审批'
    case "LEADER":
      return config.leader.level > 1 ? '发起人的第 ' + config.leader.level + ' 级主管' : '发起人的直接主管'
    case "FORM_USER":
      if (!config.formUser || config.formUser === '') {
        return '表单内联系人（未选择）'
      } else {
        // let text = getFormItemById(config.formUser)
        if (text && text.title) {
          return `表单（${text.title}）内的人员`
        } else {
          return '该表单已被移除😥'
        }
      }
    case "ROLE":
      if (config.roleList.length > 0) {
        return config.roleList.map(role => {
          return role.name;
        }).join("、")
      } else {
        return '指定角色（未设置）'
      }
    default:
      return '未知设置项😥'
  }
})


//校验数据配置的合法性
const validate = (err) => {
  try {
    console.log(props.config.props.assignedType)
    switch (props.config.props.assignedType) {
      case "ASSIGN_USER":
        showError.value = !validate_ASSIGN_USER(err);
        break;
      case "SELF":
        showError.value = !validate_SELF(err);
        break;
      case "SELF_SELECT":
        showError.value = !validate_SELF_SELECT(err);
        console.log(showError.value);
        break;
      case "LEADER_TOP":
        showError.value = !validate_LEADER_TOP(err);
        break;
      case "LEADER":
        showError.value = !validate_LEADER(err);
        break;
      case "FORM_USER":
        showError.value = !validate_FORM_USER(err);
        break;
      case "ROLE":
        showError.value = !validate_ROLE(err);
        break;
      default:
        showError.value = true
        err.push("未知设置项😥")
        break;
    }
    if (props.config.props.nobody.handler === 'TO_USER' && props.config.props.nobody.assignedUser.length === 0) {
      errorInfo.value = '审批人为空时， 转交给指定人员：【请指定一个具体的人】'
      err.push('审批人为空时， 转交给指定人员：【请指定一个具体的人】')
      showError.value = true
    }
    return showError
  } catch (e) {
    console.log(e)
    return false;
  }
}
const validate_ASSIGN_USER = (err) => {
  if (props.config.props.assignedUser.length > 0) {
    return true;
  } else {
    errorInfo.value = '请指定审批人员'
    err.push(`${props.config.name} 未指定审批人员`)
    return false
  }
}
const validate_SELF_SELECT = (err) => {
  // if (!this.viewer) {
  //   return true
  // }
  // let userInfo = this.$store.state.selectUserMap.get(this.config.id);
  // if (undefined !== userInfo && Array.isArray(userInfo) && userInfo.length > 0) {
  //   return true;
  // }
  errorInfo.value = '请指定审批人员'
  err.push(`${props.config.name} 未指定审批人员`)
  return false;
}
const validate_LEADER_TOP = (err) => {
  return true;
}
const validate_LEADER = (err) => {
  return true;
}
const validate_ROLE = (err) => {
  if (props.config.props.roleList.length <= 0) {
    errorInfo.value = '请指定负责审批的系统角色'
    err.push(`${props.config.name} 未指定审批角色`)
    return false
  }
  return true;
}
const validate_SELF = (err) => {
  return true;
}
const validate_FORM_USER = (err) => {
  if (props.config.props.formUser === '') {
    errorInfo.value = '请指定表单中的人员组件'
    err.push(`${props.config.name} 审批人为表单中人员，但未指定`)
    return false
  }
  return true;
}
const validate_REFUSE = (err) => {
  return true;
}

defineExpose({
  validate
})
</script>

<style scoped>

</style>