vue iView table中render渲染

<template>
    <div class="srm-page">
        <el-form ref="form" :model="rtBuzPriProject" label-width="100px" size="mini">
            <el-col :span="8">
                <el-form-item prop="project_code" label="项目编码：">
                    <span>{{upDateLoad.project_code}}</span>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item prop="project_code" label="项目名称：">
                    <span>{{upDateLoad.project_name}}</span>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item prop="project_code" label="采购组织：">
                    <span>{{upDateLoad.add_org}}</span>
                </el-form-item>
            </el-col>

            <el-col :span="8">
                <el-form-item prop="add_user" label="发布人：">
                    <span>{{upDateLoad.add_user}}</span>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item prop="add_user" label="发布日期：">
                    <span>{{upDateLoad.apply_end_date}}</span>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item prop="add_user" label="销售结算价：">
                    <span>{{upDateLoad.sale_balance_price}}</span>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item prop="add_user" label="降幅比例标准：">
                    <span>{{upDateLoad.scale_standard}}</span>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item prop="add_user" label="报价截止时间：">
                    <span>{{upDateLoad.award_price_valid_end_time}}</span>
                </el-form-item>

            </el-col>
            <el-col :span="8">
                <el-form-item prop="add_user" label="提交比价时间：">
                    <span>{{upDateLoad.award_price_valid_start_time}}</span>
                </el-form-item>
            </el-col>
        </el-form>

        <el-row v-if="!readOnly">
            <el-col :span="4">
                <h3>比价分析表</h3>
            </el-col>
            <el-col :span="20" class="tr">
                <!-- <el-button type="success" size="mini" @click="uniqueDataFun()">demo</el-button>-->
                <el-button type="success" size="mini" v-show="isShow"   @click="setQuota()">配额调设置</el-button>
                <el-button type="warning" size="mini"  v-show="!isShow" @click="cancelQuota()">取消</el-button>
                <el-upload action :show-file-list="false" :http-request="uoloadTempelate" style="display: inline-block;">
                    <el-button size="mini"  type="primary">导入比价分析</el-button>
                </el-upload>
                <el-button type="primary"  size="mini" @click="exportData">导出比价分析</el-button>
                <el-button type="danger" v-show="$utils.obj.havePermission(indexUrl + '/update')" size="mini" @click =  'js_closeMater'>关闭物料</el-button>
            </el-col>
        </el-row>

        <i-table
                @on-selection-change="selectChange"
                ref="iTable"
                style="margin-top: 10px"
                :row-class-name="rowClassName"
                :stripe="true"
                size="small"
                :border="true"
                :loading="loading"
                :columns="columns"
                :data="lastData"
                show-summary
                :summary-method="handleSummary"
        >
        </i-table>


        <el-row class="srm-border" style="text-align: right">
            <el-button  @click="$emit('closeParentDialog')" size="mini">
                {{$t(`message['admin.global.button.cancel']`)}}
            </el-button>
            <el-button v-show="$utils.obj.havePermission(indexUrl + '/update')" v-if="!readOnly" type="primary" size="mini" @click="js_save">
                保存
            </el-button>
        </el-row>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNumber"
                :page-sizes="[15, 30, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalRow">
        </el-pagination>
        <add-part
                :pid="pid"
                ref="add"
                @closeDialog="closeDialog"
                v-if="addVisible"
                :selects="selects"
                :url="indexUrl"
                :indexName="indexName">
        </add-part>
    </div>
</template>

