ant vue 引入excel并展示

 

<template>
    <div >

        <a-select style="width:200px;" placeholder="请选择标注类型" @change="spotClassChange">
            <a-select-option v-for="(item, index) in spotClassList" :value="item.id" :key="index">
                {{ item.value }}
            </a-select-option>

        </a-select>


        <div class="">

            <!-- excel文件上传 -->
            <a-upload style="display: flex; margin: 5px" name="file" :multiple="false" action="/" method="post"
                accept=".xls, .xlsx" :headers="headers" @change="readExcel" :showUploadList="false">
                <!-- showUploadList是把文件list隐藏-->
                <a-button size="small" type="sive">文件</a-button>
            </a-upload>
            <!-- excel传入表格后的编辑和删除 -->
            <a-table :columns="uploadColumns" :data-source="uploadData" :pagination="false"
                :rowKey="(record, index) => { return index }">
                <template v-for="col in dataTitle" :slot="col" slot-scope="text, record">
                    <div :key="col">
                        <!-- 这个报错不用管，ant-design上粘的就报错 -->
                        <!--编辑行  -->
                        <a-input v-if="record.editable" style="margin: -5px 0; " :value="text"
                            @change="e => handleChange(e.target.value, record.key, col)" />
                        <template v-else>
                            {{ text }}
                        </template>
                    </div>
                </template>
                <!-- 编辑按钮 -->
                <template slot="operation" slot-scope="text, record">
                    <div class="editable-row-operations" style="width:120px;">
                        <span v-if="record.editable">
                            <a @click="() => save(record.key)">保存</a>
                            <a-popconfirm title="确定取消?" @confirm="() => cancel(record.key)" style="margin-left:12px">
                                <a>取消</a>
                            </a-popconfirm>
                        </span>
                        <span v-else>
                            <a :disabled="editingKey !== ''" @click="() => edit(record.key)">编辑</a>
                        </span>
                        <!-- <template slot="operation" slot-scope="text, record"> </template> -->
                           
                           <!-- 删除按钮 -->
                           <a-popconfirm v-if="uploadData.length" title="确定删除吗?"
                                @confirm="() => onDelete(record.key)">
                                <a  :disabled="editingKey !== ''"  href="javascript:;">&nbsp;&nbsp; &nbsp;删除</a>
                            </a-popconfirm>
                       
                    </div>
                </template>

                <!-- <div slot="action" slot-scope="{record}">

                    <a style="margin-right: 8px" @click="editRecord(record)">
                        <a-icon type="edit" />编辑
                    </a>

                    <a-popconfirm title="确定要删除该列?" ok-text="是" cancel-text="否"
                        @confirm="deleteRecord(record.spotItemId)">

                        <a v-auth="`delete`">
                            <a-icon type="delete" />删除
                        </a>
                    </a-popconfirm>

                </div> -->

            </a-table>
        </div>
        <!-- 编辑的Modal模态框 -->
        <!-- <div class="editModal">
            <a-modal v-model="editvisible" title="编辑" style="text-align:center" on-ok="edithandleOk">
                <template slot="footer">
                    <a-button key="back" @click="edithandleCancel()">
                        取消
                    </a-button>
                    <a-button key="submit" type="primary" :loading="loading" @click="edithandleOk()">
                        确定
                    </a-button>
                </template>
     
                <editExcel ref="refeditSpot"></editExcel>

            </a-modal>
        </div> -->



    </div>

</template>


<script>
// 引入组件



import editExcel from './editExcel.vue'
import XLSX from "xlsx";
import { list } from '@/services/spotClassManager'






