baoshi-was/resources/views/maintenance/priceModel/operation/create.blade.php

@extends('layouts.app')
@section('title')计费模型-仓储计费@endsection

@section('content')
    <div id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.priceModel.operation.menu')@endcomponent
    </div>
    <div class="container-fluid mt-2 card" id="container">
        <div class="modal fade" style="top: 30%" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <div>
                            <div class="col-3 form-inline">
                                <label for="feature_type">类型：</label>
                                <select id="feature_type" class="form-control form-control-sm">
                                    <option>商品名称</option>
                                </select>
                            </div>
                            <div class="col-3 form-inline">
                                <label for="feature_logic">逻辑：</label>
                                <select id="feature_logic" class="form-control form-control-sm">
                                    <option>不包含</option>
                                </select>
                            </div>
                            <div class="col-4 form-inline">
                                <label for="feature">特征：</label>
                                <input id="feature" type="text" class="form-control form-control-sm">
                            </div>
                            <div class="col-2 form-inline">

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-3 form-inline">
                                <label for="feature_type">类型：</label>
                                <select id="feature_type" class="form-control form-control-sm">
                                    <option>商品名称</option>
                                </select>
                            </div>
                            <div class="col-3 form-inline">
                                <label for="feature_logic">逻辑：</label>
                                <select id="feature_logic" class="form-control form-control-sm">
                                    <option>不包含</option>
                                </select>
                            </div>
                            <div class="col-4 form-inline">
                                <label for="feature">特征：</label>
                                <input id="feature" type="text" class="form-control form-control-sm">
                            </div>
                            <div class="col-2 form-inline">

                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success">提交更改</button>
                    </div>
                </div>
            </div>
        </div>
        <form method="GET" action="{{url('')}}" class="card-body offset-3">
            <div class="row">
                <label class="col-2" for="owner_id">项目</label>
                <select id="owner_id" name="owner_id" class="selectpicker" multiple data-live-search="true" title="项目(多选)">

                </select>
            </div>
            <div class="row mt-3">
                <label for="type" class="col-2">操作类型</label>
                <select id="type" v-model="type" name="type" class="col-3 form-control">
                    <option>入库</option>
                    <option>出库</option>
                </select>
            </div>
            <div class="row mt-3">
                <label for="strategy" class="col-2">计费策略</label>
                <select id="strategy" name="strategy" class="col-3 form-control">

                </select>
            </div>
            <div class="row mt-3">
                <label for="name" class="col-2">名称</label>
                <input id="name" type="text" name="name" class="col-6 form-control">
            </div>
            <div class="row mt-3">
                <div v-for="(pond,i) in ponds" class="card row text-white col-8" :class="i>0 ? 'bg-secondary mt-2' : 'bg-info'">
                    <div class="card-header">
                        <div class="pull-left" v-if="i==0 && type=='出库'"><span @click="addDom()" class="fa fa-plus-square-o" style="cursor: pointer"></span></div>
                        <div class="pull-right" v-if="i==len && len!=0"><span @click="delDom(i)" class="fa fa-window-close-o" style="cursor: pointer"></span></div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-4 form-inline">
                                <label for="amount"><span v-if="type=='出库'">起步数：</span><span v-else>计量：</span></label>
                                <input id="amount" type="number" name="amount" class="form-control">
                            </div>
                            <div class="col-4 form-inline">
                                <label for="discount_type">单位：</label>
                                <select id="discount_type" name="discount_type" class="form-control">
                                    <option></option>
                                </select>
                            </div>
                            <div class="col-4 form-inline">
                                <label for="unit_price">单价：</label>
                                <input id="unit_price" type="number" name="unit_price" class="form-control">
                            </div>
                        </div>
                        <div class="row mt-2" v-if="type=='出库'">
                            <label for="out_storage_strategy" class="col-2">出库策略：</label>
                            <select id="out_storage_strategy" name="out_storage_strategy" class="col-5 form-control">
                                <option>起步</option>
                                <option>默认</option>
                                <option>特征</option>
                            </select>
                        </div>
                        <div class="row mt-2" v-if="type=='出库'">
                            <label for="describe" class="col-2">特征：</label>
                            <input id="describe" type="text" :value="pond" v-if="pond" disabled class="col-5 form-control"/>
                            <button type="button" class="btn btn-dark col-2" v-else @click="showModal()">添加特征</button>
                        </div>
                    </div>
                </div>
            </div>


                    <div class="row mt-3">
                        <label for="discount_value" class="col-2">减免值</label>
                        <input id="discount_value" type="number" name="discount_value" class="col-6 form-control">
                    </div>
                    <div class="row mt-3">
                        <label for="unit_id" class="col-2">单位</label>
                        <select id="unit_id" name="unit_id" class="col-3 form-control">
                            <option></option>
                        </select>
                    </div>

            <div class="row mt-3 offset-1">
                <button type="submit" class="btn btn-success col-7">提交</button>
            </div>
        </form>
    </div>
@stop

@section("lastScript")
    <script>
        new Vue({
            el:"#container",
            data:{
                priceTypes : [],
                types : [],
                discountTypes : [],
                units : [],
                ponds : [""],
                len : 0,
                type : "",
            },
            methods:{
                addDom(){
                    this.ponds.push("");
                    this.len++;
                },
                delDom(index){
                    this.$delete(this.ponds,index);
                    this.len--;
                },
                showModal(){
                    $("#modal").modal("show");
                }
            },
        });
    </script>
@stop