index.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <template>
  2. <el-dialog
  3. v-model="isShowTable"
  4. :title="tableTitle"
  5. width="1200"
  6. :before-close="handleClose"
  7. >
  8. <avue-crud
  9. ref="crudRef"
  10. v-model:search="search"
  11. v-model="form"
  12. :data="data"
  13. :option="option"
  14. v-model:page="page"
  15. @row-click="rowClick"
  16. @row-save="createRow"
  17. @row-update="updateRow"
  18. @row-del="deleteRow"
  19. @selection-change="selectionChange"
  20. />
  21. <template #footer>
  22. <div class="dialog-footer">
  23. <el-button @click="handleClose">取消</el-button>
  24. <el-button type="primary" @click="onSelected"> 确定 </el-button>
  25. </div>
  26. </template>
  27. </el-dialog>
  28. </template>
  29. <script setup>
  30. import { ref, getCurrentInstance } from "vue";
  31. import { useCrud } from "@/hooks/userCrud";
  32. import { tableConfig } from "./configs/tableConfig";
  33. const props = defineProps({
  34. tableTitle: {
  35. default: "",
  36. type: String,
  37. },
  38. tableType: {
  39. default: "",
  40. type: String,
  41. },
  42. });
  43. const isShowTable = ref(false);
  44. const startSelect = () => {
  45. isShowTable.value = true;
  46. };
  47. // 传入一个url,后面不带/
  48. const { url, form, data, option, search, page, toDeleteIds, Methords, Utils } =
  49. useCrud({
  50. src: tableConfig[props.tableType].url,
  51. });
  52. const { dataList, createRow, updateRow, deleteRow } = Methords; //增删改查
  53. const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  54. const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  55. const commonTableEmits = defineEmits(["selectedSure"]);
  56. watchEffect(async () => {
  57. url.value = tableConfig[props.tableType].url;
  58. option.value = Object.assign(option.value, {
  59. menu: false,
  60. highlightCurrentRow: true,
  61. addBtn: false,
  62. column: tableConfig[props.tableType].column,
  63. });
  64. dataList();
  65. });
  66. const selectRowValue = ref({});
  67. const rowClick = (row) => {
  68. selectRowValue.value = row;
  69. };
  70. const handleClose = () => {
  71. isShowTable.value = false;
  72. };
  73. const onSelected = () => {
  74. commonTableEmits("selectedSure", selectRowValue.value);
  75. isShowTable.value = false;
  76. };
  77. defineExpose({ startSelect });
  78. </script>