Browse Source

fix: 修改课件tab部分ui展示

chillqi 3 years ago
parent
commit
b9fd1f2d96
1 changed files with 21 additions and 24 deletions
  1. 21 24
      src/views/CoursePage/tabs/CoursewareTab.vue

+ 21 - 24
src/views/CoursePage/tabs/CoursewareTab.vue

@@ -5,7 +5,6 @@
           <el-button
                   @click="uploadDialogVisible = true"
                   type="primary"
-                  icon="el-icon-circle-plus-outline"
                   plain>新建</el-button>
       </el-col>
       <el-col :span="15">
@@ -34,7 +33,6 @@
                       plain
                       type="primary"
                       class="tabs-function-button"
-                      icon="el-icon-upload"
                         >上传文件</el-button>(仅支持上传单个文件)
               </el-upload>
               <el-tag
@@ -72,17 +70,16 @@
       <el-table-column
         prop="name"
         label="文件名"
-        width="240">
+        width="260">
           <template #default="scope">
             <el-icon v-if="scope.row['courseWareVO'].useMethod === 'SCAN'" style="color: #337ecc" class="myicon"><Reading /></el-icon>
             <el-icon v-if="scope.row['courseWareVO'].useMethod === 'ATTACHMENT'" style="color: green" class="myicon"><Paperclip /></el-icon>
               {{scope.row['courseWareVO'].name}}
-              <el-icon v-if="Number(scope.row['courseWareVO'].senderId) === Number(this.$store.state.user.id)"
-                      :size="20"
-                       style="color: #337ecc; position: absolute; bottom: 35%; margin-left: 5px"
-                       @click="handleChangeName(scope.row['courseWareVO'].id, scope.row['courseWareVO'].name)">
-                  <Edit />
-              </el-icon>
+              <el-link v-if="Number(scope.row['courseWareVO'].senderId) === Number(this.$store.state.user.id)"
+                       @click="handleChangeName(scope.row['courseWareVO'].id, scope.row['courseWareVO'].name)"
+                        :underline="false">
+                  <el-icon :size="20" style="color: #337ecc; margin-left: 5px"><Edit /></el-icon>
+              </el-link>
           </template>
       </el-table-column>
       <el-table-column
@@ -108,31 +105,31 @@
       <el-table-column
         prop="operation"
         label="操作"
-        width="220">
+        width="200">
           <template #default="scope">
-            <a :href="scope.row['courseWareVO'].fileUrl" v-if="isPdfOrPicture(scope.row['courseWareVO'].name) === 'OTHER'">
-              <el-button v-if="scope.row['courseWareVO'].useMethod === 'SCAN'"
-                       size="mini" type="primary" plain>预览</el-button>
+              <a :href="scope.row['courseWareVO'].fileUrl" v-if="isPdfOrPicture(scope.row['courseWareVO'].name) === 'OTHER'">
+              <el-link v-if="scope.row['courseWareVO'].useMethod === 'SCAN'"
+                       size="mini" style="color: #409EFF" :underline="false">预览</el-link>
             </a>
-            <el-button v-if="scope.row['courseWareVO'].useMethod === 'SCAN' && isPdfOrPicture(scope.row['courseWareVO'].name) === 'PDF'"
+            <el-link v-if="scope.row['courseWareVO'].useMethod === 'SCAN' && isPdfOrPicture(scope.row['courseWareVO'].name) === 'PDF'"
                  @click="handlePreviewFile(scope.row['courseWareVO'].fileUrl)"
-                   size="mini" type="primary" plain>预览</el-button>
-            <el-button v-if="scope.row['courseWareVO'].useMethod === 'SCAN' && isPdfOrPicture(scope.row['courseWareVO'].name) === 'PICTURE'"
+                   size="mini" style="color: #409EFF" :underline="false">预览</el-link>
+            <el-link v-if="scope.row['courseWareVO'].useMethod === 'SCAN' && isPdfOrPicture(scope.row['courseWareVO'].name) === 'PICTURE'"
                  @click="handlePreviewPicture(scope.row['courseWareVO'])"
-                 size="mini" type="primary" plain>预览</el-button>
+                 size="mini" style="color: #409EFF" :underline="false">预览</el-link>
             <a :href="scope.row['courseWareVO'].fileUrl" v-if="isPdfOrPicture(scope.row['courseWareVO'].name) === 'OTHER'">
-              <el-button v-if="scope.row['courseWareVO'].useMethod === 'SCAN'"
-                         size="mini" type="success" plain>下载</el-button>
+              <el-link v-if="scope.row['courseWareVO'].useMethod === 'SCAN'"
+                         size="mini" style="color: #67C23A; margin-left: 10px" :underline="false">下载</el-link>
             </a>
-            <el-button v-if="scope.row['courseWareVO'].useMethod === 'SCAN' && isPdfOrPicture(scope.row['courseWareVO'].name) === 'PDF'"
+            <el-link v-if="scope.row['courseWareVO'].useMethod === 'SCAN' && isPdfOrPicture(scope.row['courseWareVO'].name) === 'PDF'"
                      @click="handlePreviewFile(scope.row['courseWareVO'].fileUrl)"
-                     size="mini" type="success" plain>下载</el-button>
+                     size="mini" style="color: #67C23A; margin-left: 10px" :underline="false">下载</el-link>
             <a :href="scope.row['courseWareVO'].fileUrl"
                v-if="scope.row['courseWareVO'].useMethod === 'SCAN' && isPdfOrPicture(scope.row['courseWareVO'].name) === 'PICTURE'">
-              <el-button size="mini" type="success" plain>下载</el-button>
+              <el-link size="mini" style="color: #67C23A; margin-left: 10px" :underline="false">下载</el-link>
             </a>
-            <el-button v-if="Number(scope.row['courseWareVO'].senderId) === Number(this.$store.state.user.id)"
-                       size="mini" type="danger" @click="handleRemoveCourseWare(scope.row['courseWareVO'].id)" plain>删除</el-button>
+            <el-link v-if="Number(scope.row['courseWareVO'].senderId) === Number(this.$store.state.user.id)"
+                       size="mini" style="color: #F56C6C; margin-left: 10px" :underline="false" @click="handleRemoveCourseWare(scope.row['courseWareVO'].id)">删除</el-link>
           </template>
       </el-table-column>
     </el-table>