perf(iot产品和设备管理模块): 实现产品和设备的新增功能

src/api/device.ts

@@ -22,6 +22,10 @@ export interface DeviceCreateRecord {
   productId: number;
 }
 
+export interface DeviceUpdateRecord extends DeviceCreateRecord {
+  id: number;
+}
+
 export interface DeviceEventRecord {
   id: number;
   clientId: string;
@@ -49,8 +53,8 @@ export function createDevice(data: DeviceCreateRecord) {
 }
 
 // 修改
-export function updateDevice(id: number, data: DeviceCreateRecord) {
+export function updateDevice(data:DeviceUpdateRecord) {
-  return axios.put(`/api/rest/device/${id}`, data);
+  return axios.put(`/api/rest/device/${data.id}`, data);
 }
 // 删除
 export function deleteDevice(id: number) {

src/api/product.ts

@@ -23,6 +23,11 @@ export interface ProductCreateRecord {
   }];
 }
 
+export interface ProductUpdateRecord extends ProductCreateRecord {
+  id: number;
+  productType: string;
+}
+
 
 // 分页查询
 export function queryProductList(data: ProductRecord) {
@@ -52,8 +57,8 @@ export function createProduct(data: ProductCreateRecord) {
 }
 
 // 修改
-export function updateProduct(id: number, data: ProductCreateRecord){
+export function updateProduct(data: ProductUpdateRecord){
-  return axios.patch(`/api/rest/product/${id}`, data);
+  return axios.patch(`/api/rest/product/${data.id}`, data);
 }
 
 // 删除

src/router/routes/modules/iot.ts

@@ -13,17 +13,6 @@ const IOT: AppRouteRecordRaw = {
     order: 1,
   },
   children: [
-    {
-      path: 'device',
-      name: 'Device',
-      component: () => import('@/views/iot/device/index.vue'),
-      meta: {
-        // locale: 'menu.system.role',
-        title: '设备管理',
-        requiresAuth: true,
-        permissions: ['*'],
-      },
-    },
     {
       path: 'product',
       name: 'Product',
@@ -35,6 +24,17 @@ const IOT: AppRouteRecordRaw = {
         permissions: ['*'],
       },
     },
+    {
+      path: 'device',
+      name: 'Device',
+      component: () => import('@/views/iot/device/index.vue'),
+      meta: {
+        // locale: 'menu.system.role',
+        title: '设备管理',
+        requiresAuth: true,
+        permissions: ['*'],
+      },
+    }
   ],
 };
 

src/views/iot/device/components/device-edit.vue

@@ -20,7 +20,77 @@
     @cancel="handleCancel"
   >
     <template #title>{{ modalTitle }}</template>
-    <DynamicForm :prem="formSystem" />
+    <a-form
+      ref="CreateRef"
+      :model="formData"
+      :style="{ width: '650px' }"
+    >
+      <!-- 产品id -->
+      <a-form-item
+        field="productId"
+        label="产品名称"
+        :rules="[{ required: true, message: '产品名称不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-select
+          v-model="formData.productId"
+          placeholder="请选择产品名称"
+          :loading="loading"
+          :filter-option="false"
+          @search="handleSearch"
+        >
+          <a-option v-for="item of options" :key="item.id" :value="item">{{item}}</a-option>
+        </a-select>
+      </a-form-item>
+      <!-- 设备名称 -->
+      <a-form-item
+        field="name"
+        label="设备名称"
+        :rules="[{ required: true, message: '设备名称不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-model="formData.name"
+          placeholder='请输入设备名称'
+        />
+      </a-form-item>
+      <!-- 硬件版本 -->
+      <a-form-item
+        field="hardwareVersion"
+        label="硬件版本"
+        :rules="[{ required: true, message: '硬件版本不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-model="formData.hardwareVersion"
+          placeholder='请输入硬件版本'
+        />
+      </a-form-item>
+      <!-- 固件版本 -->
+      <a-form-item
+        field="firmwareVersion"
+        label="固件版本"
+        :rules="[{ required: true, message: '固件版本不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-model="formData.firmwareVersion"
+          placeholder='请输入固件版本'
+        />
+      </a-form-item>
+      <!-- 扩展属性 -->
+      <a-form-item
+        field="extendParams"
+        label="扩展属性"
+        :rules="[{ required: true, message: '扩展属性不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-model="formData.extendParams"
+          placeholder='请输入扩展属性'
+        />
+      </a-form-item>
+    </a-form>
 
     <template #footer>
       <a-button class="editor-button"  @click="handleCancel">取消</a-button>
@@ -36,10 +106,8 @@
   import { FormInstance } from '@arco-design/web-vue/es/form';
   import { Message } from '@arco-design/web-vue';
   import { useMessageStore } from '@/store';
-  import DynamicForm from '@/components/dynamic-form/index.vue';
-  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
-  import { IEditorConfig } from '@wangeditor/editor'
   import '@wangeditor/editor/dist/css/style.css'
+  import { createDevice, updateDevice } from '@/api/device';
 
   const props = defineProps({
     prem: {
@@ -47,8 +115,6 @@
     },
     isCreate: Boolean,
   });
-  // 部门树模态框状态
-  const deptVisible=ref(false);
   const emit = defineEmits(['refresh']);
   const modalTitle = computed(() => {
     return props.isCreate ? '创建设备' : '编辑设备';
@@ -60,136 +126,36 @@
   const formData = ref<any>({
     ...props.prem,
   });
-  const messageStore = useMessageStore();
   const editorRef = shallowRef()
-  const selectedIds= ref<string[]>([]);
+  const options = ref(['Option1', 'Option2', 'Option3']);
-  const columns = computed<any[]>(()=>[
+  const loading = ref(false);
-    {
-      title: '操作',
-      dataIndex: 'key',
-      slotName: 'key',
-    },
-    {
-      title: '用户',
-      dataIndex: 'title',
-    },
-  ])
 
-  const formSystem = ref(
+  // 搜索
-    {
+  const handleSearch = (value: any) => {
-      productId:{
+    if (value) {
-        label: '产品ID',
+      loading.value = true;
-        component: 'input',
+      window.setTimeout(() => {
-        type:'text'
+        options.value = [`${value}-Option1`, `${value}-Option2`, `${value}-Option3`]
-      },
+        loading.value = false;
-      name:{
+      }, 2000)
-        label: '设备名称',
+    } else {
-        component: 'input',
+      options.value = []
-        type:'text'
-      },
-      hardwareVersion:{
-        label: '硬件版本',
-        component: 'input',
-        type:'text'
-      },
-      firmwareVersion:{
-        label: '固件版本',
-        component: 'input',
-        type:'text'
-      },
-      extendParams:{
-        label: '扩展属性',
-        component: 'input',
-        type:'text'
-      },
-      properties:{
-        label: '设备物模型属性',
-        component: 'input',
-        type:'text'
-      },
-    },
-  );
-  const deptTreeData = reactive([
-    {
-      key: '1',
-      title: '总部门',
-      children: [
-        {
-          key: '2',
-          title: '部门1',
-          members: [
-            { key: '101', title: '成员1' },
-            { key: '102', title: '成员2' }
-          ]
-        },
-        {
-          key: '3',
-          title: '部门2',
-          members: [
-            { key: '201', title: '成员3' },
-            { key: '202', title: '成员4' }
-          ]
-        },
-        {
-          key: '4',
-          title: '部门3',
-          members: [
-            { key: '203', title: '成员5' },
-            { key: '204', title: '成员6' }
-          ]
-        }
-      ]
     }
-  ]);
+  };
-  const selectedDepartmentMembers: any = ref([]);
-  const renderData = ref<any[]>([]);
-  // 部门树查询
-  const queryDeptTree= async ()=>{
-    deptVisible.value = true;
-  }
-
-  // 广度优先遍历树，获取选中的成员
-  const getSelectedMembers = (treeData: any[], selectedKeys: string[]) => {
-    const queue = [...treeData];
-    const selectedMembers: any[] = [];
-    while (queue.length > 0) {
-      const node = queue.shift()!;
-      if (selectedKeys.includes(node.key)) {
-        if (node.members) {
-          selectedMembers.push(...node.members);
-        }
-      }
-      if (node.children) {
-        queue.push(...node.children);
-      }
-    }
-    return selectedMembers;
-  }
 
   // 组件被点击
   const handleClick = () => {
     setVisible(true);
   };
 
-  const editorConfig: Partial<IEditorConfig> = { placeholder: '请输入内容...',MENU_CONF:{
-      // 隐藏菜单
-      hide: ['code', 'table', 'emoticon', 'uploadImage', 'video', 'todo', 'specialChar'],
-      // 配置上传图片
-      uploadImage: {
-        base64LimitSize: 1024 * 1024,
-        // server: '/api/rest/bulletin/1/add',
-      }
-    }
-  }
   // 提交
   const handleSubmit = async () => {
     const valid = await CreateRef.value?.validate();
     if (!valid) {
-      formData.value.permissionIds = checkKeys.value;
       // 新增
       if (props.isCreate) {
         // formData.value.username = formData.value.email;
-        const res = await messageStore.createMessage(formData.value);
+        const res = await createDevice(formData.value);
         if (res.status === 200) {
           Message.success({
             content: '新建成功',
@@ -199,6 +165,17 @@
           setVisible(false);
         }
         CreateRef.value?.resetFields();
+      } else {
+        // 编辑
+        const res = await updateDevice(formData.value);
+        if (res.status === 200) {
+          Message.success({
+            content: '修改成功',
+            duration: 5 * 1000,
+          });
+          emit('refresh');
+          setVisible(false);
+        }
       }
     }
   };
@@ -216,33 +193,9 @@
     setVisible(false);
   };
 
-  // 设备模态框提交
-  const deptTreeSubmit = () => {
-    deptVisible.value = false;
-    formData.value.userIds = selectedIds.value;
-    console.log(formData.value.userIds);
-  };
 </script>
 
 <style scoped>
-  .fullscreen-toolbar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 50px; /* 根据需要调整高度 */
-    z-index: 999;
-    background-color: white;
-  }
-  .fullscreen-editor {
-    position: fixed;
-    top: 50px; /* 根据 toolbar 的高度调整 */
-    left: 0;
-    width: 100%;
-    height: calc(100% - 50px); /* 减去 toolbar 的高度 */
-    z-index: 999;
-    background-color: white;
-  }
   .editor-button{
     position: static
   }

src/views/iot/device/index.vue

@@ -172,6 +172,27 @@
             <template #icon><icon-list /></template>
             详情
           </a-button>
+          <DeviceEdit
+            ref="editUserRef"
+            :prem="record"
+            :is-create="false"
+            @refresh="fetchData"
+          />
+          <a-popconfirm
+            content='确认删除此设备？'
+            type="error"
+            @ok="handleDelete(record.id)"
+          >
+            <a-button
+              type="outline"
+              size="small"
+              status="danger"
+              style="padding: 7px;margin-right: 10px"
+            >
+              <template #icon><icon-delete /></template>
+              删除
+            </a-button>
+          </a-popconfirm>
         </template>
       </a-table>
       <a-pagination
@@ -198,8 +219,9 @@
   import useTableOption from '@/hooks/table-option';
   import { Message } from '@arco-design/web-vue';
   import { useRouter } from 'vue-router';
-  import { DeviceRecord, queryDeviceList } from '@/api/device';
+  import { deleteDevice, DeviceRecord, queryDeviceList } from '@/api/device';
   import DeviceEdit from '@/views/iot/device/components/device-edit.vue';
+  import BulletinEdit from '@/views/system/bulletin/components/bulletin-edit.vue';
 
   const generateFormModel = () => {
     return {
@@ -322,7 +344,7 @@
 
   // 删除
   const handleDelete = async (id: number) => {
-    const res = await bulletinStore.removeBulletin(id);
+    const res = await deleteDevice(id);
     if (res.status === 200) {
       Message.success({
         content: '删除成功',

src/views/iot/product/index.vue

@@ -0,0 +1,392 @@
+<template>
+  <div class="container">
+    <Breadcrumb :items="['物联网管理', '产品管理']" />
+    <a-card class="general-card" title=" ">
+      <a-row>
+        <a-col :flex="1">
+          <a-form
+            :model="formModel"
+            :label-col-props="{ span: 6 }"
+            :wrapper-col-props="{ span: 18 }"
+            label-align="right"
+          >
+            <a-row :gutter="18">
+              <a-col :span="9">
+                <a-form-item
+                  field="name"
+                  label='名称'
+                >
+                  <a-input
+                    v-model="formModel.name"
+                    style="width: 360px"
+                    placeholder='请输入设备名称'
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="10">
+                <a-form-item field="type" label='分类'>
+                  <a-input
+                    v-model="formModel.type"
+                    style="width: 360px"
+                    placeholder='请输入产品分类'
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="9">
+                <a-form-item
+                  field="links"
+                  label='接入'
+                >
+                  <a-select
+                    v-model="formModel.links"
+                    style="width: 360px"
+                    placeholder='请选择接入方式'
+                    :options="statusOptions"
+                  />
+                </a-form-item>
+              </a-col>
+
+
+
+            </a-row>
+          </a-form>
+        </a-col>
+        <a-divider style="height: 84px" direction="vertical" />
+        <a-col :flex="'86px'" style="text-align: right">
+          <a-space direction="vertical" :size="18">
+            <a-button type="primary" @click="search">
+              <template #icon>
+                <icon-search />
+              </template>
+              查询
+            </a-button>
+            <a-button @click="reset">
+              <template #icon>
+                <icon-refresh />
+              </template>
+              重置
+            </a-button>
+          </a-space>
+        </a-col>
+      </a-row>
+      <a-divider style="margin-top: 0" />
+      <a-row>
+        <a-col :span="12">
+          <a-space>
+            <ProductEdit ref="createUserRef" :is-create="true" @refresh="search"/>
+          </a-space>
+        </a-col>
+        <a-col
+          :span="12"
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: end;
+            padding-bottom: 20px;
+          "
+        >
+          <a-tooltip content='刷新'>
+            <div class="action-icon" @click="search">
+              <icon-refresh size="18" />
+            </div>
+          </a-tooltip>
+
+          <a-dropdown @select="handleSelectDensity">
+            <a-tooltip content='密度'>
+              <div class="action-icon"><icon-line-height size="18" /></div>
+            </a-tooltip>
+            <template #content>
+              <a-doption
+                v-for="item in densityList"
+                :key="item.value"
+                :value="item.value"
+                :class="{ active: item.value === size }"
+              >
+                <span>{{ item.name }}</span>
+              </a-doption>
+            </template>
+          </a-dropdown>
+
+          <a-tooltip content='列设置'>
+            <a-popover
+              trigger="click"
+              position="bl"
+              @popup-visible-change="popupVisibleChange"
+            >
+              <div class="action-icon"><icon-settings size="18" /></div>
+              <template #content>
+                <div id="tableSetting">
+                  <div
+                    v-for="(item, index) in showColumns"
+                    :key="item.dataIndex"
+                    class="setting"
+                  >
+                    <div style="margin-right: 4px; cursor: move">
+                      <icon-drag-arrow />
+                    </div>
+                    <div>
+                      <a-checkbox
+                        v-model="item.checked"
+                        @change="
+                          handleChange($event, item as TableColumnData, index)
+                        "
+                      >
+                      </a-checkbox>
+                    </div>
+                    <div class="title">
+                      {{ item.title === '#' ? '序列号' : item.title }}
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </a-popover>
+          </a-tooltip>
+        </a-col>
+      </a-row>
+
+      <a-table
+        row-key="id"
+        :loading="loading"
+        :pagination="false"
+        :columns="(cloneColumns as TableColumnData[])"
+        :data="renderData"
+        :bordered="false"
+        :size="size"
+        style="margin-bottom: 40px"
+        @page-change="onPageChange"
+      >
+        <template #id="{ record }">
+          <span>{{ record.id }}</span>
+        </template>
+        <template #online="{ record }">
+          {{ record.online == true? '是' : '否' }}
+        </template>
+        <template #operations="{ record }">
+          <a-button
+            type="outline"
+            size="small"
+            status="success"
+            style="padding: 7px; margin-right: 10px"
+            @click="openDetail(record.id)"
+          >
+            <template #icon><icon-list /></template>
+            详情
+          </a-button>
+          <ProductEdit
+            ref="editUserRef"
+            :prem="record"
+            :is-create="false"
+            @refresh="fetchData"
+          />
+          <a-popconfirm
+            content='确认删除此产品？'
+            type="error"
+            @ok="handleDelete(record.id)"
+          >
+            <a-button
+              type="outline"
+              size="small"
+              status="danger"
+              style="padding: 7px;margin-right: 10px"
+            >
+              <template #icon><icon-delete /></template>
+              删除
+            </a-button>
+          </a-popconfirm>
+        </template>
+      </a-table>
+      <a-pagination
+        style="float: right; position: relative; right: 1px; bottom: 25px"
+        :total="pagination.total"
+        :size="size"
+        show-total
+        show-jumper
+        show-page-size
+        @page-size-change="onSizeChange"
+        @change="onPageChange"
+      />
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, onMounted, ref, watch } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import usePagination from '@/hooks/pagination';
+  import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
+  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+  import useTableOption from '@/hooks/table-option';
+  import { Message } from '@arco-design/web-vue';
+  import { useRouter } from 'vue-router';
+  import { deleteProduct, ProductRecord, queryProductList } from '@/api/product';
+  import ProductEdit from '@/views/iot/product/components/product-edit.vue';
+
+  const generateFormModel = () => {
+    return {
+      name:'',
+      type:'',
+      links:'',
+    };
+  };
+
+  const { loading, setLoading } = useLoading(true);
+  const { pagination,setPagination } = usePagination();
+  const renderData = ref<[]>([]);
+  const formModel = ref(generateFormModel());
+  const router = useRouter();
+  const {
+    cloneColumns,
+    showColumns,
+    densityList,
+    size,
+    handleSelectDensity,
+    handleChange,
+    popupVisibleChange,
+    deepClone,
+  } = useTableOption();
+
+
+  const columns = computed<TableColumnData[]>(() => [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      slotName: 'id',
+      width: 60,
+    },
+    {
+      title: '名称',
+      dataIndex: 'name',
+    },
+    {
+      title: '分类',
+      dataIndex: 'productType',
+    },
+    {
+      title: '接入方式',
+      dataIndex: 'link',
+    },
+    {
+      title: '操作',
+      dataIndex: 'operations',
+      slotName: 'operations',
+    },
+  ]);
+  const statusOptions = computed<SelectOptionData[]>(() => [
+    {
+      label: 'TCP',
+      value: 'TCP',
+    },
+    {
+      label: 'HTTP',
+      value: 'HTTP',
+    },
+    {
+      label: 'MQTT',
+      value: 'MQTT',
+    },
+  ]);
+
+  // 获取设备列表
+  const fetchData = async (
+    params = { size: 10, current: 1 }
+  ) => {
+    setLoading(true);
+    try {
+      const res: any = await queryProductList(params);
+      renderData.value = res.data.records;
+      setPagination(res.data);
+    } catch (err) {
+      // you can report use errorHandler or other
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 查询
+  const search = () => {
+    fetchData({
+      ...pagination,
+      ...formModel.value,
+    } as unknown as ProductRecord);
+  };
+
+  // 分页发生改变
+  const onPageChange = (current: number) => {
+    pagination.page = current;
+    pagination.current = current;
+    search();
+  };
+
+  // 数据条数改变
+  const onSizeChange = (Size: number) => {
+    pagination.size = Size;
+    search();
+  };
+
+
+  // 重置
+  const reset = () => {
+    formModel.value = generateFormModel();
+  };
+
+  // 打开详情
+  function openDetail(id:number): void{
+    const url = router.resolve({
+      name: 'Detail',
+      params: {id}
+    }).href;
+    router.push(url);
+  };
+
+  // 删除
+  const handleDelete = async (id: number) => {
+    const res = await deleteProduct(id);
+    if (res.status === 200) {
+      Message.success({
+        content: '删除成功',
+        duration: 5 * 1000,
+      });
+      search();
+    }
+  };
+  onMounted(() => {
+    search();
+  });
+  watch(() => columns.value, deepClone, { deep: true, immediate: true });
+</script>
+
+
+<style scoped lang="less">
+  .container {
+    padding: 0 20px 20px 20px;
+  }
+
+  :deep(.arco-table-th) {
+    &:last-child {
+      .arco-table-th-item-title {
+        margin-left: 16px;
+      }
+    }
+  }
+
+  .action-icon {
+    margin-left: 12px;
+    cursor: pointer;
+  }
+
+  .active {
+    color: #0960bd;
+    background-color: #e3f4fc;
+  }
+
+  .setting {
+    display: flex;
+    align-items: center;
+    width: 200px;
+
+    .title {
+      margin-left: 12px;
+      cursor: pointer;
+    }
+  }
+</style>