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

@extends('layouts.app')
@section('title')项目列表-项目管理@endsection

@section('content')
    @component('customer.project.menu')@endcomponent
    <div class="container-fluid d-none" id="container">
        <div id="form_div"></div>
        <div class="modal fade" tabindex="-1" role="dialog" id="modal">
            <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="container-fluid" v-if="priceModel[thisClickIndex]">
                            <div class="row" v-for="(model,i) in priceModel[thisClickIndex]['ownerStoragePriceModels']">
                                <label class="text-dark font-weight-bold col-3"><span v-if="i==0">仓储：</span></label>
                                <a target="_blank" @can("计费模型-仓储-录入"):href="'{{url('customer/project')}}/'+thisClickIndex+'/edit?type=storage'" @endcan class="text-decoration-none">@{{ model.counting_type }}-@{{ model.using_type }}</a>
                            </div>
                            <hr class="m-1" v-if="priceModel[thisClickIndex]['ownerPriceOperations'].length>0">
                            <div class="row" v-for="(model,i) in priceModel[thisClickIndex]['ownerPriceOperations']">
                                <label class="text-dark font-weight-bold col-3"><span v-if="i==0">作业：</span></label>
                                <a target="_blank" @can("计费模型-作业-录入"):href="'{{url('customer/project')}}/'+thisClickIndex+'/edit?type=operation'" @endcan class="text-decoration-none">@{{ model.name }}</a>
                            </div>
                            <hr class="m-1" v-if="priceModel[thisClickIndex]['ownerPriceExpresses'].length>0">
                            <div class="row" v-for="(model,i) in priceModel[thisClickIndex]['ownerPriceExpresses']">
                                <label class="text-dark font-weight-bold col-3"><span v-if="i==0">快递：</span></label>
                                <a target="_blank" @can("计费模型-快递-录入"):href="'{{url('customer/project')}}/'+thisClickIndex+'/edit?type=express'" @endcan class="text-decoration-none">@{{ model.name }}</a>
                            </div>
                            <hr class="m-1" v-if="priceModel[thisClickIndex]['ownerPriceLogistics'].length>0">
                            <div class="row" v-for="(model,i) in priceModel[thisClickIndex]['ownerPriceLogistics']">
                                <label class="text-dark font-weight-bold col-3"><span v-if="i==0">物流：</span></label>
                                <a target="_blank" @can("计费模型-物流-录入"):href="'{{url('customer/project')}}/'+thisClickIndex+'/edit?type=logistic'" @endcan class="text-decoration-none">@{{ model.name }}</a>
                            </div>
                            <hr class="m-1" v-if="priceModel[thisClickIndex]['ownerPriceDirectLogistics'].length>0">
                            <div class="row" v-for="(model,i) in priceModel[thisClickIndex]['ownerPriceDirectLogistics']">
                                <label class="text-dark font-weight-bold col-3"><span v-if="i==0">直发车：</span></label>
                                <a target="_blank" @can("计费模型-直发-录入"):href="'{{url('customer/project')}}/'+thisClickIndex+'/edit?type=directLogistic'" @endcan class="text-decoration-none">@{{ model.name }}</a>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-1">
            <button type="button" class="btn btn-outline-dark btn-sm form-control-sm dropdown-toggle tooltipTarget" :class="[checkData.length>0?'btn-dark text-light':'']"
                    data-toggle="dropdown" title="导出所有页将会以搜索条件得到的筛选结果，将其全部记录（每一页）导出">
                导出Excel
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" @click="executeExport(false)" href="javascript:">导出勾选内容</a>
                <a class="dropdown-item" @click="executeExport(true)" href="javascript:">导出所有页</a>
            </div>
        </div>
        @if(Session::has('successTip'))
        <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
        @endif
        <div>
            <label for="all" id="cloneCheckAll" class="d-none">
                <input id="all" type="checkbox" @click="checkAll($event)">全选
            </label>
            <table class="d-none" id="headerRoll"></table>
            <table class="table table-sm text-nowrap table-striped table-hover" id="headerParent">
                <tr id="header"></tr>
                <tr v-for="(owner,i) in owners" :class="owner.id==id ? 'focusing' : ''"  @click="(selectTableRow(owner.id,$event)) && (id=owner.id)">
                    <td>
                        <label><input type="checkbox" :value="owner.id" v-model="checkData"></label>
                    </td>
                    <td>@{{ i+1 }}</td>
                    <td>@{{ owner.name }}</td>
                    <td>@{{ owner.customer_name }}</td>
                    <td>@{{ owner.user_owner_group_name }}</td>
                    <td>@{{ owner.user_work_group_name }}</td>
                    <td><b>@{{owner.relevance ? owner.relevance.length : 0}}</b>/5</td>
                    <td>@{{ owner.created_at }}</td>
                    <td>@{{ owner.customer_company_name }}</td>
                    <td>@{{ ownerSubjection[owner.subjection] }}</td>
                    <td>@{{ owner.is_activation }}</td>
                    <td>
                        <button class="btn btn-sm btn-info text-white" @click="showModal(owner)">各项计价</button>
                    </td>
                    <td>
                        <a :href="'{{url('customer/project')}}/'+owner.id+'/edit'"><button class="btn btn-sm btn0sm btn-outline-info">编辑</button></a>
                        @can('客户管理-项目-停用')
                            <button class="btn btn-sm btn-outline-danger" @click="destroy(owner)">停用</button>
                        @endcan
                    </td>
                </tr>
            </table>
            {{$owners->appends($params)->links()}}
        </div>
    </div>
