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

<script lang="ts" setup>
import {reactive, ref, watch} 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, InstantVO} from '@/api/alert/run/instant/index'
import {useMessage} from '@/hooks/web/useMessage'

const emit = defineEmits(['success'])

const {createMessage} = useMessage()
const {t} = useI18n()
const current = ref<number>(0)
const state = reactive<any>({
  selectedRowKeys: [],
  selectedData: [],
  pointInfo: [],
  type: false,
})
// 本地isDisabled变量-表征下一步按钮的启用与禁用
const isDisabled = ref<boolean>(true)

const [registerCreateModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
  await resetFields()
current.value=0;
state.selectedData=[];
state.selectedRowKeys=[];
})


function next() {
  current.value++
}

function prev() {
  current.value--
}
const steps = [
  { key: '壹', title: '壹' },
  { key: '贰', title: '贰' },
]
const [registerForm, {validate, resetFields,getFieldsValue, setFieldsValue, updateSchema, setProps}] = useForm({
  labelWidth: 100,
  schemas: createInstantForm,
  showSubmitButton: false,
  showResetButton: false,
  layout: 'horizontal',
  actionColOptions: {
    span: 0, // 不占任何列
    style: { display: 'none' },
  },
})

interface instantForms {
  modelId?: string
  mpName?: string
  algorithmId?: string
}

const instantForm = reactive<instantForms>({
  modelId: '',
  mpName: '',
  algorithmId: ''
})
async function updatempName(selectedRowKeys, selectedRows) {
  resetFields()
  state.selectedRowKeys = selectedRowKeys;
  state.selectedData = selectedRows;
  //读出模型中的点号信息
  if (selectedRows.length !== 0) {
    console.log(selectedRows)
    state.type = selectedRows[0].algorithmId === '2'
    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].algorithmId
    }
  }

  // 下一步按钮的禁用与启用
  isDisabled.value = selectedRows.length === 0
  if (selectedRows.length === 0)
    setProps({disabled: true})

  else
    setProps({disabled: false})



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

  // 将数据放入下拉框中
  updateSchema({
    field: 'modelVersionId',
    componentProps: {
      options: versionList,
    },
    defaultValue: versionList[0]?.value
  })
  updateSchema({
    field: 'calcGroup',
    componentProps: {
      options: calcGroupList,
    },
    defaultValue: calcGroupList[0]?.value
  })
  instantForm.modelId = selectedRows.length !== 0 ? `${selectedRows[0].modelId}` : ``
  instantForm.mpName = selectedRows.length !== 0 ? `${selectedRows[0].modelName}-实例` : ``
  instantForm.algorithmId=selectedRows.length !== 0 ? `${selectedRows[0].algorithmId}` : ``

  setFieldsValue(instantForm)
}

function onCanel() {
  state.selectedData=[];
  state.selectedRowKeys=[];
  closeModal()
}

const loading = ref<boolean>(false)
const pointRef = ref()

async function handleSubmit() {
  try {
    loading.value = true
    const values  = await validate()
    // 获取子组件的测点列表数据
    const pointInfoNew = pointRef.value.getPointTableData()
    values.pointInfo = pointInfoNew
    await createInstant(values)
    emit('success')
    createMessage.success(t('common.saveSuccessText'))
    closeModal()
  }
  catch (e) {
  }finally {
    loading.value = false
  }
}
</script>
<template>
  <BasicModal v-bind="$attrs" title="新增模型实例" width="65%"
              :body-style="{ height: '500px', overflowY: 'auto' }"

              @cancel="onCanel"
              @register="registerCreateModal">
    <Card title="实例信息">
      <BasicForm @register="registerForm" ref="instantFormRef"/>
    </Card>
    <Divider/>

    <Steps :current="current" :items="steps"/>
    <div class="steps-content">
      <ModalTable v-if="current === 0" :selectedRowKeys="state.selectedRowKeys"
                  :selected-data="state.selectedData" @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="handleSubmit"
        >
          完成
        </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: 5px;
  text-align: center;
  background-color: #fafafa;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
}

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

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

                   :deep(.ant-card-body){
                    padding:12px
                   }

</style>