FCC/Framework/Edge.WebHost/Views/WebConsole/Config/FuelConfigPartial/FuelChangeRnav.cshtml


<div id="FuelChangeDiv">
    <form action="" method="post" class="config-form">
        <div class="config-form-group">
            <label class="config-form-label">{{$t('ProductName')}}</label>
            <label class="config-form-label">{{$t('NozzleMapping')}}</label>
        </div>
        <div v-for="(row, index) of productmap" class="config-form-group">
            <input class="fuel-form-input" v-model="row.FuelName" />
            <button class="fuel-form-shift" type="button" @@click="leftshift(row)" style="background-image: url(/WebConsole/images/config/leftshift.png);" />
            <div class="fuel-drag-group" @@dragover="dragover" @@touchend="drop($event, index)" @@drop="drop($event, index)">
                <div style="color: transparent; display: inline-block;">p</div>
                <div v-for='item in row.Index' class="fuel-drag-div" v-bind:class="{'fuel-drag-div-active': dragItem == Array.from(row.CurrentNozzles)[item]}" draggable="true"
                     @@touchstart="dragstart($event, Array.from(row.CurrentNozzles)[item], index)" @@dragstart="dragstart($event, Array.from(row.CurrentNozzles)[item], index)">
                    {{ Array.from(row.CurrentNozzles)[item] }}
                </div>
            </div>
            <button class="fuel-form-shift" type="button" @@click="rightshift(row)" style="background-image: url(/WebConsole/images/config/rightshift.png);" />
        </div>
        <div class="config-form-submit-group">
            <label :class="showResult ? (result ? 'config-form-result' : 'config-form-result-fail') : 'color-transparent'">{{ result ? '提交完成' : '提交失败' }}</label>
        </div>
        <div class="config-form-submit-group" v-if="receiveData">
            <label class="config-form-label"></label>
            <button class="config-form-submit" type="button" @@click="submit(event)" id="FuelChange" />
        </div>
    </form>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#FuelChangeDiv',
        i18n,
        data: {
            productmap: { '1': { Barcode: '1', FuelName: '93#', CurrentNozzles: [1, 6, 7, 2, 4, 9] }, '2': { Barcode: '2', FuelName: '98#', CurrentNozzles: [3, 10, 5, 8] } },
            maxbarcode: 0,
            dragItem: 0,
            dragIndex: 0,
            receiveData: false,
            showResult: false,
            result: false
        },
        mounted: function () {
            let url = '/api/fuelproduct'
            InvokeHttpGet(url, function (res) {
                vm.receive(res)
                vm.receiveData = true
            })
        },
        methods: {
            dragstart(ev, item, index) {
                this.dragItem = item
                this.dragIndex = index
            },
            dragover(ev) {
                ev.preventDefault()
            },
            drop(ev, index) {
                if (this.dragIndex !== index) {
                    this.productmap[index].CurrentNozzles.add(this.dragItem)
                    this.productmap[this.dragIndex].CurrentNozzles.delete(this.dragItem)
                    this.dragIndex = index
                    this.show()
                }
            },
            receive(resdata) {
                resdata = JSON.parse(resdata)
                this.productmap = resdata
                for (let key in resdata) {
                    let nozzlelist = resdata[key].CurrentNozzles
                    let va = this.productmap[key]
                    va.CurrentNozzles = new Set(nozzlelist)
                    va.startIndex = 0
                    if (key > this.maxbarcode) {
                        this.maxbarcode = key
                    }
                }
                this.maxbarcode = parseInt(this.maxbarcode)
                this.show()
            },
            show() {
                for (let key in this.productmap) {
                    let va = this.productmap[key]
                    let len = va.CurrentNozzles.size > 5 ? 5 : va.CurrentNozzles.size
                    va.CurrentNozzles = new Set(Array.from(va.CurrentNozzles).sort((a, b) => { return a - b }))

                    let tem = va.startIndex
                    va.Index = []
                    for (let i = 0; i < len; i++) {
                        va.Index[i] = tem++
                    }
                }
                this.$forceUpdate()
            },
            leftshift(row) {
                row.startIndex = row.startIndex > 0 ? row.startIndex - 1 : row.startIndex
                this.show()
            },
            rightshift(row) {
                row.startIndex = (row.CurrentNozzles.size - row.startIndex) > 5 ? row.startIndex + 1 : row.startIndex
                this.show()
            },
            submit(e) {
                if (!confirm("确定要继续吗？")) {
                    return
                }
                let reqdata = JSON.parse(JSON.stringify(this.productmap))
                for (x in reqdata) {
                    let va = reqdata[x]
                    va.CurrentNozzles = Array.from(this.productmap[x].CurrentNozzles)
                    delete va.Index
                    delete va.startIndex
                }

                let url = '/api/fuelproduct'
                InvokeHttpPost(url, reqdata, function (res) {
                    vm.showResult = true
                    vm.result = res.value
                })

                return false
            }
        }
    })
</script>