cloud-web-corejs 1.0.54-dev.40 → 1.0.54-dev.400

package/src/components/obsUpload/index.js

@@ -0,0 +1,34 @@
+const moudule = {};
+import vue from "vue";
+import objView from './index.vue';
+
+let configUtil = {
+  vue,
+  objView
+}
+
+const objInstance = configUtil.vue.extend(configUtil.objView);
+const initInstance = (containter) => {
+  // 实例化vue实例
+  let currentInstance = new objInstance({i18n: window.$vueRoot._i18n});
+  let dom = currentInstance.$mount().$el;
+  containter.appendChild(dom);
+  return currentInstance;
+};
+
+export function openObsUploadDialog(options) {
+  let containter = document.body;
+  let currentInstance = initInstance(containter);
+  Object.assign(currentInstance, options);
+  return currentInstance.handleShow(options);
+};
+
+export function uploadOBS(options) {
+  let containter = document.body;
+  let currentInstance = initInstance(containter);
+  Object.assign(currentInstance, options);
+  return currentInstance.singerUpload(options);
+};
+
+
+

package/src/components/obsUpload/index.vue

@@ -0,0 +1,231 @@
+<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('@base/components/VabUpload/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>