kechengfuzhu/kcui/src/view/TWInfo.vue

<template>
  <div style="width: 100%;height: 100%;">
    <img style="width: 100%;height: 100%;position: absolute;z-index:-1;" src="../assets/img/twbg.png">
    <headInfo></headInfo>
    <!--  这是内容界面  -->
    <div class="content">
      <div class="leftContent">
        <div class="leftBox1">
          <div style="width: 50%;margin: 0 auto;">
            <p style="font-size: 1vw;">Hi,{{ userName }}~</p>
            <p style="font-size: 0.7vw;">欢迎使用课程辅助系统</p>
          </div>
        </div>
        <div class="leftBox2">
          <div class="muluBox">
            <div class="muluList">
              <div v-for="item in mulu" :key="item">
                <div class="oneMulu" v-if="page!=item.name" @click="goInfo(item.info)">
                  <div style="width: 80%;text-align: center;">{{ item.name }}</div>
                  <img src="../assets/img/jiantou.png"
                       style="width: 0.9vw;height:0.9vw;object-fit: contain;float: right;margin-top: 11%;">
                </div>
                <div class="oneMuluXuan" v-else>
                  <div style="width: 72%;text-align: center;">{{ item.name }}</div>
                  <img src="../assets/img/jiantouchoose.png"
                       style="width: 0.9vw;height:0.9vw;object-fit: contain;float: right;margin-top: 7%;">
                  <img src="../assets/img/muluchoose.png"
                       style="width: 19vw;height: 6vw;position: absolute;bottom: -3vw;left: -3.5vw;z-index: -1;"/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rightContent">


        <div class="rigthHeadInfo" style="position: relative;">
          <div style="width: 30%;height: 2vw;position: absolute;top: 2.5vw;right: 1vw;">
            <div class="password-input-container">
              <img src="../assets/img/search.png" style="position: absolute;z-index: -1;width: 89%;height: 100%;">

              <input
                  type="text"
                  placeholder="请输入"
                  v-model="selectName"
                  @keyup.enter = "getContentList()"
              />
            </div>
            <div style="width: 7%;height: 70%;float: right;margin-right: 15%;" @click="getContentList()">
              <img src="../assets/img/look.png" style="width: 100%;height: 100%;">
            </div>

          </div>
          <div
              style="display: flex;flex-direction: row;position: absolute;z-index: 1;margin-top: 3.2vw;margin-left: 3.6%;">
            <div v-for="item in typeList" :key="item" style="position: relative;margin-right: 1vw;"
                 @click="changeType(item)">

              <img v-if="twType==item" src="../assets/img/typeHeadChoose.png" style="width: 7vw;object-fit: contain;">
              <img v-else src="../assets/img/typeHead.png" style="width: 7vw;object-fit: contain;">
              <div style="position: absolute;z-index: 12121;color: #ffffff;top: 0.3vw;left: 1.7vw;font-size: 0.9vw;">
                {{ item }}
              </div>
            </div>
          </div>
          <div
              style="width: 94.7%;height:3vw;position: absolute;z-index: 1;top: 4.9vw;left: 2.5%;background-color: rgba(85,174,248,0.22);border-radius: 1vw 1vw 0 0"></div>
          <div
              style="width: 94.4%;height: 2.9vw;position: absolute;z-index: 2;margin-left: 2.6%;top: 5vw;font-size: 0.9vw;"
              v-if="this.userType==1">
            <div
                style="width: 100%;height: 100%;display: flex;flex-direction: row;line-height: 2.9vw;text-align: center;color: #ffffff;">
              <div style="width: 10%;">序号</div>
              <div style="width: 20%;">标题</div>
              <div style="width: 60%;">图片</div>
              <div style="width: 10%;">详情</div>
              <div style="width: 10%;">操作</div>
            </div>
          </div>
          <div
              style="width: 94.4%;height: 2.9vw;position: absolute;z-index: 2;margin-left: 2.6%;top: 5vw;font-size: 0.9vw;"
              v-if="this.userType==0">
            <div
                style="width: 100%;height: 100%;display: flex;flex-direction: row;line-height: 2.9vw;text-align: center;color: #ffffff;">
              <div style="width: 10%;">序号</div>
              <div style="width: 20%;">标题</div>
              <div style="width: 60%;">图片</div>
              <div style="width: 10%;">详情</div>
            </div>
          </div>
        </div>
        <div class="rightList">

          <div class="rightListContent" v-if="this.userType==0">
            <div class="oneRight" v-for="item in  contentList" :key="item">
              <div style="width: 8%;">{{ item.id }}</div>
              <div style="width: 22%;">{{ item.name }}</div>
              <div style="width: 60%;">图片</div>
              <div style="width: 10%;text-decoration: underline;font-style: italic;" @click="goXq(item.id)">
                点击查看详情
              </div>
            </div>
          </div>
          <div class="rightListContent" v-if="this.userType==1">
            <div class="oneRight" v-for="item in  contentList" :key="item">
              <div style="width: 8%;">{{ item.id }}</div>
              <div style="width: 22%;">{{ item.name }}</div>
              <div style="width: 60%;display: flex;flex-direction: row;">
                <div v-for="item1 in item.imgList" :key="item1">
                  <img :src="item1.imgUrl"
                       style="height: 5vw;object-fit: contain;justify-content: flex-start;margin-left: 1vw;border-radius: 1vw;">
                </div>
              </div>
              <div style="width: 10%;text-decoration: underline;font-style: italic;" @click="goXq(item.id)">
                点击查看详情
              </div>
              <div
                  style="width: 9%;text-decoration: underline;font-style: italic;display: flex;justify-content: space-around;margin-left: 1%;">
                <div @click="editTw(item.id)">修改</div>
                <div @click="deleteTw(item.id)">删除</div>
              </div>
            </div>
          </div>
          <div class="pageList">
            <div style="float: left;margin-right: 0.1vw;" @click="choosePage(onePagesList[0]-1)">...</div>
            <div v-for="item in onePagesList" :key="item" @click="choosePage(item)" style="margin-left: 1vw;">
              <img src="../assets/img/pageChoose.png" style="position: absolute;z-index: -1">
              <div style="width: 1.2vw;height: 1.2vw;margin-top: 0.15vw;font-size: 0.5vw;
                   text-align: center;line-height: 1.2vw;margin-right: 1vw;">
                {{ item }}
              </div>
            </div>
            <div style="float: left;margin-left: 0.1vw;">...</div>
          </div>
        </div>
      </div>
    </div>


    <div style="width: 100%;height: 3%;position: fixed;bottom: 0px;">
      <foot></foot>
    </div>

    <el-dialog :visible.sync="openInfo" title="文章修改">
      <el-form :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item style="position: relative ;" label="知识内容">
          <Editor v-if="form.contentInfo!=''" v-model="TxtValue" style="height: 15vw;"></Editor>
        </el-form-item>

        <el-form-item style="position: relative ;" label="选择类别">
          <el-select v-model="value" placeholder="请选择类别">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item style="position: relative;margin-top: 5vw;" label="相关图片">
          <el-upload
              action="http://127.0.0.1:10031/fileUpdate/upload"
              list-type="picture-card"
              :on-remove="handleRemove"
              :file-list="fileList"
              :multiple="true"
              :limit="9"
              :on-exceed="handleExceed"
              :before-upload="beforeUpload"
              :on-success="handleSuccess"
              :on-error="handleError">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>


      <div slot="footer" class="dialog-footer" style="margin-top: 2vw;">
        <el-button @click="openInfo = false">取 消</el-button>
        <el-button type="primary" @click="submitInfo">确 定</el-button>
      </div>
    </el-dialog>


  </div>

