Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

src/api/device/instance.ts

@@ -1,6 +1,7 @@
+import { LocalStore } from '@/utils/comm'
 import server from '@/utils/request'
-import { BASE_API_PATH } from '@/utils/variable'
+import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable'
-import { DeviceInstance } from '@/views/device/instance/typings'
+import { DeviceInstance } from '@/views/device/Instance/typings'
 
 /**
  * 删除设备物模型
@@ -97,5 +98,5 @@ export const batchDeleteDevice = (data: string[]) => server.put(`/device-instanc
   * @param type 文件类型
   * @returns 
   */
-  export const deviceExport = (productId: string, type: string) => `${BASE_API_PATH}/device-instance${!!productId ? '/' + productId : ''}/export.${type}`
+export const deviceExport = (productId: string, type: string) => `${BASE_API_PATH}/device-instance${!!productId ? '/' + productId : ''}/export.${type}`
  

src/api/device/product.ts

@@ -43,3 +43,10 @@ export const detail = (id: string) => server.get<ProductItem>(`/device-product/$
  * @param data
  */
 export const category = (data: any) => server.post('/device/category/_tree', data)
+
+/**
+ * 保存产品
+ * @param data 产品信息
+ * @returns 
+ */
+export const saveProductMetadata = (data: Record<string, unknown>) => server.patch('/device-product', data)

src/api/home.ts

@@ -12,4 +12,6 @@ export const getDeviceCount_api = () => server.get(`/device/instance/_count`);
 // 产品数量
 export const getProductCount_api = (data:object) => server.post(`/device-product/_count`, data);
 // 查询产品列表
-export const getProductList_api = (data:object) => server.get(`/device/product/_query/no-paging?paging=false`, data);
+export const getProductList_api = (data:object={}) => server.get(`/device/product/_query/no-paging?paging=false`, data);
+// 查询设备列表
+export const getDeviceList_api = (data:object) => server.post(`/device-instance/_query/`, data);

src/api/system/permission.ts

@@ -1,6 +1,15 @@
 import server from '@/utils/request';
 
 // 获取权限列表
-export const getPermission_api = (data:object) => server.post(`/permission/_query/`,data);
+export const getPermission_api = (data: object) => server.post(`/permission/_query/`, data);
-// 修改权限信息
+// 新增时校验标识id是否可用
-export const editPermission_api = (data:object) => server.patch(`/permission`,data);
+export const checkId_api = (data: object) => server.get(`/permission/id/_validate`, data);
+// 修改权限 | 导入文件内容
+export const editPermission_api = (data: object) => server.patch(`/permission`, data);
+// 添加权限
+export const addPermission_api = (data: object) => server.post(`/permission`, data);
+// 删除权限
+export const delPermission_api = (id: string) => server.remove(`/permission/${id}`);
+
+// 导出权限数据
+export const exportPermission_api = (data: object) => server.post(`/permission/_query/no-paging`, data);

src/components/Table/index.tsx

@@ -54,7 +54,7 @@ export interface JTableProps extends TableProps{
     rowSelection?: TableProps['rowSelection'];
     cardProps?:  Record<string, any>;
     dataSource?:  Record<string, any>[];
-    gridColumn: number;
+    gridColumn?: number;
     /**
      * 用于不同分辨率
      * gridColumns[0] 1366 ~ 1440 分辨率；

src/store/instance.ts

@@ -1,4 +1,4 @@
-import { DeviceInstance, InstanceModel } from "@/views/device/instance/typings";
+import { DeviceInstance, InstanceModel } from "@/views/device/Instance/typings"
 import { defineStore } from "pinia";
 
 export const useInstanceStore = defineStore({
@@ -7,6 +7,7 @@ export const useInstanceStore = defineStore({
   actions: {
     setCurrent(current: Partial<DeviceInstance>) {
       this.current = current
+      this.detail = current
     }
   }
 })

src/store/metadata.ts

@@ -0,0 +1,31 @@
+import { DeviceInstance, InstanceModel } from "@/views/device/Instance/typings"
+import { defineStore } from "pinia";
+import type { MetadataItem, MetadataType } from '@/views/device/Product/typings'
+
+type MetadataModelType = {
+  item: MetadataItem | unknown;
+  edit: boolean;
+  type: MetadataType;
+  action: 'edit' | 'add';
+  import: boolean;
+  importMetadata: boolean;
+};
+
+export const useMetadataStore = defineStore({
+  id: 'metadata',
+  state: () => ({ 
+    model: {
+      item: undefined,
+      edit: false,
+      type: 'events',
+      action: 'add',
+      import: false,
+      importMetadata: false,
+    } as MetadataModelType 
+  }),
+  actions: {
+    set(key: string, value: any) {
+      this.model[key] = value
+    }
+  }
+})

src/utils/comm.ts

@@ -6,7 +6,7 @@ import { Terms } from 'components/Search/types'
  * @param path {String} 路径
  */
 export const getImage = (path: string) => {
-    return new URL('/images'+path, import.meta.url).href
+    return new URL('/images' + path, import.meta.url).href
 }
 
 export const LocalStore = {
@@ -57,3 +57,30 @@ export const filterTreeSelectNode = (value: string, treeNode: any, key: string =
 export const filterSelectNode = (value: string, option: any, key: string = 'label'): boolean => {
     return option[key]?.includes(value)
 }
+
+/**
+ * 时间转换为'2022-01-02 14:03:05'
+ * @param date 时间对象
+ * @returns 
+ */
+export const dateFormat = (dateSouce:any):string|Error => {
+    let date = null
+    try {
+        date = new Date(dateSouce)
+    } catch (error) {
+        return new Error('请传入日期格式数据')
+    }
+    let year = date.getFullYear();
+    let month: number | string = date.getMonth() + 1;
+    let day: number | string = date.getDate();
+    let hour: number | string = date.getHours();
+    let minutes: number | string = date.getMinutes();
+    let seconds: number | string = date.getSeconds();
+    month = (month < 10) ? '0' + month : month;
+    day = (day < 10) ? '0' + day : day;
+    hour = (hour < 10) ? '0' + hour : hour;
+    minutes = (minutes < 10) ? '0' + minutes : minutes;
+    seconds = (seconds < 10) ? '0' + seconds : seconds;
+    return year + "-" + month + "-" + day
+        + " " + hour + ":" + minutes + ":" + seconds;
+}

src/views/device/components/Metadata/Base/Edit/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <a-drawer :mask-closable="false" width="25vw" visible :title="`新增${typeMapping[metadataStore.model.type]}`"
+    @close="close" destroy-on-close :z-index="1000" placement="right">
+    <template #extra>
+      <a-button :loading="save.loading" type="primary" @click="save.saveMetadata">保存</a-button>
+    </template>
+    <a-form ref="addFormRef" :model="form.model"></a-form>
+  </a-drawer>
+</template>
+<script lang="ts" setup name="Edit">
+import { useInstanceStore } from '@/store/instance';
+import { useMetadataStore } from '@/store/metadata';
+import { useProductStore } from '@/store/product';
+import { MetadataItem, ProductItem } from '@/views/device/Product/typings';
+import { message } from 'ant-design-vue/es';
+import type { FormInstance } from 'ant-design-vue/es';
+import { updateMetadata, asyncUpdateMetadata } from '../../metadata'
+import { Store } from 'jetlinks-store';
+import { SystemConst } from '@/utils/consts';
+import { detail } from '@/api/device/instance';
+
+interface Props {
+  type: 'product' | 'device';
+  tabs?: string;
+}
+const props = defineProps<Props>()
+const route = useRoute()
+
+const instanceStore = useInstanceStore()
+const productStore = useProductStore()
+const metadataStore = useMetadataStore()
+const typeMapping: Record<string, string> = {
+  properties: '属性',
+  events: '事件',
+  functions: '功能',
+  tags: '标签',
+};
+const close = () => {
+  metadataStore.set('edit', false)
+  metadataStore.set('item', {})
+}
+
+const addFormRef = ref<FormInstance>()
+/**
+ * 保存按钮
+ */
+const save = reactive({
+  loading: false,
+  saveMetadata: (deploy?: boolean) => {
+    save.loading = true
+    addFormRef.value?.validateFields().then(async (formValue) => {
+      const type = metadataStore.model.type
+      const _metadata = JSON.parse((props.type === 'device' ? instanceStore.detail.metadata : productStore.current?.metadata) || '{}')
+      const list = _metadata[type] as any[]
+      if (formValue.id) {
+        if (metadataStore.model.action === 'add' && list.some(item => item.id === formValue.id)) {
+          message.error('标识已存在')
+          save.loading = false
+          return
+        }
+      }
+      const updateStore = (metadata: string) => {
+        if (props.type === 'device') {
+          const detail = instanceStore.current
+          detail.metadata = metadata
+          instanceStore.setCurrent(detail)
+        } else {
+          const detail = productStore.current || {} as ProductItem
+          detail.metadata = metadata
+          productStore.setCurrent(detail)
+        }
+      }
+      const _data = updateMetadata(type, [formValue], _metadata, updateStore)
+      const result = await asyncUpdateMetadata(props.type, _data)
+      if (result.status === 200) {
+        if ((window as any).onTabSaveSuccess) {
+          if (result) {
+            (window as any).onTabSaveSuccess(result);
+            setTimeout(() => window.close(), 300);
+          }
+        } else {
+          Store.set(SystemConst.REFRESH_METADATA_TABLE, true);
+          if (deploy) {
+            Store.set('product-deploy', deploy);
+          } else {
+            save.resetMetadata();
+            message.success({
+              key: 'metadata',
+              content: '操作成功！',
+            });
+          }
+          metadataStore.set('edit', false)
+          metadataStore.set('item', {})
+          if (instanceStore.detail) {
+            instanceStore.detail.independentMetadata = true;
+          }
+        }
+      } else {
+        message.error('操作失败！');
+      }
+      save.loading = false
+    })
+  },
+  resetMetadata: async () => {
+    const { id } = route.params
+    const resp = await detail(id as string);
+    if (resp.status === 200) {
+      instanceStore.detail = resp?.result || [];
+    }
+  }
+})
+
+const form = reactive({
+  model: {}
+})
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/device/components/Metadata/Base/columns.ts

@@ -0,0 +1,91 @@
+import { JColumnProps } from "@/components/Table";
+
+const SourceMap = {
+  device: '设备',
+  manual: '手动',
+  rule: '规则',
+};
+
+const type = {
+  read: '读',
+  write: '写',
+  report: '上报',
+};
+
+const BaseColumns: JColumnProps[] = [
+  {
+    title: '标识',
+    dataIndex: 'id',
+    ellipsis: true,
+  },
+  {
+    title: '名称',
+    dataIndex: 'name',
+    ellipsis: true,
+  },
+  {
+    title: '说明',
+    dataIndex: 'description',
+    ellipsis: true,
+  },
+];
+
+const EventColumns: JColumnProps[] = BaseColumns.concat([
+  {
+    title: '事件级别',
+    dataIndex: 'expands',
+    scopedSlots: true,
+  },
+]);
+
+const FunctionColumns: JColumnProps[] = BaseColumns.concat([
+  {
+    title: '是否异步',
+    dataIndex: 'async',
+    scopedSlots: true,
+  },
+  // {
+  //   title: '读写类型',
+  //   dataIndex: 'expands',
+  //   render: (text: any) => (text?.type || []).map((item: string | number) => <Tag>{type[item]}</Tag>),
+  // },
+]);
+
+const PropertyColumns: JColumnProps[] = BaseColumns.concat([
+  {
+    title: '数据类型',
+    dataIndex: 'valueType',
+    scopedSlots: true,
+  },
+  {
+    title: '属性来源',
+    dataIndex: 'expands',
+    scopedSlots: true,
+  },
+  {
+    title: '读写类型',
+    dataIndex: 'expands',
+    scopedSlots: true,
+  },
+]);
+
+const TagColumns: JColumnProps[] = BaseColumns.concat([
+  {
+    title: '数据类型',
+    dataIndex: 'valueType',
+    scopedSlots: true,
+  },
+  {
+    title: '读写类型',
+    dataIndex: 'expands',
+    scopedSlots: true,
+  },
+]);
+
+const MetadataMapping = new Map<string, JColumnProps[]>();
+MetadataMapping.set('properties', PropertyColumns);
+MetadataMapping.set('events', EventColumns);
+MetadataMapping.set('tags', TagColumns);
+MetadataMapping.set('functions', FunctionColumns);
+
+export default MetadataMapping;

src/views/device/components/Metadata/Base/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <JTable :loading="loading" :data-source="data" size="small" :columns="columns" row-key="id">
+    <template #headerTitle>
+      <a-input-search v-model:value="searchValue" placeholder="请输入名称" @search="handleSearch"></a-input-search>
+      <PermissionButton :has-permission="permission" key="add" @click="handleAddClick"
+        :disabled="operateLimits('add', type)" type="primary" :tooltip="{
+          title: operateLimits('add', type) ? '当前的存储方式不支持新增' : '新增',
+        }">
+        <template #icon>
+          <PlusOutlined />
+        </template>
+        新增
+      </PermissionButton>
+      <Edit
+        v-if="metadataStore.model.edit"
+        :type="target"
+        :tabs="type"
+      ></Edit>
+    </template>
+  </JTable>
+</template>
+<script setup lang="ts" name="BaseMetadata">
+import type { MetadataItem, MetadataType } from '@/views/device/Product/typings'
+import MetadataMapping from './columns'
+import JTable, { JColumnProps } from '@/components/Table'
+import { useInstanceStore } from '@/store/instance'
+import { useProductStore } from '@/store/product'
+import { useMetadataStore } from '@/store/metadata'
+import PermissionButton from '@/components/PermissionButton/index.vue'
+// import { detail } from '@/api/device/instance'
+// import { detail as productDetail } from '@/api/device/product'
+interface Props {
+  type: MetadataType;
+  target: 'product' | 'device';
+  permission: string | string[];
+}
+const props = defineProps<Props>()
+const route = useRoute()
+const instanceStore = useInstanceStore()
+const productStore = useProductStore()
+
+const loading = ref(false)
+const data = ref<MetadataItem[]>([])
+const { type, target = 'product' } = props
+const actions: JColumnProps[] = [
+  {
+    title: '操作',
+    align: 'left',
+    width: 200,
+    scopedSlots: true,
+  },
+];
+const columns = computed(() => MetadataMapping.get(type)!.concat(actions))
+const items = computed(() => JSON.parse((target === 'product' ? productStore.current?.metadata : instanceStore.current.metadata) || '{}') as MetadataItem[])
+const searchValue = ref<string>()
+const handleSearch = (searchValue: string) => {
+  if (searchValue) {
+    const arr = items.value.filter(item => item.name!.indexOf(searchValue) > -1).sort((a, b) => b?.sortsIndex - a?.sortsIndex)
+    data.value = arr
+  } else {
+    data.value = items.value
+  }
+}
+
+onMounted(() => {
+
+})
+
+watch([route.params.id, type], () => {
+  // const res = target === 'product'
+  //       ? await productDetail(route.params.id as string)
+  //       : await detail(route.params.id as string);
+  const result = target === 'product' ? productStore.current?.metadata : instanceStore.current.metadata
+  const item = JSON.parse(result || '{}') as MetadataItem[]
+  data.value = item[type]?.sort((a: any, b: any) => b?.sortsIndex - a?.sortsIndex)
+  loading.value = false
+}, { immediate: true })
+
+const metadataStore = useMetadataStore()
+const handleAddClick = () => {
+  metadataStore.set('edit', true)
+  metadataStore.set('item', undefined)
+  metadataStore.set('type', type)
+  metadataStore.set('action', 'add')
+}
+
+const limitsMap = new Map<string, any>();
+limitsMap.set('events-add', 'eventNotInsertable');
+limitsMap.set('events-updata', 'eventNotModifiable');
+limitsMap.set('properties-add', 'propertyNotInsertable');
+limitsMap.set('properties-updata', 'propertyNotModifiable');
+const operateLimits = (action: 'add' | 'updata', types: MetadataType) => {
+  return (
+    target === 'device' &&
+    (instanceStore.detail.features || []).find((item: { id: string; name: string }) => item.id === limitsMap.get(`${types}-${action}`))
+  );
+};
+</script>
+<style scoped lang="scss">
+</style>

src/views/device/components/Metadata/Import/index.vue

@@ -47,14 +47,16 @@ import { saveMetadata } from '@/api/device/instance'
 import { queryNoPagingPost, convertMetadata, modify } from '@/api/device/product'
 import type { DefaultOptionType } from 'ant-design-vue/es/select';
 import { UploadProps } from 'ant-design-vue/es';
-import type { DeviceMetadata } from '@/views/device/Product/typings'
+import type { DeviceMetadata, ProductItem } from '@/views/device/Product/typings'
 import { message } from 'ant-design-vue/es';
 import { Store } from 'jetlinks-store';
 import { SystemConst } from '@/utils/consts';
 import { useInstanceStore } from '@/store/instance'
+import { useProductStore } from '@/store/product';
 
 const route = useRoute()
 const instanceStore = useInstanceStore()
+const productStore = useProductStore()
 
 interface Props {
   visible: boolean,
@@ -191,8 +193,10 @@ const handleImport = async () => {
         const { id } = route.params || {}
         if (props?.type === 'device') {
           await saveMetadata(id as string, metadata)
+          instanceStore.setCurrent(JSON.parse(metadata || '{}'))
         } else {
           await modify(id as string, { metadata: metadata })
+          productStore.setCurrent(JSON.parse(metadata || '{}'))
         }
         loading.value = false
         // MetadataAction.insert(JSON.parse(metadata || '{}'));
@@ -231,10 +235,12 @@ const handleImport = async () => {
           if (props?.type === 'device') {
             const metadata: DeviceMetadata = JSON.parse(paramsDevice || '{}')
             // MetadataAction.insert(metadata);
+            instanceStore.setCurrent(metadata)
             message.success('导入成功')
           } else {
-            const metadata: DeviceMetadata = JSON.parse(params?.metadata || '{}')
+            const metadata: ProductItem = JSON.parse(params?.metadata || '{}')
             // MetadataAction.insert(metadata);
+            productStore.setCurrent(metadata)
             message.success('导入成功')
           }
         }

src/views/device/components/Metadata/metadata.ts

@@ -0,0 +1,61 @@
+import { saveProductMetadata } from "@/api/device/product";
+import { saveMetadata } from "@/api/device/instance";
+import type { DeviceInstance } from "../../Instance/typings";
+import type { DeviceMetadata, MetadataItem, MetadataType, ProductItem } from "../../Product/typings";
+
+/**
+ * 更新物模型
+ * @param type 物模型类型 events
+ * @param item 物模型数据 【{a},{b},{c}】
+ // * @param target product、device
+ * @param data product 、device [{event:[1,2,3]]
+ * @param onEvent 数据更新回调：更新数据库、发送事件等操作
+ *
+ */
+ export const updateMetadata = (
+  type: MetadataType,
+  item: MetadataItem[],
+  // target: 'product' | 'device',
+  data: ProductItem | DeviceInstance,
+  onEvent?: (item: string) => void,
+): ProductItem | DeviceInstance => {
+  if (!data) return data;
+  const metadata = JSON.parse(data.metadata || '{}') as DeviceMetadata;
+  const config = (metadata[type] || []) as MetadataItem[];
+  if (item.length > 0) {
+    item.forEach((i) => {
+      const index = config.findIndex((c) => c.id === i.id);
+      if (index > -1) {
+        config[index] = i;
+        // onEvent?.('update', i);
+      } else {
+        config.push(i);
+        // onEvent?.('add', i);
+      }
+    });
+  } else {
+    console.warn('未触发物模型修改');
+  }
+  // @ts-ignore
+  metadata[type] = config.sort((a, b) => b?.sortsIndex - a?.sortsIndex);
+  data.metadata = JSON.stringify(metadata);
+  onEvent?.(data.metadata)
+  return data;
+};
+
+/**
+ * 保存物模型数据到服务器
+ * @param type 类型
+ * @param data 数据
+ */
+export const asyncUpdateMetadata = (
+  type: 'product' | 'device',
+  data: ProductItem | DeviceInstance,
+): Promise<any> => {
+  switch (type) {
+    case 'product':
+      return saveProductMetadata(data);
+    case 'device':
+      return saveMetadata(data.id, JSON.parse(data.metadata || '{}'));
+  }
+};

src/views/home/components/StatusLabel.vue

@@ -0,0 +1,38 @@
+<template>
+    <span class="status-label-container">
+        <i class="circle" :style="{ background: bjColor }"></i>
+        <span>{{ props.statusLabel }}</span>
+    </span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    statusValue: string;
+    statusLabel: string;
+}>();
+
+const bjColor = computed(() => {
+    switch (props.statusValue) {
+        case 'online':
+            return '#52c41a';
+        case 'offline':
+            return '#ff4d4f';
+        case 'notActive':
+            return '#1890ff';
+    }
+});
+</script>
+
+<style lang="less" scoped>
+.status-label-container {
+    display: flex;
+    align-items: center;
+    .circle {
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        margin-right: 8px;
+    }
+}
+</style>

src/views/home/components/StepCard.vue

@@ -21,11 +21,11 @@
         </div>
 
         <div class="dialogs">
-            <AccessMethodDialog
+            <ProductChooseDialog
                 :open-number="openAccess"
                 @confirm="againJumpPage"
             />
-            <FuncTestDialog
+            <DeviceChooseDialog
                 :open-number="openFunc"
                 @confirm="againJumpPage"
             />
@@ -38,8 +38,8 @@ import { PropType } from 'vue';
 import { QuestionCircleOutlined } from '@ant-design/icons-vue';
 import { message } from 'ant-design-vue';
 
-import AccessMethodDialog from './dialogs/AccessMethodDialog.vue';
+import ProductChooseDialog from './dialogs/ProductChooseDialog.vue';
-import FuncTestDialog from './dialogs/FuncTestDialog.vue';
+import DeviceChooseDialog from './dialogs/DeviceChooseDialog.vue';
 
 import { recommendList } from '../index';
 
@@ -73,9 +73,8 @@ const jumpPage = (row: recommendList) => {
     }
 };
 // 弹窗返回后的二次跳转
-const againJumpPage = (paramsSource: object) => {
+const againJumpPage = (params: string) => {
-    const params = { ...(selectRow.params || {}), ...paramsSource };
+    router.push(`${selectRow.linkUrl}/${params}`);
-    router.push(`${selectRow.linkUrl}${objToParams(params || {})}`);
 };
 
 const objToParams = (source: object): string => {

src/views/home/components/dialogs/DeviceChooseDialog.vue

@@ -0,0 +1,181 @@
+<template>
+    <div ref="modal" class="func-test-dialog-container"></div>
+    <a-modal
+        v-model:visible="visible"
+        title="选择产品"
+        style="width: 1000px"
+        @ok="handleOk"
+        :getContainer="getContainer"
+        :maskClosable="false"
+    >
+        <Search type="simple" :columns="query.columns" @search="query.search" />
+        <JTable
+            model="TABLE"
+            :request="getDeviceList_api"
+            :columns="table.columns"
+            :params="query.params"
+            :defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
+            :rowSelection="{
+                selectedRowKeys: table.selectedKeys,
+                onChange: table.onSelect,
+                type: 'radio',
+            }"
+        >
+            <template #modifyTime="slotProps">
+                <span>{{ dateFormat(slotProps.modifyTime) }}</span>
+            </template>
+            <template #state="slotProps">
+                <StatusLabel
+                    :status-value="slotProps.state.value"
+                    :status-label="slotProps.state.text"
+                />
+            </template>
+        </JTable>
+
+        <template #footer>
+            <a-button key="back" @click="visible = false">取消</a-button>
+            <a-button key="submit" type="primary" @click="handleOk"
+                >确认</a-button
+            >
+        </template>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import StatusLabel from '../StatusLabel.vue';
+
+import { ComponentInternalInstance } from 'vue';
+import { getDeviceList_api } from '@/api/home';
+import { dateFormat } from '@/utils/comm';
+import { message } from 'ant-design-vue';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const emits = defineEmits(['confirm']);
+const props = defineProps({
+    openNumber: Number,
+});
+
+// 弹窗控制
+const visible = ref<boolean>(false);
+const getContainer = () => proxy?.$refs.modal as HTMLElement;
+const handleOk = () => {
+    if (table.selectedKeys.length < 1) return message.warn('请选择设备');
+    emits('confirm', table.selectedKeys[0]);
+    visible.value = false;
+};
+watch(
+    () => props.openNumber,
+    () => {
+        visible.value = true;
+    },
+);
+
+const query = reactive({
+    params: {},
+    columns: [
+        {
+            title: '设备ID',
+            dataIndex: 'id',
+            key: 'id',
+            ellipsis: true,
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '设备名称',
+            dataIndex: 'name',
+            key: 'name',
+            ellipsis: true,
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '产品名称',
+            dataIndex: 'productName',
+            key: 'productName',
+            ellipsis: true,
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '注册时间',
+            dataIndex: 'modifyTime',
+            key: 'modifyTime',
+            ellipsis: true,
+            search: {
+                type: 'date',
+            },
+        },
+        {
+            title: '状态',
+            dataIndex: 'state',
+            key: 'state',
+            ellipsis: true,
+            search: {
+                rename: 'state',
+                type: 'select',
+                options: [
+                    {
+                        label: '在线',
+                        value: 'online',
+                    },
+                    {
+                        label: '离线',
+                        value: 'offline',
+                    },
+                ],
+            },
+        },
+    ],
+    search: (params: object) => {
+        query.params = params;
+    },
+});
+
+const table = reactive({
+    columns: [
+        {
+            title: '设备Id',
+            dataIndex: 'id',
+            key: 'id',
+        },
+        {
+            title: '设备名称',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: '产品名称',
+            dataIndex: 'productName',
+            key: 'productName',
+        },
+        {
+            title: '注册时间',
+            dataIndex: 'modifyTime',
+            key: 'modifyTime',
+            scopedSlots: true,
+        },
+        {
+            title: '状态',
+            dataIndex: 'state',
+            key: 'state',
+            scopedSlots: true,
+        },
+    ],
+    selectedKeys: [] as string[],
+    onSelect: (keys: string[]) => {
+        table.selectedKeys = [...keys];
+    },
+});
+</script>
+
+<style lang="less" scoped>
+.func-test-dialog-container {
+    .search {
+        display: flex;
+    }
+}
+</style>

src/views/home/components/dialogs/FuncTestDialog.vue

@@ -1,98 +0,0 @@
-<template>
-    <div ref="modal" class="func-test-dialog-container"></div>
-    <a-modal
-        v-model:visible="visible"
-        title="选择产品"
-        style="width: 1000px"
-        @ok="handleOk"
-        :getContainer="getContainer"
-        :maskClosable="false"
-    >
-        <Search />
-        <JTable :columns="columns" model="TABLE"> </JTable>
-
-        <template #footer>
-            <a-button key="back" @click="visible = false">取消</a-button>
-            <a-button key="submit" type="primary" @click="handleOk"
-                >确认</a-button
-            >
-        </template>
-    </a-modal>
-</template>
-
-<script setup lang="ts">
-import { ComponentInternalInstance } from 'vue';
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const emits = defineEmits(['confirm']);
-const props = defineProps({
-    openNumber: Number,
-});
-
-// 弹窗控制
-const visible = ref<boolean>(false);
-const getContainer = () => proxy?.$refs.modal as HTMLElement;
-const handleOk = () => {
-    emits('confirm', form.value);
-    visible.value = false;
-};
-watch(
-    () => props.openNumber,
-    () => {
-        visible.value = true;
-        clickReset();
-        clickSearch();
-    },
-);
-
-// 搜索部分
-const form = ref({
-    key: '',
-    relation: '',
-    keyValue: '',
-});
-
-const clickSearch = () => {};
-const clickReset = () => {
-    Object.entries(form.value).forEach(([prop]) => {
-        form.value[prop] = '';
-    });
-};
-
-// 表格部分
-const columns = [
-    {
-        title: '设备Id',
-        dataIndex: 'deviceId',
-        key: 'deviceId',
-    },
-    {
-        title: '设备名称',
-        dataIndex: 'deviceName',
-        key: 'deviceName',
-    },
-    {
-        title: '产品名称',
-        dataIndex: 'productName',
-        key: 'productName',
-    },
-    {
-        title: '注册时间',
-        dataIndex: 'createTime',
-        key: 'createTime',
-    },
-    {
-        title: '状态',
-        dataIndex: 'status',
-        key: 'status',
-    },
-];
-</script>
-
-<style lang="less" scoped>
-.func-test-dialog-container {
-    .search {
-        display: flex;
-    }
-}
-</style>

src/views/home/components/dialogs/ProductChooseDialog.vue

@@ -53,7 +53,7 @@ const productList = ref<[productItem] | []>([]);
 
 const getContainer = () => proxy?.$refs.modal as HTMLElement;
 const getOptions = () => {
-    getProductList_api().then((resp) => {
+    getProductList_api().then((resp:any) => {
         productList.value = resp.result
             .filter((i: any) => !i?.accessId)
             .map((item: { name: any; id: any }) => ({
@@ -63,7 +63,7 @@ const getOptions = () => {
     });
 };
 const handleOk = () => {
-    emits('confirm', form.value);
+    emits('confirm', form.value.productId);
     visible.value = false;
 };
 const filterOption = (input: string, option: any) => {

src/views/home/index.d.ts

@@ -8,7 +8,11 @@ export interface recommendList {
     auth: boolean;
     dialogTag?: 'accessMethod' | 'funcTest';
 }
-
+// 产品列表里的每项
+export interface productItem {
+    label: string;
+    value: string
+}
 export interface deviceInfo {
     deviceId: string,
     deviceName: string,

src/views/home/modules/config.ts

@@ -1,9 +1,10 @@
 // import {getImage} from '@/utils/comm'
+import { useMenuStore } from "@/store/menu";
 import { usePermissionStore } from "@/store/permission";
 import { recommendList, bootConfig } from "../index";
 
 
-// 权限控制
+// 按钮权限控制
 const hasPermission = usePermissionStore().hasPermission;
 const productPermission = (action: string) =>
     hasPermission(`device/Product:${action}`);
@@ -11,6 +12,8 @@ const devicePermission = (action: string) =>
     hasPermission(`device/Instance:${action}`);
 const rulePermission = (action: string) =>
     hasPermission(`rule-engine/Instance:${action}`);
+// 页面权限控制
+const menuPermission = useMenuStore().hasPermission
 
 
 // 物联网引导-数据
@@ -18,7 +21,7 @@ export const deviceBootConfig: bootConfig[] = [
     {
         english: 'STEP1',
         label: '创建产品',
-        link: '/a',
+        link: '/iot/device/Product',
         auth: productPermission('add'),
         params: {
             save: true,
@@ -27,7 +30,7 @@ export const deviceBootConfig: bootConfig[] = [
     {
         english: 'STEP2',
         label: '创建设备',
-        link: '/b',
+        link: '/iot/device/Instance',
         auth: devicePermission('add'),
         params: {
             save: true,
@@ -36,7 +39,7 @@ export const deviceBootConfig: bootConfig[] = [
     {
         english: 'STEP3',
         label: '规则引擎',
-        link: '/c',
+        link: '/iot/rule-engine/Instance',
         auth: rulePermission('add'),
         params: {
             save: true,
@@ -50,7 +53,7 @@ export const deviceStepDetails: recommendList[] = [
         details:
             '产品是设备的集合，通常指一组具有相同功能的设备。物联设备必须通过产品进行接入方式配置。',
         iconUrl: '/images/home/bottom-4.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/device/Product',
         auth: productPermission('add'),
         params: {
             save: true,
@@ -61,7 +64,7 @@ export const deviceStepDetails: recommendList[] = [
         details:
             '通过产品对同一类型的设备进行统一的接入方式配置。请参照设备铭牌说明选择匹配的接入方式。',
         iconUrl: '/images/home/bottom-1.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/device/Product/detail',
         auth: productPermission('update'),
         dialogTag: 'accessMethod',
     },
@@ -69,7 +72,7 @@ export const deviceStepDetails: recommendList[] = [
         title: '添加测试设备',
         details: '添加单个设备，用于验证产品模型是否配置正确。',
         iconUrl: '/images/home/bottom-5.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/device/Instance',
         auth: devicePermission('add'),
         params: {
             save: true,
@@ -80,15 +83,16 @@ export const deviceStepDetails: recommendList[] = [
         details:
             '对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确。',
         iconUrl: '/images/home/bottom-2.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/device/Instance/detail',
-        auth: devicePermission('update'),
+        // auth: devicePermission('update'),
+        auth: true,
         dialogTag: 'funcTest',
     },
     {
         title: '批量添加设备',
         details: '批量添加同一产品下的设备',
         iconUrl: '/images/home/bottom-3.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/device/Instance',
         auth: devicePermission('import'),
         params: {
             import: true,
@@ -102,14 +106,14 @@ export const opsBootConfig: bootConfig[] = [
     {
         english: 'STEP1',
         label: '设备接入配置',
-        link: '/a',
+        link: '/iot/link/accessConfig',
-        auth: true,
+        auth: menuPermission('link/accessConfig'),
     },
     {
         english: 'STEP2',
         label: '日志排查',
-        link: '/b',
+        link: '/iot/link/Log',
-        auth: true,
+        auth: menuPermission('link/Log'),
         params: {
             key: 'system',
         },
@@ -117,8 +121,8 @@ export const opsBootConfig: bootConfig[] = [
     {
         english: 'STEP3',
         label: '实时监控',
-        link: '/c',
+        link: '/iot/link/dashboard',
-        auth: false,
+        auth: menuPermission('link/dashboard'),
         params: {
             save: true,
         },
@@ -131,44 +135,38 @@ export const opsStepDetails: recommendList[] = [
         details:
             '根据业务需求自定义开发对应的产品（设备模型）接入协议，并上传到平台。',
         iconUrl: '/images/home/bottom-1.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/link/protocol',
-        auth: true,
+        auth: menuPermission('link/Protocol'),
-        params: {
+        
-            a: 1,
-            save: true,
-        },
     },
     {
         title: '证书管理',
         details: '统一维护平台内的证书，用于数据通信加密。',
         iconUrl: '/images/home/bottom-6.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/link/Certificate',
-        auth: true,
+        auth: menuPermission('link/Certificate'),
-        params: {
+        
-            a: 1,
-            save: false,
-        },
     },
     {
         title: '网络组件',
         details: '根据不同的传输类型配置平台底层网络组件相关参数。',
         iconUrl: '/images/home/bottom-3.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/link/type',
-        auth: true,
+        auth: menuPermission('link/Type'),
     },
     {
         title: '设备接入网关',
         details: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
         iconUrl: '/images/home/bottom-4.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/link/accessConfig',
-        auth: true,
+        auth: menuPermission('link/AccessConfig'),
     },
     {
         title: '日志管理',
         details: '监控系统日志，及时处理系统异常。',
         iconUrl: '/images/home/bottom-5.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/link/Log',
-        auth: false,
+        auth: menuPermission('Log'),
         params: {
             key: 'system',
         }

src/views/system/Permission/components/EditDialog.vue

@@ -9,7 +9,10 @@
         <a-form ref="formRef" :model="form.data" layout="vertical">
             <a-form-item
                 name="id"
-                :rules="[{ required: true, message: '请输入标识' }]"
+                :rules="[
+                    { required: true, message: '请输入标识(ID)' },
+                    { validator: form.rules.idCheck, trigger: 'blur' },
+                ]"
                 class="question-item"
             >
                 <template #label>
@@ -62,6 +65,7 @@
                 </template>
                 <template v-else-if="column.key === 'act'">
                     <a-button
+                        class="delete-btn"
                         style="padding: 0"
                         type="link"
                         @click="table.clickRemove(index)"
@@ -71,17 +75,17 @@
                 </template>
             </template>
         </a-table>
-        <div class="pager">
+        <div class="pager" v-show="pager.total > pager.pageSize">
+            <a-select v-model:value="pager.current" style="width: 60px">
+                <a-select-option v-for="(val, i) in pageArr" :value="i + 1">{{
+                    i + 1
+                }}</a-select-option>
+            </a-select>
             <a-pagination
                 v-model:current="pager.current"
                 :page-size="pager.pageSize"
                 :total="pager.total"
             />
-            <a-select v-model:value="pager.current" style="width: 60px">
-                <a-select-option v-for="(val,i) in pageArr" :value="i + 1">{{
-                    i + 1
-                }}</a-select-option>
-            </a-select>
         </div>
 
         <a-button type="dashed" style="width: 100%" @click="table.clickAdd">
@@ -105,27 +109,40 @@
 import { FormInstance, message } from 'ant-design-vue';
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
 import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+import { Rule } from 'ant-design-vue/es/form';
+
+import {
+    checkId_api,
+    editPermission_api,
+    addPermission_api,
+} from '@/api/system/permission';
 
 const defaultAction = [
     { action: 'query', name: '查询', describe: '查询' },
     { action: 'save', name: '保存', describe: '保存' },
     { action: 'delete', name: '删除', describe: '删除' },
 ];
+const emits = defineEmits(['refresh']);
 // 弹窗相关
 const dialog = reactive({
     title: '',
     visible: false,
     handleOk: () => {
-        formRef.value?.validate().then(() => console.log('success'));
+        formRef.value?.validate().then(() => {
+            form.submit();
+        });
     },
     // 控制弹窗的打开与关闭
     changeVisible: (status: boolean, defaultForm: any = {}) => {
-        form.data = { name: '', description: '', ...defaultForm };
         dialog.title = defaultForm.id ? '编辑' : '新增';
+        form.data = { name: '', ...defaultForm };
         table.data = defaultForm.id ? defaultForm.actions : [...defaultAction];
         pager.total = table.data.length;
         pager.current = 1;
         dialog.visible = status;
+        nextTick(() => {
+            formRef.value?.clearValidate();
+        });
     },
 });
 // 表单相关
@@ -136,6 +153,46 @@ const form = reactive({
         name: '',
         id: '',
     },
+    rules: {
+        // 校验标识是否可用
+        idCheck: (_rule: Rule, id: string, cb: Function) => {
+            if (!id) return cb('请输入标识(ID)');
+            if (dialog.title === '编辑') return cb();
+            checkId_api({ id })
+                .then((resp: any) => {
+                    if (resp.status === 200 && !resp.result.passed)
+                        cb(resp.result.reason);
+                    else cb();
+                })
+                .catch(() => cb('验证失败'));
+
+            // return new Promise((resolve) => {
+            //     checkId_api({ id })
+            //         .then((resp: any) => {
+            //             if (resp.status === 200 && !resp.result.passed)
+            //                 resolve(resp.result.reason);
+            //             else resolve('');
+            //         })
+            //         .catch(() => resolve('验证失败'));
+            // });
+        },
+    },
+    submit: () => {
+        const params = {
+            ...form.data,
+            actions: table.data.filter((item: any) => item.action && item.name),
+        };
+        const api =
+            dialog.title === '编辑' ? editPermission_api : addPermission_api;
+
+        api(params).then((resp) => {
+            if (resp.status === 200) {
+                message.error('操作成功');
+                emits('refresh');
+                dialog.visible = false;
+            }
+        });
+    },
 });
 
 const table = reactive({
@@ -144,21 +201,26 @@ const table = reactive({
             title: '-',
             dataIndex: 'index',
             key: 'index',
+            width:80,
+            align:'center'
         },
         {
             title: '操作类型',
             dataIndex: 'action',
             key: 'action',
+            width: 220
         },
         {
             title: '名称',
             dataIndex: 'name',
             key: 'name',
+            width: 220
         },
         {
             title: '说明',
             dataIndex: 'describe',
             key: 'describe',
+            width: 220
         },
         {
             title: '操作',
@@ -230,5 +292,30 @@ defineExpose({
             }
         }
     }
+
+    .ant-table {
+        color: #ff4d4f;
+
+        .ant-table-tbody {
+            color: #ff4d4f;
+        }
+    }
+    .delete-btn {
+        color: #000000d9;
+        &:hover{
+            color: #415ed1;
+        }
+    }
+    .pager {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 12px;
+        .ant-pagination {
+            margin-left: 8px;
+            :deep(.ant-pagination-item) {
+                display: none;
+            }
+        }
+    }
 }
 </style>

src/views/system/Permission/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="permission-container">
-        <Search :columns="query.columns" />
+        <Search :columns="query.columns" @search="query.search" />
 
         <JTable
             ref="tableRef"
@@ -11,9 +11,40 @@
             :defaultParams="{ sorts: [{ name: 'id', order: 'asc' }] }"
         >
             <template #headerTitle>
-                <a-button type="primary" @click="table.openDialog(undefined)"
+                <a-button
+                    type="primary"
+                    @click="table.openDialog(undefined)"
+                    style="margin-right: 10px"
                     ><plus-outlined />新增</a-button
                 >
+                <a-dropdown trigger="hover">
+                    <a-button>批量操作</a-button>
+                    <template #overlay>
+                        <a-menu>
+                            <a-menu-item>
+                                <a-upload
+                                    name="file"
+                                    action="#"
+                                    accept=".json"
+                                    :showUploadList="false"
+                                    :before-upload="table.clickImport"
+                                >
+                                    <a-button>导入</a-button>
+                                </a-upload>
+                            </a-menu-item>
+                            <a-menu-item>
+                                <a-popconfirm
+                                    title="确认导出？"
+                                    ok-text="确定"
+                                    cancel-text="取消"
+                                    @confirm="table.clickExport"
+                                >
+                                    <a-button>导出</a-button>
+                                </a-popconfirm>
+                            </a-menu-item>
+                        </a-menu>
+                    </template>
+                </a-dropdown>
             </template>
             <template #status="slotProps">
                 <StatusLabel :status-value="slotProps.status" />
@@ -51,18 +82,27 @@
                     </a-popconfirm>
 
                     <a-popconfirm
-                        title="确定要删除吗？"
+                        title="确认删除"
                         ok-text="确定"
                         cancel-text="取消"
                         @confirm="table.clickDel(slotProps)"
                         :disabled="slotProps.status"
                     >
                         <a-tooltip>
-                            <template #title>删除</template>
+                            <template #title>{{
+                                systemPermission('delete')
+                                    ? slotProps.status
+                                        ? '请先禁用，再删除'
+                                        : '删除'
+                                    : '暂无权限，请联系管理员'
+                            }}</template>
                             <a-button
                                 style="padding: 0"
                                 type="link"
-                                :disabled="slotProps.status"
+                                :disabled="
+                                    !systemPermission('delete') ||
+                                    slotProps.status
+                                "
                             >
                                 <delete-outlined />
                             </a-button>
@@ -73,7 +113,7 @@
         </JTable>
 
         <div class="dialogs">
-            <EditDialog ref="editDialogRef" />
+            <EditDialog ref="editDialogRef" @refresh="table.refresh" />
         </div>
     </div>
 </template>
@@ -89,11 +129,22 @@ import {
     StopOutlined,
     PlayCircleOutlined,
 } from '@ant-design/icons-vue';
-import { getPermission_api, editPermission_api } from '@/api/system/permission';
+import {
+    getPermission_api,
+    editPermission_api,
+    delPermission_api,
+    exportPermission_api,
+} from '@/api/system/permission';
+import { downloadObject } from '@/utils/utils';
+import { usePermissionStore } from '@/store/permission';
 
 const editDialogRef = ref(); // 新增弹窗实例
 const tableRef = ref<Record<string, any>>({}); // 表格实例
 
+// 按钮权限控制
+const hasPermission = usePermissionStore().hasPermission;
+const systemPermission = (code: string) =>
+    hasPermission('system/Permission:${code}');
 // 筛选
 const query = reactive({
     columns: [
@@ -138,6 +189,9 @@ const query = reactive({
         },
     ],
     params: {},
+    search: (params: object) => {
+        query.params = params;
+    },
 });
 
 // 表格
@@ -167,10 +221,55 @@ const table = reactive({
         },
     ],
     tableData: [],
+    // 打开编辑弹窗
     openDialog: (row: object | undefined = {}) => {
-        editDialogRef.value.openDialog(true, row);
+        let permissionCode = '';
+        if (Object.keys(row).length < 1) permissionCode = 'add';
+        else permissionCode = 'update';
+        if (systemPermission(permissionCode))
+            editDialogRef.value.openDialog(true, row);
+        else message.warn('暂无权限，请联系管理员');
     },
+    // 导入数据
+    clickImport: (file: File) => {
+        if (file.type === 'application/json') {
+            const reader = new FileReader();
+            reader.readAsText(file);
+            reader.onload = (result: any) => {
+                try {
+                    const data = JSON.parse(result.target.result);
+                    editPermission_api(data).then((resp) => {
+                        if (resp.status === 200) {
+                            message.success('导入成功');
+                            table.refresh();
+                        }
+                    });
+                } catch (error) {
+                    message.error('导入失败，请重试！');
+                }
+            };
+        } else message.error('请上传json格式');
+        return false;
+    },
+    // 导出数据
+    clickExport: () => {
+        const params = {
+            paging: false,
+            ...query.params,
+        };
+        exportPermission_api(params).then((resp) => {
+            if (resp.status === 200) {
+                downloadObject(resp.result as any, '权限数据');
+                message.success('导出成功');
+            } else {
+                message.error('导出错误');
+            }
+        });
+    },
+    // 修改状态
     changeStatus: (row: any) => {
+        if (!systemPermission('action'))
+            return message.warn('暂无权限，请联系管理员');
         const params = {
             ...row,
             status: row.status ? 0 : 1,
@@ -180,14 +279,16 @@ const table = reactive({
             tableRef.value.reload();
         });
     },
+    // 删除
     clickDel: (row: any) => {
-        // delRole_api(row.id).then((resp: any) => {
+        delPermission_api(row.id).then((resp: any) => {
-        //     if (resp.status === 200) {
+            if (resp.status === 200) {
-        //         tableRef.value?.reload();
+                tableRef.value?.reload();
-        //         message.success('操作成功!');
+                message.success('操作成功!');
-        //     }
+            }
-        // });
+        });
     },
+    // 刷新列表
     refresh: () => {
         tableRef.value.reload();
     },