eep_page/src/views/personal_workbench/project/ProjectInfoManage.vue

<template>
  <div class="project-info">
    <MenuPage cur-key="project" />

    <div class="project-info__header">
      <div class="menu-container">
        <span class="name">{{ project.name }}</span>
      </div>
      <div class="courseware">
        <span class="name-path"></span>
        <div class="operator">
          <span class="link" @click="$router.push({ path: `/personal_workbench/project` })">返回项目列表</span>
        </div>
      </div>
    </div>

    <main class="project-info-manage">
      <div class="table-fourcolumn">
        <span class="label">项目名称</span>
        <div class="project-item">
          <span>{{ project.name }}</span>
          <span class="link">更改</span>
        </div>
        <span class="label">项目分类</span>
        <div class="project-item">
          <span>{{ project.category }}</span>
          <span class="link">更改</span>
        </div>
        <span class="label">作品标签</span>
        <div class="project-item">
          <span>
            <span v-for="(label, index) in project.label_list" :key="index">
              {{ label }}{{ index < project.label_list.length - 1 ? '，' : '' }}
            </span>
          </span>
          <span class="link">更改</span>
        </div>
        <span class="label">语种</span>
        <div class="project-item">
          <span>{{ project.language }}</span>
          <span class="link">更改</span>
        </div>
        <span class="label">所属课题</span>
        <div class="project-item">
          <span>{{ project.topic }}</span>
          <span class="link">更改</span>
        </div>
        <span class="label">出版单位</span>
        <div class="project-item">
          <span>{{ project.publisher }}</span>
          <span class="link">更改</span>
        </div>
        <span class="label" style="line-height: 16px">预计容量<br />（课数）</span>
        <div class="project-item">
          <span>{{ project.content_count_YG }}</span>
          <span class="link">更改</span>
        </div>
        <span class="label">预计字数</span>
        <div class="project-item">
          <span>{{ project.word_count_YG }}</span>
          <span class="link">更改</span>
        </div>
        <span class="label">计划出版时间</span>
        <div class="project-item">
          <span>{{ project.plan_publish_date }}</span>
          <span class="link">更改</span>
        </div>
        <span class="label">读者对象</span>
        <div class="project-item">
          <span>{{ project.reader }}</span>
          <span class="link">更改</span>
        </div>
        <span class="label">项目组长</span>
        <div class="project-item">
          <span>{{ project.leader_name_desc }}</span>
          <span class="link" @click="selectLeader">更改</span>
        </div>
        <span class="label">项目成员</span>
        <div class="project-item">
          <span>{{ project.member_name_desc }}</span>
          <span class="link" @click="selectMembers">更改</span>
        </div>
        <span class="label">创建人</span>
        <div class="project-item">
          <span>{{ project.creator_name }}</span>
        </div>
        <span class="label">创建时间</span>
        <div class="project-item">
          <span>{{ project.create_time }}</span>
        </div>
      </div>

      <div class="table-twocolumn">
        <span class="label">内容简介</span>
        <div class="project-item">
          <span>{{ project.content_intro }}</span>
          <span class="link">更改</span>
        </div>
        <span class="label">选题背景</span>
        <div class="project-item">
          <span>{{ project.background }}</span>
          <span class="link">更改</span>
        </div>
        <span class="label">作者简介</span>
        <div class="project-item">
          <span>{{ project.author_intro }}</span>
          <span class="link">更改</span>
        </div>
      </div>
    </main>

    <selectMembers
      :visible.sync="visibleMembers"
      :title="selectMembersTitle"
      :selected-list="list[type]"
      @confirm="handleSelectedMembers"
    />
  </div>
</template>

<script>
import { GetProjectInfo, SetProjectMember } from '@/api/project';
import { GetUserList_ID } from '@/api/user';

import selectMembers from '@/views/create_project/selectProjectMembers.vue';
import MenuPage from '@/views/personal_workbench/common/menu.vue';

