From 77ad146e246aa7427114f7e314d029df8e5b3718 Mon Sep 17 00:00:00 2001
From: 15386982806 <jia15386982806>
Date: Fri, 2 Feb 2024 18:09:29 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=AE=B6=E7=AB=AF=E4=BC=98=E5=8C=96OS?=
 =?UTF-8?q?S=E8=B5=84=E6=BA=90=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../goods/goods-seller/goodsOperationSec.vue  |   41 +-
 .../lili-components/editor/upload-image.vue   |    2 +-
 .../my-components/lili/upload-pic-thumb.vue   |    4 +-
 .../views/shop/hotzone/components/Zone.vue    |    2 +-
 seller/src/views/shop/modelFormItem.vue       |    2 +-
 seller/src/views/shop/modelList/carousel.vue  |    2 +-
 seller/src/views/shop/modelList/carousel1.vue |    4 +-
 seller/src/views/shop/modelList/carousel2.vue |    2 +-
 .../src/views/shop/modelList/newGoodsSort.vue |    2 +-
 seller/src/views/shop/modelList/recommend.vue |    2 +-
 seller/src/views/shop/ossManage.scss          |  263 ++++
 seller/src/views/shop/ossManages.vue          | 1126 +++++++++++++++++
 seller/src/views/shop/wap/decorate.vue        |    4 +-
 13 files changed, 1424 insertions(+), 32 deletions(-)
 create mode 100644 seller/src/views/shop/ossManage.scss
 create mode 100644 seller/src/views/shop/ossManages.vue

diff --git a/seller/src/views/goods/goods-seller/goodsOperationSec.vue b/seller/src/views/goods/goods-seller/goodsOperationSec.vue
index dcdf3ce5..65f1afa3 100644
--- a/seller/src/views/goods/goods-seller/goodsOperationSec.vue
+++ b/seller/src/views/goods/goods-seller/goodsOperationSec.vue
@@ -102,7 +102,7 @@
           <h4>商品规格及图片</h4>
           <div class="form-item-view">
             <FormItem class="form-item-view-el required" label="主图" prop="goodsGalleryFiles">
-              <div style="display: flex; flex-wrap: flex-start">
+              <div style="display: flex; flex-wrap: wrap;">
                 <vuedraggable :animation="200" :list="baseInfoForm.goodsGalleryFiles">
                   <div v-for="(item, __index) in baseInfoForm.goodsGalleryFiles" :key="__index"
                        class="demo-upload-list">
@@ -110,27 +110,29 @@
                       <img :src="item"/>
                       <div class="demo-upload-list-cover">
                         <div>
-                          <Icon size="30" type="md-search" @click.native="handleViewGoodsPicture(item.url)"></Icon>
+                          <Icon size="30" type="md-search" @click.native="handleViewGoodsPicture(item)"></Icon>
                           <Icon size="30" type="md-trash" @click.native="handleRemoveGoodsPicture(item)"></Icon>
                         </div>
                       </div>
                     </template>
                   </div>
                 </vuedraggable>
-
-                <Upload ref="upload"
-                        :action="uploadFileUrl" :before-upload="handleBeforeUploadGoodsPicture"
-                        :format="['jpg', 'jpeg', 'png', 'webp']"
-                        :headers="{ ...accessToken }"
-                        :max-size="2048" :on-error="() => { $Spin.hide(); }" :on-exceeded-size="handleMaxSize"
-                        :on-format-error="handleFormatError" :on-progress="() => { $Spin.show(); }"
-                        :on-success="handleSuccessGoodsPicture" :show-upload-list="false" multiple
-                        style="margin-left: 10px"
-                        type="drag">
-                  <div style="width: 148px; height: 148px; line-height: 148px">
-                    <Icon size="20" type="md-add"></Icon>
-                  </div>
-                </Upload>
+                <!--<Upload ref="upload"-->
+                        <!--:action="uploadFileUrl" :before-upload="handleBeforeUploadGoodsPicture"-->
+                        <!--:format="['jpg', 'jpeg', 'png', 'webp']"-->
+                        <!--:headers="{ ...accessToken }"-->
+                        <!--:max-size="2048" :on-error="() => { $Spin.hide(); }" :on-exceeded-size="handleMaxSize"-->
+                        <!--:on-format-error="handleFormatError" :on-progress="() => { $Spin.show(); }"-->
+                        <!--:on-success="handleSuccessGoodsPicture" :show-upload-list="false" multiple-->
+                        <!--style="margin-left: 10px"-->
+                        <!--type="drag">-->
+                  <!--<div style="width: 148px; height: 148px; line-height: 148px">-->
+                    <!--<Icon size="20" type="md-add"></Icon>-->
+                  <!--</div>-->
+                <!--</Upload>-->
+              </div>
+              <div style="width: 100%;display: flex;justify-content: start;margin-top: 10px;">
+                <Button @click="handleCLickImg('goodsGalleryFiles')" type="primary">上传图片</Button>
               </div>
               <Modal v-model="goodsPictureVisible" title="View Image">
                 <img v-if="goodsPictureVisible" :src="previewGoodsPicture" style="width: 100%"/>
@@ -474,7 +476,7 @@
     <!--<ossManage @callback="callbackSelected" ref="ossManage" />-->
     <!--</Modal>-->
     <Modal v-model="picModalFlag" width="1200px" @on-ok="confirmUrls">
-      <ossManage ref="ossManage" @callback="callbackSelected" @selected="(list)=>{ selectedImage = list}"/>
+      <ossManage ref="ossManage" :isComponent="true" @callback="callbackSelected" @selected="(list)=>{ selectedImage = list}"/>
     </Modal>
 
   </div>
@@ -490,7 +492,7 @@ import {uploadFile} from "@/libs/axios";
 import {regular} from "@/utils";
 import DPlayer from 'dplayer';
 // import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManage";
