Link_Homework_Vue/work/src/views/AddWork.vue

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <el-text class="header-text">抢点班作业后台管理</el-text>
        <el-button class="header-button" type="primary" text style="float: right;">退出登录</el-button>
      </el-header>
      <el-main class="main">
        <div class="main-title">
          <div class="main-title-text" style="float: left;">
            新建作业
          </div>
          <div>
            <el-button class="main-button" @click="back">返回上一页</el-button>
          </div>
        </div>
        <div class="main-back">
          <el-form :model="form" label-width="auto" style="max-width: 700px" size="large">
            <el-form-item label="作业名称">
              <el-input v-model="form.Name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="提交时间" style="width: 70%">
              <el-date-picker v-model="form.picker" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" />
            </el-form-item>
            <el-form-item label="作业归属">
              <el-select v-model="form.ClubType" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="关联文章">
              <el-autocomplete v-model="articleTitle" :fetch-suggestions="queryArticleList" placeholder="请输入"
                @select="handleSelectArticle" />
            </el-form-item>
            <el-form-item label="关联直播">
              <el-select v-model="form.LiveId" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in live" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="选择类型">
              <div>
                <el-button type="primary" @click="addSingleChoice">添加单选</el-button>
                <el-button type="primary" @click="addMultipleChoice">添加多选</el-button>
                <el-button type="primary" @click="addBlank">添加单选填空</el-button>
              </div>
            </el-form-item>
            <div class="question-container" v-for="(question, index) in questions" :key="index"
              :class="{ 'bg-change': isHovered[index] }" @mouseenter="handleMouseEnter(index)"
              @mouseleave="handleMouseLeave(index)">
              <div class="question-title">
                {{ questionPrefix(index) }} {{ getQuestionTypeText(question.type) }}
              </div>
              <div style="width: 600px;">
                <el-input v-model="question.description" />
              </div>
              <div class="add" v-if="question.type !== 'blank'">
                <div class="question-option">
                  <span>设置选项:</span>
                  <el-button type="primary" text @click="addOption(index)">添加</el-button>
                </div>
                <div v-for="(option, optionIndex) in question.content" :key="optionIndex">
                  <div class="select" style="display: flex;">
                    <div class="selection-item" style="display: flex;">
                      <div style="width: 550px;">
                        <el-input v-model="question.content[optionIndex].text" />
                      </div>
                      <div>
                        <el-button type="primary" text @click="removeOption(index, optionIndex)">删除</el-button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="delete" style="margin-left: 50px;">
                  <el-button type="info" plain @click="removeQuestion(index)">删除</el-button>
                </div>
              </div>
            </div>
            <div class="submit">
              <el-button type="primary" :disabled="!form.Name||!form.picker" @click="onSubmit">确认</el-button>
            </div>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>

</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import AddWorkApi from '../api/AddWorkApi';
import _ from 'lodash';
import dayjs from 'dayjs';

const options = ref([
  { id: 1, name: '牧民俱乐部' },
  { id: 2, name: '博古论坛' },
  { id: 3, name: '神枪手俱乐部' },
  { id: 4, name: '环球俱乐部' },
  { id: 5, name: '价值投资' },
  { id: 6, name: '波段行情' },
  { id: 7, name: '抄底卖顶' },
  { id: 8, name: '资金及仓位管理' },
  { id: 9, name: '财富的游戏' },

]);

// do not use same name with ref
const form = ref({
  Name: '',
  ClubType: '',
  ArticleId: '',
  LiveId: '',
  picker: [],
  StartDate: '',
  EndDate: '',
  Questions: []
});
const articleTitle = ref('');
// 问题列表数据
const questions = ref([]);
const onSubmit = () => {
  // 从picker中获取日期数据并进行格式转换
  if (form.value.picker && form.value.picker.length === 2) {
    const startDate = dayjs(form.value.picker[0]).format('YYYY-MM-DD HH:mm:00');
    const endDate = dayjs(form.value.picker[1]).format('YYYY-MM-DD HH:mm:00');
    form.value.StartDate = startDate;
    form.value.EndDate = endDate;
  }
  form.value.Questions = questions.value;
  AddWorkApi.addWork(form.value)
  console.log(questions.value+'--------------')
}
const back = () => {
  window.history.back()
}



