修改资料校验

黄何裕

2024-07-12 9c2eb9ed6da32c1830b02431875dacaa7f904b1f

 src/views/folder/index.vue

@@ -9,7 +9,18 @@
            <div class="card-wrapper w-full h-full flex flex-col px-8 box-border">
              <div class="card-header flex justify-between items-center shrink-0">
                <div class="header-search flex items-center">
                  <el-input v-model="searchText" placeholder="请输入搜索内容" :prefix-icon="Search" maxlength="20" />
                  <el-input v-model="searchText" placeholder="请输入搜索内容" class="long-input" :prefix-icon="Search"/>
                  <el-select v-model="searchSubject" placeholder="请选择科目" class="ml-4 long-select" clearable>
                    <el-option v-for="item in subjectList" :key="item.id" :label="item.name" :value="item.id"/>
                  </el-select>
                  <el-select v-model="searchContentType" placeholder="请选择文件类型" class="ml-4 long-select" clearable>
                    <el-option
                        v-for="item in contentTypeList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value">
                    </el-option>
                  </el-select>
                  <el-button type="primary" class="ml-4" @click="searchFile">搜索</el-button>
                </div>
              </div>
@@ -21,15 +32,15 @@
                      <template #default="scope">
                        <div class="row-info">
                          <div class="icon">
                            <img :src="getIcon(scope.row.contentType)" class="width-img" />
                            <img :src="getIcon(scope.row.contentType)" class="width-img"/>
                          </div>
                          <div class="label">{{ scope.row.introduction }}</div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="className" label="班级" align="center" />
                    <el-table-column prop="typeName" label="科目" align="center" />
                    <el-table-column prop="updateTime" label="上传时间" align="center" />
                    <el-table-column prop="className" label="班级" align="center"/>
                    <el-table-column prop="typeName" label="科目" align="center"/>
                    <el-table-column prop="updateTime" label="上传时间" align="center"/>
                    <el-table-column>
                      <template #default="scope">
                        <el-button link type="primary" @click.prevent="checkRow(scope.row)">
@@ -43,10 +54,10 @@

              <div class="card-footer flex justify-center mb-7 shrink-0">
                <el-pagination background layout="prev, pager, next" :total="fileList.length"
                :default-page-size="20"
                :currentPage="currentIndex"
                :hide-on-single-page="true"
                @current-change="handleCurrentChange" />
                               :default-page-size="20"
                               :currentPage="currentIndex"
                               :hide-on-single-page="true"
                               @current-change="handleCurrentChange"/>
              </div>
            </div>
          </el-card>
@@ -55,18 +66,18 @@
    </div>

    <!-- pdf查看 -->
    <div class="pdf-container" v-show="pdfViewer">
    <!-- <div class="pdf-container" v-show="pdfViewer">
      <PDFViewer :pdfUrl="pdfFile"></PDFViewer>
      <div class="close-btn">
        <el-button type="danger" size="large" circle @click="closeViewer">
          <template #icon>
            <el-icon :size="18">
              <Close />
              <Close/>
            </el-icon>
          </template>
        </el-button>
      </div>
    </div>
    </div> -->

    <!-- image查看 -->
    <div class="image-container" v-show="imageViewer">
@@ -80,34 +91,39 @@
        <el-button type="danger" size="large" circle @click="closeViewer">
          <template #icon>
            <el-icon :size="20">
              <Close />
              <Close/>
            </el-icon>
          </template>
        </el-button>
      </div>
    </div>

    <!-- 弹窗 -->
    <el-drawer v-model="fileViewer" direction="btt" size="90%" :before-close="handleClose">
        <DocumentViewer :fileUrl="fileUrl"></DocumentViewer>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { storeToRefs } from 'pinia';
import { Close } from '@element-plus/icons-vue';
import {ref, onMounted, onBeforeUnmount} from 'vue';
import {storeToRefs} from 'pinia';
import {Close} from '@element-plus/icons-vue';
import NormalHeader from '@/components/NormalHeader/index.vue';
import { Search } from '@element-plus/icons-vue';
import { getFileList } from '@/api/modules/file.js';
import {Search} from '@element-plus/icons-vue';
import {getFileList} from '@/api/modules/file.js';
import {getSubjectList} from '@/api/modules/subject.js';

