cloud-web-corejs 1.1.0-dev.5 → 1.1.0-dev.7

package/src/components/xform/form-designer/form-widget/dialog/importDialog.vue

@@ -1,185 +1,185 @@
-<template>
-  <div v-if="showContent">
-    <el-dialog
-      :title="$t2('导入', 'components.excelImport.title')"
-      :append-to-body="true"
-      :modal-append-to-body="falseValue"
-      :close-on-click-modal="falseValue"
-      :visible.sync="showImportDialog"
-      :modal="falseValue"
-      custom-class="dialog-style"
-      width="501px"
-      v-el-drag-dialog
-      @close="dialogClose1"
-    >
-      <div class="import-box">
-        <div class="tips">{{ $t2('请下载文件模板，填写信息后再上传文件', 'components.excelImport.tip') }}</div>
-        <el-button type="success" plain class="button-sty template-btn" @click="commonLocalDownload()">
-          {{ $t2('模板下载', 'components.excelImport.downloadBUtton') }}
-        </el-button>
-        <el-upload v-if="!fileRaw" ref="uploadBtn" action="" class="upload-file" :auto-upload="false"
-                   :on-change="fileChange">
-          <div class="el-upload-dragger">
-            <i class="el-icon-upload"></i>
-            <div class="el-upload__text"><em>{{ $t2('点击上传', 'components.excelImport.uploadBUtton') }}</em></div>
-          </div>
-        </el-upload>
-        <div class="upload-finish" v-if="fileRaw">
-          <img :src="require('@/resources' + '/images/ico-excel.svg')" class="ico"/>
-          <p class="name">{{ fileRaw.name }}</p>
-          <!-- <p>2022-1-17</p> -->
-          <el-tooltip :enterable="false" class="item" effect="dark"
-                      :content="$t2('关闭', 'components.excelImport.closeBUtton')" placement="bottom">
-            <i
-              class="el-icon-error js-close"
-              @click="
-								fileRaw = false;
-								$refs.uploadBtn.clearFiles();
-							"
-            ></i>
-          </el-tooltip>
-        </div>
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <span class="fl tips">{{ $t1('注：导入文件不允许超过{fileSize}MB', {fileSize: importFileLimitSize}) }}</span>
-				<el-button type="primary" plain class="button-sty" @click="dialogClose1">
-					<i class="el-icon-close el-icon"></i>
-					{{ $t2('取 消', 'system.button.cancel2') }}
-				</el-button>
-				<el-button type="primary" @click="dialogPrimary1" class="button-sty">
-					<i class="el-icon-check el-icon"></i>
-					{{ $t2('确 定', 'system.button.confirm2') }}
-				</el-button>
-			</span>
-    </el-dialog>
-    <el-dialog
-      ref="importDialog"
-      :title="$t2('导入', 'components.excelImport.title')"
-      :append-to-body="true"
-      :modal-append-to-body="falseValue"
-      :close-on-click-modal="falseValue"
-      :visible.sync="showImportDialog2"
-      :modal="falseValue"
-      custom-class="dialog-style"
-      width="501px"
-      height="250px"
-      :beforeClose="handleBeforeClose"
-      @close="handleClose2"
-      v-el-drag-dialog
-    >
-      <div>
-        <div v-show="importLoading" class="import-stepbox">
-          <ul>
-            <li :class="getLoadingClass(1,percent1)">
-              <i class="el-icon-circle-check"></i>
-              <i class="el-icon-loading"></i>
-              <span v-html="$t1('上传导入文件  {percent}', {percent: `<span class=nums>${percent1}%</span>`})"></span>
-            </li>
-            <li :class="getLoadingClass(2,percent2)">
-              <i class="el-icon-circle-check"></i>
-              <i class="el-icon-loading"></i>
-              <span
-                v-html="$t1('校验导入文件中的图片数据格式  {percent}', {percent: `<span class=nums>${percent2}%</span>`})"></span>
-            </li>
-            <li :class="getLoadingClass(3,percent3)">
-              <i class="el-icon-circle-check"></i>
-              <i class="el-icon-loading"></i>
-              <span
-                v-html="$t1('存储导入文件中的图片  {percent}', {percent: `<span class=nums>${percent3}%</span>`})"></span>
-            </li>
-          </ul>
-        </div>
-        <div v-show="!importLoading" class="import-box" style="margin-bottom: 30px;">
-          <div class="tips">
-            {{ $t2('导入中，请勿关闭当前窗口', 'components.excelImport.tip2') }}
-            <!-- <span class="fr">耗时：<em class="time-txt">0 时 0 分 0 秒 </em></span> -->
-          </div>
-          <el-progress :text-inside="true" :stroke-width="26" :percentage="percentageNum"
-                       class="export-progress"></el-progress>
-          <div class="i-status">
-            <div class="item">
-              <i class="el-icon-success f-green"></i>
-              {{ $t2('成功', 'components.excelImport.success') }}：
-              <span class="successNum" @click="showSuccessResult">{{ totalSuccessNum }}</span>
-            </div>
-            <div class="item">
-              <i class="el-icon-error f-red"></i>
-              {{ $t2('失败', 'components.excelImport.fail') }}：
-              <span class="failNum" @click="showErrorResult">{{ totalErrorNum }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div slot="footer" class="dialog-footer" center="true">
-        <div class="fl import-count" v-show="!importLoading">
-          <span class="f-red doneNum">0</span>
-          /
-          <span class="dataSize">0</span>
-        </div>
-        <el-button type="primary" plain class="button-sty" @click="dialogClose2" v-if="!param.importOption.hideCancelButton">
-          <i class="el-icon-close el-icon"></i>
-          {{ $t2('取 消', 'system.button.cancel2') }}
-        </el-button>
-        <el-button type="primary" class="button-sty" @click="dialogPrimary2">
-          <i class="el-icon-check el-icon"></i>
-          {{ $t2('确 定', 'system.button.confirm2') }}
-        </el-button>
-      </div>
-    </el-dialog>
-    <el-dialog
-      :title="$t2('结果', 'components.excelImport.resultTitle')"
-      :append-to-body="true"
-      :modal-append-to-body="true"
-      :close-on-click-modal="falseValue"
-      :visible.sync="showImportResult"
-      :modal="falseValue"
-      custom-class="dialog-style list-dialog"
-      width="1200px"
-      v-el-drag-dialog
-    >
-      <div>
-        <div class="box-style">
-          <div class="cont">
-            <div class="table-div">
-              <vxe-grid
-                id="resGrid"
-                ref="resGrid"
-                height="440px"
-                v-bind="resOption"
-                @resizable-change="$vxeTableUtil.onColumnWitchChange"
-                @custom="$vxeTableUtil.customHandle"
-              >
-                <template #form>
-                  <div class="clearfix screen-btns">
-                    <div class="fl">
-                      <vxe-button status="primary" class="button-sty" icon="el-icon-upload2" @click="exportToExcel()">
-                        {{ $t1('导出') }}
-                      </vxe-button>
-                    </div>
-                    <div class="fr"></div>
-                  </div>
-                </template>
-                <template #attachment="{row,column}">
-                  <base-attachment :option="{
-                      title: column.title,
-                      rows: row[column.field],
-                      showViewButton: true,
-                      edit:false
-                    }"/>
-                </template>
-              </vxe-grid>
-            </div>
-          </div>
-        </div>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import {mixins} from './importDialogMixin';
-
-export default {
-  mixins: [mixins]
-};
-</script>
+<template>
+  <div v-if="showContent">
+    <el-dialog
+      :title="$t2('导入', 'components.excelImport.title')"
+      :append-to-body="true"
+      :modal-append-to-body="falseValue"
+      :close-on-click-modal="falseValue"
+      :visible.sync="showImportDialog"
+      :modal="falseValue"
+      custom-class="dialog-style"
+      width="501px"
+      v-el-drag-dialog
+      @close="dialogClose1"
+    >
+      <div class="import-box">
+        <div class="tips">{{ $t2('请下载文件模板，填写信息后再上传文件', 'components.excelImport.tip') }}</div>
+        <el-button type="success" plain class="button-sty template-btn" @click="commonLocalDownload()">
+          {{ $t2('模板下载', 'components.excelImport.downloadBUtton') }}
+        </el-button>
+        <el-upload v-if="!fileRaw" ref="uploadBtn" action="" class="upload-file" :auto-upload="false"
+                   :on-change="fileChange">
+          <div class="el-upload-dragger">
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text"><em>{{ $t2('点击上传', 'components.excelImport.uploadBUtton') }}</em></div>
+          </div>
+        </el-upload>
+        <div class="upload-finish" v-if="fileRaw">
+          <img :src="$assetUrl(require('@/resources' + '/images/ico-excel.svg'))" class="ico"/>
+          <p class="name">{{ fileRaw.name }}</p>
+          <!-- <p>2022-1-17</p> -->
+          <el-tooltip :enterable="false" class="item" effect="dark"
+                      :content="$t2('关闭', 'components.excelImport.closeBUtton')" placement="bottom">
+            <i
+              class="el-icon-error js-close"
+              @click="
+								fileRaw = false;
+								$refs.uploadBtn.clearFiles();
+							"
+            ></i>
+          </el-tooltip>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <span class="fl tips">{{ $t1('注：导入文件不允许超过{fileSize}MB', {fileSize: importFileLimitSize}) }}</span>
+				<el-button type="primary" plain class="button-sty" @click="dialogClose1">
+					<i class="el-icon-close el-icon"></i>
+					{{ $t2('取 消', 'system.button.cancel2') }}
+				</el-button>
+				<el-button type="primary" @click="dialogPrimary1" class="button-sty">
+					<i class="el-icon-check el-icon"></i>
+					{{ $t2('确 定', 'system.button.confirm2') }}
+				</el-button>
+			</span>
+    </el-dialog>
+    <el-dialog
+      ref="importDialog"
+      :title="$t2('导入', 'components.excelImport.title')"
+      :append-to-body="true"
+      :modal-append-to-body="falseValue"
+      :close-on-click-modal="falseValue"
+      :visible.sync="showImportDialog2"
+      :modal="falseValue"
+      custom-class="dialog-style"
+      width="501px"
+      height="250px"
+      :beforeClose="handleBeforeClose"
+      @close="handleClose2"
+      v-el-drag-dialog
+    >
+      <div>
+        <div v-show="importLoading" class="import-stepbox">
+          <ul>
+            <li :class="getLoadingClass(1,percent1)">
+              <i class="el-icon-circle-check"></i>
+              <i class="el-icon-loading"></i>
+              <span v-html="$t1('上传导入文件  {percent}', {percent: `<span class=nums>${percent1}%</span>`})"></span>
+            </li>
+            <li :class="getLoadingClass(2,percent2)">
+              <i class="el-icon-circle-check"></i>
+              <i class="el-icon-loading"></i>
+              <span
+                v-html="$t1('校验导入文件中的图片数据格式  {percent}', {percent: `<span class=nums>${percent2}%</span>`})"></span>
+            </li>
+            <li :class="getLoadingClass(3,percent3)">
+              <i class="el-icon-circle-check"></i>
+              <i class="el-icon-loading"></i>
+              <span
+                v-html="$t1('存储导入文件中的图片  {percent}', {percent: `<span class=nums>${percent3}%</span>`})"></span>
+            </li>
+          </ul>
+        </div>
+        <div v-show="!importLoading" class="import-box" style="margin-bottom: 30px;">
+          <div class="tips">
+            {{ $t2('导入中，请勿关闭当前窗口', 'components.excelImport.tip2') }}
+            <!-- <span class="fr">耗时：<em class="time-txt">0 时 0 分 0 秒 </em></span> -->
+          </div>
+          <el-progress :text-inside="true" :stroke-width="26" :percentage="percentageNum"
+                       class="export-progress"></el-progress>
+          <div class="i-status">
+            <div class="item">
+              <i class="el-icon-success f-green"></i>
+              {{ $t2('成功', 'components.excelImport.success') }}：
+              <span class="successNum" @click="showSuccessResult">{{ totalSuccessNum }}</span>
+            </div>
+            <div class="item">
+              <i class="el-icon-error f-red"></i>
+              {{ $t2('失败', 'components.excelImport.fail') }}：
+              <span class="failNum" @click="showErrorResult">{{ totalErrorNum }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer" center="true">
+        <div class="fl import-count" v-show="!importLoading">
+          <span class="f-red doneNum">0</span>
+          /
+          <span class="dataSize">0</span>
+        </div>
+        <el-button type="primary" plain class="button-sty" @click="dialogClose2" v-if="!param.importOption.hideCancelButton">
+          <i class="el-icon-close el-icon"></i>
+          {{ $t2('取 消', 'system.button.cancel2') }}
+        </el-button>
+        <el-button type="primary" class="button-sty" @click="dialogPrimary2">
+          <i class="el-icon-check el-icon"></i>
+          {{ $t2('确 定', 'system.button.confirm2') }}
+        </el-button>
+      </div>
+    </el-dialog>
+    <el-dialog
+      :title="$t2('结果', 'components.excelImport.resultTitle')"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+      :close-on-click-modal="falseValue"
+      :visible.sync="showImportResult"
+      :modal="falseValue"
+      custom-class="dialog-style list-dialog"
+      width="1200px"
+      v-el-drag-dialog
+    >
+      <div>
+        <div class="box-style">
+          <div class="cont">
+            <div class="table-div">
+              <vxe-grid
+                id="resGrid"
+                ref="resGrid"
+                height="440px"
+                v-bind="resOption"
+                @resizable-change="$vxeTableUtil.onColumnWitchChange"
+                @custom="$vxeTableUtil.customHandle"
+              >
+                <template #form>
+                  <div class="clearfix screen-btns">
+                    <div class="fl">
+                      <vxe-button status="primary" class="button-sty" icon="el-icon-upload2" @click="exportToExcel()">
+                        {{ $t1('导出') }}
+                      </vxe-button>
+                    </div>
+                    <div class="fr"></div>
+                  </div>
+                </template>
+                <template #attachment="{row,column}">
+                  <base-attachment :option="{
+                      title: column.title,
+                      rows: row[column.field],
+                      showViewButton: true,
+                      edit:false
+                    }"/>
+                </template>
+              </vxe-grid>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {mixins} from './importDialogMixin';
+
+export default {
+  mixins: [mixins]
+};
+</script>

