feat: 添加模型

src/pages/Iot/model/index.vue

@@ -68,7 +68,7 @@
     @ok="ok"
   >
    <a-form :label-col="{span: 4}" :wrapper-col="{span: 14}">
-     <a-form-item label="产品模型名称" v-bind="validateInfos.modelLabel">
+    <a-form-item label="产品模型名称" v-bind="validateInfos.modelLabel">
       <a-input v-model:value="modelRef.modelLabel"  />
     </a-form-item>
     <a-form-item label="协议类型" v-bind="validateInfos.transportType">

src/pages/Iot/model/models.vue

@@ -11,17 +11,48 @@
   <template #bodyCell="{column, record}">
         <template v-if="column.key === 'action'" >
           <a-space>
-            <a >编辑</a>
+            <a @click="openModal(record)" >加入</a>
+            <a >详情</a>
             <a >删除</a>
           </a-space>
         </template>
       </template>
   </a-table>
 </a-card>
+
+<modal-pro
+  label="选择产品"
+  :visible="state.visible"
+  @cancel="state.visible = false"
+  @ok="ok"
+>
+  <a-form :label-col="{span: 4}" :wrapper-col="{span: 14}">
+
+    <a-form-item label="模型名称" v-bind="validateInfos.templateLabel">
+      <a-input v-model:value="modelRef.templateLabel"  />
+    </a-form-item>
+
+    <a-form-item label="产品" v-bind="validateInfos.templateLabel">
+      <a-select v-model:value="modelRef.modelId" >
+        <a-select-option
+          v-for="item in modelState.dataSource"
+          :key="item.id"
+          :value="item.id"
+        >
+          {{item.modelLabel}}
+        </a-select-option>
+      </a-select>
+    </a-form-item>
+
+  </a-form>
+
+</modal-pro>
 </template>
 <script lang='ts' setup >
 import { ModelController } from '@/controller'
+import { LeftSquareOutlined } from '@ant-design/icons-vue'
 import { onMounted, reactive } from 'vue'
+import { Form } from 'ant-design-vue'
 
 const columns = [
   {
@@ -58,6 +89,14 @@ const queryParamsState = reactive({
   templateLabel: ''
 })
 
+const modelState = reactive({
+  page: 1,
+  pageSize: 10,
+  total: 0,
+  dataSource: [],
+  loading: false
+})
+
 const state = reactive({
   dataSource: [],
   loading: false,
@@ -65,11 +104,41 @@ const state = reactive({
   visible: false
 })
 
+const modelRef = reactive({
+  templateLabel: '',
+  modelId: ''
+})
+
+const useForm = Form.useForm
+
+const { resetFields, validate, validateInfos } = useForm(modelRef, reactive({
+  templateLabel: [{ required: true, message: '请填写模型名称' }],
+  modelId: [{ required: true, message: '请选择模型' }]
+}))
+
+const openModal = (record) => {
+  state.visible = true
+  getModel()
+}
+
 const changePage = ({ current }) => {
   queryParamsState.page = current
   getModelsPage()
 }
 
+const ok = () => {
+  validate().then(async () => {
+
+  })
+}
+
+const getModel = async () => {
+  modelState.loading = true
+  const { data, sum } = await ModelController.list()
+  modelState.loading = false
+  modelState.dataSource = data
+}
+
 const getModelsPage = async () => {
   state.loading = true
   const { data, sum } = await ModelController.modelTemplate(queryParamsState)