rzcs/src/view/projectTopic.vue

<template>
  <div class="disFlex">
    <NavLeft />
    <div class="projectManagement">
      <div class="title">编辑题库</div>

      <div class="projectTopicText">
        <p class="tit">项目信息</p>
        <div class="projectTopicCon">
          <div>
            <div class="projectTopicText">
              <p>项目名称：</p>
              <p>{{ projectData.name }}</p>
            </div>
            <div class="projectTopicText">
              <p>发起单位</p>
              <p>{{ projectData.companyName }}</p>
            </div>
            <div class="projectTopicText">
              <p>项目描述：</p>
              <p>{{ projectData.note }}</p>
            </div>
          </div>

          <div class="">
            <p>当前已选择:</p>
            <p>题型1：<span>40</span>题</p>
            <p>题型2：<span>40</span>题</p>
            <p>题型3：<span>40</span>题</p>
            <p>题型4：<span>40</span>题</p>
          </div>
        </div>

        <div class="projectTopicA">
          <div class="projectTopicATie">
            <p
              @click="topicTypes(1)"
              :class="[topicType == 1 ? 'topicType' : '']"
            >
              题型一题库
            </p>
            <p
              @click="topicTypes(2)"
              :class="[topicType == 2 ? 'topicType' : '']"
            >
              题型二题库
            </p>
            <p
              @click="topicTypes(3)"
              :class="[topicType == 3 ? 'topicType' : '']"
            >
              题型三题库
            </p>
            <p
              @click="topicTypes(4)"
              :class="[topicType == 4 ? 'topicType' : '']"
            >
              题型四题库
            </p>
          </div>

          <div class="projectTopicAButton">
            <div class="projectTopicAButtonSearch">
              <el-input
                v-model="input2"
                class="w-50 m-2"
                placeholder="搜索"
                :prefix-icon="Search"
              />
            </div>
            <button class="buttonCss" type="button">随机选题</button>
            <button class="buttonCss" type="button">取消选题</button>
            <button class="buttonCss" @click="addProject()" type="button">
              新建
            </button>
            <button class="buttonCss" type="button">批量导入</button>

            <button class="buttonCss" type="button">下载导入模板</button>
          </div>

          <div class="projectTopicTable">
            <el-table :data="tableData" style="width: 100%" max-height="500">
              <el-table-column
                align="center"
                fixed
                prop="companyName"
                label="创建部门"
              />
              <el-table-column type="selection" width="55" />
              <el-table-column align="center" prop="date" label="创建时间" />
              <el-table-column align="center" prop="name" label="项目" />
              <el-table-column align="center" prop="address" label="备注" />
              <el-table-column align="center" prop="testCount" label="数量" />
              <el-table-column align="center" fixed="right" label="状态">
                <template #default="scope">
                  <div v-if="scope.row.status == 0">已启用</div>
                  <div v-else>已禁用</div>
                </template>
              </el-table-column>
              <el-table-column align="center" fixed="right" label="操作">
                <template #default="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click.prevent="open(scope, 1)"
                  >
                    删除
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click.prevent="open(scope, 2)"
                  >
                    停用
                  </el-button>

                  <el-button
                    type="text"
                    size="small"
                    @click.prevent="topicNav(scope)"
                  >
                    编辑题库
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                layout="prev, pager, next, jumper"
                :total="2"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    // 题型1
    <el-drawer
      v-model="drawer"
      title="编辑问题"
      :direction="direction"
      :before-close="handleClose"
    >
      <div class="elementUldrawer">
        <div>
          <p class="tit">问题</p>
          <el-input
            v-model="topicData.topic"
            class="w-50 m-2"
            size="large"
            placeholder="请输入问题"
          ></el-input>
        </div>
        <div>
          <p class="tit">答案</p>
          <div class="options">
            <p @click="options(1)" :class="[optionsIf == 1 ? 'optionsIf' : '']">
              选项01
            </p>
            <p @click="options(2)" :class="[optionsIf == 2 ? 'optionsIf' : '']">
              选项02
            </p>
            <p @click="options(3)" :class="[optionsIf == 3 ? 'optionsIf' : '']">
              选项03
            </p>
            <p @click="options(4)" :class="[optionsIf == 4 ? 'optionsIf' : '']">
              选项04
            </p>
          </div>
          <el-input
            v-model="topicData.options[0].content"
            class="w-50 m-2"
            size="large"
            placeholder="请输入选项内容"
            v-if="optionsIf == 1"
          ></el-input>
          <el-input
            v-model="topicData.options[1].content"
            v-else-if="optionsIf == 2"
            class="w-50 m-2"
            size="large"
            placeholder="请输入选项内容"
          ></el-input>
          <el-input
            v-model="topicData.options[2].content"
            v-else-if="optionsIf == 3"
            class="w-50 m-2"
            size="large"
            placeholder="请输入选项内容"
          ></el-input>
          <el-input
            v-model="topicData.options[3].content"
            v-else-if="optionsIf == 4"
            class="w-50 m-2"
            size="large"
            placeholder="请输入选项内容"
          ></el-input>

          <div class="selectClass" v-if="optionsIf == 1">
            <p>选择对应类型</p>
            <el-select
              v-model="topicData.options[0].topicType"
              class="m-2"
              placeholder="请选择类型"
              size="large"
            >
              <el-option
                v-for="item in selectClassData"
                :key="item.dictValue"
                :label="item.dictValue"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </div>
          <div class="selectClass" v-if="optionsIf == 2">
            <p>选择对应类型</p>
            <el-select
              v-model="topicData.options[1].topicType"
              class="m-2"
              placeholder="请选择类型"
              size="large"
            >
              <el-option
                v-for="item in selectClassData"
                :key="item.dictValue"
                :label="item.dictValue"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </div>
          <div class="selectClass" v-if="optionsIf == 3">
            <p>选择对应类型</p>
            <el-select
              v-model="topicData.options[2].topicType"
              class="m-2"
              placeholder="请选择类型"
              size="large"
            >
              <el-option
                v-for="item in selectClassData"
                :key="item.dictValue"
                :label="item.dictValue"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </div>
          <div class="selectClass" v-if="optionsIf == 4">
            <p>选择对应类型</p>
            <el-select
              v-model="topicData.options[3].topicType"
              class="m-2"
              placeholder="请选择类型"
              size="large"
            >
              <el-option
                v-for="item in selectClassData"
                :key="item.dictValue"
                :label="item.dictValue"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </div>
          <div class="drawerButton">
            <el-button type="primary" @click="addprojectTopic()"
              >新建项目</el-button
            >
            <el-button @click="resetForm(ruleFormRef)">取消新建</el-button>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import NavLeft from "../components/nav.vue";

