优化

MrShi

6 天以前 3a154bdb0a5aaa2c0ac3eac95a6ba747068bd454

 admin/src/components/business/OperaJkSketchResultWindow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,296 @@
<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>