XAMYWXTUI/src/views/baseinfo/rtu/rtuImportProcess.vue

<!--
 * @Title: 
 * @Description: 
 * @Author: swp
 * @Date: 2022-08-24 10:49:21
 * @LastEditors: 
 * @LastEditTime: 2022-08-24 10:49:21
-->
<template>
    <div>
        <el-row>
            <el-col :span="24">
                <basic-container>
                    <avue-form :option="debugOption" v-model="debugForm" />
                    <div style="color:gray;margin-top: 0px;">*测站导入操作任务在后台运行，请在提交测站表格文件后打开测站导入历史页面查看导入状态</div>
                </basic-container>
            </el-col>

        </el-row>
        <el-row>
            <el-col :span="24">
                <basic-container>
                    <el-upload ref="upload" :action="uploadUrl" :on-preview="handlePreview" :on-remove="handleRemove"
                        :before-upload="beforeUpload" :on-error="onError" :on-success="onSuccess" :file-list="fileList"
                        :on-progress="onProgress" :auto-upload="false" :multiple="false" limit="1" accept=".xlsx"
                        :data="postData">
                        <el-button slot="trigger" size="small" type="primary">选择测站数据文件</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">开始导入
                        </el-button>
                        <div slot="tip" class="el-upload__tip">只能上传XLSX 工作表</div>
                    </el-upload>
                </basic-container>
            </el-col>
        </el-row>
    </div>
</template>

<script>

import { getToken } from "@/util/auth";
// import { validatenull } from "@/util/validate";

export default {
    data() {
        return {
            fileName: '',
            editForm: {},
            editDialog: false,
            form: {},
            selectionList: [],
            query: {},
            loading: true,
            postData: {},
            uploadUrl: '',
            debugForm: {},
            debugOption: {
                labelWidth: 150,
                submitBtn: false,
                emptyBtn: false,
                column: [
                    {
                        label: '导入备注',
                        prop: 'remark',
                        span: 24,
                        rules: [{
                            required: true,
                            message: "测站导入是重要的操作，为了记录必要的信息，请务必录入相关操作信息",
                            trigger: "blur"
                        }],
                    },
                    {
                        label: '导入操作类型',
                        prop: 'saveType',
                        type: 'radio',
                        span: 24,
                        value: 0,
                        dicData: [
                            {
                                label: '只新增',
                                value: 0,
                            },
                            {
                                label: '只更新',
                                value: 1,
                            },
                            {
                                label: '新增或更新',
                                value: 2,
                            }
                        ],
                        rules: [{
                            required: true,
                        }],
                    },
                    {
                        label: '更新列配置',
                        prop: 'cellUpdate',
                        type: 'checkbox',
                        span: 24,

                        disabled: true,
                        dicData: [{
                            label: '盟市',
                            value: 2
                        }, {
                            label: '旗县区',
                            value: 3
                        }, {
                            label: '测站名称',
                            value: 4
                        }, {
                            label: '站点类型',
                            value: 5
                        }, {
                            label: '安装位置描述',
                            value: 6
                        }, {
                            label: '经度',
                            value: 7
                        }, {
                            label: '纬度',
                            value: 8
                        }, {
                            label: '运维单位',
                            value: 9
                        }, {
                            label: 'RTU品牌',
                            value: 10
                        }, {
                            label: 'RTU型号',
                            value: 11
                        }, {
                            label: 'RTU更换时间',
                            value: 12
                        }, {
                            label: '雨量计品牌',
                            value: 13
                        }, {
                            label: '雨量计型号',
                            value: 14
                        }, {
                            label: '雨量计更换时间',
                            value: 15
                        }, {
                            label: '水位计传感器类型',
                            value: 16
                        }, {
                            label: '水位计品牌',
                            value: 17
                        }, {
                            label: '水位计型号',
                            value: 18
                        }, {
                            label: '水位计更换时间',
                            value: 19
                        }, {
                            label: '墒情站传感器类型',
                            value: 20
                        }, {
                            label: '墒情传感器品牌',
                            value: 21
                        }, {
                            label: '墒情传感器型号',
                            value: 22
                        }, {
                            label: '墒情传感器更换时间',
                            value: 23
                        }, {
                            label: '蓄电池容量',
                            value: 24
                        }, {
                            label: '蓄电池更换时间',
                            value: 25
                        }, {
                            label: '太阳能板',
                            value: 26
                        }, {
                            label: 'SIM卡号',
                            value: 27
                        }, {
                            label: 'SIM卡开卡单位',
                            value: 28
                        }, {
                            label: 'SIM卡缴费截止时间',
                            value: 29
                        }, {
                            label: '是否卫星通讯',
                            value: 30
                        }, {
                            label: '通讯模式',
                            value: 31
                        },],
                        all: true,

                    }
                ]
            }
        };
    },

    props: {
        visible: {
            tyep: [Boolean],
            default: false,
        },
        importLoading: {
            tyep: [Boolean],
            default: false,
        }
    },
    name: 'rtuImportProcess',
    created() {
        this.init();
    },
    methods: {
        init() {
            this.uploadUrl = this.getUploadUrl();
        },
        submitUpload() {
            this.postData['remark'] = this.debugForm.remark;
            this.postData['saveType'] = this.debugForm.saveType;
            let cellUpdateText = '';
            let cellUpdate = [];
            cellUpdate = this.debugForm.cellUpdate;
            for (let i = 0; i < cellUpdate.length; i++) {
                if (cellUpdateText !== '') {
                    cellUpdateText = cellUpdateText + ',';
                }
                cellUpdateText = cellUpdateText + cellUpdate[i];
            }
            this.postData['cellUpdate'] = cellUpdateText;
            //this.$message.success(JSON.stringify(this.postData))
            this.$refs.upload.submit();

        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
            // this.$message.success('handleRemove')
        },
        handlePreview(file) {
            console.log(file);
            //  this.$message.success('handlePreview')
        },
        beforeUpload(file) {
            console.log(file);
            // this.$message.success('beforeUpload')
            return true;
        },
        getUploadUrl: function () {
            return `/api/galaxy-business/data/manage/import/rtu?${this.website.tokenHeader
                }=${getToken()}`;
        },
        onProgress(event, file, fileList) {
            console.log(fileList);
            this.$emit("update:importLoading", true);
        },
        onError(err, file, fileList) {
            console.log(fileList);
            this.$message.warning(err);
        },
        onSuccess(response, file, fileList) {
            console.log(fileList);
            this.$message.success('已成功提交导入任务!')
            this.$refs.upload.clearFiles();
            this.$emit("update:importLoading", false);
            this.$emit("update:visible", false);
        },
    },
};
</script>
<style>
.mb0 {
    margin-top: 10;

}
</style>