baoshi-was/resources/views/kpi/workCoefficient/create.blade.php

@extends('layouts.app')
@section('title')KPI-日报表@endsection
@section('content')
    <div class="d-none" id="list">
        <div class="mt-5 ml-5">
            <div class="row mb-5">
                <select
                    v-model="formData.ownerId"
                    class="selectpicker form-control col-2" title="选择货主"
                    data-actions-box="true"
                    data-live-search="true"
                    data-live-search-placeholder="搜索"
                    data-style="btn-primary"
                >
                    <option v-for="(v,k) of owners" :value="v.id" :key="v.id">@{{ v.name }}</option>
                </select>
                <select
                    v-model="formData.workCoefficientTypeId"
                    class="selectpicker form-control col-2 ml-5" title="选择分类"
                    data-actions-box="true"
                    data-live-search="true"
                    data-live-search-placeholder="搜索"
                    data-style="btn-primary"
                >
                    <option v-for="(v,k) of workTypes" :value="v.id" :key="v.id">@{{ v.name }}</option>
                </select>
                <button class="btn btn-success col-1 ml-5" @click="submitForm()">提交</button>
            </div>

            <div class="row">
                <div class="form-group col-4 mt-2" v-for="(v,k) of submitData">
                    <h3 v-if="v.name">@{{ v.name }}</h3>
                    <h3 v-else>@{{ v.workCoefficientTypeDetailName }}</h3>
                    <div class="row mt-2">
                        <label for="v.name+库存组" class="control-label col-4">库存组</label>
                        <input id="v.name+库存组" type="number" class="form-control col-6" v-model="v.inventoryCoef">
                    </div>
                    <div class="row mt-2">
                        <label for="v.name+退货组" class="control-label col-4">退货组</label>
                        <input id="v.name+退货组" type="number" class="form-control col-6" v-model="v.returnCoef">
                    </div>
                    <div class="row mt-2">
                        <label for="v.name+收货组" class="control-label col-4">收货组</label>
                        <input id="v.name+收货组" type="number" class="form-control col-6" v-model="v.receiveCoef">
                    </div>
                    <div class="row mt-2">
                        <label for="v.name+发货组" class="control-label col-4">发货组</label>
                        <input id="v.name+发货组" type="number" class="form-control col-6" v-model="v.deliverCoef">
                    </div>
                    <div class="row mt-2">
                        <label for="v.name+加工组" class="control-label col-4">加工组</label>
                        <input id="v.name+加工组" type="number" class="form-control col-6" v-model="v.processCoef">
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection

@section('lastScript')
    <script>
        let vue = new Vue({
            el: "#list",
            data: {
                cnt: 0,
                owners: [
                        @foreach($owners as $owner)
                    {
                        name: '{{$owner->name}}', id: '{{$owner->id}}'
                    },
                    @endforeach
                ],
                workTypes: [],
                workTypeDetails: [],
                currentWorkTypeDetails: [],
                formData: {
                    ownerId: null,
                    workCoefficientTypeId: null
                },
                submitData: []
            },
            created() {
                this.initData();
            },
            mounted: function () {
            },
            watch: {
                //大类型变更后获取指定类型是否已经有数据
                "formData.workCoefficientTypeId": function (n, o) {
                    if (this.formData.ownerId === null) {
                        tempTip.show("未选择货主！")
                        return;
                    }
                    this.setCurrentWorkTypeDetails(n);
                },
                //货主变更后获取指定类型是否已经有数据
                "formData.ownerId": function (n, o) {
                    this.setCurrentWorkTypeDetails(this.formData.workCoefficientTypeId);
                }
            },
            computed: {},
            methods: {
                //初始化数据 大类型和小类型的初始化，完成后才可以渲染页面
                initData() {
                    let names = ['workCoefficientType', 'workCoefficientTypeDetail'];
                    let requests = names.map(name => axios.get(this.getBaseUrl() + "/api/" + name + "/listAll"));
                    Promise.all(requests).then(resList => {
                        for (let res of resList) {
                            if ((res.config.url + '').endsWith('workCoefficientType/listAll')) {
                                this.workTypes = res.data.data;
                            }
                            if ((res.config.url + '').endsWith('workCoefficientTypeDetail/listAll')) {
                                this.workTypeDetails = res.data.data;
                            }
                        }
                        setTimeout(() => {
                            $(".selectpicker").selectpicker('refresh');
                            $('#list').removeClass('d-none');
                        }, 50);
                    });
                },
                //根据环境获取不同的url
                getBaseUrl() {
                    let url = '';
                    let env = "{{ config('app.env') }}";
                    if (env === 'local') {
                        url = 'http://127.0.0.1:8111'
                    } else if (env === 'production') {
                        url = 'https://stat.baoshi56.com'
                    }
                    return url;
                },
                //提交请求
                submitForm() {
                    if (this.formData.ownerId === null || this.formData.workCoefficientTypeId === null) {
                        tempTip.show("输入参数缺少！")
                        return;
                    }
                    if (!confirm('是否确认当前数据！')) return;
                    let postData = this.submitData;
                    if (postData[0].id !== undefined) {//更新
                        axios.post(this.getBaseUrl() + "/api/ownerWorkCoefficient/updateBatch", postData).then(res => {
                            if (res.data.code === 200) {
                                tempTip.showSuccess("更新成功");
                            }
                        });
                    } else {//新增
                        axios.post(this.getBaseUrl() + "/api/ownerWorkCoefficient/createBatch", postData).then(res => {
                            tempTip.showSuccess("新增成功");
                        });
                    }
                },
                //根据条件获取工作系数
                async getOwnerWorkCoefficients(params) {
                    let url = this.getBaseUrl() + "/api/ownerWorkCoefficient/list"
                    return await axios.get(url, {params});
                },
                //设置当前类型下的工作系数
                setCurrentWorkTypeDetails(o) {
                    this.submitData = [];
                    this.getOwnerWorkCoefficients({
                        ownerId: this.formData.ownerId,
                        workCoefficientTypeId: this.formData.workCoefficientTypeId
                    }).then(res => {
                        if (res.data.data.length > 0) {
                            this.submitData = res.data.data;
                        } else {
                            this.currentWorkTypeDetails = this.workTypeDetails.filter(i => i.workCoefficientTypeId === o)
                            this.currentWorkTypeDetails.forEach(i => {
                                this.submitData.push({
                                    ownerId: this.formData.ownerId,
                                    name: i.name,
                                    workCoefficientTypeId: i.workCoefficientTypeId,
                                    workCoefficientTypeDetailId: i.id,
                                    inventoryCoef: null,
                                    returnCoef: null,
                                    receiveCoef: null,
                                    deliverCoef: null,
                                    processCoef: null,
                                });
                            });
                        }
                    }).catch(err => {
                    })
                }
            },
        });
    </script>
@endsection