<script>
    import tableMixin from '@/mixin/tableMixin';
    import addPart from './inviteProduct/add';

    export default {
        mixins: [tableMixin],
        name: "rtBuzSupQuote",
        arr: '',
        props: {
            pid: '',
            pri_project_id: '',
            readOnly: {
                type: Boolean,
                default: false
            }
        },
        components: {addPart},
        data() {
            return {
                isShow: true,
                upDateLoad: {},
                inputVal: '',
                params: {
                    pri_project_id: this.pid
                },
                requestList: ['rtBuzPriProject'],
                fileList: [],
                rtBuzPriProject: {},
                columns: [],
                indexName: 'rtBuzSupQuotes',
                indexUrl: '/buz/rtBuzSupQuote/',
                upLoadUrl: '/buz/rtBuzPriProject/updateLoad',
                colseParams: [],
                totalData: [],
                seletedData: [],
                uniqueData: [],
                savedData: [],
                materialUnique: [],
                suplierNameArr: [],
                lastData: [],
                totalRow: 0,
                strVal: '',
                hide: 'hide'
            }
        },
        mounted() {
            this.upDateLoadFun();
        },
        methods: {
            getDataList() {
                this.loading = true;
                this.$http({
                    method: 'post',
                    url: this.indexUrl,
                    data: {
                        params: this.params,
                        pageSize: this.pageSize,
                        pageNumber: this.pageNumber,
                    }
                }).then((response) => {
                    let uniqueData = JSON.parse(JSON.stringify(response.data.data.rtBuzSupQuotes.list))
                    this.totalData = JSON.parse(JSON.stringify(response.data.data.rtBuzSupQuotes.list))
                    let suppliers = this.suplierNameArr = this.uniqueSupplier(this.totalData, 'supplier_name')
                    let materialUnique = this.unique(uniqueData, 'material_code');
                    this.lastData = this.mergeData(this.totalData, materialUnique, suppliers);
                    console.log(this.lastData)
                    this.afterGetDataListDemo();
                }).finally(() => {
                    this.loading = false
                })
            },
            // 获取唯一的供应商
            uniqueSupplier (arr, name) {
                let backArr = new Set()
                arr.forEach((item) => {
                    backArr.add(item[name])
                })
                return [...backArr]
            },
            //去掉指定元素
            uniquespecifiedElm(arr, delArr) {
                arr.forEach((item, index) => {
                    for (let key in item) {
                        if (item.hasOwnProperty(key)) {   //判断是否是对象自身的属性，而不包含继承自原型链上的属性
                            if (delArr.indexOf(key) != -1) {
                                delete arr[index][key];
                            }
                        }
                    }
                });
            },

            //放入供应商合并数据；
            mergeData(totalArr, afterData, suppliers) { //totalArr总数据，afterData去除重复材料后并且去除不要字段的数据；
                afterData.forEach((item, index) => {
                    totalArr.forEach((j) => {
                        if (item.material_code === j.material_code) {
                            let pos = suppliers.indexOf(j.supplier_name);
                            if (pos != '-1') {
                                afterData[index]['first_price' + pos] = j.first_price;
                                afterData[index]['last_price' + pos] = j.last_price;
                                afterData[index]['award_percent' + pos] = j.award_percent;
                            }
                        }
                    });
                });
                return afterData;
            },

            handleSummary({columns, data}) {
                const sums = {};
                columns.forEach((column, index) => {
                    const key = column.key;
                    if (index === 0) {
                        sums[key] = {
                            key,
                            value: '总计'
                        };
                        return;
                    }
                    const values = data.map(item => Number(item[key]));
                    if (!values.every(value => isNaN(value))) {
                        const v = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            // if(index !== 9){
                            //     sums[key] = {
                            //         key,
                            //         value: 'N/A'
                            //         };
                            //     return;
                            // }
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        let colArr = [];
                        for (let i = 7; i < 100; i += 4) {
                            colArr.push(i, i + 1);

                        }
                        if (index === 6 || colArr.indexOf(index) != -1) {
                            sums[key] = {
                                key,
                                value: v + ' 元'
                            };
                        } else {
                            sums[key] = {
                                key,
                                value: ''
                            };
                        }

                    } else {
                        sums[key] = {
                            key,
                            value: ''
                        };
                    }
                });

                return sums;
            },

            paramInit() {
            },
            init(row) {
                this.row = row || {};
                this.pid = row ? row.id : '',
                    this.pri_project_id = row ? row.id : '',
                    this.visible = true;
            },
            upDateLoadFun() {
                this.loading = true;
                this.$http({
                    method: 'post',
                    url: this.upLoadUrl,
                    data: {
                        id: this.pid,
                    }
                }).then((response) => {
                    this.upDateLoad = response.data.data.rtBuzPriProject;
                }).finally(() => {
                    this.loading = false;
                })
            },
            afterGetDataListDemo() {
                let columns_add = [
                    {type: 'selection', width: 60, align: 'center', 'title': ''},
                    {key: 'add_org', 'title': '采购组织', width: 100},
                    {key: 'material_code', 'title': '物料', width: 100},
                    {key: 'material_name', 'title': '物料名称', width: 100},
                    {key: 'material_desc', 'title': '物料描述', width: 100},
                    {key: 'num_qty', 'title': '预计采购数量', width: 100},
                    {key: 'previous_price', 'title': '上期最低报价/元', width: 150, 'align': 'center'},
                ];

                this.lastData.forEach((item, index) => {
                    this.suplierNameArr.forEach((m, indexSec) => {
                        if (m) {
                            columns_add.push({
                                resizable: true,
                                title: m,
                                align: 'center',
                                key: m,
                                children: [{
                                    title: '初次报价',
                                    width: 100,
                                    key: item.first_price + indexSec,
                                }, {
                                    title: '最终报价',
                                    width: 100,
                                    key: item.last_price + indexSec,
                                }, {
                                    title: '回复交期',
                                    width: 100,
                                    key: item.promit_delivery_date + indexSec,
                                },
                                    {
                                        title: '配额',
                                        width: 150,
                                        key: 'award_percent' + indexSec,
                                        render: (h, params) => {
                                            if (params.row) {
                                                return h('div', [
                                                    h('Input', {
                                                            domProps: {
                                                                type: 'number',
                                                                step: "0.01",
                                                                value: this.lastData[params.index]['award_percent' + indexSec],
                                                                min: "0",
                                                                max: "0.99",
                                                            },
                                                            class: this.hide,
                                                            on: {
                                                                input: (value) => {
                                                                    this.lastData[params.index]['award_percent' + indexSec] = value.srcElement.value;
                                                                }
                                                            },
                                                        },
                                                    ),
                                                    h('div', this.lastData[params.index]['award_percent' + indexSec])
                                                ]);
                                            } else {
                                                return h('div', '-');
                                            }

                                        }
                                    }]
                            });
                        }
                    });

                });

                columns_add = this.unique(columns_add, 'title');
                this.columns = columns_add;
            },
            getIndex(arr, str) {
                let num = -1;
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i] === str) {
                        num = i
                    }
                }
                return num
            },
            setQuota() {
                this.isShow = !this.isShow;
                this.hide = '';
            },
            cancelQuota() {
                this.isShow = !this.isShow;
                this.hide = 'hide';
            },


            //去重代码1
            unique(arr, par) {
                const res = new Map();
                return arr.filter((arr) => !res.has(arr[par]) && res.set(arr[par], 1));
            },


            //导出
            exportData() {
                this.$refs.iTable.exportCsv({filename: "Data"});
            },
            //导入
            uoloadTempelate(e) {
                let file = e.file;
                let formData = new FormData();
                formData.append("file", file); // 'file' 可变 相当于 input 表单的name 属性
                formData.append("name", file.name);
                formData.append("type", file.type);
                formData.append("size", file.size);
                formData.append("lastModifiedDate", file.lastModifiedDate);
                this.$http({
                    method: "post",
                    url: "/base/ctBaseFile/saveFile50",
                    data: formData
                }).then(response => {
                    if (response.data.code === 200) {
                        this.$http({
                            method: "post",
                            url: "/buz/rtBuzPriBid/saveBidFromImport",
                            data: {
                                file_id: response.data.data.ctBaseFile.id,
                                project_id: this.pid
                            }
                        }).then(response => {
                            if (response.data.code === 200) {
                                this.$message.success("上传成功");
                                this.getDataList();
                            }
                        });
                    }
                });
            },
            //关闭物料
            selectChange(row) {
                this.seletedData = [];
                if (row.length > 0) {
                    this.totalData.forEach((item) => {
                        if (row[0].material_code == item.material_code) {
                            this.colseParams.push({'id': item.id, 'buz_status': 2});
                            this.seletedData.push(item);
                        }
                    })
                }

            },
            //保存
            js_save() {
                this.loading = true;
                this.cancelQuota()
                this.totalData.forEach((item, index) => {
                    this.lastData.forEach((m) => {
                        if (item.material_code === m.material_code && item.supplier_name != null) {
                            this.totalData[index]['award_percent'] = Number(m['award_percent' + index]);
                        }
                    })
                });
                this.$http({
                    method: 'post',
                    url: '/buz/rtBuzSupQuote/update',
                    data: {
                        rtBuzSupQuotes: this.totalData
                    }
                }).then((response) => {
                    if (response.data.code === 200) {
                        this.$message.success('保存成功')
                        this.hide = 'hide';
                    }
                }).finally(() => {
                    this.loading = false;
                })
            },
            js_closeMater() {
                this.loading = true;
                this.$http({
                    method: 'post',
                    url: '/buz/rtBuzSupQuote/update/',
                    data: {rtBuzSupQuotes: this.colseParams},
                }).then((response) => {
                    if (response.data.code == 200) {
                        alert('成功！');
                    }
                }).finally(() => {
                    this.loading = false;
                })
            },
        },
    }
</script>

<style scoped>

</style>