feat: model list

src/api/iot/model.ts

@@ -8,7 +8,7 @@ import request from '@/service/request'
  * 由“request”函数返回，该函数使用提供的“params”作为查询参数向“/model/page”端点发出 GET 请求。
  */
 export const getModel = (params: IOT.API.MODEL.QueryPamars) => {
-  return request<IOT.API.MODEL.Model[]>({
+  return request<IOT.API.MODEL.ModelDot[]>({
     url: '/model/page',
     method: 'GET',
     params
@@ -27,3 +27,11 @@ export const delModel = (id: string) => {
     method: 'DELETE'
   })
 }
+
+export const addModel = (data: IOT.API.MODEL.Model) => {
+  return request<string>({
+    url: '/model',
+    method: 'POST',
+    data
+  })
+}

src/components/FormPro/index.vue

@@ -1,9 +1,8 @@
 <template>
   <a-form
-
     autocomplete="off"
   >
-    <!-- <a-form-item
+    <a-form-item
       v-for="item in modelRef"
       :key="item.id"
       :label="item.label"
@@ -11,23 +10,22 @@
       v-bind="validateInfos[item.key]"
     >
       <a-input v-model:value="item[item.key]"  />
-    </a-form-item> -->
+    </a-form-item>
 
-    <a-form-item label="测试title" v-bind="validateInfos.modelLabel">
+    <!-- <a-form-item label="测试title" v-bind="validateInfos.modelLabel">
       <a-input v-model:value="modelRef.modelLabel"  />
-    </a-form-item>
+    </a-form-item> -->
   </a-form>
 </template>
 
 <script lang='ts' setup >
-import { reactive, toRaw } from 'vue'
+import { onMounted, reactive, toRaw, computed } from 'vue'
 import { Form } from 'ant-design-vue'
 import { useId } from '@/hooks'
 
 /**
  * 将submit的提交抛出去
  */
-
 export interface FormItemProps {
   rules?: {required: boolean, message: string} | boolean,
   type: COMMON.COMPONENTS.ComType,
@@ -66,21 +64,19 @@ const props: FormProProps = {
   }]
 }
 
-const modelRef = reactive<Record<string, any>>({
-  modelLabel: ''
-})
+const modelRef = reactive<Record<string, any>>({})
 
 const rulesRef = reactive<Record<string, any>>({})
 
 props.formProps.forEach(item => {
   rulesRef[item.key] = [item.rules]
-
-  // modelRef.push({ ...item, [item.key]: item.value, id: useId, key: item.key })
+  modelRef[item.key] = item.value
 })
 
 const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
   onValidate: (...args) => console.log(...args)
 })
+
 console.log(rulesRef)
 console.log('validateInfos:', validateInfos)
 

src/components/ModalPro/index.vue

