<template>
|
<GlobalWindow
|
:title="title"
|
width="100%"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<div style="display: block;margin-bottom: 30px;">
|
<div style="display: block;font-size: 16px;font-weight: 600;margin-bottom: 20px;">主线路信息</div>
|
<div style="display: flex;">
|
<div style="flex: 1">送货日期：{{model.dateInfo ||''}}</div>
|
<div style="flex: 1">主线路：{{model.categoryName ||''}}</div>
|
<div style="flex: 1">客户数：{{model.orderNum ||'-'}}</div>
|
<div style="flex: 1">送货量(条)：{{model.totalNum ||'-'}}</div>
|
</div>
|
<div style="display: flex;margin-top: 30px">
|
<div style="flex: 1">优化时间：{{model.planLineDate ||''}} - {{model.planLineEndDate ||''}}</div>
|
</div>
|
<div style="display: flex;margin-top: 20px" class="orange">
|
<div style="flex: 1">优化结果：优化前总路程 <span class="red" style="font-weight: bold"> {{((model.originDistance ||0)/1000).toFixed(2)}}</span> 公里，优化后总路程<span class="green" style="font-weight: bold"> {{((model.distance ||0)/1000).toFixed(2)}} </span> 公里</div>
|
</div>
|
</div>
|
<div style="display: block">
|
<div style="display: block;font-size: 16px;font-weight: 600;margin-bottom: 10px;">线路明细</div>
|
<div>
|
<el-table :data="dataList" stripe :row-class-name="tableRowClassName">
|
<el-table-column prop="dateInfo" label="送货日期" min-width="130px"></el-table-column>
|
<el-table-column prop="lineName" label="送货线路" min-width="130px"> </el-table-column>
|
<el-table-column prop="orderNum" label="客户数(户)" min-width="130px"> </el-table-column>
|
<el-table-column prop="totalNum" label="送货量/最大量(条)" min-width="130px">
|
<template slot-scope="{row}">
|
{{row.totalNum ||0}} / {{row.maxOrder || 0}}
|
</template>
|
</el-table-column>
|
<el-table-column prop="carCode" label="车牌号" min-width="100px"></el-table-column>
|
<el-table-column prop="memberName" label="送货司机" min-width="100px"></el-table-column>
|
<el-table-column prop="distance" label="总路程(公里)" min-width="100px">
|
<template slot-scope="{row}">
|
{{((row.distance ||0)/1000).toFixed(2)}}(调整前)
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="操作"
|
min-width="120"
|
align="left"
|
fixed="right"
|
>
|
<template slot-scope="{row}" v-if="dataList.length>1">
|
<el-button type="text" @click="updateDo(row)" icon="el-icon-edit" style="color: #0d68ff" v-if="!updating" >微调</el-button>
|
<template v-else-if="updating && currentRow.id ===row.id" >
|
<el-button type="text" style="color: #13ce66" >本车</el-button>
|
<el-button type="text" @click="cancelDo(row)" icon="el-icon-circle-close" style="color: red" >取消</el-button>
|
</template>
|
<el-button type="text" @click="addDo(row)" icon="el-icon-plus" style="color: red" v-else-if="updating && currentRow.id !==row.id" >加入</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
|
<div style="display: block;margin-top: 30px;border: 1px solid #f2f2f2;padding: 10px" v-if="updating">
|
<div style="display: block;font-size: 16px;font-weight: 600;margin-bottom: 10px;">{{currentRow.lineName}} - 客户明细</div>
|
<div>
|
<p class="tip-warn"><i class="el-icon-warning"></i>操作说明：<br>
|
1.请选择若干客户信息，点击上述其他线路后的<span class="red">【加入】</span>按钮，将选中的客户移加到对应线路中;<br>
|
2.点击本车线路后的<span class="red">【取消】</span>按钮，可撤销本车微调操作;<br>
|
3.经过调整后的线路路程数请等待提交后查看;<br>
|
</p>
|
<el-table :data="paginatedData" stripe @selection-change="handleSelectionChange">>
|
<el-table-column type="selection" width="55"></el-table-column>
|
<el-table-column prop="code" label="客户简码" min-width="130px"></el-table-column>
|
<el-table-column prop="name" label="客户名称" min-width="130px"> </el-table-column>
|
<el-table-column prop="totalNum" label="送货量(条)" min-width="130px"></el-table-column>
|
<el-table-column prop="location" label="客户地址" min-width="200px" show-tooltip-when-overflow></el-table-column>
|
<el-table-column prop="latitude" label="经纬度" min-width="200px">
|
<template slot-scope="{row}">
|
{{(row.longitude || 0).toFixed(6)}},{{(row.latitude || 0).toFixed(6)}}
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="table-pagination">
|
<el-pagination
|
@current-change="handleCurrentChange"
|
:current-page="currentPage"
|
:page-size="pageSize"
|
layout="total, prev, pager, next, jumper"
|
:total="totalItems">
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
<template v-slot:footer>
|
<el-button @click="confirmDo" type="primary" v-if="buttonName!==''">{{ buttonName||'确认' }}</el-button>
|
<el-button @click="resetData" type="danger" v-if="buttonName!==''">撤销所有调整</el-button>
|
<el-button @click="visible=false">返回</el-button>
|
</template>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { allList as customerList } from '@/api/business/jkSketchCustomer'
|
import { updateSketchLine } from '@/api/business/jkSketch'
|
export default {
|
name: 'OperaJkSketchLineWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data () {
|
return {
|
// 表单数据
|
updating: false,
|
edited: false,
|
currentRow: null,
|
model: {
|
},
|
buttonName: '',
|
dataList: [],
|
originDataList: [],
|
currentPage: 1,
|
pageSize: 10,
|
totalItems: 0, // 总数据条目数
|
allCustomerList: [],
|
tableData: [], // 所有数据
|
selectRows: []
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/jkSketchLine',
|
'field.id': 'id'
|
})
|
},
|
computed: {
|
paginatedData () {
|
const start = (this.currentPage - 1) * this.pageSize
|
const end = start + this.pageSize
|
return this.tableData.slice(start, end)
|
}
|
},
|
methods: {
|
resetData () {
|
this.buttonName = ''
|
this.cancelDo()
|
this.loadList()
|
},
|
confirmDo () {
|
this.isWorking = true
|
updateSketchLine({
|
id: this.model.id,
|
sketchLineList: this.dataList
|
})
|
.then(() => {
|
this.visible = false
|
this.$tip.apiSuccess('线路调整已完成！')
|
this.$emit('success')
|
})
|
.catch(e => {
|
// this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking = false
|
})
|
},
|
open (title, target) {
|
this.title = title + target.categoryName
|
this.visible = true
|
this.model = target
|
this.updating = false
|
this.selectRows = []
|
this.tableData = []
|
this.allCustomerList = []
|
this.currentRow = null
|
this.loadList()
|
},
|
updateDo (row) {
|
this.currentRow = row
|
this.tableData = row.customerList || []
|
this.totalItems = this.tableData.length
|
this.currentPage = 1
|
this.selectRows = []
|
this.updating = true
|
},
|
cancelDo () {
|
this.selectRows = []
|
this.currentRow = null
|
this.updating = false
|
},
|
addDo (row) {
|
if (!this.selectRows || !this.selectRows.length) {
|
this.$message.error('对不起，请至少选择有一条客户记录加入该路线！')
|
return
|
}
|
const tarray = []
|
let tNum = 0
|
this.currentRow.customerList.forEach(item => {
|
let flag = false
|
this.selectRows.forEach(item1 => {
|
if (item.id === item1.id) {
|
flag = true
|
}
|
})
|
if (!flag) {
|
tNum += (item.totalNum || 0)
|
tarray.push(item)
|
}
|
})
|
if (tarray.length === 0) {
|
this.$message.error('对不起，本车线路至少留存一个客户信息，无法全部清空！')
|
return
|
}
|
var rArray = [...row.customerList || []]
|
rArray.push(...this.selectRows)
|
let ttNum = 0
|
rArray.forEach(item => {
|
ttNum += (item.totalNum || 0)
|
})
|
if (tarray.length >= (row.maxCustomer || 0)) {
|
this.$message.error('对不起，加入的线路最大支持' + (row.maxCustomer || 0) + '客户！')
|
return
|
}
|
if (ttNum >= (row.maxOrder || 0)) {
|
this.$message.error('对不起，加入的线路最大支持' + (row.maxOrder || 0) + '送货量，当前方案：' + ttNum)
|
return
|
}
|
this.currentRow.customerList = tarray
|
this.currentRow.orderNum = this.currentRow.customerList.length
|
this.currentRow.totalNum = tNum
|
row.customerList = rArray
|
row.orderNum = row.customerList.length
|
row.totalNum = ttNum
|
this.currentRow = null
|
this.updating = false
|
this.buttonName = '保存调整开始优化'
|
|
console.log(this.dataList)
|
console.log(this.originDataList)
|
},
|
handleSelectionChange (rows) {
|
this.selectRows = rows
|
},
|
loadCustomerList () {
|
customerList({ sketchId: this.model.id })
|
.then(res => {
|
this.allCustomerList = res
|
if (this.allCustomerList && this.allCustomerList.length) {
|
this.dataList.forEach(item => {
|
var tarray = []
|
this.allCustomerList.forEach(item1 => {
|
if (item.id === item1.sketchLineId) {
|
tarray.push(item1)
|
}
|
})
|
item.customerList = tarray
|
})
|
}
|
})
|
},
|
loadList () {
|
this.api.allList({
|
sketchId: this.model.id,
|
type: 1
|
}).then(res => {
|
this.dataList = [...(res || [])]
|
this.originDataList = JSON.parse(JSON.stringify(res||[]));
|
this.loadCustomerList()
|
})
|
},
|
tableRowClassName ({ row, rowIndex }) {
|
if (this.currentRow && row.id === this.currentRow.id) {
|
return 'warning-row'
|
} else {
|
return 'success-row'
|
}
|
},
|
handleCurrentChange (newPage) {
|
this.currentPage = newPage
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.el-table .warning-row {
|
background: rgba(161, 231, 20, 0.2) !important;
|
td{
|
background: rgba(161, 231, 20, 0.2) !important;
|
}
|
}
|
.el-table .success-row {
|
background: #f0f9eb !important;
|
td{
|
background: #f0f9eb !important;
|
}
|
}
|
</style>
|
