Merge branch 'master' of gitee.com:beijing_hongye_huicheng/lilishop-ui

manager/src/components/editor/upload-image.vue

@@ -57,7 +57,7 @@
     </Modal>
 
     <Modal width="1000" v-model="showOssManager" @on-ok="confirmUrls">
-    <OssManage ref="ossManage" @selected="handleCallback"  />
+    <OssManage ref="ossManage" :isComponent="true" @selected="handleCallback"  />
     </Modal>
   </div>
 </template>

manager/src/components/lili/upload-pic-input.vue

@@ -47,7 +47,7 @@
     </Modal>
 
     <Modal width="1200px" v-model="picModalFlag">
-      <ossManage @callback="callbackSelected" ref="ossManage" />
+      <ossManage @callback="callbackSelected" ref="ossManage" isComponent="true" />
     </Modal>
 
   </div>

manager/src/views/member/list/index.vue

@@ -94,7 +94,7 @@
       </Form>
     </Modal>
     <Modal width="1200px" v-model="picModelFlag">
-      <ossManage @callback="callbackSelected" ref="ossManage" />
+      <ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
     </Modal>
     <multipleMap ref="map" @callback="selectedRegion"/>
   </div>

manager/src/views/member/list/memberRecycle.vue

@@ -140,7 +140,7 @@
       </Form>
     </Modal>
     <Modal width="1200px" v-model="picModelFlag">
-      <ossManage @callback="callbackSelected" ref="ossManage" />
+      <ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
     </Modal>
     <multipleMap ref="map" @callback="selectedRegion" />
   </div>

manager/src/views/page-decoration/modelList/carousel1.vue

@@ -84,7 +84,7 @@
     <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
     <Modal width="1200px" v-model="picModelFlag" footer-hide>
-      <ossManage @callback="callbackSelected" ref="ossManage" />
+      <ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
     </Modal>
   </div>
 </template>

manager/src/views/page-decoration/modelList/carousel2.vue

@@ -204,7 +204,7 @@
     <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
     <Modal width="1200px" v-model="picModelFlag" footer-hide>
-      <ossManage @callback="callbackSelected" ref="ossManage" />
+      <ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
     </Modal>
   </div>
 </template>

manager/src/views/page-decoration/wap/advertising.vue

@@ -80,7 +80,7 @@
         <liliDialog ref="liliDialog"    @selectedLink="selectedLink" :types="linkType"></liliDialog>
       </div>
       <Modal width="1200px" v-model="picModelFlag">
-         <ossManage @callback="callbackSelected" ref="ossManage" />
+         <ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
       </Modal>
     </div>
   </div>

manager/src/views/page-decoration/wap/alertAdvertising.vue

@@ -83,7 +83,7 @@
         ></liliDialog>
       </div>
       <Modal width="1200px" v-model="picModelFlag">
-      <ossManage @callback="callbackSelected" ref="ossManage" />
+      <ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
     </Modal>
     </div>
   </div>

manager/src/views/page-decoration/wap/decorate.vue

@@ -497,7 +497,7 @@
     <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>

manager/src/views/seller/shop/shopOperation.vue

@@ -375,7 +375,7 @@
 
 
     <Modal width="1200px" v-model="picModalFlag">
-      <ossManage @callback="callbackSelected" ref="ossManage" />
+      <ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
     </Modal>
 
     <Modal width="1200px" v-model="memberModalFlag">

manager/src/views/sys/oss-manage/ossManage.scss

@@ -133,3 +133,131 @@
     }
   }
 }
+
+
+.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%;
+  }
+}
+

manager/src/views/sys/oss-manage/ossManage.vue

@@ -27,6 +27,7 @@
     margin: 0 10px;
   }
 }
+
 </style>
 <template>
   <div class="search">
@@ -61,7 +62,22 @@
               </Button>
             </Form>
           </Row>
-          <div class="oss-operation padding-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"
@@ -95,130 +111,201 @@
                     </div>
                   </div>
                 </div>
