bri-components 1.5.22 → 1.6.0

package/src/components/list/common/importModal.vue

@@ -1,243 +1,243 @@
-<template>
-    <div class="importModal">
-        <dsh-modal
-            class="importModal-modal"
-            v-model="showModal"
-            :mode="modalPropsObj.mode"
-            :propsObj="modalPropsObj"
-        >
-            <div style="padding: 20px;">
-                <Upload
-                    style="margin-bottom: 20px;"
-                    :action="window.config.apiUrl+`/app/${this.appKey}/xMod/${modKey}/member/importExcel`"
-                    :headers="undefined"
-                    :data="importParams"
-                    :name="'file_stream'"
-                    :multiple="false"
-                    :paste="false"
-                    :disabled="false"
-                    type="drag"
-                    :with-credentials="false"
-                    accept="xlsx"
-                    :format="format"
-                    :show-upload-list="true"
-                    :default-file-list="[]"
-                    :max-size="20480"
-                    :on-format-error="handleImportFormatError"
-                    :before-upload="beforeUpload"
-                >
-                    <Icon
-                        type="md-cloud-upload"
-                        size="60"
-                    />
-                    <p>点击或者拖拽文件到此处上传</p>
-                </Upload>
-
-                <div v-if="file !== null">
-                    <div class="importModal-file">
-                        <span>文件名称: {{ file.name }}</span>
-                        <Icon
-                            class="importModal-file-cancel"
-                            type="ios-close"
-                            @click="cacelUpload"
-                        />
-                    </div>
-                    <Button
-                        type="primary"
-                        :loading="loadingStatus"
-                        @click="handleUpload"
-                    >
-                        {{ loadingStatus ? '上传中' : '上传' }}
-                    </Button>
-                </div>
-
-                <!-- 导入说明 -->
-                <div>
-                    <p style="display: flex; padding: 5px 0px;">
-                        <strong style="width: 75px;">新增记录：</strong>
-                        <span style="flex: 1;">
-                            下载
-                            <a @click="handleExportTemplate()">
-                                《{{ tempName }}模板》
-                            </a>
-                            ，在本地新增记录后，导入文件
-                        </span>
-                    </p>
-                    <p style="display: flex; padding: 5px 0px;">
-                        <strong style="width: 75px;">更新记录：</strong>
-                        <span style="flex: 1;">在工作表中选择需要更新的记录导出，在本地更新记录后，导入文件</span>
-                    </p>
-                </div>
-            </div>
-        </dsh-modal>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "importModal",
-        props: {
-            value: {
-                type: Boolean,
-                default: false
-            },
-            propsObj: {
-                type: Object,
-                default () {
-                    return {};
-                }
-            },
-            importParams: {
-                type: Object,
-                default () {
-                    return {};
-                }
-            }
-        },
-        data () {
-            return {
-                modalPropsObj: {
-                    mode: "middle",
-                    title: "导入excel数据",
-                    width: "960",
-                    className: "vertical-center-modal",
-                    footerHide: true
-                },
-
-                format: ["xlsx"],
-                file: null,
-                loadingStatus: false,
-                window: window,
-                timer: null
-            };
-        },
-        computed: {
-            showModal: {
-                get () {
-                    return this.value;
-                },
-                set (val) {
-                    this.$emit("input", val);
-                }
-            },
-            tempName () {
-                return this.propsObj._name || "";
-            },
-            modKey () {
-                return this.propsObj.modKey;
-            },
-            screenKey () {
-                return this.propsObj.screenKey;
-            },
-            appKey () {
-                return this.propsObj.appKey;
-            }
-        },
-        created () {},
-        methods: {
-            // 接口 -下载excel模板
-            handleExportTemplate () {
-                if (this.timer) return;
-                this.$https({
-                    url: {
-                        module: "sheet",
-                        name: "exportTemplate"
-                    },
-                    params: {
-                        screenKey: this.screenKey,
-                        ...this.importParams
-                    },
-                    callback: data => {
-                        this.timer = setInterval(this.getTransitStatus(data.jobId), 1000);
-                    }
-                });
-            },
-            // 上传文件before函数
-            beforeUpload (file) {
-                this.file = file;
-                return false;
-            },
-
-            cacelUpload () {
-                this.file = null;
-            },
-            // 监控上传文件的类型
-            handleImportFormatError (file) {
-                this.$Notice.warning({
-                    title: "文件格式不正确!",
-                    desc: `<span style="color: red;">${file.name}</span> 的文件格式不正确。<br/>请上传${this.format}的文件类型!`,
-                    duration: 0
-                });
-            },
-            handleUpload () {
-                let formData = new FormData();
-                formData.append("file_stream", this.file);
-                formData.append("modKey", this.modKey);
-
-                Object.entries(this.importParams).forEach(arr => {
-                    formData.append(arr[0], arr[1]);
-                });
-
-                this.$https({
-                    url: {
-                        module: "sheet",
-                        name: "importExcel"
-                    },
-                    params: formData,
-                    content: {
-                        headers: { "Content-Type": "multipart/form-data" }
-                    },
-                    loadingName: "loadingStatus",
-                    successTip: "导入成功!",
-                    callback: data => {
-                        this.showModal = false;
-                        this.file = null;
-
-                        this.$emit("importCb", data);
-                    },
-                    error: data => {
-                        this.$Message.error("导入失败:" + data.msg);
-                        this.file = null;
-                    }
-                });
-            },
-
-            getTransitStatus (id) {
-                let that = this;
-                return function () {
-                    that.getJobStatus(id);
-                };
-            },
-            // 状态查询
-            getJobStatus (id) {
-                this.$https({
-                    url: {
-                        module: "sheet",
-                        name: "getJobStatus"
-                    },
-                    params: {
-                        jobId: id
-                    },
-                    callback: data => {
-                        if (data.status === "completed") {
-                            clearInterval(this.timer);
-                            window.location.href = data.url;
-                        } else if (data.status === "failed") {
-                            clearInterval(this.timer);
-                            this.$Message.info({ content: "操作失败，请稍后再试" });
-                        }
-                    },
-                    error: data => {
-                        this.timer = null;
-                    }
-                });
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    .importModal {
-
-    }
-</style>
+<template>
+    <div class="importModal">
+        <dsh-modal
+            class="importModal-modal"
+            v-model="showModal"
+            :mode="modalPropsObj.mode"
+            :propsObj="modalPropsObj"
+        >
+            <div style="padding: 20px;">
+                <Upload
+                    style="margin-bottom: 20px;"
+                    :action="window.config.apiUrl+`/app/${this.appKey}/xMod/${modKey}/member/importExcel`"
+                    :headers="undefined"
+                    :data="importParams"
+                    :name="'file_stream'"
+                    :multiple="false"
+                    :paste="false"
+                    :disabled="false"
+                    type="drag"
+                    :with-credentials="false"
+                    accept="xlsx"
+                    :format="format"
+                    :show-upload-list="true"
+                    :default-file-list="[]"
+                    :max-size="20480"
+                    :on-format-error="handleImportFormatError"
+                    :before-upload="beforeUpload"
+                >
+                    <Icon
+                        type="md-cloud-upload"
+                        size="60"
+                    />
+                    <p>点击或者拖拽文件到此处上传</p>
+                </Upload>
+
+                <div v-if="file !== null">
+                    <div class="importModal-file">
+                        <span>文件名称: {{ file.name }}</span>
+                        <Icon
+                            class="importModal-file-cancel"
+                            type="ios-close"
+                            @click="cacelUpload"
+                        />
+                    </div>
+                    <Button
+                        type="primary"
+                        :loading="loadingStatus"
+                        @click="handleUpload"
+                    >
+                        {{ loadingStatus ? '上传中' : '上传' }}
+                    </Button>
+                </div>
+
+                <!-- 导入说明 -->
+                <div>
+                    <p style="display: flex; padding: 5px 0px;">
+                        <strong style="width: 75px;">新增记录：</strong>
+                        <span style="flex: 1;">
+                            下载
+                            <a @click="handleExportTemplate()">
+                                《{{ tempName }}模板》
+                            </a>
+                            ，在本地新增记录后，导入文件
+                        </span>
+                    </p>
+                    <p style="display: flex; padding: 5px 0px;">
+                        <strong style="width: 75px;">更新记录：</strong>
+                        <span style="flex: 1;">在工作表中选择需要更新的记录导出，在本地更新记录后，导入文件</span>
+                    </p>
+                </div>
+            </div>
+        </dsh-modal>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "importModal",
+        props: {
+            value: {
+                type: Boolean,
+                default: false
+            },
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            importParams: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            }
+        },
+        data () {
+            return {
+                modalPropsObj: {
+                    mode: "middle",
+                    title: "导入excel数据",
+                    width: "960",
+                    className: "vertical-center-modal",
+                    footerHide: true
+                },
+
+                format: ["xlsx"],
+                file: null,
+                loadingStatus: false,
+                window: window,
+                timer: null
+            };
+        },
+        computed: {
+            showModal: {
+                get () {
+                    return this.value;
+                },
+                set (val) {
+                    this.$emit("input", val);
+                }
+            },
+            tempName () {
+                return this.propsObj._name || "";
+            },
+            modKey () {
+                return this.propsObj.modKey;
+            },
+            screenKey () {
+                return this.propsObj.screenKey;
+            },
+            appKey () {
+                return this.propsObj.appKey;
+            }
+        },
+        created () {},
+        methods: {
+            // 接口 -下载excel模板
+            handleExportTemplate () {
+                if (this.timer) return;
+                this.$https({
+                    url: {
+                        module: "sheet",
+                        name: "exportTemplate"
+                    },
+                    params: {
+                        screenKey: this.screenKey,
+                        ...this.importParams
+                    },
+                    callback: data => {
+                        this.timer = setInterval(this.getTransitStatus(data.jobId), 1000);
+                    }
+                });
+            },
+            // 上传文件before函数
+            beforeUpload (file) {
+                this.file = file;
+                return false;
+            },
+
+            cacelUpload () {
+                this.file = null;
+            },
+            // 监控上传文件的类型
+            handleImportFormatError (file) {
+                this.$Notice.warning({
+                    title: "文件格式不正确!",
+                    desc: `<span style="color: red;">${file.name}</span> 的文件格式不正确。<br/>请上传${this.format}的文件类型!`,
+                    duration: 0
+                });
+            },
+            handleUpload () {
+                let formData = new FormData();
+                formData.append("file_stream", this.file);
+                formData.append("modKey", this.modKey);
+
+                Object.entries(this.importParams).forEach(arr => {
+                    formData.append(arr[0], arr[1]);
+                });
+
+                this.$https({
+                    url: {
+                        module: "sheet",
+                        name: "importExcel"
+                    },
+                    params: formData,
+                    content: {
+                        headers: { "Content-Type": "multipart/form-data" }
+                    },
+                    loadingName: "loadingStatus",
+                    successTip: "导入成功!",
+                    callback: data => {
+                        this.showModal = false;
+                        this.file = null;
+
+                        this.$emit("importCb", data);
+                    },
+                    error: data => {
+                        this.$Message.error("导入失败:" + data.msg);
+                        this.file = null;
+                    }
+                });
+            },
+
+            getTransitStatus (id) {
+                let that = this;
+                return function () {
+                    that.getJobStatus(id);
+                };
+            },
+            // 状态查询
+            getJobStatus (id) {
+                this.$https({
+                    url: {
+                        module: "sheet",
+                        name: "getJobStatus"
+                    },
+                    params: {
+                        jobId: id
+                    },
+                    callback: data => {
+                        if (data.status === "completed") {
+                            clearInterval(this.timer);
+                            window.location.href = data.url;
+                        } else if (data.status === "failed") {
+                            clearInterval(this.timer);
+                            this.$Message.info({ content: "操作失败，请稍后再试" });
+                        }
+                    },
+                    error: data => {
+                        this.timer = null;
+                    }
+                });
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .importModal {
+
+    }
+</style>