package/src/components/xform/form-designer/form-widget/field-widget/singleUpload-widget.vue

@@ -15,7 +15,7 @@
                 :multi="field.options.limit!==1"
                 :limit="field.options.limit"
                 resultType="Array"
-                :edit="!field.options.disabled"
+                :edit="!field.options.disabled && !isReadMode"
                 @callback="submitFile"
                 :hideInfo="field.options.hideFileInfo"
                 :hideName="field.options.hideFileName"

package/src/components/xform/form-designer/form-widget/field-widget/vabUpload-widget.vue

@@ -32,8 +32,8 @@
       :limit="field.options.limit"
       :fileTypes="field.options.fileTypes || []"
       resultType="Array"
-      :edit="!field.options.disabled"
-      :remove="!field.options.hideRemoveButton"
+      :edit="!field.options.disabled && !isReadMode"
+      :remove="!field.options.hideRemoveButton && !isReadMode"
       @callback="submitFile"
       :hideInfo="field.options.hideFileInfo"
       :hideName="field.options.hideFileName"

package/src/components/xform/form-designer/indexMixin.js

@@ -93,6 +93,8 @@ modules = {
     readonly: Boolean,
     columnFlag: Boolean,
     sourceData: Object,
+    /* 进入设计器时的默认布局模式（临时模式：仅入口默认值，模板自带 layoutType 时不覆盖） */
+    defaultLayoutType: { type: String, default: "" },
   },
   data() {
     return {
@@ -345,23 +347,51 @@ modules = {
       baseRefUtil.changeLocale(langName);
     },
 
+    /**
+     * 应用入口默认布局模式：模板 JSON 自带 layoutType 时以模板为准，不覆盖
+     */
+    applyDefaultLayoutType(loadedFormJson) {
+      if (!this.defaultLayoutType) {
+        return;
+      }
+      if (loadedFormJson && loadedFormJson.formConfig?.layoutType) {
+        return;
+      }
+      this.designer.changeLayoutType(this.defaultLayoutType);
+    },
+
     setFormJson(formJson) {
       let modifiedFlag = false;
+      let loadedFormJson = null;
       if (!!formJson) {
         if (typeof formJson === "string") {
           let newFormJson = JSON.parse(formJson);
           this.upgradeFormJson(newFormJson);
+          loadedFormJson = newFormJson;
           modifiedFlag = this.designer.loadFormJson(newFormJson);
         } else if (formJson.constructor === Object) {
           this.upgradeFormJson(formJson);
+          loadedFormJson = formJson;
           modifiedFlag = this.designer.loadFormJson(formJson);
         }
 
         if (modifiedFlag) {
           this.designer.emitHistoryChange();
         }
+
+        this.applyDefaultLayoutType(loadedFormJson);
+        /* 模板 JSON 里的 layoutType 此刻才写入；左侧面板 mounted 时仍是默认 PC，
+           必须再筛一次，否则进入 H5 模板时仍展示 PC 容器（data-table/detail 等） */
+        this.$nextTick(() => {
+          this.loadWidgets();
+        });
       } else {
+        /* 新建模板 formViewContent 为空会走这里，同样要落入口默认布局 */
         this.clearDesigner();
+        this.applyDefaultLayoutType(null);
+        this.$nextTick(() => {
+          this.loadWidgets();
+        });
       }
     },
 
@@ -826,7 +856,9 @@ modules = {
       });
     },
     loadWidgets() {
-      this.$refs.widgetPanelRef.loadWidgets();
+      if (this.$refs.widgetPanelRef) {
+        this.$refs.widgetPanelRef.loadWidgets();
+      }
     },
     getBdEnv() {
       getBdFlag({