feat: 新增产品时支持从产品模型库选择

src/controller/iot/model.ts

@@ -64,7 +64,7 @@ export class ModelController {
     return await debugModelPlugin(data)
   }
 
-  static async modelTemplate (params: {page: number, pageSize: number, templateLabel: string}) {
+  static async modelTemplate (params: {page: number, pageSize: number, templateLabel?: string}) {
     return getModelTemplate(params)
   }
 

src/pages/Iot/model/index.vue

@@ -71,25 +71,42 @@
     @cancel="closeModel"
     @ok="ok"
   >
-   <a-form :label-col="{span: 4}" :wrapper-col="{span: 14}">
+   <a-form :hideRequiredMark="formOptions.hideRequiredMark" :label-col="{span: 4}" :wrapper-col="{span: 14}">
+    <a-form-item v-bind="validateInfos.modelTemplateId">
+      <template v-slot:label >
+        <a-tooltip>
+          <template #title>选择了模型库后不需要再填写产品数据</template>
+          <question-circle-outlined /> 模型库
+        </a-tooltip>
+
+      </template>
+      <a-select v-model:value="modelRef.modelTemplateId" allowClear>
+        <a-select-option
+          :value="item.id"
+          v-for="item in state.modelTemplateList"
+          :key="item.id"
+        >{{item.templateLabel}}
+      </a-select-option>
+      </a-select>
+    </a-form-item>
     <a-form-item label="任务名称" v-bind="validateInfos.modelLabel">
-      <a-input v-model:value="modelRef.modelLabel"  />
+      <a-input :disabled="formOptions.disabled" v-model:value="modelRef.modelLabel"  />
     </a-form-item>
     <a-form-item label="协议类型" v-bind="validateInfos.transportType">
-      <a-select v-model:value="modelRef.transportType" >
+      <a-select :disabled="formOptions.disabled" v-model:value="modelRef.transportType" >
         <a-select-option :value="item.port" v-for="item in state.transport" :key="item.port" >{{item.port}}</a-select-option>
       </a-select>
     </a-form-item>
     <a-form-item label="数据格式" v-bind="validateInfos.payloadType">
-      <a-select v-model:value="modelRef.payloadType" >
+      <a-select :disabled="formOptions.disabled" v-model:value="modelRef.payloadType" >
         <a-select-option :value="item" v-for="item in state.payloadType" :key="item" >{{item}}</a-select-option>
       </a-select>
     </a-form-item>
     <a-form-item label="设备类型" >
-      <a-input v-model:value="modelRef.deviceType"  />
+      <a-input :disabled="formOptions.disabled" v-model:value="modelRef.deviceType"  />
     </a-form-item>
     <a-form-item label="厂商描述">
-      <a-textarea  v-model:value="modelRef.modelDescription" />
+      <a-textarea  :disabled="formOptions.disabled" v-model:value="modelRef.modelDescription" />
     </a-form-item>
    </a-form>
   </a-modal>
@@ -97,12 +114,13 @@
 
 <script lang="ts" setup >
 import { CommonController, ModelController } from '@/controller/index'
-import { onMounted, reactive } from 'vue'
+import { onMounted, reactive, watch } from 'vue'
 import { computed } from '@vue/reactivity'
 import { Form } from 'ant-design-vue'
 import { useRouter } from 'vue-router'
 import StatisticsTemplate from '@/components/StatisticsTemplate/index.vue'
-
+import { QuestionCircleOutlined } from '@ant-design/icons-vue'
+// question-circle-outlined
 const columns = [
   {
     title: '产品模型名称',
@@ -142,6 +160,7 @@ const columns = [
 
 const state = reactive<{
   dataSource: IOT.API.MODEL.ModelDot[],
+  modelTemplateList: IOT.API.MODELTEMPLATE.modelTemplate[]
   [key: string]: any
 }>({
   loading: false,
@@ -155,7 +174,13 @@ const state = reactive<{
     modelLabel: ''
   },
   payloadType: ['JSON', '二进制流'],
-  modelCount: []
+  modelCount: [],
+  modelTemplateList: []
+})
+
+const formOptions = reactive({
+  disabled: false,
+  hideRequiredMark: false
 })
 
 const modalTitle = computed(() => state.opraState === 'add' ? '新增产品模型' : '编辑产品模型')
@@ -165,6 +190,7 @@ const useForm = Form.useForm
 const router = useRouter()
 
 const modelRef = reactive({
+  modelTemplateId: '',
   modelLabel: '',
   transportType: '',
   payloadType: '',
@@ -178,8 +204,31 @@ const rulesRef = reactive({
   payloadType: [{ required: true, message: '请填写数据格式' }]
 })
 
+watch(
+  () => modelRef.modelTemplateId,
+  () => {
+    if (modelRef.modelTemplateId) {
+      formOptions.hideRequiredMark = true
+      formOptions.disabled = true
+      console.log(12)
+    } else {
+      formOptions.hideRequiredMark = false
+      formOptions.disabled = false
+    }
+  }
+)
+
 const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef)
 
+// 获取产品模型库列表
+const getModelTemplateList = async () => {
+  const { data } = await ModelController.modelTemplate({
+    page: 1,
+    pageSize: 200
+  })
+  state.modelTemplateList = data
+}
+
 // 获取统计
 const getModelCount = async () => {
   const { data } = await ModelController.count()
@@ -198,12 +247,18 @@ const change = ({ current }) => {
   console.log('page:', current)
 }
 
-const ok = () => {
-  validate().then(async () => {
+const ok = async () => {
+  if (modelRef.modelTemplateId) {
     await opraModel()
     state.visible = false
     getModel()
-  })
+  } else {
+    validate().then(async () => {
+      await opraModel()
+      state.visible = false
+      getModel()
+    })
+  }
 }
 
 const goDetailPage = (id: string) => {
@@ -221,8 +276,6 @@ const openModel = (opraState: 'add' | 'update') => {
 }
 
 const opraModel = async () => {
-  console.log('opraModel')
-
   if (state.opraState === 'add') {
     await ModelController.post(modelRef)
   }
@@ -244,6 +297,7 @@ onMounted(async () => {
   getModel()
   state.transport = await CommonController.getTransport()
   getModelCount()
+  getModelTemplateList()
 })
 </script>
 

src/pages/Iot/model/models.vue

@@ -23,17 +23,15 @@
         <template v-if="column.key === 'updateAt'" >
           {{dayjs(record.updateAt).format('YYYY/MM/DD HH:MM:ss')}}
         </template>
+        <template v-if="column.key === 'transportType'" >
+          <a-tag  >{{record.transportType}}</a-tag>
+        </template>
+        <template v-if="column.key === 'payloadType'" >
+          <a-tag  color="blue">{{record.payloadType}}</a-tag>
+        </template>
         <template v-if="column.key === 'action'" >
           <a-space>
             <a @click="goDetailPage(record.id)" >查看</a>
-            <a-popconfirm
-                  title="确实要删除吗？"
-                  ok-text="确定"
-                  cancel-text="取消"
-                  @confirm="confirmDel(record.id)"
-                >
-                  <a href="#">删除</a>
-                </a-popconfirm>
           </a-space>
         </template>
       </template>
@@ -82,10 +80,20 @@ const columns = [
     key: 'id'
   },
   {
-    title: '模型名称',
+    title: '名称',
     dataIndex: 'templateLabel',
     key: 'templateLabel'
   },
+  {
+    title: '传输协议',
+    dataIndex: 'transportType',
+    key: 'transportType'
+  },
+  {
+    title: '数据格式',
+    dataIndex: 'payloadType',
+    key: 'payloadType'
+  },
   {
     title: '创建时间',
     dataIndex: 'createAt',

src/type/iot.d.ts

@@ -11,7 +11,8 @@ declare namespace IOT {
       } & Partial<COMMON.QueryParams>
 
       interface Model {
-        id: string
+        id?: string
+        modelTemplateId?: string
         modelLabel: string,
         transportType: string,
         payloadType: string,