export default {
    components: { editExcel },
    data() {

        return {

            editingKey: '',
            loading: false,
            recordExcelData: null,
            editvisible: false,
            spotClassId: null,
            spotClassValue: null,
            uploadDataImport: [],
            dataItem: [],
            dataTitle: [],
            excelImport: [],
            uploadData: [], //文件数据
            fileData: '', // 保存选择的文件
            //上传文件请求头,我这个没走后端，没啥用，姑且放这吧
            headers: {
                authorization: "authorization-text",
            },
            uploadColumns: [
            ],
            //数组选项

            spotClassList: [],

            options: [
                {
                    id: 0,
                    value: "党政机关"
                }, {
                    id: 1,
                    value: "学校"
                }, {
                    id: 2,
                    value: "餐馆"
                },
                {
                    id: 3,
                    value: "公司"
                },
                {
                    id: 4,
                    value: "公园"
                },
                {
                    id: 5,
                    value: "美食"
                },]


        }

    },


    created() {

        list().then(res => {
            console.log(res);
            this.spotClassList = [];//清除push
            if (res.length !== 0) {
                JSON.parse(res.data.msg).forEach((element, index) => {
                    this.spotClassList.push({
                        id: element.pointTypeId,
                        value: element.typeName,

                    });
                    //   this.dataSearch = this.spotClassList;
                });
            }
        })
    },
    methods: {
        //-----------点击删除操作
         onDelete(key) {
      const dataSource = [...this.uploadData];
      this.uploadData = dataSource.filter(item => item.key !== key);
        // 删除后更新传给后端的值
         this.excelImport = [];
            this.excelImport.push(this.dataTitle)
            for (let i = 0; i < this.uploadData.length; i++) {
                // console.log(that.uploadData[i])\
                var json = this.uploadData[i];
                var tempJson = [];
                for (var key in json) {
                    if (key === "key") {
                        continue;
                    }
                    tempJson.push(json[key] + "");
                    // console.log("最后传的json的key",key + ":" + json[key]);//json对象中属性的名字：对象中属性的值
                }
                this.excelImport.push(tempJson);
                // that.excelImport.push(Object.values( that.uploadData[i]));
            }
            this.$emit('func', this.excelImport, this.spotClassId, this.spotClassValue);
    },

        //--------点击编辑操作---------
        //编辑信息
        editRecord(record) {
            console.log("record", record);
            let obj = {
                // spotItemId: record.spotItemId,
                // spotItemClass: record.spotItemClass,
                // spotItemName: record.spotItemName,
                // longitude: record.longitude,
                // latitude: record.latitude,
                // spotTelephone: record.spotTelephone,
                // spotAdress: record.spotAdress,
                // spotDescription:record. 
            }
            // console.log("sdfs", record.spotItemId,);
            // this.editId = record.key;
            // this.recordData = obj;
            this.editvisible = true;
        },
        //下拉框子传父组件获取数据
        spotClassChange(value) {
            this.spotClassId = value;
            // this.spotClassValue = value;
            console.log("改变下拉框");

            for (let i = 0; i < this.spotClassList.length; i++) {
                if (this.spotClassList[i].id == value) {
                    this.spotClassValue = this.spotClassList[i].value;
                    break;
                }
            }
            console.log("改变下拉框的id", this.spotClassId);
            console.log("改变下拉框的name", this.spotClassValue);


        },





        // 操作编辑和保存
        handleChange(value, key, column) {
            const newData = [...this.uploadData];
            const target = newData.find(item => key === item.key);
            if (target) {
                target[column] = value;
                this.uploadData = newData;
            }
        },
        edit(key) {

            console.log("编辑传值", key)
            const newData = [...this.uploadData];
            const target = newData.find(item => key === item.key);
            this.editingKey = key;
            if (target) {
                target.editable = true;
                this.uploadData = newData;
                console.log("编辑传值修改后", this.uploadData)
            }
        },
        save(key) {
            this.cacheData = this.uploadData.map(item => ({ ...item }));
            console.log("保存传值", key);
            const newData = [...this.uploadData];
            const newCacheData = [...this.cacheData];
            const target = newData.find(item => key === item.key);
            const targetCache = newCacheData.find(item => key === item.key);
            if (target && targetCache) {

                delete target.editable;
                this.uploadData = newData;
                Object.assign(targetCache, target);
                this.cacheData = newCacheData;
                console.log("保存传值后newdata", newData);
                console.log("保存传值后new", this.uploadData);
            }
            this.editingKey = '';
            this.excelImport = [];
            this.excelImport.push(this.dataTitle)
            for (let i = 0; i < this.uploadData.length; i++) {
                // console.log(that.uploadData[i])\
                var json = this.uploadData[i];
                var tempJson = [];
                for (var key in json) {
                    if (key === "key") {
                        continue;
                    }
                    tempJson.push(json[key] + "");
                    // console.log("最后传的json的key",key + ":" + json[key]);//json对象中属性的名字：对象中属性的值
                }
                this.excelImport.push(tempJson);
                // that.excelImport.push(Object.values( that.uploadData[i]));
                // that.excelImport.push(Object.values( that.uploadData[i])+"");
            }
            this.$emit('func', this.excelImport, this.spotClassId, this.spotClassValue);

        },
        cancel(key) {
            this.cacheData = this.uploadData.map(item => ({ ...item }));
            const newData = [...this.uploadData];
            const target = newData.find(item => key === item.key);
            this.editingKey = '';
            if (target) {
                Object.assign(target, this.cacheData.find(item => key === item.key));
                delete target.editable;
                this.uploadData = newData;
            }
            this.$emit('func', this.excelImport, this.spotClassId, this.spotClassValue);
        },

        // 读取数据,比较离谱的是，每次上传文件它都执行了三次change
        readExcel(files) {
            this.fileData = files // 保存当前选择文件
            let that = this
            // console.log(files.file.originFileObj)
            let type = files.file.name.split('.');
            if (!files) {
                //如果没有文件
                return false
            } else if (type[type.length - 1] !== 'xlsx' && type[type.length - 1] !== 'xls') {
                this.$message.error("上传格式不正确，请上传xls或者xlsx格式")
                return false
            }
            const fileReader = new FileReader()
            // 如果为原生 input 则应是 files[0]
            fileReader.readAsBinaryString(files.file.originFileObj)
            fileReader.onload = ev => {// 异步执行
                try {
                    const data = ev.target.result
                    const workbook = XLSX.read(data, {
                        type: "binary"
                    })
                    // console.log(workbook.SheetNames)
                    const wsname = workbook.SheetNames[0] //取第一张表
                    const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) //生成json表格内容
                    //   console.log("ws",ws)
                    that.uploadData = [] // 清空接收数据 展示总数据行
                    this.uploadColumns = [] // 展示表头
                    this.dataTitle = [] // json表头
                    this.excelImport = [] // //总json
                    this.dataItem = [] // json每行
                    this.uploadDataImport = [] // json总数据行
                    // for (var t = 0; t < ws.length; t++) {
                    const mydata = [];

                    for (let key in ws[0]) {
                        let tag = 0;
                        // console.log("key",key);
                        if (this.uploadColumns.indexOf(key) === -1) {
                            this.dataTitle.push(key)
                            this.uploadColumns.push({
                                dataIndex: key,
                                key: key + tag,
                                title: key,
                                scopedSlots: { customRender: key },
                            });
                            tag++
                        }


                    }

                    // for(let i = 0; i < this.dataTitle.length; i++)
                    // {
                    //     mydata.push(
                    //         {
                    //             this.dataTitle[i]:
                    //         }
                    //     )
                    // }



                    // for (let i = 0; i < 3; i++) {

                    // }


                    const titleList = this.uploadColumns;
                    this.uploadColumns.push({
                        title: '操作',
                        scopedSlots: { customRender: 'operation' },
                        align: 'center'
                    })

                    // console.log("表头", this.dataTitle[0]);

                    for (let i = 0; i < ws.length; i++) {

                        console.log("每一行的数据", typeof (ws[i]));

                        that.uploadData.push(ws[i]);
                        ws[i].key = i;
                        console.log("push后每一行的数据", ws[i])
                        // console.log("表头数据",this.uploadColumns)
                        console.log("总数据行", this.uploadData)
                    }

                    this.excelImport.push(this.dataTitle)



                    for (let i = 0; i < this.uploadData.length; i++) {
                        // console.log(that.uploadData[i])\
                        var json = that.uploadData[i];
                        var tempJson = [];
                        for (var key in json) {
                            if (key === "key") {
                                continue;
                            }
                            tempJson.push(json[key] + "");
                            // console.log("最后传的json的key",key + ":" + json[key]);//json对象中属性的名字：对象中属性的值
                        }
                        this.excelImport.push(tempJson);
                        // that.excelImport.push(Object.values( that.uploadData[i]));
                        // that.excelImport.push(Object.values( that.uploadData[i])+"");
                    }
                    //  excelimport
                    console.log("表格JSOn", this.excelImport);
                    // 子组件传父组件的数据
                    this.$emit('func', that.excelImport, this.spotClassId, this.spotClassValue);

                } catch (ev) {
                    return false;
                }
            }

        },



    }
};
</script>