vue 纯前端导入Excel

​

 1.vue-cli脚手架搭好框架

2.npm install xlsx --save

3.代码

<template>
    <div>
        <el-row class="handle-box" :gutter="24">
            <el-col :span="17" class="head">
                <el-button @click="handleCreate">新建</el-button>
                <el-button @click="deleteMulti">删除</el-button>
                <el-button @click="exportExcel">导出</el-button>
                <el-button @click="releaseMulti" disabled>发布</el-button>
                <input type="file" @change="importFile(this)" id="imFile" style="display: none"
                    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
                <el-button @click="uploadFile">从Excle中导入</el-button>
                <el-button @click="standardImport">从标准模板中导入</el-button>
            </el-col>
            <el-col :span="7">
                <el-input v-model="searchValue.keyword" placeholder="请输入提资编号或名称" class="handle-input" clearable
                    disabled>
                    <el-button slot="append" icon="el-icon-search" @click="search" disabled></el-button>
                </el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <VmBaseTable ref="material_plan_table" :setTableHigh="true" :data="dataTable" :columns="dataColumns"
                    @page-change="pageChange" showCheck :tableHigh="tableHigh" :page_sizes="[5,10,15,20,25]">
                </VmBaseTable>
                <batchAddMaterial ref="batch-add-material" @search="search" @postData="getPostData" :isDisable="true">
                </batchAddMaterial>
                <StandardImport ref="standard-template-material" @importStandardMethod="importStandardMethod">
                </StandardImport>
                <batchLookMaterial ref="batch-look-material"></batchLookMaterial>
                <batchEditMaterial ref="batch-edit-material" @search="search" @editorData="getEditorData">
                </batchEditMaterial>
            </el-col>
        </el-row>
        <div style="text-align:right;margin-top:10px" v-if="isModelHeight">
            <el-button @click="deleteTemplate">取 消</el-button>
            <el-button type="primary" @click="submit">保 存</el-button>
        </div>
    </div>