-
+                <div>
-        <Alert show-icon v-if="!isComponent">
+                  <CheckboxGroup v-model="selectedOss" @on-change="selectOssChange">
-          已选择
+                    <div class="img-box">
-          <span>{{ selectCount }}</span> 项
+                      <div v-for="(item, index) in data" :key="index" class="img-item">
-          <a class="select-clear" @click="clearSelectAll">清空</a>
+                        <Checkbox :label="item.id+','+item.url" class="check-box">
-          <span v-if="selectCount > 0" style="margin-left: 15px"
+                          <template>
-          >共计 {{ totalSize }} 存储量</span
+                            <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>-->
-        </Alert>
+                              <img :src="item.url" alt="" />
-
+                              <div v-if="item.isShowPreview" class="preview">
-        <div v-show="showType === 'list'" >
+                                <div @click.prevent="download(item)"><Tooltip content="下载"><Icon type="md-cloud-download" size="18" /></Tooltip></div>
-          <div class="flex">
+                                <div @click.prevent="remove(item)"><Tooltip content="删除"><Icon type="md-trash" size="18" /></Tooltip></div>
-            <div class="article-category mr_10">
+                                <div @click.prevent="showPic(item)"><Tooltip content="预览"><Icon type="ios-eye" size="22" /></Tooltip></div>
-              <Tree
+                              </div>
-                :data="treeData"
+                            </div>
-                @on-contextmenu="handleContextMenu"
-                @on-select-change="handleCateChange"
-              >
-                <template slot="contextMenu" v-if="!isComponent">
-                  <DropdownItem @click.native="handleContextMenuEdit"
-                  >编辑
-                  </DropdownItem
-                  >
-                  <DropdownItem
-                    style="color: #ed4014"
-                    @click.native="handleContextMenuDelete"
-                  >删除
-                  </DropdownItem
-                  >
                           </template>
-              </Tree>
+                        </Checkbox>
-              <Alert v-if="!isComponent">鼠标右键编辑/删除分组</Alert>
+                        <div>
-              <div class="group-row flex" v-if="!isComponent">
+                          <Tooltip :content="item.name" placement="bottom">
-                <Button @click="handleClickAddGroup">添加分组</Button>
+                            <div class="text">{{item.name}}</div>
-              </div>
-            </div>
-
-            <Table
-              ref="table"
-              :columns="isComponent ? viewColumns : columns"
-              :data="data"
-              :loading="loading"
-              border
-              class="table"
-              sortable="custom"
-              @on-sort-change="changeSort"
-              @on-selection-change="changeSelect"
-            >
-              <template slot="fileKey" slot-scope="{ row }">
-                <a @click="copyFileUrl(row)">{{ row.fileKey }}</a>
-              </template>
-            </Table>
-          </div>
-        </div>
-        <div v-show="showType === 'thumb'">
-          <div class="oss-wrapper">
-            <Card v-for="(item, i) in data" :key="i" class="oss-card">
-              <div class="content">
-                <img
-                  v-if="item.fileType.indexOf('image') >= 0"
-                  :src="item.url"
-                  class="img"
-                  @click="showPic(item)"
-                />
-                <div
-                  v-else-if="item.fileType.indexOf('video') >= 0"
-                  class="video"
-                  @click="showVideo(item)"
-                >
-                  <!-- 文件小于5MB显示video -->
-                  <video v-if="item.fileSize < 1024 * 1024 * 5" class="cover">
-                    <source :src="item.url"/>
-                  </video>
-                  <img class="play" src="@/assets/play.png"/>
-                </div>
-                <div v-else class="other">
-                  <div class="name">{{ item.name }}</div>
-                  <div class="key">{{ item.fileKey }}</div>
-                  <div class="info">
-                    文件类型：{{ item.fileType }} 文件大小：{{
-                      ((item.fileSize * 1.0) / (1024 * 1024)).toFixed(2)
-                    }}
-                    MB 创建时间：{{ item.createTime }}
-                  </div>
-                </div>
-                <div class="actions">
-                  <div class="btn">
-                    <Tooltip content="下载" placement="top">
-                      <Icon
-                        size="16"
-                        type="md-download"
-                        @click="download(item)"
-                      />
-                    </Tooltip>
-                  </div>
-                  <div class="btn">
-                    <Tooltip content="重命名" placement="top">
-                      <Icon size="16" type="md-create" @click="rename(item)"/>
-                    </Tooltip>
-                  </div>
-                  <div class="btn-no">
-                    <Tooltip content="删除" placement="top">
-                      <Icon size="16" type="md-trash" @click="remove(item)"/>
                           </Tooltip>
                         </div>
                       </div>
                     </div>
