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

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

@@ -1,185 +1,190 @@
-<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>
+<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('@base/core-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">
+          {{ backendValidating
+            ? $t1('后台校验中，请勿关闭当前窗口')
+            : $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">{{ doneNum }}</span>
+          /
+          <span class="dataSize">{{ dataSize }}</span>
+        </div>
+        <el-button type="primary" plain class="button-sty" @click="dialogClose2"
+                   :disabled="backendValidating"
+                   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"
+                   :disabled="backendValidating">
+          <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>