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>