cloud-web-corejs 1.1.0-dev.6 → 1.1.0-dev.61

package/src/components/luckysheet/view.vue

@@ -1,210 +1,239 @@
-<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>
+<template>
+  <div style="height: 100%">
+    <div v-if="resourceError" role="alert">
+      {{ resourceError }}
+      <button type="button" @click="initialize">重试</button>
+    </div>
+    <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";
+import { spreadsheetResourcePath } from "../../utils/featureResources";
+import { loadLuckysheet } from "./loadResources";
+
+export default {
+  name: "LuckysheetView",
+  props: {
+    options: {
+      type: Object,
+      default: () => ({}),
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      selected: "",
+      isMaskShow: false,
+      resourceError: "",
+      sheetApi: null,
+      ownerToken: null,
+      destroyed: false,
+      // 生成随机ID，避免多个组件实例之间的ID冲突
+      containerId: "luckysheet-" + Math.random().toString(36).substr(2, 9),
+    };
+  },
+  beforeDestroy() {
+    this.destroyed = true;
+    if (this.sheetApi && window.__CORE_LUCKYSHEET_OWNER__ === this.ownerToken) {
+      try {
+        this.sheetApi.exitEditMode();
+        this.sheetApi.destroy();
+      } finally {
+        window.__CORE_LUCKYSHEET_OWNER__ = null;
+      }
+    }
+    this.sheetApi = null;
+  },
+  mounted() {
+    this.initialize();
+  },
+  methods: {
+    async initialize() {
+      if (this.sheetApi || this.destroyed) return;
+      this.resourceError = "";
+      let api;
+      try {
+        const base = spreadsheetResourcePath();
+        api = await loadLuckysheet(base);
+        if (this.destroyed) return;
+        if (window.__CORE_LUCKYSHEET_OWNER__) {
+          throw new Error("Luckysheet 2.1.13 是全局单例，同一页面只能挂载一个电子表格组件");
+        }
+      } catch (error) {
+        this.resourceError = error.message;
+        this.$emit("resource-error", error);
+        return;
+      }
+      this.ownerToken = `${this.containerId}-${Date.now()}`;
+      window.__CORE_LUCKYSHEET_OWNER__ = this.ownerToken;
+      this.sheetApi = api;
+      const 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 }];
+      }
+      try {
+        api.create({ container: this.containerId, lang: "zh", showinfobar: false, data, ...config });
+      } catch (error) {
+        this.sheetApi = null;
+        window.__CORE_LUCKYSHEET_OWNER__ = null;
+        this.resourceError = `Luckysheet 初始化失败：${error.message}`;
+        this.$emit("resource-error", error);
+      }
+    },
+    generateExcelFile(callback) {
+      // 检查luckysheet是否存在
+      const sheet = this.sheetApi;
+      if (!sheet) {
+        console.error("luckysheet未初始化");
+        return;
+      }
+
+      try {
+        // 获取luckysheet数据
+        const getter = sheet.getLuckysheetfile || sheet.getluckysheetfile;
+        if (getter) {
+          const excelData = getter.call(sheet);
+          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;
+        }
+        if (!self.sheetApi) return;
+        self.sheetApi.destroy();
+
+        self.sheetApi.create({
+          container: self.containerId, //使用当前组件的容器ID
+          showinfobar: false,
+          data: exportJson.sheets,
+          title: exportJson.info.name,
+          userInfo: exportJson.info.name.creator,
+        });
+      });
+    },
+    exitEditMode() {
+      if (this.sheetApi) this.sheetApi.exitEditMode();
+    },
+    getValue() {
+      if (!this.sheetApi) return [];
+      this.sheetApi.exitEditMode();
+      let sheetData = this.sheetApi.getluckysheetfile();
+      return sheetData;
+    },
+    downloadExcel() {
+      if (this.sheetApi) exportExcel(this.sheetApi.getAllSheets(), "下载");
+    },
+    getJson() {
+      if (!this.sheetApi) return null;
+      this.sheetApi.exitEditMode();
+      let json = this.sheetApi.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/mobile/buttonGroup/index.vue

@@ -34,5 +34,5 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-@import "~@/resources/css/h5.scss";
+@import "~@base/core-resources/css/h5.scss";
 </style>

package/src/components/mobile/wf/addTaskUserdialog.vue

@@ -1,80 +1,100 @@
-<template>
-  <div class="pop-box" :style="'z-index:'+zIndex">
-    <div>
-      <div class="header-box">
-        <i class="back el-icon-close" @click="dialogClose"></i>
-        选择用户
-      </div>
-      <div class="search-H5box">
-        <div class="txt">
-          <el-input placeholder="姓名" suffix-icon="el-icon-search" v-model="formData.nickName"
-                    @keyup.enter.native="searchEvent">
-            <el-button slot="append" @click="searchEvent"> 搜索</el-button>
-          </el-input>
-        </div>
-        <div class="icon-screen" @click="popStatus = true">
-          <i class="iconfont icon-shaixuan1"></i>
-          <span>高级筛选</span>
-        </div>
-      </div>
-      <div class="flex">
-        <div class="checkbox-all_list" @scroll="handleScroll">
-          <div v-for="(row,rowIndex) in page.records" :key="rowIndex" class="order-item"
-               :class="{on:checkList.includes(row.id)}" @click="changeCheck(row,rowIndex)">
-            <div class="is-checked" v-if="checkList.includes(row.id)"><i class="el-icon-check"></i>已选择</div>
-            <div class="t1">
-              <i class="icon"></i>
-              <span>{{ row.nickName }}</span>
-            </div>
-            <div class="t2">
-              <p>登录名：{{ row.loginAccount }}</p>
-              <p>角色：{{ row.roleNames }}</p>
-              <p>机构：{{ row.saleOrgNames }}</p>
-              <p>邮编：{{ row.zipCode }}</p>
-              <p>地址：{{ row.address }}</p>
-              <p>性别：{{ genderMap[row.gender] }}</p>
-              <p>所属组织：{{ row.companyNames }}</p>
-            </div>
-          </div>
-        </div>
-        <div class="checkbox-all">
-          <div class='ca-t'>已选择用户：</div>
-          <div class="ca-c">
-          <span v-for="(checkRow, rowIndex) in checkRows" :key="rowIndex">{{ checkRow.nickName }}<i
-            class="el-icon-delete" @click="changeCheck(checkRow)"></i></span>
-          </div>
-        </div>
-      </div>
-      <div class="fixed-bottom-btns">
-        <el-button type="primary" plain class="btn" @click="dialogClose" icon="el-icon-close">取 消
-        </el-button>
-        <el-button type="primary" class="btn" @click="dialogPrimary" icon="el-icon-check">确 定</el-button>
-      </div>
-      <h5SearchDialog v-if="popStatus" :visiable.sync="popStatus" @searchEvent="confirmSearchDialog"
-                      @resetEvent="resetSearchDialog">
-        <el-form label-position="top">
-          <el-form-item label="登录名">
-            <el-input v-model="formData.loginAccount" class="txt" clearable/>
-          </el-form-item>
-          <el-form-item label="姓名">
-            <el-input v-model="formData.nickName" class="txt" clearable/>
-          </el-form-item>
-          <el-form-item label="手机号">
-            <el-input v-model="formData.mobile" class="txt" clearable/>
-          </el-form-item>
-        </el-form>
-      </h5SearchDialog>
-    </div>
-  </div>
-</template>
-
-<script>
-import selectDialogMixins from '../../../mixins/mobile/selectDialog/index.js';
-import mixin from './mixins/addTaskUserdialogMixin';
-
-export default {
-  name: 'userDialog',
-  props: ['visiable', 'multi', 'rows', 'param'],
-  mixins: [selectDialogMixins, mixin]
-};
-</script>
+<template>
+  <!-- 外壳改成 el-dialog + append-to-body，说明见 urgingDialog.vue。
+       里面的 h5SearchDialog（.pop-screen-box）跟着一起进了 body：它自己是
+       position:fixed + z-index:99，在 wrapper 这个层叠上下文内部照样盖住本弹层，
+       样式同样要走顶层选择器，见 xform/styles/h5.scss。 -->
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :append-to-body="true"
+    :modal="false"
+    :show-close="false"
+    :close-on-click-modal="false"
+    :destroy-on-close="true"
+    custom-class="h5-pop-dialog"
+    width="100%"
+    top="0px"
+    @close="dialogClose"
+  >
+    <div>
+      <div class="header-box">
+        <i class="back el-icon-close" @click="dialogClose"></i>
+        选择用户
+      </div>
+      <div class="search-H5box">
+        <div class="txt">
+          <el-input placeholder="姓名" suffix-icon="el-icon-search" v-model="formData.nickName"
+                    @keyup.enter.native="searchEvent">
+            <el-button slot="append" @click="searchEvent"> 搜索</el-button>
+          </el-input>
+        </div>
+        <div class="icon-screen" @click="popStatus = true">
+          <i class="iconfont icon-shaixuan1"></i>
+          <span>高级筛选</span>
+        </div>
+      </div>
+      <div class="flex">
+        <div class="checkbox-all_list" @scroll="handleScroll">
+          <div v-for="(row,rowIndex) in page.records" :key="rowIndex" class="order-item"
+               :class="{on:checkList.includes(row.id)}" @click="changeCheck(row,rowIndex)">
+            <div class="is-checked" v-if="checkList.includes(row.id)"><i class="el-icon-check"></i>已选择</div>
+            <div class="t1">
+              <i class="icon"></i>
+              <span>{{ row.nickName }}</span>
+            </div>
+            <div class="t2">
+              <p>登录名：{{ row.loginAccount }}</p>
+              <p>角色：{{ row.roleNames }}</p>
+              <p>机构：{{ row.saleOrgNames }}</p>
+              <p>邮编：{{ row.zipCode }}</p>
+              <p>地址：{{ row.address }}</p>
+              <p>性别：{{ genderMap[row.gender] }}</p>
+              <p>所属组织：{{ row.companyNames }}</p>
+            </div>
+          </div>
+        </div>
+        <div class="checkbox-all">
+          <div class='ca-t'>已选择用户：</div>
+          <div class="ca-c">
+          <span v-for="(checkRow, rowIndex) in checkRows" :key="rowIndex">{{ checkRow.nickName }}<i
+            class="el-icon-delete" @click="changeCheck(checkRow)"></i></span>
+          </div>
+        </div>
+      </div>
+      <div class="fixed-bottom-btns">
+        <el-button type="primary" plain class="btn" @click="dialogClose" icon="el-icon-close">取 消
+        </el-button>
+        <el-button type="primary" class="btn" @click="dialogPrimary" icon="el-icon-check">确 定</el-button>
+      </div>
+      <h5SearchDialog v-if="popStatus" :visiable.sync="popStatus" @searchEvent="confirmSearchDialog"
+                      @resetEvent="resetSearchDialog">
+        <el-form label-position="top">
+          <el-form-item label="登录名">
+            <el-input v-model="formData.loginAccount" class="txt" clearable/>
+          </el-form-item>
+          <el-form-item label="姓名">
+            <el-input v-model="formData.nickName" class="txt" clearable/>
+          </el-form-item>
+          <el-form-item label="手机号">
+            <el-input v-model="formData.mobile" class="txt" clearable/>
+          </el-form-item>
+        </el-form>
+      </h5SearchDialog>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import selectDialogMixins from '../../../mixins/mobile/selectDialog/index.js';
+import mixin from './mixins/addTaskUserdialogMixin';
+
+export default {
+  name: 'userDialog',
+  props: ['visiable', 'multi', 'rows', 'param'],
+  mixins: [selectDialogMixins, mixin],
+  data() {
+    return {
+      dialogVisible: true
+    };
+  }
+};
+</script>