fs-admin/src/views/list/CardList.vue

<script setup lang="ts">
import type { BasicForm, ICRUD } from '@/types/form'

const CRUD: ICRUD = {
  create(data: any) {
    return new Promise(resolve => console.log(data))
  },
  update(data: any) {
    return new Promise(resolve => console.log(data))
  },
  getList() {
    return new Promise(resolve => {
      resolve({
        list: [
          {
            id: 1,
            image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
            name: '轮播1'
          },
          {
            id: 2,
            image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
            name: '轮播2'
          }
        ],
        total: 2
      })
    })
  },
  delete(data: any) {
    return new Promise(resolve => console.log(data))
  },
  deleteBatch(data: any) {
    return new Promise(resolve => console.log(data))
  }
}

const formConfig = reactive<BasicForm>({
  span: 24,
  formItems: [
    {
      label: '图片',
      value: '',
      name: 'image',
      type: 'imageUpload',
      rules: [{ required: true, message: '请上传图片', trigger: 'blur' }]
    },
    {
      label: '标题',
      value: '',
      name: 'name',
      type: 'input',
      search: true
    }
    // {
    //   label: '跳转地址',
    //   value: '',
    //   name: 'src',
    //   type: 'input'
    // }
  ]
})

const cardList = ref<any>()
const handleEdit = (item: any) => {
  cardList.value.handleUpdate(item)
}
const handleDelete = (item: any) => {
  cardList.value.handleDelete(item.id)
}
</script>

<template>
  <pro-card-list :crud="CRUD" :formConfig="formConfig" ref="cardList">
    <template #default="{ item }">
      <img :src="item.image" class="block w-full h-160px" />
      <el-row class="text-center p-10px card-operate">
        <el-col :span="12">
          <el-button link icon="edit" @click="handleEdit(item)">编辑</el-button>
        </el-col>
        <el-col :span="12">
          <el-button link icon="delete" @click="handleDelete(item)">删除</el-button>
        </el-col>
      </el-row>
    </template>
  </pro-card-list>
</template>

<style lang="scss" scoped>
.card-operate {
  border: 1px solid var(--el-border-color-light);
}
</style>