eep_page/src/views/personal_workbench/project/components/SetAuditor.vue

<template>
  <el-dialog :title="title" :visible="visible" width="750px" :close-on-click-modal="false" @close="dialogClose">
    <el-table :data="flow_node_list" border>
      <el-table-column label="序号" width="60" align="center" header-align="center">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="审校步骤" prop="name" width="120" header-align="center" align="center" />
      <el-table-column label="审校人" width="180" header-align="center" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.auditor_list.map((auditor) => auditor.name).join(', ') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="主审校人" width="120" header-align="center" align="center">
        <template slot-scope="{ row }">
          <span>{{ row?.main_auditor?.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" header-align="center" align="center">
        <template slot-scope="{ row }">
          <span class="link" @click="openSetUserDialog(row.id, 'auditor')">设置审校人</span>
          <span class="link" @click="openSetUserDialog(row.id, 'mainAuditor')">设置主审校人</span>
        </template>
      </el-table-column>
    </el-table>

    <div slot="footer">
      <el-button @click="dialogClose">关闭</el-button>
    </div>

    <SetUser
      :id="user.flow_node_id"
      :member-list="userList"
      :type="user.type"
      :visible.sync="user.visible"
      @SetAuditor="setAuditor"
      @SetMainAuditor="setMainAuditor"
    />
  </el-dialog>
</template>

<script>
import SetUser from './SetUser.vue';

import { SetAuditor, SetMainAuditor, GetChapterNodeAuditorList } from '@/api/project';

export default {
  name: 'SetAuditor',
  components: {
    SetUser,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: '',
    },
    memberList: {
      type: Array,
      default: () => [],
    },
    bookId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      flow_node_list: [],
      chapter_node_name_path: '',
      auditor_desc: '',
      user: {
        type: 'auditor',
        visible: false,
        flow_node_id: '',
      },
    };
  },
  computed: {
    title() {
      return `设置审校人（${this.chapter_node_name_path}）`;
    },
    userList() {
      if (this.user.type === 'auditor') {
        return this.memberList;
      } else if (this.user.type === 'mainAuditor') {
        return this.flow_node_list.find((item) => item.id === this.user.flow_node_id).auditor_list;
      }
      return [];
    },
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.getChapterNodeAuditorList();
      }
    },
  },
  methods: {
    dialogClose() {
      this.$emit('update:visible', false);
      this.$emit('close');
      this.flow_node_list = [];
      this.chapter_node_name_path = '';
      this.auditor_desc = '';
      this.user = {
        type: 'auditor',
        visible: false,
        flow_node_id: '',
      };
    },
    openSetUserDialog(flow_node_id, type) {
      this.user.flow_node_id = flow_node_id;
      this.user.type = type;
      this.user.visible = true;
    },
    /**
     * @description 设置审校人
     * @param {object} param0 - 参数对象
     * @param {string} param0.flow_node_id - 审校节点ID
     * @param {Array<string>} param0.user_id_list - 用户ID列表
     */
    setAuditor({ flow_node_id, user_id_list }) {
      SetAuditor({ book_id: this.bookId, book_chapter_node_id: this.id, flow_node_id, user_id_list }).then(() => {
        this.$message.success('设置审校人成功');
        this.getChapterNodeAuditorList();
      });
    },
    /**
     * @description 设置主审校人
     * @param {object} param0 - 参数对象
     * @param {string} param0.flow_node_id - 审校节点ID
     * @param {string} param0.user_id - 用户ID
     */
    setMainAuditor({ flow_node_id, user_id }) {
      SetMainAuditor({ book_id: this.bookId, book_chapter_node_id: this.id, flow_node_id, user_id }).then(() => {
        this.$message.success('设置主审校人成功');
        this.getChapterNodeAuditorList();
      });
    },
    getChapterNodeAuditorList() {
      GetChapterNodeAuditorList({ book_id: this.bookId, book_chapter_node_id: this.id }).then(
        ({ flow_node_list, chapter_node_name_path, auditor_desc }) => {
          this.flow_node_list = flow_node_list;
          this.chapter_node_name_path = chapter_node_name_path;
          this.auditor_desc = auditor_desc;
        },
      );
    },
  },
};
</script>

<style lang="scss" scoped></style>