export default {
  components: {
    NavLeft,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      drawer: false,
      topicType: 1,
      TopicPageData: {
        current: 1,
        libraryType: "topic_type_1",
        size: 5,
      },
      topicData: {
        createTime: "",
        projectId: "",
        libraryType: "topic_type_1",
        options: [
          {
            content: "",
            createTime: "",

            libraryType: "",
            optionIndex: 0,
            optionIndexEn: "",
            score: 0,
            topicId: 0,
            topicType: "",
            topicTypeValue: "",
          },
          {
            content: "",
            createTime: "",
            id: 0,
            libraryType: "",
            optionIndex: 0,
            optionIndexEn: "",
            score: 0,
            topicId: 0,
            topicType: "",
            topicTypeValue: "",
          },
          {
            content: "",
            createTime: "",
            id: 0,
            libraryType: "",
            optionIndex: 0,
            optionIndexEn: "",
            score: 0,
            topicId: 0,
            topicType: "",
            topicTypeValue: "",
          },
          {
            content: "",
            createTime: "",
            id: 0,
            libraryType: "",
            optionIndex: 0,
            optionIndexEn: "",
            score: 0,
            topicId: 0,
            topicType: "",
            topicTypeValue: "",
          },
        ],
        topic: "",
        topicType: "",
      },
      projectData: {},
      labelPosition: "top",
      tableData: [],
      direction: "rtl",
      projectTopicData: {},
      optionsIf: 1,
      selectClassData: [],
    };
  },
  mounted() {
    this.projectData = JSON.parse(localStorage.topicData);
    this.getProject();
  },
  methods: {
    options(num) {
      this.optionsIf = num;
    },
    topicTypes(num) {
      this.topicType = num;
      if (this.topicType == 1) {
        this.TopicPageData.libraryType = "topic_type_1";
        this.topicData.libraryType = "topic_type_1";
      } else if (this.topicType == 2) {
        this.TopicPageData.libraryType = "topic_type_2";
        this.topicData.libraryType = "topic_type_2";
      } else if (this.topicType == 3) {
        this.TopicPageData.libraryType = "topic_type_3";
        this.topicData.libraryType = "topic_type_3";
      } else if (this.topicType == 4) {
        this.TopicPageData.libraryType = "topic_type_4";
        this.topicData.libraryType = "topic_type_4";
      }
    },

    addprojectTopic() {
      console.log(123);
      this.axios
        .post("/hysc/library/addTopic", this.topicData)
        .then(function (response) {
          console.log(response.data.data);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    addProject() {
      this.drawer = true;
      this.addCation();
      this.topicData.projectId = this.projectData.id;
    },
    handleClose() {
      this.drawer = false;
    },

    addClassification() {
      let param = new URLSearchParams();
      let that = this;
      this.axios
        .get("/hysc/system/dict/dictionary", {
          params: param,
        })
        .then(function (response) {
          console.log(response.data.data);
          that.selectClassData = response.data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 获取类型
    addCation() {
      let param = new URLSearchParams();
      let that = this;
      if (this.topicType == 1) {
        param.append("code", "topic_type_1");
      } else if (this.topicType == 2) {
        param.append("code", "topic_type_2");
      } else if (this.topicType == 3) {
        param.append("code", "topic_type_3");
      } else if (this.topicType == 4) {
        param.append("code", "topic_type_4");
      }

      this.axios
        .get("/hysc/system/dict/dictionary", {
          params: param,
        })
        .then(function (response) {
          console.log(response.data.data);
          that.selectClassData = response.data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 获取列表数据
    getProject() {
      let param = new URLSearchParams();
      // let that = this;

      param.append("current", this.TopicPageData.current);
      param.append("libraryType", this.TopicPageData.libraryType);
      param.append("size", this.TopicPageData.size);
      this.axios
        .get("/hysc/library/getTopicPage", {
          params: param,
        })
        .then(function (response) {
          console.log(response.data.data);
          // that.selectClassData = response.data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>


<style >
.drawerButton {
  position: absolute;
  bottom: 30px;
  width: 90%;
  display: flex;
}
.projectManagement {
  height: 100vh;
  box-sizing: border-box;
  overflow-x: auto;
}
.projectTopicTable {
  margin-top: 30px;
}
.options {
  display: flex;
  border-bottom: 1px solid #e4eaee;
  margin-bottom: 24px;
}

.options > p {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #888888;
  line-height: 20px;
  padding-bottom: 8px;

  margin-right: 33px;
}
.optionsIf {
  border-bottom: 2px solid #0544a4;
  color: #515151;
}

.projectTopicText .tit {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1b2125;
  margin-top: 50px;
  line-height: 22px;
  padding-left: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #1b2125;
}
.projectTopicCon {
  width: 100%;
  height: 157px;
  padding-top: 30px;
  background: #f8fafb;
  border-radius: 3px;
  border: 1px solid #dde3e8;

  margin-top: 50px;
}
.projectTopicCon > div {
  display: flex;
}
.projectTopicCon > :nth-child(1) {
  padding-left: 30px;
}
.projectTopicCon > :nth-child(2) {
  padding-left: 30px;
  padding-top: 60px;
}
.projectTopicCon > div > .projectTopicText {
  margin-right: 120px;
}
.projectTopicText > :nth-child(1) {
  width: 80px;
  height: 26px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #8e8e8e;
  line-height: 26px;
}
.projectTopicText > :nth-child(2) {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #8e8e8e;
  line-height: 26px;
}
.projectTopicCon > :nth-child(2) > p {
  margin-right: 60px;
}
.projectTopicCon > :nth-child(2) > :nth-child(1) {
  margin-right: 0px;
}
.projectTopicA {
  width: 100%;
  height: auto;
  margin-top: 30px;
  background: #f8fafb;
  border-radius: 3px;
  border: 1px solid #dde3e8;
}
.projectTopicA {
  box-sizing: border-box;
  padding: 30px;
}
.projectTopicATie {
  display: flex;
}
.projectTopicATie > p {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1b2125;
  margin-right: 60px;
  line-height: 22px;
}
.buttonCss {
  width: 100px;
  height: 32px;
  color: #fff;
  background: #0544a4;
  box-shadow: 0px 2px 7px 0px rgba(120, 137, 149, 0.25);
  border-radius: 3px;
  border: none;
}
.projectTopicAButton > .buttonCss {
  margin-right: 20px;
}
.projectTopicAButton {
  display: flex;

  margin-top: 30px;
}
.projectTopicAButton > .projectTopicAButtonSearch {
  margin-right: 60px;
}
.elementUldrawer > div > .tit {
  width: 150px;
  height: 19px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #515151;
  margin-top: 36px;
  margin-bottom: 11px;
  line-height: 20px;
}
.selectClass {
  display: flex;
  margin-top: 36px;
  align-items: center;
}
.selectClass > p {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  margin-right: 20px;
  color: #515151;
  line-height: 20px;
}
.projectTopicATie > .topicType {
  border-bottom: 2px solid #0544a4;
  color: #0544a4;
}
</style>