JG-ADMIN-TEMP/src/components/CommonTable/index.vue

<template>
  <el-dialog
    v-model="isShowTable"
    :title="tableTitle"
    width="1200"
    :before-close="handleClose"
  >
    <avue-crud
      ref="crudRef"
      v-model:search="search"
      v-model="form"
      :data="data"
      :option="option"
      v-model:page="page"
      @row-click="rowClick"
      @row-save="createRow"
      @row-update="updateRow"
      @row-del="deleteRow"
      @selection-change="selectionChange"
    />

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="onSelected"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { useCrud } from "@/hooks/userCrud";
import { tableConfig } from "./configs/tableConfig";

const props = defineProps({
  tableTitle: {
    default: "",
    type: String,
  },
  tableType: {
    default: "",
    type: String,
  },
});

const isShowTable = ref(false);

const startSelect = () => {
  isShowTable.value = true;
};

// 传入一个url，后面不带/
const { url, form, data, option, search, page, toDeleteIds, Methords, Utils } =
  useCrud({
    src: tableConfig[props.tableType].url,
  });
const { dataList, createRow, updateRow, deleteRow } = Methords; //增删改查
const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件

const crudRef = ref(null); //crudRef.value 获取avue-crud对象

const commonTableEmits = defineEmits(["selectedSure"]);

watchEffect(async () => {
  url.value = tableConfig[props.tableType].url;
  option.value = Object.assign(option.value, {
    menu: false,
    highlightCurrentRow: true,
    addBtn: false,
    column: tableConfig[props.tableType].column,
  });
  dataList();
});

const selectRowValue = ref({});
const rowClick = (row) => {
  selectRowValue.value = row;
};

const handleClose = () => {
  isShowTable.value = false;
};

const onSelected = () => {
  commonTableEmits("selectedSure", selectRowValue.value);
  isShowTable.value = false;
};

defineExpose({ startSelect });
</script>