import PDFViewer from '@/components/PDFViewer/index.vue';
import VideoViewer from '@/components/VideoViewer/index.vue';
import DocumentViewer from "@/components/DocumentViewer/index.vue";

import { useUserStore } from '@/store/index.js';
import {useUserStore} from '@/store/index.js';
import useWebScoket from '@/hooks/useWebScoket.js';

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const { status, message, error, connect, disconnect, sendMessage } = useWebScoket({
  url: 'wss://42.193.1.25:8000/websocket/' + userInfo.value.id,
const {userInfo} = storeToRefs(userStore);
const {status, message, error, connect, disconnect, sendMessage} = useWebScoket({
  url: 'ws://42.193.1.25:8000/websocket/' + userInfo.value.id,
  heartBeatData: 'ping'
});

@@ -120,7 +136,7 @@
    handle: (item) => {
      console.log(item);
      imageViewer.value = true;
      imageList.value = ['/api/files/'+item.contentUrl.url];
      imageList.value = ['/api/files/' + item.contentUrl.url];
      resendMessage();
    }
  },
@@ -129,7 +145,7 @@
    handle: (item) => {
      console.log(item);
      videoViewer.value = true;
      videoUrl.value = ['/api/files/'+item.contentUrl.url];
      videoUrl.value = ['/api/files/' + item.contentUrl.url];
      resendMessage();
    }
  },
@@ -138,12 +154,14 @@
    handle: (item) => {
      console.log(item);
      pdfViewer.value = true;
      pdfFile.value = '/api/files/'+item.contentUrl.url;
      pdfFile.value = '/api/files/' + item.contentUrl.url;
      resendMessage();
    }
  },
};
const searchText = ref('');
const searchSubject = ref('')
const searchContentType = ref('')

const loading = ref(false);

@@ -156,12 +174,28 @@
const videoUrl = ref('');

const fileList = ref([]);

const subjectList = ref([]);
const contentTypeList = ref([{ name: '视频', value: 'video' },
  { name: '图片', value: 'img' },
  { name: '音频', value: 'audio' },
  { name: 'PDF', value: 'pdf' },
  { name: 'EXCEL', value: 'excel' },
  { name: 'WORD', value: 'word' },
  { name: 'PPT', value: 'ppt' }]);
const currentIndex = ref(1);


const fileUrl = ref("");
const fileViewer = ref(false);
const checkRow = (item) => {
    fileUrl.value = item.contentUrl.url;
  fileType[item.contentType] && fileType[item.contentType].handle(item);
  fileViewer.value = true
};

const handleClose = () => {
  fileViewer.value = false;
  fileUrl.value = "";
  console.log("我是否关闭：",fileUrl.value);
};

const closeViewer = () => {
@@ -173,7 +207,7 @@

const getData = () => {
  loading.value = true;
  getFileList().then(res => {
  getFileList({introduction: searchText.value, subjectId: searchSubject.value, contentType:searchContentType.value}).then(res => {
    loading.value = false;
    fileList.value = res.data;
  }).catch(() => {
@@ -182,13 +216,23 @@
};
getData();

const getSubject = () => {
  loading.value = true;
  getSubjectList().then(res => {
    loading.value = false;
    subjectList.value = res.data;
  }).catch(() => {
    loading.value = false;
  });
};
getSubject();
const resendMessage = () => {
  if (time.value) {
    clearInterval(time.value);
  }
  sendMessage({ id: userInfo.value.id, command: 'recordStudyTime' });
  sendMessage({id: userInfo.value.id, command: 'recordStudyTime'});
  time.value = setInterval(() => {
    sendMessage({ id: userInfo.value.id, command: 'recordStudyTime' });
    sendMessage({id: userInfo.value.id, command: 'recordStudyTime'});
  }, 5000);
};

@@ -232,7 +276,13 @@
    margin-right: 20px;
  }
}
.long-input {
  width: 200px;
}

.long-select {
  width: 200px;
}
.pdf-container {
  width: 100%;
  height: 100%;