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

<template>
  <div>
    <el-dialog
      :title="title"
      width="920px"
      :visible.sync="visible"
      :fullscreen="$store.getters.device === 'mobile'"
      append-to-body
      :show-close="false"
    >
      <div>
        <div class="steps">
          <el-steps :space="120" finish-status="success" align-center>
            <el-step
              :title="node.name"
              status="finish"
              icon="el-icon-edit"
            ></el-step>
            <el-step
              title="流转到下一节点"
              icon="el-icon-right"
              status="wait"
            ></el-step>
          </el-steps>
        </div>

        <el-divider></el-divider>

        <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>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getNextNodeUsers, assign } from "@/api/flow";

export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    config: Object,
    result: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      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 {
        await assign(this.result.id, this.form)
        this.$router.push("/flow/list");
      } catch(err) {

      }
    }
  },
  computed: {
    title() {
      return this.config?.customModel?.name + '流转'
    },
    node() {
      return this.config?.currentNode || {};
    },
  },
  watch: {
    // node: {
    //   handler:function (newVal) {
    //     if(newVal && newVal.nextNodes && newVal.nextNodes?.length > 0) {
    //       this.getNextNodesUsers()
    //     }
    //   },
    //   immediate: true
    // },
    visible(newVal) {
      if(newVal) {
        if(this.node && this.node.nextNodes && this.node.nextNodes?.length > 0) {
          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;
}
</style>