art-design/src/views/crmpc/recycle/index.vue

<template>
  <div class="recycle-page">
    <el-card class="recycle-card">
      <div class="recycle-title">
        <span class="title-dot"></span>
        回收站
      </div>
      <ArtTable
        ref="tableRef"
        row-key="id"
        :loading="loading"
        :data="tableData"
        :currentPage="pagination.currentPage"
        :pageSize="pagination.pageSize"
        :total="pagination.total"
        :marginTop="10"
        @selection-change="handleSelectionChange"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <template #default>
          <el-table-column prop="contacts" label="姓名" min-width="120"></el-table-column>
          <el-table-column prop="phone" label="联系方式" min-width="120"></el-table-column>
          <el-table-column fixed="right" label="操作" width="160px">
            <template #default="scope">
              <el-button type="primary" @click="onDetail(scope.row)" size="small"
                >恢复客户
              </el-button>
            </template>
          </el-table-column>
        </template>
      </ArtTable>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { ElMessageBox } from 'element-plus'
  import { CrmService } from '@/api/crmApi'
  const loading = ref(false)
  const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0
  })

  const tableData = ref<any[]>([])
  // 获取列表数据
  const gettableList = async () => {
    loading.value = true
    try {
      const { currentPage, pageSize } = pagination
      const params: any = {
        current: currentPage,
        size: pageSize,
        recycle: 'recycle'
      }
      const { data, current, size, total } = await CrmService.getcustomerList(params)
      tableData.value = data.map((item: any) => ({
        ...item
      }))
      Object.assign(pagination, { currentPage: current, pageSize: size, total })
    } catch (error) {
      console.error('获取用户列表失败:', error)
    } finally {
      loading.value = false
    }
  }
  // 选中的行数据
  const selectedRows = ref<any[]>([])
  // 处理表格行选择变化
  const handleSelectionChange = (selection: any[]) => {
    selectedRows.value = selection
  }
  // 处理表格分页变化
  const handleSizeChange = (newPageSize: number) => {
    pagination.pageSize = newPageSize
    gettableList()
  }

  const handleCurrentChange = (newCurrentPage: number) => {
    pagination.currentPage = newCurrentPage
    gettableList()
  }
  onMounted(() => {
    gettableList()
  })
  const onDetail = async (row: any) => {
    ElMessageBox.confirm('确定要恢复此客户吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(async () => {
        const res = await CrmService.customerrestore({ id: row.id })
        ElMessage.success(res?.message || '提交成功！')
        gettableList()
        // 你可以在这里调用接口或做后续处理
      })
      .catch(() => {
        // 用户点击了取消
      })
  }
</script>

<style scoped>
  .recycle-page {
    background: #fafbfc;
    min-height: 100vh;
    padding: 24px;
  }
  .recycle-card {
    border-radius: 8px;
    background: #fff;
  }
  .recycle-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
  }
  .title-dot {
    display: inline-block;
    width: 6px;
    height: 16px;
    background: #3471FF;
    border-radius: 2px;
    margin-right: 8px;
  }
  .el-table .hide-header th {
    display: none;
  }
  :deep(.el-table__empty-block) {
    height: 400px !important;
  }
</style>