cloud-web-corejs 1.0.54-dev.57 → 1.0.54-dev.571

package/src/components/luckysheet/view.vue

@@ -0,0 +1,210 @@
+<template>
+  <div style="height: 100%">
+    <div
+      :id="containerId"
+      :key="containerId"
+      style="
+        margin: 0px;
+        padding: 0px;
+        height: 100%;
+        width: 100%;
+        left: 0px;
+        top: 30px;
+        bottom: 0px;
+      "
+    ></div>
+    <div
+      v-show="isMaskShow"
+      style="
+        position: absolute;
+        z-index: 1000000;
+        left: 0px;
+        top: 0px;
+        bottom: 0px;
+        right: 0px;
+        background: rgba(255, 255, 255, 0.8);
+        text-align: center;
+        font-size: 40px;
+        align-items: center;
+        justify-content: center;
+        display: flex;
+      "
+    >
+      Downloading
+    </div>
+  </div>
+</template>
+
+<script>
+import LuckyExcel from "luckyexcel";
+//导入库export.js 这个文件是es6的，不能在普通的HTML文件直接引入js文件（虽然都是js文件，但是有区别，具体请百度es6与es5）！需要把es6转es5才可以直接引入使用！
+import { exportExcel, generateExcelFile } from "./export";
+import { saveAs } from "file-saver";
+
+export default {
+  name: "luckysheet",
+  props: {
+    options: {
+      type: Object,
+      default: () => {},
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      selected: "",
+      isMaskShow: false,
+      // 生成随机ID，避免多个组件实例之间的ID冲突
+      containerId: "luckysheet-" + Math.random().toString(36).substr(2, 9),
+    };
+  },
+  beforeDestroy() {
+    if (luckysheet) {
+      this.exitEditMode();
+      luckysheet.destroy();
+    }
+  },
+  mounted() {
+    // In some cases, you need to use $nextTick
+    // this.$nextTick(() => {
+    let config = this.options.config || {};
+    let data = this.data.length > 0 ? this.data : null;
+    if (!data) {
+      data = [
+        {
+          name: "Sheet1",
+          color: "",
+          status: "1",
+          order: "0",
+          data: [],
+          config: {},
+          index: 0,
+        },
+      ];
+    }
+    luckysheet.create({
+      container: this.containerId,
+      lang: "zh",
+      showinfobar: false,
+      data: data,
+      ...config,
+    });
+
+    // });
+  },
+  methods: {
+    generateExcelFile(callback) {
+      // 检查luckysheet是否存在
+      if (!luckysheet) {
+        console.error("luckysheet未初始化");
+        return;
+      }
+
+      try {
+        // 获取luckysheet数据
+        if (luckysheet.getLuckysheetfile) {
+          const excelData = luckysheet.getLuckysheetfile();
+          console.log("获取Excel数据成功", excelData);
+
+          // 生成Excel文件对象
+          generateExcelFile(excelData, "测试文件")
+            .then((file) => {
+              callback && callback(file);
+              // console.log("生成Excel文件对象成功", file);
+              // console.log("文件名:", file.name);
+              // console.log("文件大小:", file.size);
+              // console.log("文件类型:", file.type);
+
+              // 这里可以使用file对象进行上传等操作
+              // 例如：uploadFile(file);
+              // const fileName = `电子表格_${new Date().getTime()}.xlsx`;
+              // saveAs(file, fileName);
+            })
+            .catch((error) => {
+              console.error("生成Excel文件对象失败:", error);
+            });
+        } else {
+          console.error("luckysheet不支持getLuckysheetfile方法");
+        }
+      } catch (error) {
+        console.error("生成Excel文件对象失败:", error);
+      }
+    },
+    uploadExcel(evt) {
+      const files = evt.target.files;
+      if (files == null || files.length == 0) {
+        alert("No files wait for import");
+        return;
+      }
+
+      let name = files[0].name;
+      let suffixArr = name.split("."),
+        suffix = suffixArr[suffixArr.length - 1];
+      if (suffix != "xlsx") {
+        alert("Currently only supports the import of xlsx files");
+        return;
+      }
+      const self = this;
+      LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {
+        if (exportJson.sheets == null || exportJson.sheets.length == 0) {
+          alert(
+            "Failed to read the content of the excel file, currently does not support xls files!"
+          );
+          return;
+        }
+        luckysheet.destroy();
+
+        luckysheet.create({
+          container: self.containerId, //使用当前组件的容器ID
+          showinfobar: false,
+          data: exportJson.sheets,
+          title: exportJson.info.name,
+          userInfo: exportJson.info.name.creator,
+        });
+      });
+    },
+    exitEditMode() {
+      luckysheet.exitEditMode();
+    },
+    getValue() {
+      luckysheet.exitEditMode();
+      let sheetData = luckysheet.getluckysheetfile();
+      return sheetData;
+    },
+    downloadExcel() {
+      exportExcel(luckysheet.getAllSheets(), "下载");
+    },
+    getJson() {
+      luckysheet.exitEditMode();
+      let json = luckysheet.toJson();
+      return json;
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
+<style>
+#luckysheet-icon-morebtn-div {
+  z-index: 10030 !important;
+}
+</style>

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>