// 使用vue 做表格部分其他部分暂不修改
var app = new Vue({
el: "#freightTbl",
watch: { //监听表格数据的变化【使用 watch+nextTick 可以完成页面数据监听的 不会出现闪烁】
regFreData: { //深度监听运费表格数据
handler(val, oldVal) {
this.$nextTick(function() {
var thisSelTreeData = this.regFreTreeData; //每一个表格树选中的值
for(var j = 0; j < thisSelTreeData.length; j++) {
if(thisSelTreeData[j].data.length > 0) {
var thisHtml = "";
for(var i = 0; i < thisSelTreeData[j].data.length; i++) {
thisHtml += '<div class="ivu-tag ivu-tag-checked"><span class="ivu-tag-text">' + thisSelTreeData[j].data[i].title + '</span> <i class="ivu-icon ivu-icon-ios-close-empty" onclick="remoeTblSelTreeNode(this,' + j + ',\'' + thisSelTreeData[j].data[i].title + '\')"></i > </div>';
}
//选中的值 渲染到页面
$("body").find("#" + thisSelTreeData[j].treeId).parent().parent().siblings().children("div").html(thisHtml);
} else {
$("body").find("#" + thisSelTreeData[j].treeId).parent().parent().siblings().children("div").html('<span class="ivu-select-placeholder">请选择</span>');
}
}
});
},
deep: true
}
},
methods: {
//未指定地区设置运费 点击事件
addregFreData: function() {
var thisTreeId = "freightTblTree_" + this.regFreData.length;
//表格数据增加一条数据
this.regFreData.push({
destination: '', //运送到
firstThings: 0, //首**
firstFreight: 0, //首**费用
continueThings: 0, //续**
continueFreight: 0, //续**费用
treeId: thisTreeId,
treeData: JSON.parse(JSON.stringify(this.regLea)),
eidtId: "11" //无用初始使用
});
//每个表格下拉树选中的值
this.regFreTreeData.push({
treeId: thisTreeId,
data: []
});
//显示表格
app.showFreTbl = true;
},
//表格下拉树选中节点的事件【】
showSelNodes: function(thisDatas, treeID, index) { //所有选中树节点数据,当前树的ID，树在数组中的索引
var thisHtml = "";
this.regFreTreeSelData = [], //title
thisSelData = []; //选中的值
for(var i = 0; i < thisDatas.length; i++) {
if(thisDatas[i].hasOwnProperty("children") && this.regFreTreeSelData.indexOf(thisDatas[i].nodeKey) == -1) {
//拥有子级【保存子级的nodeKey】
thisSelData.push(thisDatas[i]);
thisHtml += '<div class="ivu-tag ivu-tag-checked"><span class="ivu-tag-text">' + thisDatas[i].title + '</span> <i class="ivu-icon ivu-icon-ios-close-empty" onclick="remoeTblSelTreeNode(this,' + index + ',\'' + thisDatas[i].title + '\')"></i > </div>';
this.saveSelTreeNodeKey(thisDatas[i].children);
} else {
if(this.regFreTreeSelData.indexOf(thisDatas[i].nodeKey) == -1) {
thisSelData.push(thisDatas[i]);
thisHtml += '<div class="ivu-tag ivu-tag-checked"><span class="ivu-tag-text">' + thisDatas[i].title + '</span> <i class="ivu-icon ivu-icon-ios-close-empty" onclick="remoeTblSelTreeNode(this,' + index + ',\'' + thisDatas[i].title + '\')"></i > </div>';
}
}
}
//将选中的值保存到每一个下拉树的值
this.regFreTreeData[index].data = thisSelData;
//选中的值 渲染到页面
$("body").find("#" + treeID).parent().parent().siblings().children("div").html(thisHtml);
},
//表格下拉树选中事件递归
saveSelTreeNodeKey: function(thisDatas) {
for(var i = 0; i < thisDatas.length; i++) {
if(this.regFreTreeSelData.indexOf(thisDatas[i].nodeKey) == -1) {
this.regFreTreeSelData.push(thisDatas[i].nodeKey);
}
if(thisDatas[i].hasOwnProperty("children")) {
this.saveSelTreeNodeKey(thisDatas[i].children);
}
}
},
//修改表格下拉树的选中状态
editTblTreeChecked: function(selData, treeDataindex) {
var thisTreeData = this.regFreData[treeDataindex].treeData,
thisselTitleArr = selData.map(function(value, index, arr) {
return value.title;
});
for(var i = 0; i < thisTreeData.length; i++) {
if(thisselTitleArr.indexOf(thisTreeData[i].title) > -1 && !thisTreeData[i].hasOwnProperty("children")) {
thisTreeData[i].checked = true;
} else {
thisTreeData[i].checked = false;
}
if(thisTreeData[i].hasOwnProperty("children")) {
this.dgEditTblTreeChecked(thisselTitleArr, thisTreeData[i].children);
}
}
},
////修改表格下拉树的选中状态 递归
dgEditTblTreeChecked: function(thisselTitleArr, thisTreeData) {
for(var i = 0; i < thisTreeData.length; i++) {
if(thisselTitleArr.indexOf(thisTreeData[i].title) > -1 && !thisTreeData[i].hasOwnProperty("children")) {
thisTreeData[i].checked = true;
} else {
thisTreeData[i].checked = false;
}
if(thisTreeData[i].hasOwnProperty("children")) {
this.dgEditTblTreeChecked(thisselTitleArr, thisTreeData[i].children);
}
}
}
},
data: {
showFreTbl: false, //是否显示表格
//地区 省市级联数据
regLea: [],
//保存选中当前树的节点的title
regFreTreeSelData: [],
//保存表格每一个下拉树选中的值
regFreTreeData: [],
//为地区设置运费表格 -数据
regFreData: [],
showFreData: false,
tablInputData:[10],
//为地区设置运费表格 -列
regFreCol: [{
title: '运送到',
key: 'destination',
width: 300,
render: function(h, params) {
return h("div", [
h("Select", {
props: {
"multiple": "multiple"
}
}, [
h("Tree", {
props: {
"data": params.row.treeData,
"show-checkbox": "show-checkbox",
"multiple": "multiple"
},
attrs: { //属性 存放id
id: params.row.treeId
},
on: {
"on-check-change": function(data) {
//对应下拉树的ID
var thisTreeId = params.row.treeId;
if(data.length == 0) {
$("body").find("#" + thisTreeId).parent().parent().siblings().children("div").html('<span class="ivu-select-placeholder">请选择</span>');
} else {
//渲染选中的树的节点
app.showSelNodes(data, thisTreeId, params.index);
}
//计算下拉的位置
var afterOffset = parseInt($("body").find("#" + thisTreeId).parent().parent().siblings()[0].offsetHeight),
thisOffsetTop = parseInt($("body").find("#" + thisTreeId).parent().parent().siblings()[0].offsetTop);
$("body").find("#" + thisTreeId).parent().parent().css({
"top": thisOffsetTop + afterOffset
});
//设置选中的节点的状态
app.editTblTreeChecked(data, params.index);
}
}
})
])
])
}
}, {
title: '首件(件)',
key: 'firstThings',
render: function(h, params) {
return h('div', [
h('InputNumber', {
props: {
value:params.row.firstThings,
min: 0,
size: 'small'
},
style: {
width: "100%"
},
on: {
"on-change": function(value) {
//保存
params.row.firstThings=value;
app.regFreData[params.index] = params.row;
}
}
})
]);
}
}, {
title: '费用(元)',
key: 'firstFreight',
render: function(h, params) {
return h('div', [
h('InputNumber', {
props: {
value: params.row.firstFreight,
min: 0,
size: 'small'
},
style: {
width: "100%"
},
on: {
"on-change": function(value) {
params.row.firstFreight=value;
app.regFreData[params.index] = params.row;
}
}
})
]);
}
}, {
title: '续件(件)',
key: 'continueThings',
render: function(h, params) {
return h('div', [
h('InputNumber', {
props: {
value: params.row.continueThings,
min: 0,
size: 'small'
},
style: {
width: "100%"
},
on: {
"on-change": function(value) {
params.row.continueThings=value;
app.regFreData[params.index] = params.row;
}
}
})
]);
}
}, {
title: '运费(元)',
key: 'continueFreight',
render: function(h, params) {
return h('div', [
h('InputNumber', {
props: {
value: params.row.continueFreight,
min: 0,
size: 'small'
},
style: {
width: "100%"
},
on: {
"on-change": function(value) {
params.row.continueFreight=value;
app.regFreData[params.index] = params.row;
}
}
})
]);
}
}, {
title: '删除',
key: 'del',
render: function(h, params) {
return h('Poptip', {
props: {
trigger: 'click',
title: "确认删除吗",
placement: 'bottom',
confirm: "confirm"
},
on: {
"on-ok": function() {
//从 tableData中删除
app.regFreData.splice(params.index, 1);
//将下拉树选中值删除
app.regFreTreeData.splice(params.index, 1);
if(app.regFreData.length == 0) app.showFreTbl = false;
},
"on-cancel": function() {}
}
}, [
h('a', {
props: {
size: 'small'
},
style: {
}
}, '删除')
])
}
}]
},
mounted: function() {
getProvincialData();
}
});
//获取大区省市的数据
function getProvincialData() {
al.ajax({
url: '/brd/aic/fl',
contentType: 'application/json;chartset=UTF-8',
data: {},
callback: function(result, data, msg) {
var thisData = data;
for(var i = 0; i < thisData.length; i++) {
thisData[i].title = thisData[i].LABLE;
if(thisData[i].hasOwnProperty("ITEMS")) {
diguipData(thisData[i].ITEMS);
thisData[i].children = thisData[i].ITEMS;
}
}
app.regLea = thisData;
app.showFreData = true;
doEdit();
}
});
}
function diguipData(thisData) {
for(var i = 0; i < thisData.length; i++) {
thisData[i].title = thisData[i].LABLE;
if(thisData[i].hasOwnProperty("ITEMS")) {
diguipData(thisData[i].ITEMS);
thisData[i].children = thisData[i].ITEMS;
}
}
}
//表格选中下拉树的值移除 从树改变状态
function remoeTblSelTreeNode(obj, index, title) {
event.stopPropagation();
//不添加这个 不会重新渲染
app.regFreData[0].eidtId = parseInt(Math.random() * (10 - 1) + 1);
//从表格移除
var thisTreeData = app.regFreData[Number(index)].treeData; //遍历树 找到对应的节点修改选中状态
for(var i = 0; i < thisTreeData.length; i++) {
if(thisTreeData[i].title == title) {
//
if(thisTreeData[i].hasOwnProperty("children")) {
cancelNodeChildren(thisTreeData[i].children);
}
thisTreeData[i].checked = false;
//break;
} else if(thisTreeData[i].hasOwnProperty("children")) {
remoeTblSelTreeNodeDg(thisTreeData[i].children, title);
}
}
//修改
for(var i = 0; i < app.regFreTreeData[index].data.length; i++) {
if(app.regFreTreeData[index].data[i].title == title) {
app.regFreTreeData[index].data.splice(i, 1);
break;
}
}
}
//递归取消树的选中状态
function remoeTblSelTreeNodeDg(data, title) {
for(var i = 0; i < data.length; i++) {
if(data[i].title == title) {
if(data[i].hasOwnProperty("children")) {
cancelNodeChildren(data[i].children);
}
data[i].checked = false;
} else if(data[i].hasOwnProperty("children")) {
remoeTblSelTreeNodeDg(data[i].children, title);
}
}
}
function cancelNodeChildren(data) {
for(var i = 0; i < data.length; i++) {
if(data[i].hasOwnProperty("children")) {
cancelNodeChildren(data[i].children);
}
data[i].checked = false;
}
}
function getData() {
console.log(JSON.stringify(app.regFreData))
}
validateAddForm();
//添加表单的验证
function validateAddForm() {
$('#infoForm').bootstrapValidator({
live: 'enabled', //验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
message: '此项不可用',
feedbackIcons: {
/* valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh' */
},
fields: {
/* 模板名称 */
nm: {
message: '验证失败',
validators: {
notEmpty: {
message: '请输入模板名称'
},
}
},
/* 默认运费 */
init_unit: {
validators: {
notEmpty: {
message: '至少添加一种规格'
}
}
},
/* 费用 */
init_fee: {
validators: {
notEmpty: {
message: '至少添加一种规格'
}
}
},
/* 每增加件 */
rate_unit: {
validators: {
notEmpty: {
message: '至少添加一种规格'
}
}
},
/* 费用 */
rate_fee: {
validators: {
notEmpty: {
message: '至少添加一种规格'
}
}
}
},
submitHandler: function(validator, form, submitButton) {
addHandler();
//这是提交的方法
}
});
}
function addHandler() {
var handleJson = {};
var id = $("input[name='id']").val();
if(null != id && "" != id && undefined != id) {
handleJson['id'] = id;
}
//获取模板名称
handleJson['nm'] = $.trim($("#name").val());
//计费方式
handleJson['mun_miss'] = $("#billingWay").find(".ant-radio-checked").find(".ant-radio-input").attr("data-type");
//默认运费设置
handleJson['init_unit'] = $("#dian_dian").val();
handleJson['init_fee'] = $("#dian_dian1").val(); //费用
handleJson['rate_unit'] = $("#dian_dian2").val(); //每增加
handleJson['rate_fee'] = $("#dian_dian3").val(); //费用
//添加表格的数据
//每一行选中的树的值
// app.regFreTreeData;
//表格中的数据
//app.regFreData;
//获取选中的运送到的地区的 title/code
var thisFreTitle = [],
thisFreCode = [];
for(var i = 0; i < app.regFreTreeData.length; i++) {
thisFreTitle[i] = app.regFreTreeData[i].data.map(function(val, index, arr) {
return val.title;
});
thisFreCode[i] = app.regFreTreeData[i].data.map(function(val, index, arr) {
return val.CODE;
})
};
var thisregFreData = app.regFreData;
for(var i = 0; i < thisregFreData.length; i++) {
app.regFreData[i]["citys_nm"] = thisFreTitle[i].join(",");
thisregFreData[i]["citys_code"] = thisFreCode[i].join(",");
//thisregFreData[i].treeDatas=JSON.stringify(app.regFreTreeData[i]);
delete thisregFreData[i].treeData;
}
handleJson['tblData'] = JSON.stringify(thisregFreData);
al.ajax({
url: '/brd/cc/save',
//contentType: 'application/json;chartset=UTF-8',
data: $.param(handleJson, true),
callback: function(result, data, msg) {
if(result) {
window.location.href = "/brd/cc/inx";
}
}
});
}
var thisEditTreeData = []; //编辑保存选中的树的节点
function doEdit() {
//判断是新增还是修改
var thisTempid = $("#temId").val();
if(thisTempid != "") {
al.ajax({
url: '/brd/cc/sfd',
data: {
id: thisTempid
},
callback: function(result, data, msg) {
for(var i = 0; i < data.length; i++) {
thisEditTreeData = [];
if( data[i].CITYS_CODE==null|| data[i].CITYS_CODE==""||data[i].CITYS_CODE.length==0){
continue;
}
var thisCityCode = data[i].CITYS_CODE.split(",");
//设置下拉树的选中状态
var thistreeData = JSON.parse(JSON.stringify(app.regLea));
for(var j = 0; j < thistreeData.length; j++) {
if(thisCityCode.indexOf(thistreeData[j].CODE) > -1) {
thistreeData[j].checked = true;
thisEditTreeData.push(thistreeData[j]);
} else if(thistreeData[j].hasOwnProperty("children")) {
diguiEdit(thistreeData[j].children, thisCityCode);
}
}
//设置每一行的数据
app.regFreData.push({
"destination": "",
"firstThings": data[i]["INIT_UNIT"],
"firstFreight": data[i]["INIT_FEE"],
"continueThings": data[i]["RATE_UNIT"],
"continueFreight": data[i]["RATE_FEE"],
"treeId": "freightTblTree_" + i,
"treeData": thistreeData,
"eidtId": "11"
});
//设置每一行选中的树的节点
app.regFreTreeData.push({
"treeId": "freightTblTree_" + i,
data: thisEditTreeData
});
}
//显示表格
app.showFreTbl = true;
}
});
}
thisEditTreeData = [];
}
function diguiEdit(thistreeData, thisCityCode) {
for(var i = 0; i < thistreeData.length; i++) {
if(thisCityCode.indexOf(thistreeData[i].CODE) > -1) {
thistreeData[i].checked = true;
thisEditTreeData.push(thistreeData[i]);
} else if(thistreeData[i].hasOwnProperty("children")) {
diguiEdit(thistreeData[i].children, thisCityCode);
}
}
}
