fix:创建模型实例弹窗bug修复

src/views/run/instant/CreateModal.vue

@@ -14,21 +14,26 @@ import {useMessage} from '@/hooks/web/useMessage'
 
 const emit = defineEmits(['success'])
 
-const props = defineProps({
-  isDisabled: {
-    type: Boolean,
-    default: true,
-  }
-})
-
 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) => {
-  setModalProps({destroyOnClose: true, showCancelBtn: false, showOkBtn: false})
+  resetFields()
+current.value=0;
+state.selectedData=[];
+state.selectedRowKeys=[];
+  isDisabled.value = true
 })
 
-const current = ref<number>(0)
 
 function next() {
   current.value++
@@ -36,33 +41,34 @@ function next() {
 
 function prev() {
   current.value--
-  if (current.value == 0) {
-    console.log(state.selectedRowKeys)
-    console.log(state.selectedData)
-  }
 }
 
+// const steps = [
+//   {
+//     title: '壹',
+//     content: 'First-content',
+//   },
+//   {
+//     title: '贰',
+//     content: 'Second-content',
+//   },
+// ]
+// const items = steps.map(item => ({key: item.title, title: item.title}))
 const steps = [
-  {
+  { key: '壹', title: '壹' },
-    title: '壹',
+  { key: '贰', title: '贰' },
-    content: 'First-content',
-  },
-  {
-    title: '贰',
-    content: 'Second-content',
-  },
 ]
-const items = steps.map(item => ({key: item.title, title: item.title}))
+const [registerForm, {validate, resetFields,getFieldsValue, setFieldsValue, updateSchema, setProps}] = useForm({
-
-const [registerForm, {validate, resetFields, setFieldsValue, updateSchema, setProps}] = useForm({
   labelWidth: 100,
   schemas: createInstantForm,
   showSubmitButton: false,
   showResetButton: false,
   layout: 'horizontal',
-
-  actionColOptions: {span: 2},
   disabled: true,
+  actionColOptions: {
+    span: 0, // 不占任何列
+    style: { display: 'none' },
+  },
 })
 
 interface instantForms {
@@ -75,34 +81,13 @@ const instantForm = reactive<instantForms>({
   mpName: '',
 
 })
-// 本地isDisabled变量
-const isDisabled = ref<boolean>(true)
-
-// 监听父组件传递的isDisabled属性变化
-watch(() => props.isDisabled, (newVal) => {
-  if (newVal !== undefined) {
-    isDisabled.value = newVal
-  }
-}, {immediate: true}) // immediate设置为true，确保组件初始化时也会执行一次
-
-const state = reactive<any>({
-  selectedRowKeys: [],
-  selectedData: [],
-  pointInfo: [],
-  type: false,
-})
-
 async function updatempName(selectedRowKeys, selectedRows) {
-  console.log(selectedRowKeys)
-  console.log(selectedRows)
-  console.log(instantForm)
   resetFields()
   state.selectedRowKeys = selectedRowKeys;
   state.selectedData = selectedRows;
   //读出模型中的点号信息
   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
@@ -119,10 +104,7 @@ async function updatempName(selectedRowKeys, selectedRows) {
   else
     setProps({disabled: false})
 
-  instantForm.modelId = selectedRows.length !== 0 ? `${selectedRows[0].modelId}` : ``
 
-  instantForm.mpName = selectedRows.length !== 0 ? `${selectedRows[0].modelName}-实例` : ``
-  setFieldsValue(instantForm)
 
   const versionData = selectedRows.length !== 0 ? await getModelVersionList({modelId: selectedRows[0].modelId}) : []
   const versionList = [] as any
@@ -144,13 +126,19 @@ async function updatempName(selectedRowKeys, selectedRows) {
     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}-实例` : ``
+
+  setFieldsValue(instantForm)
 }
 
 function onCanel() {
@@ -161,48 +149,38 @@ function onCanel() {
 const loading = ref<boolean>(false)
 const pointRef = ref()
 
-async function CompleteCreate() {
+async function handleSubmit() {
   try {
     loading.value = true
-
+    console.log(getFieldsValue())
-    // 由于自定义按钮的，所以confirmLoading失效
-    setModalProps({confirmLoading: true, loading: true})
-
     const values  = await validate()
     console.log(values)
-    // 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()
+  } 
+  catch (e) {
+  }finally {
     loading.value = false
-
-    // 由于自定义按钮的，所以confirmLoading失效
-    setModalProps({confirmLoading: false, loading: false})
   }
 }
 </script>
-
 <template>
-  <BasicModal v-bind="$attrs" title="新增模型实例" width="60%" height="500px"  @cancel="onCanel"
+  <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="items"/>
+    <Steps :current="current" :items="steps"/>
     <div class="steps-content">
       <ModalTable v-if="current === 0" :selectedRowKeys="state.selectedRowKeys"
                   :selected-data="state.selectedData" @success="updatempName"/>
@@ -219,7 +197,7 @@ async function CompleteCreate() {
           v-if="current === steps.length - 1"
           type="primary"
           :loading="loading"
-          @click="CompleteCreate"
+          @click="handleSubmit"
         >
           完成
         </a-button>
@@ -233,7 +211,7 @@ async function CompleteCreate() {
 
 <style scoped>
 .steps-content {
-  margin-top: 16px;
+  margin-top: 5px;
   text-align: center;
   background-color: #fafafa;
   border: 1px dashed #e9e9e9;
@@ -241,11 +219,16 @@ async function CompleteCreate() {
 }
 
 .steps-action {
-  margin-top: 24px;
+  margin-top: 16px;
 }
 
 [data-theme='dark'] .steps-content {
   background-color: #2f2f2f;
   border: 1px dashed #404040;
 }
+
+                   :deep(.ant-card-body){
+                    padding:12px
+                   }
+
 </style>

src/views/run/instant/index.vue

@@ -245,7 +245,7 @@ function handleWarnConfig(record: Recordable) {
       </template>
     </BasicTable>
     <HistoryModal :item-name="itemName" :legend-name="legendName" @register="registerHistoryModal" />
-    <CreateModal  :is-disabled="true" @register="registerCreateModal" @success="reload" />
+    <CreateModal  @register="registerCreateModal" @success="reload" />
     <UpdateModal @register="registerUpdateModal" @success="reload" />
   </div>
 </template>

src/views/run/instant/instant.data.ts

@@ -418,7 +418,7 @@ export const createInstantForm: FormSchema[] = [
       ],
     },
     colProps: {
-      span: 6,
+      span: 12,
     },
     required: true,
 

src/views/run/model/ModelTable.vue

@@ -56,6 +56,9 @@ const [registerTable, { getSelectRows,setSelectedRowKeys,setSelectedRows }] = us
     showResetButton: false,
     actionColOptions: {
       span: 2,
+      style: {
+        marginLeft: '10px',
+      },
     },
   },
   useSearchForm: true,

src/views/run/model/model.data.ts

@@ -51,6 +51,6 @@ export const searchFormSchema: FormSchema[] = [
     field: 'modelName',
     component: 'Input',
     defaultValue: '',
-    colProps: { span: 6 },
+    colProps: { span: 10 },
   },
 ]