Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
JiangQiming
commit
cf4314d29c
|
|
@ -1,6 +1,7 @@
|
|||
import { LocalStore } from '@/utils/comm'
|
||||
import server from '@/utils/request'
|
||||
import { BASE_API_PATH } from '@/utils/variable'
|
||||
import { DeviceInstance } from '@/views/device/instance/typings'
|
||||
import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable'
|
||||
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}`
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,15 @@
|
|||
import server from '@/utils/request';
|
||||
|
||||
// 获取权限列表
|
||||
export const getPermission_api = (data:object) => server.post(`/permission/_query/`,data);
|
||||
// 修改权限信息
|
||||
export const editPermission_api = (data:object) => server.patch(`/permission`,data);
|
||||
export const getPermission_api = (data: object) => server.post(`/permission/_query/`, data);
|
||||
// 新增时校验标识id是否可用
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -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 分辨率；
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
|
|
@ -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('导入成功')
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 || '{}'));
|
||||
}
|
||||
};
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 FuncTestDialog from './dialogs/FuncTestDialog.vue';
|
||||
import ProductChooseDialog from './dialogs/ProductChooseDialog.vue';
|
||||
import DeviceChooseDialog from './dialogs/DeviceChooseDialog.vue';
|
||||
|
||||
import { recommendList } from '../index';
|
||||
|
||||
|
|
@ -73,9 +73,8 @@ const jumpPage = (row: recommendList) => {
|
|||
}
|
||||
};
|
||||
// 弹窗返回后的二次跳转
|
||||
const againJumpPage = (paramsSource: object) => {
|
||||
const params = { ...(selectRow.params || {}), ...paramsSource };
|
||||
router.push(`${selectRow.linkUrl}${objToParams(params || {})}`);
|
||||
const againJumpPage = (params: string) => {
|
||||
router.push(`${selectRow.linkUrl}/${params}`);
|
||||
};
|
||||
|
||||
const objToParams = (source: object): string => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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) => {
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
auth: devicePermission('update'),
|
||||
linkUrl: '/iot/device/Instance/detail',
|
||||
// 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',
|
||||
auth: true,
|
||||
link: '/iot/link/accessConfig',
|
||||
auth: menuPermission('link/accessConfig'),
|
||||
},
|
||||
{
|
||||
english: 'STEP2',
|
||||
label: '日志排查',
|
||||
link: '/b',
|
||||
auth: true,
|
||||
link: '/iot/link/Log',
|
||||
auth: menuPermission('link/Log'),
|
||||
params: {
|
||||
key: 'system',
|
||||
},
|
||||
|
|
@ -117,8 +121,8 @@ export const opsBootConfig: bootConfig[] = [
|
|||
{
|
||||
english: 'STEP3',
|
||||
label: '实时监控',
|
||||
link: '/c',
|
||||
auth: false,
|
||||
link: '/iot/link/dashboard',
|
||||
auth: menuPermission('link/dashboard'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
|
|
@ -131,44 +135,38 @@ export const opsStepDetails: recommendList[] = [
|
|||
details:
|
||||
'根据业务需求自定义开发对应的产品（设备模型）接入协议，并上传到平台。',
|
||||
iconUrl: '/images/home/bottom-1.png',
|
||||
linkUrl: '/a',
|
||||
auth: true,
|
||||
params: {
|
||||
a: 1,
|
||||
save: true,
|
||||
},
|
||||
linkUrl: '/iot/link/protocol',
|
||||
auth: menuPermission('link/Protocol'),
|
||||
|
||||
},
|
||||
{
|
||||
title: '证书管理',
|
||||
details: '统一维护平台内的证书，用于数据通信加密。',
|
||||
iconUrl: '/images/home/bottom-6.png',
|
||||
linkUrl: '/a',
|
||||
auth: true,
|
||||
params: {
|
||||
a: 1,
|
||||
save: false,
|
||||
},
|
||||
linkUrl: '/iot/link/Certificate',
|
||||
auth: menuPermission('link/Certificate'),
|
||||
|
||||
},
|
||||
{
|
||||
title: '网络组件',
|
||||
details: '根据不同的传输类型配置平台底层网络组件相关参数。',
|
||||
iconUrl: '/images/home/bottom-3.png',
|
||||
linkUrl: '/a',
|
||||
auth: true,
|
||||
linkUrl: '/iot/link/type',
|
||||
auth: menuPermission('link/Type'),
|
||||
},
|
||||
{
|
||||
title: '设备接入网关',
|
||||
details: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
|
||||
iconUrl: '/images/home/bottom-4.png',
|
||||
linkUrl: '/a',
|
||||
auth: true,
|
||||
linkUrl: '/iot/link/accessConfig',
|
||||
auth: menuPermission('link/AccessConfig'),
|
||||
},
|
||||
{
|
||||
title: '日志管理',
|
||||
details: '监控系统日志，及时处理系统异常。',
|
||||
iconUrl: '/images/home/bottom-5.png',
|
||||
linkUrl: '/a',
|
||||
auth: false,
|
||||
linkUrl: '/iot/link/Log',
|
||||
auth: menuPermission('Log'),
|
||||
params: {
|
||||
key: 'system',
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 = {}) => {
|
||||
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) => {
|
||||
// if (resp.status === 200) {
|
||||
// tableRef.value?.reload();
|
||||
// message.success('操作成功!');
|
||||
// }
|
||||
// });
|
||||
delPermission_api(row.id).then((resp: any) => {
|
||||
if (resp.status === 200) {
|
||||
tableRef.value?.reload();
|
||||
message.success('操作成功!');
|
||||
}
|
||||
});
|
||||
},
|
||||
// 刷新列表
|
||||
refresh: () => {
|
||||
tableRef.value.reload();
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue