zhangyanpeng
2024-03-04 6a72e9e44dc7278e18d55ccd5637b81a1cb2f047
src/views/common/process/config/ApprovalNodeConfig.vue
@@ -2,54 +2,54 @@
  <div>
    <el-form label-position="top" label-width="90px">
      <el-form-item label="⚙ 选择审批组或审批架构" prop="text" class="user-type">
          <el-select @change="selected(this,'group')" value-key="id" style="width: 80%;" size="small"   v-model="nodeProps.approvalGroup" placeholder="请选择审批组">
            <el-option   v-for="approvals in approvalGroups" :label="approvals.name" :value="approvals" :key="approvals.id"></el-option>
          </el-select>
        <el-select @change="selected(this,'group')" value-key="id" style="width: 80%;" size="small"
                   v-model="nodeProps.approvalGroup" placeholder="请选择审批组">
          <el-option v-for="approvals in approvalGroups" :label="approvals.name" :value="approvals"
                     :key="approvals.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="⚙ 选择审批组或审批架构" prop="text" class="user-type">
        <el-select @change="selected(this,'staff')" value-key="id" style="width: 80%;" size="small"   v-model="nodeProps.staffGroup" placeholder="请选择审批架构">
          <el-option   v-for="staffApprovals in staffGroups" :label="staffApprovals.name" :value="staffApprovals" :key="staffApprovals.id"></el-option>
        <el-select @change="selected(this,'staff')" value-key="id" style="width: 80%;" size="small"
                   v-model="nodeProps.staffGroup" placeholder="请选择审批架构">
          <el-option v-for="staff in staffGroups" :label="staff.name" :value="staff"
                     :key="staff.id"></el-option>
        </el-select>
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item label="参数名">
        <el-input style="width: 80%;"  placeholder="参数名" v-model="nodeProps.params" size="small" clearable  />
        <el-input style="width: 80%;" placeholder="参数名" v-model="nodeProps.params" size="small" clearable/>
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item label="触发事件">
        <div>
          <el-button type="primary" size="mini" icon="el-icon-plus" style="margin: 0 15px 15px 0" round @click="addConditionGroup">
          <el-button type="primary" size="mini" icon="el-icon-plus" style="margin: 0 15px 15px 0" round
                     @click="addConditionGroup">
            添加审批触发事件
          </el-button>
        </div>
        <div style="width: 100%" v-for="(group, index) in selectedNode.props.groups" :key="index + '_g'" class="group">
          <div class="group-header">
            <span class="group-name">触发事件{{index+1}}</span>
            <span class="group-name">触发事件{{ index + 1 }}</span>
            <i class="el-icon-delete" @click="delGroup(index)"></i>
          </div>
          <el-row :gutter="10" >
            <el-col :span="12"><el-select @change="selected(this)"  size="small" v-model="group.action" placeholder="请选择审批组">
              <el-option   v-for="actionItem in actions" :label="actionItem.label" :value="actionItem" :key="actionItem.value"></el-option>
            </el-select>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-select @change="selected(this)" size="small" v-model="group.action" placeholder="请选择审批组">
                <el-option v-for="actionItem in actions" :label="actionItem.label" :value="actionItem"
                           :key="actionItem.value"></el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-input   placeholder="排序" v-model="group.sort" size="small" clearable></el-input>
              <el-input placeholder="排序" v-model="group.sort" size="small" clearable></el-input>
            </el-col>
            <el-col :span="4">
              <span>java方法:</span>
            </el-col>
            <el-col :span="20">
              <el-input  placeholder="java方法" v-model="group.method" size="small" clearable></el-input>
              <el-input placeholder="java方法" v-model="group.method" size="small" clearable></el-input>
            </el-col>
          </el-row>
        </div>
      </el-form-item>
      <el-form-item label="🙅‍ 如果办理被驳回 👇">
        <el-radio-group @input="setValue" v-model="nodeProps.refuse.type">
@@ -59,26 +59,19 @@
        </el-radio-group>
        <div v-if="nodeProps.refuse.type === 'TO_NODE'">
          <span>指定节点:</span>
          <el-select style="margin-left: 10px; width: 150px;" placeholder="选择跳转节点" size="small" v-model="nodeProps.refuse.target">
          <el-select style="margin-left: 10px; width: 150px;" placeholder="选择跳转节点" size="small"
                     v-model="nodeProps.refuse.target">
            <el-option v-for="(node, i) in nodeOptions" :key="i" :label="node.name" :value="node.id"></el-option>
          </el-select>
        </div>
      </el-form-item>
    </el-form>
    <org-picker :title="pickerTitle" multiple :type="orgPickerType" ref="orgPicker" :selected="orgPickerSelected"
                @ok="selected"/>
  </div>
