cloud-web-corejs 1.0.258 → 1.0.260

package/src/components/VabUpload/index.vue

@@ -1,231 +1,242 @@
-<template>
-  <div>
-    <el-dialog
-      :title="title"
-      :visible.sync="dialogFormVisible"
-      v-if="dialogFormVisible"
-      :close-on-click-modal="false"
-      width="1150px"
-      :custom-class="'dialog-style '+(option.otherParams && option.otherParams.uploadDialogCustomClass?option.otherParams.uploadDialogCustomClass:'')"
-      :append-to-body="true"
-      :destroy-on-close="true"
-      @close="handleClose"
-      v-el-drag-dialog
-    >
-      <div class="upload-box" style="margin-left:-20px;margin-right:-20px;">
-        <div class="upload-b_left" @click="choosePasteArea" :class="{on:pasteAreaStatus}"
-             v-show="option.hidePasteArea!==true">
-          <div class="t"><i
-            class="el-icon-warning-outline"></i>{{ $t2('选择此处，可粘贴文件', 'components.VabUpload.tip') }}（Ctrl+V）
-          </div>
-          <ul class="el-upload-list el-upload-list--picture">
-            <div class="nodata" v-if="pasteList.length == 0">
-              <img src="~@/resources/images/nodata2.png"/>
-            </div>
-            <li v-for="(pasteFile,index) in pasteList" :key="index" class="el-upload-list__item is-success">
-              <div>
-                <img
-                  :src="getShowImage(pasteFile)"
-                  class="el-upload-list__item-thumbnail"
-                />
-                <div class="el-upload-list__item-name">
-                  <!-- <p class="flex">
-                    <el-input size="mini" v-model="pasteFile.fileName" @change="changeFileName(pasteFile)"></el-input>
-                  </p> -->
-                  <div class="txt-box">
-                    <div class="tb-left"></div>
-                    <div class="tb-mid name">
-                      <div class="txt">
-                        <span>{{ pasteFile.fileName }}</span>
-                        <span><i class="el-icon-edit" @click="openFileNameDialog(pasteFile,index)"></i></span>
-                      </div>
-                    </div>
-                    <div class="format"><i class="el-icon-edit" @click="openFileNameDialog(pasteFile,index)"></i></div>
-                  </div>
-
-                  <!--                  <p>admin</p>-->
-                  <p>{{ $t2('格式', 'components.VabUpload.fileType') }}：{{ pasteFile.fileSuffix }}</p>
-                  <p>{{ $t2('大小', 'components.VabUpload.fileSize') }}：{{ formatFileSize(pasteFile.size) }}</p>
-                </div>
-                <div class="el-icon-close" @click="deletePasteFile(index)">
-                  <i class="el-tooltip iconfont iconshanchu"></i>
-                </div>
-              </div>
-            </li>
-          </ul>
-          <el-button type="primary" @click="confirmPasteFile" class="button-sty" v-if="pasteList.length>0">
-            <i class="el-icon-check el-icon"></i>
-            {{ $t2('确定文件', 'components.VabUpload.confirmFile') }}
-          </el-button>
-        </div>
-        <div class="upload-b_right">
-          <div class="tips">
-            {{
-              $t2('注意：当前所有文件上传完，才允许确定操作，单个文件上传大小，请尽量小于100MB。', 'components.VabUpload.tip2')
-            }}
-            <div class="upload-count fr">
-              <div>{{ $t2('总数', 'components.VabUpload.total') }}：<span>{{ totalQuantity }}</span></div>
-              <div>{{ $t2('成功', 'components.VabUpload.success') }}：<span>{{ successQuantity }}</span></div>
-              <div>{{ $t2('失败', 'components.VabUpload.fail') }}：<span
-                :class="{error : errorQuantity > 0}">{{ errorQuantity }}</span></div>
-            </div>
-          </div>
-          <el-upload
-            ref="upload"
-            :action="action"
-            :http-request="changeFile"
-            :auto-upload="auto"
-            :close-on-click-modal="false"
-            :data="data"
-            :file-list="fileList"
-            :headers="headers"
-            :limit="limit"
-            :multiple="isMulti"
-            :name="name"
-            :on-change="handleChange"
-            :on-error="handleError"
-            :on-exceed="handleExceed"
-            :on-preview="handlePreview"
-            :on-progress="handleProgress"
-            :on-remove="handleRemove"
-            :on-success="handleSuccess"
-            :before-upload="handleBeforeUpload"
-            :accept="accept"
-            class="upload-demo"
-            list-type="picture"
-          >
-            <div class="avatar-uploader hidden" slot="trigger" v-if="showLocalUploadBtn" ref="uploadBtn" v-show="false">
-              <i
-                class="el-icon-plus avatar-uploader-icon"></i></div>
-            <div slot="file" slot-scope="{ file }">
-              <img :src="getShowImage(file)" class="el-upload-list__item-thumbnail"/>
-              <div class="el-upload-list__item-name">
-                <p>{{ file.name }}</p>
-                <p>{{ formatFileSize(file.size) }}</p>
-                <p class="f-red" v-if="file.status=='fail'">{{ file.failMsg }}</p>
-              </div>
-              <el-progress :percentage="file.percentage"
-                           v-if="file.status == 'uploading' || file.status == 'preUpload'"></el-progress>
-              <div class="el-upload-list__item-status-label error" v-else-if="file.status == 'fail'"><i
-                class="el-icon-upload-success iconfont icon-gantanhao"></i></div>
-              <div class="el-upload-list__item-status-label" v-else-if="file.percentage==100"><i
-                class="el-icon-upload-success el-icon-check"></i></div>
-              <div class="el-upload-list__item-status-label load" v-else-if="file.status == 'ready'"><i
-                class="el-icon-loading"></i></div>
-
-              <div class="el-icon-close" @click="removeFile(file)">
-                <el-tooltip :enterable="false" effect="dark" :content="$t2('删除', 'components.VabUpload.delete')"
-                            placement="top" popper-class="tooltip-skin">
-                  <i
-                    class="iconfont iconshanchu"></i></el-tooltip>
-              </div>
-            </div>
-            <el-dialog :visible.sync="dialogVisible" append-to-body
-                       :title="$t2('查看大图', 'components.VabUpload.checkBigImgage')">
-              <div><img :src="dialogImageUrl" alt="" width="100%"/></div>
-            </el-dialog>
-          </el-upload>
-        </div>
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <div class="fl" style="margin-left:291px;">
-          <el-button type="warning" class="button-sty" slot="trigger" v-if="showLocalUploadBtn"
-                     @click="$refs.uploadBtn.click()">
-          	<i class="el-icon-plus"></i>
-          	{{ $t2('从本地选择', 'components.VabUpload.localPick') }}
-          </el-button>
-          <el-button type="success" class="button-sty" @click="showPrivateProfileDialog= true"
-                     v-if="showPrivateUploadBtn">
-          	<i class="iconfont icon-wendangshangchuan"></i>
-          	{{ $t2('从个人文档工作区选择', 'components.VabUpload.privateDocumentPick') }}
-          </el-button>
-        </div>
-
-				<el-button type="primary" plain class="button-sty" @click="handleClose">
-					<i class="el-icon-close el-icon"></i>
-					{{ $t2('取 消', 'system.button.cancel2') }}
-				</el-button>
-        <el-button type="primary" plain class="button-sty" @click="submitUpload" v-if="!auto && hasReadyFile">
-        	<i class="el-icon el-icon-video-play"></i>
-        	{{ $t2('确认上传', 'components.VabUpload.comfirmUpload') }}
-        </el-button>
-				<el-button type="primary" @click="submitImage" class="button-sty" v-if="!uploading">
-					<i class="el-icon-check el-icon"></i>
-					{{ $t2('确 定', 'system.button.confirm2') }}
-				</el-button>
-        <!-- <el-button type="primary" plain class="button-sty" @click="handleBtn" v-if="uploading">
-        	<i class="el-icon el-icon-video-play" v-if="btn==true"></i>
-          <i class="el-icon el-icon-video-pause" v-if="btn==false"></i>
-        	{{btn|btnText}}
-        </el-button> -->
-			</span>
-    </el-dialog>
-    <privateProfileDialog v-if="showPrivateProfileDialog" :visiable.sync="showPrivateProfileDialog"
-                          @confirm="confirmPrivateProfileDialog"></privateProfileDialog>
-    <el-dialog
-      :title="$t2('文件名修改', 'components.VabUpload.modifyFileName')"
-      :append-to-body="true"
-      :modal-append-to-body="true"
-      :close-on-click-modal="false"
-      v-if="showFileNameDialog"
-      :visible.sync="showFileNameDialog"
-      :modal="false"
-      custom-class="dialog-style list-dialog dialog-checkbox pd_8"
-      width="400px"
-      v-el-drag-dialog
-      v-el-dialog-center
-    >
-      <div class="cont">
-        <el-form ref="editForm" label-width="110px" class="adSearchForm" style="width: 362px;height: auto;">
-          <el-form-item :label="$t2('文件名称', 'components.VabUpload.fileName')">
-            <el-input v-model="editFileName" clearable class="all-width"/>
-          </el-form-item>
-          <el-form-item :label="$t2('文件格式', 'components.VabUpload.fileCategory')">
-            {{ editFileSuffix }}
-          </el-form-item>
-        </el-form>
-      </div>
-      <span slot="footer" class="dialog-footer">
-      <el-button type="primary" plain class="button-sty" @click="showFileNameDialog=false">
-        <i class="el-icon-close el-icon"></i>
-        {{ $t2('取 消', 'system.button.cancel2') }}
-      </el-button>
-      <el-button type="primary" @click="confirmFileNameDialog" class="button-sty">
-        <i class="el-icon-check el-icon"></i>
-        {{ $t2('确 定', 'system.button.confirm2') }}
-      </el-button>
-    </span>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import {mixins} from './mixins';
-
-export default {
-  mixins: [mixins],
-  components: {
-    privateProfileDialog: () => import('./privateProfileDialog')
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.pup-annex-box {
-  height: 355px;
-  background: #fff;
-}
-
-::v-deep .dialog-style {
-  margin-top: 7vh !important;
-
-  .dialog-footer {
-    padding-left: 6px;
-    display: block;
-  }
-
-  .upload-box .upload-demo .el-upload {
-    margin-top: 0 !important;
-  }
-}
-</style>
+<template>
+  <div>
+    <el-dialog
+      :title="title"
+      :visible.sync="dialogFormVisible"
+      v-if="dialogFormVisible"
+      :close-on-click-modal="false"
+      width="1150px"
+      :custom-class="'dialog-style '+(option.otherParams && option.otherParams.uploadDialogCustomClass?option.otherParams.uploadDialogCustomClass:'')"
+      :append-to-body="true"
+      :destroy-on-close="true"
+      @close="handleClose"
+      v-el-drag-dialog
+    >
+      <div class="upload-box" style="margin-left:-20px;margin-right:-20px;">
+        <div class="upload-b_left" @click="choosePasteArea" :class="{on:pasteAreaStatus}"
+             v-show="option.hidePasteArea!==true">
+          <div class="t"><i
+            class="el-icon-warning-outline"></i>{{ $t2('选择此处，可粘贴文件', 'components.VabUpload.tip') }}（Ctrl+V）
+          </div>
+          <ul class="el-upload-list el-upload-list--picture">
+            <div class="nodata" v-if="pasteList.length == 0">
+              <img src="~@/resources/images/nodata2.png"/>
+            </div>
+            <li v-for="(pasteFile,index) in pasteList" :key="index" class="el-upload-list__item is-success">
+              <div>
+                <img
+                  :src="getShowImage(pasteFile)"
+                  class="el-upload-list__item-thumbnail"
+                />
+                <div class="el-upload-list__item-name">
+                  <!-- <p class="flex">
+                    <el-input size="mini" v-model="pasteFile.fileName" @change="changeFileName(pasteFile)"></el-input>
+                  </p> -->
+                  <div class="txt-box">
+                    <div class="tb-left"></div>
+                    <div class="tb-mid name">
+                      <div class="txt">
+                        <span>{{ pasteFile.fileName }}</span>
+                        <span><i class="el-icon-edit" @click="openFileNameDialog(pasteFile,index)"></i></span>
+                      </div>
+                    </div>
+                    <div class="format"><i class="el-icon-edit" @click="openFileNameDialog(pasteFile,index)"></i></div>
+                  </div>
+
+                  <!--                  <p>admin</p>-->
+                  <p>{{ $t2('格式', 'components.VabUpload.fileType') }}：{{ pasteFile.fileSuffix }}</p>
+                  <p>{{ $t2('大小', 'components.VabUpload.fileSize') }}：{{ formatFileSize(pasteFile.size) }}</p>
+                </div>
+                <div class="el-icon-close" @click="deletePasteFile(index)">
+                  <i class="el-tooltip iconfont iconshanchu"></i>
+                </div>
+              </div>
+            </li>
+          </ul>
+          <el-button type="primary" @click="confirmPasteFile" class="button-sty" v-if="pasteList.length>0">
+            <i class="el-icon-check el-icon"></i>
+            {{ $t2('确定文件', 'components.VabUpload.confirmFile') }}
+          </el-button>
+        </div>
+        <div class="upload-b_right">
+          <div class="tips">
+            {{
+              $t2('注意：当前所有文件上传完，才允许确定操作，单个文件上传大小，请尽量小于100MB。', 'components.VabUpload.tip2')
+            }}
+            <template v-if="allowedFileTypesText">{{
+                $t2('仅支持上传以下格式：', 'components.VabUpload.fileTypesTip')
+              }}{{ allowedFileTypesText }}</template>
+            <div class="upload-count fr">
+              <div>{{ $t2('总数', 'components.VabUpload.total') }}：<span>{{ totalQuantity }}</span></div>
+              <div>{{ $t2('成功', 'components.VabUpload.success') }}：<span>{{ successQuantity }}</span></div>
+              <div>{{ $t2('失败', 'components.VabUpload.fail') }}：<span
+                :class="{error : errorQuantity > 0}">{{ errorQuantity }}</span></div>
+            </div>
+          </div>
+          <el-upload
+            ref="upload"
+            :action="action"
+            :http-request="changeFile"
+            :auto-upload="auto"
+            :close-on-click-modal="false"
+            :data="data"
+            :file-list="fileList"
+            :headers="headers"
+            :limit="limit"
+            :multiple="isMulti"
+            :name="name"
+            :on-change="handleChange"
+            :on-error="handleError"
+            :on-exceed="handleExceed"
+            :on-preview="handlePreview"
+            :on-progress="handleProgress"
+            :on-remove="handleRemove"
+            :on-success="handleSuccess"
+            :before-upload="handleBeforeUpload"
+            :accept="uploadAccept"
+            class="upload-demo"
+            list-type="picture"
+          >
+            <div class="avatar-uploader hidden" slot="trigger" v-if="showLocalUploadBtn" ref="uploadBtn" v-show="false">
+              <i
+                class="el-icon-plus avatar-uploader-icon"></i></div>
+            <div slot="file" slot-scope="{ file }">
+              <img :src="getShowImage(file)" class="el-upload-list__item-thumbnail"/>
+              <div class="el-upload-list__item-name">
+                <p>{{ file.name }}</p>
+                <p>{{ formatFileSize(file.size) }}</p>
+                <p class="f-red" v-if="file.status=='fail'">{{ file.failMsg }}</p>
+              </div>
+              <el-progress :percentage="file.percentage"
+                           v-if="file.status == 'uploading' || file.status == 'preUpload'"></el-progress>
+              <div class="el-upload-list__item-status-label error" v-else-if="file.status == 'fail'"><i
+                class="el-icon-upload-success iconfont icon-gantanhao"></i></div>
+              <div class="el-upload-list__item-status-label" v-else-if="file.percentage==100"><i
+                class="el-icon-upload-success el-icon-check"></i></div>
+              <div class="el-upload-list__item-status-label load" v-else-if="file.status == 'ready'"><i
+                class="el-icon-loading"></i></div>
+
+              <div class="el-icon-close" @click="removeFile(file)">
+                <el-tooltip :enterable="false" effect="dark" :content="$t2('删除', 'components.VabUpload.delete')"
+                            placement="top" popper-class="tooltip-skin">
+                  <i
+                    class="iconfont iconshanchu"></i></el-tooltip>
+              </div>
+            </div>
+            <el-dialog :visible.sync="dialogVisible" append-to-body
+                       :title="$t2('查看大图', 'components.VabUpload.checkBigImgage')">
+              <div><img :src="dialogImageUrl" alt="" width="100%"/></div>
+            </el-dialog>
+          </el-upload>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <div class="fl" :class="{showPasteArea:option.hidePasteArea!==true}">
+          <el-button type="warning" class="button-sty" slot="trigger" v-if="showLocalUploadBtn"
+                     @click="$refs.uploadBtn.click()">
+          	<i class="el-icon-plus"></i>
+          	{{ $t2('从本地选择', 'components.VabUpload.localPick') }}
+          </el-button>
+          <el-button type="success" class="button-sty" @click="showPrivateProfileDialog= true"
+                     v-if="showPrivateUploadBtn">
+          	<i class="iconfont icon-wendangshangchuan"></i>
+          	{{ $t2('从个人文档工作区选择', 'components.VabUpload.privateDocumentPick') }}
+          </el-button>
+          <el-button type="success" class="button-sty" @click="openFileLibraryDialog"
+                     v-if="showFileLibraryButton && !!fileLibraryName">
+          	<i class="iconfont icon-wendangshangchuan"></i>
+          	{{ fileLibraryName }}
+          </el-button>
+        </div>
+
+				<el-button type="primary" plain class="button-sty" @click="handleClose">
+					<i class="el-icon-close el-icon"></i>
+					{{ $t2('取 消', 'system.button.cancel2') }}
+				</el-button>
+        <el-button type="primary" plain class="button-sty" @click="submitUpload" v-if="!auto && hasReadyFile">
+        	<i class="el-icon el-icon-video-play"></i>
+        	{{ $t2('确认上传', 'components.VabUpload.comfirmUpload') }}
+        </el-button>
+				<el-button type="primary" @click="submitImage" class="button-sty" v-if="!uploading">
+					<i class="el-icon-check el-icon"></i>
+					{{ $t2('确 定', 'system.button.confirm2') }}
+				</el-button>
+        <!-- <el-button type="primary" plain class="button-sty" @click="handleBtn" v-if="uploading">
+        	<i class="el-icon el-icon-video-play" v-if="btn==true"></i>
+          <i class="el-icon el-icon-video-pause" v-if="btn==false"></i>
+        	{{btn|btnText}}
+        </el-button> -->
+			</span>
+    </el-dialog>
+    <privateProfileDialog v-if="showPrivateProfileDialog" :visiable.sync="showPrivateProfileDialog"
+                          @confirm="confirmPrivateProfileDialog"></privateProfileDialog>
+    <el-dialog
+      :title="$t2('文件名修改', 'components.VabUpload.modifyFileName')"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+      :close-on-click-modal="false"
+      v-if="showFileNameDialog"
+      :visible.sync="showFileNameDialog"
+      :modal="false"
+      custom-class="dialog-style list-dialog dialog-checkbox pd_8"
+      width="400px"
+      v-el-drag-dialog
+      v-el-dialog-center
+    >
+      <div class="cont">
+        <el-form ref="editForm" label-width="110px" class="adSearchForm" style="width: 362px;height: auto;">
+          <el-form-item :label="$t2('文件名称', 'components.VabUpload.fileName')">
+            <el-input v-model="editFileName" clearable class="all-width"/>
+          </el-form-item>
+          <el-form-item :label="$t2('文件格式', 'components.VabUpload.fileCategory')">
+            {{ editFileSuffix }}
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+      <el-button type="primary" plain class="button-sty" @click="showFileNameDialog=false">
+        <i class="el-icon-close el-icon"></i>
+        {{ $t2('取 消', 'system.button.cancel2') }}
+      </el-button>
+      <el-button type="primary" @click="confirmFileNameDialog" class="button-sty">
+        <i class="el-icon-check el-icon"></i>
+        {{ $t2('确 定', 'system.button.confirm2') }}
+      </el-button>
+    </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {mixins} from './mixins';
+
+export default {
+  mixins: [mixins],
+  components: {
+    privateProfileDialog: () => import('./privateProfileDialog')
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.pup-annex-box {
+  height: 355px;
+  background: #fff;
+}
+
+::v-deep .dialog-style {
+  margin-top: 7vh !important;
+
+  .dialog-footer {
+    padding-left: 6px;
+    display: block;
+  }
+
+  .upload-box .upload-demo .el-upload {
+    margin-top: 0 !important;
+  }
+}
+.showPasteArea {
+  margin-left:291px
+}
+</style>