@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/dist/src/components/LanguageImportPage.js

@@ -0,0 +1,590 @@
+import '../../style.css';
+import component from "@epxing/core/src/mixins/component";
+import { evalWith } from "@epxing/utils/src/eval-with";
+import { resolveComponent, openBlock, createElementBlock, createVNode, createElementVNode, withCtx, createTextVNode, createCommentVNode, Fragment, renderList, toDisplayString } from "vue";
+/* empty css                       */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-language-import-page",
+  mixins: [component],
+  data() {
+    return {
+      stepIndex: 1,
+      fileList: [],
+      importMode: "add",
+      dataList: [],
+      selectList: [],
+      optionList: [],
+      requiredList: [],
+      titleList: [],
+      invalidList: [],
+      errorLength: "",
+      validList: [],
+      total: 0,
+      dataStatus: "invalid",
+      length: 0,
+      currentPage1: 1,
+      currentPage2: 1,
+      pageSize1: 10,
+      pageSize2: 10,
+      requiredCheckFlag: true,
+      isRequesting: false,
+      loadingInvalidData: false,
+      loadingValidData: false
+    };
+  },
+  computed: {
+    languageList() {
+      const { LANGUAGES: languages = "", "LANGUAGES#": languageNames = "" } = this.clientConfig;
+      if (!languages) return [];
+      const languageIdList = languages.split(",");
+      const languageNameList = languageNames.split(",");
+      const languageList = languageIdList.map((item, index) => ({ id: item, text: languageNameList[index] }));
+      return languageList;
+    }
+  },
+  methods: {
+    getDefaultValue() {
+      const { fields = [] } = this.$configs;
+      const defaultValue = {};
+      fields.forEach((item) => {
+        if (typeof item === "object" && item.value) {
+          const _this = this;
+          const value = item.value.replace(/\$\[(.+)\]/, (match, key) => {
+            try {
+              return evalWith(`_this.${key}`, { _this }) || evalWith(`_this.$query.${key}`, { _this }) || evalWith(`_this.$tab.${key}`, { _this }) || evalWith(`_this.$route.query.${key}`, { _this }) || "";
+            } catch (error) {
+              return item.value;
+            }
+          });
+          defaultValue[item.attriName] = value;
+        }
+      });
+      return defaultValue;
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件，可删除后重新上传`);
+    },
+    upload({ file }) {
+      this.fileList = [file];
+    },
+    uploadExcel() {
+      if (this.fileList.length === 0) {
+        this.$message.error("请先选择文件");
+        return;
+      }
+      const file = this.fileList[0];
+      if (this.isRequesting === true) return;
+      this.isRequesting = true;
+      this.$http.$request({
+        action: "languageImport",
+        entityId: this.$metaId,
+        UPLOAD_FILE_FIELD: "importfile",
+        importfile: file,
+        uploadExcelFlag: "1"
+      }, {
+        method: "post",
+        requestType: "formData"
+      }).then((data) => {
+        const { file: file2, header } = data;
+        this.fileId = file2.data.ID;
+        this.isRequesting = false;
+        header.forEach((item) => {
+          if (item) {
+            this.dataList.push(item);
+          }
+        });
+        this.autoMatch();
+        this.stepIndex = 2;
+      }).catch((err) => {
+        this.isRequesting = false;
+        this.$message(err.message || "处理失败");
+      });
+    },
+    backUp() {
+      if (this.stepIndex === 2) {
+        this.stepIndex = 1;
+        this.dataList = [];
+      } else if (this.stepIndex === 3) {
+        this.stepIndex = 2;
+        this.titleList = [];
+      }
+    },
+    autoMatch() {
+      for (const index in this.dataList) {
+        const text = this.dataList[index];
+        const selectItem = { text: "", value: "" };
+        for (let i = 0; i < this.optionList.length; i++) {
+          const item = this.optionList[i];
+          if (item.text === text && item.children.length === 0) {
+            selectItem.value = item.value;
+            selectItem.text = item.text;
+          }
+        }
+        this.selectList[index] = selectItem;
+      }
+    },
+    selectMatch(index, data) {
+      this.selectList[index] = data;
+      const popoverList = this.$refs.popover;
+      popoverList.forEach((popover) => {
+        popover.doClose();
+      });
+    },
+    clearMatch(index) {
+      this.selectList[index] = { value: "", text: "" };
+    },
+    excelToSystem() {
+      this.fieldMate = "";
+      this.columnString = "";
+      this.columnStringExp = "";
+      for (const i in this.selectList) {
+        const select = this.selectList[i];
+        if (select.id) {
+          this.fieldMate += select.id + ":" + i + ",";
+          this.columnString += select.id + "#,";
+          this.columnStringExp += select.id + ",";
+          this.titleList.push({
+            text: this.dataList[i],
+            value: select.id
+          });
+        }
+      }
+      this.isRequesting = true;
+      this.$http.$request({
+        action: "languageImport",
+        entityId: this.$metaId,
+        fileId: this.fileId,
+        fieldMate: this.fieldMate.substring(0, this.fieldMate.length - 1),
+        queryMeta: this.$query.entityId,
+        queryAttribute: this.$query.attributeId
+      }).then((data) => {
+        this.isRequesting = false;
+        this.stepIndex = 3;
+        this.length = data.total;
+      }).catch((err) => {
+        this.isRequesting = false;
+        this.$message(err.message || "处理失败");
+      });
+    },
+    getInvalidData(limit, currentPage) {
+      this.loadingInvalidData = true;
+      this.$http.$request({
+        action: "entityImport",
+        entityId: this.$metaId,
+        importModel: this.importMode,
+        fileId: this.fileId,
+        // 无效数据
+        validataType: 0,
+        showFlag: "1",
+        columnFieldNames: "DATA_ERROR," + this.columnString,
+        page: currentPage,
+        limit,
+        requiredCheckFlag: this.requiredCheckFlag
+      }).then((data) => {
+        this.invalidList = data.entitys;
+        this.errorLength = data.total;
+        this.loadingInvalidData = false;
+      }).catch((err) => {
+        this.loadingInvalidData = false;
+        this.$message(err.message || "处理失败");
+      });
+    },
+    getValidData(limit, currentPage) {
+      this.loadingValidData = true;
+      this.$http.$request({
+        action: "entityImport",
+        entityId: this.$metaId,
+        importModel: this.importMode,
+        fileId: this.fileId,
+        // 有效数据
+        validataType: 1,
+        showFlag: "1",
+        columnFieldNames: this.columnString.substring(0, this.columnString.length - 1),
+        limit,
+        page: currentPage,
+        requiredCheckFlag: this.requiredCheckFlag
+      }).then((data) => {
+        this.validList = data.entitys;
+        this.total = data.total;
+        this.loadingValidData = false;
+      }).catch((err) => {
+        this.loadingValidData = false;
+        this.$message(err.message || "处理失败");
+      });
+    },
+    columnStyle({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 1) {
+        return "color:red;";
+      }
+    },
+    headeRowClass({ row, column, rowIndex, columnIndex }) {
+      if (rowIndex === 0) {
+        return "background:var(--epx-border)";
+      }
+    },
+    handleSizeChange1(val) {
+      this.pageSize1 = val;
+      this.getInvalidData(val, 1);
+    },
+    handleCurrentChange1(val) {
+      this.currentPage1 = val;
+      this.getInvalidData(this.pageSize1, val);
+    },
+    handleSizeChange2(val) {
+      this.pageSize2 = val;
+      this.getValidData(val, 1);
+    },
+    handleCurrentChange2(val) {
+      this.currentPage2 = val;
+      this.getValidData(this.pageSize2, val);
+    },
+    // 数据正确，导入全部数据
+    autoImportData(value) {
+      const loading = this.$loading({
+        lock: true,
+        text: "正在导入数据，请稍后...",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)"
+      });
+      this.$http.$request({
+        action: "entityImport",
+        entityId: this.$metaId,
+        importModel: this.importMode,
+        // 必填检查
+        fileId: this.fileId,
+        fieldMate: this.fieldMate.substring(0, this.fieldMate.length - 1),
+        columnFieldNames: this.columnString.substring(0, this.columnString.length - 1),
+        importMethod: "1",
+        showFlag: "0",
+        validataType: 1,
+        requiredCheckFlag: this.requiredCheckFlag
+      }).then((data) => {
+        loading.close();
+        this.stepIndex = 4;
+        this.length = this.total;
+      }).catch((err) => {
+        loading.close();
+        this.$message(err.message || "处理失败");
+      });
+    },
+    // 导出无效数据
+    exportErrorData() {
+      const loading = this.$loading({
+        lock: true,
+        text: "正在导出数据，请稍后...",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)"
+      });
+      this.$http.$request({
+        action: "entityImport",
+        entityId: this.$metaId,
+        // 必填检查
+        // requiredCheckFlag: this.radio === '1' ? 'true' : 'false',
+        fileId: this.fileId,
+        exportErrorData: "1",
+        columnFieldNames: "DATA_ERROR," + this.columnStringExp
+      }, {
+        responseType: "blob",
+        onDownloadProgress: function(progressEvent) {
+        }
+      }).then(({ blob, filename }) => {
+        const objectUrl = URL.createObjectURL(blob);
+        var a = document.createElement("a");
+        document.body.appendChild(a);
+        a.href = objectUrl;
+        a.download = filename || this.$moment().format("YYYYMMDDHHmmss") + ".xlsx";
+        a.click();
+        window.URL.revokeObjectURL(objectUrl);
+        document.body.removeChild(a);
+        loading.close();
+        this.$message.success("已下载文件到本地");
+      }).catch((err) => {
+        loading.close();
+        this.$message.error(err.message);
+      });
+    },
+    // 只导入有效数据
+    importValidData(value) {
+      const loading = this.$loading({
+        lock: true,
+        text: "正在导入数据，请稍后...",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)"
+      });
+      this.$http.$request({
+        action: "entityImport",
+        entityId: this.$metaId,
+        importModel: this.importMode,
+        // 必填检查
+        // requiredCheckFlag: this.radio === '1' ? 'true' : 'false',
+        fileId: this.fileId,
+        fieldMate: this.fieldMate.substring(0, this.fieldMate.length - 1),
+        columnFieldNames: this.columnString.substring(0, this.columnString.length - 1),
+        importMethod: "1",
+        validataType: 0,
+        showFlag: "0",
+        errorIds: this.errorLength,
+        requiredCheckFlag: this.requiredCheckFlag
+      }).then((data) => {
+        loading.close();
+        this.stepIndex = 4;
+        this.length = this.total;
+      }).catch((err) => {
+        loading.close();
+        this.$message(err.message || "处理失败");
+      });
+    },
+    async getOptionList() {
+      const metaKeyType = this.$meta.getKeyType();
+      const metaKeyName = this.$meta.getKey();
+      const attriNames = this.$meta.attriNames || [];
+      const attributes = this.$meta.attributes || {};
+      const optionList = [];
+      for (const key in attriNames) {
+        const attriName = attriNames[key];
+        const attribute = attributes[attriName] || {};
+        const item = {
+          value: attribute.name,
+          text: attribute.label,
+          children: []
+        };
+        if (attribute.relatedEntity) {
+          item.children = [];
+          try {
+            const meta = await this.$store.dispatch({
+              type: "ADD_META",
+              metaId: attribute.relatedEntity
+            });
+            const fields = meta.getAllFieldConfigs();
+            item.children = fields.map((field) => ({ value: attribute.name + "|" + field.attriName, text: field.attriLabel }));
+          } catch (err) {
+            console.error(err);
+          }
+        }
+        optionList.push(item);
+        if (attribute.isRequired === "1") {
+          if (attribute.name !== metaKeyName || !(metaKeyType !== "assigned" || attribute.dataType === "derive")) {
+            this.requiredList.push(item);
+          }
+        }
+      }
+      this.optionList = optionList;
+    },
+    handleRemove(file, fileList) {
+      this.fileList = fileList;
+    }
+  },
+  created() {
+    this.getOptionList();
+  }
+};
+const _hoisted_1 = { class: "container base-page" };
+const _hoisted_2 = { class: "import-container" };
+const _hoisted_3 = {
+  key: 0,
+  class: "step1"
+};
+const _hoisted_4 = { class: "operate" };
+const _hoisted_5 = {
+  key: 1,
+  class: "step2"
+};
+const _hoisted_6 = { class: "opera" };
+const _hoisted_7 = { class: "match-table" };
+const _hoisted_8 = { key: 0 };
+const _hoisted_9 = { style: { height: "200px", overflow: "auto" } };
+const _hoisted_10 = { class: "custom-tree-node" };
+const _hoisted_11 = ["onClick"];
+const _hoisted_12 = { class: "operate" };
+const _hoisted_13 = {
+  key: 2,
+  class: "step4",
+  style: { "text-align": "center" }
+};
+const _hoisted_14 = { class: "count" };
+const _hoisted_15 = { class: "operate" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_epx_header = resolveComponent("epx-header");
+  const _component_el_step = resolveComponent("el-step");
+  const _component_el_steps = resolveComponent("el-steps");
+  const _component_el_upload = resolveComponent("el-upload");
+  const _component_el_button = resolveComponent("el-button");
+  const _component_el_tree = resolveComponent("el-tree");
+  const _component_el_input = resolveComponent("el-input");
+  const _component_el_popover = resolveComponent("el-popover");
+  const _component_el_card = resolveComponent("el-card");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createVNode(_component_epx_header, {
+      title: "多语言导入",
+      style: { margin: "0 0 10px" }
+    }),
+    createElementVNode("div", _hoisted_2, [
+      createVNode(_component_el_card, { class: "box-card" }, {
+        default: withCtx(() => [
+          createVNode(_component_el_steps, {
+            class: "steps",
+            active: $data.stepIndex,
+            "align-center": ""
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_el_step, { title: "上传数据文件" }),
+              createVNode(_component_el_step, { title: "匹配导入字段" }),
+              createVNode(_component_el_step, { title: "导入完成" })
+            ]),
+            _: 1
+          }, 8, ["active"]),
+          $data.stepIndex === 1 ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            createVNode(_component_el_upload, {
+              class: "upload",
+              drag: "",
+              action: "#",
+              limit: 1,
+              "on-exceed": $options.handleExceed,
+              accept: ".xlsx,.xls,.csv,.pdf",
+              "http-request": $options.upload,
+              "file-list": $data.fileList,
+              "on-remove": $options.handleRemove
+            }, {
+              default: withCtx(() => [..._cache[1] || (_cache[1] = [
+                createElementVNode("i", { class: "el-icon-upload" }, null, -1),
+                createElementVNode("div", { class: "el-upload__text" }, [
+                  createElementVNode("div", null, [
+                    createTextVNode("将文件拖到此处，或"),
+                    createElementVNode("em", null, "点击上传")
+                  ]),
+                  createElementVNode("div", { class: "el-upload__tip" }, "仅支持excel,可在下方选择字段生成数据文件模板")
+                ], -1)
+              ])]),
+              _: 1
+            }, 8, ["on-exceed", "http-request", "file-list", "on-remove"]),
+            createElementVNode("div", _hoisted_4, [
+              createVNode(_component_el_button, {
+                type: "primary",
+                onClick: $options.uploadExcel,
+                loading: $data.isRequesting
+              }, {
+                default: withCtx(() => [..._cache[2] || (_cache[2] = [
+                  createTextVNode("下一步", -1)
+                ])]),
+                _: 1
+              }, 8, ["onClick", "loading"])
+            ])
+          ])) : createCommentVNode("", true),
+          $data.stepIndex === 2 ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            createElementVNode("div", _hoisted_6, [
+              _cache[3] || (_cache[3] = createElementVNode("span", null, [
+                createTextVNode("导入数据匹配"),
+                createElementVNode("span", { style: { "font-size": "12px", "color": "var(--epx-text-secondary)" } }, "（提示：请选择系统字段与导入的数据列相匹配）")
+              ], -1)),
+              createElementVNode("span", {
+                class: "auto-match",
+                onClick: _cache[0] || (_cache[0] = (...args) => $options.autoMatch && $options.autoMatch(...args))
+              }, "自动匹配字段")
+            ]),
+            createElementVNode("table", _hoisted_7, [
+              _cache[4] || (_cache[4] = createElementVNode("thead", null, [
+                createElementVNode("tr", null, [
+                  createElementVNode("th", null, "字号"),
+                  createElementVNode("th", null, "可导入数据列"),
+                  createElementVNode("th", null, "系统匹配字段"),
+                  createElementVNode("th", null, "操作")
+                ])
+              ], -1)),
+              createElementVNode("tbody", null, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList($data.dataList, (item, index) => {
+                  return openBlock(), createElementBlock("tr", { key: index }, [
+                    createElementVNode("td", null, toDisplayString(index + 1), 1),
+                    createElementVNode("td", null, toDisplayString(item), 1),
+                    $data.selectList[index] ? (openBlock(), createElementBlock("td", _hoisted_8, [
+                      createVNode(_component_el_popover, {
+                        width: "220",
+                        trigger: "click",
+                        ref_for: true,
+                        ref: "popover"
+                      }, {
+                        reference: withCtx(() => [
+                          createVNode(_component_el_input, {
+                            style: { width: "220px" },
+                            readonly: "",
+                            "model-value": $data.selectList[index].text,
+                            placeholder: "请选择",
+                            "suffix-icon": "el-icon-arrow-down"
+                          }, null, 8, ["model-value"])
+                        ]),
+                        default: withCtx(() => [
+                          createElementVNode("div", _hoisted_9, [
+                            createVNode(_component_el_tree, {
+                              ref_for: true,
+                              ref: "tree",
+                              data: $options.languageList,
+                              accordion: "",
+                              "expand-on-click-node": "",
+                              onNodeClick: (data) => $options.selectMatch(index, data)
+                            }, {
+                              default: withCtx(({ data }) => [
+                                createElementVNode("span", _hoisted_10, toDisplayString(data.text), 1)
+                              ]),
+                              _: 1
+                            }, 8, ["data", "onNodeClick"])
+                          ])
+                        ]),
+                        _: 2
+                      }, 1536)
+                    ])) : createCommentVNode("", true),
+                    createElementVNode("td", {
+                      class: "clear-match",
+                      onClick: ($event) => $options.clearMatch(index)
+                    }, " 清空", 8, _hoisted_11)
+                  ]);
+                }), 128))
+              ])
+            ]),
+            createElementVNode("div", _hoisted_12, [
+              createVNode(_component_el_button, {
+                type: "primary",
+                onClick: $options.excelToSystem,
+                loading: $data.isRequesting
+              }, {
+                default: withCtx(() => [..._cache[5] || (_cache[5] = [
+                  createTextVNode("下一步", -1)
+                ])]),
+                _: 1
+              }, 8, ["onClick", "loading"]),
+              createVNode(_component_el_button, { onClick: $options.backUp }, {
+                default: withCtx(() => [..._cache[6] || (_cache[6] = [
+                  createTextVNode("返回", -1)
+                ])]),
+                _: 1
+              }, 8, ["onClick"])
+            ])
+          ])) : createCommentVNode("", true),
+          $data.stepIndex === 3 ? (openBlock(), createElementBlock("div", _hoisted_13, [
+            _cache[10] || (_cache[10] = createElementVNode("div", { class: "over" }, "数据导入完成", -1)),
+            createElementVNode("div", null, [
+              _cache[7] || (_cache[7] = createTextVNode("共导入", -1)),
+              createElementVNode("span", _hoisted_14, toDisplayString($data.length), 1),
+              _cache[8] || (_cache[8] = createTextVNode("条数据", -1))
+            ]),
+            createElementVNode("div", _hoisted_15, [
+              createVNode(_component_el_button, {
+                type: "primary",
+                onClick: _ctx.backPage
+              }, {
+                default: withCtx(() => [..._cache[9] || (_cache[9] = [
+                  createTextVNode("返回数据列表", -1)
+                ])]),
+                _: 1
+              }, 8, ["onClick"])
+            ])
+          ])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      })
+    ])
+  ]);
+}
+const LanguageImportPage = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-aee68fcb"]]);
+export {
+  LanguageImportPage as default
+};