eep_page/src/views/create_project/createProject.vue

<template>
  <div class="create-project">
    <el-form
      ref="projectForm"
      :inline="true"
      :model="project"
      :rules="formRules"
      label-width="120px"
      class="project-form"
    >
      <el-form-item label="项目名称" prop="name">
        <el-input v-model="project.name" placeholder="请输入项目名称" maxlength="20" />
      </el-form-item>
      <el-form-item label="项目分类" prop="category">
        <el-input v-model="project.category" maxlength="30" />
      </el-form-item>
      <el-form-item label="作品标签" prop="label_list" class="label-input">
        <div class="label-input-content">
          <div class="label-list">
            <el-tag
              v-for="(tag, index) in project.label_list"
              :key="index"
              closable
              @close="project.label_list.splice(index, 1)"
            >
              {{ tag }}
            </el-tag>
          </div>
          <el-input v-model="labelInput" placeholder="请输入标签" @keyup.enter.native="labelChange" />
        </div>
      </el-form-item>
      <el-form-item label="语种" prop="language">
        <el-input v-model="project.language" type="text" placeholder="请输入语种" maxlength="20" />
      </el-form-item>
      <el-form-item label="所属课题" prop="topic">
        <el-input v-model="project.topic" type="text" placeholder="请输入所属课题" />
      </el-form-item>
      <el-form-item label="出版单位" prop="publisher">
        <el-input v-model="project.publisher" type="text" placeholder="请输入出版单位" maxlength="20" />
      </el-form-item>
      <el-form-item label="内容简介" prop="content_intro">
        <el-input
          v-model="project.content_intro"
          type="textarea"
          :autosize="{ minRows: 4 }"
          maxlength="1500"
          show-word-limit
          placeholder="请输入内容简介"
        />
      </el-form-item>
      <el-form-item label="选题背景" prop="background">
        <el-input
          v-model="project.background"
          type="textarea"
          :autosize="{ minRows: 4 }"
          maxlength="1500"
          show-word-limit
          placeholder="请输入选题背景"
        />
      </el-form-item>
      <el-form-item label="作者简介" prop="author_intro">
        <el-input
          v-model="project.author_intro"
          type="textarea"
          :autosize="{ minRows: 4 }"
          maxlength="1500"
          show-word-limit
          placeholder="请输入作者简介"
        />
      </el-form-item>
      <el-form-item prop="content_count_YG" class="label-tworow">
        <span slot="label">预计容量 <br />（课数）</span>
        <el-input v-model="project.content_count_YG" type="number" />
      </el-form-item>
      <el-form-item label="预计字数" prop="word_count_YG">
        <el-input v-model="project.word_count_YG" type="number" />
      </el-form-item>
      <el-form-item label="计划出版时间" prop="plan_publish_date">
        <el-date-picker v-model="project.plan_publish_date" type="date" placeholder="选择日期" />
      </el-form-item>
      <el-form-item label="读者对象" prop="reader">
        <el-input v-model="project.reader" type="text" placeholder="请输入读者对象" maxlength="20" />
      </el-form-item>
      <el-form-item prop="leader_id_list" class="label-tworow">
        <span slot="label">邀请其他<br />项目组长</span>
        <el-input v-model="leaderNames" type="text">
          <el-button slot="append" @click="selectLeader">选择</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="项目成员" prop="member_id_list">
        <el-input v-model="memberNames" type="text">
          <el-button slot="append" @click="selectMembers">选择</el-button>
        </el-input>
      </el-form-item>
      <el-form-item class="submit-button">
        <el-button @click="$router.push('/create_project/start')">取消</el-button>
        <el-button type="primary" @click="createProject">确定</el-button>
      </el-form-item>
    </el-form>

    <selectMembers :visible.sync="visibleMembers" :title="selectMembersTitle" @confirm="handleSelectedMembers" />
  </div>
</template>

<script>
import { CreateProject } from '@/api/project';

import selectMembers from './selectProjectMembers.vue';

export default {
  name: 'CreateProject',
  components: {
    selectMembers,
  },
  data() {
    return {
      labelInput: '', // 用于输入标签
      leaderNames: '', // 组长姓名
      memberNames: '', // 组员姓名
      selectMembersTitle: '', // 选择组长弹窗标题
      type: 'leader',
      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: [], // 组员列表
      },
      formRules: {
        name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
      },
      visibleMembers: false, // 控制选择成员弹窗的显示与隐藏
    };
  },
  methods: {
    // 处理标签输入
    labelChange() {
      if (this.labelInput.trim() !== '') {
        this.project.label_list.push(this.labelInput.trim());
        this.labelInput = ''; // 清空输入框
      }
    },
    createProject() {
      this.$refs.projectForm.validate((valid) => {
        if (valid) {
          CreateProject(this.project)
            .then(() => {
              this.$message.success('项目创建成功！');
              this.$router.push('/create_project/success'); // 跳转到创建成功页面
            })
            .catch(() => {
              this.$message.error('项目创建失败！');
            });
        } else {
          this.$message.error('请填写完整的项目信息！');
          return false;
        }
      });
    },
    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);
      }
    },
  },
};
</script>

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

.create-project {
  @include page-base;

  max-width: 1148px;
  margin: 0 auto;

  .project-form {
    .el-input,
    .el-select {
      width: 420px;

      :deep .el-input__inner {
        background-color: #fff;
        border-color: #dcdcdc;
      }
    }

    .el-textarea {
      width: 970px;

      :deep .el-textarea__inner {
        background-color: #fff;
        border-color: #dcdcdc;
      }
    }

    .label-input {
      max-width: 540px;

      :deep .label-input-content {
        display: flex;
        align-items: center;
        width: 420px;

        .label-list {
          display: flex;
          flex-wrap: wrap;
          gap: 4px;
        }

        .el-input {
          flex: 1;
          min-width: 120px;
          margin-left: 6px;
        }
      }
    }

    .label-tworow {
      :deep > label {
        display: inline-flex;
        justify-content: flex-end;
        width: 100%;
        line-height: 16px;
      }
    }

    .submit-button {
      width: 100%;
      padding-right: 10px;
      text-align: right;

      .el-button {
        padding: 12px 24px;
      }
    }
  }
}
</style>