</template>
<script>
    /*eslint-disable */
    //引入xlsx
    var XLSX = require('xlsx')
    import VmBaseTable from "../../../../components/common/base/base-table"
    import batchAddMaterial from "./batch-add-put-material"
    import StandardImport from "./standard-template-material-import"
    import batchLookMaterial from "./batch-look-put-material"
    import batchEditMaterial from "./edit-put-material"
    export default {
        name: "Tizicehua",
        components: {
            VmBaseTable,
            batchAddMaterial,
            StandardImport,
            batchLookMaterial,
            batchEditMaterial
        },
        props: {
            project_id: {
                type: String,
                default: ""
            },
            project_phase: {
                type: String,
                default: ""
            },
            isModelHeight: {
                type: Boolean,
                default: false
            }
        },
        created() {
            if (!this.isModelHeight) {
                let _this = this;
                this.getTableHigh();
                $(window).resize(function () {
                    _this.getTableHigh();
                });
            }
        },
        data() {
            return {
                //导入文件
                imFile: '',
                //保存提交的数据postData
                postData: [],
                //保存编辑后的数据editorData
                editorData: [],
                //保存勾选的项目data,包含project_id,project_phase
                selectData: [],
                tableHigh: "301",
                searchValue: {
                    $limit: 10,
                    $offset: 0,
                    keyword: "",
                    projectId: "",
                    projectPhase: ""
                },
                table: null,
                dataTable: [],
                dataColumns: [{
                        label: "提资编号",
                        prop: "put_material_no",
                        style: "center",
                        minWidth: "120"
                    },
                    {
                        label: "提资名称",
                        prop: "put_material_name",
                        style: "center",
                        minWidth: "150"
                    },
                    {
                        label: "资料等级",
                        prop: "put_material_level",
                        style: "center",
                        minWidth: "150",
                        render(h, params) {
                            if (params.row.put_material_level == 1) {
                                return h("div", {}, "提-校-校-审-批");
                            } else if (params.row.put_material_level == 2) {
                                return h("div", {}, "提-校-审-批");
                            } else if (params.row.put_material_level == 3) {
                                return h("div", {}, "提-校-批");
                            }
                        }
                    },
                    {
                        label: "提出专业",
                        prop: "put_profession_name",
                        style: "center",
                        minWidth: "150"
                    },
                    {
                        label: "接收专业",
                        prop: "receive_profession_name",
                        style: "center",
                        minWidth: "150"
                    },
                    {
                        label: "资料提出人",
                        prop: "put_forward_name",
                        style: "center",
                        minWidth: "150"
                    },
                    {
                        label: "状态",
                        prop: "publish",
                        style: "center",
                        minWidth: "80",
                        render(h, params) {
                            if (params.row.publish == 0) {
                                return h("div", {}, "未发布");
                            } else if (params.row.publish == 1) {
                                return h("div", {}, "已发布");
                            }
                        }
                    },
                    {
                        label: "校审状态",
                        prop: "approval_status",
                        style: "center",
                        minWidth: "80",
                        render(h, params) {
                            if (params.row.approval_status == 0) {
                                return h("div", {}, "未开始");
                            } else if (params.row.approval_status == 1) {
                                return h("div", {}, "进行中");
                            } else if (params.row.approval_status == 2) {
                                return h("div", {}, "已完成");
                            } else if (params.row.approval_status == 3) {
                                return h("div", {}, "驳回");
                            }
                        }
                    },
                    {
                        label: "计划开始时间",
                        prop: "plan_start_time",
                        style: "center",
                        minWidth: "135"
                    },
                    {
                        label: "计划完成时间",
                        prop: "plan_end_time",
                        style: "center",
                        minWidth: "135"
                    },
                    {
                        label: "操作",
                        style: "center",
                        prop: "id",
                        fixed: "right",
                        minWidth: "300",
                        render: (h, scope) => {
                            let btns = [];
                            btns.push(
                                this.getOpBtn(h, "查看", "small", () => {
                                    this.handleReview(scope.row);
                                })
                            );
                            btns.push(
                                this.getOpBtn(h, "编辑", "primary", () => {
                                    this.handleEdit(scope.row);
                                }, true)
                            );
                            btns.push(
                                this.getOpBtn(h, "发布", "success", () => {
                                    this.releaseSingle(scope.row);
                                }, true)
                            );
                            btns.push(
                                this.getOpBtn(h, "删除", "warning", () => {
                                    this.deleteSingle(scope.row);
                                }, scope.row.approval_status == 0 ? false : true)
                            );
                            return h("div", btns);
                        }
                    }
                ]
            };
        },
        methods: {
            init(data) {
                //初始化时，清空提交的数据
                this.postData = []
                this.dataTable = []
                this.selectData = data;
            },
            //保存批量新增中的提资卷册
            submit() {
                // console.log("勾选的项目", this.selectData)
                // console.log("新建的卷册", this.postData)
                // console.log("编辑过的卷册", this.editorData)
                // console.log("表中的所有数据", this.dataTable)
                let finalData = [];
                if (this.selectData.length > 0 && this.postData.length > 0) {
                    for (let i = 0; i < this.selectData.length; i++) {
                        let idAndPhase = {}
                        idAndPhase.project_id = this.selectData[i].project_id
                        idAndPhase.project_phase = this.selectData[i].project_phase
                        for (let j = 0; j < this.postData.length; j++) {
                            let finalPost = {
                                project_id: idAndPhase.project_id, //项目id
                                project_phase: idAndPhase.project_phase, //项目阶段
                                put_material_name: this.postData[j].put_material_name, //提资名称
                                put_material_no: this.postData[j].put_material_no, //提资编号
                                put_material_level: this.postData[j].put_material_level, //提资等级
                                put_major: this.postData[j].put_profession_name, //提出专业名称
                                publish: this.postData[j].publish, //保存or保存并发布
                                put_major_id: this.postData[j].put_major_id, //提出专业的id
                                accept_major: this.postData[j].receive_profession_name, //接收专业名称
                                accept_major_id: this.postData[j].accept_major_id, //接收专业的id
                                accept_person: this.postData[j].accept_person, //接收人
                                accept_person_id: this.postData[j].accept_person_id, //接收人的id
                                plan_time: this.postData[j].plan_time, //计划时间（开始时间，结束时间）（数组不用一一赋值）
                                finish_flows: { //这个流程是对象，也需要一个个重新赋值
                                    flow_def_key: this.postData[j].finish_flows.flow_def_key,
                                    flow_steps: this.postData[j].finish_flows.flow_steps
                                }
                            }
                            finalData.push(finalPost);
                        }
                    }
                    this.finalSubmit(finalData);
                    //清空提交的数据
                    this.postData = []
                    this.$emit('close');
                } else {
                    this.$message.warning({
                        message: '请先新建卷册！'
                    })
                }

            },
            finalSubmit(finalData) {
                //批量新增提资
                this.axiosHelper.post('/v0.1/material/plan/batchCreate', {
                        data: finalData
                    })
                    .then(response => {
                        if (response.status == 200 && response.data === 1) {
                            this.$message.success({
                                message: '新增成功'
                            })
                        } else if (response.status == 200 && response.data === -1) {
                            this.$message.warning({
                                message: '新增失败！提资名称重复！'
                            })
                        } else if (response.status == 200 && response.data === -2) {
                            this.$message.warning({
                                message: '新增失败！提资编号重复！'
                            })
                        }
                    }).catch(error => {
                        this.$message.error(error);
                    })
            },
            //获取新建时提交过来的对象
            getPostData(postData) {
                //计划开始时间/计划完成时间格式化
                let startTime = postData.plan_time[0]
                var date = new Date(startTime);
                let plan_start_time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
                let endTime = postData.plan_time[1]
                var date2 = new Date(endTime);
                let plan_end_time = date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate()
                //新建对象，重新赋值（如果直接将接收的对象赋予新对象，那么新对象地址会被替换掉，还是提交过来的对象的地址，没有意义）
                var post = {
                    project_id: postData.project_id, //项目id
                    project_phase: postData.project_phase, //项目阶段
                    put_material_name: postData.put_material_name, //提资名称
                    put_material_no: postData.put_material_no, //提资编号
                    put_material_level: postData.put_material_level, //提资等级
                    put_profession_name: postData.put_major, //提出专业名称
                    publish: postData.publish, //保存or保存并发布
                    approval_status: postData.approval_status, //校审状态
                    put_major_id: postData.put_major_id, //提出专业的id
                    receive_profession_name: postData.accept_major, //接收专业名称
                    accept_major_id: postData.accept_major_id, //接收专业的id
                    accept_person: postData.accept_person, //接收人
                    accept_person_id: postData.accept_person_id, //接收人的id
                    put_forward_name: postData.finish_flows.flow_steps[0].assignee_name, //资料提出人
                    plan_time: postData.plan_time, //计划时间（开始时间，结束时间）（数组不用一一赋值）
                    plan_start_time: plan_start_time, //计划开始时间
                    plan_end_time: plan_end_time, //计划完成时间
                    finish_flows: { //这个流程是对象，也需要一个个重新赋值
                        flow_def_key: postData.finish_flows.flow_def_key,
                        flow_steps: postData.finish_flows.flow_steps
                    }
                }

                this.postData.push(post)
                this.dataTable = this.postData
                //重新给每行数据设置index值
                for (let i = 0; i < this.dataTable.length; i++) {
                    this.dataTable[i].index = i;
                }
                this.table.total = this.dataTable.length
            },
            //获取编辑后的数据
            getEditorData(editorData) {
                var editor = {
                    id: editorData.id, //提资id
                    project_id: editorData.project_id, //项目id
                    project_phase: editorData.project_phase, //项目阶段
                    put_material_name: editorData.put_material_name, //提资名称
                    put_material_no: editorData.put_material_no, //提资编号
                    put_material_level: editorData.put_material_level, //提资等级
                    put_major: editorData.put_major, //提出专业
                    put_major_id: editorData.put_major_id, //提出专业的id
                    accept_major: editorData.accept_major, //接收专业
                    accept_major_id: editorData.accept_major_id, //接收专业的id
                    accept_person: editorData.accept_person, //接收人
                    accept_person_id: editorData.accept_person_id, //接收人的id
                    plan_time: editorData.plan_time, //计划时间（开始时间，结束时间）（数组不用一一赋值）
                    finish_flows: { //这个流程是对象，也需要一个个重新赋值
                        flow_def_key: editorData.finish_flows.flow_def_key,
                        flow_steps: editorData.finish_flows.flow_steps
                    }
                }
                //如果该条数据已被编辑过，移除它
                if (this.editorData.length > 0) {
                    for (let i = 0; i < this.editorData.length; i++) {
                        if (editorData.id === this.editorData[i].id) {
                            this.editorData.splice(i, 1);
                        }
                    }
                }
                this.editorData.push(editor)
            },
            pageChange(page) {
                this.searchValue.$limit = page.limit;
                this.searchValue.$offset = page.offset;
                this.search();
            },
            //获取列表
            search() {
                this.axiosHelper
                    .get("/v0.1/material/plan", {
                        params: this.searchValue
                    })
                    .then(response => {
                        this.dataTable = response.data.items;
                        this.table.total = response.data.total_count;
                    })
                    .catch(error => {
                        this.$message.error({
                                message: "失败"
                            },
                            error
                        );
                    });
            },
            //批量删除
            deleteMulti() {
                let data = this.table.getSelectedData();
                if (data.length == 0) {
                    return;
                }
                for (let i = 0; i < this.dataTable.length; i++) {
                    let temp = this.dataTable[i];
                    for (let j = 0; j < data.length; j++) {
                        if (data[j].index === temp.index) {
                            this.dataTable.splice(i, data.length);
                        }
                    }
                }
                for (let k = 0; k < data.length; k++) {
                    //减掉表格数据条数 
                    this.table.total--
                }

            },
            //批量发布
            releaseMulti() {
                let data = this.table.getSelectedData();
                if (data.length === 0) {
                    return;
                }
                let volumeName = "";
                let volumeNames = "";
                for (var i = 0; i < data.length; i++) {
                    //校验信息是否完整
                    if (
                        data[i].put_forward_name === "" ||
                        data[i].plan_start_time === undefined ||
                        data[i].plan_end_time === undefined
                    ) {
                        volumeName = volumeName + "【" + data[i].put_material_name + "】,";
                    }
                    //校验是否已发布
                    if (data[i].publish !== 0) {
                        volumeNames = volumeNames + "【" + data[i].put_material_name + "】,";
                    }
                }
                if (volumeName !== "") {
                    volumeName = volumeName.substring(0, volumeName.length - 1);
                    this.$message.warning({
                        message: "卷册" + volumeName + "信息不完整，请先编辑"
                    });
                    return;
                }
                if (volumeNames !== "") {
                    volumeNames = volumeNames.substring(0, volumeNames.length - 1);
                    this.$message.warning({
                        message: "卷册" + volumeNames + "已发布,可取消勾选此项再发布"
                    });
                    return;
                }
                this.releaseMethod(this.table.getIds());
            },
            releaseMethod(objid) {
                this.$confirm('此操作将发布勾选卷册, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axiosHelper
                        .post("/v0.1/material/plan/release/" + objid)
                        .then(response => {
                            let status = response.status;
                            if (status === 200) {
                                this.$message.success({
                                    message: "发布成功"
                                });
                                this.search();
                            }
                        })
                        .catch(error => {
                            this.$message.error({
                                    message: "发布失败"
                                },
                                error
                            );
                        });
                }).catch(() => {
                    this.$message.info({
                        message: '已取消发布'
                    });
                });
            },
            uploadFile() {
                this.imFile.click()
            },
            //从Excel导入
            importFile() {
                let obj = this.imFile
                if (!obj.files) {
                    return
                }
                var f = obj.files[0]
                var reader = new FileReader()
                let $t = this
                reader.onload = function (e) {
                    var data = e.target.result
                    if ($t.rABS) {
                        $t.wb = XLSX.read(btoa(this.fixdata(data)), { // 手动转化
                            type: 'base64'
                        })
                    } else {
                        $t.wb = XLSX.read(data, {
                            type: 'binary'
                        })
                    }
                    let json = XLSX.utils.sheet_to_json($t.wb.Sheets[$t.wb.SheetNames[0]])
                    console.log(typeof json)
                    $t.dealFile($t.analyzeData(json)) // analyzeData: 解析导入数据
                }
                if (this.rABS) {
                    reader.readAsArrayBuffer(f)
                } else {
                    reader.readAsBinaryString(f)
                }
            },
            //导出
            exportExcel() {
                let export_data = this.table.getSelectedData();
                if (export_data.length == 0) {
                    return
                }
                for (let i = 0; i < export_data.length; i++) {
                    if (export_data[i].publish == 0) {
                        export_data[i].publish = "未发布"
                    } else if (export_data[i].publish == 1) {
                        export_data[i].publish = "已发布"
                    }
                }
                for (let j = 0; j < export_data.length; j++) {
                    if (export_data[j].put_material_level == 1) {
                        export_data[j].put_material_level_name = "提-校-校-审-批"
                    } else if (export_data[j].put_material_level == 2) {
                        export_data[j].put_material_level_name = "提-校-审-批"
                    } else if (export_data[j].put_material_level == 3) {
                        export_data[j].put_material_level_name = "提-校-批"
                    }

                }


                import("../../../../vendor/Export2Excel").then(excel => {
                    const tHeader = [
                        "提资编号",
                        "提资名称",
                        "资料等级",
                        "提出专业",
                        "接收专业",
                        "资料提出人",
                        "状态",
                        "校审状态",
                        "计划开始时间",
                        "计划完成时间"
                    ];
                    const filterVal = [
                        "put_material_no",
                        "put_material_name",
                        "put_material_level_name",
                        "put_profession_name",
                        "receive_profession_name",
                        "put_forward_name",
                        "publish",
                        "approval_status",
                        "plan_start_time",
                        "plan_end_time"
                    ];
                    const list = export_data;
                    const data = this.formatJson(filterVal, list);
                    excel.export_json_to_excel({
                        header: tHeader,
                        data,
                        filename: "提资策划",
                        autoWidth: this.autoWidth
                    });
                });
            },
            //JSON格式化
            formatJson(filterVal, jsonData) {
                return jsonData.map(v =>
                    filterVal.map(j => {
                        if (j == "approval_status") {
                            if (v[j] == 1) {
                                return "进行中";
                            } else if (v[j] == 2) {
                                return "已暂停";
                            } else if (v[j] == 3) {
                                return "已结束";
                            } else {
                                return "未开始";
                            }
                        } else {
                            return v[j];
                        }
                    })
                );
            },
            //标准模板中导入
            standardImport() {
                this.$refs["standard-template-material"].init();
            },
            //导入标准模板
            importStandardMethod(obj) {
                console.log("importStandardMethod -> obj", obj)
                for (let i = 0; i < obj.length; i++) {
                    let item = {
                        put_material_no: obj[i].provide_no,
                        put_material_name: obj[i].provide_name,
                        put_material_level: obj[i].data_level,
                        put_profession_name: obj[i].put_profession,
                        receive_profession_name: obj[i].receive_profession,
                        put_forward_name: "",
                        publish: 0,
                        approval_status: 0,
                        plan_start_time: "",
                        plan_end_time: "",
                        isExcel: true
                    }
                    this.dataTable.push(item)
                }
                console.log("importStandardMethod ->  this.dataTable", this.dataTable)
            },
            handleCreate() {
                this.$refs["batch-add-material"].init(this.project_id, this.project_phase, this.dataTable);
            },
            getTableHigh() {
                this.tableHigh = String(document.documentElement.clientHeight - 158 - 62 - 17 - 63 - 42 - 42 - 2)
            },
            //操作列按钮
            //查看
            handleReview(data) {
                this.$refs['batch-look-material'].init(data);
            },
            //编辑
            handleEdit(data) {
                this.$refs['batch-edit-material'].init(data);
            },
            //发布
            releaseSingle(data) {
                if (data.publish == 0) {
                    //校验信息是否完整
                    if (data.receive_id === '' || data.plan_start_time === undefined || data.plan_end_time ===
                        undefined) {
                        this.$message.warning({
                            message: '卷册信息不完整！请编辑后重新发布！'
                        })
                        return
                    }
                    this.$confirm('此操作将发布该卷册, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.axiosHelper.post('/v0.1/material/plan/release/' + data.id)
                            .then(response => {
                                if (response.status === 200) {
                                    this.$message.success({
                                        message: '发布成功！'
                                    })
                                    this.search();
                                }
                            })
                            .catch(error => {
                                this.$message.error({
                                    message: '发布失败！'
                                })
                            })
                    }).catch(() => {
                        this.$message.info({
                            message: '已取消发布'
                        });
                    });
                } else {
                    this.$message.warning({
                        message: '该提资卷册已发布！'
                    })
                }
            },
            //删除
            deleteSingle(row) {
                for (let i = 0; i < this.dataTable.length; i++) {
                    let temp = this.dataTable[i];
                    if (row.index === temp.index) {
                        this.dataTable.splice(i, 1);
                    }
                }
                //减掉表格数据条数 
                this.table.total--
            },
            //取消
            deleteTemplate() {
                if (this.dataTable.length != 0) {
                    this.$confirm('此操作将不保存已新建的提资卷册, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //清空提交的数据
                        this.postData = []
                        this.$emit('close');
                    }).catch(() => {
                        this.$message.info({
                            message: '已取消操作'
                        });
                    });
                } else {
                    this.$emit('close');
                }

            },
            analyzeData: function (data) { // 此处可以解析导入数据
                return data
            },
            dealFile: function (data) { // 处理导入的数据
                console.log(data)
                this.imFile.value = ''
                if (data.length <= 0) {
                    this.$message.warning({
                        message: "请导入正确数据"
                    })
                    return
                } else {
                    let excelData = []
                    for (let i = 0; i < data.length; i++) {
                        if (data[i]["提资编号"] === undefined) {
                            this.$message.warning({
                                message: "请填写第" + Number(i + 2) + "行提资编号"
                            })
                            return
                        }
                        if (data[i]["提资名称"] === undefined) {
                            this.$message.warning({
                                message: "请填写第" + Number(i + 2) + "行提资名称"
                            })
                            return
                        }
                        if (data[i]["资料等级"] === undefined) {
                            this.$message.warning({
                                message: "请填写第" + Number(i + 2) + "行资料等级"
                            })
                            return
                        }
                        if (data[i]["提出专业"] === undefined) {
                            this.$message.warning({
                                message: "请填写第" + Number(i + 2) + "行提出专业"
                            })
                            return
                        }
                        if (data[i]["接收专业"] === undefined) {
                            this.$message.warning({
                                message: "请填写第" + Number(i + 2) + "行接收专业"
                            })
                            return
                        }
                        if (data[i]["资料提出人"] === undefined) {
                            this.$message.warning({
                                message: "请填写第" + Number(i + 2) + "行资料提出人"
                            })
                            return
                        }
                        if (data[i]["状态"] === undefined) {
                            this.$message.warning({
                                message: "请填写第" + Number(i + 2) + "行状态"
                            })
                            return
                        }
                        if (data[i]["校审状态"] === undefined) {
                            this.$message.warning({
                                message: "请填写第" + Number(i + 2) + "行校审状态"
                            })
                            return
                        }
                        if (data[i]["计划开始时间"] === undefined) {
                            this.$message.warning({
                                message: "请填写第" + Number(i + 2) + "行计划开始时间"
                            })
                            return
                        }
                        if (data[i]["计划完成时间"] === undefined) {
                            this.$message.warning({
                                message: "请填写第" + Number(i + 2) + "计划完成时间"
                            })
                            return
                        }
                        if (data[i]["资料等级"] === "提-校-校-审-批") {
                            data[i]["资料等级"] = 1
                        } else if (data[i]["资料等级"] === "提-校-审-批") {
                            data[i]["资料等级"] = 2
                        } else if (data[i]["资料等级"] === "提-校-批") {
                            data[i]["资料等级"] = 3
                        }
                        if (data[i]["状态"] === "未发布") {
                            data[i]["状态"] = 0
                        } else if (data[i]["状态"] === "已发布") {
                            data[i]["状态"] = 1
                        }

                        if (data[i]["校审状态"] === "未开始") {
                            data[i]["校审状态"] = 0
                        } else if (data[i]["校审状态"] === "进行中") {
                            data[i]["校审状态"] = 1
                        } else if (data[i]["校审状态"] === "已完成") {
                            data[i]["校审状态"] = 2
                        } else if (data[i]["校审状态"] === "驳回") {
                            data[i]["校审状态"] = 3
                        }
                        let item = {
                            put_material_no: data[i]["提资编号"],
                            put_material_name: data[i]["提资名称"],
                            put_material_level: data[i]["资料等级"],
                            put_profession_name: data[i]["提出专业"],
                            receive_profession_name: data[i]["接收专业"],
                            put_forward_name: data[i]["资料提出人"],
                            publish: data[i]["状态"],
                            approval_status: data[i]["校审状态"],
                            plan_start_time: data[i]["计划开始时间"],
                            plan_end_time: data[i]["计划完成时间"],
                            isExcel: true
                        }
                        this.dataTable.push(item);
                    }
                    console.log("this.dataTable", this.dataTable)

                }
            },
            fixdata: function (data) { // 文件流转BinaryString
                var o = ''
                var l = 0
                var w = 10240
                for (; l < data.byteLength / w; ++l) {
                    o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
                }
                o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
                return o
            }


        },
        mounted() {
            this.searchValue.projectId = this.project_id;
            this.searchValue.projectPhase = this.project_phase;
            this.table = this.$refs["material_plan_table"];
            this.search();
            this.imFile = document.getElementById('imFile')

        }
    };
</script>

<style scoped>.handle-input {
        width: 300px;
        float: right;
    }

    >>>.upload-test {
        display: inline-block;
        margin: 0 10px;
    }

    >>>.el-upload--text {
        width: auto;
        height: auto;
        vertical-align: middle;
        border: none;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        border-radius: 0;
    }

    .handle-box {
        margin-bottom: 10px;
    }
</style>

​