@endsection

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/export.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script>
        let vue = new Vue({
            el:"#container",
            data:{
                owners : [
                    @foreach($owners as $owner)
                    {   id : "{{$owner->id}}",
                        relevance:@json($owner->relevance),
                        customer_name:"{{$owner->customer ? $owner->customer->name : ''}}",
                        name : "{{$owner->name}}",
                        created_at : "{{$owner->created_at}}",
                        subjection : "{{$owner->subjection}}",
                        /*contracts : [
                            {{--@foreach($owner->contracts as $contract)
                            { number:"{{$contract->contract_number}}",salesman:"{{$contract->salesman}}" },
                            @endforeach--}}
                        ],*/
                        customer_company_name:"{{$owner->customer ? $owner->customer->company_name : ''}}",
                        user_owner_group_name:"{{$owner->userOwnerGroup ? $owner->userOwnerGroup->name : ''}}",
                        user_work_group_name:"{{$owner->userWorkGroup ? $owner->userWorkGroup->name : ''}}",
                        is_activation : "{{$owner->deleted_at ? '否' : '是'}}",
                        ownerStoragePriceModels : {!! $owner->ownerStoragePriceModels !!},
                    },
                    @endforeach
                ],
                checkData : [],
                sum : Number("{{ $owners->total() }}"),
                priceModel : {},
                thisClickIndex : "",
                models:[
                    @foreach($models as $model)
                    {name:"{{$model->id}}",value:"{{$model->name}}"},
                    @endforeach
                ],
                customers:[
                    @foreach($customers as $customer)
                    {name:"{{$customer->id}}",value:"{{$customer->name}}"},
                    @endforeach
                ],
                ownerGroups:[
                        @foreach($ownerGroups as $ownerGroup)
                    {name:"{{$ownerGroup->id}}",value:"{{$ownerGroup->name}}"},
                    @endforeach
                ],
                ownerSubjection:{!! json_encode(\App\Owner::subjection,JSON_UNESCAPED_UNICODE) !!},
                selectTr:'',
                id:"",
            },
            mounted(){
                $('#container').removeClass('d-none');
                let data=[
                    [
                        {name:'user_owner_group_id',type:'select',tip:'项目小组',placeholder: '项目小组',data:this.ownerGroups},
                        {name:'created_at_start',type:'time',tip:['选择显示创建日期的起始时间','']},
                        {name:'id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的项目'],
                            placeholder:['项目','定位或多选项目'],data:this.models},
                        {name:'contract_number',type:'input',tip: '合同号：可在左侧增加百分号(%)进行模糊搜索',placeholder: '合同号'},
                    ],[
                        {name:'customer_id',type:'select_multiple_select',tip:['客户','定位或多选项目'],placeholder: ['客户','定位或多选项目'],data:this.customers},
                        {name:'created_at_end',type:'time',tip:['选择显示创建日期的结束时间','']},
                        {name:'using_type',type:'select',placeholder: '用仓类型',data:[{name:"常温",value:"常温"},{name:"恒温",value:"恒温"}]},
                    ],
                ];
                this.form = new query({
                    el:"#form_div",
                    condition:data,
                });
                this.form.init();
                let column = [
                    {name:'cloneCheckAll',customization:true,type:'checkAll',column:'id',
                        dom:$('#cloneCheckAll').removeClass('d-none'), neglect: true},
                    {name:'index',value: '序号', neglect: true},
                    {name:'name',value: '项目'},
                    {name:'customer',value: '客户'},
                    {name:'user_owner_group_name',value: '项目小组'},
                    {name:'user_work_group_name',value: '仓库小组'},
                    {name:'relevance', neglect: true,value: '计费模型填写情况'},
                    {name:'created_at',value: '创建日期'},
                    {name:'customer_full_name',value: '公司全称'},
                    {name:'subjection',value: '主体公司'},
                    {name:'is_activating',value: '是否激活', neglect: true},
                    {name:'relating_price',value: '关联报价', neglect: true},
                    {name:'operating',value: '操作', neglect: true},
                ];
                let _this=this;
                setTimeout(function () {
                    let header = new Header({
                        el: "#header",
                        column: column,
                        data: _this.owners,
                        restorationColumn: 'id',
                        fixedTop:($('#form_div').height())+2,
                        offset:0.5,
                        vue:vue
                    });
                    header.init();
                },0);
            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.owners.length){
                            document.querySelector('#all').checked = true;
                            document.querySelector('#all_temp').checked = true;
                        }else {
                            document.querySelector('#all').checked = false;
                            document.querySelector('#all_temp').checked = false;
                        }
                    },
                    deep:true
                }
            },
            methods:{
                selectTableRow(id,e){
                    $('#headerParent tr[class=focusing]').removeClass('focusing')
                    if (id === this.selectTr) {
                        this.selectTr = '';
                        return;
                    }
                    this.selectTr = id;
                    $(e.target).parent('tr').addClass('focusing')
                },
                executeExport(isAll){
                    let url = '{{url('customer/project/index/export')}}';
                    let token='{{ csrf_token() }}';
                    //excelExport 定义在 js/queryForm/export.js
                    excelExport(isAll,this.checkData,url,this.sum,token);
                },
                //全选事件
                checkAll(e){
                    if (e.target.checked){
                        this.checkData = [];
                        this.owners.forEach((el)=>{
                            this.checkData.push(el.id);
                        });
                    }else {
                        this.checkData = [];
                    }
                },
                showModal(owner){
                    if (this.priceModel[owner.id]){
                        this.thisClickIndex = owner.id;
                        $("#modal").modal('show');
                        return;
                    }
                    window.axios.post('{{url('customer/project/getOwnerPriceModel')}}',{id:owner.id})
                        .then(res=>{
                            if (res.data.success){
                                let model = res.data.data;
                                model["ownerStoragePriceModels"] = owner.ownerStoragePriceModels;
                                delete owner.ownerStoragePriceModels;
                                this.priceModel[owner.id] = model;
                                this.thisClickIndex = owner.id;
                                $("#modal").modal('show');
                                return;
                            }
                            window.tempTip.setDuration(3000);
                            window.tempTip.showSuccess(res.data.data);
                        }).catch(err=>{
                        window.tempTip.setDuration(3000);
                        window.tempTip.show("网络错误："+err);
                    });
                },
                destroy:function(owner){
                    confirm('确定要停用项目“' + owner.name + '”吗？');
                    let data=this;
                    let url = "{{url('maintenance/owner')}}/"+owner.id;
                    axios.delete(url,{id:owner.id})
                        .then(function (response) {
                            if(response.data.success){
                                for (let i = 0; i < data.owners.length; i++) {
                                    if (data.owners[i].id===owner.id){
                                        data.owners.splice(i,1);
                                        break;
                                    }
                                }
                                tempTip.setDuration(1000);
                                tempTip.showSuccess('停用项目"'+owner.name+'"成功!')
                            }else{
                                tempTip.setDuration(1000);
                                tempTip.show('停用项目"'+owner.name+'"失败!')
                            }
                        })
                        .catch(function (err) {
                            tempTip.setDuration(3000);
                            tempTip.show('停用项目失败!'+'网络错误：' + err);
                        });
                },
            },


        });
    </script>
@endsection