yf_zd
/
yfwlwCut


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467
							{% load staticfiles %}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>添加单位信息</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="{% static '/lib/css/ace.min.css' %}" />
  <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
  <style>
    html,body{
      background: #fff;
    }
    .layui-form-item .layui-input-inline {
      width: 40%;
    }

    .layui-form-item .addressSelect {
      width: 27%;
    }

    .layui-input-inline .layui-input,
    .layui-input-inline .layui-textarea {
      width: 96%;
      display: inline-block;
    }

    .red {
      font-size: 16px;
      color: #e01515;
    }
  </style>
</head>

<body>

  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-body">
            <form class="layui-form" action="" lay-filter="example">
              <div class="layui-form-item">
                <label class="layui-form-label">
                  <span class="red">*</span>单位名称：</label>
                <div class="layui-input-inline">
                  <input type="text" name="unit" lay-verify="unitVlid" autocomplete="off" placeholder="请输入标题" class="layui-input">

                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">
                  <span class="red">*</span>地址：</label>
                <div class="layui-input-inline">
                  <input type="text" name="address" lay-verify="addressVlid" placeholder="请输入地址" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">
                  <span class="red">*</span>单位简介：</label>
                <div class="layui-input-inline">
                  <textarea placeholder="请输入单位简介" lay-verify="required" class="layui-textarea" name="unitDesc"></textarea>
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">所属省市：</label>
                <div class="layui-input-inline addressSelect">
                  <select name="province" lay-filter="province" id="province">

                  </select>
                </div>
                <div class="layui-input-inline addressSelect">
                  <select name="city" lay-filter="city" id="city">

                  </select>
                </div>
                <div class="layui-input-inline addressSelect">
                  <select name="area" lay-filter="area" id="area">

                  </select>
                </div>
              </div>
              <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">
                  <span class="red">*</span>负责人：</label>
                <div class="layui-input-inline">
                  <input type="text" name="principal" lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">
                  <span class="red">*</span>联系电话：</label>
                <div class="layui-input-inline">
                  <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注：</label>
                <div class="layui-input-inline">
                  <input type="text" name="remarks" autocomplete="off" placeholder="请输入标题" class="layui-input">
                </div>
              </div>

              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="btn btn-sm btn-primary" lay-submit="" lay-filter="send">立即提交</button>
                </div>
              </div>
              <input type="hidden" value="" name="id">
            </form>
            <input type="hidden"  value="{{aaa}}" id="currUserMsg">

          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="{% static '/lib/layui/layui.all.js' %}"></script>

  <script>
    layui.use(['form', 'layer', 'upload', 'jquery'], function () {
      var form = layui.form
        , layer = layui.layer
        , upload = layui.upload;
      var $ = layui.$;

      //自定义验证规则
      form.verify({
        unitVlid: function (value) {
          if (value.length < 5) {
            return '单位名称至少得5个字符';
          }
        }
        , addressVlid: function (value) {
          if (value.length < 5) {
            return '地址至少得5个字符啊';
          }
        }
        , pass: [
          /^[\S]{6,12}$/
          , '密码必须6到12位，且不能出现空格'
        ]
        , content: function (value) {
          layedit.sync(editIndex);
        }
      });

      //普通图片上传
      var uploadInst = upload.render({
        elem: '#test1'
        , url: '/upload/'
        , auto: false //选择文件后不自动上传

        , before: function (obj) {
          //预读本地文件示例，不支持ie8
          obj.preview(function (index, file, result) {
            $('#demo1').attr('src', result); //图片链接（base64）
          });
        }
        , done: function (res) {
          //如果上传失败
          if (res.code > 0) {
            return layer.msg('上传失败');
          }
          //上传成功
        }
        , error: function () {
          //演示失败状态，并实现重传
          var demoText = $('#demoText');
          demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
          demoText.find('.demo-reload').on('click', function () {
            uploadInst.upload();
          });
        }
      });
      //多图片上传
      upload.render({
        elem: '#test2'
        , url: '/upload/'
        , auto: false //选择文件后不自动上传
        , multiple: true
        , bindAction: '#send'   /*提交图片*/
        , choose: function (obj) {
          //预读本地文件示例，不支持ie8
          obj.preview(function (index, file, result) {
            $('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
            $('#demo2').attr('src', result); //图片链接（base64）
          });
        }
        , before: function (obj) {
          //预读本地文件示例，不支持ie8
          obj.preview(function (index, file, result) {
            $('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
          });
        }
        , done: function (res) {
          //上传完毕
        }
      });

      //监听提交
      form.on('submit(send)', function (data) {
        console.log(data.field)
        $.ajax({
          url: 'save',
          type: 'post',
          async: true,
          data: data.field,
          dataType: 'json',
          success: function (data) {
            if(data == 0){
              var companyInp = window.parent.document.getElementById("companyInp").value;
              var table = parent.window.layui.table;
              //执行重载
              table.reload('tableReload', {
                where: {
                    id: companyInp
                }
              }, 'data');
              var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
              parent.layer.close(index); //再执行关闭
            }
          },
          error: function (type) {

          }
        })
        // layer.alert(JSON.stringify(data.field), {
        //   title: '最终的提交信息'
        // })
        return false;
      });

      // 三级联动
      if (!$('#currUserMsg').val()) {
        $.ajax({
          url: 'province',
          type: 'post',
          async: false,
          data: {},
          dataType: 'json',
          success: function (data) {
            var html = '<option value="">-请选择-</option>';
            if (data.length) {
              for (var i = 0; i < data.length; i++) {
                html += '<option value="' + data[i].province + '">' + data[i].province + '</option>'
                // form.render('select');
                if (i + 1 == data.length) {
                  $('#province').html(html);
                  form.render('select');
                }
              }
            }
          },
          error: function (type) {

          }
        })
      }

      // 切换省份 市区刷新
      form.on('select(province)', function (data) {
        if (data.value) {
          $.ajax({
            url: 'province',
            type: 'post',
            async: false,
            data: {},
            dataType: 'json',
            success: function (data) {
              var html = '<option value="">-请选择-</option>';
              if (data.length) {
                for (var i = 0; i < data.length; i++) {
                  html += '<option value="' + data[i].province + '">' + data[i].province + '</option>'
                  // form.render('select');
                  if (i + 1 == data.length) {
                    $('#city').html(html);
                    $('#area').html('');
                    form.render('select');
                  }
                }
              }
            },
            error: function (type) {

            }
          })
        } else {
          $('#city').html('');
          $('#area').html('');
          form.render('select');
        }
      });
      // 切换市区  地区刷新
      form.on('select(city)', function (data) {
        if (data.value) {
          $.ajax({
            url: 'province',
            type: 'post',
            async: false,
            data: {},
            dataType: 'json',
            success: function (data) {
              var html = '<option value="">-请选择-</option>';
              if (data.length) {
                for (var i = 0; i < data.length; i++) {
                  html += '<option value="' + data[i].province + '">' + data[i].province + '</option>'
                  // form.render('select');
                  if (i + 1 == data.length) {
                    $('#area').html(html);
                    form.render('select');
                  }
                }
              }
            },
            error: function (type) {

            }
          })
        } else {
          $('#area').html('');
          form.render('select');
        }
      });

      // 判断是否为编辑页
      if ($('#currUserMsg').val()) {
        var currUserMsg = JSON.parse(unescape($('#currUserMsg').val()));
        //表单初始赋值
        form.val('example', {
          "id":currUserMsg.id
          ,"unit": currUserMsg.name // "name": "value"
          , "address": currUserMsg.address
          , "unitDesc": currUserMsg.unitDesc
          , "principal": currUserMsg.principal
          , "phone": currUserMsg.phone
          , "remarks": currUserMsg.remarks
        })
        // 请求省级列表
        $.ajax({
          url: 'province',
          type: 'post',
          async: false,
          data: {},
          dataType: 'json',
          success: function (data) {
            var html = '<option value="">-请选择-</option>';
            if (data.length) {
              for (var i = 0; i < data.length; i++) {
                if(data[i].id == currUserMsg.province){
                  html += '<option selected="selected" value="' + data[i].province + '">' + data[i].province + '</option>'
                }else{
                  html += '<option value="' + data[i].province + '">' + data[i].province + '</option>'
                }
                // form.render('select');
                if (i + 1 == data.length) {
                  $('#province').html(html);
                  form.render('select');
                }
              }
            }
          },
          error: function (type) {

          }
        });
        // 市
        if(currUserMsg.city){
          $.ajax({
            url: 'province',
            type: 'post',
            async: false,
            data: {},
            dataType: 'json',
            success: function (data) {
              var html = '<option value="">-请选择-</option>';
              if (data.length) {
                for (var i = 0; i < data.length; i++) {
                  if(data[i].id == currUserMsg.city){
                    html += '<option selected="selected" value="' + data[i].province + '">' + data[i].province + '</option>'
                  }else{
                    html += '<option value="' + data[i].province + '">' + data[i].province + '</option>'
                  }
                  // form.render('select');
                  if (i + 1 == data.length) {
                    $('#city').html(html);
                    form.render('select');
                  }
                }
              }
            },
            error: function (type) {

            }
          });
        }
        
        // 区
        if(currUserMsg.area){
          $.ajax({
            url: 'province',
            type: 'post',
            async: false,
            data: {},
            dataType: 'json',
            success: function (data) {
              var html = '<option value="">-请选择-</option>';
              if (data.length) {
                for (var i = 0; i < data.length; i++) {
                  if(data[i].id == currUserMsg.area){
                    html += '<option selected="selected" value="' + data[i].province + '">' + data[i].province + '</option>'
                  }else{
                    html += '<option value="' + data[i].province + '">' + data[i].province + '</option>'
                  }
                  // form.render('select');
                  if (i + 1 == data.length) {
                    $('#area').html(html);
                    form.render('select');
                  }
                }
              }
            },
            error: function (type) {

            }
          });
        }

      }


    });
    // (function(){
    //   $.ajax({
    //     url:'/province',
    //     type:'post',
    //     async:false,
    //     data:{},
    //     dataType:'json',
    //     success:function(data){
    //       var html = '';
    //       if(data.length){
    //         for(var i = 0;i<data.length;i++){
    //           html += '<option value="'+data[i].province+'">'+data[i].province+'</option>'
    //         }
    //         if(i == data.length-1){
    //           $('#province').html(html);
    //         }
    //       }
    //     },
    //     error:function(type){

    //     }
    //   })
    //   $('#city').html('<option value=" ">-请选择-</option>');
    //   form.render();
    // })()
  </script>

</body>

</html>