vue iView table in render rendering

<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">
<Item prop-EL-form = "add_user" label = "Sales Settlement Price:">
<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> <Item prop-EL-form =" add_user "label =" Submit Search Time: ">
<COL-EL: span = '. 8 ">

<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();
}). the finally (() => {
this.loading to false =
})
},
// get a unique supplier
uniqueSupplier (ARR, name) {
the let = new new backArr the Set ()
arr.forEach ((Item) => {
backArr.add (Item [name])
})
return [... backArr]
},
// remove the specified element
uniquespecifiedElm (ARR, delArr) {
arr.forEach ((Item, index) => {
for (the let in Item Key ) {
iF (item.hasOwnProperty (Key)) {// determines whether the object's own properties, does not contain attributes inherited from the prototype chain
IF (delArr.indexOf (Key) = -1!) {
Delete ARR [index] [Key];
}
}
}
});
},

// merge data into the vendor;
mergeData (totalArr, afterData, Suppliers) {/ and removing the data fields do / totalArr total data, afterData deduplication material;
afterData.forEach ((Item, index) => {
totalArr.forEach ((J) => {
IF (item.material_code === j.material_code ) {
the let suppliers.indexOf POS = (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 () {
the let columns_add = [
{type: 'Selection', width: 60, align = left: 'Center', 'title': ''},
{Key: 'add_org', 'title': 'Purchase tissue ', width: 100},
{Key:' material_code ',' title ':' material ', width: 100},
{Key:' material_name ',' title ':' material name ', width: 100},
{ key: 'material_desc', 'title ': ' material description', width: 100},
{Key: 'num_qty', 'title': 'expected Order quantity', width: 100},
{Key: 'PREVIOUS_PRICE', 'title ':' of the lowest price / unit ', width: 150,' align = left ':' 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("last modified date ", 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>

Guess you like

Origin www.cnblogs.com/alinelong/p/12119731.html