huatao-spc-ui/src/views/detection/unqualified/index.vue

<template>
   <!-- 搜索工作栏 -->
  <ContentWrap>
    <Search :schema="Unqualified.allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
  </ContentWrap>

  <!-- 列表头部 -->
  <TableHead
    :HeadButttondata="HeadButttondata"
    @button-base-click="buttonBaseClick"
    :routeName="routeName"
    @updataTableColumns="updataTableColumns"
    @searchFormClick="searchFormClick"
    :allSchemas="Unqualified.allSchemas"
  />

  <!-- 列表 -->
  <ContentWrap>
    <Table
      ref="tableid"
      :columns="tableColumns"
      :data="tableObject.tableList"
      :selection="true"
      :loading="tableObject.loading"
      :pagination="{
        total: tableObject.total
      }"
      v-model:pageSize="tableObject.pageSize"
      v-model:currentPage="tableObject.currentPage"
      v-model:sort="tableObject.sort"
    >
      <!-- <template #templateId="{row}">
        <el-button type="primary" link @click="openDetail(row, '检测记录明细', row.code)">
          <span>{{ row.templateId }}</span>
        </el-button>
      </template> -->
      <template #action="{ row }">
        <ButtonBase :Butttondata="butttondata" @button-base-click="buttonTableClick($event,row)" />
      </template>
    </Table>
  </ContentWrap>


</template>

<script setup lang="ts">
import {Unqualified } from './unqualified.data'
import * as UnqualifiedApi from '@/api/detection/unqualified'
import * as defaultButtons from '@/utils/disposition/defaultButtons'
import { any } from 'vue-types'
import dayjs from 'dayjs'

defineOptions({ name: 'DetectionRecords' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const route = useRoute() // 路由信息
const routeName = ref()
routeName.value = route.name
const tableColumns = ref(Unqualified.allSchemas.tableColumns)

// 字段设置 更新主列表字段
const updataTableColumns = (val) => {
  tableColumns.value = val
}

const { tableObject, tableMethods } = useTable({
  getListApi: UnqualifiedApi.getRecordsDetailsPage // 分页接口
})

// 获得表格的各种操作
const { getList, setSearchParams } = tableMethods

// 列表头部按钮
const HeadButttondata = [
  defaultButtons.defaultBatchDeletionBtn(null), // 批量删除
  defaultButtons.defaultFreshBtn(null), // 刷新
  // defaultButtons.defaultFilterBtn(null), // 筛选
  defaultButtons.defaultSetBtn(null), // 设置
  // {
  //   label: '自定义扩展按钮',
  //   name: 'zdy',
  //   hide: false,
  //   type: 'primary',
  //   icon: 'Select',
  //   color: ''
  // },
]
const tableid=ref();
// 头部按钮事件
const buttonBaseClick = (val, item) => {
   if (val == 'refresh') { // 刷新
    getList()
  } else if (val == 'filtrate') { // 筛选
  } else if(val == 'batch'){//批量删除
      let params = [];
      let ids = tableid.value.selections;
      if(ids.length > 0){
        for(let i = 0; i　< ids.length; i++){
          params[i] = ids[i].id;
        }
        console.info(params);
        handleBatchDelete(params);
      }
      

  }else { // 其他按钮
    console.log('其他按钮', item)
  }
}

// 列表-操作按钮
const butttondata = [
  //defaultButtons.mainListEditBtn(null), // 编辑
  defaultButtons.mainListDeleteBtn(null), // 删除
]

// 列表-操作按钮事件
const buttonTableClick = async (val, row) => {
  if (val == 'edit') { // 编辑
  } else if (val == 'delete') { // 删除
    handleDelete(row.id)
  }
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await UnqualifiedApi.deleteRecordsDetails(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}
/*批量删除操作*/
const handleBatchDelete = async (ids:any) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await UnqualifiedApi.batchDeleteRecordDetails(ids)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}



// 筛选提交
const searchFormClick = (searchData) => {
  tableObject.params = {
    isSearch: true,
    filters: searchData.filters
  }
  getList() // 刷新当前列表
}

/** 初始化 **/
onMounted(async () => {
  getList();
})

</script>