-            </Card>
+                  </CheckboxGroup>
+                </div>
+                <div class="page-box">
+                  <Page :total="total" :page-size="searchForm.pageSize" show-elevator @on-change="pageChange" size="small" />
                 </div>
               </div>
-        <Row class="mt_10" justify="end" type="flex">
+            </Col>
-          <Page
-            :current="searchForm.pageNumber"
-            :page-size="searchForm.pageSize"
-            :page-size-opts="pageSizeOpts"
-            :total="total"
-            show-elevator
-            show-sizer
-            show-total
-            size="small"
-            @on-change="changePage"
-            @on-page-size-change="changePageSize"
-          ></Page>
           </Row>
+
+
+
+
+          <!--<div class="oss-operation padding-row">-->
+            <!--<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"-->
+              <!--&gt;-->
+                <!--<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"-->
+                  <!--&gt;批量删除-->
+                  <!--</DropdownItem>-->
+                <!--</DropdownMenu>-->
+              <!--</Dropdown>-->
+            <!--</div>-->
+          <!--</div>-->
+        </div>
+
+        <!--<Alert show-icon v-if="!isComponent">-->
+          <!--已选择-->
+          <!--<span>{{ selectCount }}</span> 项-->
+          <!--<a class="select-clear" @click="clearSelectAll">清空</a>-->
+          <!--<span v-if="selectCount > 0" style="margin-left: 15px"-->
+          <!--&gt;共计 {{ totalSize }} 存储量</span-->
+          <!--&gt;-->
+        <!--</Alert>-->
+
+        <!--<div v-show="showType === 'list'" >-->
+          <!--<div class="flex">-->
+            <!--<div class="article-category mr_10">-->
+              <!--<Tree-->
+                <!--:data="treeData"-->
+                <!--@on-contextmenu="handleContextMenu"-->
+                <!--@on-select-change="handleCateChange"-->
+              <!--&gt;-->
+                <!--<template slot="contextMenu" v-if="!isComponent">-->
+                  <!--<DropdownItem @click.native="handleContextMenuEdit"-->
+                  <!--&gt;编辑-->
+                  <!--</DropdownItem-->
+                  <!--&gt;-->
+                  <!--<DropdownItem-->
+                    <!--style="color: #ed4014"-->
+                    <!--@click.native="handleContextMenuDelete"-->
+                  <!--&gt;删除-->
+                  <!--</DropdownItem-->
+                  <!--&gt;-->
+                <!--</template>-->
+              <!--</Tree>-->
+              <!--<Alert v-if="!isComponent">鼠标右键编辑/删除分组</Alert>-->
+              <!--<div class="group-row flex" v-if="!isComponent">-->
+                <!--<Button @click="handleClickAddGroup">添加分组</Button>-->
+              <!--</div>-->
+            <!--</div>-->
+
+            <!--<Table-->
+              <!--ref="table"-->
+              <!--:columns="isComponent ? viewColumns : columns"-->
+              <!--:data="data"-->
+              <!--:loading="loading"-->
+              <!--border-->
+              <!--class="table"-->
+              <!--sortable="custom"-->
+              <!--@on-sort-change="changeSort"-->
+              <!--@on-selection-change="changeSelect"-->
+            <!--&gt;-->
+              <!--<template slot="fileKey" slot-scope="{ row }">-->
+                <!--<a @click="copyFileUrl(row)">{{ row.fileKey }}</a>-->
+              <!--</template>-->
+            <!--</Table>-->
+          <!--</div>-->
+        <!--</div>-->
+
+        <!--<div v-show="showType === 'thumb'">-->
+          <!--<div class="oss-wrapper">-->
+            <!--<Card v-for="(item, i) in data" :key="i" class="oss-card">-->
+              <!--<div class="content">-->
+                <!--<img-->
+                  <!--v-if="item.fileType.indexOf('image') >= 0"-->
+                  <!--:src="item.url"-->
+                  <!--class="img"-->
+                  <!--@click="showPic(item)"-->
+                <!--/>-->
+                <!--<div-->
+                  <!--v-else-if="item.fileType.indexOf('video') >= 0"-->
+                  <!--class="video"-->
+                  <!--@click="showVideo(item)"-->
+                <!--&gt;-->
+                  <!--&lt;!&ndash; 文件小于5MB显示video &ndash;&gt;-->
+                  <!--<video v-if="item.fileSize < 1024 * 1024 * 5" class="cover">-->
+                    <!--<source :src="item.url"/>-->
+                  <!--</video>-->
+                  <!--<img class="play" src="@/assets/play.png"/>-->
+                <!--</div>-->
+                <!--<div v-else class="other">-->
+                  <!--<div class="name">{{ item.name }}</div>-->
+                  <!--<div class="key">{{ item.fileKey }}</div>-->
+                  <!--<div class="info">-->
+                    <!--文件类型：{{ item.fileType }} 文件大小：{{-->
+                      <!--((item.fileSize * 1.0) / (1024 * 1024)).toFixed(2)-->
+                    <!--}}-->
+                    <!--MB 创建时间：{{ item.createTime }}-->
+                  <!--</div>-->
+                <!--</div>-->
+                <!--<div class="actions">-->
+                  <!--<div class="btn">-->
+                    <!--<Tooltip content="下载" placement="top">-->
+                      <!--<Icon-->
+                        <!--size="16"-->
+                        <!--type="md-download"-->
+                        <!--@click="download(item)"-->
+                      <!--/>-->
+                    <!--</Tooltip>-->
+                  <!--</div>-->
+                  <!--<div class="btn">-->
+                    <!--<Tooltip content="重命名" placement="top">-->
+                      <!--<Icon size="16" type="md-create" @click="rename(item)"/>-->
+                    <!--</Tooltip>-->
+                  <!--</div>-->
+                  <!--<div class="btn-no">-->
+                    <!--<Tooltip content="删除" placement="top">-->
+                      <!--<Icon size="16" type="md-trash" @click="remove(item)"/>-->
+                    <!--</Tooltip>-->
+                  <!--</div>-->
+                <!--</div>-->
+              <!--</div>-->
+            <!--</Card>-->
+          <!--</div>-->
+        <!--</div>-->
+        <!--<Row class="mt_10" justify="end" type="flex">-->
+          <!--<Page-->
+            <!--:current="searchForm.pageNumber"-->
+            <!--:page-size="searchForm.pageSize"-->
+            <!--:page-size-opts="pageSizeOpts"-->
+            <!--:total="total"-->
+            <!--show-elevator-->
+            <!--show-sizer-->
+            <!--show-total-->
+            <!--size="small"-->
+            <!--@on-change="changePage"-->
+            <!--@on-page-size-change="changePageSize"-->
+          <!--&gt;</Page>-->
+        <!--</Row>-->
       </Card>
     </Row>
     <Modal
