homeIndex.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <template>
  2. <el-row>
  3. <el-col :span="24" class="main animate__animated animate__backInRight">
  4. <el-col :span="24" class="one">
  5. <cTable :fields="fields" :opera="opera" :list="list" :total="total" @query="search" @toSelect="toSelect" @edit="toEdit" @del="toDel">
  6. <template #status="{ row, item }">{{ row[item.model] }}</template>
  7. </cTable>
  8. </el-col>
  9. </el-col>
  10. </el-row>
  11. </template>
  12. <script setup lang="ts">
  13. // 组件
  14. import cTable from './c-table.vue'
  15. // 基础
  16. import type { Ref } from 'vue'
  17. // reactive, ref, onMounted
  18. import { onMounted, ref, getCurrentInstance } from 'vue'
  19. // 接口
  20. import { YearreportStore } from '@common/src/stores/studio/studios/yearreport'
  21. import type { IQueryResult } from '@/util/types.util'
  22. const testAxios = YearreportStore()
  23. const { proxy } = getCurrentInstance() as any
  24. // 分页数据
  25. const skip = 0
  26. let limit: number = proxy.$limit
  27. const list: Ref<any[]> = ref([])
  28. const total: Ref<number> = ref(0)
  29. const fields: Ref<any[]> = ref([
  30. { label: '序号', options: { type: 'index', width: '80' } },
  31. { label: '依托单位名称', model: 'company', isSearch: true },
  32. { label: '姓名', model: 'name', isSearch: true },
  33. { label: '状态', model: 'status', isSearch: true }
  34. ])
  35. const opera: Ref<any[]> = ref([
  36. { label: '修改', method: 'edit' },
  37. { label: '删除', method: 'del', confirm: true, type: 'danger', display: (i) => i.status == '1' }
  38. ])
  39. // 请求
  40. onMounted(async () => {
  41. await search({ skip, limit })
  42. })
  43. const search = async (e: { skip: number; limit: number }) => {
  44. const info = { skip: e.skip, limit: e.limit }
  45. const res: IQueryResult = await testAxios.query(info)
  46. if (res.errcode == '0') {
  47. list.value = res.data as any[]
  48. total.value = res.total
  49. }
  50. }
  51. // 多选
  52. const toSelect = (val: Array<[]>) => {
  53. console.log('多选')
  54. console.log(val)
  55. }
  56. const toEdit = (data) => {
  57. console.log(data._id)
  58. }
  59. const toDel = (data) => {
  60. console.log(data._id)
  61. }
  62. </script>
  63. <style scoped lang="less">
  64. .main {
  65. padding: 4%;
  66. }
  67. </style>