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.part._one")
                </div>
                <div v-if="base == 'two'">
                    @include("customer.project.part._two")
                </div>
                <div v-if="base == 'three'">
                    @include("customer.project.part._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:"three",
                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:"特征"},
                        ],
                    },
                    express:{
                        name:"",
                        initial_weight:"",
                        additional_weight:"",
                        items:[],
                    },
                    logistic:{},
                },
                pool:{//基础数据选择池，以方便异步懒加载而非即时加载 例:units,owners等
                    counting_type:[
                        "包仓","灵活用仓","统单价"
                    ],
                    using_type:[
                        "常温","恒温"
                    ],
                    discount_type:[
                        "无减免","按单减免","固定减免"
                    ],
                    feature_type:['商品名称','订单类型','承运商','店铺类型'],
                    logic : ['包含','不包含','等于'],
                },
                poolMapping:{//基础数据选择池的映射对象 供展示使用

                },
                selectedModel:{//已选定的计费模型
                    storage:[],
                    operation:[],
                    express:{},
                },
                thisOperationItemIndex:-1,//当前选中的作业费子项下标,用以唤起特征模态框
                operationItems:{},//控制作业费子项的渐入展开
                importError:[],//导入时的错误数据原因
                isShowError:false,//是否展开导入错误信息
            },
            mounted(){
                $('[data-toggle="tooltip"]').tooltip();
                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;
                        case "express":
                            this._loadExpress();
                            break;
                        case "logistic":
                            this._loadLogistic();
                            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();
                    }
                },
                //上一步
                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();
                },
                //加载快递
                _loadExpress(){
                    if (!this.pool.provinces)this._getProvinces();
                },
                //加载物流
                _loadLogistic(){
                    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();
                    });
                },
                //获取省份
                _getProvinces(){
                    let url = "{{url('maintenance/province/get')}}";
                    window.tempTip.postBasicRequest(url,{},res=>{
                        this.pool.provinces = res;
                        let mapping = [];
                        res.forEach(province=>{
                            mapping[province.id] = province.name;
                        });
                        this.poolMapping.provinces = mapping;
                        this.$forceUpdate();
                    });
                },
                //保存模型
                saveModel(){
                    switch (this.type) {
                        case "storage":
                            this._verifyStorage();
                            break;
                        case "operation":
                            this._verifyOperation();
                            break;
                        case "express":
                            this._verifyExpress();
                            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 = [];
                },
                _verifyOperation() {
                    if (this.selectedModel.operation.length>0){
                        this.selectedModel.operation.forEach(operation=>{
                            if (operation.operation_type === this.model.operation.operation_type && operation.strategy === this.model.operation.strategy){
                                this.errors["operation_type"] = ["已存在同类型的"+operation.operation_type+"作业计费模型"];
                                this.$forceUpdate();
                                return;
                            }
                        });
                    }
                    if (!this.model.operation.name){
                        this.errors["name"] = ["名称不得为空"];
                        this.$forceUpdate();
                        return;
                    }
                    if ((this.model.operation.operation_type === '出库' && this._verifyOperationItem(0)) || this._verifyOperationItem(1))return;
                    if (this.model.operation.items.length>2){
                        for (let i=2;i<this.model.operation.items.length;i++){
                            if (this._verifyOperationItem(i))return;
                        }
                    }
                    if (this.model.operation.operation_type === '入库')this.$delete(this.model.operation.items,0);//入库时干掉起步子项
                    this.selectedModel.operation.push(this.model.operation);
                    setTimeout(()=>{
                        this._renderingOperationItem(this.selectedModel.operation.length-1);
                    },100);
                    this.model.operation = {
                        operation_type:"入库",
                        strategy:"默认",
                        name:"",
                        feature:"",
                        items : [
                            {strategy:"起步"},
                            {strategy:"默认"},
                            {strategy:"特征"},
                        ],
                    };
                    this.errors = [];
                },
                _verifyOperationItem(itemIndex){//验证作业费子项信息完整
                    let obj = this.model.operation.items[itemIndex];
                    let sign = false;
                    if (!obj.amount){
                        this.errors['items.'+itemIndex+'.amount'] = ["数量不得为空"];
                        sign = true;
                    }
                    if (!obj.unit_id){
                        this.errors['items.'+itemIndex+'.unit_id'] = ["必须选择单位"];
                        sign = true;
                    }
                    if (!obj.unit_price){
                        this.errors['items.'+itemIndex+'.unit_price'] = ["单价不得为空"];
                    }
                    if (sign)this.$forceUpdate();
                    return sign;
                },
                _verifyExpress(){
                    let error = {};
                    if (!this.model.express.name)error.name = ["名称不得为空"];
                    if (!this.model.express.initial_weight)error.initial_weight = ["首重不得为空"];
                    if (!this.model.express.additional_weight)error.additional_weight = ["续重不得为空"];
                    if (this.model.express.items.length>0){
                        this.model.express.items.forEach((item,index)=>{
                            if (!item.province_id)error["item."+index+".province_id"] = ["不存在"];
                            if (!item.initial_weight_price)error["item."+index+".initial_weight_price"] = ["不存在"];
                            if (!item.additional_weight_price)error["item."+index+".additional_weight_price"] = ["不存在"];
                        });
                    }
                    if (JSON.stringify(error) !== "{}"){
                        this.errors = error;
                        this.$forceUpdate();
                        return;
                    }
                    this.selectedModel.express = this.model.express;
                    this.model.express = {
                        name:"",
                        initial_weight:"",
                        additional_weight:"",
                        items:[],
                    };
                    this.errors = [];
                    this.importError = [];
                },
                //增加作业费特征子项
                addOperationItem(){
                    this.model.operation.items.push({
                        strategy:"特征"
                    });
                },
                //删除作业费子项
                delOperationItem(index){
                    this.$delete(this.model.operation.items,index);
                },
                //显示特征选择modal
                showAddFeatureModal(index){
                    if (index === -1){
                        if (!this.model.operation.feature){
                            this.model.operation.features = this._createFeature();
                            this.thisOperationItemIndex = index;
                            this.$forceUpdate();
                            $("#addFeatureModal").modal("show");
                            return;
                        }
                        if (this.model.operation.features) {
                            this.thisOperationItemIndex = index;
                            $("#addFeatureModal").modal("show");
                            return;
                        }
                    }else{
                        if (!this.model.operation.items[index].feature){
                            this.model.operation.items[index].features = this._createFeature();
                            this.thisOperationItemIndex = index;
                            $("#addFeatureModal").modal("show");
                            return;
                        }
                        if (this.model.operation.items[index].features) {
                            this.thisOperationItemIndex = index;
                            $("#addFeatureModal").modal("show");
                            return;
                        }
                    }
                    let url = "{{url('maintenance/priceModel/operation/getFeatures')}}";
                    let feature = index===-1 ? this.model.operation.feature : this.model.operation.items[index].feature;
                    window.tempTip.postBasicRequest(url,{feature:feature},res=>{
                        if (!res.data.data || res.data.data.length === 0){
                            res.data.data = this._createFeature();
                        }
                        if (index === -1) this.model.operation.features = res.data.data;
                        else this.model.operation.items[index].features = res.data.data;
                        this.thisOperationItemIndex = index;
                        $("#addFeatureModal").modal("show");
                    });
                },
                //增加特征
                addFeature(){
                    let obj = {
                        "strategyGroupStartSign": false,
                        "calculation" : "",
                        "type" : "",
                        "id" : "",
                        "logic" : "",
                        "describe" : "",
                        "strategyGroupEndSign" : false,
                    };
                    if (this.thisOperationItemIndex === -1)this.model.operation.features.push(obj);
                    else this.model.operation.items[this.thisOperationItemIndex].features.push(obj);
                    this.$forceUpdate();
                },
                _createFeature(){
                    return [{
                        "strategyGroupStartSign": false,
                        "calculation" : "",
                        "type" : "",
                        "id" : "",
                        "logic" : "",
                        "describe" : "",
                        "strategyGroupEndSign" : false,
                    }];
                },
                //删除特征
                delFeature(index) {
                    if (this.thisOperationItemIndex === -1)this.$delete(this.model.operation.features,index);
                    else this.$delete(this.model.operation.items[this.thisOperationItemIndex].features,index);
                    this.$forceUpdate();
                },
                //提交特征更新现有
                submitFeature(){
                    let url = "{{url('maintenance/priceModel/operation/getFeature')}}";
                    let features = this.thisOperationItemIndex === -1 ? this.model.operation.features : this.model.operation.items[this.thisOperationItemIndex].features;
                    window.tempTip.postBasicRequest(url,{features:features,isFormat:true},res=>{
                        if (this.thisOperationItemIndex === -1){
                            this.model.operation.feature = res.feature;
                            this.model.operation.featureFormat = res.featureFormat;
                        } else {
                            this.model.operation.items[this.thisOperationItemIndex].feature = res.feature;
                            this.model.operation.items[this.thisOperationItemIndex].featureFormat = res.featureFormat;
                            this.$forceUpdate();
                        }
                        $("#addFeatureModal").modal("hide");
                        return "已更新特征";
                    },true);
                },
                //渲染作业费子项
                _renderingOperationItem(index){
                    let domId = "operation-"+index;
                    let trId = "operation-tr-"+index;
                    let itemId = "operation-item-"+index;
                    let html = "<tr class='d-none' id='"+trId+"'><td></td><td colspan='5'>"+
                        "<div id='"+itemId+"'><table class='table table-sm'>"+
                        "<th>子策略</th><th>数量</th><th>单位</th><th>单价</th><th>特征</th></th>";
                    this.selectedModel.operation[index].items.forEach(item=> {
                        html = this._createOperationItemList(html,item.strategy,item.amount,this.poolMapping.units[item.unit_id],item.unit_price,item.featureFormat ? item.featureFormat : '');
                    });
                    html += "</table></div></td></tr>";
                    $("#"+domId).after(html);
                    $("#"+itemId).slideUp();
                },
                _createOperationItemList(html,strategy,amount,unit,unit_price,feature){
                    html += "<tr><td>"+strategy+"</td><td>"+amount+"</td><td>"+unit+"</td><td>"+unit_price+"</td><td><div class='text-overflow-warp-100'>"+feature+"</div></td></tr>";
                    return html;
                },
                //移入移出时更改长文本显示效果
                textClass(event,isOver){
                    event = event.target.children[0];
                    if (isOver) event.className = "text-overflow-warp-100";
                    else event.className = "cursor-pointer text-overflow-replace-100";
                },
                //展开子策略
                showOperationItem(index){
                    let trId = "operation-tr-"+index;
                    let itemId = "operation-item-"+index;
                    if (this.operationItems['_'+index] &&  this.operationItems['_'+index]===true){
                        this.operationItems['_'+index] = false;
                        $("#"+itemId).slideUp(undefined,function () {
                            $("#"+trId).addClass("d-none");
                        });
                    }else {
                        $("#"+trId).removeClass("d-none");
                        this.operationItems['_'+index] = true;
                        $("#"+itemId).slideDown();
                    }
                    this.$forceUpdate();
                },
                //新增快递子项
                addExpressItem(){
                    this.model.express.items.unshift({
                        province_id : "",
                        initial_weight_price:"",
                        additional_weight_price:"",
                    });
                },
                //删除快递子项
                delExpressItem(index){
                    this.$delete(this.model.express.items,index);
                },
                //选择文件
                selectFile(id){
                    this.importError = [];
                    $("#"+id).click();
                },
                //导入快递子项
                importExpress(e){
                    let file=e.target.files[0];
                    if (!file){
                        tempTip.setDuration(3000);
                        tempTip.show("未选择文件");
                        return;
                    }
                    let formData = new FormData();
                    formData.append("file",file);
                    axios.post('{{url('maintenance/priceModel/express/import')}}',formData,{
                        'Content-Type':'multipart/form-data'
                    }).then(res=>{
                            if (res.data.success) {
                                res.data.data.forEach(data=>{
                                    let unique = this.model.express.items.every(item=>{
                                        if (data.province_id === item.province_id)return false;
                                        return true;
                                    });
                                    if (unique)this.model.express.items.push(data);
                                });
                                this.importError = res.data.errors;
                                tempTip.setDuration(3000);
                                tempTip.showSuccess("导入成功!");
                                return;
                            }
                            tempTip.setDuration(3000);
                            tempTip.show(res.data.data);
                        }).catch(err=> {
                        tempTip.setDuration(3000);
                        tempTip.show("网络错误："+err);
                    })
                },
                //物流详情列表modal
                showDetailModal() {
                    $("#logisticModal").modal("show");
                },
                //新增物流详情
                addLogisticDetail(){
                    this.model.logistic.items.unshift({
                        "edit" : true,
                    });
                },
                //导入物流详情
                importLogistic(event){
                    console.log(event);
                },
            },
        });
    </script>
@stop