zhangyanpeng
2024-03-04 6a72e9e44dc7278e18d55ccd5637b81a1cb2f047
src/views/common/process/config/ApprovalNodeConfig.vue
@@ -2,38 +2,41 @@
  <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 @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-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>
            <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-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">
@@ -45,11 +48,8 @@
            <el-col :span="20">
              <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,14 +84,8 @@
    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":'总经理审批'},
      ],
      staffGroups:[],
      actions:[
@@ -131,76 +118,51 @@
      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)
  },
  methods: {
    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"}
      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.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='';
     }
    },
    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={}
        this.nodeProps.assignedUser.push({
@@ -218,8 +180,7 @@
        }
        )
      }
      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;