laisiao/src/template/selectProduct/index.vue

// 单据中使用商品表
<template>
  <div>
    <a-button type="primary" @click="showModel" :disabled="disabled">添加商品</a-button>
    <a-drawer
        title="商品"
        :closable="false"
        v-model:open="visible"
        width="80%"
        :get-container="!fullscreen"
        @close="onClose"
      >
      <template #extra>
        <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
        <a-button type="primary" @click="onOK">添加</a-button>
      </template>
      <a-input class="search-panel" v-model:value="search" placeholder="搜索内容" @keyup.enter="searchData" allowClear></a-input>
      <a-table
        :loading="loading"
        class="ant-table-striped"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange,onSelect:onSelect,onSelectAll:onSelectAll,fixed:true }"
        :rowKey="props.rowKey?props.rowKey:'itemid'"
        :columns="props.columns ? propsColumns:columns"
        :data-source="data"
        :scroll="{x:'max-content'}"
        :pagination="{showSizeChanger:true,defaultPageSize:20,current:props.param.content.pageNumber,total:total}"
        @change="onChange"
        size="small"
        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">
        <template #headerCell="{ column }">
          <div style="min-width:100px;" v-if="column.filter == 1 || column.filter == 2">
            <a-input v-model:value="column.value" :placeholder="column.title" @pressEnter="listData(column.dataIndex,column.value)"></a-input>
          </div>
          <span v-else style="display:inline-block;padding:0 10px;">{{column.title}}</span>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'price'">
            {{utils.formatAmount(record.price?record.price:record.marketprice)}}
          </template>
          <template v-if="column.fn" >
            <div style="pointer-events: none;">{{column.fn(column.fn?record:'')}}</div>
          </template>
          <slot name="tb_cell" :data="{column, record}"></slot>
        </template>
      </a-table>
    </a-drawer>
  </div>
</template>

<script setup>
  import {defineEmits,ref,defineProps,onMounted,toRefs,defineExpose } from 'vue';
  import utils from '@/utils/utils'
  import Api  from '@/api/api'
  import { useRouter } from "vue-router";
  import { useBaseStore } from '@/stores/modules/base'
  import { storeToRefs } from 'pinia'
  const base = useBaseStore()
  let { tableRecord,fullscreen } = storeToRefs(base)
  const router = useRouter()
  const props = defineProps({
    columns:Array,
    param: Object,
    disabled:Boolean,
    loading:Boolean,
    tableid:Number,
    rowKey:String
  })
  const propsColumns = ref(props.columns)
  const visible = ref(false)
  const search = ref('')
  const data = ref([])
  const selectedRowKeys = ref([])
  const selectRows = ref([])
  const total = ref(0)
  const emit = defineEmits(['onSelectChange'])
  const columns = [
    {
      title:'行号',
      dataIndex:'rowindex',
      width:90,
    },
    {
      title:'商品名称',
      dataIndex:'itemname',
      width:180,
    },
    {
      title:'商品编号',
      dataIndex:'itemno',
      width:180,
    },
    {
      title:'单价',
      dataIndex:'price',
      width:180,
    },
    {
      title:'商品标签',
      dataIndex:'delistingstatus',
      width:180,
    },
    {
      title:'包装数量',
      dataIndex:'packageqty',
      width:180,
    },
    {
      title:'数量',
      dataIndex:'qty',
      width:90,
    },
  ]
  const onClose = ()=>{
    visible.value = false
    props.param.content.pageNumber = 1
    props.param.content.where.condition = ''
    search.value = ''
    reloadSelect()
  }
  const showModel = ()=>{
    visible.value = true
    reloadSelect()
    listData()
  }
  const onSelectChange = (changableRowKeys, selectedRows)=>{
    selectedRowKeys.value = changableRowKeys
  }
  const onSelectAll = (selected, selectedRows, changeRows)=>{
    tableRecord.value = selectedRows
  }
  const onOK = (changableRowKeys, selectedRows)=>{
    emit('onSelectChange',tableRecord.value)
    // visible.value = false
    reloadSelect()
  }
  const onChange = (pagination, filters, sorter, { currentDataSource })=>{
    selectedRowKeys.value = tableRecord.value.map(e=>e.itemid)
    props.param.content.pageNumber = pagination.current
    props.param.content.pageSize = pagination.pageSize
    listData()
  }
  const listData = async (dataIndex,value)=> {
    props.param.content.where.tablefilter = {}
    propsColumns.value.forEach((e)=>{
      e.value?props.param.content.where.tablefilter[e.dataIndex] = e.value:''
    })
    props.param.content.tableid = props.tableid
    const res = await Api.requested(props.param)
    res.data.forEach(element => {
      element.qty = element.qty ? element.qty:element.orderminqty
    });
    data.value = res.data
    total.value = res.total
  }
  const onSelect = async (record, selected, selectedRows, nativeEvent)=>{
    if (!selected) {
      tableRecord.value = tableRecord.value.filter(e=>e.itemid !== record.itemid)
    } else {
      tableRecord.value.push(record)
    }
  }
  const searchData = ()=>{
    props.param.content.where.condition = search.value
    props.param.content.pageNumber = 1
    listData()
  }

  const reloadSelect = () =>{
    selectedRowKeys.value = []
    tableRecord.value = []
  }
  defineExpose({
    visible,
    listData
  })
  onMounted(()=>{
    // listData()
  })
</script>
<style scoped>
.search-panel{
  width: 300px;
  margin-bottom:10px;
}
.ant-table-striped :deep td{
  font-size: 12px;
}
</style>