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

<template>
  <el-dialog
    title="设置审校步骤"
    :visible="visible"
    width="580px"
    :show-close="false"
    class="audit-steps"
    @close="dialogClose"
  >
    <div class="audit-steps__header">
      <span class="link" @click="setEnableFirstAuditNode('true')">开启初审</span>
      <span class="line"></span>
      <span class="link" @click="addAuditStep">添加步骤</span>
    </div>
    <div v-for="{ id, name, type } in node_list" :key="id" :class="['audit-item']">
      <span :class="['name', { preliminary: type === 0, final: type === 2 }]">{{ name }}</span>

      <div class="operator">
        <span v-if="type === 1" class="link" @click="deleteAuditNode(id)">删除</span>
        <span v-else-if="type === 0" class="link" @click="setEnableFirstAuditNode('false')">撤销初审</span>
      </div>
    </div>

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

<script>
import { GetAuditFlowNodeList, SetEnableFirstAuditNode, AddAuditNode, DeleteAuditNode } from '@/api/project';

export default {
  name: 'SetAuditSteps',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    bookId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      node_list: [],
    };
  },
  created() {
    this.getAuditFlowNodeList();
  },
  methods: {
    getAuditFlowNodeList() {
      GetAuditFlowNodeList({ book_id: this.bookId }).then(({ node_list }) => {
        this.node_list = node_list;
      });
    },
    /**
     * @description 启用初审节点
     * @param {'true'|'false'} is_enable - 是否启用初审节点
     */
    setEnableFirstAuditNode(is_enable) {
      SetEnableFirstAuditNode({ book_id: this.bookId, is_enable }).then(() => {
        this.getAuditFlowNodeList();
      });
    },
    /**
     * @description 添加审核节点
     * @param {string} name - 节点名称
     */
    addAuditNode(name) {
      AddAuditNode({ book_id: this.bookId, name }).then(() => {
        this.getAuditFlowNodeList();
      });
    },
    /**
     * @description 删除审核节点
     * @param {string} nodeId - 节点ID
     */
    deleteAuditNode(nodeId) {
      DeleteAuditNode({ id: nodeId }).then(() => {
        this.getAuditFlowNodeList();
      });
    },
    addAuditStep() {
      this.$prompt('', '添加审核节点', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(({ value }) => {
          this.addAuditNode(value);
        })
        .catch(() => {});
    },
    dialogClose() {
      this.$emit('update:visible', false);
      this.$emit('updateProject');
    },
  },
};
</script>

<style lang="scss" scoped>
.audit-steps {
  &__header {
    display: flex;
    align-items: center;

    .line {
      display: inline-block;
      height: 16px;
      min-height: 16px;
      margin: 0 12px;
    }
  }

  .audit-item {
    display: flex;
    column-gap: 12px;
    align-items: center;
    padding: 8px 0;

    .operator {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
    }

    .name {
      width: 300px;
      padding: 8px 4px;
      text-align: center;
      border: $border;
      border-radius: 4px;

      &.preliminary,
      &.final {
        background-color: $main-active-color;
      }
    }
  }
}
</style>