<!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="../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
       <style type="text/css">
        .table-overlay .layui-table-view,
        .table-overlay .layui-table-header,
        .table-overlay .layui-table-box,
        .table-overlay .layui-table-body{overflow: visible;}
        .table-overlay .layui-table-cell{height: auto; overflow: visible;}
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" pad15>
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">

                    <form class="layui-form" action="" lay-filter="component-form-element">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-xs6 layui-col-sm4">
                                <label class="layui-form-label"><font color='red' size="4">*</font>合同号：</label>
                                <div class="layui-input-block">
                                    <input id="id_no" type="text" name="no" lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-xs6 layui-col-sm4">
                                <label class="layui-form-label"><font color='red' size="4">*</font>供应商：</label>
                                <div class="layui-input-block">
                                    <select id="id_supplier" name="supplier" lay-verify="required" lay-search>
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-col-xs6 layui-col-sm4">
                                <label class="layui-form-label">付款方式：</label>
                                <div class="layui-input-block">
                                    <!--<input id="id_payment_type" type="text" name="payment_type" autocomplete="off"
                                           class="layui-input">-->
                                    <input type="text" name="payment_type" id="id_payment_type" class="layui-input" style="position:absolute;z-index:2;width:80%;" autocomplete="off">
                                    <select lay-filter="hc_select">
                                        <option value="票到付款">票到付款</option>
                                        <option value="预付">预付</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-xs6 layui-col-sm4">
                                <label class="layui-form-label"><font color='red' size="4">*</font>收货人：</label>
                                <div class="layui-input-block">
                                    <input id="id_consignee_name" type="text" name="consignee_name" lay-verify="required" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>

                            <div class="layui-col-xs6 layui-col-sm4">
                                <label class="layui-form-label"><font color='red' size="4">*</font>收货电话：</label>
                                <div class="layui-input-block">
                                    <input id="id_consignee_tel" type="text" name="consignee_tel" lay-verify="required" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>

                            <div class="layui-col-xs6 layui-col-sm4">
                                <label class="layui-form-label">交货时间：</label>
                                <div class="layui-input-block">
                                    <input id="id_deliver_time" type="text" name="deliver_time" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-row layui-col-space10">

                            <div class="layui-col-xs12">
                                <label class="layui-form-label">备注：</label>
                                <div class="layui-input-block">
                                    <input id="id_notes" type="text" name="notes" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                        </div>

                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>产品明细&nbsp;&nbsp;<button type="button" id="part-btn-add" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button></legend>
                        </fieldset>
                        <div class="table-overlay">
                            <table id="product_data_table" lay-filter="product_data_table" class="layui-hide"></table>
                        </div>
                        <button class="layui-btn" id="purchase-order-submit" lay-submit lay-filter="component-form-element" style="display: none">保存</button>
                    </form>

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

  <script src="../../layuiadmin/layui/layui.js"></script>
  <script>

  var _options = [];
  layui.link('../../../layuiadmin/style/autocomplete.css');
  layui.config({
    base: '../../../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index',
    autocomplete: 'autocomplete'
  }).use(['index', 'form', 'autocomplete', 'table', 'utils'], function(){
    var $ = layui.$
    ,admin = layui.admin
    ,element = layui.element
    ,form = layui.form
    ,table = layui.table
    ,utils = layui.utils
    ,autocomplete = layui.autocomplete;

    var id = layui.view.getParameterByName('id');
    var supplier_type = layui.view.getParameterByName('type');
    var supplier_option = '';

    admin.req({
        url: '/foundation/search_options/?type=4',
        done: function(res){
            _options = res.data;
        }
    });

    admin.req({
        url: '/supplier/supplier/select/?type=' + supplier_type,
        done: function(res){
            var suppliers = res.data;
            for (var i in suppliers) {
                 supplier_option += "<option value="+ suppliers[i].id+">"+ suppliers[i].value+"</option>";
            }
            $("#id_supplier").append(supplier_option);
            form.render();
            if (id) {
                var orderData = JSON.parse(JSON.stringify(parent.layui.table.editdata));
                form.val("component-form-element", orderData);
            }
        }
    });

    var product_data_table = "product_data_table";
	var product_tableIns = table.render({
        elem: '#product_data_table',
        id: product_data_table,
        data: [],
        page: false,
        limit: 1000,
        loading: true,
        even: true, //不开启隔行背景
        cols: [[
            {title: '序号', type: 'numbers'},
            {field: 'name', title: '产品名称', width: 100},
            {field: 'model', title: '产品代码', width: 100},
            {field: 'type_text', title: '产品类别', width: 100},
            {field: 'option_text', title: '类型', width: 100},
            {field: 'unit', title: '单位', width: 80},
            {field: 'count', title: '数量', width: 100, templet: function (d){
            return '<input id="count'+d.id+'" type="text" value="'+d.count+'" lay-verify="required|numberGtZ" autocomplete="off" class="layui-input">';
            }},
            {field: 'price', title: '单价', width: 100, templet: function (d){
            return '<input id="price'+d.id+'" type="text" value="'+d.price+'" lay-verify="required|numberGeZ" autocomplete="off" class="layui-input">';
            }},
            {field: 'option_type', title: '质量要求', width: 150, templet: function (d) {
                     return '<input id="option_type'+d.id+'" type="text" value="'+d.option_type+'" autocomplete="off" class="layui-input">';
                }
            },
            {field: 'id', title: '操作',minWidth:120, templet: function(d){
                return '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" lay-id="'+ d.id +'"><i class="layui-icon layui-icon-delete"></i>删除</a>';
            }}
        ]]
    });

    table.on('tool(product_data_table)', function (obj) {
        var data = obj.data;
        var event = obj.event;

        switch (event) {

            case "del":
                obj.del();
                layer.msg('删除成功', {icon: 6});
                break;
        }
    });

    form.render(null, 'component-form-element');
    element.render('breadcrumb', 'breadcrumb');


    var getProductData = function () {
        var rows = table.cache[product_data_table];
        var items = [];
        for(var k in rows){
            if (rows[k] == false) {
                continue;
            }

            var option_type = $('#option_type'+rows[k].id).val();
            var count = $('#count'+rows[k].id).val();
            var price = $('#price'+rows[k].id).val();

            var item = {
                id:rows[k].id,
                product:rows[k].id,
                name:rows[k].name,
                model:rows[k].model,
                option_text: rows[k].option_type_text,
                type_text: rows[k].type_text,
                count:count,
                price:price,
                quality_request_text:option_type
            };
            items.push(item);
        }
        return items
    };

    form.on('select(hc_select)', function (data) {   // 赋值给input框
                $("#id_payment_type").val(data.value);
                form.render();
            });

    form.on('submit(component-form-element)', function(data){

        var items = getProductData();
        var supplier = $('#id_supplier').val();
        var payment_type = $('#id_payment_type').val();
        var notes = $('#id_notes').val();
        var deliver_time = $('#id_deliver_time').val();
        var no = $('#id_no').val();
        var consignee_name = $('#id_consignee_name').val();
        var consignee_tel = $('#id_consignee_tel').val();

        if(items.length == 0){
            layer.msg('请添加产品！', {icon: 5});
            return false;
        }

        var order_data = {
            'supplier': supplier,
            'notes': notes,
            'no': no,
            'count': 0,
            'amount': 0,
            'payment_type': payment_type,
            'deliver_time':deliver_time,
            'consignee_name': consignee_name,
            'consignee_tel': consignee_tel
        };

        data.field.order_data = order_data;
        data.field.items = items;
        admin.req({
            url: '/purchase/purchase_order/save/?id='+id
            ,data: JSON.stringify(data.field)
            ,type: 'post'
            , done: function (res) {
                parent.layui.onSubmitChild();
            }
        });
        return false;
    });

    $('#btn_close').on('click', function() {
        parent.layer.closeAll('iframe');
    });

    $('#part-btn-add').on('click', function(){
        layer.open({
          type: 2,
          title: '添加产品',
          shadeClose: false,
          area: ['90%', '98%'],
          btn: ['保存', '取消'],
          yes: function (index, layero) {
               layui.onSubmitChild = function (data) {
                  var oldData = getProductData();
                  if (data.length > 0) {
                        layer.msg('添加成功！', {icon: 6});
                  } else {
                        layer.msg('请先选择记录！');
                    }
                  for (var i in data){
                      var is_exit = false;
                       for (var m in oldData){
                      if(oldData[m].id == data[i].id){
                          is_exit = true;
                          break;
                      }
                  }
                      if(is_exit){
                          continue;
                      }
                      var newRow = {
                        id:data[i].id,
                        name:data[i].name,
                        model:data[i].model,
                        type_text: data[i].type_text,
                        option_text: data[i].option_type_text,
                        unit: data[i].unit,
                        count: 1.00,
                        price: '',
                        warehouse_place:data[i].warehouse_place,
                        option_type: ''
                      };
                      oldData.push(newRow);
                  }
                    product_tableIns.reload({
                        data: oldData
                    });
                };
                layui.submitChild();
            },
          btn2: function(index, layero){
            layer.close(index);
          },
          content: 'search_purchase_product.html?type=' + supplier_type
        });
    });

    if (id) {
        admin.req({
          url: '/purchase/purchase_order/detail/?id='+id,
          done: function(res){
            var data = res.data.items_data;
            var oldData = [];
            for (var i in data) {
                var item = data[i];
                var newRow = {
                    id: item.product_id,
                    name: item.name,
                    model:item.model,
                    unit:item.unit,
                    price: item.price,
                    count: item.count,
                    amount: item.amount,
                    type_text: item.type_text,
                    option_text: item.options_type_text,
                    warehouse_place: '',
                    option_type: item.quality_request_text
                }
                oldData.push(newRow);
            }
            product_tableIns.reload({
                data: oldData
            });
          }
        });
    } else {
        admin.req({
        url: '/config/data/',
        done: function (res) {
            var data = res.data;
            var edit_data = {};
            for(var i in data) {
                if (data[i].property === 'consignee_name'){
                    edit_data['consignee_name'] = data[i].value;
                }else if (data[i].property === 'consignee_tel') {
                    edit_data['consignee_tel'] = data[i].value;
                }
            }
            form.val("component-form-element", edit_data);
            form.render();
        }
    });
    }


    parent.layui.submitChild = function () {
      $("#purchase-order-submit").click();
    };

  });

  </script>
</body>
</html>