admin-ui/src/components/gFlow/propertySetting/CommonProperty.vue

<template>
  <div>
    <el-form label-width="130px" :model="formData">
      <el-form-item label="节点名称">
        <el-input v-model="formData.text" :disabled="readonly"></el-input>
      </el-form-item>
      <el-form-item label="审核方式" v-if="nodeType===NodeTypeStart">
        <el-select v-model="formData.actionRule" placeholder="请选择审核方式" clearable :disabled="readonly">
          <el-option v-for="item in actionRuleOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="接收方式" v-else>
        <el-select v-model="formData.actionRule" placeholder="请选择接收方式" clearable :disabled="readonly">
          <el-option v-for="item in actionRuleOption"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
          />
        </el-select>
      </el-form-item>
			<el-form-item label="指定上级部门" v-show="formData.actionRule===FlowCheckRuleFormCreatorDeptPrev || formData.actionRule===FlowCheckRuleFormCreatorDeptLeaderPrev">
				<el-input-number
					v-model="formData.deptProv"
					style="width: 200px"
					placeholder="Please input"
				>
					<template #prefix><span>上</span></template>
					<template #suffix><span>级部门</span></template>
				</el-input-number>
			</el-form-item>
      <el-form-item label="指定角色" v-show="formData.actionRule===FlowCheckRuleRole">
        <el-cascader
            :options="roleList"
            :props="{ checkStrictly: true,emitPath: false, value: 'id', label: 'name',multiple: true }"
            placeholder="请选择角色"
            clearable
            class="w100"
            v-model="formData.roleIds"
            :disabled="readonly"
        >
          <template #default="{ node, data }">
            <span>{{ data.name }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
      </el-form-item>
      <el-form-item label="指定部门" prop="deptId" v-show="formData.actionRule===FlowCheckRuleDept ||formData.actionRule===FlowCheckRuleDeptLeader">
        <el-cascader
            :options="deptData"
            :props="{ checkStrictly: true,emitPath: false, value: 'deptId', label: 'deptName',multiple: true }"
            placeholder="请选择部门"
            clearable
            class="w100"
            v-model="formData.deptIds"
            :disabled="readonly"
        >
          <template #default="{ node, data }">
            <span>{{ data.deptName }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
      </el-form-item>
      <el-form-item label="指定岗位" prop="postIds" v-show="formData.actionRule===FlowCheckRulePost">
        <el-select v-model="formData.postIds" placeholder="请选择" clearable class="w100" multiple :disabled="readonly">
          <el-option
              v-for="post in postList"
              :key="'post-'+post.postId"
              :label="post.postName"
              :value="post.postId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="指定人员"  v-show="formData.actionRule===FlowCheckRuleUser">
        <select-user v-model="formData.userIds"></select-user>
      </el-form-item>
      <el-form-item label="多人审批处理规则"  >
        <el-select v-model="formData.approveRule" placeholder="请选择多人审批处理规则" style="width: 100%" :disabled="readonly">
          <el-option v-for="item in approveRuleOption"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="网关审批处理规则" v-show="nodeType===NodeTypeConcurrent||nodeType===NodeTypePush||nodeType===NodeTypeCondition">
        <el-select v-model="nodeType" placeholder="请选择多人审批处理规则" :disabled="true" style="width: 100%">
          <el-option v-for="item in conditionRuleOption"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="发送通知" >
        <el-checkbox-group v-model="formData.notice" :disabled="readonly">
          <el-checkbox value="sms" >短信</el-checkbox>
          <el-checkbox value="email" >邮件</el-checkbox>
          <el-checkbox value="innerNotice" >站内通知</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="允许退回" v-show="nodeType!==NodeTypeStart">
        <el-radio-group v-model="formData.rollback" :disabled="readonly">
          <el-radio :value="1">是</el-radio>
          <el-radio :value="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="分支条件" v-show="nodeType===NodeTypeCondition">
        <Branch ref="branchRef" :modelValue="formData.nodeExt" @setNodeExt="setNodeExt"></Branch>
      </el-form-item>
       <el-form-item>
        <el-button type="primary" @click="onSubmit" v-if="!readonly">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import {NodeConditionData} from "/@/components/gFlow/propertySetting/model";

interface UserInfo  {
  userNickname:string;
  userId:number;
}
interface PostInfo{
  postId:number;
  postName:string;
}
import {getDeptTree, getParams, getUserByIds} from "/@/api/system/user";
import selectUser from "/@/components/selectUser/index.vue";
import LogicFlow from "@logicflow/core";
import {computed, getCurrentInstance, onMounted, reactive, ref, toRefs} from "vue";
import Branch from "/@/components/gFlow/propertySetting/branch.vue"
import {
  FlowCheckRuleAll,
  FlowCheckRuleDept,
  FlowCheckRuleDeptLeader,
  FlowCheckRuleFormCreator,
  FlowCheckRuleFormCreatorDept,
  FlowCheckRuleFormCreatorDeptLeader,
	FlowCheckRuleFormCreatorDeptPrev,
	FlowCheckRuleFormCreatorDeptLeaderPrev,
  FlowCheckRulePost,
  FlowCheckRuleRole,
  FlowCheckRuleUser, NodeTypeConcurrent, NodeTypeCondition, NodeTypePush, NodeTypeStart
} from "/@/components/gFlow/consts";
defineOptions({ name: "CommonProperty"})
const branchRef = ref()
const { proxy } = <any>getCurrentInstance();
const props = defineProps({
  nodeData: {
    type: Object,
    default: () => {
      return null
    }
  },
  lf:{
    type:LogicFlow,
    default: () => {
      return {} as LogicFlow
    }
  },
  readonly:{
    type:Boolean,
    default:false
  }
})
const nodeType = computed(()=>{
  return props.nodeData.type.replace('Done','')
})
const emit = defineEmits(['onClose'])
const selectUserRef =ref()
const state = reactive({
  text: '',
  roleList:[],//角色选项列表
  postList:[] as PostInfo[],//岗位选项列表
  deptData:[],//部门选项列表
  actionRuleOption:[
    {
      label:'任何人',
      value:FlowCheckRuleAll
    },
    {
      label:'指定角色',
      value:FlowCheckRuleRole
    },
    {
      label:'指定部门',
      value:FlowCheckRuleDept
    },
    {
      label:'指定部门负责人',
      value:FlowCheckRuleDeptLeader
    },
    {
      label:'指定人员',
      value:FlowCheckRuleUser
    },
    {
      label:'指定岗位',
      value:FlowCheckRulePost
    },
    {
      label:'表单业务创建人',
      value:FlowCheckRuleFormCreator
    },
    {
      label:'表单业务创建人所属部门',
      value:FlowCheckRuleFormCreatorDept
    },
    {
      label:'表单业务创建人所属部门负责人',
      value:FlowCheckRuleFormCreatorDeptLeader
    },
		{
			label:'表单业务创建人所属上级部门',
			value:FlowCheckRuleFormCreatorDeptPrev
		},
		{
			label:'表单业务创建人所属上级部门负责人',
			value:FlowCheckRuleFormCreatorDeptLeaderPrev
		}
  ],
  approveRuleOption:[
    {
      label:'抢办模式（任何人第一个处理则通过）',
      value:1
    },
    {
      label:'顺序执行（所有人按顺序执行完才通过）',
      value:2
    },
    {
      label:'并行执行（所有人执行完才通过）',
      value:3
    },
  ],
  //分支条件审核规则
  conditionRuleOption:[
    {label:"并行网关-所有分支都必须完成审核",value:NodeTypeConcurrent},
    {label:"互斥网关-所有分支中只能有其中一条审核",value:NodeTypePush},
    {label:"条件网关-符合条件的某条分或多条支进行审核",value:NodeTypeCondition},
  ],
  formData: {
    text: '',
    actionRule: undefined,
    roleIds:[],
    deptIds:[],
    userIds:[],
    postIds:[],
    approveRule:'',
    notice:[],
    rollback:undefined,
    nodeExt:[] as Array<NodeConditionData[]>,
		deptProv:1
  }
})
const { formData, deptData, roleList, postList, actionRuleOption, approveRuleOption, conditionRuleOption} = toRefs(state)
onMounted(()=>{
  const { properties, text } = props.nodeData
  if (properties) {
    state.formData = Object.assign({}, state.formData, properties)
    //设置条件
    branchRef.value.initNodeData(state.formData.nodeExt)
  }
  if (text && text.value) {
    state.formData.text = text.value
  }
  if (text && text.value) {
    state.text = text.value
  }
  getSelector()
})
const getSelector = () =>{
  //获取角色岗位选项
  getParams().then((res)=>{
    const roles = res.data.roleList??[];
    const roleAccess = res.data.roleAccess??[];
    roles.map((item:any)=>{
      if(!roleAccess.includes(item.id)){
        item.disabled = true
      }
    })
    state.roleList = proxy.handleTree(roles??[], "id","pid","children",true);
    state.postList = res.data.posts??[];
  });
  getDeptTree().then((res)=>{
    state.deptData = res.data.deps
  })
}
const onSubmit = () =>{
  branchRef.value.setNodeExt()
  const { id } = props.nodeData
  props.lf.setProperties(id, {
    ...state.formData
  });
  props.lf.updateText(id, state.formData.text);
  emit('onClose')
}
const setNodeExt = (data:Array<NodeConditionData[]>) =>{
  state.formData.nodeExt = data
}
</script>
<style scoped>

</style>