export default {
  name: 'ProjectInfoManage',
  components: {
    selectMembers,
    MenuPage,
  },
  data() {
    return {
      id: this.$route.params.id,
      isManage: this.$route.query.isManage,
      labelInput: '',
      selectMembersTitle: '',
      visibleMembers: false,
      type: '',
      list: {
        leader: [],
        member: [],
      },
      project: {
        name: '',
        category: '',
        label_list: [],
        language: '',
        topic: '',
        publisher: '',
        content_intro: '',
        background: '',
        author_intro: '',
        content_count_YG: 100,
        word_count_YG: 100000,
        plan_publish_date: '', // 计划出版时间
        reader: '', // 读者对象
        leader_id_list: [], // 组长列表
        member_id_list: [], // 组员列表
        creator_name: '', // 创建人名称
        create_time: '', // 创建时间
        leader_name_desc: '', // 组长名称描述
        member_name_desc: '', // 组员名称描述
      },
      formRules: {
        name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
      },
    };
  },
  created() {
    this.getProjectInfo();
  },
  methods: {
    getProjectInfo() {
      GetProjectInfo({ id: this.id }).then(({ project_info }) => {
        this.project = project_info;
        this.getUserList_ID(project_info.leader_id_list, 'leader');
        this.getUserList_ID(project_info.member_id_list, 'member');
      });
    },
    // 处理标签输入
    labelChange() {
      if (this.labelInput.trim() !== '') {
        this.project.label_list.push(this.labelInput.trim());
        this.labelInput = ''; // 清空输入框
      }
    },
    selectLeader() {
      this.selectMembersTitle = '选择组长';
      this.type = 'leader';
      this.visibleMembers = true;
    },
    selectMembers() {
      this.selectMembersTitle = '选择项目成员';
      this.type = 'member';
      this.visibleMembers = true;
    },
    /**
     * 处理选择的成员
     * @param {Array} selectedUsers - 选中的用户列表
     */
    handleSelectedMembers(selectedUsers) {
      if (this.type === 'leader') {
        this.leaderNames = selectedUsers.map((user) => user.real_name).join('；');
        this.project.leader_id_list = selectedUsers.map((user) => user.id);
      } else if (this.type === 'member') {
        this.memberNames = selectedUsers.map((user) => user.real_name).join('；');
        this.project.member_id_list = selectedUsers.map((user) => user.id);
        this.setProjectMember();
      }
    },
    /**
     * 得到用户列表（指定ID）
     * @param {Array} id_list - 用户ID列表
     * @param {string} type - 用户类型（组长或组员）
     */
    getUserList_ID(id_list, type) {
      GetUserList_ID({ id_list }).then(({ user_list }) => {
        if (type === 'leader') {
          this.list.leader = user_list;
        } else if (type === 'member') {
          this.list.member = user_list;
        }
      });
    },
    // 设置项目成员
    setProjectMember() {
      SetProjectMember({
        project_id: this.id,
        user_id_list: this.project.member_id_list,
      }).then(() => {
        this.$message.success('项目成员更新成功');
        this.getProjectInfo();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.project-info {
  @include page-content(true);

  &__header {
    .name {
      width: 240px;
      font-size: 16px;
      font-weight: bold;
    }
  }

  &-manage {
    row-gap: 0 !important;
    max-width: 1148px;
    margin: 0 auto !important;

    .table-fourcolumn,
    .table-twocolumn {
      display: grid;

      .label,
      .project-item {
        padding: 4px 8px;
        line-height: 32px;
        border-bottom: $border;
      }

      .label {
        text-align: right;
        background-color: $fill-color;
      }

      .project-item {
        display: flex;
        column-gap: 8px;

        :first-child {
          flex: 1;
        }
      }
    }

    .table-fourcolumn {
      grid-template-rows: repeat(7, minmax(40px, auto));
      grid-template-columns: 120px 1fr 120px 1fr;
    }

    .table-twocolumn {
      grid-template-rows: repeat(3, minmax(40px, auto));
      grid-template-columns: 120px 1fr;
    }
  }
}
</style>