Layer 弹出层打开、关闭及参数传递
layer页面，点击【重做】按钮，弹出重做窗口，新窗口用vue
// 新重做
function redo(){
layer.open({
type: 2 , //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层)
area: ['1000px','700px'],
title: '重做',
content: ['/hismaterial/redo_index?notice_id='+'{{$id}}', 'no'], //用 url 指向某页面, no代表不显示滚动条
});
重做窗口页面：
<div class="col-md-12" v-loading="loading">
<br class="row">
<el-form label-width="80px" :model="addForm" status-icon :rules="rules" ref="addForm" style="padding-left: 10px;padding-right: 10px;">
<el-row>
<template v-for="(item,index) in redoList" :key="it.key">
<el-card class="box-card">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="责任部门" :prop="'redoList.'+index+'.depart'">
<template slot-scope="scope">
<el-select v-model="item.depart" placeholder="请选择" style="width: 300px" clearable @change="depart_change(item.depart)">
<el-option
v-for="item in departList"
:key="item.value"
:label="item.label"
:value="item.value"
>el-option>
el-select>
template>
el-form-item>
el-col>
<el-col :span="8">
<el-form-item label="占比" :prop="'redoList.'+index+'.percent'">
<el-input v-model="item.percent" readonly>el-input>
el-form-item>
el-col>
<el-col :span="2">
<el-button icon="el-icon-plus" type="success" round @click="addDepart()" v-if="index==0">新增el-button>
<el-button icon="el-icon-delete" type="danger" round @click="delDepart(index)" v-if="index!=0">移除el-button>
el-col>
el-row>
<el-row>
<el-col :span="12">
<el-form-item label="重做原因" :prop="'redoList.'+index+'.cause'">
<el-select v-model="item.cause" multiple clearable placeholder="请选择" style="width: 300px">
<el-option
v-for="item in causeList"
:key="item.value"
:label="item.label"
:value="item.value"
>el-option>
el-select>
el-form-item>
el-col>
<el-col :span="8">
<el-form-item label="备注" :prop="'redoList.'+index+'.remark'">
<el-input v-model="item.remark">el-input>
el-form-item>
el-col>
el-row>
el-card>
template>
el-row>
<br class="row">
<el-row>
<el-col :span="10">
<el-form-item>el-form-item>
el-col>
<el-col :span="10">
<el-button @click="cancelBtn()">取 消el-button>
<el-button type="primary" @click="submitBtn('addForm')">提 交el-button>
el-col>
el-row>
<br class="row">
el-form>
div>
<script>
new Vue({
el: '#app',
// var Main = {
delimiters:['${', '}'],
data() {
return {
loading: false,
add_i: 0,
redoList: [],
departList:[],
causeList:[],
// 原因配置
notice_id: null,
causeData:[],//所有原因的数据源
}
},
filters: {
rounding (value) {
var val = parseFloat(value)
if (value || value == 0) {
var vals = Math.ceil(val * 10) / 10
return vals
}
}
},
methods: {
//初始化责任部门
get_depart() {
var that = this
$.ajax({
url: "/hismaterial/getBasicCause",
type: "GET",
data: {
'flag': 1
},
dataType: 'json',
success: function (res) {
if (res.code == 100) {
that.departList = res.data;
} else {
that.departList = [];
}
}
});
},
//初始化原因
depart_change(idx) {
var that = this
if (idx == undefined) {
return
}
//初始化原因，并捞出责任人
let depart_list = that.departList;
that.causeList = [];
let tag = 1;
for (var i = 0; i < depart_list.length; i++) {
if (depart_list[i].value == idx) {
that.causeList = depart_list[i].children;
tag = depart_list[i].tag;
}
}
//捞出责任人，传什么去捞秃几把？
that.getUserid(that.notice_id,tag);
},
//把秃捞出来
getUserid(notice_id,tag) {
console.log(notice_id,tag)
},
//增加
addDepart() {
this.add_i = this.redoList.length;
if (this.redoList.length < 3) {
if (this.redoList.length == 0 && this.add_i == 0) {
this.redoList.push({"percent": "100%"});
this.add_i++;
} else if (this.redoList.length == 1 && this.add_i == 1) {
this.redoList[0]['percent'] = '55%'
this.redoList.push({"percent": "45%"});
this.add_i++;
} else if (this.redoList.length == 2 && this.add_i == 2) {
this.redoList[0]['percent'] = '55%'
this.redoList[1]['percent'] = '25%'
this.redoList.push({"percent": "20%"});
}
}
},
//删除
delDepart(index) {
console.log('删除')
this.redoList.splice(index, 1)
if (this.redoList.length < 3) {
if (this.redoList.length == 1) {
this.redoList[0]['percent'] = '100%'
this.add_i--;
} else if (this.redoList.length == 2) {
this.redoList[0]['percent'] = '55%'
this.redoList[1]['percent'] = '45%'
this.add_i--;
}
}
},
//提交
submitBtn() {
console.log('提交')
console.log(this.redoList)
},
//取消
cancelBtn() {
console.log('取消')
this.loading = false;
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
},
/*
* 汇总数据
**/
getData() {
var that = this
return;
$.ajax({
url: "",
type: "GET",
data: {
area_id: 1,
},
dataType: 'json',
success: function (res) {
if (res.code == 100) {
that.finish_data = res.data.data;
} else {
that.finish_data = [];
}
}
});
},
//编辑未达成原因说明
edit_cause(rows) {
let that = this;
that.drawerTitle = '请选择未达成原因：';
that.causeDrawer = true
that.notice_id = rows.notice_id;
that.selectCauses(rows.notice_id)
},
// 查询出对应原因
selectCauses(notice_id) {
let that = this;
var data = {
'notice_id': notice_id,
};
$.ajax({
url: "/admin/report/getNoticeCause",
type: "GET",
data: data,
dataType: 'json',
success: function (res) {
that.causeData = res.data
that.getSpanArr(res.data);
that.$nextTick(() => {
that.causeData.forEach((item) => {
if (item.status === true) {
that.$refs.multipleTable.toggleRowSelection(item, true);//打狗
}
});
});
},
error: function (error) {
console.log('请求失败');
console.log(error);
}
});
},
//保存未达成原因说明
saveCause() {
var that = this
if (that.multipleSelection.length == 0) {
that.$message({
message: "请选择未完成原因！",
type: 'warning'
})
return
}
that.$confirm('确认提交? 提交之后不能修改 !', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
that.loading = true;
jQuery.ajax({
url: "/admin/report/saveCause",
type: "post",
data: {
'_token': LA.token,
'notice_id': that.notice_id,
'cause': that.multipleSelection,
},
dataType: 'json',
success: function (res) {
that.loading = false;
that.causeDrawer = false;
if (res.code == 1) {
that.$message({
message: res.msg,
type: 'success'
})
that.getData();
} else {
that.$message({
message: res.msg,
type: 'warning'
})
}
}
});
})
},
RequestParameter() {
var url = window.location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
var strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
}
}
return theRequest
},
},
mounted() {
this.get_depart();
this.addDepart();
//搞了半天把秃id传进来了
this.notice_id = this.RequestParameter()["notice_id"];
}
});
</script>