laisiao/src/DRP/HDrpManagement/promotionManage/modules/batchOperation.vue

<template>
  <a-space>
    <a-button type="primary" @click="onOpen({condition:'',isonsale:0,status:'审核'})">批量上架</a-button>
    <a-button type="default" @click="onOpen({condition:'',isonsale:1})">批量下架</a-button>
  </a-space>
  <a-drawer
    v-model:open="open"
    class="custom-class"
    root-class-name="root-class-name"
    :root-style="{ color: 'blue' }"
    width="800px"
    title="商品信息"
    placement="right"
    @close="onClose"
    :closable="false"
  >
    <normalTable :noQuery="true" ref="list" rowKey="itemid" :param="param" size="small" :columns="utils.TBLayout('batchTable')" :tableid="utils.TBLayoutID('batchTable')" @onSelect="onSelect">
      <template #tb_cell="{data}">
        <span v-if="data.column.dataIndex == 'isonsale'">
          {{data.record.isonsale == 1?'上架':'下架'}}
        </span>
      </template>
    </normalTable>
    <template #extra>
      <a-space>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" @click="changeIsOnSale">确定</a-button>
      </a-space>
    </template>
  </a-drawer>
</template>

<script setup>
import { nextTick, ref,createVNode,defineEmits } from 'vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal } from 'ant-design-vue';
import Api from '@/api/api'
import utils from '@/utils/utils'
import normalTable from '@/template/normalTable/index.vue';
const emit = defineEmits(['onSuccess'])
const open = ref(false)
const param = ref({
  id:2024052710185203,
  content:{
    nocache:true,
    pageNumber:1,
    pageSize:20,
    where:{}
  }
})
const list = ref()
const onOpen = (val)=>{
  open.value = true
  nextTick(()=>{
    param.value.content.where = val
    list.value.listData()
  })
  
}
const onClose = () =>{
  open.value = false
  list.value.reloadSelect()
}
const selection = ref([])
const onSelect = (val)=>{
  selection.value = val
}
const changeIsOnSale = async ()=> {
  Modal.confirm({
    title: `${param.value.content.where.isonsale == 1?'下架':'上架'}商品`,
    icon: createVNode(ExclamationCircleOutlined),
    content: `共选择了${selection.value.length}个商品`,
    okText: '确认',
    cancelText: '取消',
    async onOk() {
      try {
        console.log(param.value.content.where)
        const res = await Api.post({
          id:2024052710133903,
          content:{
            isonsale:param.value.content.where.isonsale == 1?0:1,
            itemids:selection.value.map(e=>e.itemid)
          }
        })
        utils.message(res,`${param.value.content.where.isonsale == 1?'下架':'上架'}成功`,()=>{
          list.value.listData()
          list.value.reloadSelect()
          emit('onSuccess')
        })
      } catch(err) {
        return console.log(err);
      }
    },
    onCancel() {},
  });
  
  
}
</script>
<style>
</style>