@@ -342,7 +429,6 @@ export default {
       commonUrl, // 上传文件路径
       config, // api地址
       fileDirectoryId: "",
-
       groupFormValidate: {
         id: [],
         level: 0,
@@ -384,7 +470,7 @@ export default {
         fileKey: "",
         fileType: "",
         pageNumber: 1, // 当前页数
-        pageSize: 10, // 页面大小
+        pageSize: 27, // 页面大小
         sort: "createTime", // 默认排序字段
         order: "desc", // 默认排序方式
         startDate: "", // 起始时间
@@ -731,6 +817,27 @@ export default {
       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: {
@@ -739,11 +846,64 @@ export default {
     },
     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;
     },
     // 编辑分组
@@ -768,6 +928,7 @@ export default {
           const res = await delFileDirectory(this.selectedGroupData.value);
           if (res.success) {
             this.$Message.success("删除成功!");
+            this.getDataList();
             this.getAllList();
           }
         },
@@ -870,7 +1031,7 @@ export default {
           obj.level = item.level;
           obj.expand = false;
           obj.selected = false;
-          obj.contextmenu = true;
+          obj.contextmenu = false;
           obj.parentId = item.parentId;
           obj.children = this.getTree(item.children); // 递归调用
           arr.push(obj);
@@ -881,6 +1042,7 @@ export default {
 
     // 选择分类回调
     handleCateChange(data) {
+      if (data) {
         this.selectedGroupData = data[0];
         let {value, type, level} = data[0];
         this.list.push({value, type, level});
@@ -893,6 +1055,8 @@ export default {
         }
         this.searchForm.userEnums = type;
         this.getDataList();
+        this.$set(this, 'selectedOss', []);
+      }
     },
     /**
      * 选择
@@ -903,7 +1067,7 @@ export default {
     // 更多操作
     handleDropdown(name) {
       if (name === "refresh") {
-        this.getDataList();
+        this.getDataList('refresh');
       } else if (name === "removeAll") {
         this.removeAll();
       }
@@ -981,7 +1145,7 @@ export default {
       this.getDataList();
     },
     // 获取列表数据
-    getDataList() {
+    getDataList(type = null) {
       if (this.showType == "list") {
         this.pageSizeOpts = [10, 20, 50];
       } else {
@@ -993,6 +1157,9 @@ export default {
 
         this.data = res.result.records;
         this.total = res.result.total;
+        if (type === 'refresh') {
+          this.$Message.success('刷新成功！');
+        }
       });
     },
     // 搜索
@@ -1064,16 +1231,15 @@ export default {
         loading: true,
         onOk: () => {
           let ids = "";
-          this.selectList.forEach(function (e) {
+          this.selectList.forEach(function (e) {ids += e.id + ",";});
-            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("批量删除文件成功");
-              this.clearSelectAll();
-              this.getDataList();
             }
           })
             .catch((err) => {
@@ -1157,6 +1323,8 @@ export default {
     if (!this.isComponent) {
       // 是组件的话，初始化不调用接口
       this.init();
+    } else {
+      this.searchForm.pageSize =18; // 页面大小
     }
   },
 };

manager/src/views/sys/setting-manage/setting/BASE_SETTING.vue

@@ -75,7 +75,7 @@
       </div>
     </Form>
     <Modal width="1200px" v-model="picModelFlag">
-      <ossManage @callback="callbackSelected" ref="ossManage" />
+      <ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
     </Modal>
 
   </div>

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"-->
-                <Upload ref="upload"
+                        <!--:action="uploadFileUrl" :before-upload="handleBeforeUploadGoodsPicture"-->
-                        :action="uploadFileUrl" :before-upload="handleBeforeUploadGoodsPicture"
+                        <!--:format="['jpg', 'jpeg', 'png', 'webp']"-->
-                        :format="['jpg', 'jpeg', 'png', 'webp']"
+                        <!--:headers="{ ...accessToken }"-->
-                        :headers="{ ...accessToken }"
+                        <!--:max-size="2048" :on-error="() => { $Spin.hide(); }" :on-exceeded-size="handleMaxSize"-->
-                        :max-size="2048" :on-error="() => { $Spin.hide(); }" :on-exceeded-size="handleMaxSize"
+                        <!--:on-format-error="handleFormatError" :on-progress="() => { $Spin.show(); }"-->
-                        :on-format-error="handleFormatError" :on-progress="() => { $Spin.show(); }"
+                        <!--:on-success="handleSuccessGoodsPicture" :show-upload-list="false" multiple-->
-                        :on-success="handleSuccessGoodsPicture" :show-upload-list="false" multiple
+                        <!--style="margin-left: 10px"-->
-                        style="margin-left: 10px"
+                        <!--type="drag">-->
-                        type="drag">
+                  <!--<div style="width: 148px; height: 148px; line-height: 148px">-->
-                  <div style="width: 148px; height: 148px; line-height: 148px">
+                    <!--<Icon size="20" type="md-add"></Icon>-->
-                    <Icon size="20" type="md-add"></Icon>
+                  <!--</div>-->
+                <!--</Upload>-->
               </div>
-                </Upload>
+              <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') {

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>

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: {

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",

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",

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"],

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"],

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>

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:{

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: {

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%;
+  }
+}
+

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"; // 选择链接的类型