feat: 模型命令 crud

src/api/iot/model.ts

@@ -88,7 +88,7 @@ export const addModelAttribute = (data: IOT.API.MODELATTR.ModelAttr & {modelId:
  * @param data - `data` 参数是一个包含模型属性更新值的对象。它应该具有以下属性：
  * @returns `updateModelAttribute` 函数返回一个解析为字符串的 Promise。
  */
-export const updateModelAttribute = (data: IOT.API.MODELATTR.ModelAttr & {modelId: string} & {id: string}) => {
+export const updateModelAttribute = (data: IOT.API.MODELATTR.ModelAttr & {modelId: string}) => {
   return request<string>({
     url: '/modelAttribute',
     method: 'PUT',
@@ -117,7 +117,7 @@ export const delModelAttribute = (id: string) => {
  * 端点发出 GET 请求。
  */
 export const getModelCmd = (params: any) => {
-  return request<IOT.API.CMD.CMD[]>({
+  return request<IOT.API.CMD.Cmd[]>({
     url: '/modelCmd/page',
     method: 'GET',
     params

src/controller/iot/index.ts

@@ -0,0 +1,3 @@
+export { ModelController } from './model'
+export { ModelAttrController } from './modelAttr'
+export { ModelCmdController } from './modelCmd'

src/controller/iot/modelAttr.ts

@@ -12,7 +12,7 @@ export class ModelAttrController {
     message.success('新增成功')
   }
 
-  static async update (data: IOT.API.MODELATTR.ModelAttr & {modelId: string, id: string}) {
+  static async update (data: IOT.API.MODELATTR.ModelAttr & {modelId: string}) {
     await updateModelAttribute(data)
     message.success('修改成功')
   }

src/controller/iot/modelCmd.ts

@@ -2,17 +2,17 @@
 import { addModelCmd, getModelCmd, updateModelCmd, delModelCmd } from '@/api/iot/model'
 import { message } from 'ant-design-vue'
 
-export class ModelAttrCmd {
+export class ModelCmdController {
   static async page (params: any) {
     return await getModelCmd(params)
   }
 
-  static async post (data: IOT.API.MODELATTR.ModelAttr & {modelId: string}) {
+  static async post (data: IOT.API.CMD.Cmd) {
     await addModelCmd(data)
     message.success('新增成功')
   }
 
-  static async update (data: IOT.API.MODELATTR.ModelAttr & {modelId: string, id: string}) {
+  static async update (data: IOT.API.CMD.Cmd) {
     await updateModelCmd(data)
     message.success('修改成功')
   }

src/pages/Iot/model/components/modelDefine.vue

@@ -16,44 +16,57 @@
   >
     <template #bodyCell="{column, record}">
       <template v-if="column.key === 'action'">
-      </template>
             <a-space>
-                <a href="#">修改</a>
+                <a @click="openModel('attrVisible', 'update', record)">修改</a>
                 <a-popconfirm
                   title="确实要删除吗？"
                   ok-text="确定"
                   cancel-text="取消"
                   @confirm="confirmDel('attr', record.id)"
                 >
-                  <a href="#">删除</a>
+                  <a>删除</a>
                 </a-popconfirm>
             </a-space>
+          </template>
     </template>
   </a-table>
 
   <!-- 模型命令 -->
+  <a-row style="margin-top: 20px;"  justify="end" >
+    <a-col  >
+      <a-space>
+        <a-button type="primary" @click="openModel('cmdVisible', 'add')" >新增命令</a-button>
+      </a-space>
+    </a-col>
+  </a-row>
   <a-table
-    style="margin-top: 10px;"
-    :columns="columnsCmd"
-    :dataSource="state.dataSourceCmd"
-    :loading="state.loadingCmd"
-    :pagination="state.queryParamsCmd"
-  >
-    <template #bodyCell="{column, record}">
-      <template v-if="column.key === 'action'">
-      </template>
-            <a-space>
-                <a href="#">修改</a>
-                <a-popconfirm
-                  title="确实要删除吗？"
-                  ok-text="确定"
-                  cancel-text="取消"
-                  @confirm="confirmDel('attr', record.id)"
-                >
-                  <a href="#">删除</a>
-            </a-popconfirm>
-     </a-space>
-    </template>
+        style="margin-top: 10px;"
+        :columns="columnsCmd"
+        :dataSource="state.dataSourceCmd"
+        :loading="state.loadingCmd"
+        :pagination="state.queryParamsCmd"
+      >
+        <template #bodyCell="{column, record}">
+          <template v-if="column.key === 'cmdParams'">
+            <span>{{ record.cmdParams.map(item => item.paramLabel).join(',')}}</span>
+          </template>
+          <template v-if="column.key === 'cmdResponses'">
+            <span>{{record.cmdResponses.map(item => item.paramLabel).join(',')}}</span>
+          </template>
+          <template v-if="column.key === 'action'">
+                <a-space>
+                    <a @click="openModel('cmdVisible', 'update', record)" >修改</a>
+                    <a-popconfirm
+                      title="确实要删除吗？"
+                      ok-text="确定"
+                      cancel-text="取消"
+                      @confirm="confirmDel('cmd', record.id)"
+                    >
+                      <a>删除</a>
+                </a-popconfirm>
+              </a-space>
+          </template>
+        </template>
   </a-table>
   <a-modal
     :title="modalTitle"
@@ -79,44 +92,139 @@
         <a-input v-model:value="attrRef.dataUnit"  />
       </a-form-item>
       <a-form-item label="计算表达式" >
-        <a-input v-model:value="attrRef.expr"  />
+        <a-input  v-model:value="attrRef.expr"  />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+
+  <a-modal
+    width="50%"
+    :title="modalTitle"
+    :visible="state.cmdVisible"
+    @cancel="state.cmdVisible = false"
+    @ok="ok('cmd')"
+    ok-text="确定"
+    cancel-text="取消"
+  >
+    <a-form :label-col="{span: 4}" :wrapper-col="{span: 18}" >
+      <a-form-item label="命令名称" v-bind="validateInfosCmd.attributeLabel" >
+        <a-input v-model:value="cmdRef.cmdLabel"  />
+      </a-form-item>
+      <a-form-item label="下发参数">
+        <a-row style="width: 100%;">
+          <a-col :span="24" ><a-button type="link" @click="openModalCmdp('request', 'add')" >+ 新增输入参数</a-button></a-col>
+          <a-col :span="24">
+            <a-table
+              :columns="columnsCmdParams"
+              :dataSource="state.dataCmdParams.requestData"
+            >
+            <template #bodyCell="{column, record}">
+              <template v-if="column.key === 'action'">
+                    <a-space>
+                        <a @click="openModalCmdp('request', 'update', record)">修改</a>
+                        <a-popconfirm
+                          title="确实要删除吗？"
+                          ok-text="确定"
+                          cancel-text="取消"
+                          @confirm="delCmdParams('request', record.id)"
+                        >
+                          <a >删除</a>
+                    </a-popconfirm>
+                  </a-space>
+              </template>
+            </template>
+          </a-table>
+          </a-col>
+        </a-row>
+      </a-form-item>
+      <a-form-item label="响应参数">
+        <a-row style="width: 100%;">
+          <a-col :span="24" ><a-button type="link" @click="openModalCmdp('response', 'add')" >+ 新增响应参数</a-button></a-col>
+          <a-col :span="24">
+            <a-table
+              :columns="columnsCmdParams"
+              :dataSource="state.dataCmdParams.responseData"
+            >
+            <template #bodyCell="{column, record}">
+              <template v-if="column.key === 'action'">
+                    <a-space>
+                        <a @click="openModalCmdp('response', 'update', record)">修改</a>
+                        <a-popconfirm
+                          title="确实要删除吗？"
+                          ok-text="确定"
+                          cancel-text="取消"
+                          @confirm="delCmdParams('response', record.id)"
+                        >
+                          <a >删除</a>
+                    </a-popconfirm>
+                  </a-space>
+              </template>
+            </template>
+          </a-table>
+          </a-col>
+        </a-row>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+
+  <a-modal
+    title="新增参数"
+    :visible="state.cmdParamsvisible"
+    @cancel="state.cmdParamsvisible = false"
+    @ok="okCmdParams"
+    ok-text="确定"
+    cancel-text="取消"
+  >
+  <a-form :label-col="{span: 4}" :wrapper-col="{span: 18}" >
+      <a-form-item label="参数名称" v-bind="validateInfosCmdP.paramLabel" >
+        <a-input placeholder="请填写参数名称" v-model:value="cmdParamsRef.paramLabel"  />
+      </a-form-item>
+      <a-form-item label="数据类型" v-bind="validateInfosCmdP.dataType" >
+        <a-select v-model:value="cmdParamsRef.dataType" >
+          <a-select-option :value="item" v-for="item in dataTypes" :key="item" >{{item}}</a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="参数描述" v-bind="validateInfosCmdP.paramLabel" >
+        <a-textarea placeholder="请填写参数描述" v-model:value="cmdParamsRef.description"  />
       </a-form-item>
     </a-form>
   </a-modal>
 </template>
 
 <script lang="ts" setup >
-import { ModelAttrController } from '@/controller/iot/modelAttr'
+import { ModelAttrController, ModelCmdController } from '@/controller/iot/index'
 import { computed } from '@vue/reactivity'
-import { ColumnProps } from 'ant-design-vue/lib/table'
-import { onMounted, reactive } from 'vue'
+import { nextTick, onMounted, reactive } from 'vue'
 import { Form } from 'ant-design-vue'
 import { useRoute } from 'vue-router'
+import { useId } from '@/hooks'
+import { Item } from 'ant-design-vue/lib/menu'
 
 const columns = [
-  {
-    title: '属性',
-    key: 'attributeKey'
-  },
   {
     title: '属性名称',
-    key: 'attributeLabel'
+    key: 'attributeLabel',
+    dataIndex: 'attributeLabel'
   },
   {
     title: '数据类型',
-    key: 'dataType'
+    key: 'dataType',
+    dataIndex: 'dataType'
   },
   {
     title: '数据单位',
-    key: 'dataUnit'
+    key: 'dataUnit',
+    dataIndex: 'dataUnit'
   },
   {
     title: '权限',
-    key: 'scope'
+    key: 'scope',
+    dataIndex: 'scope'
   },
   {
     title: '表达式',
-    key: 'expr'
+    key: 'expr',
+    dataIndex: 'expr'
   },
   {
     title: '操作',
@@ -127,28 +235,54 @@ const columns = [
 const columnsCmd = [
   {
     title: '命令名称',
-    key: 'cmdLabel'
+    key: 'cmdLabel',
+    dataIndex: 'cmdLabel'
   },
   {
     title: '下发参数',
-    key: 'cmdParams'
+    key: 'cmdParams',
+    dataIndex: 'cmdParams'
   },
   {
-    title: '下发参数',
-    key: 'cmdParams'
+    title: '响应参数',
+    key: 'cmdResponses',
+    dataIndex: 'cmdResponses'
   },
   {
     title: '操作',
     key: 'action'
   }
 ]
+
+const columnsCmdParams = [
+  {
+    title: '参数名称',
+    key: 'paramLabel',
+    dataIndex: 'paramLabel'
+  },
+  {
+    title: '数据类型',
+    key: 'dataType',
+    dataIndex: 'dataType'
+  },
+  {
+    title: '数据类型',
+    key: 'description',
+    dataIndex: 'description'
+  },
+  {
+    title: '操作',
+    key: 'action'
+  }
+]
+
 const route = useRoute()
 
 const modelId = route.query.id! as string
 
 const useForm = Form.useForm
 
-const dataTypes = ['string(字符串)', 'long(整数)', 'boolean(布尔值)', 'double(浮点数)', 'json(JSON)']
+const dataTypes = ['STRING', 'LONG', 'BOOLEAN', 'DOUBLE', 'JSON']
 
 const state = reactive<{
   dataSource: IOT.API.MODELATTR.ModelAttr[],
@@ -172,8 +306,14 @@ const state = reactive<{
   },
   attrVisible: false,
   cmdVisible: false,
+  cmdParamsvisible: false,
+  cmdParamsOpraState: 'request',
   loadingCmd: false,
-  dataSourceCmd: []
+  dataSourceCmd: [],
+  dataCmdParams: {
+    requestData: [],
+    responseData: []
+  }
 })
 
 const attrRef = reactive({
@@ -187,33 +327,134 @@ const attrRef = reactive({
   modelId: ''
 })
 
+const cmdRef = reactive({
+  cmdLabel: '',
+  cmdParams: [],
+  cmdResponses: [],
+  modelId: ''
+})
+
+const cmdParamsRef = reactive({
+  id: '',
+  paramLabel: '',
+  description: '',
+  dataType: ''
+})
+
 const { resetFields, validate: validateAttr, validateInfos } = useForm(attrRef, reactive({
   attributeLabel: [{ required: true, message: '请填写属性名称' }],
   dataType: [{ required: true, message: '请选择数据类型' }],
   dataUnit: [{ required: true, message: '请填写数据单位' }]
 }))
 
-const confirmDel = async (modalName: 'attr' | 'command', id: string) => {
-  modalName === 'attr' ? await ModelAttrController.del(id) : await ModelAttrController.del(id)
-  getModelAttr()
+const { resetFields: resetFieldsCmd, validate: validateCmd, validateInfos: validateInfosCmd } = useForm(cmdRef, {
+  cmdLabel: [{ require: true, message: '请填写模型命令' }]
+})
+
+const { resetFields: resetFieldsCmdP, validate: validateCmdP, validateInfos: validateInfosCmdP } = useForm(cmdParamsRef, {
+  paramLabel: [{ require: true, message: '请填写参数名称' }],
+  dataType: [{ require: true, message: '请选择数据类型' }]
+})
+
+const delCmdParams = (type: 'request' | 'response', id: string) => {
+  const key = type === 'request' ? 'requestData' : 'responseData'
+  const index = state.dataCmdParams[key].indexOf(id)
+  state.dataCmdParams[key].splice(index, 1)
 }
 
-const ok = (modalName: 'attr' | 'command') => {
+const openModalCmdp = (type: 'request' | 'response', opraState: 'add' | 'update', record: any = {}) => {
+  state.cmdParamsOpraState = type
+  state.cmdParamsvisible = true
+  console.log('resetFieldsCmdP:', record)
+
+  resetFieldsCmdP(record)
+}
+
+const okCmdParams = () => {
+  validateCmdP().then(() => {
+    // cmdParamsRef.id = useId()
+    console.log(cmdParamsRef)
+    const key = state.cmdParamsOpraState === 'request' ? 'requestData' : 'responseData'
+    const index = state.dataCmdParams[key].map(item => item.id).indexOf(cmdParamsRef.id)
+    if (index >= 0) {
+      state.dataCmdParams[key].splice(index, 1, { ...cmdParamsRef })
+    } else {
+      console.log({ ...cmdParamsRef, id: useId() })
+
+      state.dataCmdParams[key].push({ ...cmdParamsRef, id: useId() })
+    }
+
+    nextTick(() => {
+      resetFieldsCmdP({
+        paramLabel: '',
+        description: '',
+        dataType: ''
+      })
+    })
+
+    state.cmdParamsvisible = false
+  })
+}
+
+const confirmDel = async (modalName: 'attr' | 'cmd', id: string) => {
+  modalName === 'attr' ? await ModelAttrController.del(id) : await ModelCmdController.del(id)
+  modalName === 'attr' ? getModelAttr() : getModelCmd()
+}
+
+const ok = (modalName: 'attr' | 'cmd') => {
   if (modalName === 'attr') {
-    validateAttr().then(() => {
-      ModelAttrController.post({ ...attrRef, scope: attrRef.scope.join(''), modelId })
+    validateAttr().then(async () => {
+      state.opraState === 'add'
+        ? await ModelAttrController.post({ ...attrRef, scope: typeof attrRef.scope === 'string' ? attrRef.scope : attrRef.scope.join(''), modelId })
+        : await ModelAttrController.update({ ...attrRef, scope: typeof attrRef.scope === 'string' ? attrRef.scope : attrRef.scope.join(''), modelId })
+      state.cmdVisible = false
+      state.attrVisible = false
+      getModelAttr()
+    })
+  } else {
+    validateCmd().then(async () => {
+      cmdRef.cmdParams = state.dataCmdParams.requestData
+      cmdRef.cmdResponses = state.dataCmdParams.responseData
+      cmdRef.modelId = modelId
+      state.opraState === 'add'
+        ? await ModelCmdController.post(cmdRef)
+        : await ModelCmdController.update(cmdRef)
+      state.cmdVisible = false
+      state.attrVisible = false
+      getModelCmd()
     })
   }
 }
 
-const openModel = (key: string, opraState: 'add' | 'update') => {
+const openModel = (key: string, opraState: 'add' | 'update', record: any = {}) => {
   state[key] = true
   state.opraState = opraState
+  if (key === 'attrVisible') {
+    resetFields(record)
+  } else {
+    console.log(record)
+
+    resetFieldsCmd(record)
+    state.dataCmdParams.requestData = record.cmdParams
+    state.dataCmdParams.responseData = record.cmdResponses
+  }
+}
+
+const getModelCmd = async () => {
+  state.loadingCmd = true
+  state.dataSourceCmd = []
+  const { data, sum } = await ModelCmdController.page(state.queryParamsCmd)
+  state.loadingCmd = false
+  state.dataSourceCmd = data
+  state.queryParamsCmd.total = sum
 }
 
 const getModelAttr = async () => {
   state.loading = true
+  state.dataSource = []
   const { data, sum } = await ModelAttrController.page(state.queryParams)
+  console.log(data)
+
   state.loading = false
   state.dataSource = data
   state.queryParams.total = sum
@@ -221,7 +462,9 @@ const getModelAttr = async () => {
 
 onMounted(() => {
   state.queryParams.modelId = route.query.id
+  state.queryParamsCmd.modelId = route.query.id
   getModelAttr()
+  getModelCmd()
 })
 
 const modalTitle = computed(() => {

src/type/iot.d.ts

@@ -40,32 +40,28 @@ declare namespace IOT {
     }
 
     namespace CMD {
-      interface CMD {
+      interface Cmd {
         'cmdLabel': string,
-        'cmdParams': [
-          {
-            'paramLabel': string,
-            'dataType': string,
-            'required': boolean,
-            'dataUnit': string,
-            'minValue': any,
-            'maxValue': any,
-            'scope': string,
-            'description': string
-          }
-        ],
-        'cmdResponses': [
-          {
-            'paramLabel': string,
-            'dataType': string,
-            'required': boolean,
-            'dataUnit': string,
-            'minValue': any,
-            'maxValue': any,
-            'scope': string,
-            'description': string
-          }
-        ],
+        'cmdParams': {
+          'paramLabel': string,
+          'dataType': string,
+          'required': boolean,
+          'dataUnit': string,
+          'minValue': any,
+          'maxValue': any,
+          'scope': string,
+          'description': string
+        }[],
+        'cmdResponses': {
+          'paramLabel': string,
+          'dataType': string,
+          'required': boolean,
+          'dataUnit': string,
+          'minValue': any,
+          'maxValue': any,
+          'scope': string,
+          'description': string
+        }[],
         'modelId': string
       }
     }