vben admin中table内自定义点击元素打开具体模态框

月了不光

于 2024-05-09 09:47:04 发布

阅读量124

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/weixin_48315912/article/details/138600067

版权

 {
    title: `${i18nData[locale].projectName}`,
    dataIndex: 'projectName',
    customRender: ({ record }) => {
      if (isUndefined(record.projectName) || isNull(record.projectName)) {
        return '';
      } else {
        return h(OpenTableModal, {
          columnTab: 'projectName',
          value: record,
        });
      }
    },
  },
  {
    title: `${i18nData[locale].entrypoint}`,
    dataIndex: 'entrypoint',
    customRender: ({ record }) => {
      if (isUndefined(record.entrypoint) || isNull(record.entrypoint)) {
        return '';
      } else {
        const data = record.entrypoint;
        const go = useGo();
        return h(
          'div',
          {
            onClick: () => {
              go('/specific/ship-detail/' + record.entrypoint);
            },
            style: {
              color: '#0960bd',
              cursor: 'pointer',
            },
          },
          `${data}`,
        );
      }
    },
  },

<template>
  <!-- <QRCodeModal @register="registerQRCodeModal" /> -->
  <div @click="openSth" style="color: #0960bd; cursor: pointer">{{ data.showData }}</div>
  <ProjectViewModal @register="registerProjectDetailModal" />
  <BatteryViewModal @register="registerBatteryDetailModal" />
  <BmsViewModal @register="registerBmsDetailModal" />
</template>
<script lang="ts" setup>
  import ProjectViewModal from '../project-mgmt/ProjectViewModal.vue';
  import BatteryViewModal from '../battery-mgmt/batteryViewModal.vue';
  import BmsViewModal from '../bms-mgmt/BmsViewModal.vue';
  import { reactive } from 'vue';
  import { useModal } from '@/components/Modal';

  const props = defineProps({
    columnTab: String,
    value: Object,
  });

  const [registerBatteryDetailModal, { openModal }] = useModal();
  const [registerProjectDetailModal, { openModal: openProjectModal }] = useModal();
  const [registerBmsDetailModal, { openModal: openBmsModal }] = useModal();
  let data = reactive({
    showData: '',
  });
  // table展示
  switch (props.columnTab) {
    case 'projectName':
      data.showData = props.value.projectName;
      break;
    case 'batteryName':
      data.showData = props.value.batteryName;
      break;
    case 'bmsSn':
      data.showData = props.value.bmsSn;
      break;
  }
  // 打开模态框
  function openSth() {
    switch (props.columnTab) {
      case 'projectName':
        openProjectModal(undefined, props.value.projectId);
        break;
      case 'batteryName':
        openModal(undefined, props.value.batteryId);
        break;
      case 'bmsSn':
        openBmsModal(undefined, props.value.bmsBaseInfoId);
        break;
    }
  }
</script>