index.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <div class="table-demo">
  3. <bs-table v-bind="tableOptions">
  4. <template #searchRight>
  5. </template>
  6. </bs-table>
  7. <add-or-edit-drawer ref="addOrEditDrawerRef" />
  8. </div>
  9. </template>
  10. <script setup>
  11. import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
  12. import { onMounted, ref } from 'vue';
  13. import { pick } from 'lodash';
  14. import AddOrEditDrawer from '/@/views/table-demo/components/AddOrEditDrawer.vue';
  15. import { clientManageApi } from '/@/api/market-manage/index.js';
  16. const addOrEditDrawerRef = ref(null);
  17. const {
  18. tableOptions,
  19. setTablePropsValue: setValue,
  20. getTablePropsValue: getValue,
  21. } = useBsTable({
  22. tableOptions: {
  23. gridOptions: {
  24. loading: false,
  25. columns: [
  26. {
  27. field: 'id',
  28. title: '状态',
  29. },
  30. {
  31. field: 'name',
  32. title: '流水号',
  33. },
  34. {
  35. field: 'name1',
  36. title: '项目名称',
  37. },
  38. {
  39. field: 'name2',
  40. title: '项目ID',
  41. },
  42. {
  43. field: 'name',
  44. title: '项目地址',
  45. },
  46. {
  47. field: 'name',
  48. title: '预计合同金额(万)',
  49. },
  50. {
  51. field: 'name',
  52. title: '项目类型',
  53. },
  54. {
  55. field: 'name',
  56. title: '产品类型',
  57. },
  58. {
  59. field: 'name',
  60. title: '预计开标日期',
  61. },
  62. {
  63. field: 'name',
  64. title: '操作人',
  65. },
  66. {
  67. field: 'name',
  68. title: '操作时间',
  69. },
  70. {
  71. field: 'action',
  72. title: '操作',
  73. },
  74. ],
  75. },
  76. searchConfig: {
  77. enabled: true,
  78. fieldSpan: 4,
  79. fields: [
  80. {
  81. field: 'name',
  82. label: '',
  83. component: 'a-input',
  84. componentProps: {
  85. placeholder: '请输入项目名称',
  86. },
  87. },
  88. ],
  89. },
  90. // pagerConfig: {
  91. // enabled: true,
  92. // pageSize: 10,
  93. // pageNum: 1,
  94. // total: 100,
  95. // onChange: () => {
  96. // fetchTableData();
  97. // },
  98. // },
  99. },
  100. });
  101. const openEditDrawer = () => {
  102. addOrEditDrawerRef.value.showDrawer();
  103. };
  104. </script>
  105. <style scoped lang="scss">
  106. .table-demo {}
  107. </style>