src/api/device.ts

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

src/api/product.ts

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

src/router/routes/modules/iot.ts

@@ -13,6 +13,17 @@ 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',
@@ -24,17 +35,6 @@ 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,77 +20,7 @@
     @cancel="handleCancel"
   >
     <template #title>{{ modalTitle }}</template>
-    <a-form
+    <DynamicForm :prem="formSystem" />
-      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>
@@ -106,8 +36,10 @@
   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: {
@@ -115,6 +47,8 @@
     },
     isCreate: Boolean,
   });
+  // 部门树模态框状态
+  const deptVisible=ref(false);
   const emit = defineEmits(['refresh']);
   const modalTitle = computed(() => {
     return props.isCreate ? '创建设备' : '编辑设备';
@@ -126,36 +60,136 @@
   const formData = ref<any>({
     ...props.prem,
   });
+  const messageStore = useMessageStore();
   const editorRef = shallowRef()
-  const options = ref(['Option1', 'Option2', 'Option3']);
+  const selectedIds= ref<string[]>([]);
-  const loading = ref(false);
+  const columns = computed<any[]>(()=>[
+    {
+      title: '操作',
+      dataIndex: 'key',
+      slotName: 'key',
+    },
+    {
+      title: '用户',
+      dataIndex: 'title',
+    },
+  ])
 
-  // 搜索
+  const formSystem = ref(
-  const handleSearch = (value: any) => {
+    {
-    if (value) {
+      productId:{
-      loading.value = true;
+        label: '产品ID',
-      window.setTimeout(() => {
+        component: 'input',
-        options.value = [`${value}-Option1`, `${value}-Option2`, `${value}-Option3`]
+        type:'text'
-        loading.value = false;
+      },
-      }, 2000)
+      name:{
-    } else {
+        label: '设备名称',
-      options.value = []
+        component: 'input',
+        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 createDevice(formData.value);
+        const res = await messageStore.createMessage(formData.value);
         if (res.status === 200) {
           Message.success({
             content: '新建成功',
@@ -165,17 +199,6 @@
           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);
-        }
       }
     }
   };
@@ -193,9 +216,33 @@
     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,27 +172,6 @@
             <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
@@ -219,9 +198,8 @@
   import useTableOption from '@/hooks/table-option';
   import { Message } from '@arco-design/web-vue';
   import { useRouter } from 'vue-router';
-  import { deleteDevice, DeviceRecord, queryDeviceList } from '@/api/device';
+  import { 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 {
@@ -344,7 +322,7 @@
 
   // 删除
   const handleDelete = async (id: number) => {
-    const res = await deleteDevice(id);
+    const res = await bulletinStore.removeBulletin(id);
     if (res.status === 200) {
       Message.success({
         content: '删除成功',

src/views/iot/product/index.vue

@@ -1,392 +0,0 @@
-<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>