ts/src/views/Gantt/components/EventList/components/SubEventEdit.jsx

import {
  NForm,
  NFormItem,
  NInput,
  NButton,
  NDatePicker,
  NUpload,
  NSelect,
} from 'naive-ui'
import ModalCom from '@/components/Modal/index.vue'
import { useEvent } from '../hooks'
import { addSon, updateSon, uploadImage } from '@/api/gantt'
export default defineComponent({
  // props: {
  //   show: {
  //     type: Boolean,
  //     default: false,
  //   },
  // },
  setup() {
    const {
      subEventRules,

      showNewEvent,
      eventData,
      sonOptions,
      oneClassData,
      searchTreeList,
    } = useEvent()
    const imageValue = ref()
    const close = () => {
      timeRange.value = null
      uploadImg.value = []

      showNewEvent.value = false
    }
    const changeFile = async file => {
      const formData = new FormData()
      formData.append('file', file.file.file)
      const res = await uploadImage(formData)
      imageValue.value = res.data.path
    }

    const formRef = ref(null)
    async function sure(e) {
      e.preventDefault()
      delete eventData.value.eventType
      delete eventData.value.source
      delete eventData.value.publishTime
      delete eventData.value.twoType
      console.log('eventData.value-------', eventData.value)
      const data = {
        // id: eventData.value.id ?? null,
        // activityId: oneClassData.value.activityId ?? null,
        // name: eventData.value.name,
        activityId: oneClassData.value?.id ?? null,
        oneType: oneClassData.value?.id,
        ...eventData.value,
        // twoType: twoTypeId.value,
        fileUrl: imageValue.value,
        startTime: eventData.value.timeRange,
        endTime: eventData.value.timeRange,
        //   ? eventData.value.timeRange[0]
        //   : null,
        // endTime: eventData.value.timeRange
        //   ? eventData.value.timeRange[1]
        //   : null,
      }

      // eventData.value.startTime = data.startTime
      // formRef.value?.validate(async erros => {
      //   console.log(erros, eventData, '')

      //   if (!erros) {
      if (eventData.value.name && eventData.value.timeRange) {
        const res = eventData.value.id
          ? await updateSon(data)
          : await addSon(data)
        if (res.code === 200) {
          close()
          searchTreeList()
        }
      } else {
        formRef.value?.validate(erros => {})
      }

      //   }
      // })
      // console.log(data, 'data')
    }

    watch(
      [
        () => eventData.value.fileUrl,
        // () => eventData.value.startTime,
        // () => eventData.value.endTime,
        // () => eventData.value.twoType,
      ],
      ([fileUrl, start, end, twoType]) => {
        // timeRange.value = start
        //   ? [new Date(start).getTime(), new Date(end).getTime()]
        //   : null
        if (fileUrl) {
          uploadImg.value = [
            {
              id: fileUrl,
              name: fileUrl,
              url: `${window.settings.imgServer}${fileUrl}`,
              status: 'finished',
            },
          ]
          console.log(uploadImg.value)
        }
        // console.log(twoType, 'twoType')

        // twoType && (twoTypeId.value = twoType)
      }
    )

    const timeRange = ref(null)
    const uploadImg = ref([])
    // const twoTypeId = ref(null)

    return () => (
      <ModalCom
        v-model:show={showNewEvent.value}
        title={`${eventData.value.id ? '编辑' : '添加'}子事件`}
      >
        <NForm
          ref={formRef}
          class="w-[500px]"
          model={eventData.value}
          label-placement="left"
          label-width="auto"
          rules={subEventRules}
        >
          {/* <NFormItem label="二级分类" path="twoType">
            <NSelect
              v-model:value={eventData.value.twoType}
              options={sonOptions.value}
              label-field="name"
              value-field="id"
            ></NSelect>
          </NFormItem> */}
          {/* <NFormItem label="步骤">
            <NSelect v-model:value={value2.value}></NSelect>
          </NFormItem>
          <NFormItem label="目标">
            <NSelect v-model:value={value3.value}></NSelect>
          </NFormItem> */}
          <NFormItem label="事件名称" path="name">
            <NInput v-model:value={eventData.value.name} />
          </NFormItem>
          {/* <NFormItem label="事件时间" path="timeRange">
            <NDatePicker
              // v-model:value={timeRange.value}
              v-model:value={eventData.value.timeRange}
              type="datetimerange"
              clearable
            />
          </NFormItem> */}
          <NFormItem label="事件时间" path="timeRange">
            <NDatePicker
              // v-model:value={timeRange.value}
              v-model:value={eventData.value.timeRange}
              type="datetime"
              clearable
            />
          </NFormItem>
          <NFormItem label="装备型号" path="equipModel">
            <NInput v-model:value={eventData.value.equipModel} />
          </NFormItem>
          <NFormItem label="上报站点" path="reportSite">
            <NInput v-model:value={eventData.value.reportSite} />
          </NFormItem>
          <NFormItem label="事件描述" path="describe">
            <NInput v-model:value={eventData.value.describe} type="textarea" />
          </NFormItem>
          <NFormItem label="上传图片" path="fileUrl">
            <NUpload
              default-file-list={uploadImg.value}
              list-type="image-card"
              onChange={changeFile}
              max={1}
            />
          </NFormItem>
        </NForm>
        <div class="flex justify-end gap-2">
          <NButton onClick={close}>取消</NButton>
          <NButton type="primary" onClick={sure}>
            确认
          </NButton>
        </div>
      </ModalCom>
    )
  },
})