index.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <template>
  2. <div class="default-main ">
  3. <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info"
  4. show-icon />
  5. <el-row>
  6. <el-col :span="24">
  7. <!-- 表格顶部菜单 -->
  8. <TableHeader :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch']"
  9. quick-search-placeholder="通过标题模糊搜索"
  10. @action="baTable.onTableHeaderAction" />
  11. <!-- 表格 -->
  12. <!-- 要使用`el-table`组件原有的属性,直接加在Table标签上即可 -->
  13. <Table @action="baTable.onTableAction" />
  14. </el-col>
  15. </el-row>
  16. <!-- 表单 -->
  17. </div>
  18. </template>
  19. <script setup lang="ts">
  20. import { ref, onMounted, provide } from "vue";
  21. import { entrust } from "/@/api/controllerUrls";
  22. import Table from "/@/components/table/index.vue";
  23. import TableHeader from "/@/components/table/header/index.vue";
  24. import { defaultOptButtons } from "/@/components/table";
  25. import { baTableApi } from "/@/api/common";
  26. import baTableClass from "/@/utils/baTable";
  27. //注销按钮
  28. let cancelBtn: OptButton[] = [
  29. {
  30. render: 'tipButton',
  31. name: 'audit',
  32. title: '审核',
  33. text: '审核',
  34. type: 'primary',
  35. icon: '',
  36. class: '',
  37. disabledTip: false,
  38. },
  39. ]
  40. let btn = defaultOptButtons([])
  41. btn = btn.concat(cancelBtn)
  42. const baTable = new baTableClass(
  43. new baTableApi(entrust),
  44. {
  45. dblClickNotEditColumn: [undefined, "status"],
  46. column: [
  47. { type: "selection", align: "center", operator: false },
  48. {label: '头像', prop: 'headPortrait', align: 'center',render:'image', operator: false},
  49. {label: '委托人姓名', prop: 'memberName', align: 'left', operator: 'LIKE'},
  50. { label: "所在区县", prop: "districtName", align: "center", operator: "LIKE" },
  51. { label: "所在小区", prop: "communityName", align: "center", operator: "LIKE" },
  52. { label: "楼号", prop: "buildingNumber", align: "center", operator: "LIKE" },
  53. { label: "车位号码", prop: "parkingNumber", align: "center", operator: "LIKE" },
  54. {
  55. label: "委托类型",
  56. prop: "entrustType",
  57. align: "center",
  58. render: "tag",
  59. operator: "=",
  60. replaceValue: { 0: "租售", 1: "出租", 3: "出售" }
  61. },
  62. {
  63. label: "委托状态",
  64. prop: "entrustStatus",
  65. align: "center",
  66. render: "tag",
  67. operator: "=",
  68. replaceValue: { 0: "委托中", 1: "已撤销" }
  69. },
  70. {
  71. label: "审核状态",
  72. prop: "releaseStatus",
  73. align: "center",
  74. render: "tag",
  75. operator: "=",
  76. replaceValue: { 0: "待审核", 1: "审核通过", 3: "审核驳货" }
  77. },
  78. { label: "创建时间", prop: "createTime", align: "center", width: "180", operator: false },
  79. {
  80. label: '操作',
  81. align: 'center',
  82. width: '80',
  83. render: 'buttons',
  84. buttons: btn,
  85. operator: false
  86. },
  87. ]
  88. },
  89. {
  90. defaultItems: {}
  91. },
  92. {
  93. // 获得编辑数据后
  94. requestEdit: () => {
  95. if (baTable.form.items && !baTable.form.items.icon) baTable.form.items.icon = "el-icon-Minus";
  96. }
  97. }
  98. );
  99. provide("baTable", baTable);
  100. onMounted(() => {
  101. baTable.mount();
  102. baTable.getIndex();
  103. });
  104. </script>
  105. <style scoped lang="scss"></style>