</template>
<script>
import OrgPicker from "@/components/common/OrgPicker";
import {getDict, getEntitySet} from "@/api/design";
export default {
  name: "ApprovalNodeConfig",
  components: {OrgPicker},
  props: {
    config: {
      type: Object,
@@ -91,19 +84,13 @@
    return {
      showOrgSelect: false,
      orgPickerSelected: [],
      orgPickerType: 'user',
      groupNames: ['1', '2', '3', '4', '6', 'F', 'G', 'H', 'I', 'J'],
      approvalGroups:[
        // {"value":'first',"label":'地区经理审批'},
        // {"value":'secound',"label":'大区经理审批'},
        // {"value":'third',"label":'商务经理审批'},
        // {"value":'four',"label":'财务经理审批'},
        // {"value":'five',"label":'总经理审批'},
      approvalGroups: [
      ],
      staffGroups:[],
      actions:[
        {"value":'before',"label":'审批前'},
        {"value":'after',"label":'审批后'},
      staffGroups: [],
      actions: [
        {"value": 'before', "label": '审批前'},
        {"value": 'after', "label": '审批后'},
      ],
      approvalTypes: [
        {name: '指定人员', type: 'ASSIGN_USER'},
@@ -131,95 +118,69 @@
      return this.$store.state.selectedNode
    },
    nodeProps() {
      // this.$store.state.selectedNode.props.staffGroup=this.$store.state.selectedNode.props.assignedUser[0]
      // //this.$store.state.selectedNode.props.staffGroup.code="SalesDirector"
      // //this.$store.state.selectedNode.props.staffGroup.id="position_sales_1"
      // console.log("this.$store.state.selectedNode.props",this.$store.state.selectedNode.props)
      return this.$store.state.selectedNode.props
    },
    select() {
      console.log("this.config--select",this.config)
      return this.config.assignedUser
    },
    pickerTitle() {
      switch (this.orgPickerType) {
        case 'user':
          return '请选择人员';
        case 'role':
          return '请选择系统角色';
        default:
          return null;
      }
    },
  },
  mounted() {
     this.getApprovalGroup();
     this.getStaffGroup();
    console.log("this.$store.state.selectedNode.props.staffGroup",this.$store.state.selectedNode.props.staffGroup)
    this.getApprovalGroup();
    this.getStaffGroup();
  },
  methods: {
    getApprovalGroup(){
      let template = {"dataname": "sys_state_board","attachMeta":true}
    getApprovalGroup() {
      let template = {"dataname": "sys_state_board", "attachMeta": true}
      getEntitySet(template).then(rsp => {
        console.log("getEntitySet", rsp.data.data)
        this.approvalGroups = rsp.data.data.entityset
        console.log("this.approvalGroups", this.approvalGroups)
      }).catch(err => this.$message.error('获取审批流程异常'))
    },
    getStaffGroup(){
      let template = {"code":"position_sales"}
    getStaffGroup() {
      let template = {"code": "position_sales"}
      getDict(template).then(rsp => {
        console.log("getDict", rsp.data.data.dictionary)
        this.staffGroups=this.$Utils.decode(rsp.data.data.dictionary.items)
        this.staffGroups.forEach(item=>item.name=item.value);
        this.staffGroups.forEach(item=>item.id=item.code);
        console.log("getDict", this.staffGroups)
        this.staffGroups = this.$Utils.decode(rsp.data.data.dictionary.items)
        this.staffGroups.forEach(item => {
          item.name = item.value
          item.id = item.code
        });
        // this.staffGroups.forEach(item => );
      }).catch(err => this.$message.error('获取审批流程异常'))
    },
    //如果切换选箱不是指定节点  那就把之前选择的指定节点信息 给清除掉 避免提交上去
    setValue(){
     if(this.nodeProps.refuse.type!=='TO_NODE'){
       this.nodeProps.refuse.target='';
     }
    setValue() {
      if (this.nodeProps.refuse.type !== 'TO_NODE') {
        this.nodeProps.refuse.target = '';
      }
    },
    delGroup(index) {
      this.selectedNode.props.groups.splice(index, 1)
    },
    addConditionGroup() {
      console.log("this.config",this.config)
      this.config.groups.push({
       // cids:[],
       // groupType: "OR",
        //conditions:[]
      })
    },
    selected(select,type) {
      console.log("输出选中select",this.nodeProps)
      this.nodeProps.assignedUser=[]
      if(type==='group'){
        this.nodeProps.staffGroup={}
    selected(select, type) {
      this.nodeProps.assignedUser = []
      if (type === 'group') {
        this.nodeProps.staffGroup = {}
        this.nodeProps.assignedUser.push({
          "id":this.nodeProps.approvalGroup.id,
          "name":this.nodeProps.approvalGroup.name,
          "type":"group"
          "id": this.nodeProps.approvalGroup.id,
          "name": this.nodeProps.approvalGroup.name,
          "type": "group"
        })
      }else{
        this.nodeProps.approvalGroup={}
      } else {
        this.nodeProps.approvalGroup = {}
        this.nodeProps.assignedUser.push(
            {
          "id":this.nodeProps.staffGroup.code,
          "name":this.nodeProps.staffGroup.value,
              "type":"staff"
        }
              "id": this.nodeProps.staffGroup.code,
              "name": this.nodeProps.staffGroup.value,
              "type": "staff"
            }
        )
      }
      console.log("assignedUser",this.config)
      this.orgPickerSelected.length = 0
    },
    removeOrgItem(index) {
      this.select.splice(index, 1)
@@ -231,13 +192,16 @@
<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.user-type {
  /deep/ .el-radio {
    width: 110px;