JLH/JLHWEB/src/components/PopoverConfirm/index.vue

<template>
  <el-popover placement="bottom-start" :visible="visible" :width="width" v-bind="$attrs">
    <header class="flx-justify-between mt-4 mb-8">
      <div class="flx-start">
        <el-button type="primary" @click="confirm">
          {{ $t("common.okText") }}
        </el-button>
        <el-button text @click="close"> {{ $t("common.cancelText") }}</el-button>
      </div>
      <div class="text-h4-m text-title">{{ title }}</div>
    </header>
    <slot>
      <LjVxeTable
        :columns="columns"
        :data="data"
        :footerMethod="footerMethod"
        :table-props="{
          editConfig: { trigger: 'click', mode: 'row' }
        }"
        :tool-button="[]"
        table-cls=""
        :header-cell-class-name="headerCellClassName"
      >
      </LjVxeTable>
    </slot>

    <template #reference>
      <slot name="reference" :show="show"></slot>
    </template>
  </el-popover>
</template>

<script setup lang="ts" name="PopoverConfirm">
import { ref } from "vue";
import LjVxeTable from "@/components/LjVxeTable/index.vue";

interface PopoverConfirmProps {
  columns?: any[];
  data?: any[];
  title: string;
  width?: string | number;
  /**
   * 表尾
   * @param data
   */
  footerMethod?: (data: any) => any;
}

const emit = defineEmits(["confirm"]);

withDefaults(defineProps<PopoverConfirmProps>(), {
  columns: () => [],
  data: () => [],
  title: "",
  width: "auto"
});

const visible = ref(false);

// 修改表头样式
const headerCellClassName = ({ column }: any) => {
  if (column?.editRender) {
    return "vxecol-edit";
  }
  return null;
};

const confirm = () => {
  emit("confirm", () => {
    close();
  });
};

const show = () => {
  visible.value = true;
};

const close = () => {
  visible.value = false;
};
</script>

<style>
.vxe-table--ignore-clear {
  z-index: 3000 !important;
}
</style>