文件导航面包屑完善，增加文件分享到公共社区、分享到部门、分享到个人

src/api/user/index.js

@@ -12,3 +12,4 @@ export const verity = params => {
         params
     })
 }
+

src/components/PaginationSelector/index.vue

+<template>
+  <el-select
+    v-model="childSelectedValue"
+    :filterable="remote"
+    multiple
+    :loading="loading"
+    :remote="remote"
+    :size="size"
+    :remote-method="remoteMethod"
+    :clearable="clearable"
+    @change="handleChange"
+    @clear="handleClear"
+    @focus="handleFocus"
+    :style="{ width: '93%' }"
+    :placeholder="placeholder"
+  >
+    <el-option
+      v-for="item in optionSource"
+      :key="item[valueKey]"
+      :label="item[labelKey]"
+      :value="item[valueKey]"
+    >
+    </el-option>
+    <!-- {{ optionSource }} -->
+
+    <el-pagination
+      small
+      layout="prev, pager, next"
+      @current-change="changeNumber"
+      :hide-on-single-page="true"
+      :page-size="paginationOption.pageSize"
+      :current-page="paginationOption.currentPage"
+      :pager-count="paginationOption.pagerCount"
+      :total="paginationOption.total"
+    >
+    </el-pagination>
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: "PaginationSelect",
+  props: {
+    //此参数只是为了父组件实现 v-model指令接受参数用，子组件中无实际意义
+    // 在子组件中通过监听childSelectedValue值，来触发 input 事件，实现子父组件数据绑定
+    value: {
+      type: String | Array,
+      default: "",
+    },
+    valueKey: {
+      //传入的option数组中，要作为最终选择项的键值名称
+      type: String,
+    },
+    labelKey: {
+      //传入的option数组中，要作为显示项的键值名称
+      type: String,
+    },
+    clearable: {
+      //是否支持清除，默认支持
+      type: Boolean,
+      default: true,
+    },
+    remote: {
+      //是否支持远程搜索，默认支持
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      //组件尺寸，配置项同select  String | medium/small/mini
+      type: String,
+      default: "medium",
+    },
+    loading: {
+      //远程数据加载状态显示
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: "选择用户",
+    },
+    optionSource: {
+      //下拉框组件数据源
+      type: Array,
+      required: true,
+    },
+    paginationOption: {
+      //分页配置项
+      type: Object,
+      default: function () {
+        return {
+          pageSize: 5, //每页显示条数  6条刚好
+          currentPage: 1, //当前页
+          pagerCount: 5, //按钮数，超过时会折叠
+          total: 10, //总条数
+        };
+      },
+    },
+  },
+  data() {
+    return {
+      childSelectedValue: this.value,
+    };
+  },
+  watch: {
+    //监听子组件中选择的值得变化，每当选择一个项后，触发input事件，
+    // 将子组件中选择的值通过input事件传递给父组件，实现父组件中v-model绑定的值的双向绑定
+    childSelectedValue(val) {
+      this.$emit("input", val);
+    },
+    value(val) {
+      if (val != null && val.length < 1) {
+        this.childSelectedValue = "";
+      }
+    },
+  },
+  mounted() {},
+  methods: {
+    //子组件分页器，页码选择事件，父组件中监听子组件的 pageNationChange 事件，获取当前页码
+    changeNumber(val) {
+      //此处的val是页码
+      this.$emit("pageNationChange", val);
+    },
+    // 远程调用方法，在父组件中实现远程方法
+    remoteMethod(val) {
+      if (val != null && val.length > 0) {
+        //只有输入的字符串长度大于1时，触发
+        this.$emit("remote-method", val);
+      } else {
+        this.childSelectedValue = " ";
+      }
+    },
+    //使组件支持change事件
+    handleChange(val) {
+      this.$emit("change", val);
+    },
+    //使组件支持clear事件
+    handleClear(val) {
+      this.$emit("clear", val);
+    },
+    //解决远程搜索无结果时，显示清除按钮问题
+    handleFocus() {
+      if (this.childSelectedValue.length < 1) {
+        this.childSelectedValue = "";
+      }
+    },
+  },
+};
+</script>
+
+<style scoped></style>

src/components/common/BreadCrumb.vue

@@ -12,19 +12,21 @@
       @blur="handleInputBlurEnter"
       @change="handleInputBlurEnter"
     ></el-input>
