fs-admin/src/views/miniprogram/Banner.vue

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

const CRUD: ICRUD = {
  create(data: any) {
    return saveBanner(data)
  },
  update(data: any) {
    return saveBanner(data)
  },
  getList(data: any) {
    return getBannerList(data)
  },
  delete(data: any) {
    return deleteBanner(data)
  }
}

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

<template>
  <pro-table :crud="CRUD" :formConfig="formConfig">
    <vxe-column field="name" title="标题" show-overflow-tooltip></vxe-column>
    <vxe-column field="image" title="图片">
      <template #default="{ row }">
        <el-image :src="row.image" style="width: 100px"></el-image>
      </template>
    </vxe-column>
    <!-- <vxe-column field="src" label="跳转地址"></vxe-column> -->
  </pro-table>
</template>

<style lang="scss" scoped></style>