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>