最新版本541200007

doum

2025-10-13 46124fe454f90d24171ebc5be0d9cfe2ab22cbc5

 admin/src/components/business/OperaJkSketchResultWindow.vue

@@ -1,82 +1,262 @@
<template>
  <el-dialog
      class="center-title"
  <GlobalWindow
      :title="title"
      width="500px"
      top="30vh"
      width="100%"
      :visible.sync="visible"
      :confirm-working="isWorking"
      @confirm="confirm"
  >
    <p class="tip-warn"><i class="el-icon-warning"></i>导入说明：<br>
      1.请先下载文件模板，并按照模板要去填写表格内容;<br>
      2.每次导入销售订单表示即删除之前导入此次相应日期的订单记录，以此次导入的数据为主;<br>
    </p>
    <el-form class="demo-form-inline" >
      <el-form-item label="线路信息" required>
        <div style="width: 100%;display: flex;align-items: center;">
          <el-button type="primary"   @click="clickRef">点击上传</el-button>
          <el-button type="text" @click="exportTemplate">点击下载模版.EXCEL</el-button>
    <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"></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}">
              <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-delete"  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>
        </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 style="font-size: 14px; color: black;" v-if="fileName">{{fileName}}</div>
      </el-form-item>
    </el-form>
    <input type="file" style="position: fixed; left: 0; top: -50px;" accept=".xlsx" ref="fileExcel" @change="result" />
      </div>
    </div>
    <template   v-slot:footer>
      <el-button @click="confirmDo" type="primary" v-if="buttonName!==''">{{ buttonName||'确认' }}</el-button>
      <el-button @click="visible=false">返回</el-button>
    </template>
  </el-dialog>
  </GlobalWindow>
</template>

<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import { importExcel } from '@/api/business/jkLine'
import { allList as customerList } from '@/api/business/jkSketchCustomer'
export default {
  name: 'OperaJkSketchLineWindow',
  extends: BaseOpera,
  // eslint-disable-next-line vue/no-unused-components
  components: { GlobalWindow },
  data () {
    return {
      importing:false,
      fileName: ''
      // 表单数据
      updating: false,
      currentRow: null,
      model: {
      },
      buttonName: '',
      dataList: [],
      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: {
    open (title) {
      this.title = title
      this.fileName = ''
    confirmDo () {

    },
    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()
    },
    // 导出模板
    exportTemplate () {
      // 投保申请
      window.open('/template/jkLineTemplate.xlsx')
    updateDo (row) {
      this.currentRow = row
      this.tableData = row.customerList || []
      this.totalItems = this.tableData.length
      this.currentPage = 1
      this.selectRows = []
      this.updating = true
    },
    clickRef () {
      this.$refs.fileExcel.click()
    cancelDo (row) {
      this.selectRows = []
      this.currentRow = null
      this.updating = false
    },
    result (e) {
      const data = new FormData()
      data.append('file', e.target.files[0])
      importExcel(data)
    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 = rArray.push(...this.selectRows)
      let ttNum = 0
      rArray.forEach(item => {
        ttNum += (item.totalNum || 0)
      })
      if(tarray.length >= (row.maxCustomer||0)){
        this.$message.error('对不起，加入的线路最大支持'+ (row.maxOrderNum||0) + '客户！')
        return
      }
      if(ttNum >= (row.maxOrder||0)){
        this.$message.error('对不起，加入的线路最大支持'+ (row.maxOrder||0) + '送货量！')
        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 = '保存调整开始优化'
    },
    handleSelectionChange (rows) {
      this.selectRows = rows
    },
    loadCustomerList () {
      customerList({ sketchId: this.model.id })
        .then(res => {
          this.$message.success('导入成功')
          this.$emit('success')
          this.visible = false
          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
            })
          }
        })
        .catch(err => {
          // this.$message.error(err)
          this.fileName = ''
        })
        .finally(() => {
          this.$refs.fileExcel.value = null
        })
    },
    loadList () {
      this.api.allList({
        sketchId: this.model.id
      }).then(res => {
        this.dataList = 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" scoped>

<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>