+    <!-- {{ breadCrumbList }} -->
     <div
       class="breadcrumb-box"
       :class="{ 'able-input': fileType === 0 }"
       v-show="!isShowInput"
       @click.self="handleClickBreadCrumbSelf"
     >
-      <el-breadcrumb
+      <!-- <el-breadcrumb
         v-if="![0, 8].includes(fileType) && !['Share'].includes($route.name)"
         separator-class="el-icon-arrow-right"
       >
         <el-breadcrumb-item>{{ fileTypeMap[fileType] }}</el-breadcrumb-item>
-      </el-breadcrumb>
-      <el-breadcrumb v-else separator-class="el-icon-arrow-right">
+      </el-breadcrumb> -->
+
+      <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item
           v-for="(item, index) in breadCrumbList"
           :key="index"
@@ -66,15 +68,14 @@ export default {
       },
       isShowInput: false, //  是否展示路径输入框
       inputFilePath: "", //  路径输入
+      breadCrumbList: [],
     };
   },
-  computed: {
-    /**
-     * 面包屑导航栏数组
-     */
-    breadCrumbList: {
-      get() {
-        let filePath = this.$route.query.filePath;
+  watch: {
+    $route(value) {
+      // console.log(123, value);
+      const { filePath } = value.query;
+      // debugger;
       let filePathList = filePath ? filePath.split("/") : [];
       let res = []; //  返回结果数组
       let _path = []; //  存放祖先路径
@@ -102,12 +103,50 @@ export default {
           // });
         }
       }
-        return res;
-      },
-      set() {
-        return [];
+      console.log("res", res);
+      this.breadCrumbList = res;
     },
   },
+  computed: {
+    /**
+     * 面包屑导航栏数组
+     */
+    // breadCrumbList: {
+    //   get() {
+    //     let filePath = this.$route.query.filePath;
+    //     let filePathList = filePath ? filePath.split("/") : [];
+    //     let res = []; //  返回结果数组
+    //     let _path = []; //  存放祖先路径
+    //     for (let i = 0; i < filePathList.length; i++) {
+    //       if (filePathList[i]) {
+    //         _path.push(filePathList[i]);
+    //         res.push({
+    //           path: _path.join("/"),
+    //           name: filePathList[i],
+    //         });
+    //       } else if (i === 0) {
+    //         //  根目录
+    //         filePathList[i] = "";
+    //         _path.push(filePathList[i]);
+    //         res.push({
+    //           path: "/",
+    //           name:
+    //             this.fileType === 0
+    //               ? "全部文件"
+    //               : this.fileType === 8
+    //               ? "我的分享"
+    //               : this.$route.name === "Share"
+    //               ? "全部分享"
+    //               : "",
+    //         });
+    //       }
+    //     }
+    //     return res;
+    //   },
+    //   set() {
+    //     return [];
+    //   },
+    // },
   },
   methods: {
     /**

src/components/common/FileTable.vue

@@ -2,6 +2,7 @@
   <div class="file-table-wrapper">
     <!-- 文件表格 -->
     <el-table
+      v-if="fileList.length > 0"
       class="file-table"
       :class="['file-type-' + fileType, routeName === 'Share' ? 'share' : '']"
       ref="multipleTable"
@@ -237,6 +238,7 @@
         </template>
       </el-table-column>
     </el-table>
+    <el-empty v-else> </el-empty>
   </div>
 </template>
 
@@ -291,21 +293,27 @@ export default {
      */
     filePath() {
       this.clearSelectedTable();
+      this.$nextTick(() => {
         this.$refs.multipleTable.clearSort();
+      });
     },
     /**
      * 文件类型变化时清空表格已选行
      */
     fileType() {
       this.clearSelectedTable();
+      this.$nextTick(() => {
         this.$refs.multipleTable.clearSort();
+      });
     },
     /**
      * 文件列表变化时清空表格已选行
      */
     fileList() {
       this.clearSelectedTable();
+      this.$nextTick(() => {
         this.$refs.multipleTable.clearSort();
+      });
       this.sortedFileList = this.fileList;
     },
   },
@@ -330,14 +338,19 @@ export default {
       // xs 以上的屏幕
       if (this.screenWidth > 768) {
         event.preventDefault();
+        this.$nextTick(() => {
           this.$refs.multipleTable.setCurrentRow(row); //  选中当前行
+        });
+
         this.$openBox
           .contextMenu({
             selectedFile: row,
             domEvent: event,
           })
           .then((res) => {
-            this.$refs.multipleTable.setCurrentRow(); //  取消当前选中行
+            this.$nextTick(() => {
+              this.$refs.multipleTable.setCurrentRow(row); //  选中当前行
+            });
             if (res === "confirm") {
               this.$emit("getTableDataByType"); //  刷新文件列表
               // this.$store.dispatch("showStorage"); //  刷新存储容量
@@ -350,7 +363,10 @@ export default {
      * @description 用于父组件调用 | 本组件调用，请勿删除
      */
     clearSelectedTable() {
+      this.$nextTick(() => {
+        console.log("this.$refs.multipleTable", this.$refs.multipleTable);
         this.$refs.multipleTable.clearSelection();
+      });
     },
     /**
      * 表格选择项发生变化时的回调函数
@@ -374,7 +390,9 @@ export default {
           domEvent: event,
         })
         .then((res) => {
-          this.$refs.multipleTable.setCurrentRow(); //  取消当前选中行
+          this.$nextTick(() => {
+            this.$refs.multipleTable.setCurrentRow(row); //  选中当前行
+          });
           if (res === "confirm") {
             this.$emit("getTableDataByType"); //  刷新文件列表
             // this.$store.dispatch("showStorage"); //  刷新存储容量
@@ -391,7 +409,7 @@ export default {
 
 .file-table-wrapper {
   margin-top: 2px;
-
+  height: calc(100vh - 262px) !important;
   .file-type-0 {
     // height: calc(100vh - 206px) !important;
 

src/components/file/AsideMenu.vue

@@ -323,7 +323,7 @@ export default {
     }
   }
 
-  >>> .el-menu {
+  ::v-deep .el-menu {
     background: transparent;
   }
 
@@ -357,7 +357,7 @@ export default {
   .storage-wrapper.fold {
     padding: 0;
 
-    >>> .el-progress--circle {
+    ::v-deep .el-progress--circle {
       margin: 0 auto;
       width: 32px;
       display: block;
@@ -409,7 +409,7 @@ export default {
 //       box-shadow: 0 4px 12px 0 $BorderExtralight;
 //     }
 //   }
-//   >>> .el-menu {
+//   ::v-deep .el-menu {
 //     background: transparent;
 //   }
 //   // 对展开状态下的菜单设置宽度
@@ -440,7 +440,7 @@ export default {
 //   }
 //   .storage-wrapper.fold {
 //     padding: 0;
-//     >>> .el-progress--circle {
+//     ::v-deep .el-progress--circle {
 //       margin: 0 auto;
 //       width: 32px;
 //       display: block;

src/components/file/FileList.vue

@@ -447,7 +447,7 @@ export default {
 
   .pagination-wrapper {
     position: relative;
-    border-top: 1px solid $BorderBase;
+    // border-top: 1px solid $BorderBase;
     height: 44px;
     line-height: 44px;
     text-align: center;

src/components/file/box/audioPreview/BoxMask.vue

@@ -806,7 +806,7 @@ export default {
         margin-right: 16px;
         flex: 1;
 
-        >>> .el-slider__runway {
+        ::v-deep .el-slider__runway {
           height: 2px;
 
           .el-slider__button-wrapper {
@@ -1072,7 +1072,7 @@ export default {
     //       .progress-bar {
     //         margin-right: 16px;
     //         flex: 1;
-    //         >>> .el-slider__runway {
+    //         ::v-deep .el-slider__runway {
     //           height: 2px;
     //           .el-slider__button-wrapper {
     //             top: -17px;
@@ -1118,7 +1118,7 @@ export default {
     //       }
     //       .volume-bar {
     //         width: 100px;
-    //         >>> .el-slider__runway {
+    //         ::v-deep .el-slider__runway {
     //           height: 2px;
     //           .el-slider__button-wrapper {
     //             top: -19px;

src/components/file/box/codePreview/BoxMask.vue

@@ -403,7 +403,7 @@ export default {
       .editor-set-form {
         flex: 1;
         text-align: right;
-        >>> .el-form-item {
+        ::v-deep .el-form-item {
           margin-bottom: 0;
           &.font-size {
             .el-form-item__content {
@@ -431,7 +431,7 @@ export default {
     }
     .code-editor {
       height: calc(100vh - 129px);
-      >>> .CodeMirror {
+      ::v-deep .CodeMirror {
         border-radius: 0 0 8px 8px;
         height: inherit;
         font-size: inherit;

src/components/file/box/imgPreview/BoxMask.vue

@@ -420,7 +420,7 @@ export default {
       width: 100px;
       display: flex;
 
-      >>> .el-input-number {
+      ::v-deep .el-input-number {
         width: 40px;
 
         .el-input-number__decrease,
@@ -569,7 +569,7 @@ export default {
       width: 600px;
       display: flex;
 
-      >>> .el-slider {
+      ::v-deep .el-slider {
         flex: 1;
 
         .el-slider__bar {

src/components/file/box/markdownPreview/BoxMask.vue

@@ -330,7 +330,7 @@ export default {
     }
   }
 
-  >>> .v-note-wrapper {
+  ::v-deep .v-note-wrapper {
     box-shadow: none !important;
     border: 1px solid $BorderBase;
     .v-note-op {
@@ -357,7 +357,7 @@ export default {
       }
     }
   }
-  >>> .v-note-wrapper:not(.fullscreen) {
+  ::v-deep .v-note-wrapper:not(.fullscreen) {
     margin: 56px auto 0 auto;
     width: 90vw;
     height: calc(100vh - 80px);

src/components/file/box/uploadFile/Box.vue

@@ -531,7 +531,7 @@ export default {
         flex: 1;
         text-align: right;
 
-        >>> .el-button--text {
+        ::v-deep .el-button--text {
           color: $PrimaryText;
 
           i[class^="el-icon-"] {
@@ -566,7 +566,7 @@ export default {
         position: relative;
         background-color: #fff;
 
-        >>> .uploader-file {
+        ::v-deep .uploader-file {
           height: 40px;
           line-height: 40px;
 
@@ -599,7 +599,7 @@ export default {
           }
         }
 
-        >>> .uploader-file[status="success"] {
+        ::v-deep .uploader-file[status="success"] {
           .uploader-file-progress {
             border: none;
           }
@@ -607,7 +607,7 @@ export default {
       }
 
       .file-item.custom-status-item {
-        >>> .uploader-file-status {
+        ::v-deep .uploader-file-status {
           visibility: hidden;
         }
 

src/components/file/box/videoPreview/VideoPlayer.vue

@@ -76,7 +76,7 @@ export default {
   color: $Primary;
 
   // 播放按钮
-  >>> .vjs-big-play-button {
+  ::v-deep .vjs-big-play-button {
     border-radius: 50%;
     border: 6px solid $Primary;
     left: calc(50% - 1em);
@@ -94,14 +94,14 @@ export default {
     }
   }
   // 改变各种“条”的颜色
-  >>> .vjs-volume-level,
-  >>> .vjs-play-progress,
-  >>> .vjs-slider-bar {
+  ::v-deep .vjs-volume-level,
+  ::v-deep .vjs-play-progress,
+  ::v-deep .vjs-slider-bar {
     background: $Primary;
   }
 
   // 控制条按钮的大小
-  >>> .vjs-control-bar {
+  ::v-deep .vjs-control-bar {
     font-size: 14px;
   }
 }

src/components/file/components/FileGrid.vue

@@ -184,6 +184,137 @@ export default {
 
 @import "@/assets/styles/varibles.scss";
 
+// .file-grid-wrapper {
+//   border-top: 1px solid $BorderBase;
+
+//   .file-list {
+//     height: calc(100vh - 206px);
+//     overflow-y: auto;
+//     display: flex;
+//     flex-wrap: wrap;
+//     align-items: flex-start;
+//     align-content: flex-start;
+//     list-style: none;
+//     @include setScrollbar(6px, transparent, #c0c4cc);
+
+//     .file-item {
+//       margin: 0 16px 16px 0;
+//       position: relative;
+//       padding: 8px;
+//       text-align: center;
+//       cursor: pointer;
+//       z-index: 1;
+
+//       &:hover {
+//         background: $tabBackColor;
+
+//         .file-name {
+//           font-weight: 550;
+//         }
+//       }
+
+//       .file-name {
+//         margin-top: 8px;
+//         height: 44px;
+//         line-height: 22px;
+//         font-size: 12px;
+//         word-break: break-all;
+//         @include setEllipsis(2);
+//         ::v-deep .keyword {
+//           color: $Danger;
+//         }
+//       }
+
+//       .file-checked-wrapper {
+//         position: absolute;
+//         top: 0;
+//         left: 0;
+//         z-index: 2;
+//         background: rgba(245, 247, 250, 0.5);
+//         width: 100%;
+//         height: 100%;
+
+//         .file-checked {
+//           position: absolute;
+//           top: 16px;
+//           left: 24px;
+//         }
+//       }
+
+//       &.checked {
+//         .file-checked-wrapper {
+//           background: rgba(245, 247, 250, 0);
+//         }
+//       }
+
+//       &.active {
+//         background: $tabBackColor;
+//       }
+//     }
+//   }
+
+//   .right-menu-list {
+//     position: fixed;
+//     display: flex;
+//     flex-direction: column;
+//     background: #fff;
+//     border: 1px solid $BorderLighter;
+//     border-radius: 4px;
+//     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+//     z-index: 2;
+//     padding: 4px 0;
+//     color: $RegularText;
+
+//     .right-menu-item,
+//     .unzip-item {
+//       padding: 0 16px;
+//       height: 36px;
+//       line-height: 36px;
+//       cursor: pointer;
+
+//       &:hover {
+//         background: $PrimaryHover;
+//         color: $Primary;
+//       }
+
+//       i {
+//         margin-right: 8px;
+//       }
+//     }
+
+//     .unzip-menu-item {
+//       position: relative;
+
+//       &:hover {
+//         .unzip-list {
+//           display: block;
+//         }
+//       }
+
+//       .unzip-list {
+//         position: absolute;
+//         display: none;
+
+//         .unzip-item {
+//           width: 200px;
+//           @include setEllipsis(1);
+//         }
+//       }
+//     }
+//   }
+
+//   .right-menu-list,
+//   .unzip-list {
+//     background: #fff;
+//     border: 1px solid $BorderLighter;
+//     border-radius: 4px;
+//     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+//     z-index: 2;
+//     padding: 4px 0;
+//     color: $RegularText;
+//   }
+// }
+
 .file-grid-wrapper {
   border-top: 1px solid $BorderBase;
 
@@ -220,7 +351,7 @@ export default {
         font-size: 12px;
         word-break: break-all;
         @include setEllipsis(2);
-        >>> .keyword {
+        ::v-deep .keyword {
           color: $Danger;
         }
       }
@@ -241,17 +372,14 @@ export default {
         }
       }
 
-      &.checked {
-        .file-checked-wrapper {
+      .file-checked-wrapper.checked {
         background: rgba(245, 247, 250, 0);
       }
     }
-
-      &.active {
+    .file-item.active {
       background: $tabBackColor;
     }
   }
-  }
 
   .right-menu-list {
     position: fixed;
@@ -271,12 +399,10 @@ export default {
       height: 36px;
       line-height: 36px;
       cursor: pointer;
-
       &:hover {
         background: $PrimaryHover;
         color: $Primary;
       }
-
       i {
         margin-right: 8px;
       }
@@ -284,17 +410,14 @@ export default {
 
     .unzip-menu-item {
       position: relative;
-
       &:hover {
         .unzip-list {
           display: block;
         }
       }
-
       .unzip-list {
         position: absolute;
         display: none;
-
         .unzip-item {
           width: 200px;
           @include setEllipsis(1);
@@ -302,7 +425,6 @@ export default {
       }
     }
   }
-
   .right-menu-list,
   .unzip-list {
     background: #fff;
@@ -314,126 +436,4 @@ export default {
     color: $RegularText;
   }
 }
-
-// .file-grid-wrapper {
-//   border-top: 1px solid $BorderBase;
-
-//   .file-list {
-//     height: calc(100vh - 206px);
-//     overflow-y: auto;
-//     display: flex;
-//     flex-wrap: wrap;
-//     align-items: flex-start;
-//     align-content: flex-start;
-//     list-style: none;
-//     setScrollbar(6px, transparent, #C0C4CC);
-
-//     .file-item {
-//       margin: 0 16px 16px 0;
-//       position: relative;
-//       padding: 8px;
-//       text-align: center;
-//       cursor: pointer;
-//       z-index: 1;
-
-//       &:hover {
-//         background: $tabBackColor;
-
-//         .file-name {
-//           font-weight: 550;
-//         }
-//       }
-
-//       .file-name {
-//         margin-top: 8px;
-//         height: 44px;
-//         line-height: 22px;
-//         font-size: 12px;
-//         word-break: break-all;
-//         setEllipsis(2);
-//         >>> .keyword {
-//           color: $Danger;
-//         }
-//       }
-
-//       .file-checked-wrapper {
-//         position: absolute;
-//         top: 0;
-//         left: 0;
-//         z-index: 2;
-//         background: rgba(245, 247, 250, 0.5);
-//         width: 100%;
-//         height: 100%;
-
-//         .file-checked {
-//           position: absolute;
-//           top: 16px;
-//           left: 24px;
-//         }
-//       }
-
-//       .file-checked-wrapper.checked {
-//         background: rgba(245, 247, 250, 0);
-//       }
-//     }
-//     .file-item.active {
-//       background: $tabBackColor;
-//     }
-//   }
-
-//   .right-menu-list {
-//     position: fixed;
-//     display: flex;
-//     flex-direction: column;
-//     background: #fff;
-//     border: 1px solid $BorderLighter;
-//     border-radius: 4px;
-//     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-//     z-index: 2;
-//     padding: 4px 0;
-//     color: $RegularText;
-
-//     .right-menu-item,
-//     .unzip-item {
-//       padding: 0 16px;
-//       height: 36px;
-//       line-height: 36px;
-//       cursor: pointer;
-//       &:hover {
-//         background: $PrimaryHover;
-//         color: $Primary;
-//       }
-//       i {
-//         margin-right: 8px;
-//       }
-//     }
-
-//     .unzip-menu-item {
-//       position: relative;
-//       &:hover {
-//         .unzip-list {
-//           display: block;
-//         }
-//       }
-//       .unzip-list {
-//         position: absolute;
-//         display: none;
-//         .unzip-item {
-//           width: 200px;
-//           setEllipsis(1)
-//         }
-//       }
-//     }
-//   }
-//   .right-menu-list,
-//   .unzip-list {
-//     background: #fff;
-//     border: 1px solid $BorderLighter;
-//     border-radius: 4px;
-//     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-//     z-index: 2;
-//     padding: 4px 0;
-//     color: $RegularText;
-//   }
-// }
 </style>

src/components/file/components/FileTimeLine.vue

@@ -165,7 +165,7 @@ export default {
             font-size: 12px;
             word-break: break-all;
             @include setEllipsis(2);
-            >>> .keyword {
+            ::v-deep .keyword {
               color: $Danger;
             }
           }
@@ -211,7 +211,7 @@ export default {
 //             font-size: 12px;
 //             word-break: break-all;
 //             setEllipsis(2);
-//             >>> .keyword {
+//             ::v-deep .keyword {
 //               color: $Danger;
 //             }
 //           }

src/components/file/dialog/copyFile/Dialog.vue

@@ -155,7 +155,7 @@ export default {
 @import "@/assets/styles/varibles.scss";
 @import "@/assets/styles/qw-mixins.scss";
 
->>> .el-dialog {
+::v-deep .el-dialog {
   .el-dialog__header {
     display: flex;
   }

src/components/file/dialog/moveFile/Dialog.vue

@@ -183,7 +183,7 @@ export default {
 @import "@/assets/styles/varibles.scss";
 @import "@/assets/styles/qw-mixins.scss";
 
->>> .el-dialog {
+::v-deep .el-dialog {
   .el-dialog__header {
     display: flex;
   }

src/components/file/dialog/saveShareFile/Dialog.vue

@@ -154,7 +154,7 @@ export default {
 @import "@/assets/styles/varibles.scss";
 @import "@/assets/styles/qw-mixins.scss";
 
->>> .el-dialog {
+::v-deep .el-dialog {
   .el-dialog__header {
     display: flex;
   }

src/components/file/dialog/shareFile/Dialog.vue

@@ -4,7 +4,7 @@
     title="分享文件"
     :visible.sync="visible"
     :close-on-click-modal="false"
-    width="550px"
+    width="680px"
     @close="handleDialogCancel"
   >
     <el-form
@@ -13,10 +13,45 @@
       :model="form"
       ref="shareFileForm"
       label-suffix="："
-      label-width="130px"
+      label-width="180px"
       :label-position="screenWidth <= 520 ? 'top' : 'right'"
       :rules="rules"
     >
+      <el-form-item label="分享给部门或个人" prop="shareType">
+        <el-radio-group v-model="form.shareType">
+          <el-radio :label="0">分享到公共社区</el-radio>
+          <el-radio :label="1">分享到部门</el-radio>
+          <el-radio :label="2">分享到个人</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        :label="getChooseDataLabel"
+        v-if="form.shareType == 1 || form.shareType == 2"
+      >
+        <el-tree
+          v-if="form.shareType == 1"
+          class="tree-border"
+          :data="deptOptions"
+          show-checkbox
+          default-expand-all
+          ref="dept"
+          node-key="id"
+          empty-text="加载中，请稍候"
+          :props="defaultProps"
+        ></el-tree>
+        <PaginationSelector
+          v-if="form.shareType == 2"
+          @pageNationChange="pageNationChange"
+          @change="handleChangUserName"
+          :optionSource="userListAllByLocal"
+          v-model="userIds"
+          labelKey="userName"
+          valueKey="userId"
+          :paginationOption="setSelectPage"
+        />
+        <!-- {{ userListAllByLocal }} -->
+        <!-- <div v-if="form.shareType == 2">人员列表</div> -->
+      </el-form-item>
       <el-form-item label="链接有效期至" prop="endTime">
         <el-date-picker
           v-model="form.endTime"
@@ -31,7 +66,7 @@
         </el-date-picker>
       </el-form-item>
       <el-form-item label="是否需要提取码" prop="shareType">
-        <el-radio-group v-model="form.shareType">
+        <el-radio-group v-model="form.isNeedCode">
           <el-radio :label="1">是</el-radio>
           <el-radio :label="0">否</el-radio>
         </el-radio-group>
@@ -89,19 +124,27 @@
 
 <script>
 import store from "@/store/index.js";
-import { shareFile } from "@/api/qwFile.js";
-
+import { shareFile } from "@/api/qwFile";
+import { deptTreeSelect, listUser } from "@/api/system/user";
+import PaginationSelector from "@/components/PaginationSelector";
 export default {
   name: "ShareFileDialog",
+  components: {
+    PaginationSelector,
+  },
   data() {
     return {
       visible: false, //  对话框是否可见
       // 分享文件对话框数据
       form: {
+        isNeedCode: 0, //是否需要提取码，0-是 1-否
         endTime: "",
-        shareType: 0,
+        shareType: 0, //分享类型 0公共分享，1部门分享，2个人分享
       },
       rules: {
+        shareType: [
+          { required: true, message: "请选择分享类别", trigger: "blur" },
+        ],
         endTime: [
           { required: true, message: "请选择链接有效期", trigger: "blur" },
         ],
@@ -158,6 +201,23 @@ export default {
         shareBatchNum: "",
         extractionCode: "",
       },
+      // 部门列表
+      deptOptions: [],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      //分页信息
+      setSelectPage: {
+        pageSize: 5, //每页显示条数  3条刚好
+        pageNum: 1, //当前页
+        pagerCount: 5, //按钮数，超过时会折叠
+        total: 0, //总条数
+      },
+      userIds: "", //用户id集合,用于绑定数据
+      userIdsParams: "", //用户id集合，用于提交给后台
+      userListAllByLocal: [],
+      userListAllPaged: [],
     };
   },
   computed: {
@@ -165,6 +225,30 @@ export default {
     screenWidth() {
       return store.state.common.screenWidth;
     },
+    getChooseDataLabel() {
+      if (this.form.shareType == 1) {
+        return "选择部门";
+      } else if (this.form.shareType == 2) {
+        return "选择个人";
+      }
+    },
+  },
+  watch: {
+    "form.shareType"(value) {
+      if (value == 1) {
+        this.getDeptTree();
+        // 清空人员的选择
+        this.clearCheckedUser();
+      } else if (value == 2) {
+        this.getUserList();
+        // 清空部门的选择
+        this.clearCheckedDept();
+      } else {
+        // 选择分享给全部时，要清空部门和人员的所有选择
+        this.clearCheckedUser();
+        this.clearCheckedDept();
+      }
+    },
   },
   methods: {
     /**
@@ -175,6 +259,9 @@ export default {
       this.$refs["shareFileForm"].resetFields();
       this.visible = false;
       this.callback("cancel");
+      // 清空部门和人员的所有选择
+      this.clearCheckedUser();
+      this.clearCheckedDept();
     },
     /**
      * 分享文件对话框 | 确定按钮点击事件
@@ -182,6 +269,14 @@ export default {
      * @param {string} formName 表单ref值
      */
     handleDialogSure(formName) {
+      if (this.form.shareType == 1) {
+        this.form.shareTo = this.getDeptAllCheckedKeys();
+      } else if (this.form.shareType == 2) {
+        this.form.shareTo = this.userIdsParams;
+      }
+
+      // console.log("this.form.shareTo", this.form.shareTo);
+      // return;
       this.sureBtnLoading = true;
       this.$refs[formName].validate((valid) => {
         if (valid) {
@@ -192,7 +287,7 @@ export default {
           })
             .then((res) => {
               this.sureBtnLoading = false;
-              if (res.success) {
+              if (res.code == 200) {
                 this.shareData = res.data;
                 this.shareIsSuccess = true;
                 this.callback("confirm");
@@ -209,6 +304,77 @@ export default {
         }
       });
     },
+    /**
+     * 根据角色ID查询部门树结构
+     * @param {string} roleId 当前用户角色id
+     */
+    getDeptTree() {
+      // 若已经加载过不再重复调取接口
+      if (this.deptOptions.length > 0) {
+        return;
+      }
+      deptTreeSelect().then((response) => {
+        this.deptOptions = response.data;
+      });
+    },
+
+    /**
+     * 获取被选择的组织id
+     * @returns {string} 组织Id以逗号隔开的字符串
+     */
+    getDeptAllCheckedKeys() {
+      // 目前被选中的部门节点
+      let checkedKeys = this.$refs.dept.getCheckedKeys();
+      // 半选中的部门节点
+      // let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
+      // checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+      return checkedKeys.join(",");
+    },
+
+    //下拉列表分页的点击的事件
+    pageNationChange(val) {
+      //设置当前页为点击的页
+      this.setSelectPage.pageNum = val;
+      //重新调用分页查询的方法
+      this.getUserList(this.setSelectPage);
+    },
+
+    //获取下拉框中的运动员编号--保存方案
+    handleChangUserName(val) {
+      this.userIdsParams = val.join(",");
+    },
+
+    // 清空选中的人员
+    clearCheckedUser() {
+      this.userIds = "";
+      this.userIdsParams = "";
+    },
+    // 清空组织的选择
+    clearCheckedDept() {
+      if (this.$refs.dept) {
+        this.$refs.dept.setCheckedKeys([]);
+      }
+    },
+    //查询所有用户列表
+    getUserList(setSelectPage) {
+      const { pageNum, pageSize } = this.setSelectPage;
+      const params = { pageNum, pageSize };
+      listUser(params).then((res) => {
+        //下拉列表数据源绑定
+        this.userListAllByLocal = res.rows;
+        //绑定总记录数
+        this.setSelectPage.total = res.total;
+        //
+        if (this.userListAllPaged.length === 0) {
+          this.userListAllPaged = res.rows;
+        } else {
+          //追加数据
+          for (let i = 0; i < res.rows.length; i++) {
+            this.userListAllPaged.push(res.rows[i]);
+          }
+        }
+      });
+    },
   },
 };
 </script>

src/components/file/dialog/showFileDetail/Dialog.vue

@@ -147,7 +147,7 @@ export default {
   width: 40%;
   height: auto;
 }
->>> .el-form.file-info-form {
+::v-deep .el-form.file-info-form {
   .el-form-item {
     margin-bottom: 16px;
     .el-input__inner {

src/components/file/dialog/unzipFile/Dialog.vue

@@ -172,7 +172,7 @@ export default {
 @import "@/assets/styles/varibles.scss";
 @import "@/assets/styles/qw-mixins.scss";
 
->>> .el-dialog {
+::v-deep .el-dialog {
   .el-dialog__header {
     display: flex;
   }

src/store/getters.js

@@ -18,8 +18,6 @@ const getters = {
   defaultRoutes: state => state.permission.defaultRoutes,
   sidebarRouters: state => state.permission.sidebarRouters,
   //奇文
-  // fileModel: state => state.fileList.fileModel,
-  // selectedColumnList: state => state.fileList.selectedColumnList,
   // 文件查看模式
   fileModel: (state) =>
     state.fileList.fileModel === null ? 0 : Number(state.fileList.fileModel),
@@ -28,5 +26,7 @@ const getters = {
     state.fileList.selectedColumnList === null
       ? allColumnList
       : state.fileList.selectedColumnList.split(','),
+  // 网格模式 & 时间线模式下 文件图标大小
+  gridSize: (state) => state.fileList.gridSize,
 }
 export default getters