alert-front/src/views/run/instant/CreateModal.vue

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { Card, Divider, Steps } from 'ant-design-vue'
import ModalTable from '../model/ModelTable.vue'
import PointTable from '../model/PointTable.vue'
import { createInstantForm } from './instant.data'
import { useI18n } from '@/hooks/web/useI18n'
import { BasicModal, useModalInner } from '@/components/Modal'
import { BasicForm, useForm } from '@/components/Form'
import { getModelVersionList } from '@/api/alert/run/model/index'
import { getCalcGroupList } from '@/api/alert/run/calcgroup/index'
import { createInstant } from '@/api/alert/run/instant/index'
import { useMessage } from '@/hooks/web/useMessage'

const emit = defineEmits(['success'])
const { createMessage } = useMessage()
const { t } = useI18n()

const [registerCreateModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  setModalProps({ destroyOnClose: true, showCancelBtn: false, showOkBtn: false })
})

const current = ref<number>(0)
function next() {
  current.value++
}
function prev() {
  current.value--
}
const steps = [
  {
    title: '壹',
    content: 'First-content',
  },
  {
    title: '贰',
    content: 'Second-content',
  },
]
const items = steps.map(item => ({ key: item.title, title: item.title }))

const [registerForm, { validate, setFieldsValue, updateSchema, setProps }] = useForm({
  labelWidth: 100,
  schemas: createInstantForm,
  showSubmitButton: false,
  showResetButton: false,
  layout: 'horizontal',

  actionColOptions: { span: 2 },
  disabled: true,
})

interface instantForms {
  modelId?: string
  mpName?: string
}
const instantForm = reactive<instantForms>({
  modelId: '',
  mpName: '',
})
const isDisabled = ref<boolean>(true)
const state = reactive<any>({
  pointInfo: [],
  type: false,
})
async function updatempName(selectedRowKeys, selectedRows) {
  console.log(selectedRows.length)

  if (selectedRows.length !== 0) {
    state.type = selectedRows[0].algorithm === 'ANN'
    console.log(state.type)
    state.pointInfo = JSON.parse(selectedRows[0].modelInfo).pointInfo
    for (const p of state.pointInfo) {
      p.modelName = selectedRows[0].modelName
      p.modelDescription = selectedRows[0].description
      p.algorithm = selectedRows[0].algorithm
    }
  }
  // 下一步按钮的禁用与启用
  isDisabled.value = selectedRows.length === 0
  console.log(isDisabled)
  if (selectedRows.length === 0)
    setProps({ disabled: true })

  else
    setProps({ disabled: false })

  instantForm.modelId = selectedRows.length !== 0 ? `${selectedRows[0].id}` : ``

  instantForm.mpName = selectedRows.length !== 0 ? `${selectedRows[0].modelName}-实例` : ``
  setFieldsValue(instantForm)

  const versionData = selectedRows.length !== 0 ? await getModelVersionList({ modelId: selectedRows[0].id }) : []
  const versionList = [] as any
  // // 组名下拉框问题
  versionData.forEach((item) => {
    versionList.push({ label: item.version, value: item.id })
  })
  const calcGroupData = selectedRows.length !== 0 ? await getCalcGroupList({ unitId: selectedRows[0].unitId }) : []
  const calcGroupList = [] as any
  // // 组名下拉框问题
  calcGroupData.forEach((item) => {
    calcGroupList.push({ label: item.groupName, value: item.id })
  })

  // 将数据放入下拉框中
  updateSchema({
    field: 'modelVersionId',
    componentProps: {
      options: versionList,
    },
  })
  updateSchema({
    field: 'calcGroup',
    componentProps: {
      options: calcGroupList,
    },
  })
}

function onCanel() {
  current.value = 0
  closeModal()
}
const loading = ref<boolean>(false)
const pointRef = ref()
async function CompleteCreate() {
  try {
    loading.value = true

    // 由于自定义按钮的，所以confirmLoading失效
    setModalProps({ confirmLoading: true, loading: true })

    const values = await validate()
    // if (unref(isUpdate)) {
    //   await updateDemo02Category(values)
    // } else {
    //   await createDemo02Category(values)
    // }
    // 插入数据库
    // 获取子组件的测点列表数据
    const pointInfoNew = pointRef.value.getPointTableData()
    values.pointInfo = pointInfoNew
    console.log(values)
    await createInstant(values)

    emit('success')
    createMessage.success(t('common.saveSuccessText'))
  }
  finally {
    closeModal()
    loading.value = false

    // 由于自定义按钮的，所以confirmLoading失效
    setModalProps({ confirmLoading: false, loading: false })
  }
}
</script>

<template>
  <BasicModal v-bind="$attrs" title="新增模型实例" width="80%" @cancel="onCanel" @register="registerCreateModal">
    <Card title="实例信息">
      <BasicForm @register="registerForm" />
    </Card>
    <Divider />

    <Steps :current="current" :items="items" />
    <div class="steps-content">
      <ModalTable v-if="current === 0" @success="updatempName" />
      <PointTable v-if="current === 1" ref="pointRef" :data="state.pointInfo" :type="state.type" />
    </div>
    <!-- modal 底部区域插槽实现--替换原按钮 -->
    <template #footer>
      <div class="steps-action">
        <a-button v-if="current < steps.length - 1 " :disabled="isDisabled" type="primary" @click="next">
          下一步
        </a-button>
        <a-button
          v-if="current === steps.length - 1"
          type="primary"
          :loading="loading"
          @click="CompleteCreate"
        >
          完成
        </a-button>
        <!-- <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
          上一步+
        </a-button> -->
      </div>
    </template>
  </BasicModal>
</template>

<style scoped>
.steps-content {
  margin-top: 16px;
  text-align: center;
  background-color: #fafafa;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
}

.steps-action {
  margin-top: 24px;
}

[data-theme='dark'] .steps-content {
  background-color: #2f2f2f;
  border: 1px dashed #404040;
}
</style>