qimall/addons/Store/client/views/goods/import-store-goods.php

<style>
    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .tag-item {
        margin-right: 5px;
    }

    .btn {
        margin: 0;
        padding: 0;
        border: 1px solid transparent;
        outline: none;
        color: #409EFF;
        font-size: 14px;
        cursor: pointer;
    }
    .el-step__title.is-finish {
        position: absolute;
        left: -18px;
    }
    .el-step__title.is-process {
        position: absolute;
        left: -18px;
    }
    .el-step__title.is-wait {
        position: absolute;
        left: -18px;
    }
</style>
<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div>
                <span>商品导入</span>
                <el-button @click="$navigate({r:'store/client/goods/goods-batch-send-model'})" style="margin-left: 20px;" size="small">批量导入模板下载</el-button>
            </div>
        </div>
        <div class="table-body">
            <el-steps style="margin-left: 10px" :space="300" :active="active">
                <el-step title="选择文件">
                    <template slot="icon">
                        <img src="resources/img/mall/goods/finish-2.png">
                    </template>
                </el-step>
                <el-step title="导入数据">
                    <template slot="icon">
                        <img v-if="active > 1" src="resources/img/mall/goods/finish-2.png">
                    </template>
                </el-step>
                <el-step title="导入完成">
                    <template class="is-success" slot="icon">
                        <img v-if="active > 2" src="resources/img/mall/goods/finish-2.png">
                    </template>
                </el-step>
            </el-steps>

            <template v-if="active <= 2">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
                         style="margin-top: 30px;width: 600px">
                    <el-form-item></el-form-item>
                    <el-form-item></el-form-item>

                    <el-form-item label="上传数据" prop="file">
                        <template slot="label">
                            <span>上传数据</span>
                            <el-tooltip effect="dark" content="仅支持上传csv格式"
                                        placement="top">
                                <i class="el-icon-info"></i>
                            </el-tooltip>
                        </template>
                        <label>{{ruleForm.file ? ruleForm.file.name : ''}}</label>
                        <el-upload
                                action=""
                                :multiple="false"
                                :http-request="handleFile"
                                :on-change="excelChange"
                                :show-file-list="false">
                            <span style="color: #409EFF;">选择本地文件</span>
                        </el-upload>
                        <div style="color: #ff0000;">注：一次最多导入3000条数据</div>
                    </el-form-item>

                    <el-form-item>
                        <el-button :loading="btnLoading" type="primary" @click="submit('ruleForm',0)" size="small">一键导入
                        </el-button>
                        <el-button :loading="btnLoading" type="primary" @click="submit('ruleForm',1)" size="small">异步导入
                        </el-button>
                    </el-form-item>
                </el-form>
            </template>
            <template v-else>
                <div style="width: 600px;height: 200px" flex="dir:top cross:center main:center">
                    <div flex="dir:left cross:center">
                        <img src="resources/img/mall/goods/finish-1.png">
                        <span style="margin-left: 10px">成功导入{{successCount}}条数据</span>
                        <a class="btn" style="margin-left: 10px;" href="index.php?r=mall/goods/index" >返回商品列表</a>
                        <a class="btn" style="margin-left: 10px;" href="index.php?r=mall/goods/import-goods" >继续导入</a>
                    </div>
                    <div v-if="errorCount > 0" style="margin-top: 20px;">
                        <span>导入失败<span style="color: red;">{{errorCount}}</span>条数据</span>
                        <span style="color: #409EFF;margin-left: 10px;"></span>
                    </div>
                </div>
            </template>
            <el-dialog
                    :before-close="beforeClose"
                    :close-on-click-modal="false"
                    title="上传"
                    :close-on-click-modal="false"
                    :visible.sync="importDialogVisible"
                    width="20%">
                <template>
                    <el-progress :text-inside="true" :stroke-width="18"
                                 :percentage="importParams.percentage"></el-progress>
                </template>
            </el-dialog>
        </div>
    </el-card>
    <div class="table-body" v-loading="loading">
        <p style="margin-right: 30px;">导入记录</p>
        <el-table class="table-info" :data="temp_list" style="width: 100%">
            <el-table-column
                    label="序号"
                    min-width="100"
                    align="center"
                    prop="id"
            >
            </el-table-column>
            <el-table-column
                    label="导入时间"
                    min-width="300" align="center">
                <template slot-scope="scope">
                    {{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}
                </template>
            </el-table-column>
            <el-table-column
                    label="导入数据行"
                    prop="counts"
                    min-width="200" align="center">
            </el-table-column>
            <el-table-column
                    label="导入成功数据行"
                    prop="success_counts"
                    min-width="200" align="center">
            </el-table-column>
            <el-table-column
                    label="导入失败数据行"
                    prop="fail_counts"
                    min-width="200" align="center">
            </el-table-column>
<!--            <el-table-column-->
<!--                    label="导入状态"-->
<!--                    prop="status_text"-->
<!--                    min-width="300" align="center">-->
<!--            </el-table-column>-->
            <el-table-column label="操作" min-width="200">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" v-if="scope.row.url != ''" @click="download_files(scope.row.url)">下载</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination flex flex-x-between">
            <el-pagination @current-change="pagination" background layout="prev, pager, next"
                           :page-count="pageCount" :current-page="currentPage"></el-pagination>
        </div>

    </div>

</div>

<script type="module">

    const app = new Vue({
        el: '#app',
        data() {
            return {
                ruleForm: {
                    file: '',
                    file_path: '',
                },
                active: 1,
                rules: {
                    file: [
                        {required: true, message: '请上传文件', trigger: 'change'},
                    ],
                },
                btnLoading: false,
                errorCount: 0,
                successCount: 0,
                importDialogVisible: false,
                importParams: {
                    percentage: 0,
                    current_num: 1,
                },
                listLoading: false,
                errorList : [],
                importVisible: false,
                success_progress: 0,
                fail_progress: 0,
                is_clear: 0,
                t1:'',
                user_import_log_id:'',
                url:'',
                temp_list:[],
                page: 1,
                pageCount: 0,
                currentPage: 0,
                total_count: 0,
                loading: '',
            }
        },
        created() {
            this.getTempList();
        },
        methods: {
            handleFile() {
            },
            excelChange(file, fileList) {
                this.ruleForm.file = file.raw;
            },
            submit(formName,sync) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm('是否确认导入？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.btnLoading = true;
                            this.active += 1;
                            this.importDialogVisible = true;
                            this.submitAction(sync);
                        }).catch(() => {
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            submitAction(sync) {
                let self = this;
                let formData = new FormData();
                formData.append('file', this.ruleForm.file);
                formData.append('sync', sync);
                formData.append('current_num', this.importParams.current_num);
                formData.append('file_path', this.importParams.file_path ? this.importParams.file_path : '');
                request({
                    header: {
                        'Content-Type': 'multipart/form-data'
                    },
                    params: {
                        r: 'store/client/goods/import-store-goods'
                    },
                    data: formData,
                    method: 'post'
                }).then(e => {
                    this.btnLoading = false;
                    if (e.data.code === 0) {
                        let data = e.data.data;
                        self.successCount = data.success_counts;
                        self.errorCount = data.fail_counts;
                        this.importParams.percentage = ((self.successCount+self.errorCount)/data.counts)*100;
                        if(self.errorCount>0){
                            this.active=3;
                        }
                        self.importDialogVisible = false;
                        location.reload();
                    } else {
                        this.importDialogVisible = false;
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.btnLoading = false;
                });
            },
            beforeClose() {
                if (this.importParams.percentage < 100) {
                    this.$confirm('导入用户尚未完成, 是否确认关闭?', '警告', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.importDialogVisible = false;
                        navigateTo({r: 'store/client/goods/import-store-goods'});
                    }).catch(() => {
                    });
                }
            },
            download_files(url){
                console.log(url);
                window.location.href=url;
            },
            getTempList() {
                this.loading = true;
                console.log(this.page);
                this.$request({
                    params: {
                        r: 'store/client/goods/get-goods-import-log',
                    },
                    method: 'post',
                    data: {
                        page: this.page
                    }
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        this.temp_list = e.data.data.list;
                        this.pageCount = e.data.data.page_count;
                        this.currentPage = e.data.data.page;
                        this.total_count = e.data.data.pagination.total_count;
                    }
                });
            },
            pagination(currentPage) {
                this.checkedAll = false;
                this.selFormArr = [];
                this.page = currentPage;
                this.getTempList();
            },
            currentChange(e) { //分页点击
                this.page = e;
                this.getTempList();
                console.log(e, '这是他点击了那个页面');
            },
        },
        mounted: function () {

        }
    });
</script>
<style scoped>
    img {
        display: block;
    }

    .nav {
        background: #ffffff;
        border-radius: 5px;
        padding: 26px 24px;
        margin-bottom: 10px;
        /*color: #808695;*/
    }

    .cate_header {
        font-size: 14px;
        color: #808695;
    }

    .cate_title {
        margin-right: 24px;
    }

    .cate_item_active {
        color: #2DB7F5;
        background: #EDF6FF;
    }

    .template_body {
        background: #fff;
        border-radius: 0px 0 5px 5px;
        padding: 0px 49px 70px;
    }

    .template_item {
        width: 220px;
        margin: 0 38px 60px 0;
        cursor: pointer;
    }

    .template_img_box {
        width: 220px;
        height: 430px;
        /* border: 1px solid #BFBFBF; */
        border-radius: 18px;
        overflow: hidden;
        position: relative;
        background: url('resources/img/mall/decorate/duihuakuang240.png');
        background-size: 100% 100%;
    }

    .template_img_block {
        width: 95.7%;
        height: 399px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 26px;
        border-radius: 0 0 15px 15px;
        overflow: hidden;
    }

    .template_img {
        width: 100%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .mask {
        background: rgba(0, 0, 0, 0.5);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        opacity: 0;
        transition: all 0.3s;
        flex-direction: column;
    }

    .template_item:hover .mask {
        opacity: 1;
    }

    .temp_preview_small {
        width: 80px;
        height: 30px;
        border-radius: 5px;
        text-align: center;
        line-height: 30px;
        background: #ffffff;
        color: #313131;
        font-size: 12px;
    }

    .temp_preview {
        width: 170px;
        height: 30px;
        border-radius: 30px;
        background: #2DB7F5;
        color: #ffffff;
        text-align: center;
        line-height: 30px;
        font-size: 12px;
        margin-bottom: 8px;
    }

    .template_text {
        font-size: 14px;
        color: #515A6E;
        padding: 0 12px;
    }

    .template_title {
        margin: 10px 0 6px;
    }

    .use_number {
        font-size: 14px;
        align-items: center;
        color: #C5C8CE;
    }

    /* 公共样式 */
    .flex {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
    }

    .flex-x-center {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .flex-x-between {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-pack: space-between;
        -webkit-justify-content: space-between;
        -ms-flex-pack: space-between;
        justify-content: space-between;
    }

    .flex-y-center {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
    }

    /* 溢出隐藏 */
    .over1 {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .over2 {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .pagination {
        width: 100%;
        flex-direction: row-reverse;
    }

    .pop {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
    }

    /* 预览框 */
    .preview_box {
        width: 377px;
        height: 760px;
        background: url('statics/img/mall/decorate/duihuakuang.png')no-repeat;
        position: relative;
    }

    .preview_content {
        background: #ffffff;
        width: 357px;
        height: 696px;
        position: absolute;
        top: 56px;
        left: 50.2%;
        transform: translateX(-50%);
        border-radius: 0 0 37px 36px;
        scrollbar-width: none;
        /* firefox */
        -ms-overflow-style: none;
        /* IE 10+ */
        overflow-x: hidden;
        overflow-y: auto;
    }

    .preview_content::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

    .preview_img {
        width: 100%;
    }

    .el-dialog__body {
        padding: 0;
        width: 377px;
        height: 760px;
    }

    .el-dialog__header {
        display: none;
    }

    .el-dialog {
        min-width: 377px;
        max-width: 377px;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .header_box {
        padding: 25px;
        background: #fff;
        border-radius: 5px 5px 0 0;
        color: #808695;
    }

    .add_temp_right {
        width: 400px;
    }

    .el-card {
        background: transparent;
        box-shadow: none !important;
        border: 0;
    }

    .el-card__body {
        padding: 0;
    }

    .logo_text {
        width: 56px;
        height: 21px;
        border-radius: 30px;
        background: #FF7161;
        text-align: center;
        line-height: 21px;
        color: #fff;
    }

    .logo_text2 {
        background: #C5C8CE;
    }
</style>