vue iView table中render渲染

<template>

    <div class="srm-page srm-form">
        <el-row :gutter="24">
        <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.dept_name}}</span>
                </el-form-item>
            </el-col>

            <el-col :span="8">
                <el-form-item prop="add_user" label="发布人：">
                    <span>{{upDateLoad.user_name}}</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-col :span="8">
                <el-form-item prop="add_user" label="实际降幅比例(%)：">
                    <span>{{upDateLoad.sjjfbl}}</span>
                </el-form-item>
            </el-col>
        </el-form>
        </el-row>
        <el-row v-if="!readOnly" >
            <el-col :span="4" style="padding-top: 15px;border: 0;">
                <h3>比价分析表</h3>
            </el-col>
            <el-col :span="20" class="tr" style="border: 0;">
                <!-- <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="tableData1.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                :show-summary="showSmallSum"
                :summary-method="handleSummary"
        >
        </i-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[15, 30, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="currentTotal">
               >
        </el-pagination>
        <el-row class="srm-border" style="text-align: right">
            <el-button v-show="$utils.obj.havePermission('/buz/rtBuzSupQuote/update1')==true  && buzStatus"    v-if="!readOnly" type="primary"
                       size="mini" @click="js_save">
                保存
            </el-button>
            <el-button @click="$emit('closeParentDialog')" size="mini">
                返回
            </el-button>
        </el-row>
        <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: {},
            buz_status:{},
            readOnly: {
                type: Boolean,
                default: false
            }
        },
        components: {addPart},
        data() {
            return {
                pageSize:15,
                currentPage: 1,
                currentTotal: 0,
                historyData: [],
                ajaxHistoryData:[],
                isShow: true,
                upDateLoad: {},
                inputVal: '',
                buzStatus: this.buz_status==22?true:false,
                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: [],
                tableData1: [],
                showSmallSum:true,
                showSum:false,
                totalRow: 0,
                strVal: '',
                hide: 'hide'
            }
        },
        mounted() {
            this.upDateLoadFun();
        },
        methods: {
            handleListApproveHistory(){
                // 保存取到的所有数据
                this.tableData1 = this.lastData;
                this.currentTotal = this.tableData1.length;
                // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
                if(this.currentTotal < this.pageSize){
                    this.showSum = true;
                }else{
                    this.showSum = false;
                }
            },
            handleSizeChange(val) {
                this.pageSize = val;
                if(val * this.pageSize>= this.lastData.length){
                    this.showSum = true;
                }else{
                    this.showSum = false;
                }
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                if(val * this.pageSize>= this.lastData.length){
                    this.showSum = true;
                }else{
                    this.showSum = false;
                }
            },

            getDataList() {
                this.loading = true;
                this.$http({
                    method: 'post',
                    url: this.indexUrl,
                    data: {
                        params: this.params,
                        pageSize: this.pageSize,
                        pageNumber: this.pageNumber,
                        sum_data: true
                    }
                }).then((response) => {
                    let uniqueData = JSON.parse(JSON.stringify(response.data.data.rtBuzSupQuotes))
                    this.totalData = JSON.parse(JSON.stringify(response.data.data.rtBuzSupQuotes))
                    let suppliers = this.suplierNameArr = this.uniqueSupplier(this.totalData, 'supplier_name');
                    let materialUnique = this.unique(uniqueData, 'pri_bid_id');
                    this.lastData = this.mergeData(this.totalData, materialUnique, suppliers);
                    this.afterGetDataListDemo();
                    this.handleListApproveHistory();
                }).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.pri_bid_id === j.pri_bid_id) {
                            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?j.award_percent:0; //修改一次，乘以100;
                                afterData[index]['promit_delivery_date' + pos] = j.promit_delivery_date; //修改一次，乘以100;
                            }
                        }
                    });
                });
                return afterData;
            },

            handleSummary({columns}) {
                const sums = {};
                let show = this.showSum;
                columns.forEach((column, index) => {
                    const key = column.key;
                    if (index === 1) {
                        if(show){
                            sums[key] = {
                                key,
                                value: '全部总报价'
                            };
                        }else{
                            sums[key] = {
                                key,
                                value: '当前页小计'
                            };
                        }

                        return;
                    }
                    let _start = ( this.currentPage - 1 ) * this.pageSize;
                    let _end = this.currentPage * this.pageSize;
                    let slicetableData = JSON.parse(JSON.stringify(this.lastData)).slice(_start,_end);
                    let values ='';
                    if(show){
                        values = this.lastData.map(item => Number(item[key]*item.qty_probid));
                    }else{
                        values = slicetableData.map(item => Number(item[key]*item.qty_probid));                    }

                    if (!values.every(value => isNaN(value))) {
                        const v = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            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 (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: 200},
                    {key: 'qty_probid', 'title': '预计采购数量', width: 100},
                    {key: 'previous_price', 'title': '上期最低报价/元', width: 150, 'align': 'center'},
                ];
                let preBididArr=[];
                this.lastData.forEach((item) => {
                    preBididArr.push(item.pri_bid_id);
                    this.suplierNameArr.forEach((m, indexSec) => {
                      //  if (m) {
                            columns_add.push({
                                resizable: true,
                                title: m,
                                align: 'center',
                                key: m,
                                children: [{
                                    title: '初次报价',
                                    width: 100,
                                    key: 'first_price' + indexSec,
                                }, {
                                    title: '最终报价',
                                    width: 100,
                                    key: 'last_price' + indexSec,
                                }, {
                                    title: '回复交期',
                                    width: 120,
                                    key: 'promit_delivery_date' + indexSec,
                                },
                                    {
                                        title: '配额',
                                        width: 150,
                                        key: 'award_percent' + indexSec,
                                        render: (h, params) => {
                                            if (params.row) {
                                                let posIndex = preBididArr.indexOf(params.row.pri_bid_id);
                                                return h('div', [
                                                    h('Input', {
                                                            domProps: {
                                                                type: 'number',
                                                                step: "1",
                                                                value: this.lastData[posIndex]['award_percent' + indexSec]?this.lastData[posIndex]['award_percent' + indexSec]:0,
                                                                min: "0",
                                                                max: "100",
                                                            },
                                                            class: this.hide,
                                                            on: {
                                                               "blur":(value)=>{
                                                                   if(value.srcElement.value==''){
                                                                       value.srcElement.value= 0;
                                                                       this.lastData[posIndex]['award_percent' + indexSec] = 0;
                                                                   }else{
                                                                       this.lastData[posIndex]['award_percent' + indexSec] = value.srcElement.value;
                                                                   }
                                                               },

                                                            },
                                                        },
                                                    ),
                                                    h('div', this.lastData[posIndex]['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
            },
            //求和
           sum(arr) {
                return eval(arr.join("+"));
            },
            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].pri_bid_id == item.pri_bid_id) {
                            this.colseParams.push({'id': item.id, 'buz_status': 2});
                            this.seletedData.push(item);
                        }
                    })
                }

            },
            //保存
            js_save() {
                let flag = 1;
                this.lastData.forEach((item, index) => {
                    let awardArr = [];
                    delete this.lastData[index]['award_percent'];
                    for(let k in  this.lastData[index]) {
                        if( k.indexOf('award_percent')> -1 ){
                            if(this.lastData[index][k]!=''){
                                awardArr.push(this.lastData[index][k]);
                            }else{
                                awardArr.push(0);
                            }
                        }
                    }
                    if( eval(awardArr.join("+"))>100){
                        flag+=1;
                        return false;
                    }else if( eval(awardArr.join("+"))<100){
                        flag+=1;
                        return false;
                    }
                });

                if(flag==1){
                    this.loading = true;
                    this.cancelQuota();
                    this.lastData.forEach((item) => {
                        let count = -1;
                        this.totalData.forEach((m,n) => {
                            if (item.pri_bid_id === m.pri_bid_id && item.supplier_name != null) {
                                count += 1;
                                this.totalData[n]['award_percent'] = Number(item['award_percent' + count]);
                            }
                        });
                    });
                    this.$http({
                        method: 'post',
                        url: '/buz/rtBuzSupQuote/update1',
                        data: {
                            rtBuzSupQuotes: this.totalData
                        }
                    }).then((response) => {
                        if (response.data.code === 200) {
                            this.$message.success('保存成功');
                            this.hide = 'hide';
                            //this.handleSizeChange(this.page);
                        }
                    }).finally(() => {
                        this.loading = false;
                    })
                }else{
                    this.$message({
                        type: 'warning',
                        message: '配额总值必须等于100'
                    });
                }
            },

            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>