cz-hjjc-oa/src/views/flow/components/assign.vue

<template>
  <div>
    <vxe-modal
      :value="visible"
      show-footer
      :z-index="zIndex"
      title="转办"
      show-zoom
      show-confirm-button
      :width="640"
      :height="540"
      @input="e => $emit('update:visible',e)"
    >
      <div>
        <div class="steps">
          <el-steps :space="120" finish-status="success" align-center>
            <el-step
              :title="node.name"
              status="finish"
              :icon="isLastNode ? 'el-icon-check' : 'el-icon-edit'"
            ></el-step>
            <el-step
              v-if="!isLastNode"
              title="流转到下一节点"
              icon="el-icon-right"
              status="wait"
            ></el-step>
          </el-steps>
        </div>

        <el-divider></el-divider>

        <template v-if="!isLastNode">
          <div class="next-nodes">
            <div class="next-nodes__label">下一节点</div>

            <div>
              <el-radio-group v-model="form.next_node_id" @change="pickUsers = node2Users.get(form.next_node_id)">
                <el-radio v-for="node in node.nextNodes" :label="node.id">{{ node.name }}</el-radio>
              </el-radio-group>
            </div>
          </div>

          <el-divider></el-divider>

          <div class="users">
            <div class="users__label">承办人员</div>

            <div>
              <el-radio-group v-model="form.user_id">
                <div v-for="group in pickUsers" :key="group.id">
                  <div class="group-name">{{ group.name }}</div>
                  <el-radio v-for="user in group.users" :label="user.id">{{ user.name }}</el-radio>
                </div>
              </el-radio-group>
            </div>
          </div>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit"
          >{{ isLastNode ? '结束流程' : '确 定'}}</el-button
        >
      </span>
    </vxe-modal>
  </div>
</template>

<script>
import { getNextNodeUsers, assign } from "@/api/flow";
import { PopupManager } from 'element-ui/lib/utils/popup'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    config: Object,
    result: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      zIndex: PopupManager.nextZIndex(),
      form: {
        cc_users: [],
        user_id: "",
        next_node_id: "",
      },

      node2Users: new Map(),
      pickUsers: [],
    };
  },
  methods: {
    async getNextNodesUsers() {
      try {
        const nodeIds = this.node?.nextNodes?.map(node => node.id);
        const res = await Promise.all(nodeIds.map(nodeId => getNextNodeUsers({
          id: this.result.id,
          next_node_id: nodeId,
        },false)));

        res.forEach((group, index) => {
          this.node2Users.set(nodeIds[index], group.users)
        })
      } catch (err) {
        console.error(err)
      }
    },

    async submit() {
      try {
        if(this.isLastNode) {
          await assign(this.result.id)
        } else {
          await assign(this.result.id, this.form)
        }
        this.$router.push("/flow/list/handled");
      } catch(err) {

      }
    }
  },
  computed: {
    title() {
      return this.config?.customModel?.name + '流转'
    },
    node() {
      return this.config?.currentNode || {};
    },
    isLastNode() {
      return this.node?.category === 'end'
    }
  },
  watch: {
    visible(newVal) {
      if(newVal) {
        this.zIndex = PopupManager.nextZIndex()


        if(this.node && this.node.nextNodes && this.node.nextNodes?.length > 0 && !this.isLastNode) {
          this.getNextNodesUsers()
        }
      }
    }
  },
  created() {}
};
</script>

<style scoped lang="scss">
.next-nodes,.users {
  display: flex;

  &__label {
    flex-basis: 100px;
    font-weight: 600;
    color: #666;
  }
  .group-name {
    font-weight: 600;
    font-size: 13px;
    color: #98a6ad;
    line-height: 2;
  }
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
::v-deep .steps {
  display: flex;
  justify-content: center;
}
</style>