baoshi-was/resources/views/customer/project/create.blade.php

@extends('layouts.app')
@section('title')客户管理-项目录入@endsection

@section('content')
    @component('customer.project.menu')
        @if($owner)
            <li class="nav-item">
                <a class="nav-link" href="{{URL::current()}}" :class="{active:isActive('edit',4)}">编辑</a>
            </li>
        @endif
    @endcomponent
    <div class="container-fluid card" id="container">
        <div class="card-body offset-2">
            <div class="row">
                <div class="col-2 form-inline cursor-pointer text-dark" @click="switchBase('one')">
                    <div class="h-100 w-25">
                        <div class="h1 fillet text-center" :class="[base == 'one' ? 'sign' : '', (base!=='one' && !owner.name) ? 'bg-secondary border-secondary' : 'bg-info']">
                            <span class="fa fa-edit ml-1 text-white"></span>
                        </div>
                    </div>
                    <div class="h-100 w-75">
                        <span class="font-weight-bold ml-1">基础信息</span><br>
                        <span class="small ml-1">名称：@{{ owner.name }}</span><br>
                        <span class="small ml-1">代码：@{{ owner.code }}</span><br>
                    </div>
                </div>
                <div class="col-2">
                    <hr class="w-100 mt-4 hr-info">
                </div>
                <div class="col-2 form-inline cursor-pointer text-dark" @click="switchBase('two')">
                    <div class="h-100 w-25">
                        <div class="h1 fillet text-center" :class="[base == 'two' ? 'sign' : '', (base!=='two' && !owner.customer_id) ? 'bg-secondary border-secondary' : 'bg-info']">
                            <span class="fa fa-book ml-1 text-white"></span>
                        </div>
                    </div>
                    <div class="h-100 w-75">
                        <span class="font-weight-bold ml-1">详细描述</span><br>
                        <span class="small ml-1">客户：@{{ owner.customer_name }}</span><br>
                        <span class="small ml-1">小组：@{{ owner.owner_group_name }}</span><br>
                    </div>
                </div>
                <div class="col-2">
                    <hr class="w-100 mt-4 hr-info">
                </div>
                <div class="col-2 form-inline cursor-pointer text-dark" @click="switchBase('three')">
                    <div class="h-100 w-25">
                        <div class="h1 fillet text-center" :class="[base == 'three' ? 'sign' : '', (base!=='three' && !owner.ownerStoragePriceModels) ? 'bg-secondary border-secondary' : 'bg-info']">
                            <span class="fa fa-rmb ml-1 text-white "></span>
                        </div>
                    </div>
                    <div class="h-100 w-75">
                        <div class="font-weight-bold ml-1 h-100 mt-3">计费模型</div>
                    </div>
                </div>
            </div>
            <form method="POST" action="{{url('customer/project/store')}}" class="mt-5">
                @csrf
                <div v-if="base == 'one'">
                    @include("customer.project._one")
                </div>
                <div v-if="base == 'two'">
                    @include("customer.project._two")
                </div>
                <div v-if="base == 'three'">
                    @include("customer.project._three")
                </div>
                <div class="row mt-3">
                    <div class="pull-right offset-7">
                        <button type="button" class="btn btn-info ml-1 text-white" v-show="base !== 'one'" @click="back()">上一步</button>
                        <button type="button" class="btn btn-info ml-1 text-white" v-show="base !== 'three'" @click="next()">下一步</button>
                        <button type="button" class="btn btn-success ml-1">完成</button>
                        <button type="button" class="btn btn-secondary ml-1">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@stop

