ts/src/views/Gantt/components/MainGantt2/index.jsx

import { useRouter } from 'vue-router'
import {
  NDatePicker,
  NRadioButton,
  NRadioGroup,
  NButton,
  NSelect,
} from 'naive-ui'
import GanttCom from '../Gantt'
import { getDDList } from '@/api/Gantt/gantt'
import { onBeforeMount } from 'vue'

export default defineComponent({
  setup() {
    const range = ref([new Date('2000-01-01 00:00:00').getTime(), Date.now()])
    const value = ref('year')
    const types = ref([])

    const router = useRouter()
    const editEvent = () => {
      console.log(router)
      router.push('/gantt/mainEdit')
    }

    onBeforeMount(async () => {
      await getDDOptions()
    })

    const ddOptions = ref([])
    async function getDDOptions() {
      const { code, data } = await getDDList()
      if (code === 200) {
        ddOptions.value = data.list
        types.value = ddOptions.value.map(item => item.id)
      }
    }

    const ganttRef = ref(null)
    function searchGanttData() {
      // console.log(ganttRef);
      renderMainTask(document.querySelector('#tableContainer'), {
        ids: types.value,
        startTime: range.value[0],
        endTime: range.value[1],
      })
    }

    return () => (
      <>
        <div class="flex gap-2">
          <NDatePicker
            v-model:value={range.value}
            type="datetimerange"
            clearable
          />
          {/* <NRadioGroup v-model:value={value.value} name="radiobuttongroup">
            <NRadioButton value="hour" label="日" />
            <NRadioButton value="day" label="月" />
          </NRadioGroup> */}
          <NSelect
            v-model:value={types.value}
            multiple
            options={ddOptions.value}
            label-field="name"
            clearable
            value-field="id"
          ></NSelect>
          {/* <NButton class="ml-auto" type="primary" onClick={editEvent}>
            编辑事件
          </NButton> */}
          <NButton class="ml-auto" type="primary" onClick={searchGanttData}>
            搜索
          </NButton>
        </div>
        <GanttCom
          ref={ganttRef}
          scale={value.value}
          dateRange={range.value}
          types={types.value}
        />
      </>
    )
  },
})