+import ossManage from "@/views/shop/ossManages";
 
 
 export default {
@@ -745,8 +747,9 @@ export default {
       if (val && this.selectedFormBtnName == 'selectedSkuImages') {
         this.selectedSku.images.push(val);
       } else {
-        this.baseInfoForm[this.selectedFormBtnName].push(val);
+        this.baseInfoForm[this.selectedFormBtnName].push(val.url);
       }
+
     },
     confirmUrls() {
       if (this.selectedImage && this.selectedFormBtnName == 'selectedSkuImages') {
diff --git a/seller/src/views/lili-components/editor/upload-image.vue b/seller/src/views/lili-components/editor/upload-image.vue
index b1e3c553..6373db62 100644
--- a/seller/src/views/lili-components/editor/upload-image.vue
+++ b/seller/src/views/lili-components/editor/upload-image.vue
@@ -57,7 +57,7 @@
     </Modal>
 
     <Modal width="1000" v-model="showOssManager" @on-ok="confirmUrls">
-    <OssManage ref="ossManage" @selected="(list)=>{ selectedImage = list}" @callback="handleCallback" />
+    <OssManage ref="ossManage" :isComponent="true" @selected="(list)=>{ selectedImage = list}" @callback="handleCallback" />
     </Modal>
   </div>
 </template>
diff --git a/seller/src/views/my-components/lili/upload-pic-thumb.vue b/seller/src/views/my-components/lili/upload-pic-thumb.vue
index 96d6c991..630bb1e8 100644
--- a/seller/src/views/my-components/lili/upload-pic-thumb.vue
+++ b/seller/src/views/my-components/lili/upload-pic-thumb.vue
@@ -57,7 +57,7 @@
     </Modal>
 
     <Modal width="1200px" v-model="picModalFlag" @on-ok="confirmUrls">
-      <ossManage @callback="callbackSelected" @selected="(list)=>{ selectedImage = list}" ref="ossManage" />
+      <ossManage @callback="callbackSelected"  :isComponent="true" @selected="(list)=>{ selectedImage = list}" ref="ossManage" />
     </Modal>
   </div>
 </template>
@@ -65,7 +65,7 @@
 <script>
 import { uploadFile } from "@/libs/axios";
 import vuedraggable from "vuedraggable";
-import ossManage from "@/views/shop/ossManage";
+import ossManage from "@/views/shop/ossManages";
 export default {
   name: "uploadPicThumb",
   components: {
diff --git a/seller/src/views/shop/hotzone/components/Zone.vue b/seller/src/views/shop/hotzone/components/Zone.vue
index 41275928..9ab67499 100644
--- a/seller/src/views/shop/hotzone/components/Zone.vue
+++ b/seller/src/views/shop/hotzone/components/Zone.vue
@@ -100,7 +100,7 @@
 import changeSize from "../directives/changeSize";
 import dragItem from "../directives/dragItem";
 // import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManage";
+import ossManage from "@/views/shop/ossManages";
 
 export default {
   name: "Zone",
diff --git a/seller/src/views/shop/modelFormItem.vue b/seller/src/views/shop/modelFormItem.vue
index d12f7b0d..8c0af939 100644
--- a/seller/src/views/shop/modelFormItem.vue
+++ b/seller/src/views/shop/modelFormItem.vue
@@ -231,7 +231,7 @@ import Recommend from "./modelList/recommend.vue";
 import NotEnough from "./modelList/notEnough.vue";
 import Seckill from "./modelList/seckill.vue";
 // import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManage";
+import ossManage from "@/views/shop/ossManages";
 
 export default {
   name: "modelFormItem",
diff --git a/seller/src/views/shop/modelList/carousel.vue b/seller/src/views/shop/modelList/carousel.vue
index 59267e22..4f54f448 100644
--- a/seller/src/views/shop/modelList/carousel.vue
+++ b/seller/src/views/shop/modelList/carousel.vue
@@ -121,7 +121,7 @@
 
 <script>
 // import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManage";
+import ossManage from "@/views/shop/ossManages";
 export default {
   name: "modelCarousel",
   props: ["data"],
diff --git a/seller/src/views/shop/modelList/carousel1.vue b/seller/src/views/shop/modelList/carousel1.vue
index 7e4d2161..f3421b6a 100644
--- a/seller/src/views/shop/modelList/carousel1.vue
+++ b/seller/src/views/shop/modelList/carousel1.vue
@@ -85,14 +85,14 @@
     ></liliDialog>
     <!-- 选择图片 -->
     <Modal width="1200px" v-model="picModelFlag" footer-hide>
-      <ossManage @callback="callbackSelected" ref="ossManage" />
+      <ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
     </Modal>
   </div>
 </template>
 
 <script>
 // import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManage";
+import ossManage from "@/views/shop/ossManages";
 export default {
   name: "modelCarousel",
   props: ["data"],
diff --git a/seller/src/views/shop/modelList/carousel2.vue b/seller/src/views/shop/modelList/carousel2.vue
index 5d2de14e..99e52a87 100644
--- a/seller/src/views/shop/modelList/carousel2.vue
+++ b/seller/src/views/shop/modelList/carousel2.vue
@@ -175,7 +175,7 @@
     ></liliDialog>
     <!-- 选择图片 -->
     <Modal width="1200px" v-model="picModelFlag" footer-hide>
-      <ossManage @callback="callbackSelected" ref="ossManage" />
+      <ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
     </Modal>
   </div>
 </template>
diff --git a/seller/src/views/shop/modelList/newGoodsSort.vue b/seller/src/views/shop/modelList/newGoodsSort.vue
index f5cf534e..b473e396 100644
--- a/seller/src/views/shop/modelList/newGoodsSort.vue
+++ b/seller/src/views/shop/modelList/newGoodsSort.vue
@@ -140,7 +140,7 @@
 </template>
 <script>
 // import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManage";
+import ossManage from "@/views/shop/ossManages";
 export default {
     props:{
         data:{
diff --git a/seller/src/views/shop/modelList/recommend.vue b/seller/src/views/shop/modelList/recommend.vue
index 7507e1bc..989823e3 100644
--- a/seller/src/views/shop/modelList/recommend.vue
+++ b/seller/src/views/shop/modelList/recommend.vue
@@ -206,7 +206,7 @@
 </template>
 <script>
 // import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManage";
+import ossManage from "@/views/shop/ossManages";
 export default {
   props: {
     data: {
diff --git a/seller/src/views/shop/ossManage.scss b/seller/src/views/shop/ossManage.scss
new file mode 100644
index 00000000..dfd1ebdd
--- /dev/null
+++ b/seller/src/views/shop/ossManage.scss
@@ -0,0 +1,263 @@
+.search {
+  .oss-operation {
+    margin-bottom: 2vh;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+
+    button {
+      margin-right: 5px;
+    }
+  }
+}
+
+.none {
+  display: none;
+}
+
+.oss-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+}
+
+.oss-card {
+  margin: 10px 20px 10px 0;
+  width: 290px;
+
+  :hover {
+    .content .other .name {
+      color: #1890ff;
+      transition: color .3s;
+    }
+  }
+
+  cursor: pointer;
+
+  .ivu-card-body {
+    padding: 0;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+
+    :hover {
+      .play {
+        transition: opacity .3s;
+        opacity: 1 !important;
+      }
+    }
+
+    .img {
+      height: 135px;
+      object-fit: cover;
+    }
+
+    .video {
+      height: 135px;
+      position: relative;
+
+      .cover {
+        height: 100%;
+        width: 100%;
+        object-fit: fill;
+      }
+
+      .play {
+        position: absolute;
+        top: 43px;
+        left: 117px;
+        height: 50px;
+        width: 50px;
+        opacity: 0.8;
+      }
+    }
+
+    .other {
+      padding: 16px;
+      height: 135px;
+
+      .name {
+        font-size: 16px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        color: rgba(0, 0, 0, .85);
+        font-weight: 500;
+        margin-bottom: 4px;
+      }
+
+      .key {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        height: 45px;
+        word-break: break-all;
+        color: rgba(0, 0, 0, .45);
+      }
+
+      .info {
+        font-size: 12px;
+        color: rgba(0, 0, 0, .45);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        height: 36px;
+        word-break: break-all;
+      }
+    }
+
+    .actions {
+      display: flex;
+      align-items: center;
+      height: 50px;
+      background: #f7f9fa;
+      border-top: 1px solid #e8e8e8;
+
+      i:hover {
+        color: #1890ff;
+      }
+
+      .btn {
+        display: flex;
+        justify-content: center;
+        width: 33.33%;
+        border-right: 1px solid #e8e8e8;
+      }
+
+      .btn-no {
+        display: flex;
+        justify-content: center;
+        width: 33.33%;
+      }
+    }
+  }
+}
+
+
+.oss-manage-box {
+  .file-list {
+    height: 100%;
+    box-sizing: border-box;
+    border-right: 1px solid #e5e6eb;
+    padding: 16px 0 24px;
+  }
+  .pic-list {
+    height: 100%;
+    box-sizing: border-box;
+    padding: 0 0 24px 0;
+  }
+  .img-box {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: flex-start;
+    align-content: flex-start;
+    margin-top: 20px;
+    .img-item {
+      width: 120px;
+      height: 158px;
+      box-sizing: border-box;
+      margin: 0 13px 8px;
+      position: relative;
+      .card {
+        width: 120px;
+        height: 120px;
+        border-radius: 8px;
+        border: 2px solid transparent;
+        overflow: hidden;
+        box-sizing: border-box;
+        position: relative;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+        .checkbox {
+          position: absolute;
+          top: 10px;
+          right: 10px;
+          z-index: 1000;
+        }
+        .preview {
+          width: 100%;
+          height: 26px;
+          background-color: #ffffff;
+          text-align: center;
+          line-height: 30px;
+          color: #666666;
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          display: flex;
+          flex-wrap: nowrap;
+          > div {
+            width: 100%;
+            flex: 1;
+          }
+        }
+      }
+      .card:hover,
+      .custom-checkbox-card-checked {
+        border: 2px solid #ff5c58;
+      }
+      .text {
+        width: 120px;
+        height: 36px;
+        cursor: pointer;
+        color: #252931;
+        font-size: 14px;
+        line-height: 36px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-align: center;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+  .page-box {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+  }
+  .pagination-box {
+    display: flex;
+    flex-direction: row-reverse;
+  }
+  /* Checkbox默认的样式 */
+  .check-box {
+    .ivu-checkbox {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+      z-index: 100;
+    }
+  }
+  /* 覆盖iView默认的Checkbox样式 */
+  .ivu-checkbox-wrapper {
+    /*font-size: 16px; !* 修改字体大小 *!*/
+    /*color: #495060; !* 修改文本颜色 *!*/
+    /* 添加其他需要的样式 */
+  }
+  .ivu-checkbox-inner {
+    /*width: 20px; !* 修改选框大小 *!*/
+    /*height: 20px;*/
+    /*border-color: #dcdee2; !* 修改边框颜色 *!*/
+    /* 添加其他需要的样式 */
+  }
+  /* 当Checkbox被选中时的样式 */
+  .ivu-checkbox-checked .ivu-checkbox-inner {
+    /*background-color: #2db7f5; !* 修改选中时的背景颜色 *!*/
+  }
+  /* 当Checkbox不可用时的样式 */
+  .ivu-checkbox-disabled .ivu-checkbox-inner {
+    /*background-color: #e9e9e9; !* 修改禁用状态下的背景颜色 *!*/
+  }
+
+  .demo-tree-render .ivu-tree-title{
+    width: 94%;
+  }
+}
+
diff --git a/seller/src/views/shop/ossManages.vue b/seller/src/views/shop/ossManages.vue
new file mode 100644
index 00000000..6182e3d4
--- /dev/null
+++ b/seller/src/views/shop/ossManages.vue
@@ -0,0 +1,1126 @@
+<style lang="scss">
+  // 建议引入通用样式 可删除下面样式代码
+  @import "@/styles/table-common.scss";
+  @import "./ossManage.scss";
+</style>
+<template>
+  <div class="search">
+    <Row>
+      <Card>
+        <div class="operation">
+          <Row @keydown.enter.native="handleSearch">
+            <Form ref="searchForm" :label-width="85" :model="searchForm" class="search-form" inline>
+              <Form-item label="上传时间">
+                <DatePicker v-model="selectDate" clearable format="yyyy-MM-dd" placeholder="选择起始时间" style="width: 200px" type="daterange" @on-change="selectDateRange"></DatePicker>
+              </Form-item>
+              <Button class="search-btn" icon="ios-search" type="primary" @click="handleSearch">搜索
+              </Button>
+            </Form>
+          </Row>
+
+          <Row class="oss-manage-box">
+            <Col :span="isComponent?5:4">
+              <div class="file-list">
+                <div class="article-category mr_10">
+                  <Tree :data="treeData" :render="renderContent" @on-select-change.self="handleCateChange" class="demo-tree-render"></Tree>
+                  <div class="group-row flex" v-if="!isComponent">
+                    <Button @click="handleClickAddGroup">添加分组</Button>
+                  </div>
+                </div>
+              </div>
+            </Col>
+            <Col :span="isComponent?19:20">
+              <div class="pic-list">
+                <div>
+                  <div class="oss-operation padding-row" style="display: flex;flex-direction: row-reverse;">
+                    <div>
+                      <Upload
+                        ref="up"
+                        :action="commonUrl + '/common/common/upload/file'"
+                        :data="{
+                  directoryPath: searchForm.fileDirectoryId,
+                }"
+                        :headers="accessToken"
+                        :max-size="20480"
+                        :on-error="handleError"
+                        :on-exceeded-size="handleMaxSize"
+                        :on-success="handleSuccess"
+                        :show-upload-list="false"
+                        multiple
+                        style="display: inline-block"
+                      >
+                        <Button>上传图片</Button>
+                      </Upload>
+                      <Dropdown @on-click="handleDropdown" v-if="!isComponent">
+                        <Button>
+                          更多操作
+                          <Icon type="md-arrow-dropdown"/>
+                        </Button>
+                        <DropdownMenu slot="list">
+                          <DropdownItem name="refresh">刷新</DropdownItem>
+                          <DropdownItem v-show="showType == 'list'" name="removeAll"
+                          >批量删除
+                          </DropdownItem>
+                        </DropdownMenu>
+                      </Dropdown>
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <CheckboxGroup v-model="selectedOss" @on-change="selectOssChange">
+                    <div class="img-box">
+                      <div v-for="(item, index) in data" :key="index" class="img-item">
+                        <Checkbox :label="item.id+','+item.url" class="check-box">
+                          <template>
+                            <div class="card"  @mouseenter.active="onMouseOver(item, index)" @mouseleave.active="onMouseOut(item, index)">
+                              <!--<div class="custom-checkbox-card-mask"><div class="custom-checkbox-card-mask-dot"/></div>-->
+                              <img :src="item.url" alt="" />
+                              <div v-if="item.isShowPreview" class="preview">
+                                <div @click.prevent="download(item)"><Tooltip content="下载"><Icon type="md-cloud-download" size="18" /></Tooltip></div>
+                                <div @click.prevent="remove(item)"><Tooltip content="删除"><Icon type="md-trash" size="18" /></Tooltip></div>
+                                <div @click.prevent="showPic(item)"><Tooltip content="预览"><Icon type="ios-eye" size="22" /></Tooltip></div>
+                              </div>
+                            </div>
+                          </template>
+                        </Checkbox>
+                        <div>
+                          <Tooltip :content="item.name" placement="bottom">
+                            <div class="text" @click="copyFileUrl(item)">{{item.name}}</div>
+                          </Tooltip>
+                        </div>
+                      </div>
+                    </div>
+                  </CheckboxGroup>
+                </div>
+                <div class="page-box">
+                  <Page :total="total" :page-size="searchForm.pageSize" show-elevator @on-change="pageChange" size="small" />
+                </div>
+              </div>
+            </Col>
+          </Row>
+
+        </div>
+
+      </Card>
+    </Row>
+    <Modal
+      v-model="modalVisible"
+      :mask-closable="false"
+      :title="modalTitle"
+      :width="500"
+    >
+      <Form ref="form" :label-width="95" :model="form" :rules="formValidate">
+        <FormItem label="原文件名" prop="name">
+          <Input v-model="form.name"/>
+        </FormItem>
+        <FormItem label="存储文件名" prop="fileKey">
+          <Input v-model="form.fileKey" disabled/>
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button type="text" @click="handleCancel">取消</Button>
+        <Button :loading="submitLoading" type="primary" @click="handleSubmit"
+        >提交
+        </Button>
+      </div>
+    </Modal>
+
+    <Modal v-model="picVisible" :title="picTitle" draggable>
+      <img
+        :src="file.url"
+        alt="无效的图片链接"
+        style="width: 100%; margin: 0 auto; display: block"
+      />
+      <div slot="footer">
+        <span
+        >文件类型：{{ file.fileType }} 文件大小：{{ file.msize }} 创建时间：{{
+            file.createTime
+          }}</span
+        >
+      </div>
+    </Modal>
+
+    <Modal
+      v-model="videoVisible"
+      :title="videoTitle"
+      :width="800"
+      draggable
+      @on-cancel="closeVideo"
+    >
+      <div id="dplayer"></div>
+      <div slot="footer">
+        <span
+        >文件类型：{{ file.fileType }} 文件大小：{{ file.msize }} 创建时间：{{
+            file.createTime
+          }}</span
+        >
+      </div>
+    </Modal>
+
+    <!-- 添加分组修改分组编辑框 -->
+    <Modal
+      v-model="enableGroup"
+      :title="insertOrUpdate === 'insert' ? '添加分组' : '修改分组'"
+      :loading="groupLoading"
+      @on-ok="submitAddGroup"
+      footer-hide
+    >
+      <Form
+        ref="formValidate"
+        :label-width="80"
+        :model="groupFormValidate"
+        :rules="groupRuleValidate"
+      >
+        <FormItem label="所在分组" prop="id">
+          <Cascader
+            v-model="groupFormValidate.id"
+            :data="treeData"
+            change-on-select
+            @on-change="treeDataChange"
+          ></Cascader>
+        </FormItem>
+        <FormItem label="分组名称" prop="directoryName">
+          <Input v-model="groupFormValidate.directoryName"/>
+        </FormItem>
+      </Form>
+      <div class="modal-footer">
+        <Button @click="enableGroup = false">取消</Button>
+        <Button type="primary" @click="submitAddGroup">确定</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+  import {
+    addFileDirectory,
+    deleteFile,
+    delFileDirectory,
+    getFileDirectory,
+    getFileListData,
+    renameFile,
+    updateFileDirectory,
+  } from "@/api/index";
+  import DPlayer from "dplayer";
+  import { commonUrl } from "@/libs/axios";
+
+  const config = require("@/config/index");
+
+  let dp;
+  export default {
+    name: "oss-manage",
+    props: {
+      isComponent: {
+        default: false,
+        type: Boolean,
+      },
+      choose: {
+        type: String,
+        default: ""
+      }
+    },
+    data() {
+      return {
+        commonUrl, // 上传文件路径
+        config, // api地址
+        fileDirectoryId: "",
+        groupFormValidate: {
+          id: [],
+          level: 0,
+          directoryName: "",
+        },
+        groupRuleValidate: {
+          directoryName: [
+            {
+              required: true,
+              message: "请输入分组名称",
+              trigger: "blur",
+            },
+          ],
+          id: [
+            {
+              required: true,
+              message: "请选择分组",
+              trigger: "blur",
+              type: "array",
+            },
+          ],
+        },
+        enableGroup: false, // 是否展示分组
+        selectImage: false, //是否是选择
+        accessToken: {}, // 上传token鉴权
+        loading: false, // 表单加载状态
+        fileType: "all", // 文件类型
+        showType: "list", // 展示类型
+        modalVisible: false, // 添加或编辑显示
+        uploadVisible: false, // 上传展示
+        videoVisible: false, // 文件modal
+        picVisible: false, // 图片modal
+        picTitle: "", // 图片title
+        videoTitle: "", // 视频title
+        modalTitle: "", // 添加或编辑标题
+        searchForm: {
+          // 搜索框对应data对象
+          name: "",
+          fileKey: "",
+          fileType: "",
+          pageNumber: 1, // 当前页数
+          pageSize: 27, // 页面大小
+          sort: "createTime", // 默认排序字段
+          order: "desc", // 默认排序方式
+          startDate: "", // 起始时间
+          endDate: "", // 终止时间
+        },
+        selectDate: null, // 选择日期绑定modal
+        oldKey: "", // 请求参数
+        form: {
+          // 表单
+          name: "",
+          fileKey: "",
+        },
+        file: {}, // 文件数据
+        // 表单验证规则
+        formValidate: {
+          name: [{required: true, message: "不能为空", trigger: "blur"}],
+          fileKey: [{required: true, message: "不能为空", trigger: "blur"}],
+        },
+        submitLoading: false, // 添加或编辑提交状态
+        selectList: [], // 多选数据
+        selectCount: 0, // 多选计数
+        totalSize: "", // 文件大小统计
+        columns: [
+          // 表头
+          {
+            type: "selection",
+            width: 60,
+            align: "center",
+          },
+          {
+            title: "缩略图(点击预览)",
+            key: "url",
+            width: 300,
+            align: "center",
+            render: (h, params) => {
+              if (params.row.fileType.includes("image") > 0) {
+                return h("img", {
+                  attrs: {
+                    src: params.row.url || "",
+                    alt: "加载图片失败",
+                  },
+                  style: {
+                    cursor: "pointer",
+                    width: "80px",
+                    height: "60px",
+                    margin: "10px 0",
+                    "object-fit": "contain",
+                  },
+                  on: {
+                    click: () => {
+                      this.showPic(params.row);
+                    },
+                  },
+                });
+              } else if (params.row.fileType.includes("video") > 0) {
+                // 如果视频文件大小超过5MB不予加载video
+                if (params.row.fileSize < 1024 * 1024 * 5) {
+                  return h(
+                    "video",
+                    {
+                      style: {
+                        cursor: "pointer",
+                        width: "80px",
+                        height: "60px",
+                        margin: "10px 0",
+                        "object-fit": "contain",
+                      },
+                      on: {
+                        click: () => {
+                          this.showVideo(params.row);
+                        },
+                      },
+                    },
+                    [
+                      h("source", {
+                        attrs: {
+                          src: params.row.url,
+                        },
+                      }),
+                    ]
+                  );
+                } else {
+                  return h("img", {
+                    attrs: {
+                      src: require("@/assets/play.png"),
+                    },
+                    style: {
+                      cursor: "pointer",
+                      width: "80px",
+                      height: "60px",
+                      margin: "10px 0",
+                      "object-fit": "contain",
+                    },
+                    on: {
+                      click: () => {
+                        this.showVideo(params.row);
+                      },
+                    },
+                  });
+                }
+              } else {
+                return h("span", "非多媒体类型");
+              }
+            },
+          },
+          {
+            title: "文件类型",
+            key: "fileType",
+            width: 115,
+            className: this.selectImage == true ? "none" : "",
+          },
+          {
+            title: "文件大小",
+            key: "fileSize",
+            width: 115,
+            sortable: true,
+            className: this.selectImage == true ? "none" : "",
+            render: (h, params) => {
+              let m =
+                ((params.row.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+              return h("span", m);
+            },
+          },
+          {
+            title: "上传者",
+            key: "createBy",
+            width: 200,
+            render: (h, params) => {
+              let m = "";
+              if (params.row.userEnums == "MANAGER") {
+                m = "[管理员]";
+              } else if (params.row.userEnums == "STORE") {
+                m = "[店铺]";
+              } else {
+                m = "[会员]";
+              }
+              m += params.row.createBy;
+              return h("span", m);
+            },
+          },
+          {
+            title: "操作",
+            key: "action",
+            align: "center",
+            fixed: "right",
+            // width: 300,
+            render: (h, params) => {
+              return h("div", [
+                h(
+                  "Button",
+                  {
+                    props: {
+                      type: "default",
+                      size: "small",
+                    },
+                    style: {
+                      marginRight: "5px",
+                      display:
+                        this.selectImage === true ? "inline-block" : "none",
+                    },
+                    on: {
+                      click: () => {
+                        this.selectedParams(params.row);
+                      },
+                    },
+                  },
+                  "选择"
+                ),
+                h(
+                  "Button",
+                  {
+                    props: {
+                      type: "info",
+                      size: "small",
+                    },
+                    style: {
+                      marginRight: "5px",
+                      display: this.selectImage == true ? "none" : "inline-block",
+                    },
+                    on: {
+                      click: () => {
+                        this.download(params.row);
+                      },
+                    },
+                  },
+                  "下载"
+                ),
+                h(
+                  "Button",
+                  {
+                    props: {
+                      type: "error",
+                      size: "small",
+                    },
+                    style: {
+                      display: this.selectImage == true ? "none" : "inline-block",
+                    },
+                    on: {
+                      click: () => {
+                        this.remove(params.row);
+                      },
+                    },
+                  },
+                  "删除"
+                ),
+              ]);
+            },
+          },
+        ],
+        viewColumns: [
+          {
+            title: "缩略图(点击预览)",
+            key: "url",
+            // width: 150,
+            align: "center",
+            render: (h, params) => {
+              if (params.row.fileType.includes("image") > 0) {
+                return h("img", {
+                  attrs: {
+                    src: params.row.url || "",
+                    alt: "加载图片失败",
+                  },
+                  style: {
+                    cursor: "pointer",
+                    width: "80px",
+                    height: "60px",
+                    margin: "10px 0",
+                    "object-fit": "contain",
+                  },
+                  on: {
+                    click: () => {
+                      this.showPic(params.row);
+                    },
+                  },
+                });
+              } else if (params.row.fileType.includes("video") > 0) {
+                // 如果视频文件大小超过5MB不予加载video
+                if (params.row.fileSize < 1024 * 1024 * 5) {
+                  return h(
+                    "video",
+                    {
+                      style: {
+                        cursor: "pointer",
+                        width: "80px",
+                        height: "60px",
+                        margin: "10px 0",
+                        "object-fit": "contain",
+                      },
+                      on: {
+                        click: () => {
+                          this.showVideo(params.row);
+                        },
+                      },
+                    },
+                    [
+                      h("source", {
+                        attrs: {
+                          src: params.row.url,
+                        },
+                      }),
+                    ]
+                  );
+                } else {
+                  return h("img", {
+                    attrs: {
+                      src: require("@/assets/play.png"),
+                    },
+                    style: {
+                      cursor: "pointer",
+                      width: "80px",
+                      height: "60px",
+                      margin: "10px 0",
+                      "object-fit": "contain",
+                    },
+                    on: {
+                      click: () => {
+                        this.showVideo(params.row);
+                      },
+                    },
+                  });
+                }
+              } else {
+                return h("span", "非多媒体类型");
+              }
+            },
+          },
+          {
+            title: "上传者",
+            key: "createBy",
+            width: 120,
+            sortable: true,
+            render: (h, params) => {
+              let m = "";
+              if (params.row.userEnums == "MANAGER") {
+                m = "[管理员]";
+              } else if (params.row.userEnums == "STORE") {
+                m = "[店铺]";
+              } else {
+                m = "[会员]";
+              }
+              m += params.row.createBy;
+              return h("span", m);
+            },
+          },
+          {
+            title: "操作",
+            key: "action",
+            align: "center",
+            fixed: "right",
+            width: 300,
+            render: (h, params) => {
+              return h("div", [
+                h(
+                  "Button",
+                  {
+                    props: {
+                      type: "default",
+                      size: "small",
+                    },
+                    style: {
+                      marginRight: "5px",
+                      display:
+                        this.selectImage === true ? "inline-block" : "none",
+                    },
+                    on: {
+                      click: () => {
+                        this.selectedParams(params.row);
+                      },
+                    },
+                  },
+                  "选择"
+                )
+              ]);
+            },
+          },
+        ],
+        data: [], // 表单数据
+        total: 0, // 表单数据总数
+        pageSizeOpts: [5, 10, 20], // 页码展示项
+        list: [], // 列表
+        //树结构
+        treeData: [],
+        treeDataDefault: [],
+        selectedGroupData: "",
+        insertOrUpdate: "insert",
+        groupLoading: false,
+        // 图片列表
+        selectedOss: [],
+        myData: [
+          {
+            title: 'parent 1',
+            expand: true,
+            render: (h, { root, node, data }) => {
+              return h('span', {style: {display: 'inline-block', width: '100%'}}, [
+                h('span', [h("Icon", {type: 'ios-folder-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
+                h('span', {style: {display: 'inline-block', float: 'right', marginRight: '32px'}},
+                  [h("Button", {...this.buttonProps, icon: 'ios-add', type: 'primary', style: {width: '64px'}, onClick: () => { this.append(data) }})
+                  ])
+              ]);
+            },
+            children: [
+              {title: 'child 1-1', expand: true, children: [{title: 'leaf 1-1-1', expand: true}, {title: 'leaf 1-1-2', expand: true}]},
+              {title: 'child 1-2', expand: true, children: [{title: 'leaf 1-2-1', expand: true}, {title: 'leaf 1-2-1', expand: true}]}
+            ]
+          }
+        ],
+        buttonProps: {type: 'default', size: 'small',},
+      };
+    },
+    watch: {
+      selectImage(val) {
+        if (val && !this.data.length) this.init();
+      },
+      choose(val) {
+        if (val) this.selectImage = val
+      },
+      selectedOss(val) {
+        if (val) {
+          this.$emit("callback", {url: val[val.length-1].split(',')[1]});
+        }
+      }
+    },
+
+    methods: {
+      onMouseOver(item, index) {
+        this.$set(this.data[index], 'isShowPreview', true);
+        this.$forceUpdate();
+      },
+      onMouseOut(item, index) {
+        this.$set(this.data[index], 'isShowPreview', false);
+      },
+      // 复选框值改变时触发
+      selectOssChange(e) {
+        if (e) {
+          this.selectList = e.map(item => {return { id: item.split(',')[0]}});
+          this.selectCount = e.length;
+          // let size = 0;
+          // e.forEach((item) => {size += item.fileSize * 1.0;});
+          // this.totalSize = ((size * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+          this.$emit("selected", e);
+        }
+      },
+      // 页码改变时回调
+      pageChange(value) {
+        this.$set(this, 'selectedOss', []);
+        this.searchForm.pageNumber = value;
+        this.getDataList();
+      },
+      // 自定义tree节点显示内容和交互
+      renderContent (h, { root, node, data }) {
+        return h('span', {style: {display: 'inline-block', width: '100%'}},
+          [
+            h('span', [h("Icon", {type: 'ios-paper-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
+            h('span', {style: {display: 'inline-block', float: 'right', marginRight: '10px'}},
+              [
+                h("Dropdown", {style: {marginLeft: "4px"}},
+                  [
+                    h("Icon", {props: {type: 'ios-more', size: "20",}, style: {display: 'inline-block'}, on:{click: () => {}}}),
+                    h("DropdownMenu", {slot: "list"
+                    }, [
+                      h("DropdownItem", { nativeOn:{click: () => {this.handleContextMenuEdit()}} }, "编辑"),
+                      h("DropdownItem", { nativeOn:{click: () => {this.handleContextMenuDelete()}} }, "删除"),
+                    ])
+                  ]),
+              ])
+          ]);
+      },
+
+
+
+
+      handleContextMenu(val) {
+        console.log('handleContextMenu', val);
+        this.selectedGroupData = val;
+      },
+      // 编辑分组
+      handleContextMenuEdit(val) {
+        this.insertOrUpdate = "update";
+
+        this.enableGroup = true;
+        // this.groupFormValidate = this.selectedGroupData;
+
+        this.groupFormValidate.directoryName = this.selectedGroupData.title;
+        this.groupFormValidate.id = [this.selectedGroupData.value];
+        this.groupFormValidate.level = this.selectedGroupData.level;
+
+        this.groupFormValidate.parentId = this.selectedGroupData.parentId;
+      },
+      // 删除分组
+      async handleContextMenuDelete(val) {
+        this.$Modal.confirm({
+          title: "提示",
+          content: "是否删除该分组",
+          onOk: async () => {
+            const res = await delFileDirectory(this.selectedGroupData.value);
+            if (res.success) {
+              this.$Message.success("删除成功!");
+              this.getDataList();
+              this.getAllList();
+            }
+          },
+        });
+      },
+      treeDataChange(value, selectedData) {
+        if (value && value.length) {
+          if (value[value.length -1] == '0') {
+            this.groupFormValidate.level = 0;
+          } else {
+            this.groupFormValidate.level = Number(selectedData[selectedData.length -1].level) + 1;
+          }
+        }
+      },
+      // 保存/修改分组
+      async submitAddGroup() {
+        this.$refs["formValidate"].validate(async (valid) => {
+          if (valid) {
+            let res
+            const params = { ...this.groupFormValidate };
+
+            if (this.insertOrUpdate === "insert") {
+              // params.directoryType = this.selectedGroupData.directoryType
+              params.parentId = params.id[params.id.length - 1];
+              // params.type = this.selectedGroupData.type
+              delete params.id;
+              res = await addFileDirectory(params);
+            } else {
+              params.id = params.id[params.id.length - 1];
+              res = await updateFileDirectory(params);
+            }
+
+            if (res.success) {
+              this.$Message.success("操作成功!");
+              this.enableGroup = false;
+              this.getAllList();
+            }
+            this.$Modal.remove();
+          } else {
+            this.$Message.error("请填写完整信息!");
+          }
+        });
+      },
+      // 添加/修改分组
+      handleClickAddGroup() {
+        this.insertOrUpdate = "insert";
+        if (this.selectedGroupData) {
+          this.groupFormValidate.id = [this.selectedGroupData.value];
+        } else {
+          this.groupFormValidate.id = ["0"];
+        }
+        this.enableGroup = true;
+        this.groupFormValidate.directoryName = "";
+      },
+      copyFileUrl(row) {
+        const textArea = document.createElement("textarea");
+        textArea.value = row.url;
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        try {
+          document.execCommand("copy");
+          this.$Message.success("复制成功");
+        } catch (err) {
+          console.error("Unable to copy to clipboard", err);
+        }
+        document.body.removeChild(textArea);
+      },
+
+      // 获取全部文件目录
+      getAllList(parent_id) {
+        this.loading = true;
+        getFileDirectory(parent_id).then((res) => {
+          this.loading = false;
+          if (res.success) {
+            this.treeData = this.getTree(res.result);
+            this.treeDataDefault = this.getTree(res.result);
+            this.treeData.unshift({
+              title: "全部图片",
+              label: "全部分类",
+              value: "0",
+              level: 0,
+              children: [],
+              id: "0",
+              categoryId: 0,
+            });
+          }
+        });
+      },
+      // 文件目录分类格式化方法
+      getTree(tree = []) {
+        let arr = [];
+        if (!!tree && tree.length !== 0) {
+          tree.forEach((item) => {
+            let obj = {};
+            obj.title = item.directoryName;
+            obj.value = item.id; // 拥有者id
+            obj.type = item.directoryType; // 用户类型
+            obj.label = item.directoryName;
+            obj.level = item.level;
+            obj.expand = false;
+            obj.selected = false;
+            obj.contextmenu = false;
+            obj.parentId = item.parentId;
+            obj.children = this.getTree(item.children); // 递归调用
+            arr.push(obj);
+          });
+        }
+        return arr;
+      },
+
+      // 选择分类回调
+      handleCateChange(data) {
+        if (data) {
+          this.selectedGroupData = data[0];
+          let {value, type, level} = data[0];
+          this.list.push({value, type, level});
+          this.searchForm.fileDirectoryId = value;
+          if (value === "0" || value === 0) {
+            delete this.searchForm.fileDirectoryId;
+            this.groupFormValidate.level = 0;
+          } else {
+            this.groupFormValidate.level = Number(level) + 1;
+          }
+          this.searchForm.userEnums = type;
+          this.getDataList();
+          this.$set(this, 'selectedOss', []);
+        }
+      },
+      /**
+       * 选择
+       */
+      selectedParams(val) {
+        this.$emit("callback", val);
+      },
+      // 更多操作
+      handleDropdown(name) {
+        if (name === "refresh") {
+          this.getDataList('refresh');
+        } else if (name === "removeAll") {
+          this.removeAll();
+        }
+      },
+      // 初始化数据
+      init() {
+        this.accessToken = {
+          accessToken: this.getStore("accessToken"),
+        };
+        this.getDataList();
+        this.getAllList();
+      },
+      // 查看大图
+      showPic(v) {
+        this.file = v;
+        this.file.msize = ((v.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+
+        this.picTitle = v.name + "(" + v.fileKey + ")";
+        this.picVisible = true;
+      },
+      // 查看视频
+      showVideo(v) {
+        dp = new DPlayer({
+          container: document.getElementById("dplayer"),
+          screenshot: true,
+          video: {
+            url: v.url,
+          },
+        });
+        this.file = v;
+        this.file.msize = ((v.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+        this.videoTitle = v.name + "(" + v.fileKey + ")";
+        this.videoVisible = true;
+      },
+      // 关闭视频
+      closeVideo() {
+        dp.destroy();
+      },
+      // 分页 改变页码
+      changePage(v) {
+        this.searchForm.pageNumber = v;
+        this.getDataList();
+        this.clearSelectAll();
+      },
+      // 分页 改变页数
+      changePageSize(v) {
+        this.searchForm.pageNumber = 1;
+        this.searchForm.pageSize = v;
+        this.getDataList();
+      },
+      // 排序
+      changeSort(e) {
+        this.searchForm.sort = e.key;
+        this.searchForm.order = e.order;
+        if (e.order == "normal") {
+          this.searchForm.order = "";
+        }
+        this.getDataList();
+      },
+      // 起止时间从新赋值
+      selectDateRange(v) {
+        if (v) {
+          this.searchForm.startDate = v[0];
+          this.searchForm.endDate = v[1];
+        }
+      },
+      // 改变查看方式
+      changeShowType() {
+        this.searchForm.pageNumber = 1;
+        if (this.showType == "list") {
+          this.searchForm.pageSize = 10;
+        } else {
+          this.searchForm.pageSize = 12;
+        }
+        this.getDataList();
+      },
+      // 获取列表数据
+      getDataList(type = null) {
+        if (this.showType == "list") {
+          this.pageSizeOpts = [10, 20, 50];
+        } else {
+          this.pageSizeOpts = [12, 24, 48];
+        }
+        this.loading = true;
+        getFileListData(this.searchForm).then((res) => {
+          this.loading = false;
+
+          this.data = res.result.records;
+          this.total = res.result.total;
+          if (type === 'refresh') {
+            this.$Message.success('刷新成功！');
+          }
+        });
+      },
+      // 搜索
+      handleSearch() {
+        this.searchForm.title = this.searchForm.name;
+        this.searchForm.pageNumber = 1;
+        if (this.showType == "list") {
+          this.searchForm.pageSize = 5;
+        } else {
+          this.searchForm.pageSize = 12;
+        }
+        this.getDataList();
+      },
+      // 文件类型筛选
+      changeFileType() {
+        let name = this.fileType;
+        if (name == "all") {
+          this.searchForm.fileType = "";
+        } else if (name == "pic") {
+          this.searchForm.fileType = "image";
+        } else if (name == "video") {
+          this.searchForm.fileType = "video";
+        }
+        this.handleSearch();
+      },
+      // 上传文件超过大小限制
+      handleMaxSize(file) {
+        this.$Notice.warning({
+          title: "文件大小过大",
+          desc: "所选文件大小过大, 不得超过 1M.",
+        });
+      },
+      // 上传成功回调
+      handleSuccess(res, file) {
+        if (res.success) {
+          this.$Message.success("上传文件 " + file.name + " 成功");
+          this.getDataList();
+        } else {
+          this.$Message.error(res.message);
+        }
+      },
+      // 上传失败回调
+      handleError(error, file, fileList) {
+        this.$Message.error(error.toString());
+      },
+      // 清空上传文件
+      clearFiles() {
+        this.$refs.up.clearFiles();
+      },
+      // 取消修改文件名
+      handleCancel() {
+        this.modalVisible = false;
+      },
+      // 下载文件
+      download(v) {
+        window.open(
+          v.url + "?attname=&response-content-type=application/octet-stream"
+        );
+      },
+      // 批量删除文件
+      removeAll() {
+        if (this.selectCount <= 0) {
+          this.$Message.warning("您还未选择要删除的数据");
+          return;
+        }
+        this.$Modal.confirm({
+          title: "确认删除",
+          content: "您确认要删除所选的 " + this.selectCount + " 个文件?",
+          loading: true,
+          onOk: () => {
+            let ids = "";
+            this.selectList.forEach(function (e) {ids += e.id + ",";});
+            ids = ids.substring(0, ids.length - 1);
+            deleteFile(ids).then((res) => {
+              this.$Modal.remove();
+              if (res.success) {
+                this.$set(this, 'selectedOss', []);
+                // this.clearSelectAll();
+                this.init();
+                this.$Message.success("批量删除文件成功");
+              }
+            })
+              .catch((err) => {
+                console.log("失败", err);
+              });
+          },
+        });
+      },
+      // 单个删除文件
+      remove(v) {
+        this.$Modal.confirm({
+          title: "确认删除",
+          content: "您确认要删除文件 " + v.name + " ?",
+          loading: true,
+          onOk: () => {
+            deleteFile(v.id).then((res) => {
+              this.$Modal.remove();
+              if (res.success) {
+                this.$Message.success("删除文件 " + v.name + " 成功");
+                this.getDataList();
+              }
+            })
+          },
+        });
+      },
+      // 提交修改文件名
+      handleSubmit() {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.submitLoading = true;
+            let params = {
+              id: this.form.id,
+              key: this.oldKey,
+              newKey: this.form.fileKey,
+              newName: this.form.name,
+            };
+            renameFile(params).then((res) => {
+              this.submitLoading = false;
+              if (res.success) {
+                this.$Message.success("操作成功");
+                this.getDataList();
+                this.modalVisible = false;
+              }
+            });
+          }
+        });
+      },
+      // 修改文件名modal
+      rename(v) {
+        this.modalTitle = "编辑文件名";
+        // 转换null为""
+        for (let attr in v) {
+          if (v[attr] == null) {
+            v[attr] = "";
+          }
+        }
+        let str = JSON.stringify(v);
+        let data = JSON.parse(str);
+        this.form = data;
+        this.oldKey = data.fileKey;
+        this.modalVisible = true;
+      },
+      // 清除选中状态
+      clearSelectAll() {
+        this.$refs.table.selectAll(false);
+        this.totalSize = "";
+      },
+      // 选中回调
+      changeSelect(e) {
+        this.selectList = e;
+        this.selectCount = e.length;
+        let size = 0;
+        e.forEach((item) => {
+          size += item.fileSize * 1.0;
+        });
+        this.totalSize = ((size * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+        this.$emit("selected", e)
+      },
+    },
+    mounted() {
+      if (!this.isComponent) {
+        // 是组件的话，初始化不调用接口
+        this.init();
+      } else {
+        this.searchForm.pageSize =18; // 页面大小
+      }
+    },
+  };
+</script>
diff --git a/seller/src/views/shop/wap/decorate.vue b/seller/src/views/shop/wap/decorate.vue
index b53e89c7..d7dd8802 100644
--- a/seller/src/views/shop/wap/decorate.vue
+++ b/seller/src/views/shop/wap/decorate.vue
@@ -221,13 +221,13 @@
     ></liliDialog>
     <hotzone ref="hotzone" @changeZone="changeZone"></hotzone>
     <Modal width="1200px" v-model="picModelFlag">
-      <ossManage  @callback="callbackSelected" ref="ossManage" />
+      <ossManage  @callback="callbackSelected" :isComponent="true" ref="ossManage" />
     </Modal>
   </div>
 </template>
 <script>
 // import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManage";
+import ossManage from "@/views/shop/ossManages";
 import hotzone from "@/views/shop/hotzone";
 import { modelData } from "./config";
 import ways from "@/views/lili-dialog/wap.js"; // 选择链接的类型