</template>
<script>
import headInfo from '@/components/Head.vue';
import Foot from "@/components/Foot.vue";
import {editInfo, getDocList, getTwInfo} from "@/api/kcInfo";
import Editor from "@/components/Editor.vue";
import {twdelete} from "@/api/twdelete";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'TWInfo',
  components: {
    Editor,
    Foot, headInfo
  },
  data() {
    return {
      userName: "",
      userType: 0,
      mulu: [
        {id: 0, name: "图文认知", info: "TwInfo"},
        {id: 1, name: "视频资源", info: "SpInfo"},
        {id: 2, name: "动画显示", info: "DhInfo"},
        {id: 3, name: "计算模块", info: "JsInfo"},
        {id: 4, name: "知识图谱", info: "Graph"},
        {id: 4, name: "帮助文档", info: "Help"}
      ],
      page: "图文认知",
      typeList: ["海洋大气", "海洋文学", "海洋地理", "复杂水声", "复杂电磁"],
      contentList: [],
      selectName: "",
      twType: "",
      pageSize: 6,
      pageNum: 1,
      total: 0,
      totalPage: 0,
      pagesList: [],
      onePagesList: [],
      openInfo: false,


      options: [
        {value: '1', label: '海洋大气'},
        {value: '2', label: '海洋文学'},
        {value: '3', label: '海洋地理'},
        {value: '4', label: '复杂水声'},
        {value: '5', label: '复杂电磁'}
      ],
      value: '',

      form: {
        name: "",
        contentInfo: "",
      },
      TxtValue: "",
      id: 0,
      fileList: [], // 已上传文件列表
      isUpload:0,
    }

  },
  methods: {
    goInfo(info) {
      console.log(info)
      this.$router.push('/' + info)
    },
    changeType(item) {
      this.twType = item;
      this.getContentList();
    },
    choosePage(item) {
      console.log(item);
      this.pageNum = item;
      this.getContentList();
    },
    getContentList() {
      console.log("djaksjdklajsdk")
      var data = {
        name: this.selectName,
        twType: this.twType,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      getDocList(data).then((res) => {
        console.log(res);
        this.contentList = res.data.list;
        this.total = res.data.total;
        this.totalPage = res.data.totalPages;

        var aaa = 0;
        this.onePagesList = [];
        this.pagesList = [];
        if (this.pageNum < this.totalPage - 3) {

          for (let i = this.pageNum; i <= this.totalPage; i++) {

            this.pagesList.push(i);
            this.onePagesList.push(i);
            aaa = aaa + 1;
            console.log(aaa);
            if (aaa == 4) {
              break;
            }
          }
        }

        console.log(this.onePagesList)

      })
    },
    goXq(id) {
      var data = {
        id: id
      }
      getTwInfo(data).then((res) => {
        this.$router.push({path: '/TwInfoXq', query: {id: id, level: res.data.level, type: "tw"}})
      })
    },


   //管理员操作
    deleteTw(id){
      twdelete(id).then();
      console.log("这是删除操作")
    },

    editTw(id){
      //展示出一个修改的弹窗
      var data = {
        id: id
      }
      getTwInfo(data).then((res) => {

        this.openInfo = true;
        this.form.contentInfo = res.data.data.contentInfo
        this.form.name = res.data.data.name
        this.TxtValue = res.data.data.contentInfo;
        this.id = id;
        var imgs = res.data.data.imgList;
        console.log(imgs)

        for (let j = 0; j < imgs.length; j++) {
          var ii = {
            uuid:imgs[j].imgId,
            url:imgs[j].imgUrl
          }
          this.fileList.push(ii)
        }

        console.log(res);

      })

    },


    //照片墙
    // 处理图片移除
    handleRemove(file, fileList) {
      console.log('File removed:', file);
      console.log('Current fileList:', fileList);
    },
    // 当超过限制时触发
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 9 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    // 在上传前进行校验
    beforeUpload(file) {
      const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 10; // 限制大小不超过2MB

      if (!isJPGorPNG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isJPGorPNG && isLt2M;
    },
    // 上传成功后的回调
    handleSuccess(response, file, fileList) {

      console.log('Upload success:', response);
      // 更新 fileList，确保新上传的文件被正确添加到列表中
      console.log(fileList)
      this.fileList = fileList;
      this.isUpload = 1;
    },
    // 上传失败后的回调
    // eslint-disable-next-line no-unused-vars
    handleError(err, file, fileList) {
      console.log('Upload error:', err);
      this.$message.error('上传失败，请重试！');
    },
    submitInfo() {
      console.log(this.fileList);
      var urlStr = "";
      for (let f = 0; f < this.fileList.length; f++) {
        if (f == 0) {
          if(this.fileList[f].response!=null){
            urlStr = this.fileList[f].response.data.url
          }else {
            urlStr = this.fileList[f].url
          }

        } else {
          if(this.fileList[f].response!=null){
            urlStr = urlStr + "," + this.fileList[f].response.data.url
          }else {
            urlStr = urlStr + "," + this.fileList[f].url
          }

        }
      }
      var data = {
        name: this.form.name,
        contentInfo: this.TxtValue,
        imgs: urlStr,
        id: this.id
      }
      editInfo(data).then((res) => {
        console.log(res);
        this.openInfo = false;
        this.getContentList();
      })
    }
  },
  mounted() {
    this.userType = localStorage.getItem("type");
    this.userName = localStorage.getItem("name");
    this.getContentList();
  }
}
</script>
<style scoped>
.content {
  width: 100%;
  height: 86%;
}

.leftContent {
  width: 14%;
  height: 100%;
  float: left;
}

.leftBox1 {
  width: 100%;
  height: 10%;
  margin-top: 5%;
  color: #7cdeff;
}

.leftBox2 {
  width: 100%;
  height: 90%;
}

.muluBox {
  margin: 0 14%;
  height: 92%;
  width: 72%;
  position: relative;

}

.muluList {
  width: 100%;
  height: 90%;
  //background-color: #7cdeff;
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 2;
  margin-top: 20%;

}

.oneMulu {
  width: 80%;
  height: 2.5vw;
  line-height: 2.5vw;
  font-size: 0.9vw;
  border-bottom: 1px solid rgba(112, 192, 227, 0.47);
  margin-left: 10%;
  color: #d1d3d7;
  display: flex;
  flex-direction: row;

}

.oneMuluXuan {

  width: 90%;
  height: 2.5vw;
  line-height: 2.1vw;
  font-size: 0.9vw;
  color: #00ceff;
  display: flex;
  flex-direction: row;
  padding-left: 10%;
  position: relative;

}


.rightContent {
  width: 84%;
  height: 100%;
  float: left;
  position: relative;
}

.rigthHeadInfo {
  width: 100%;
}

.rightList {
  width: 94.6%;
  height: 77%;
  position: absolute;
  z-index: 2;
  //background-color: #42b983;
  margin-top: 10%;
  margin-left: 2.6%;
  margin-bottom: 5%;
  border-radius: 0 0 1vw 1vw;
  background-color: rgba(85, 174, 248, 0.22);
}

.rightListContent {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  top: 1%;

}

.oneRight {
  width: 98%;
  height: 4.6vw;
  line-height: 5vw;
  //background-color: #42b983;
  margin: 0 1%;
  display: flex;
  flex-direction: row;
  text-align: center;
  color: #ffffff;
  font-size: 0.9vw;
}

.pageList {
  height: 1.5vw;
  width: 20%;
  //background-color: pink;
  margin: 1% 40%;
  position: absolute;
  z-index: 2;
  bottom: -0.5%;
  display: flex;
  flex-direction: row;
  color: #ffffff;

}
.password-input-container {
  width: 70%;
  height: 80%;
  //background: #b94289;
  position: absolute;
  top: 8%;
  left: 10%;
}
input {
  width: 90%;
  height: 100%;
  border: none;
  outline: none;
  color: white; /* 文字颜色 */
  background-color: transparent;
  padding-left:3%;
  position: absolute;
  z-index: 2000;

}
input::placeholder {
  color: white;
  opacity: 1; /* Firefox 默认将 placeholder 的透明度设置为 0.54 */

}
</style>