From 2d06dde9849d7854a69b910d65eda9425656d4c5 Mon Sep 17 00:00:00 2001
From: huweihang <hwh916879598@gmail.com>
Date: Fri, 12 Dec 2025 15:13:37 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=9B=B4=E6=96=B0=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BB=A5=E4=BC=98=E5=8C=96=E8=AF=BE=E7=A8=8B=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=EF=BC=8C=E8=B0=83=E6=95=B4=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E6=A1=86=E5=92=8C=E8=BF=87=E6=BB=A4=E5=99=A8=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=BC=BA=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/index.scss              |   6 +-
 src/components/Course/TopCourseSorter.vue |  20 +-
 src/views/course/ManageListRemote.vue     | 879 ++++++++++++----------
 3 files changed, 501 insertions(+), 404 deletions(-)

diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 8b1041d2..c3f9ced0 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -422,8 +422,8 @@ li{
   }
 
   .el-message-box__content {
-    padding: 0 0 28px 0;
-    margin-top: 30px;
+    margin-top: 0;
+    padding: 50px 0;
     .el-message-box__status {
       margin-right: 14px;
       font-size: 24px;
@@ -460,7 +460,7 @@ li{
     display: flex;
     justify-content: flex-end;
     padding-right: 20px;
-    margin-top: 40px;
+    margin-top: 0px;
     padding-bottom: 20px;
 
     .el-button {
diff --git a/src/components/Course/TopCourseSorter.vue b/src/components/Course/TopCourseSorter.vue
index 3037c62b..55cf78d6 100644
--- a/src/components/Course/TopCourseSorter.vue
+++ b/src/components/Course/TopCourseSorter.vue
@@ -31,9 +31,15 @@
             <i class="el-icon-s-operation"></i>
           </div>
           <div class="row-cell row-cell--order">{{ index + 1 }}</div>
-          <div class="row-cell row-cell--name" :title="item.name">{{ item.name }}</div>
-          <div class="row-cell row-cell--teacher" :title="item.teacherName || '-'">
-            {{ item.teacherName || '-' }}
+          <div class="row-cell row-cell--name">
+            <el-tooltip :content="item.name" placement="top" :disabled="!item.name">
+              <div class="cell-text">{{ item.name }}</div>
+            </el-tooltip>
+          </div>
+          <div class="row-cell row-cell--teacher">
+            <el-tooltip :content="item.teacherName || '-'" placement="top" :disabled="!item.teacherName">
+              <div class="cell-text">{{ item.teacherName || '-' }}</div>
+            </el-tooltip>
           </div>
         </div>
       </div>
@@ -202,6 +208,7 @@ export default {
 .row-cell--name,
 .row-cell--teacher {
   color: #303133;
+  overflow: hidden;
 }
 
 .row-cell--name {
@@ -212,6 +219,13 @@ export default {
   color: #666;
 }
 
+.cell-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+
 .row-cell--handle i {
   font-size: 20px;
   color: #c0c4cc;
diff --git a/src/views/course/ManageListRemote.vue b/src/views/course/ManageListRemote.vue
index 3f97c0a0..847919d4 100644
--- a/src/views/course/ManageListRemote.vue
+++ b/src/views/course/ManageListRemote.vue
@@ -49,18 +49,13 @@
               <el-option label="未发布" :value="false"></el-option>
             </el-select>
           </div>
-          <div class="filter-field filter-field--enabled">
+          <div class="filter-field filter-field--enabled" v-show="showAdvancedFilter">
             <el-select v-model="params.enabled" placeholder="全部启停用状态" clearable>
               <el-option label="启用" :value="true"></el-option>
               <el-option label="停用" :value="false"></el-option>
             </el-select>
           </div>
-          <div class="filter-field filter-field--open" v-show="showAdvancedFilter">
-            <el-select v-model="params.openCourse" placeholder="是否公开课" clearable>
-              <el-option label="是" :value="1"></el-option>
-              <el-option label="否" :value="0"></el-option>
-            </el-select>
-          </div>
+          
 
         </div>
         <div class="filter-actions" v-show="!showAdvancedFilter">
@@ -78,12 +73,23 @@
       </div>
       <div v-if="showAdvancedFilter" class="filter-row filter-row--advanced advanced-filter">
         <div class="filter-fields">
-
+          <div class="filter-field filter-field--open">
+            <el-select v-model="params.openCourse" placeholder="是否公开课" clearable>
+              <el-option label="是" :value="1"></el-option>
+              <el-option label="否" :value="0"></el-option>
+            </el-select>
+          </div>
           <div class="filter-field filter-field--resowner">
-            <el-input placeholder="全部资源归属" v-model="orgName" readonly @click="showChooseOrg">
-              <el-button v-if="identity === 3 || identity === 5" slot="append" icon="el-icon-search"
-                @click="showChooseOrg">选择</el-button>
-            </el-input>
+            <el-cascader
+              ref="resOwnerCascader"
+              v-model="resOwnerSelected"
+              placeholder="全部资源归属"
+              clearable
+              :props="resOwnerCascaderProps"
+              :show-all-levels="false"
+              @change="handleResOwnerChange"
+              filterable
+            ></el-cascader>
           </div>
           <div class="filter-field filter-field--creator creator-filter">
             <div class="teacher-select-wrapper">
@@ -147,22 +153,22 @@
             <span class="common-cell single-line-ellipsis">{{ formatSysTypeChain(scope.row) }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="授课教师" prop="teacherName" min-width="260" show-overflow-tooltip align="center">
+        <el-table-column label="授课教师" prop="teacherName" min-width="260" align="center" show-overflow-tooltip>
           <template slot-scope="scope">
-            <span class="common-cell single-line-ellipsis">{{ scope.row.teacherName }}</span>
+            <span class="common-cell">{{ scope.row.teacherName }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="课程时长" min-width="110" align="center" :sort-method="sortByDuration" sortable>
+        <el-table-column label="课程时长" prop="courseDuration" min-width="110" align="center" sortable>
           <template slot-scope="scope">
             <span class="common-cell">{{ formatCourseDuration(scope.row) }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="学习人数" min-width="110" align="center" :sort-method="sortByStudyCount" sortable>
+        <el-table-column label="学习人数" prop="studys" min-width="110" align="center" sortable>
           <template slot-scope="scope">
             <span class="common-cell">{{ scope.row.studys || '-' }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="课程评分" min-width="110" align="center" :sort-method="sortByScore" sortable>
+        <el-table-column label="课程评分" prop="score" min-width="110" align="center" sortable>
           <template slot-scope="scope">
             <span class="common-cell">{{ formatScore(scope.row) }}</span>
           </template>
@@ -175,22 +181,22 @@
             <span :class="['common-cell', 'status--reject']" v-if="scope.row.status == 3">审核驳回</span>
           </template>
         </el-table-column>
-        <el-table-column label="发布状态" min-width="110" align="center" sortable>
+        <el-table-column label="发布状态" prop="published" min-width="110" align="center" sortable>
           <template slot-scope="scope">
             <span class="common-cell">{{ scope.row.published == true ? '已发布' : '未发布' }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="启停用状态" min-width="130" align="center" sortable>
+        <el-table-column label="启停用状态" prop="enabled" min-width="130" align="center" sortable>
           <template slot-scope="scope">
             <span class="common-cell">{{ scope.row.enabled == true ? '启用' : '停用' }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="公开课" min-width="110" align="center" sortable>
+        <el-table-column label="公开课" prop="openCourse" min-width="110" align="center" sortable>
           <template slot-scope="scope">
             <span class="common-cell">{{ scope.row.openCourse == 1 ? '是' : '否' }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="资源归属" min-width="220" align="center" sortable>
+        <el-table-column label="资源归属" prop="orgName" min-width="220" align="center" sortable>
           <template slot-scope="scope">
             <el-tooltip :content="scope.row.orgFullName || scope.row.orgName" placement="top" effect="dark">
               <span class="common-cell">{{ scope.row.orgName }}</span>
@@ -219,9 +225,14 @@
           <template slot-scope="scope" class="btn-gl">
             <!-- 20240621 修改scope.row.isPermission = fasle 时不展示操作按钮-->
             <!-- v-if="scope.row.isPermission && !forChoose && scope.row.status == 2" -->
-            <template v-if="scope.row.isPermission && !forChoose && scope.row.status == 2">
-              <el-button type="text" size="mini" class="action-link--primary"
-                @click="withdraw(scope.row)">撤回</el-button>
+            <template v-if="scope.row.isPermission && scope.row.status != 2">
+              <el-button type="text" size="mini"
+              class="action-link--primary" @click="editCurriculum(scope.row)">编辑</el-button>
+              <el-divider direction="vertical"></el-divider>
+            </template>
+            <template v-if="showSetTopFeature && scope.row.published">
+              <el-button type="text" size="mini"
+              class="action-link--primary" @click="showQrimage(scope.row)">二维码</el-button>
               <el-divider direction="vertical"></el-divider>
             </template>
             <template v-if="scope.row.isPermission && !forChoose && scope.row.published">
@@ -229,11 +240,13 @@
                 class="action-link--primary">管理</el-button>
               <el-divider direction="vertical"></el-divider>
             </template>
-            <template v-if="scope.row.isPermission && scope.row.status != 2">
-              <el-button type="text" size="mini"
-              class="action-link--primary" @click="editCurriculum(scope.row)">编辑</el-button>
+           
+            <template v-if="scope.row.isPermission && !forChoose && scope.row.status == 2">
+              <el-button type="text" size="mini" class="action-link--primary"
+                @click="withdraw(scope.row)">撤回</el-button>
               <el-divider direction="vertical"></el-divider>
             </template>
+            
             <template v-if="scope.row.isPermission && (scope.row.status != 2 && !scope.row.published) || scope.row.isPermission && !scope.row.enabled">
               <el-button
               type="text" class="action-link--danger" size="mini" @click="delItem(scope.row)">删除</el-button>
@@ -250,8 +263,7 @@
                   class="action-link--bold">{{
                     scope.row.enabled ?
                   '停用' : '启用' }}</el-dropdown-item>
-                <el-dropdown-item v-if="showSetTopFeature && scope.row.published"
-                  @click.native="showQrimage(scope.row)">二维码</el-dropdown-item><!--发布之后才可以查看二维码-->
+                
                 <el-dropdown-item v-if="showSetTopFeature && scope.row.published" @click.native="setTop(scope.row)">{{
                   scope.row.isTop ? '取消置顶' : '置顶' }}</el-dropdown-item>
 
@@ -405,7 +417,6 @@
       <course-form ref="courseForm" @submitSuccess="searchData" @close="searchData"></course-form>
     </div>
     <top-course-sorter v-if="showSetTopFeature" ref="topSorter" @sorted="onTopSorted"></top-course-sorter>
-    <choose-org ref="refChooseOrg" @confirm="confirmChooseOrg"></choose-org>
   </div>
 </template>
 
@@ -417,7 +428,6 @@ import auditCourse1 from '@/components/Course/auditCourse1.vue';
 import auditCourse2 from '@/components/Course/auditCourse2.vue';
 import adminPage from '@/components/Administration/adminPage.vue';
 import TopCourseSorter from '@/components/Course/TopCourseSorter.vue';
-import chooseOrg from '@/components/System/chooseOrg.vue';
 import apiResowner from '../../api/modules/resowner.js';
 import apiType from '../../api/modules/type.js'
 import { courseType } from '../../utils/tools.js';
@@ -428,9 +438,20 @@ import apiUserbasic from "@/api/boe/userbasic.js"
 import apiTeacher from '../../api/modules/teacher.js';
 export default {
   name: 'manageCourse',
-  components: { courseForm, manager, auditCourse1, auditCourse2, adminPage, TopCourseSorter, chooseOrg },
+  components: { courseForm, manager, auditCourse1, auditCourse2, adminPage, TopCourseSorter },
   computed: {
     ...mapGetters(['resOwnerMap', 'sysTypeMap', 'userInfo', 'identity']),
+    resOwnerCascaderProps() {
+      return {
+        value: 'id',
+        label: 'name',
+        children: 'children',
+        lazy: true,
+        lazyLoad: this.loadResOwnerNode,
+        leaf: 'leaf',
+        checkStrictly: true // 允许选择任意一级选项
+      };
+    },
   },
   data() {
     return {
@@ -448,6 +469,8 @@ export default {
       sysTypeListMap: [],
       sysTypeList: [],
       resOwnerListMap: [],
+      resOwnerSelected: [],
+      resOwnerCascaderOptions: [],
       showSetTopFeature: false,
       page: {
         pageIndex: 1,//第几页
@@ -504,6 +527,8 @@ export default {
         createUserId: '',
         createFrom: '',
       },
+      orderField: '', // 排序字段
+      orderAsc: true, // 排序顺序：true-升序，false-降序
       pageData: [],
       courseChooseShow: false,
       courseChooseId: '',
@@ -803,14 +828,14 @@ export default {
       // }
       const duration = row.courseDuration
       if (duration === undefined || duration === null || duration === 0) {
-        return '0分钟';
+        return '0';
       }
       const minutes = Math.round(duration / 60);
-      if (minutes >= 60) {
-        const hours = (minutes / 60).toFixed(1);
-        return `${hours}小时`;
-      }
-      return `${minutes || 0}分钟`;
+      //if (minutes >= 60) {
+        //const hours = (minutes / 60).toFixed(1);
+        //return `${hours}小时`;
+      //}
+      return `${minutes || 0}`;
     },
     formatStudyCount(row) {
       const count = row.studyCount !== undefined
@@ -947,6 +972,13 @@ export default {
         query.audiences = this.audiences.join(',');
       }
       query.isCreateCourse = !this.pageManage;
+      
+      // 添加排序参数
+      if (this.orderField) {
+        query.orderField = this.orderField;
+        query.orderAsc = this.orderAsc;
+      }
+      
       return query;
     },
     async handleExport() {
@@ -1015,43 +1047,26 @@ export default {
           }
         })
       } else if (row.isTop == true) {
-        this.$confirm('此操作将取消置顶此课程, 是否继续?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning',
-          customClass: 'custom-confirm-dialog'
-        }).then(() => {
-          apiCourse.setTop(params).then(res => {
-            if (res.status === 200 && res.result === true) {
-              this.$message.success('取消成功！')
-              this.searchData();
-            } else {
-              this.$message({
-                type: 'error',
-                message: res.message
-              });
-            }
-          })
-        }).catch(() => {
-          this.$message({
-            type: 'info',
-            message: '取消置顶失败'
-          });
-        });
+        apiCourse.setTop(params).then(res => {
+          if (res.status === 200 && res.result === true) {
+            this.$message.success('取消成功！')
+            this.searchData();
+          } else {
+            this.$message({
+              type: 'error',
+              message: res.message
+            });
+          }
+        })
       }
-
-
-
-
-
-
     },
     // 复制
     copyCourse(item) {
-      const confirmText = `确认复制${item.name}吗？`;
+      const confirmText = `<i class="el-icon-warning-outline"></i>确认复制${item.name}吗？`;
       this.$confirm(confirmText, '复制确认', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
+        dangerouslyUseHTMLString: true,
         type: 'warning',
         customClass: 'custom-confirm-dialog'
       }).then(() => {
@@ -1098,6 +1113,7 @@ export default {
       this.learningTimeRange = [];
       this.orgId = '';
       this.orgName = '';
+      this.resOwnerSelected = [];
       this.teacherFilterList = [];
       this.teacherSelected = [];
       this.teacherOptions = [];
@@ -1116,6 +1132,9 @@ export default {
         createUserId: '',
         createFrom: '',
       });
+      // 重置排序
+      this.orderField = '';
+      this.orderAsc = true;
       this.searchData(true);
     },
     ...mapActions({
@@ -1128,15 +1147,6 @@ export default {
       if (code == '') { return ''; }
       return this.resOwnerMap.get(code);
     },
-    resOwnerFilterMethod(node, keyword = '') {
-      const limited = keyword.slice(0, 200);
-      if (this.$refs.resOwnerCascader && this.$refs.resOwnerCascader.inputValue !== limited) {
-        this.$refs.resOwnerCascader.inputValue = limited;
-      }
-      if (!limited) return true;
-      const text = node.label || node.text || '';
-      return text.toLowerCase().includes(limited.toLowerCase());
-    },
     // 直接审核
     examineData() {
       if (this.isExamine == 1) {
@@ -1171,10 +1181,11 @@ export default {
       const nextEnabled = !row.enabled;
       const actionText = nextEnabled ? '启用' : '停用';
       try {
-        await this.$confirm(`确定${actionText}${row.name}吗？`, `${actionText}确认`, {
+        await this.$confirm(`<i class="el-icon-warning-outline"></i>确定${actionText}${row.name}吗？`, `${actionText}确认`, {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning',
+          dangerouslyUseHTMLString: true,
           customClass: 'custom-confirm-dialog'
         });
       } catch (error) {
@@ -1226,9 +1237,19 @@ export default {
     handleSortChange({ column, prop, order }) {
       // order: ascending(升序) | descending(降序) | null(取消排序)
       console.log('排序变化:', { column, prop, order });
-      // TODO: 后续可以使用接口进行排序
-      // 如果需要接口排序，可以在这里调用 searchData 方法重新查询
-      // this.searchData(true);
+      
+      if (order) {
+        // 有排序：保存排序字段和顺序
+        this.orderField = prop;
+        this.orderAsc = order === 'ascending';
+      } else {
+        // 取消排序：清空排序字段
+        this.orderField = '';
+        this.orderAsc = true;
+      }
+      
+      // 重新查询数据
+      this.searchData(true);
     },
     viewTopic(row) {
       if (row.status == 1) {
@@ -1333,18 +1354,81 @@ export default {
       sessionStorage.setItem('courseDetail', JSON.stringify(row));
       this.$router.push({ path: '/iframe/course/coursemanage-remote' });
     },
-    showChooseOrg() {
-      if (this.$refs.refChooseOrg) {
-        this.$refs.refChooseOrg.dlgShow = true;
+    async loadResOwnerNode(node, resolve) {
+      const { level } = node;
+      let parentId = '';
+      
+      if (level === 0) {
+        // 第一层：获取根节点
+        try {
+          const res = await apiUserbasic.findOrgsByKeyword('');
+          if (res && res.result) {
+            const nodes = res.result.map(item => ({
+              id: item.id,
+              name: item.name,
+              hrbpId: item.hrbpId,
+              leaf: false, // 懒加载模式下，先假设所有节点都可能有子节点
+              children: [] // 空数组表示需要懒加载
+            }));
+            resolve(nodes);
+          } else {
+            resolve([]);
+          }
+        } catch (error) {
+          console.error('加载资源归属失败:', error);
+          resolve([]);
+        }
+      } else {
+        // 子节点：根据父节点ID加载
+        parentId = node.value || (node.data && node.data.id);
+        if (!parentId) {
+          resolve([]);
+          return;
+        }
+        try {
+          const res = await apiUserbasic.getOrgInfo(parentId);
+          if (res && res.status === 200 && res.result) {
+            let treeList = [];
+            if (res.result.directChildList && res.result.directChildList.length > 0) {
+              treeList = res.result.directChildList.map(item => ({
+                id: item.id,
+                name: item.name,
+                hrbpId: item.hrbpId,
+                leaf: false, // 懒加载模式下，先假设所有节点都可能有子节点
+                children: [] // 空数组表示需要懒加载
+              }));
+            }
+            resolve(treeList);
+          } else {
+            // 如果没有子节点，返回空数组，级联选择器会自动将其视为叶子节点
+            resolve([]);
+          }
+        } catch (error) {
+          console.error('加载资源归属子节点失败:', error);
+          resolve([]);
+        }
       }
     },
-    confirmChooseOrg(orgInfo) {
-      if (!orgInfo) return;
-      this.orgId = orgInfo.id || '';
-      this.orgName = orgInfo.name || '';
-      if (this.$refs.refChooseOrg) {
-        this.$refs.refChooseOrg.dlgShow = false;
+    handleResOwnerChange(value) {
+      if (!value || value.length === 0) {
+        this.orgId = '';
+        this.orgName = '';
+        return;
       }
+      // value 是选中的路径数组，最后一个元素是选中的节点ID
+      const selectedId = value[value.length - 1];
+      this.orgId = selectedId;
+      
+      // 通过级联选择器的 getCheckedNodes 方法获取选中的节点信息
+      this.$nextTick(() => {
+        if (this.$refs.resOwnerCascader) {
+          const checkedNodes = this.$refs.resOwnerCascader.getCheckedNodes();
+          if (checkedNodes && checkedNodes.length > 0) {
+            const lastNode = checkedNodes[checkedNodes.length - 1];
+            this.orgName = lastNode.label || lastNode.name || '';
+          }
+        }
+      });
     },
     showChooseCourse() {
       this.courseChooseShow = true;
@@ -1521,314 +1605,6 @@ export default {
   margin-top: 10px;
 }
 
-.filter-field--name {
-  ::v-deep .el-input__inner {
-    width: 444px;
-    height: 32px;
-    background: #FFFFFF;
-    border-radius: 6px;
-    border: 1px solid rgba(0, 0, 0, .2);
-    line-height: 32px;
-    padding: 0 10px;
-    &:focus {
-      border: 1px solid #4284F7;
-    }
-  }
-}
-
-.filter-field--category  {
-  ::v-deep.el-cascader {
-    line-height: 32px;
-    .el-input__inner {
-      width: 180px;
-      height: 32px;
-      background: #FFFFFF;
-      border-radius: 6px;
-      border: 1px solid rgba(0, 0, 0, .2);
-      line-height: 32px;
-      padding: 0 10px;
-      color: #000000;
-      &:focus {
-        border: 1px solid #4284F7;
-      }
-    }
-
-    .el-input {
-      line-height: 32px;
-    }
-
-    .el-input__suffix {
-      line-height: 32px;
-    }
-
-    .el-input__icon {
-      line-height: 32px;
-    }
-  }
-  
-  
-}
-
-.filter-field--teacher {
-  ::v-deep.el-select {
-    .el-select__input {
-      margin-left: 10px;
-    }
-    .el-input {
-      &:focus {
-        border: 1px solid #4284F7;
-      }
-    }
-    .el-input__inner {
-      width: 180px;
-      height: 32px;
-      background: #FFFFFF;
-      border-radius: 6px;
-      border: 1px solid rgba(0, 0, 0, .2);
-      line-height: 32px;
-      padding: 0 10px;
-      
-    }
-  }
-}
-
-.filter-field--status {
-  ::v-deep.el-select {
-    .el-select__input {
-      margin-left: 10px;
-    }
-
-    .el-input__inner {
-      width: 136px;
-      height: 32px;
-      background: #FFFFFF;
-      border-radius: 6px;
-      border: 1px solid rgba(0, 0, 0, .2);
-      line-height: 32px;
-      padding: 0 10px;
-      &:focus {
-        border: 1px solid #4284F7;
-      }
-    }
-
-    .el-input__icon {
-      line-height: 32px;
-    }
-  }
-}
-
-.filter-field--publish {
-  ::v-deep.el-select {
-    .el-select__input {
-      margin-left: 10px;
-    }
-
-    .el-input__inner {
-      width: 136px;
-      height: 32px;
-      background: #FFFFFF;
-      border-radius: 6px;
-      border: 1px solid rgba(0, 0, 0, .2);
-      line-height: 32px;
-      padding: 0 10px;
-      &:focus {
-        border: 1px solid #4284F7;
-      }
-    }
-
-    .el-input__icon {
-      line-height: 32px;
-    }
-  }
-}
-
-.filter-field--enabled {
-  ::v-deep.el-select {
-    .el-select__input {
-      margin-left: 10px;
-    }
-
-    .el-input__inner {
-      width: 136px;
-      height: 32px;
-      background: #FFFFFF;
-      border-radius: 6px;
-      border: 1px solid rgba(0, 0, 0, .2);
-      line-height: 32px;
-      padding: 0 10px;
-      &:focus {
-        border: 1px solid #4284F7;
-      }
-    }
-
-    .el-input__icon {
-      line-height: 32px;
-    }
-  }
-  
-}
-
-.filter-field--open {
-  ::v-deep.el-select {
-    .el-select__input {
-      margin-left: 10px;
-    }
-
-    .el-input__inner {
-      width: 124px;
-      height: 32px;
-      background: #FFFFFF;
-      border-radius: 6px;
-      border: 1px solid rgba(0, 0, 0, .2);
-      line-height: 32px;
-      padding: 0 10px;
-      &:focus {
-        border: 1px solid #4284F7;
-      }
-    }
-
-    .el-input__icon {
-      line-height: 32px;
-    }
-  }
-  
-}
-
-
-// .filter-field--resowner ::v-deep.el-cascader  {
-//   line-height: 32px;
-//   .el-input__inner {
-//     width: 180px;
-//     height: 32px;
-//     background: #FFFFFF;
-//     border-radius: 6px;
-//     border: 1px solid rgba(0, 0, 0, .2);
-//     line-height: 32px;
-//     padding: 0 10px;
-//   }
-//   .el-input {
-//     line-height: 32px;
-//   }
-//   .el-input__suffix {
-//     line-height: 32px;
-//   }
-//   .el-input__icon {
-//     line-height: 32px;
-//   }
-// }
-
-.filter-field--resowner {
-
-  // line-height: 32px;
-  ::v-deep .el-input__inner {
-    width: 180px;
-    height: 32px;
-    background: #FFFFFF;
-    border-radius: 6px 0 0 6px;
-    border: 1px solid rgba(0, 0, 0, .2);
-    line-height: 32px;
-    padding: 0 10px;
-  }
-
-  // .el-input {
-  //   line-height: 32px;
-  // }
-  // .el-input__suffix {
-  //   line-height: 32px;
-  // }
-  // .el-input__icon {
-  //   line-height: 32px;
-  // }
-}
-
-.filter-field--creator {
-  ::v-deep.el-select {
-    .el-select__input {
-      margin-left: 10px;
-    }
-
-    .el-input__inner {
-      width: 136px;
-      height: 32px;
-      background: #FFFFFF;
-      border-radius: 6px;
-      border: 1px solid rgba(0, 0, 0, .2);
-      line-height: 32px;
-      padding: 0 10px;
-      &:focus {
-        border: 1px solid #4284F7;
-      }
-    }
-  }
-  
-}
-
-.filter-field--create-from {
-  ::v-deep.el-select {
-    .el-select__input {
-      margin-left: 10px;
-    }
-
-    .el-input__inner {
-      width: 180px;
-      height: 32px;
-      background: #FFFFFF;
-      border-radius: 6px;
-      border: 1px solid rgba(0, 0, 0, .2);
-      line-height: 32px;
-      padding: 0 10px;
-      &:focus {
-        border: 1px solid #4284F7;
-      }
-    }
-
-    .el-input__icon {
-      line-height: 32px;
-    }
-  }
-  
-}
-
-.filter-field--time {
-  ::v-deep .el-input__inner {
-    width: 210px;
-    height: 32px;
-    background: #FFFFFF;
-    border-radius: 6px;
-    border: 1px solid rgba(0, 0, 0, .2);
-    line-height: 32px;
-    padding: 0 10px;
-    &:focus {
-      border: 1px solid #4284F7;
-    }
-
-    .el-input__icon {
-      line-height: 32px;
-
-      &.el-icon-date {
-        position: absolute;
-        right: 0;
-      }
-
-      &.el-icon-close {
-        margin-right: 8px;
-      }
-    }
-
-    .el-range-input {
-      text-align: left;
-    }
-
-    .el-range-separator {
-      line-height: 30px;
-    }
-
-    .el-range-input {
-      line-height: 30px;
-    }
-  }
-}
-
 .toggle-link {
   padding: 0;
   font-size: 14px;
@@ -2174,6 +1950,12 @@ export default {
         }
       }
     }
+    &.ascending .sort-caret.ascending {
+      border-bottom-color: #409EFF;
+    }
+    &.descending .sort-caret.descending{
+      border-top-color: #409EFF;
+    }
 
     &.el-table--medium .el-table__cell {
       padding: 5px 0;
@@ -2236,6 +2018,307 @@ export default {
 </style>
 
 <style lang="scss">
+.filter-field--name {
+  .el-input__inner {
+    width: 444px;
+    height: 32px;
+    background: #FFFFFF;
+    border-radius: 6px;
+    border: 1px solid rgba(0, 0, 0, .2);
+    line-height: 32px;
+    padding: 0 10px;
+    &:focus {
+      border-color: #4284F7;
+    }
+  }
+}
+
+.filter-field--category  {
+  .el-cascader {
+    line-height: 32px;
+    .el-input__inner {
+      width: 180px;
+      height: 32px;
+      background: #FFFFFF;
+      border-radius: 6px;
+      border: 1px solid rgba(0, 0, 0, .2);
+      line-height: 32px;
+      padding: 0 10px;
+      color: #000000;
+      &:focus {
+        border: 1px solid #4284F7;
+      }
+    }
+
+    .el-input {
+      line-height: 32px;
+      &.is-focus .el-input__inner{
+        border-color: #4284F7;
+      }
+    }
+
+    .el-input__suffix {
+      line-height: 32px;
+    }
+
+    .el-input__icon {
+      line-height: 32px;
+    }
+  }
+  
+  
+}
+
+.filter-field--teacher {
+  .el-select {
+    .el-select__input {
+      margin-left: 10px;
+    }
+    .el-input__inner {
+      width: 180px;
+      height: 32px;
+      background: #FFFFFF;
+      border-radius: 6px;
+      border: 1px solid rgba(0, 0, 0, .2);
+      line-height: 32px;
+      padding: 0 10px;
+    }
+    .el-input {
+      &.is-focus .el-input__inner{
+        border-color: #4284F7;
+      }
+    }
+  }
+}
+
+.filter-field--status {
+  .el-select {
+    .el-select__input {
+      margin-left: 10px;
+    }
+
+    .el-input__inner {
+      width: 136px;
+      height: 32px;
+      background: #FFFFFF;
+      border-radius: 6px;
+      border: 1px solid rgba(0, 0, 0, .2);
+      line-height: 32px;
+      padding: 0 10px;
+      &.is-focus .el-input__inner{
+        border-color: #4284F7;
+      }
+    }
+
+    .el-input__icon {
+      line-height: 32px;
+    }
+  }
+}
+
+.filter-field--publish {
+  .el-select {
+    .el-select__input {
+      margin-left: 10px;
+    }
+
+    .el-input__inner {
+      width: 136px;
+      height: 32px;
+      background: #FFFFFF;
+      border-radius: 6px;
+      border: 1px solid rgba(0, 0, 0, .2);
+      line-height: 32px;
+      padding: 0 10px;
+      &.is-focus .el-input__inner{
+        border-color: #4284F7;
+      }
+    }
+
+    .el-input__icon {
+      line-height: 32px;
+    }
+  }
+}
+
+.filter-field--enabled {
+  .el-select {
+    .el-select__input {
+      margin-left: 10px;
+    }
+
+    .el-input__inner {
+      width: 136px;
+      height: 32px;
+      background: #FFFFFF;
+      border-radius: 6px;
+      border: 1px solid rgba(0, 0, 0, .2);
+      line-height: 32px;
+      padding: 0 10px;
+      &.is-focus .el-input__inner{
+        border-color: #4284F7;
+      }
+    }
+
+    .el-input__icon {
+      line-height: 32px;
+    }
+  }
+  
+}
+
+.filter-field--open {
+  .el-select {
+    .el-select__input {
+      margin-left: 10px;
+    }
+
+    .el-input__inner {
+      width: 124px;
+      height: 32px;
+      background: #FFFFFF;
+      border-radius: 6px;
+      border: 1px solid rgba(0, 0, 0, .2);
+      line-height: 32px;
+      padding: 0 10px;
+      &.is-focus .el-input__inner{
+        border-color: #4284F7;
+      }
+    }
+
+    .el-input__icon {
+      line-height: 32px;
+    }
+  }
+}
+
+.filter-field--resowner {
+  .el-cascader {
+    width: 180px;
+    line-height: 32px;
+    .el-input__inner {
+      width: 180px;
+      height: 32px;
+      background: #FFFFFF;
+      border-radius: 6px;
+      border: 1px solid rgba(0, 0, 0, .2);
+      line-height: 32px;
+      padding: 0 10px;
+      &:focus {
+        border-color: #4284F7;
+      }
+    }
+    &.is-focus .el-input__inner {
+      border-color: #4284F7;
+    }
+  }
+  .el-input {
+    .el-input__inner {
+      width: 180px;
+      height: 32px;
+      background: #FFFFFF;
+      border-radius: 6px;
+      border: 1px solid rgba(0, 0, 0, .2);
+      line-height: 32px;
+      padding: 0 10px;
+    }
+  }
+}
+
+.filter-field--creator {
+  .el-select {
+    .el-select__input {
+      margin-left: 10px;
+    }
+
+    .el-input__inner {
+      width: 136px;
+      height: 32px;
+      background: #FFFFFF;
+      border-radius: 6px;
+      border: 1px solid rgba(0, 0, 0, .2);
+      line-height: 32px;
+      padding: 0 10px;
+      &.is-focus .el-input__inner{
+        border-color: #4284F7;
+      }
+    }
+  }
+  
+}
+
+.filter-field--create-from {
+  .el-select {
+    .el-select__input {
+      margin-left: 10px;
+    }
+
+    .el-input__inner {
+      width: 180px;
+      height: 32px;
+      background: #FFFFFF;
+      border-radius: 6px;
+      border: 1px solid rgba(0, 0, 0, .2);
+      line-height: 32px;
+      padding: 0 10px;
+      &.is-focus .el-input__inner{
+        border-color: #4284F7;
+      }
+    }
+
+    .el-input__icon {
+      line-height: 32px;
+    }
+  }
+  
+}
+
+.filter-field--time {
+  .el-input__inner {
+    width: 316px;
+    height: 32px;
+    background: #FFFFFF;
+    border-radius: 6px;
+    border: 1px solid rgba(0, 0, 0, .2);
+    line-height: 32px;
+    padding: 0 10px;
+
+    .el-input__icon {
+      line-height: 32px;
+
+      &.el-icon-date {
+        position: absolute;
+        right: 0;
+      }
+
+      &.el-icon-close {
+        margin-right: 8px;
+      }
+    }
+    .el-range-editor {
+      .is-active:hover{
+        border-color: #4284F7;
+      }
+    }
+    .el-range-input {
+      // text-align: left;
+    }
+
+    .el-range-separator {
+      line-height: 30px;
+    }
+
+    .el-range-input {
+      line-height: 30px;
+    }
+  }
+  .noSplitDatePicker {
+    .el-range-input {
+      text-align: left;
+    }
+  }
+}
+
 .icon-btn-tooltip {
   height: 30px;
   background: rgba(0, 0, 0, 1);