vue-element-plus-admin 2.0

最新推荐文章于 2024-07-22 08:55:10 发布

綒华

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量455

点赞数 8

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_66921738/article/details/134826525

版权

const schema = reactive<FormSchema[]>([
  {
    field: 'idCard',
    label: '证件号:',
    component: 'Input',
    colProps: {
      span: 6
    }
  },
  {
    field: 'name',
    label: '用户名:',
    component: 'Input',
    colProps: {
      span: 6
    }
  },
  {
    field: 'executeNo',
    label: '执法编号:',
    component: 'Input',
    colProps: {
      span: 6
    }
  },
  {
    field: 'auditTypeId',
    label: '分类:',
    component: 'Select',
    colProps: {
      span: 6
    },
    componentProps: {
      options: Fl,//注意不带.value
      on: {
        change: (value: string) => {
          console.log(value)
        }
      }
    }
  },
  {
    field: 'beginDate',
    component: 'DatePicker',
    label: '选择时间:',
    componentProps: {
      type: 'daterange',
      format: 'YYYY-MM-DD HH:mm:ss',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      startPlaceholder: '开始时间',
      endPlaceholder: '结束时间'
    }
  }
])
// 搜索
const handleSearch = (data) => {
  currentPage.value = 1
  searchFormParams = reactive({
    idCard: data.idCard || '',
    name: data.name || '',
    executeNo: data.executeNo || '',
    auditTypeId: data.auditTypeId || '',
    beginDate: data.beginDate ? data.beginDate[0] : '',
    endDate: data.beginDate ? data.beginDate[1] : '',
    page: currentPage.value,
    pageSize: pageSize.value
  })
  getResultData()
}
let searchFormParams = reactive({
  idCard: '',
  name: '',
  executeNo: '',
  auditTypeId: '',
  beginDate: '',
  endDate: '',
  page: currentPage.value,
  pageSize: pageSize.value
})
const getResultData = () => {
  apply.getList(searchFormParams).then((res: any) => {
    total.value = res.dataCount
    resultData.value = res.data
  })
  // resultData.value = infoData.slice((page - 1) * pageSize.value, page * pageSize.value)
}
//搜索条件所需枚举
const Fl = ref([])
const getFl = () => {
  apply.getAuditApi().then((res: any) => {
    Fl.value = res.map((item: any) => {
      return {
        label: item.name,
        value: item.id
      }
    })
  })
}
//分页
const currentPage = ref(1)
const pageSize = ref(8)
const small = ref(false)
const background = ref(false)
const dialogVisible = ref(false)
const total = ref(0)
const resultData: any = ref([])
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  searchFormParams.page = val
  getResultData()
}
<!--  -->
<template>
  <ContentWrap title="申请列表">
    <Search
      :schema="schema"
      is-col
      @register="searchRegister"
      @search="handleSearch"
      @reset="handleSearch"
    />
</template>