supply-front/src/views/logisticsBill/components/reconciliationDetail.vue

<template>
  <div class="warp">
    <template-page
      ref="pageRefItem"
      :get-list="getList"
      :export-list="exportList"
      :options-evens-group="optionsEvensGroup"
      :column-parsing="columnParsing"
      :table-attributes="tableAttributes"
      :table-events="tableEvents"
      :replace-or-not-map="false"
    >
      <ExceptionBox :visible="visible" :detail="detail" :record-selected="recordSelected" @close="handleClose" />
    </template-page>
  </div>
</template>

<script>
import ExceptionBox from './ExceptionBox.vue'
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import add_callback_mixin from '@/components/template/add_callback_mixin.js'
import { getListCostBillV2 } from '@/api/logisticsBill'
import { dataTool } from 'echarts'
export default {
  components: { TemplatePage, ExceptionBox },
  mixins: [import_mixin, add_callback_mixin],
  props: {
    orderCode: {
      type: String,
      default: null
    },
    detail: {
      type: Object,
      default: () => {
        return {}
      }
    },
    param: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      visible: false,
      // 事件组合
      optionsEvensGroup: [
        [
          [
            {
              name: '账单异常',
              click: async() => {
                if (this.recordSelected.length === 0) {
                  this.$message.error('请选择需要处理的数据')
                  return
                }
                this.visible = true
              }
            }
          ]
        ]
      ],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true
      }, // 关闭新增弹窗

      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      recordSelected: [],
      listData:[]
    }
  },
  methods: {
    // 列表请求函数
    getList(...p) {
      this.recordSelected = []
      p[0].params = [
        ...p[0].params,
        {
          param: this.param,
          compare: '=',
          value: this.orderCode
        }
      ]
      this.getListCostBillV2(...p)
      return getListCostBillV2(...p)
    },
    // 列表导出函数
    exportList: () => {},
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      if (data && data.length) {
        const newList = []
         this.listData.forEach(l=>{
             data.forEach(k => {
                  if (l.id===k.id) {
                    newList.push(l)
                  }
            });
        })  
        this.recordSelected = newList
      }else{
        this.recordSelected = []
      }
   console.log(  this.recordSelected)
    },
    operation() {
      return (h, { row, index, column }) => {
        return <div class='operation-btns'></div>
      }
    },
    handleClose() {
      this.visible = false
      this.$refs.pageRefItem.refreshList()
    },
    getListCostBillV2(p){
      getListCostBillV2(p).then(res=>{
        this.listData = res.data.records
      })
     }

  }
}
</script>

<style lang="scss" scoped>
.warp{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 50px;}
</style>