@@ -35,6 +35,7 @@ export interface ModalProPorps extends ModalProps {
 
 export interface ModalOkProps {
   confirmed: () => void
+  confirmStart: () => void
 }
 
 const emit = defineEmits<{
@@ -53,8 +54,8 @@ const state = reactive<Partial<StateProps>>({})
 const close = () => emit('close')
 
 const handleOk = () => {
-  state.confirmLoading = true
   emit('ok', {
+    confirmStart: () => state.confirmLoading = true,
     confirmed: () => state.confirmLoading = false
   })
 }

src/components/TablePro/index.vue

@@ -118,8 +118,13 @@ const state = reactive({
   opraState: 'add'
 })
 
-const ok = () => {
+const ok = ({
+  confirmStart,
+  confirmed
+}) => {
+  confirmStart()
   formProRef.value.onSubmit()
+  confirmed()
 }
 
 const handleTableChange = (pag: { pageSize: number; current: number }) => {

src/controller/iot/model.ts

@@ -1,4 +1,4 @@
-import { delModel, getModel } from '@/api/iot/model'
+import { addModel, delModel, getModel } from '@/api/iot/model'
 import { message } from 'ant-design-vue'
 export class ModelController {
   static list () {
@@ -6,12 +6,12 @@ export class ModelController {
   }
 
   static async page (params: IOT.API.MODEL.QueryPamars) {
-    const { data } = await getModel(params)
-    return data
+    return await getModel(params)
   }
 
-  static post () {
-
+  static async post (data: IOT.API.MODEL.Model) {
+    await addModel(data)
+    message.success('新增成功')
   }
 
   static put () {

src/pages/Iot/model/index.vue

@@ -1,44 +1,99 @@
 <template>
+
   <a-card>
-    <table-pro
-      modalTitle="模型"
-      :request="ModelController.page"
-      :del="ModelController.del"
-      :params="{
-        page: 1,
-        pageSize: 10,
-        modelLabel: 1
-      }"
+    <a-row justify="space-between" >
+      <a-col>
+        <a-input-search
+          v-model:value="state.queryParams.modelLabel"
+          placeholder="请输入产品名称"
+          enter-button
+          @search="getModel"
+        />
+      </a-col>
+      <a-col>
+        <a-space>
+          <a-button type="primary" @click="openModel('add')" >
+            新增
+            <template #icon>
+              <plus-outlined />
+            </template>
+          </a-button>
+        </a-space>
+      </a-col>
+    </a-row>
+    <a-table
+      style="margin-top: 10px;"
       :columns="columns"
-      :pro-able="['add']"
-    />
+      :dataSource="state.dataSource"
+      :pagination="state.queryParams"
+      :loading="state.loading"
+    >
+      <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'action'">
+            <a-space>
+              <a href="#">查看</a>
+                <a-popconfirm
+                  title="确实要删除吗？"
+                  ok-text="确定"
+                  cancel-text="取消"
+                  @confirm="confirmDel(record.id)"
+                >
+                  <a href="#">删除</a>
+                </a-popconfirm>
+            </a-space>
+          </template>
+        </template>
+    </a-table>
   </a-card>
+
+  <a-modal
+    :title="modalTitle"
+    :visible="state.visible"
+    ok-text="确定"
+    cancel-text="取消"
+    @cancel="closeModel"
+    @ok="ok"
+  >
+   <a-form :label-col="{span: 4}" :wrapper-col="{span: 14}">
+     <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">
+      <a-select 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-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-form-item>
+    <a-form-item label="厂商描述">
+      <a-textarea  v-model:value="modelRef.modelDescription" />
+    </a-form-item>
+   </a-form>
+  </a-modal>
 </template>
 
 <script lang="ts" setup >
 import { CommonController, ModelController } from '@/controller/index'
-import { AppTsx } from '@/components/index'
+import { onMounted, reactive } from 'vue'
+import { computed } from '@vue/reactivity'
+import { Form } from 'ant-design-vue'
+
 const columns = [
   {
     title: '模型名称',
     dataIndex: 'modelLabel',
-    key: 'modelLabel',
-    formItemProps: {
-      rules: {
-        required: true,
-        message: '此项为必填项'
-      },
-      request: async () => {
-        return await CommonController.getTransport()
-      },
-      type: '',
-      key: ''
-    }
+    key: 'modelLabel'
   },
   {
     title: '传输协议',
-    dataIndex: 'address',
-    key: 'address'
+    dataIndex: 'transportType',
+    key: 'transportType'
   },
   {
     title: '数据格式',
@@ -57,21 +112,89 @@ const columns = [
   },
   {
     title: '操作',
-    key: 'action',
-    list: [
-      {
-        name: '复制',
-        use: 'copy',
-        bindKey: 'address'
-      },
-      {
-        name: '删除',
-        use: 'del',
-        bindKey: 'id'
-      }
-    ]
+    key: 'action'
   }
 ]
+
+const state = reactive<{
+  dataSource: IOT.API.MODEL.ModelDot[],
+  [key: string]: any
+}>({
+  loading: false,
+  opraState: 'add',
+  visible: false,
+  dataSource: [],
+  queryParams: {
+    page: 1,
+    pageSize: 10,
+    total: 0,
+    modelLabel: ''
+  },
+  payloadType: ['JSON', '二进制流']
+})
+
+const modalTitle = computed(() => state.opraState === 'add' ? '新增产品' : '编辑产品')
+
+const useForm = Form.useForm
+
+const modelRef = reactive({
+  modelLabel: '',
+  transportType: '',
+  payloadType: '',
+  deviceType: '',
+  modelDescription: ''
+})
+
+const rulesRef = reactive({
+  modelLabel: [{ required: true, message: '请填写标题' }],
+  transportType: [{ required: true, message: '请选择协议' }],
+  payloadType: [{ required: true, message: '请填写数据格式' }]
+})
+
+const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef)
+
+const ok = () => {
+  validate().then(async () => {
+    await opraModel()
+    state.visible = false
+    getModel()
+  })
+}
+
+const confirmDel = async (id: string) => {
+  await ModelController.del(id)
+  getModel()
+}
+
+const openModel = (opraState: 'add' | 'update') => {
+  state.opraState = opraState
+  state.visible = true
+}
+
+const opraModel = async () => {
+  console.log('opraModel')
+
+  if (state.opraState === 'add') {
+    await ModelController.post(modelRef)
+  }
+}
+
+const closeModel = () => {
+  state.visible = false
+}
+
+const getModel = async () => {
+  state.loading = true
+  const { data, sum } = await ModelController.page(state.queryParams)
+  state.loading = false
+  state.dataSource = data
+  state.queryParams.total = sum
+}
+
+onMounted(async () => {
+  getModel()
+  state.transport = await CommonController.getTransport()
+})
 </script>
 
 <style></style>

src/type/iot.d.ts

@@ -12,15 +12,18 @@ declare namespace IOT {
       } & Partial<COMMON.QueryParams>
 
       interface Model {
-        id: string,
-        createAt: string,
-        updateAt: string,
-        deleted: boolean,
         modelLabel: string,
         transportType: string,
         payloadType: string,
         deviceType: string,
         modelDescription: string,
+      }
+
+      interface ModelDot extends Model {
+        id: string,
+        createAt: string,
+        updateAt: string,
+        deleted: boolean,
         tenantId: string
       }
     }

src/type/service.d.ts

@@ -2,6 +2,7 @@ declare namespace SERVICE {
   type Response<T> = {
     code: number,
     msg: string,
-    data: T
+    data: T,
+    sum: number
   }
 }