@bytenew/bn-bus-ui 1.1.461 → 1.1.463

package/packages/BnImportOrder/BnImportOrder.vue

@@ -0,0 +1,323 @@
+<template>
+  <el-dialog v-model="importTaskShow" width="600px" top="50px" title="批量导入" destroy-on-close>
+    <div class="workOrderImport" v-loading="loading">
+      <div class="w-tip w-margin-bottom10">
+        <div class="w-margin-bottom8">
+          <span class="w-tip-num">1.</span>为了保证数据导入顺利，推荐您使用标准模板
+          <a class="w-color-blue" :href="downloadTemplateUrl">下载模板</a>
+        </div>
+        <div class="w-margin-bottom8">
+          <span class="w-tip-num">2.</span>文件大小：数据不能超过 {{ maxImportNum }} 条
+        </div>
+        <div>
+          <span class="w-tip-num">3.</span>文件格式：Excel（.xls）、Excel (.xlsx）
+        </div>
+      </div>
+      <div v-if="hasTemplateSupport" class="w-flex-center w-margin-bottom10">
+        <div class="w-margin-right10 w-line-height22">选择导入模板</div>
+        <el-select
+            v-model="importSetting.templateId"
+            class="workOrderImport-templateSelect"
+            placeholder="请选择导入模板"
+            clearable
+            filterable
+            :empty-values="[null, undefined]"
+            :loading="templateLoading"
+            no-data-text="暂无导入模板">
+          <el-option
+              v-for="item in templateOptions"
+              :key="item.id"
+              :label="item.templateName"
+              :value="item.id"/>
+        </el-select>
+      </div>
+      <div class="w-flex-left w-margin-bottom10">
+        <div class="w-margin-right10 w-line-height22">选择导入方式</div>
+        <div>
+          <div class="w-margin-bottom8">
+            <BnRadio v-model="importSetting.type" class="w-margin-right10" :true-data="1" label="导入新增" :disabled="isImportTypeDisabled"/>
+            <BnRadio v-model="importSetting.type" :true-data="2" label="导入更新" :disabled="isImportTypeDisabled"/>
+          </div>
+          <div v-if="!hasSelectedTemplate" class="w-flex-center w-margin-bottom8">
+            <BnCheck v-model="importSetting.ext.mergeImport" trueData="1" falseData="0"
+                     label="导入未合并的多行数据(组件：子表单、子订单)"/>
+            <el-popover placement="bottom" :width="350">
+              <div>
+                导入创建时以订单号进行工单合并
+                <img
+                    src="https://banniu-work.oss-cn-zhangjiakou.aliyuncs.com/125_10030158_4e9963ba94f1bed53dab1680e6f3e4d5.png"
+                    alt="" style="height: 92px">
+              </div>
+              <template #reference>
+                <span class="bnUIcon bnUIcon-question"></span>
+              </template>
+            </el-popover>
+          </div>
+          <div v-if="!hasSelectedTemplate" class="w-margin-bottom8">
+            <BnCheck v-model="importSetting.ext.checkMust" trueData="0" falseData="1" label="导入时不做必填校验"/>
+          </div>
+          <div class="w-margin-bottom8">
+            <BnCheck v-model="importSetting.ext.submitCheck" trueData="1" falseData="0" label="导入校验提交校验开启中规则"/>
+          </div>
+        </div>
+      </div>
+      <el-upload
+          ref="uploader" drag
+          class="workOrderImport-file"
+          :action="`${baseUrl}/v2/attachment/upload/importTask`"
+          :on-success="uploadSuccess"
+          :before-upload="beforeUpload"
+          :multiple="false"
+          :show-file-list="false">
+        <div v-if="!fileData">
+          拖拽文件到这里上传，或<span class="w-color-blue w-margin-left5"><i class="anwIcon aIcon-download"></i> 文件上传</span>
+        </div>
+        <div v-if="fileData">
+          <div><i class="anwIcon aIcon-success w-color-green-min"></i>上传文件成功</div>
+          <div><i class="anwIcon aIcon-excel w-color-green-min"></i>{{ fileData.fileName }}</div>
+          <div class="w-color-blue w-cursor-pointer w-margin-top5">重新上传</div>
+        </div>
+      </el-upload>
+    </div>
+    <div class="workOrderImport-footer">
+      <el-button @click="importTaskShow = false">取消</el-button>
+      <el-button type="primary" @click="importFile()">确认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import {getApiBaseUrl} from "../../utils/config.js";
+
+export default {
+  name: "BnImportOrder",
+  props: {
+    postFunc: Function,
+    postData: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+    pathUrl: {
+      type: String,
+      default: '/biztable/io/import'
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      templateLoading: false,
+      baseUrl: getApiBaseUrl(),
+      importTaskShow: false, // 弹窗显示与否
+      fileData: null, // 上传好的文件信息
+      templateList: [], // 导入模板下拉列表
+      maxImportNum:30000,//最多导入条数
+      importSetting: {
+        type: '1', // 导入方式 1 导入新增 2 导入更新  物流单号导入
+        templateId: '', // 当前选择的导入模板ID
+        ext: {
+          mergeImport: '0',//导入未合并的多行数据(组件：子表单、子订单)
+          checkMust: '1',//导入时不做必填校验
+          submitCheck: '0',//导入校验提交校验开启中规则
+        },
+      }
+    };
+  },
+  watch: {
+    'importSetting.templateId': {
+      handler(newVal) {
+        if (newVal) {
+          const template = this.templateList.find(item => item.id === newVal);
+          if (template && template.type !== undefined) {
+            this.importSetting.type = template.type === 1 ? '1' : '2';
+          }
+        }
+      },
+      immediate: false
+    }
+  },
+  computed: {
+    hasTemplateSupport() {
+      const { appId, tableId } = this.postData || {};
+      return appId && tableId;
+    },
+    hasSelectedTemplate() {
+      return Boolean(this.importSetting.templateId);
+    },
+    templateOptions() {
+      return [
+        {
+          id: '',
+          templateName: '默认模板',
+        },
+        ...this.templateList,
+      ];
+    },
+    downloadTemplateUrl() {
+      const tableCode = this.postData?.tableCode || '';
+      const templateId = this.importSetting.templateId;
+      const type = this.importSetting.type;
+      const url = `/biztable/io/buildTemplate?tableCode=${tableCode}&type=${type}`;
+      return templateId ? `${url}&templateId=${templateId}` : url;
+    },
+    // 当前选中模板的 type 字段
+    selectedTemplateType() {
+      const templateId = this.importSetting.templateId;
+      if (!templateId) return null;
+      const template = this.templateList.find(item => item.id === templateId);
+      return template?.type ?? null;
+    },
+    // 是否禁用导入方式选择
+    isImportTypeDisabled() {
+      return this.hasSelectedTemplate && this.selectedTemplateType !== null;
+    },
+  },
+  methods: {
+    /**
+     * 打开导入弹框
+     * */
+    open(template) {
+      this.fileData = null;
+      this.importSetting.templateId = template?.id || '';
+      if (template?.id) {
+        this.templateList = [template];
+        // 根据模板 type 自动设置导入方式
+        this.importSetting.type = template.type === 1 ? '1' : '2';
+      }
+      this.getVersion();
+      this.getImportTemplateList();
+      this.importTaskShow = true;
+    },
+    /**
+     * 获取当前表可用的导入模板列表，供批量导入弹框中的模板下拉选择。
+     *
+     * @return 请求完成后无显式返回值。
+     */
+    getImportTemplateList() {
+      const {appId, tableId} = this.postData || {};
+      if (!this.importSetting.templateId) {
+        this.templateList = [];
+      }
+      if (!this.postFunc || !appId || !tableId) {
+        return;
+      }
+      this.templateLoading = true;
+      this.postFunc(`/excelImportTemplate/${appId}/${tableId}/1/80?source=biztable`, null, 'get').then(res => {
+        this.templateLoading = false;
+        if (!res?.code) {
+          this.templateList = res.data?.results || [];
+        }
+      }).catch(() => {
+        this.templateLoading = false;
+      })
+    },
+    /**
+     * 选择文件上传成功后
+     * */
+    uploadSuccess(file) {
+      this.loading = false;
+      if (!file.code) {
+        //步骤
+        this.fileData = file.data;
+      } else {
+        this.fileData = null;
+        // 上传失败清空文件
+        if (this.$refs.uploader) this.$refs.uploader.clearFiles();
+      }
+    },
+    /**
+     * 上传文件前
+     * */
+    beforeUpload(file) {
+      let s = 30;
+      let sizeNumber = 1048576 * s
+      let sizeMsg = `请检查导入数据是否超过${this.maxImportNum}条的导入上限,并且文件不能大于30M.若导入行数没有超过上限，请将导入数据框选（不要框选空白行列）从原文件复制->黏贴到导入模板,重新上传`;
+      if (file.size > sizeNumber) {
+        this.$message.warning(sizeMsg)
+        return false;
+      }
+      this.loading = true;
+    },
+    /**
+     * 确定导入
+     * */
+    importFile() {
+      if (!this.fileData) {
+        this.$message.warning('请先上传文件');
+        return;
+      }
+      this.loading = true;
+      let postData = {
+        ...this.importSetting,
+        url: this.fileData.url,
+        ...this.postData
+      }
+      if (!postData.templateId) {
+        delete postData.templateId;
+      }
+      this.postFunc(this.pathUrl, postData).then(res => {
+        this.loading = false;
+        if (!res.code) {
+          this.$message.success(res.msg)
+          this.$emit("importOver", postData, res)
+          this.importTaskShow = false;
+        }
+      })
+    },
+    /**
+     * 获取版本查看导入最多支持多少条
+     * */
+    getVersion() {
+      this.postFunc('v2/logins/checkSession', {}).then(res => {
+        if (!res.code) {
+          this.maxImportNum = res.data.capacity.exportImportMax
+        }
+      })
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+
+.workOrderImport {
+  padding:0 0 12px 0;
+
+
+  &-templateSelect {
+    width: 280px;
+  }
+
+  &-footer {
+    border-top: 1px solid rgba(0, 0, 0, 0.06);
+    height: 52px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 0 24px;
+  }
+}
+
+:deep(.workOrderImport-file) {
+  position: relative;
+  height: 140px;
+  border: 1px dashed #E1E1E1;
+  border-radius: 4px;
+
+  .el-upload {
+    width: 100%;
+    height: 138px;
+
+    .el-upload-dragger {
+      border: none;
+      width: 100%;
+      height: 100%;
+      border-radius: 0;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+    }
+  }
+}
+</style>