回收站添加占位

src/views/crmpc/recycle/index.vue

@@ -2,7 +2,8 @@
   <div class="recycle-page">
     <el-card class="recycle-card">
       <div class="recycle-title">
-        <span class="title-dot"></span>回收站
+        <span class="title-dot"></span>
+        回收站
       </div>
       <ArtTable
         ref="tableRef"
@@ -21,9 +22,11 @@
           <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>
+            <template #default="scope">
+              <el-button type="primary" @click="onDetail(scope.row)" size="small"
+                >恢复客户
+              </el-button>
+            </template>
           </el-table-column>
         </template>
       </ArtTable>
@@ -32,103 +35,104 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import { ElMessageBox } from 'element-plus'
-import { CrmService } from '@/api/crmApi'
-const loading = ref(false)
-const pagination = reactive({
-  currentPage: 1,
-  pageSize: 20,
-  total: 0
-})
+  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: 20,
+    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 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 { data, current, size, total } = await CrmService.getcustomerList(params)
-    tableData.value = data.map((item: any, index: number) => ({
-      ...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[]) => {
+  // 选中的行数据
+  const selectedRows = ref<any[]>([])
+  // 处理表格行选择变化
+  const handleSelectionChange = (selection: any[]) => {
     selectedRows.value = selection
-}
+  }
   // 处理表格分页变化
-const handleSizeChange = (newPageSize: number) => {
+  const handleSizeChange = (newPageSize: number) => {
     pagination.pageSize = newPageSize
     gettableList()
-}
+  }
 
-const handleCurrentChange = (newCurrentPage: number) => {
+  const handleCurrentChange = (newCurrentPage: number) => {
     pagination.currentPage = newCurrentPage
     gettableList()
-}
-onMounted(() => {
-  gettableList()
-})
-const onDetail = async (row: any) => {
-  ElMessageBox.confirm(
-    '确定要恢复此客户吗？',
-    '提示',
-    {
+  }
+  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(() => {
-    // 用户点击了取消
-  })
-}
+      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;
-}
+  .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: 300px !important;
+  }
 </style>