// 存储根据文章输入内容查询到的关联文章结果列表
const articleSearchResults = ref([]);
// 根据文章输入内容查询关联文章的函数
const queryArticleList = async (queryString: string) => {
  try {
    const response = await AddWorkApi.getArticleList(queryString);
    const formattedResults = response.data.map(article => ({
      value: article.title,
      label: article.id
    }));
    articleSearchResults.value = formattedResults;
    return formattedResults;
  } catch (error) {
    console.error('查询关联文章失败', error);
    return [];
  }
};
// 处理选择文章的函数
const handleSelectArticle = (article: { label: string }) => {
  // 这里可以根据业务需求，比如将选中的文章id（article.label）传递给其他地方使用等
  console.log('选中的文章id', article.label);
  form.value.ArticleId = article.label; // 将选中文章的id赋值给对应表单字段，用于传递给后端
  const selectedArticle = articleSearchResults.value.find(a => a.label === article.label);
  if (selectedArticle) {
    articleTitle.value = selectedArticle.value; // 更新显示的文章题目
  }
};

//获取直播列表
const live = ref([]);
function getLive() {
  AddWorkApi.getLiveList()
    .then(res => {
      live.value = res.data;
      console.log(live.value);
    })
    .catch(error => {
      console.error('获取直播列表失败', error)
    })
}
getLive();

// 根据类型获取对应的题目类型文本显示
const getQuestionTypeText = (type) => {
  switch (type) {
    case 1:
      return '作业题目(单选)';
    case 2:
      return '作业题目(多选)';
    case 3:
      return '作业题目(简答题)';
    default:
      return '未知类型题目';
  }
};
// 从content字符串中解析出选项数组
// const getOptionsFromContent = (content) => {
//   return JSON.parse(content);
// };
const addSingleChoice = () => {
  questions.value.push({
    type: 1,  // 假设1代表单选，和后端格式对应起来
    description: '',
    content: [{ "id": "", "text": "" },{ "id": "", "text": "" }]
  });
};

const addMultipleChoice = () => {
  questions.value.push({
    type: 2,  // 假设2代表多选，和后端格式对应起来
    description: '',
    content: [{ "id": "", "text": "" },{ "id": "", "text": "" }]
  });
};

const addBlank = () => {
  questions.value.push({
    type: 3,  // 假设3代表简答题，和后端格式对应起来
    description: '',
    content: [{ "id": "", "text": "" }]
  });
};

const addOption = (questionIndex) => {
  const currentQuestion = questions.value[questionIndex];
  const currentContent = JSON.parse(currentQuestion.content);
  currentContent.push({ "id": "", "text": "" });
  currentQuestion.content = JSON.stringify(currentContent);
};

const removeOption = (questionIndex, optionIndex) => {
  const currentQuestion = questions.value[questionIndex];
  const currentContent = JSON.parse(currentQuestion.content);
  currentContent.splice(optionIndex, 1);
  currentQuestion.content = JSON.stringify(currentContent);
};

const removeQuestion = (questionIndex) => {
  questions.value.splice(questionIndex, 1);
};

// 计算属性，用于生成序号前缀
const questionPrefix = computed(() => {
  return (index) => {
    return `${index + 1}、`;
  };
})

// 用于存储每个问题标题是否被鼠标悬停的状态，初始化为false
const isHovered = ref(Array(questions.value.length).fill(false));
const handleMouseEnter = (index) => {
  isHovered.value[index] = true;
};

const handleMouseLeave = (index) => {
  isHovered.value[index] = false;
};

// 在组件挂载后初始化 `isHovered` 数组长度与 `questions` 数组长度一致
onMounted(() => {
  isHovered.value = Array(questions.value.length).fill(false);
});

</script>

<style scoped>
.submit {
  margin: 100px 212px;
}

.submit .el-button {
  padding: 25px 150px;
}

.question-title {
  transition: background-color 0.3s ease;
}

.bg-change {
  background-color: rgba(200, 200, 200, 0.3);
}

.question-title {
  margin-bottom: 10px;
}

.select {
  margin: 10px 0px 0px;
}

.delete {
  position: absolute;
  right: 10px;
  bottom: 0px;
}

.add {
  position: relative;
}

.question-container {
  margin: 20px 0;
  padding: 10px 20px;
  width: 750px;
  border-bottom: 1px solid #e5e5e5;
}

.header {
  height: 100px;
  line-height: 100px;
  padding: 0 80px;
}

.header-text {
  font-size: 22px;
  font-weight: 500;
  color: black;
  float: left;
}

.header-button {
  margin-top: 30px;
}

.main {
  padding: 30px 212px;
  background-color: #F8F8F8;
}

.main-title {
  font-size: 16px;
  background-color: white;
  font-weight: bold;
  height: 60px;
  border-bottom: 2px solid #ececec;
  padding: 0 15px;
  line-height: 52px;
}

.main-button {
  margin: 10px 15px 0 0;
  padding: 12px 20px;
  height: 40px;
  float: right;
}

.el-form {
  padding: 30px 78.5px;
  margin: auto;
}

.el-form-item {
  --font-size: 16px;
  margin: 0 0 25px;
}

.main-back {
  background-color: white;
}
</style>