ts/src/views/Mubiao/hooks/mubiaoDetail.jsx

// import { h } from 'vue'
import { NDataTable, NInputNumber, NSwitch } from 'naive-ui'
import { useModal } from '@/views/Content/hooks/modal'
const { openDetailsModal } = useModal()
export const useMubiaoDetail = () => {
  return { showDetailsMubiao }
}

const detectingLoadColumns = [
  {
    title: '垂直起始角',
    key: 'minimumClock',
    width: 180,
    render(row) {
      return (
        <NInputNumber
          v-model:value={row.minimumClock}
          // disabled={['光学', '雷达'].includes(row.type)}
        ></NInputNumber>
      )
    },
  },
  // {
  //   title: '垂直终止角',
  //   key: 'maximumClock',
  //   width: 180,
  //   render(row) {
  //     return (
  //       <NInputNumber
  //         v-model:value={row.maximumClock}
  //         // disabled={['光学', '雷达'].includes(row.type)}
  //       ></NInputNumber>
  //     )
  //   },
  // },
  {
    title: '水平起始角',
    key: 'minimumCone',
    width: 180,
    render(row) {
      return (
        <NInputNumber
          v-model:value={row.minimumCone}
          // disabled={['光学', '雷达'].includes(row.type)}
        ></NInputNumber>
      )
    },
  },
  {
    title: '水平终止角',
    key: 'maximumCone',
    width: 180,
    render(row) {
      return (
        <NInputNumber
          v-model:value={row.maximumCone}
          // disabled={['光学', '雷达'].includes(row.type)}
        ></NInputNumber>
      )
    },
  },
  {
    title: '半径',
    key: 'radius',
    width: 180,
    render(row) {
      return (
        <NInputNumber
          v-model:value={row.radius}
          // disabled={['光学', '雷达'].includes(row.type)}
        ></NInputNumber>
      )
    },
  },
  {
    title: '是否开启',
    key: 'status',
    render(row) {
      return <NSwitch v-model:value={row.status}></NSwitch>
    },
  },
]

const data = ref([
  {
    id: 3,
    radius: 5000,
    minimumClock: 20.0,
    maximumClock: 110.0,
    minimumCone: 20.0,
    maximumCone: 90.0,
    height: 100,
    status: true,
  },
])

function renderMubiaoDetailsContent(mbData) {
  // return h(
  //   'div',
  //   {},
  //   Object.keys(mbData).map(key => h('div', {}, `${key}：${mbData[key]}`))
  // )
  return () => (
    <div class="detail-container">
      <div class="detail-item-title">基本信息</div>
      <div>
        {Object.keys(mbData).map(key => (
          <div>
            {key}：{mbData[key]}
          </div>
        ))}
      </div>
      <div class="detail-item-title">探测载荷</div>
      <NDataTable
        key={row => row.id}
        columns={detectingLoadColumns}
        data={data.value}
      />
    </div>
  )
}
function showDetailsMubiao(mbData) {
  openDetailsModal({
    titleString: 'zb详情',
    contentSlot: renderMubiaoDetailsContent(mbData),
  })
}