@section('lastScript')
    <script>
        new Vue({
            el:"#container",
            data:{
                base:"one",
                owner : {
                    id:"{{old('id') ?? ($owner->id ?? '') }}",
                    name : "{{old('name') ?? ($owner->name ?? '')}}",
                    code : "{{old('code') ?? ($owner->code ?? '')}}",
                    customer_id : "{{old('customer_id') ?? ($owner->customer_id ?? '')}}",
                    customer_name : "{{ isset($owner) ? ($owner->customer ? $owner->customer->name : '') : ''}}",
                    owner_group_name : "{{ isset($owner) ? ($owner->userOwnerGroup ? $owner->userOwnerGroup->name : '') : ''}}",
                    owner_group_id : "{{old('owner_group_id') ?? ($owner->user_owner_group_id ?? '')}}",
                    tax_rate : "{{old('tax_rate') ?? ($owner->tax_rate ?? '')}}",
                    linkman : "{{old('linkman') ?? ($owner->linkman ?? '')}}",
                    phone_number : "{{old('phone_number') ?? ($owner->phone_number ?? '')}}",
                    description : "{{old('description') ?? ($owner->description ?? '')}}",
                    waring_line_on : "{{old('waring_line_on') ?? ($owner->waring_line_on ?? '')}}",
                },
                ownerTemp : {
                    id:"{{$owner->id ?? ''}}",
                    name : "{{$owner->name ?? ''}}",
                    code : "{{$owner->code ?? ''}}",
                    customer_id : "{{$owner->customer_id ?? ''}}",
                    customer_name : "{{ isset($owner) ? ($owner->customer ? $owner->customer->name : '') : ''}}",
                    owner_group_name : "{{ isset($owner) ? ($owner->userOwnerGroup ? $owner->userOwnerGroup->name : '') : ''}}",
                    owner_group_id : "{{$owner->user_owner_group_id ?? ''}}",
                    owner_storage_price_model_id : "{{$owner->owner_storage_price_model_id ?? ''}}".split(','),
                    tax_rate : "{{$owner->tax_rate ?? ''}}",
                    linkman : "{{$owner->linkman ?? ''}}",
                    phone_number : "{{$owner->phone_number ?? ''}}",
                    description : "{{$owner->description ?? ''}}",
                    waring_line_on : "{{$owner->waring_line_on ?? ''}}",
                },
                storagePriceModels : [
                    @foreach($storagePriceModels as $storagePriceModel)
                    {   id:"{{$storagePriceModel->id}}",
                        counting_type : "{{$storagePriceModel->counting_type}}",
                        using_type : "{{$storagePriceModel->using_type}}",
                        minimum_area : "{{$storagePriceModel->minimum_area}}",
                        price : "{{$storagePriceModel->price}}",
                        unit_name : "{{$storagePriceModel->unit ? $storagePriceModel->unit->name : ''}}",
                    },
                    @endforeach
                ],
                customers : [
                    @foreach($customers as $customer)
                    {id:"{{$customer->id}}",name:"{{$customer->name}}"},
                    @endforeach
                ],
                ownerGroups : [
                    @foreach($ownerGroups as $ownerGroup)
                    {id:"{{$ownerGroup->id}}",name:"{{$ownerGroup->name}}"},
                    @endforeach
                ],
                style : '',
                errors : {!! $errors !!}, //全部的错误提示
                display:false,
                upList:{ //控制元素的渐入展开与收起
                    storage : false,
                },
                type:"storage",//当前编辑类型 仓储，作业，物流...
                model:{ //编辑元素绑定值
                    storage:{
                        counting_type : "",
                        using_type : "",
                        minimum_area : "",
                        price : "",
                        discount_type : "无减免",
                        discount_value : "",
                        unit_id : "",
                    },
                    operation:{
                        operation_type:"入库",
                        strategy:"默认",
                        name:"",
                        feature:"",
                        items : [
                            {strategy:"起步"},
                            {strategy:"默认"},
                            {strategy:"特征"},
                        ],
                    },
                },
                pool:{//基础数据选择池，以方便异步懒加载而非即时加载 例:units,owners等
                    counting_type:[
                        "包仓","灵活用仓","统单价"
                    ],
                    using_type:[
                        "常温","恒温"
                    ],
                    discount_type:[
                        "无减免","按单减免","固定减免"
                    ],
                },
                poolMapping:{//基础数据选择池的映射对象 供展示使用

                },
                selectedModel:{//已选定的计费模型
                    storage:[],
                },
                thisOperationItemIndex:-1,//当前选中的作业费子项下标,用以唤起特征模态框
                oldFeature:"",//上一个特征，如果与当前特征一致则无需再次转换特征
            },
            mounted(){
                if (this.errors.length===0 && this.owner.id){
                    this.display = true;
                }
            },
            methods:{
                //收起展开
                show(id){
                    if (this.upList[id])$("#"+id).slideDown();
                    else $("#"+id).slideUp();
                    this.upList[id] = !this.upList[id];
                },
                //切换选项
                switchBase(base){
                    if (base === 'three') this._loadStorage();
                    if (base === this.base)return;
                    this.base = base;
                },
                //切换类型
                switchType(type){
                    if (type === this.type)return;//相同终止是为了减少重复加载动作
                    switch (type) {
                        case "storage":
                            this._loadStorage();
                            break;
                        case "operation":
                            this._loadOperation();
                            break;
                    }
                    this.type = type;
                },
                //下一步
                next(){
                    switch (this.base) {
                        case "one":
                            this._verifyOne();
                            break;
                        case "two":
                            this._verifyTwo();
                            break;
                        default:
                            this._loadStorage();
                            break;
                    }
                },
                //验证基础信息
                _verifyOne(){
                    if (!this.owner.name){
                        this.errors["name"] = ["项目名称为必填项"];
                        this.$forceUpdate();
                        return;
                    }
                    if (!this.owner.code){
                        this.errors["code"] = ["项目代码为必填项"];
                        this.$forceUpdate();
                        return;
                    }
                    this._requestRequest({name:this.owner.name,code:this.owner.code},"two")
                },
                //验证详细描述
                _verifyTwo(){
                    if (!this.owner.customer_id){
                        this.errors["customer_id"] = ["必须选择客户"];
                        this.$forceUpdate();
                    }
                    if (!this.owner.owner_group_id){
                        this.errors["owner_group_id"] = ["必须选择项目小组"];
                        this.$forceUpdate();
                    }
/*                    this._requestRequest({
                        customer_id:this.owner.customer_id,
                        owner_group_id:this.owner.owner_group_id,
                        tax_rate:this.owner.tax_rate,
                        waring_line_on:this.owner.waring_line_on,
                    },"three")*/
                },
                //上一步
                back(){
                    switch (this.base) {
                        case "two":
                            this.base = 'one';
                            break;
                        case "three":
                            this.base = 'two';
                            break;
                    }
                },
                //请求验证
                _requestRequest(params, next){
                    let url = "{{url('customer/project/verify')}}";
                    window.tempTip.postBasicRequest(url,params,res=>{
                        if (res.length > 0){
                            this.errors = res;
                            this.$forceUpdate();
                        }else{
                            this.base = next;
                            this.errors = [];
                        }
                    });
                },
                //加载仓储所需基础信息
                _loadStorage(){
                    if (!this.pool.units)this._getUnits();
                },
                //加载作业
                _loadOperation(){
                    if (!this.pool.units)this._getUnits();
                },
                //获取单位
                _getUnits(){
                    let url = "{{url('maintenance/unit/getUnits')}}";
                    window.tempTip.postBasicRequest(url,{},res=>{
                        this.pool.units = res;
                        let mapping = [];
                        res.forEach(unit=>{
                            mapping[unit.id] = unit.name;
                        });
                        this.poolMapping.units = mapping;
                        this.$forceUpdate();
                    });
                },
                //保存模型
                saveModel(){
                    switch (this.type) {
                        case "storage":
                            this._verifyStorage();
                            break;
                    }
                },
                _verifyStorage(){
                    if (!this.model.storage.counting_type){
                        this.errors["counting_type"] = ["未选择计费类型"];
                        this.$forceUpdate();
                        return;
                    }
                    if (!this.model.storage.using_type){
                        this.errors["using_type"] = ["未选择用仓类型"];
                        this.$forceUpdate();
                        return;
                    }
                    if (!this.model.storage.price){
                        this.errors["price"] = ["未输入单价"];
                        this.$forceUpdate();
                        return;
                    }
                    if (!this.model.storage.discount_type){
                        this.errors["discount_type"] = ["未选择减免类型"];
                        this.$forceUpdate();
                        return;
                    }
                    this.selectedModel.storage.unshift(this.model.storage);
                    this.model.storage = {
                        counting_type : "",
                        using_type : "",
                        minimum_area : "",
                        price : "",
                        discount_type : "无减免",
                        discount_value : "",
                        unit_id : "",
                    };
                    this.errors = [];
                },
                //增加作业费特征子项
                addOperationItem(){
                    this.model.operation.items.push({
                        strategy:"特征"
                    });
                },
                //删除作业费子项
                delOperationItem(index){
                    this.$delete(this.model.operation.items,index);
                },
                //显示特征选择modal
                showAddFeatureModal(index,feature){
                    if (!feature){
                        this.model.operation.items[index].features = [{
                            "strategyGroupStartSign": false,
                            "calculation" : "",
                            "type" : "",
                            "id" : "",
                            "logic" : "",
                            "describe" : "",
                            "strategyGroupEndSign" : false,
                        }];
                        this.thisOperationItemIndex = index;
                        $("#addFeatureModal").modal("show");
                        return;
                    }
                    if (this.oldFeature === feature) {
                        this.thisOperationItemIndex = index;
                        $("#addFeatureModal").modal("show");
                        return;
                    }
                    let url = "{{url('maintenance/priceModel/operation/getFeatures')}}";
                    window.tempTip.postBasicRequest(url,{feature:feature},res=>{
                        this.features = res.data.data;
                        this.oldFeature = feature;
                        if (!this.features || this.features.length === 0){
                            this.features = [{
                                "strategyGroupStartSign": false,
                                "calculation" : "",
                                "type" : "",
                                "id" : "",  //特征ID
                                "logic" : "",  //特征逻辑
                                "describe" : "",  //特征信息
                                "strategyGroupEndSign" : false,
                            }];
                        }
                        this.thisOperationItemIndex = index;
                        $("#addFeatureModal").modal("show");
                    });
                },
            },
        });
    </script>
@stop