feat: 添加产品列表模块
This commit is contained in:
xiongqian
parent
1efe058322
commit
9da8599575
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -16,7 +16,7 @@ export const queryTree = (params?: Record<string, any>) => server.post<CategoryI
|
|||
/**
|
||||
* 根据Id修改
|
||||
*/
|
||||
export const updateTree = (data: any, id:string) => server.put(`/device/category/${id}`, data)
|
||||
export const updateTree = (id:string,data: any,) => server.put(`/device/category/${id}`, data)
|
||||
|
||||
/**
|
||||
* 根据Id删除数据
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import server from '@/utils/request'
|
||||
import { DeviceMetadata, ProductItem } from '@/views/device/Product/typings'
|
||||
import { DeviceMetadata, ProductItem, DepartmentItem } from '@/views/device/Product/typings'
|
||||
|
||||
/**
|
||||
* 根据条件查询产品（不带翻页）
|
||||
|
|
@ -40,6 +40,73 @@ export const detail = (id: string) => server.get<ProductItem>(`/device-product/$
|
|||
|
||||
/**
|
||||
* 产品分类
|
||||
* @param data
|
||||
* @param data 查询条件
|
||||
*/
|
||||
export const category = (data: any) => server.post('/device/category/_tree', data)
|
||||
export const category = (data: any) => server.post('/device/category/_tree', data)
|
||||
|
||||
/**
|
||||
* 获取网关类型
|
||||
*/
|
||||
export const getProviders = () => server.get('/gateway/device/providers')
|
||||
|
||||
/**
|
||||
* 查询所属部门
|
||||
* @param params 查询条件
|
||||
*/
|
||||
export const queryOrgThree = (params?: Record<string, any>) => server.post<DepartmentItem>('/organization/_all/tree', params)
|
||||
|
||||
/**
|
||||
* 获取接入方式
|
||||
* @param data 查询条件
|
||||
*/
|
||||
export const queryGatewayList = (data: any) => server.post('/gateway/device/_query/no-paging', data)
|
||||
|
||||
/**
|
||||
* 查询产品列表(分页)
|
||||
* @param data 查询条件
|
||||
*/
|
||||
export const queryProductList = (data: any) => server.post('/device-product/_query', data)
|
||||
|
||||
/**
|
||||
* 启用产品
|
||||
* @param productId 产品ID
|
||||
* @param data
|
||||
* @returns
|
||||
*/
|
||||
export const _deploy = (productId: string) => server.post(`/device-product/${productId}/deploy`)
|
||||
|
||||
/**
|
||||
* 禁用产品
|
||||
* @param productId 产品ID
|
||||
* @param data
|
||||
* @returns
|
||||
*/
|
||||
export const _undeploy = (productId: string) => server.post(`/device-product/${productId}/undeploy`)
|
||||
|
||||
/**
|
||||
* 新增产品
|
||||
* @param data
|
||||
* @returns
|
||||
*/
|
||||
export const addProduct = (data:any) => server.post('/device-product',data)
|
||||
|
||||
/**
|
||||
* 修改产品
|
||||
* @param id 产品ID
|
||||
* @param data
|
||||
* @returns
|
||||
*/
|
||||
export const editProduct = (data: any) => server.patch('/device-product', data)
|
||||
|
||||
/**
|
||||
* 删除产品
|
||||
* @param id 产品ID
|
||||
*/
|
||||
export const deleteProduct = (id: string) => server.patch(`/device-product/${id}`)
|
||||
|
||||
/**
|
||||
* 检测产品Id唯一性
|
||||
* @param id 产品ID
|
||||
*/
|
||||
export const queryProductId = (id: string) => server.post(`/device-product/${id}/exists`)
|
||||
|
||||
|
|
@ -141,5 +141,10 @@ export default [
|
|||
{
|
||||
path: '/iot/device/Category',
|
||||
component: () => import('@/views/device/Category/index.vue')
|
||||
}
|
||||
} ,
|
||||
// 产品
|
||||
{
|
||||
path: '/iot/device/Product',
|
||||
component: () => import('@/views/device/Product/index.vue')
|
||||
}
|
||||
]
|
||||
|
|
@ -13,23 +13,24 @@
|
|||
>
|
||||
<a-form
|
||||
layout="vertical"
|
||||
v-model="formModel"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
:rules="rules"
|
||||
:model="formModel"
|
||||
>
|
||||
<a-form-item label="名称" name="name" v-bind="validateInfos.name">
|
||||
<a-input v-model:value="formModel.name" :maxlength="64" />
|
||||
<a-form-item label="名称" name="name">
|
||||
<a-input
|
||||
v-model:value="formModel.name"
|
||||
:maxlength="64"
|
||||
placeholder="请输入名称"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="排序"
|
||||
name="sortIndex"
|
||||
v-bind="validateInfos.sortIndex"
|
||||
>
|
||||
<a-form-item label="排序" name="sortIndex">
|
||||
<a-input-number
|
||||
style="width: 100%"
|
||||
id="inputNumber"
|
||||
v-model:value="formModel.sortIndex"
|
||||
:min="1"
|
||||
placeholder="请输入排序"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="说明">
|
||||
|
|
@ -37,6 +38,7 @@
|
|||
v-model:value="formModel.description"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
placeholder="请输入说明"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
|
@ -44,10 +46,12 @@
|
|||
</template>
|
||||
<script setup lang="ts" name="modifyModal">
|
||||
import { PropType } from 'vue';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { queryTree } from '@/api/device/category';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { queryTree, saveTree, updateTree } from '@/api/device/category';
|
||||
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
|
||||
import { list } from '@/api/iot-card/home';
|
||||
import { number } from 'echarts';
|
||||
|
||||
const emits = defineEmits(['refresh']);
|
||||
const formRef = ref();
|
||||
const useForm = Form.useForm;
|
||||
|
|
@ -65,8 +69,8 @@ const props = defineProps({
|
|||
default: 0,
|
||||
},
|
||||
isChild: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
interface formState {
|
||||
|
|
@ -75,6 +79,11 @@ interface formState {
|
|||
description: string;
|
||||
}
|
||||
const listData = ref([]);
|
||||
const childArr = ref([]);
|
||||
const arr = ref([]);
|
||||
const updateObj = ref({});
|
||||
const addObj = ref({});
|
||||
const addParams = ref({});
|
||||
/**
|
||||
* 表单数据
|
||||
*/
|
||||
|
|
@ -84,8 +93,8 @@ const formModel = ref<formState>({
|
|||
description: '',
|
||||
});
|
||||
const rules = ref({
|
||||
name: [{ required: true, message: '请输入名称' }],
|
||||
sortIndex: [{ required: true, message: '请输入排序' }],
|
||||
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
||||
sortIndex: [{ required: true, message: '请输入排序', trigger: 'blur' }],
|
||||
});
|
||||
const visible = ref(false);
|
||||
const { resetFields, validate, validateInfos } = useForm(
|
||||
|
|
@ -96,53 +105,99 @@ const { resetFields, validate, validateInfos } = useForm(
|
|||
* 提交数据
|
||||
*/
|
||||
const submitData = async () => {
|
||||
validate()
|
||||
.then(async () => {})
|
||||
.catch((error: ValidateErrorEntity<formState>) => {});
|
||||
formRef.value.validate().then(async () => {
|
||||
addParams.value = {};
|
||||
if (props.isAdd === 0) {
|
||||
if (props.isChild === 1) {
|
||||
addParams.value = {
|
||||
...formModel.value,
|
||||
sortIndex:
|
||||
childArr.value[childArr.value.length - 1].sortIndex + 1,
|
||||
parentId: addObj.value.id,
|
||||
};
|
||||
} else if (props.isChild === 2) {
|
||||
addParams.value = {
|
||||
parentId: addObj.value.id,
|
||||
...formModel.value,
|
||||
sortIndex: 1,
|
||||
};
|
||||
} else if (props.isChild === 3) {
|
||||
addParams.value = {
|
||||
...formModel.value,
|
||||
sortIndex: arr.value[arr.value.length - 1].sortIndex + 1,
|
||||
};
|
||||
}
|
||||
const res = await saveTree(addParams.value);
|
||||
if (res.status === 200) {
|
||||
message.success('操作成功！');
|
||||
visible.value = false;
|
||||
emits('refresh');
|
||||
} else {
|
||||
message.error('操作失败！');
|
||||
}
|
||||
} else if (props.isAdd === 2) {
|
||||
const id = updateObj.value.id;
|
||||
const updateParams = {
|
||||
...formModel.value,
|
||||
id: updateObj.value.id,
|
||||
key: updateObj.value.key,
|
||||
parentId: updateObj.value.parentId,
|
||||
};
|
||||
const res = await updateTree(id, updateParams);
|
||||
if (res.status === 200) {
|
||||
message.success('操作成功！');
|
||||
visible.value = false;
|
||||
emits('refresh');
|
||||
} else {
|
||||
message.error('操作失败！');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 显示弹窗
|
||||
*/
|
||||
const show = (row: any) => {
|
||||
//新增
|
||||
if (props.isAdd === 0) {
|
||||
//新增
|
||||
if (props.isChild) {
|
||||
//存在子类
|
||||
if (props.isChild === 1) {
|
||||
addObj.value = row;
|
||||
if (row.children && row.children.length > 0) {
|
||||
let childArr = [];
|
||||
childArr = row.children.sort(compare('sortIndex'));
|
||||
childArr.value = row.children.sort(compare('sortIndex'));
|
||||
formModel.value = {
|
||||
name: '',
|
||||
sortIndex: childArr[childArr.length - 1].sortIndex + 1,
|
||||
sortIndex:
|
||||
childArr.value[childArr.value.length - 1].sortIndex + 1,
|
||||
description: '',
|
||||
};
|
||||
} else {
|
||||
visible.value = true;
|
||||
}
|
||||
} else if (props.isChild === 3) {
|
||||
arr.value = listData.value.sort(compare('sortIndex'));
|
||||
if (arr.value.length > 0) {
|
||||
formModel.value = {
|
||||
name: '',
|
||||
sortIndex: 1,
|
||||
sortIndex: arr.value[arr.value.length - 1].sortIndex + 1,
|
||||
description: '',
|
||||
};
|
||||
}
|
||||
} else {
|
||||
let arr = [];
|
||||
arr = listData.value.sort(compare('sortIndex'));
|
||||
if (arr.length > 0) {
|
||||
formModel.value = {
|
||||
name: '',
|
||||
sortIndex: arr[arr.length - 1].sortIndex + 1,
|
||||
description: '',
|
||||
};
|
||||
visible.value = true;
|
||||
} else if (props.isChild === 2) {
|
||||
if (row.level === 5) {
|
||||
message.warning('树形结构最多添加5层');
|
||||
visible.value = false;
|
||||
} else {
|
||||
addObj.value = row;
|
||||
formModel.value = {
|
||||
name: '',
|
||||
sortIndex: 1,
|
||||
description: '',
|
||||
};
|
||||
visible.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
visible.value = true;
|
||||
} else if (props.isAdd === 2) {
|
||||
updateObj.value = row;
|
||||
// 编辑
|
||||
formModel.value = {
|
||||
name: row.name,
|
||||
|
|
@ -152,10 +207,7 @@ const show = (row: any) => {
|
|||
visible.value = true;
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 判断是新增还是编辑
|
||||
*/
|
||||
const judgeIsAdd = () => {};
|
||||
|
||||
/**
|
||||
* 排序
|
||||
*/
|
||||
|
|
@ -183,7 +235,6 @@ const compare = (property: any) => {
|
|||
const res = await queryTree(params);
|
||||
if (res.status === 200) {
|
||||
listData.value = res.result;
|
||||
console.log(listData.value, 'listData.value');
|
||||
}
|
||||
};
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!--产品分类 -->
|
||||
<template>
|
||||
<a-card class="product-category">
|
||||
<Search :columns="query.columns" target="category" />
|
||||
<Search :columns="query.columns" target="category" @search="search" />
|
||||
<JTable
|
||||
ref="tableRef"
|
||||
:columns="table.columns"
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
:title="title"
|
||||
:isAdd="isAdd"
|
||||
:isChild="isChild"
|
||||
@refresh="() => modifyRef.value?.reload()"
|
||||
@refresh="refresh"
|
||||
/>
|
||||
</a-card>
|
||||
</template>
|
||||
|
|
@ -73,34 +73,41 @@ const dataSource = ref([]);
|
|||
const currentForm = ref({});
|
||||
const title = ref('');
|
||||
const isAdd = ref(0);
|
||||
const isChild = ref(false);
|
||||
const isChild = ref(0);
|
||||
// 筛选
|
||||
const query = reactive({
|
||||
columns: [
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
ellipsis: true,
|
||||
key: 'name',
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortIndex',
|
||||
valueType: 'digit',
|
||||
sorter: true,
|
||||
key: 'sortIndex',
|
||||
search: {
|
||||
type: 'number',
|
||||
},
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
key: 'description',
|
||||
ellipsis: true,
|
||||
dataIndex: 'description',
|
||||
filters: true,
|
||||
onFilter: true,
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
valueType: 'option',
|
||||
width: 200,
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 250,
|
||||
scopedSlots: true,
|
||||
},
|
||||
],
|
||||
params: {
|
||||
|
|
@ -150,8 +157,12 @@ const getActions = (
|
|||
onClick: () => {
|
||||
title.value = '新增子分类';
|
||||
isAdd.value = 0;
|
||||
isChild.value = true;
|
||||
currentForm.value = {};
|
||||
if (data.children && data.children.length > 0) {
|
||||
isChild.value = 1;
|
||||
} else {
|
||||
isChild.value = 2;
|
||||
}
|
||||
nextTick(() => {
|
||||
modifyRef.value.show(data);
|
||||
});
|
||||
|
|
@ -187,6 +198,7 @@ const table = reactive({
|
|||
title: '排序',
|
||||
dataIndex: 'sortIndex',
|
||||
key: 'sortIndex',
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
|
|
@ -207,13 +219,19 @@ const table = reactive({
|
|||
add: async () => {
|
||||
title.value = '新增分类';
|
||||
isAdd.value = 0;
|
||||
isChild.value = false;
|
||||
isChild.value = 3;
|
||||
nextTick(() => {
|
||||
modifyRef.value.show(currentForm.value);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 刷新表格数据
|
||||
*/
|
||||
refresh: () => {
|
||||
tableRef.value?.reload();
|
||||
},
|
||||
});
|
||||
const { add, columns } = toRefs(table);
|
||||
const { add, columns, refresh } = toRefs(table);
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<JTable
|
||||
ref="instanceRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="{sorts: [{name: 'createTime', order: 'desc'}]}"
|
||||
<JTable
|
||||
ref="instanceRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
|
||||
:rowSelection="{
|
||||
selectedRowKeys: _selectedRowKeys,
|
||||
onChange: onSelectChange
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
@cancelSelect="cancelSelect"
|
||||
:params="params"
|
||||
|
|
@ -17,37 +17,79 @@
|
|||
<a-dropdown>
|
||||
<a-button>批量操作 <AIcon type="DownOutlined" /></a-button>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<a-button @click="exportVisible = true"><AIcon type="ExportOutlined" />批量导出设备</a-button>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-button @click="importVisible = true"><AIcon type="ImportOutlined" />批量导入设备</a-button>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-popconfirm @confirm="activeAllDevice" title="确认激活全部设备？">
|
||||
<a-button type="primary" ghost><AIcon type="CheckCircleOutlined" />激活全部设备</a-button>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-button @click="syncDeviceStatus" type="primary"><AIcon type="SyncOutlined" />同步设备状态</a-button>
|
||||
</a-menu-item>
|
||||
<a-menu-item v-if="_selectedRowKeys.length">
|
||||
<a-popconfirm @confirm="delSelectedDevice" title="已启用的设备无法删除，确认删除选中的禁用状态设备？">
|
||||
<a-button type="primary" danger><AIcon type="DeleteOutlined" />删除选中设备</a-button>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item v-if="_selectedRowKeys.length" title="确认激活选中设备?">
|
||||
<a-popconfirm @confirm="activeSelectedDevice" >
|
||||
<a-button type="primary"><AIcon type="CheckOutlined" />激活选中设备</a-button>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item v-if="_selectedRowKeys.length">
|
||||
<a-popconfirm @confirm="disabledSelectedDevice" title="确认禁用选中设备?">
|
||||
<a-button type="primary" danger><AIcon type="StopOutlined" />禁用选中设备</a-button>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<a-button @click="exportVisible = true"
|
||||
><AIcon
|
||||
type="ExportOutlined"
|
||||
/>批量导出设备</a-button
|
||||
>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-button @click="importVisible = true"
|
||||
><AIcon
|
||||
type="ImportOutlined"
|
||||
/>批量导入设备</a-button
|
||||
>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-popconfirm
|
||||
@confirm="activeAllDevice"
|
||||
title="确认激活全部设备？"
|
||||
>
|
||||
<a-button type="primary" ghost
|
||||
><AIcon
|
||||
type="CheckCircleOutlined"
|
||||
/>激活全部设备</a-button
|
||||
>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
@click="syncDeviceStatus"
|
||||
type="primary"
|
||||
><AIcon
|
||||
type="SyncOutlined"
|
||||
/>同步设备状态</a-button
|
||||
>
|
||||
</a-menu-item>
|
||||
<a-menu-item v-if="_selectedRowKeys.length">
|
||||
<a-popconfirm
|
||||
@confirm="delSelectedDevice"
|
||||
title="已启用的设备无法删除，确认删除选中的禁用状态设备？"
|
||||
>
|
||||
<a-button type="primary" danger
|
||||
><AIcon
|
||||
type="DeleteOutlined"
|
||||
/>删除选中设备</a-button
|
||||
>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item
|
||||
v-if="_selectedRowKeys.length"
|
||||
title="确认激活选中设备?"
|
||||
>
|
||||
<a-popconfirm @confirm="activeSelectedDevice">
|
||||
<a-button type="primary"
|
||||
><AIcon
|
||||
type="CheckOutlined"
|
||||
/>激活选中设备</a-button
|
||||
>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item v-if="_selectedRowKeys.length">
|
||||
<a-popconfirm
|
||||
@confirm="disabledSelectedDevice"
|
||||
title="确认禁用选中设备?"
|
||||
>
|
||||
<a-button type="primary" danger
|
||||
><AIcon
|
||||
type="StopOutlined"
|
||||
/>禁用选中设备</a-button
|
||||
>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
|
|
@ -69,31 +111,44 @@
|
|||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img :src="getImage('/device/instance/device-card.png')" />
|
||||
<img
|
||||
:src="getImage('/device/instance/device-card.png')"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<h3 class="card-item-content-title" @click.stop="handleView(slotProps.id)">{{ slotProps.name }}</h3>
|
||||
<h3
|
||||
class="card-item-content-title"
|
||||
@click.stop="handleView(slotProps.id)"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<div class="card-item-content-text">设备类型</div>
|
||||
<div>{{slotProps.deviceType.text}}</div>
|
||||
<div>{{ slotProps.deviceType.text }}</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="card-item-content-text">产品名称</div>
|
||||
<div>{{slotProps.productName}}</div>
|
||||
<div>{{ slotProps.productName }}</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<a-tooltip v-bind="item.tooltip" :title="item.disabled && item.tooltip.title">
|
||||
<a-tooltip
|
||||
v-bind="item.tooltip"
|
||||
:title="item.disabled && item.tooltip.title"
|
||||
>
|
||||
<a-popconfirm
|
||||
v-if="item.popConfirm"
|
||||
v-bind="item.popConfirm"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<a-button :disabled="item.disabled">
|
||||
<AIcon type="DeleteOutlined" v-if="item.key === 'delete'" />
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item.text }}</span>
|
||||
|
|
@ -101,8 +156,14 @@
|
|||
</a-button>
|
||||
</a-popconfirm>
|
||||
<template v-else>
|
||||
<a-button :disabled="item.disabled" @click="item.onClick">
|
||||
<AIcon type="DeleteOutlined" v-if="item.key === 'delete'" />
|
||||
<a-button
|
||||
:disabled="item.disabled"
|
||||
@click="item.onClick"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item.text }}</span>
|
||||
|
|
@ -114,7 +175,10 @@
|
|||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<a-badge :text="slotProps.state.text" :status="statusMap.get(slotProps.state.value)" />
|
||||
<a-badge
|
||||
:text="slotProps.state === 1 ? ' 正常' : '禁用'"
|
||||
:status="statusMap.get(slotProps.state)"
|
||||
/>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
|
|
@ -123,7 +187,11 @@
|
|||
:key="i.key"
|
||||
v-bind="i.tooltip"
|
||||
>
|
||||
<a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm" :disabled="i.disabled">
|
||||
<a-popconfirm
|
||||
v-if="i.popConfirm"
|
||||
v-bind="i.popConfirm"
|
||||
:disabled="i.disabled"
|
||||
>
|
||||
<a-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
|
|
@ -149,43 +217,58 @@
|
|||
</template>
|
||||
</JTable>
|
||||
<Import v-if="importVisible" @close="importVisible = false" />
|
||||
<Export v-if="exportVisible" @close="exportVisible = false" :data="params" />
|
||||
<Process v-if="operationVisible" @close="operationVisible = false" :api="api" :type="type" />
|
||||
<Export
|
||||
v-if="exportVisible"
|
||||
@close="exportVisible = false"
|
||||
:data="params"
|
||||
/>
|
||||
<Process
|
||||
v-if="operationVisible"
|
||||
@close="operationVisible = false"
|
||||
:api="api"
|
||||
:type="type"
|
||||
/>
|
||||
<Save v-if="visible" :data="current" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { query, _delete, _deploy, _undeploy, batchUndeployDevice, batchDeployDevice, batchDeleteDevice } from '@/api/device/instance'
|
||||
import type { ActionsType } from '@/components/Table/index.vue'
|
||||
import {
|
||||
query,
|
||||
_delete,
|
||||
_deploy,
|
||||
_undeploy,
|
||||
batchUndeployDevice,
|
||||
batchDeployDevice,
|
||||
batchDeleteDevice,
|
||||
} from '@/api/device/instance';
|
||||
import type { ActionsType } from '@/components/Table/index.vue';
|
||||
import { getImage, LocalStore } from '@/utils/comm';
|
||||
import { message } from "ant-design-vue";
|
||||
import Import from './Import/index.vue'
|
||||
import Export from './Export/index.vue'
|
||||
import Process from './Process/index.vue'
|
||||
import Save from './Save/index.vue'
|
||||
import { message } from 'ant-design-vue';
|
||||
import Import from './Import/index.vue';
|
||||
import Export from './Export/index.vue';
|
||||
import Process from './Process/index.vue';
|
||||
import Save from './Save/index.vue';
|
||||
import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
|
||||
|
||||
const instanceRef = ref<Record<string, any>>({});
|
||||
const params = ref<Record<string, any>>({})
|
||||
const _selectedRowKeys = ref<string[]>([])
|
||||
const importVisible = ref<boolean>(false)
|
||||
const exportVisible = ref<boolean>(false)
|
||||
const visible = ref<boolean>(false)
|
||||
const current = ref<Record<string, any>>({})
|
||||
const operationVisible = ref<boolean>(false)
|
||||
const api = ref<string>('')
|
||||
const type = ref<string>('')
|
||||
const params = ref<Record<string, any>>({});
|
||||
const _selectedRowKeys = ref<string[]>([]);
|
||||
const importVisible = ref<boolean>(false);
|
||||
const exportVisible = ref<boolean>(false);
|
||||
const visible = ref<boolean>(false);
|
||||
const current = ref<Record<string, any>>({});
|
||||
const operationVisible = ref<boolean>(false);
|
||||
const api = ref<string>('');
|
||||
const type = ref<string>('');
|
||||
|
||||
const statusMap = new Map();
|
||||
statusMap.set('online', 'processing');
|
||||
statusMap.set('offline', 'error');
|
||||
statusMap.set('notActive', 'warning');
|
||||
|
||||
statusMap.set(1, 'processing');
|
||||
statusMap.set(0, 'error');
|
||||
const columns = [
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id'
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
|
|
@ -201,206 +284,237 @@ const columns = [
|
|||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
scopedSlots: true
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'state',
|
||||
key: 'state',
|
||||
scopedSlots: true
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'describe',
|
||||
key: 'describe'
|
||||
key: 'describe',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 250,
|
||||
scopedSlots: true
|
||||
}
|
||||
]
|
||||
scopedSlots: true,
|
||||
},
|
||||
];
|
||||
|
||||
const paramsFormat = (config: Record<string, any>, _terms: Record<string, any>, name?: string) => {
|
||||
if (config?.terms && Array.isArray(config.terms) && config?.terms.length > 0) {
|
||||
(config?.terms || []).map((item: Record<string, any>, index: number) => {
|
||||
if (item?.type) {
|
||||
_terms[`${name ? `${name}.` : ''}terms[${index}].type`] = item.type;
|
||||
}
|
||||
paramsFormat(item, _terms, `${name ? `${name}.` : ''}terms[${index}]`);
|
||||
});
|
||||
const paramsFormat = (
|
||||
config: Record<string, any>,
|
||||
_terms: Record<string, any>,
|
||||
name?: string,
|
||||
) => {
|
||||
if (
|
||||
config?.terms &&
|
||||
Array.isArray(config.terms) &&
|
||||
config?.terms.length > 0
|
||||
) {
|
||||
(config?.terms || []).map(
|
||||
(item: Record<string, any>, index: number) => {
|
||||
if (item?.type) {
|
||||
_terms[`${name ? `${name}.` : ''}terms[${index}].type`] =
|
||||
item.type;
|
||||
}
|
||||
paramsFormat(
|
||||
item,
|
||||
_terms,
|
||||
`${name ? `${name}.` : ''}terms[${index}]`,
|
||||
);
|
||||
},
|
||||
);
|
||||
} else if (!config?.terms && Object.keys(config).length > 0) {
|
||||
Object.keys(config).forEach((key) => {
|
||||
if (config[key]) {
|
||||
_terms[`${name ? `${name}.` : ''}${key}`] = config[key];
|
||||
}
|
||||
});
|
||||
Object.keys(config).forEach((key) => {
|
||||
if (config[key]) {
|
||||
_terms[`${name ? `${name}.` : ''}${key}`] = config[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleParams = (config: Record<string, any>) => {
|
||||
const _terms: Record<string, any> = {};
|
||||
paramsFormat(config, _terms);
|
||||
if(Object.keys(_terms._value).length && Object.keys(_terms).length) {
|
||||
if (Object.keys(_terms._value).length && Object.keys(_terms).length) {
|
||||
const url = new URLSearchParams();
|
||||
Object.keys(_terms).forEach((key) => {
|
||||
url.append(key, _terms[key]);
|
||||
});
|
||||
return url.toString();
|
||||
} else {
|
||||
return ''
|
||||
return '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
const handleAdd = () => {
|
||||
visible.value = true
|
||||
current.value = {}
|
||||
}
|
||||
visible.value = true;
|
||||
current.value = {};
|
||||
};
|
||||
|
||||
/**
|
||||
* 查看
|
||||
*/
|
||||
const handleView = (id: string) => {
|
||||
message.warn(id + '暂未开发')
|
||||
}
|
||||
message.warn(id + '暂未开发');
|
||||
};
|
||||
|
||||
const getActions = (data: Partial<Record<string, any>>, type: 'card' | 'table'): ActionsType[] => {
|
||||
if(!data) return []
|
||||
const getActions = (
|
||||
data: Partial<Record<string, any>>,
|
||||
type: 'card' | 'table',
|
||||
): ActionsType[] => {
|
||||
if (!data) return [];
|
||||
const actions = [
|
||||
{
|
||||
key: 'view',
|
||||
text: "查看",
|
||||
text: '查看',
|
||||
tooltip: {
|
||||
title: '查看'
|
||||
title: '查看',
|
||||
},
|
||||
icon: 'EyeOutlined',
|
||||
onClick: () => {
|
||||
handleView(data.id)
|
||||
}
|
||||
handleView(data.id);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'edit',
|
||||
text: "编辑",
|
||||
text: '编辑',
|
||||
tooltip: {
|
||||
title: '编辑'
|
||||
title: '编辑',
|
||||
},
|
||||
icon: 'EditOutlined',
|
||||
onClick: () => {
|
||||
visible.value = true
|
||||
current.value = data
|
||||
}
|
||||
visible.value = true;
|
||||
current.value = data;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'action',
|
||||
text: data.state.value !== 'notActive' ? "禁用" : "启用",
|
||||
text: data.state.value !== 'notActive' ? '禁用' : '启用',
|
||||
tooltip: {
|
||||
title: data.state.value !== 'notActive' ? "禁用" : "启用",
|
||||
title: data.state.value !== 'notActive' ? '禁用' : '启用',
|
||||
},
|
||||
icon: data.state.value !== 'notActive' ? 'StopOutlined' : 'CheckCircleOutlined',
|
||||
icon:
|
||||
data.state.value !== 'notActive'
|
||||
? 'StopOutlined'
|
||||
: 'CheckCircleOutlined',
|
||||
popConfirm: {
|
||||
title: `确认${data.state.value !== 'notActive' ? "禁用" : "启用"}?`,
|
||||
title: `确认${
|
||||
data.state.value !== 'notActive' ? '禁用' : '启用'
|
||||
}?`,
|
||||
onConfirm: async () => {
|
||||
let response = undefined
|
||||
if(data.state.value !== 'notActive') {
|
||||
response = await _undeploy(data.id)
|
||||
let response = undefined;
|
||||
if (data.state.value !== 'notActive') {
|
||||
response = await _undeploy(data.id);
|
||||
} else {
|
||||
response = await _deploy(data.id)
|
||||
response = await _deploy(data.id);
|
||||
}
|
||||
if(response && response.status === 200) {
|
||||
message.success('操作成功！')
|
||||
instanceRef.value?.reload()
|
||||
if (response && response.status === 200) {
|
||||
message.success('操作成功！');
|
||||
instanceRef.value?.reload();
|
||||
} else {
|
||||
message.error('操作失败！')
|
||||
message.error('操作失败！');
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
text: "删除",
|
||||
text: '删除',
|
||||
disabled: data.state.value !== 'notActive',
|
||||
tooltip: {
|
||||
title: data.state.value !== 'notActive' ? '已启用的设备不能删除' : '删除'
|
||||
title:
|
||||
data.state.value !== 'notActive'
|
||||
? '已启用的设备不能删除'
|
||||
: '删除',
|
||||
},
|
||||
popConfirm: {
|
||||
title: '确认删除?',
|
||||
onConfirm: async () => {
|
||||
const resp = await _delete(data.id)
|
||||
if(resp.status === 200) {
|
||||
message.success('操作成功！')
|
||||
instanceRef.value?.reload()
|
||||
const resp = await _delete(data.id);
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
instanceRef.value?.reload();
|
||||
} else {
|
||||
message.error('操作失败！')
|
||||
message.error('操作失败！');
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
icon: 'DeleteOutlined'
|
||||
}
|
||||
]
|
||||
if(type === 'card') return actions.filter((i: ActionsType) => i.key !== 'view')
|
||||
return actions
|
||||
}
|
||||
icon: 'DeleteOutlined',
|
||||
},
|
||||
];
|
||||
if (type === 'card')
|
||||
return actions.filter((i: ActionsType) => i.key !== 'view');
|
||||
return actions;
|
||||
};
|
||||
|
||||
const onSelectChange = (keys: string[]) => {
|
||||
_selectedRowKeys.value = [...keys]
|
||||
}
|
||||
_selectedRowKeys.value = [...keys];
|
||||
};
|
||||
|
||||
const cancelSelect = () => {
|
||||
_selectedRowKeys.value = []
|
||||
}
|
||||
_selectedRowKeys.value = [];
|
||||
};
|
||||
|
||||
const handleClick = (dt: any) => {
|
||||
if(_selectedRowKeys.value.includes(dt.id)) {
|
||||
const _index = _selectedRowKeys.value.findIndex(i => i === dt.id)
|
||||
_selectedRowKeys.value.splice(_index, 1)
|
||||
if (_selectedRowKeys.value.includes(dt.id)) {
|
||||
const _index = _selectedRowKeys.value.findIndex((i) => i === dt.id);
|
||||
_selectedRowKeys.value.splice(_index, 1);
|
||||
} else {
|
||||
_selectedRowKeys.value = [..._selectedRowKeys.value, dt.id]
|
||||
_selectedRowKeys.value = [..._selectedRowKeys.value, dt.id];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const activeAllDevice = () => {
|
||||
type.value = 'active'
|
||||
const activeAPI = `${BASE_API_PATH}/device-instance/deploy?:X_Access_Token=${LocalStore.get(TOKEN_KEY)}&${handleParams(params)}`;
|
||||
api.value = activeAPI
|
||||
operationVisible.value = true
|
||||
}
|
||||
type.value = 'active';
|
||||
const activeAPI = `${BASE_API_PATH}/device-instance/deploy?:X_Access_Token=${LocalStore.get(
|
||||
TOKEN_KEY,
|
||||
)}&${handleParams(params)}`;
|
||||
api.value = activeAPI;
|
||||
operationVisible.value = true;
|
||||
};
|
||||
|
||||
const syncDeviceStatus = () => {
|
||||
type.value = 'sync'
|
||||
const syncAPI = `${BASE_API_PATH}/device-instance/state/_sync?:X_Access_Token=${LocalStore.get(TOKEN_KEY)}&${handleParams(params)}`;
|
||||
api.value = syncAPI
|
||||
operationVisible.value = true
|
||||
}
|
||||
type.value = 'sync';
|
||||
const syncAPI = `${BASE_API_PATH}/device-instance/state/_sync?:X_Access_Token=${LocalStore.get(
|
||||
TOKEN_KEY,
|
||||
)}&${handleParams(params)}`;
|
||||
api.value = syncAPI;
|
||||
operationVisible.value = true;
|
||||
};
|
||||
|
||||
const delSelectedDevice = async () => {
|
||||
const resp = await batchDeleteDevice(_selectedRowKeys.value)
|
||||
if(resp.status === 200){
|
||||
message.success('操作成功！')
|
||||
_selectedRowKeys.value = []
|
||||
instanceRef.value?.reload()
|
||||
const resp = await batchDeleteDevice(_selectedRowKeys.value);
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
_selectedRowKeys.value = [];
|
||||
instanceRef.value?.reload();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const activeSelectedDevice = async () => {
|
||||
const resp = await batchDeployDevice(_selectedRowKeys.value)
|
||||
if(resp.status === 200){
|
||||
message.success('操作成功！')
|
||||
_selectedRowKeys.value = []
|
||||
instanceRef.value?.reload()
|
||||
const resp = await batchDeployDevice(_selectedRowKeys.value);
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
_selectedRowKeys.value = [];
|
||||
instanceRef.value?.reload();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const disabledSelectedDevice = async () => {
|
||||
const resp = await batchUndeployDevice(_selectedRowKeys.value)
|
||||
if(resp.status === 200){
|
||||
message.success('操作成功！')
|
||||
_selectedRowKeys.value = []
|
||||
instanceRef.value?.reload()
|
||||
const resp = await batchUndeployDevice(_selectedRowKeys.value);
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
_selectedRowKeys.value = [];
|
||||
instanceRef.value?.reload();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,313 @@
|
|||
<template>
|
||||
<div class="card">
|
||||
<div
|
||||
class="card-warp"
|
||||
:class="{ active: active ? 'active' : '' }"
|
||||
@click="handleClick"
|
||||
>
|
||||
<div class="card-content">
|
||||
<a-row :gutter="20">
|
||||
<a-col :span="10">
|
||||
<!-- 图片 -->
|
||||
<div class="card-item-avatar">
|
||||
<slot name="img"> </slot>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<!-- 内容 -->
|
||||
<slot name="content"></slot>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 勾选 -->
|
||||
<div v-if="active" class="checked-icon">
|
||||
<div>
|
||||
<CheckOutlined />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
SearchOutlined,
|
||||
CheckOutlined,
|
||||
DeleteOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { StatusColorEnum } from '@/utils/consts.ts';
|
||||
import type { ActionsType } from '@/components/Table/index.vue';
|
||||
import { PropType } from 'vue';
|
||||
|
||||
type EmitProps = {
|
||||
// (e: 'update:modelValue', data: Record<string, any>): void;
|
||||
(e: 'click', data: Record<string, any>): void;
|
||||
};
|
||||
|
||||
type TableActionsType = Partial<ActionsType>;
|
||||
|
||||
const emit = defineEmits<EmitProps>();
|
||||
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Object as PropType<Record<string, any>>,
|
||||
default: () => {},
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const handleClick = () => {
|
||||
emit('click', props.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.card {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
.checked-icon {
|
||||
position: absolute;
|
||||
right: -22px;
|
||||
bottom: -22px;
|
||||
z-index: 2;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
color: #fff;
|
||||
background-color: red;
|
||||
background-color: #2f54eb;
|
||||
transform: rotate(-45deg);
|
||||
|
||||
> div {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
transform: rotate(45deg);
|
||||
|
||||
> span {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-warp {
|
||||
position: relative;
|
||||
border: 1px solid #e6e6e6;
|
||||
height: 66px;
|
||||
|
||||
&.hover {
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 24px rgba(#000, 0.1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
position: relative;
|
||||
border: 1px solid #2f54eb;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
position: relative;
|
||||
padding: 30px 12px 16px 30px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
top: -16px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 30px + 10px;
|
||||
display: block;
|
||||
width: 15%;
|
||||
min-width: 64px;
|
||||
height: 2px;
|
||||
// background-image: url('/images/rectangle.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.card-item-avatar {
|
||||
// position: relative;
|
||||
// top: -16px;
|
||||
}
|
||||
|
||||
.card-state {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: -12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100px;
|
||||
padding: 2px 0;
|
||||
background-color: rgba(#5995f5, 0.15);
|
||||
transform: skewX(45deg);
|
||||
|
||||
&.success {
|
||||
background-color: @success-color-deprecated-bg;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: rgba(#ff9000, 0.1);
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: rgba(#e50012, 0.1);
|
||||
}
|
||||
|
||||
.card-state-content {
|
||||
transform: skewX(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.card-item-content-title) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.card-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
background-color: rgba(#000, 0);
|
||||
visibility: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
&.show {
|
||||
background-color: rgba(#000, 0.5);
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.item-active {
|
||||
position: relative;
|
||||
color: #2f54eb;
|
||||
|
||||
.checked-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-warp {
|
||||
border: 1px solid #2f54eb;
|
||||
}
|
||||
}
|
||||
|
||||
.card-tools {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
|
||||
.card-button {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
|
||||
& > :deep(span, button) {
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
:deep(button) {
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
background: #f6f6f6;
|
||||
border: 1px solid #e6e6e6;
|
||||
color: #2f54eb;
|
||||
|
||||
&:hover {
|
||||
background-color: @primary-color-hover;
|
||||
border-color: @primary-color-hover;
|
||||
|
||||
span {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: @primary-color-active;
|
||||
border-color: @primary-color-active;
|
||||
|
||||
span {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&.delete {
|
||||
flex-basis: 60px;
|
||||
flex-grow: 0;
|
||||
|
||||
:deep(button) {
|
||||
background: @error-color-deprecated-bg;
|
||||
border: 1px solid @error-color-outline;
|
||||
|
||||
span {
|
||||
color: @error-color !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @error-color-hover;
|
||||
|
||||
span {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: @error-color-active;
|
||||
|
||||
span {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(button[disabled]) {
|
||||
background: @disabled-bg;
|
||||
border-color: @disabled-color;
|
||||
|
||||
span {
|
||||
color: @disabled-color !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @disabled-active-bg;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: @disabled-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// :deep(.ant-tooltip-disabled-compatible-wrapper) {
|
||||
// width: 100%;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,386 @@
|
|||
<!-- 新增、编辑产品 -->
|
||||
<template>
|
||||
<a-modal
|
||||
:title="props.title"
|
||||
:maskClosable="false"
|
||||
destroy-on-close
|
||||
v-model:visible="visible"
|
||||
@ok="submitData"
|
||||
@cancel="close"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
v-bind="layout"
|
||||
width="650px"
|
||||
>
|
||||
<div style="margin-top: 10px">
|
||||
<a-form :layout="'vertical'">
|
||||
<a-row type="flex">
|
||||
<a-col flex="180px">
|
||||
<a-form-item>
|
||||
<div class="upload-image-warp-logo">
|
||||
<div class="upload-image-border-logo">
|
||||
<a-upload
|
||||
name="file"
|
||||
:action="FILE_UPLOAD"
|
||||
:headers="headers"
|
||||
:showUploadList="false"
|
||||
:beforeUpload="beforeUpload"
|
||||
@change="handleChange"
|
||||
:accept="
|
||||
imageTypes && imageTypes.length
|
||||
? imageTypes.toString()
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<div class="upload-image-content-logo">
|
||||
<div
|
||||
class="loading-logo"
|
||||
v-if="logoLoading"
|
||||
>
|
||||
<LoadingOutlined
|
||||
style="font-size: 28px"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="upload-image"
|
||||
v-if="photoValue"
|
||||
:style="
|
||||
photoValue
|
||||
? `background-image: url(${photoValue});`
|
||||
: ''
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
v-if="photoValue"
|
||||
class="upload-image-mask"
|
||||
>
|
||||
点击修改
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="logoLoading">
|
||||
<LoadingOutlined
|
||||
style="font-size: 28px"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<PlusOutlined
|
||||
style="font-size: 28px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<div v-if="logoLoading">
|
||||
<div class="upload-loading-mask">
|
||||
<LoadingOutlined
|
||||
v-if="logoLoading"
|
||||
style="font-size: 28px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col flex="auto">
|
||||
<a-form-item>
|
||||
<template #label>
|
||||
<span>ID</span>
|
||||
<a-tooltip
|
||||
title="若不填写，系统将自动生成唯一ID"
|
||||
>
|
||||
<img
|
||||
class="img-style"
|
||||
:src="getImage('/init-home/mark.png')"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="modelRef.id"
|
||||
placeholder="请输入ID"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="名称">
|
||||
<a-input
|
||||
v-model:value="modelRef.name"
|
||||
placeholder="请输入名称"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item label="产品分类">
|
||||
<a-tree-select
|
||||
showSearch
|
||||
v-model:value="modelRef.productId"
|
||||
placeholder="请选择产品分类"
|
||||
>
|
||||
</a-tree-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="设备类型">
|
||||
<a-row :span="24" :gutter="20">
|
||||
<a-col
|
||||
:span="8"
|
||||
v-for="item in deviceList"
|
||||
:key="item.value"
|
||||
>
|
||||
<ChooseCard
|
||||
:value="item"
|
||||
v-bind="item"
|
||||
@click="handleClick"
|
||||
:active="_selectedRowKeys.includes(item.value)"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img
|
||||
v-if="item.value === 'device'"
|
||||
:src="
|
||||
getImage('/device-type-1.png')
|
||||
"
|
||||
/>
|
||||
<img
|
||||
v-if="
|
||||
item.value === 'childrenDevice'
|
||||
"
|
||||
:src="
|
||||
getImage('/device-type-2.png')
|
||||
"
|
||||
/>
|
||||
<img
|
||||
v-if="item.value === 'gateway'"
|
||||
:src="
|
||||
getImage(
|
||||
'/device/device-type-3.png',
|
||||
)
|
||||
"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<span
|
||||
class="card-style"
|
||||
:style="
|
||||
_selectedRowKeys.includes(
|
||||
item.value,
|
||||
)
|
||||
? 'color: #10239e'
|
||||
: ''
|
||||
"
|
||||
>{{
|
||||
item.value === 'device'
|
||||
? '直连设备'
|
||||
: item.value ===
|
||||
'childrenDevice'
|
||||
? '网关子设备'
|
||||
: item.value === 'gateway'
|
||||
? '网关设备'
|
||||
: ''
|
||||
}}</span
|
||||
>
|
||||
</template>
|
||||
</ChooseCard>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-item>
|
||||
<a-form-item label="说明">
|
||||
<a-textarea
|
||||
v-model:value="modelRef.describe"
|
||||
placeholder="请输入说明"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { queryTree } from '@/api/device/category';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { getImage } from '@/utils/comm.ts';
|
||||
import { message } from 'ant-design-vue';
|
||||
import ChooseCard from '../ChooseCard/index.vue';
|
||||
import { FILE_UPLOAD } from '@/api/comm';
|
||||
|
||||
const emit = defineEmits(['close', 'save']);
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
defult: '',
|
||||
},
|
||||
isAdd: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
const treeList = ref<Record<string, any>[]>([]);
|
||||
const visible = ref(false);
|
||||
const logoLoading = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
const _selectedRowKeys = ref([]);
|
||||
const photoValue = ref('/images/device-product.png');
|
||||
const imageTypes = reactive([
|
||||
'image/jpeg',
|
||||
'image/png',
|
||||
'image/jpg',
|
||||
'image/jfif',
|
||||
'image/pjp',
|
||||
'image/pjpeg',
|
||||
]);
|
||||
const deviceList = ref([
|
||||
{
|
||||
label: '直连设备',
|
||||
value: 'device',
|
||||
},
|
||||
{
|
||||
label: '网关子设备',
|
||||
value: 'childrenDevice',
|
||||
},
|
||||
{
|
||||
label: '网关设备',
|
||||
value: 'gateway',
|
||||
},
|
||||
]);
|
||||
|
||||
const modelRef = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
classifiedId: '',
|
||||
classifiedName: '',
|
||||
deviceType: '',
|
||||
describe: '',
|
||||
photoUrl: '',
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.isAdd,
|
||||
() => {
|
||||
queryTree({ paging: false }).then((resp) => {
|
||||
if (resp.status === 200) {
|
||||
treeList.value = resp.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
/**
|
||||
* 显示弹窗
|
||||
*/
|
||||
const show = () => {
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭弹窗
|
||||
*/
|
||||
const close = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
/**
|
||||
* 卡片点击事件
|
||||
*/
|
||||
const handleClick = (dt: any) => {
|
||||
_selectedRowKeys.value = dt;
|
||||
};
|
||||
/**
|
||||
* 文件上传之前
|
||||
*/
|
||||
const beforeUpload = (file: any) => {
|
||||
const isType: any = imageTypes.includes(file.type);
|
||||
if (!isType) {
|
||||
message.error(`请上传.jpg.png.jfif.pjp.pjpeg.jpeg格式的图片`);
|
||||
return false;
|
||||
}
|
||||
const isSize = file.size / 1024 / 1024 < 4;
|
||||
if (!isSize) {
|
||||
message.error(`图片大小必须小于${4}M`);
|
||||
}
|
||||
return isType && isSize;
|
||||
};
|
||||
|
||||
/**
|
||||
* 文件改变事件
|
||||
*/
|
||||
const handleChange = (info: any) => {
|
||||
if (info.file.status === 'uploading') {
|
||||
logoLoading.value = true;
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
info.file.url = info.file.response?.result;
|
||||
logoLoading.value = false;
|
||||
logoLoading.value = info.file.response?.result;
|
||||
}
|
||||
};
|
||||
defineExpose({
|
||||
show: show,
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.card-style {
|
||||
position: relative;
|
||||
top: 8px;
|
||||
}
|
||||
.upload-image-warp-logo {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.upload-image-border-logo {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px dashed #d9d9d9;
|
||||
transition: all 0.3s;
|
||||
width: 160px;
|
||||
height: 150px;
|
||||
&:hover {
|
||||
border: 1px dashed #1890ff;
|
||||
display: flex;
|
||||
}
|
||||
.upload-image-content-logo {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 160px;
|
||||
height: 150px;
|
||||
padding: 8px;
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
cursor: pointer;
|
||||
.loading-logo {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
}
|
||||
.loading-icon {
|
||||
position: absolute;
|
||||
}
|
||||
.upload-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
background-size: cover;
|
||||
}
|
||||
.upload-image-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
background-size: inherit;
|
||||
}
|
||||
.upload-image-mask {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
&:hover .upload-image-mask {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,498 @@
|
|||
<template>
|
||||
<a-card class="device-product">
|
||||
<Search :columns="query.columns" target="category" />
|
||||
<JTable :columns="columns" :request="queryProductList" ref="tableRef">
|
||||
<template #headerTitle>
|
||||
<a-button type="primary" @click="add"
|
||||
><plus-outlined />新增</a-button
|
||||
>
|
||||
</template>
|
||||
<template #deviceType="slotProps">
|
||||
<div>{{ slotProps.deviceType.text }}</div>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
@click="handleClick"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:active="_selectedRowKeys.includes(slotProps.id)"
|
||||
:status="slotProps.state"
|
||||
:statusText="slotProps.state === 1 ? '正常' : '禁用'"
|
||||
:statusNames="{
|
||||
1: 'success',
|
||||
0: 'error',
|
||||
}"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img :src="getImage('/device-product.png')" />
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<h3>{{ slotProps.name }}</h3>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
设备类型
|
||||
</div>
|
||||
<div>直连设备</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<a-popconfirm
|
||||
v-if="item.popConfirm"
|
||||
v-bind="item.popConfirm"
|
||||
>
|
||||
<a-button :disabled="item.disabled">
|
||||
<DeleteOutlined v-if="item.key === 'delete'" />
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item.text }}</span>
|
||||
</template>
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
<template v-else>
|
||||
<a-button :disabled="item.disabled">
|
||||
<DeleteOutlined v-if="item.key === 'delete'" />
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item.text }}</span>
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<a-badge
|
||||
:text="slotProps.state === 1 ? '正常' : '禁用'"
|
||||
:status="statusMap.get(slotProps.state)"
|
||||
/>
|
||||
</template>
|
||||
<template #id="slotProps">
|
||||
<a>{{ slotProps.id }}</a>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
<a-tooltip
|
||||
v-for="i in getActions(slotProps)"
|
||||
:key="i.key"
|
||||
v-bind="i.tooltip"
|
||||
>
|
||||
<a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
|
||||
<a-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></a-button>
|
||||
</a-popconfirm>
|
||||
<a-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
v-else
|
||||
@click="i.onClick && i.onClick(slotProps)"
|
||||
>
|
||||
<a-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></a-button>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
</JTable>
|
||||
<!-- 新增、编辑 -->
|
||||
<Save ref="saveRef" />
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import server from '@/utils/request';
|
||||
import type { ActionsType } from '@/components/Table/index.vue';
|
||||
import { getImage } from '@/utils/comm';
|
||||
import {
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
PlusOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import {
|
||||
getProviders,
|
||||
category,
|
||||
queryOrgThree,
|
||||
queryGatewayList,
|
||||
queryProductList,
|
||||
_deploy,
|
||||
_undeploy,
|
||||
deleteProduct,
|
||||
addProduct,
|
||||
editProduct,
|
||||
queryProductId,
|
||||
} from '@/api/device/product';
|
||||
import { isNoCommunity } from '@/utils/utils';
|
||||
import { typeOptions } from '@/components/Search/util';
|
||||
import Save from './Save/index.vue';
|
||||
/**
|
||||
* 表格数据
|
||||
*/
|
||||
const statusMap = new Map();
|
||||
statusMap.set(1, 'success');
|
||||
statusMap.set(0, 'error');
|
||||
const columns = [
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '接入方式',
|
||||
dataIndex: 'accessName',
|
||||
key: 'accessName',
|
||||
},
|
||||
{
|
||||
title: '设备类型',
|
||||
dataIndex: 'deviceType',
|
||||
key: 'deviceType',
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'state',
|
||||
key: 'state',
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'describe',
|
||||
key: 'describe',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 250,
|
||||
scopedSlots: true,
|
||||
},
|
||||
];
|
||||
|
||||
const _selectedRowKeys = ref<string[]>([]);
|
||||
|
||||
const onSelectChange = (keys: string[]) => {
|
||||
_selectedRowKeys.value = [...keys];
|
||||
};
|
||||
|
||||
const cancelSelect = () => {
|
||||
_selectedRowKeys.value = [];
|
||||
};
|
||||
|
||||
const handleClick = (dt: any) => {
|
||||
if (_selectedRowKeys.value.includes(dt.id)) {
|
||||
const _index = _selectedRowKeys.value.findIndex((i) => i === dt.id);
|
||||
_selectedRowKeys.value.splice(_index, 1);
|
||||
} else {
|
||||
_selectedRowKeys.value = [..._selectedRowKeys.value, dt.id];
|
||||
}
|
||||
};
|
||||
|
||||
const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||
if (!data) {
|
||||
return [];
|
||||
}
|
||||
return [
|
||||
{
|
||||
key: 'view',
|
||||
text: '查看',
|
||||
tooltip: {
|
||||
title: '查看',
|
||||
},
|
||||
icon: 'EyeOutlined',
|
||||
},
|
||||
{
|
||||
key: 'edit',
|
||||
text: '编辑',
|
||||
tooltip: {
|
||||
title: '编辑',
|
||||
},
|
||||
|
||||
icon: 'EditOutlined',
|
||||
},
|
||||
{
|
||||
key: 'download',
|
||||
text: '导出',
|
||||
tooltip: {
|
||||
title: '导出',
|
||||
},
|
||||
|
||||
icon: 'icon-xiazai',
|
||||
},
|
||||
{
|
||||
key: 'action',
|
||||
text: data.state !== 0 ? '禁用' : '启用',
|
||||
tooltip: {
|
||||
title: data.state !== 0 ? '禁用' : '启用',
|
||||
},
|
||||
icon: data.state !== 0 ? 'StopOutlined' : 'CheckCircleOutlined',
|
||||
popConfirm: {
|
||||
title: `确认${data.state !== 0 ? '禁用' : '启用'}?`,
|
||||
onConfirm: async () => {
|
||||
let response = undefined;
|
||||
if (data.state !== 0) {
|
||||
response = await _undeploy(data.id);
|
||||
} else {
|
||||
response = await _deploy(data.id);
|
||||
}
|
||||
if (response && response.status === 200) {
|
||||
message.success('操作成功！');
|
||||
tableRef.value?.reload();
|
||||
} else {
|
||||
message.error('操作失败！');
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
text: '删除',
|
||||
disabled: data.state !== 0,
|
||||
tooltip: {
|
||||
title: data.state !== 0 ? '已启用的设备不能删除' : '删除',
|
||||
},
|
||||
popConfirm: {
|
||||
title: '确认删除?',
|
||||
onConfirm: async () => {
|
||||
const resp = await deleteProduct(data.id);
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
tableRef.value?.reload();
|
||||
} else {
|
||||
message.error('操作失败！');
|
||||
}
|
||||
},
|
||||
},
|
||||
icon: 'DeleteOutlined',
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
const add = () => {
|
||||
saveRef.value.show();
|
||||
};
|
||||
|
||||
// 筛选
|
||||
const listData = ref([]);
|
||||
const typeList = ref([]);
|
||||
const tableRef = ref<Record<string, any>>({});
|
||||
const query = reactive({
|
||||
columns: [
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
search: {
|
||||
first: true,
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '网关类型',
|
||||
key: 'accessProvider',
|
||||
dataIndex: 'accessProvider',
|
||||
search: {
|
||||
type: 'select',
|
||||
options: async () => {
|
||||
return new Promise((res) => {
|
||||
getProviders().then((resp: any) => {
|
||||
listData.value = [];
|
||||
// const list = () => {
|
||||
if (isNoCommunity) {
|
||||
listData.value = (resp?.result || []).map(
|
||||
(item: any) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}),
|
||||
);
|
||||
} else {
|
||||
listData.value = (resp?.result || [])
|
||||
.filter((i: any) =>
|
||||
[
|
||||
'mqtt-server-gateway',
|
||||
'http-server-gateway',
|
||||
'mqtt-client-gateway',
|
||||
'tcp-server-gateway',
|
||||
].includes(i.id),
|
||||
)
|
||||
.map((item: any) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}));
|
||||
// }
|
||||
}
|
||||
res(listData.value);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '接入方式',
|
||||
key: 'accessName',
|
||||
dataIndex: 'accessName',
|
||||
search: {
|
||||
type: 'select',
|
||||
options: async () => {
|
||||
return new Promise((res) => {
|
||||
queryGatewayList({
|
||||
paging: false,
|
||||
}).then((resp: any) => {
|
||||
typeList.value = [];
|
||||
typeList.value = resp.result.map((item: any) => ({
|
||||
label: item.name,
|
||||
value: item.name,
|
||||
}));
|
||||
res(typeList.value);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '设备类型',
|
||||
key: 'deviceType',
|
||||
dataIndex: 'deviceType',
|
||||
search: {
|
||||
type: 'select',
|
||||
options: [
|
||||
{
|
||||
label: '直连设备',
|
||||
value: 'device',
|
||||
},
|
||||
{
|
||||
label: '网关子设备',
|
||||
value: 'childrenDevice',
|
||||
},
|
||||
{
|
||||
label: '网关设备',
|
||||
value: 'gateway',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'state',
|
||||
dataIndex: 'state',
|
||||
search: {
|
||||
type: 'select',
|
||||
options: [
|
||||
{
|
||||
label: '正常',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '禁用',
|
||||
value: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
key: 'describe',
|
||||
dataIndex: 'describe',
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '分类',
|
||||
key: 'classified',
|
||||
dataIndex: 'classifiedId',
|
||||
search: {
|
||||
type: 'treeSelect',
|
||||
options: async () => {
|
||||
return new Promise((res) => {
|
||||
category({
|
||||
paging: false,
|
||||
}).then((resp) => {
|
||||
res(resp.result);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '所属部门',
|
||||
key: 'id$dim-assets',
|
||||
dataIndex: 'id$dim-assets',
|
||||
search: {
|
||||
first: true,
|
||||
type: 'treeSelect',
|
||||
options: async () => {
|
||||
return new Promise((res) => {
|
||||
queryOrgThree({ paging: false }).then((resp: any) => {
|
||||
const formatValue = (list: any[]) => {
|
||||
const _list: any[] = [];
|
||||
list.forEach((item) => {
|
||||
if (item.children) {
|
||||
item.children = formatValue(
|
||||
item.children,
|
||||
);
|
||||
}
|
||||
_list.push({
|
||||
...item,
|
||||
value: JSON.stringify({
|
||||
assetType: 'product',
|
||||
targets: [
|
||||
{
|
||||
type: 'org',
|
||||
id: item.id,
|
||||
},
|
||||
],
|
||||
}),
|
||||
});
|
||||
});
|
||||
return _list;
|
||||
};
|
||||
res(formatValue(resp.result));
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 250,
|
||||
scopedSlots: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
const saveRef = ref();
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.box {
|
||||
padding: 20px;
|
||||
background: #f0f2f5;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -177,3 +177,15 @@ type ObserverMetadata = {
|
|||
subscribe: (data: any) => void;
|
||||
next: (data: any) => void;
|
||||
};
|
||||
|
||||
// 部门
|
||||
export type DepartmentItem = {
|
||||
id: string;
|
||||
name: string;
|
||||
path: string;
|
||||
sortIndex: number;
|
||||
level: number;
|
||||
code: string;
|
||||
parentId: string;
|
||||
children: DepartmentItem[];
|
||||
};
|
||||
|
|
@ -801,7 +801,7 @@ const rulesFrom = ref({
|
|||
{
|
||||
required: true,
|
||||
message: '请输入系统名称',
|
||||
trigger: 'blur',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
headerTheme: [
|
||||
|
|
|
|||
Loading…
Reference in New Issue