Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
blp
commit
c7660bc128
|
|
@ -14,10 +14,10 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.children-full-height {
|
||||
> :nth-child(1) {
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
//.children-full-height {
|
||||
// > :nth-child(1) {
|
||||
// min-height: 100%;
|
||||
// }
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
|
@ -286,6 +286,7 @@ handleItems()
|
|||
.JSearch-warp {
|
||||
padding: 24px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.JSearch-content {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -10,17 +10,23 @@
|
|||
.jtable-body-header-right {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
.jtable-setting-item {
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
.jtable-body-header-right-button {
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
gap: 8px;
|
||||
.jtable-setting-item {
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color-hover;
|
||||
}
|
||||
&:hover {
|
||||
color: @primary-color-hover;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: @primary-color-active;
|
||||
&.active {
|
||||
color: @primary-color-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@ const JTable = defineComponent<JTableProps>({
|
|||
slots: [
|
||||
'headerTitle', // 顶部左边插槽
|
||||
'card', // 卡片内容
|
||||
'rightExtraRender'
|
||||
],
|
||||
emits: [
|
||||
'modelChange', // 切换卡片和表格
|
||||
|
|
@ -254,16 +255,22 @@ const JTable = defineComponent<JTableProps>({
|
|||
{slots.headerTitle && slots.headerTitle()}
|
||||
</div>
|
||||
<div class={styles["jtable-body-header-right"]}>
|
||||
<div class={[styles["jtable-setting-item"], ModelEnum.CARD === _model.value ? styles['active'] : '']} onClick={() => {
|
||||
_model.value = ModelEnum.CARD
|
||||
}}>
|
||||
<AppstoreOutlined />
|
||||
</div>
|
||||
<div class={[styles["jtable-setting-item"], ModelEnum.TABLE === _model.value ? styles['active'] : '']} onClick={() => {
|
||||
_model.value = ModelEnum.TABLE
|
||||
}}>
|
||||
<UnorderedListOutlined />
|
||||
</div>
|
||||
{/* 顶部右边插槽 */}
|
||||
{slots.rightExtraRender && slots.rightExtraRender()}
|
||||
{
|
||||
!props.model && <div class={styles["jtable-body-header-right-button"]}>
|
||||
<div class={[styles["jtable-setting-item"], ModelEnum.CARD === _model.value ? styles['active'] : '']} onClick={() => {
|
||||
_model.value = ModelEnum.CARD
|
||||
}}>
|
||||
<AppstoreOutlined />
|
||||
</div>
|
||||
<div class={[styles["jtable-setting-item"], ModelEnum.TABLE === _model.value ? styles['active'] : '']} onClick={() => {
|
||||
_model.value = ModelEnum.TABLE
|
||||
}}>
|
||||
<UnorderedListOutlined />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{/* content */}
|
||||
|
|
|
|||
|
|
@ -220,7 +220,8 @@ export function filterAsnycRouter(asyncRouterMap: any, parentCode = '', level =
|
|||
route.component = resolveComponent(route.code) || BlankLayoutPage;
|
||||
}
|
||||
} else {
|
||||
route.component = resolveComponent(route.code) || BlankLayoutPage;
|
||||
console.log(route.code)
|
||||
route.component = route.component || resolveComponent(route.code) || BlankLayoutPage;
|
||||
}
|
||||
delete route.name
|
||||
return route
|
||||
|
|
|
|||
|
|
@ -1,222 +1,234 @@
|
|||
<template>
|
||||
<Search :columns="columns" target="device-instance" />
|
||||
<JTable
|
||||
ref="instanceRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
|
||||
:rowSelection="{
|
||||
selectedRowKeys: _selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
@cancelSelect="cancelSelect"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleAdd">新增</a-button>
|
||||
<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
|
||||
<page-container>
|
||||
<Search :columns="columns" target="device-instance" />
|
||||
<JTable
|
||||
ref="instanceRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
|
||||
:rowSelection="{
|
||||
selectedRowKeys: _selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
@cancelSelect="cancelSelect"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleAdd">新增</a-button>
|
||||
<a-dropdown>
|
||||
<a-button
|
||||
>批量操作 <AIcon type="DownOutlined"
|
||||
/></a-button>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<a-button @click="exportVisible = true"
|
||||
><AIcon
|
||||
type="CheckCircleOutlined"
|
||||
/>激活全部设备</a-button
|
||||
type="ExportOutlined"
|
||||
/>批量导出设备</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
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-button @click="importVisible = true"
|
||||
><AIcon
|
||||
type="DeleteOutlined"
|
||||
/>删除选中设备</a-button
|
||||
type="ImportOutlined"
|
||||
/>批量导入设备</a-button
|
||||
>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item
|
||||
v-if="_selectedRowKeys.length"
|
||||
title="确认激活选中设备?"
|
||||
>
|
||||
<a-popconfirm @confirm="activeSelectedDevice">
|
||||
<a-button type="primary"
|
||||
</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="CheckOutlined"
|
||||
/>激活选中设备</a-button
|
||||
type="SyncOutlined"
|
||||
/>同步设备状态</a-button
|
||||
>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item v-if="_selectedRowKeys.length">
|
||||
<a-popconfirm
|
||||
@confirm="disabledSelectedDevice"
|
||||
title="确认禁用选中设备?"
|
||||
</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-button type="primary" danger
|
||||
><AIcon
|
||||
type="StopOutlined"
|
||||
/>禁用选中设备</a-button
|
||||
<a-popconfirm
|
||||
@confirm="activeSelectedDevice"
|
||||
>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<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>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
@click="handleClick"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:active="_selectedRowKeys.includes(slotProps.id)"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
online: 'success',
|
||||
offline: 'error',
|
||||
notActive: 'warning',
|
||||
}"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img
|
||||
:src="
|
||||
getImage('/device/instance/device-card.png')
|
||||
"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
@click="handleClick"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:active="_selectedRowKeys.includes(slotProps.id)"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
online: 'success',
|
||||
offline: 'error',
|
||||
notActive: 'warning',
|
||||
}"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<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>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<div class="card-item-content-text">设备类型</div>
|
||||
<div>{{ slotProps.deviceType?.text }}</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="card-item-content-text">产品名称</div>
|
||||
<div>{{ slotProps.productName }}</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<template #content>
|
||||
<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>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
产品名称
|
||||
</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-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'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
<template v-else>
|
||||
<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>
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<a-badge
|
||||
:text="slotProps.state?.text"
|
||||
:status="statusMap.get(slotProps.state?.value)"
|
||||
/>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
<a-tooltip
|
||||
v-bind="item.tooltip"
|
||||
:title="item.disabled && item.tooltip.title"
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
v-bind="i.tooltip"
|
||||
>
|
||||
<a-popconfirm
|
||||
v-if="item.popConfirm"
|
||||
v-bind="item.popConfirm"
|
||||
:disabled="item.disabled"
|
||||
v-if="i.popConfirm"
|
||||
v-bind="i.popConfirm"
|
||||
:disabled="i.disabled"
|
||||
>
|
||||
<a-button :disabled="item.disabled">
|
||||
<AIcon
|
||||
type="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"
|
||||
@click="item.onClick"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
: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>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<a-badge
|
||||
:text="slotProps.state?.text"
|
||||
:status="statusMap.get(slotProps.state?.value)"
|
||||
/>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
<a-tooltip
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
v-bind="i.tooltip"
|
||||
>
|
||||
<a-popconfirm
|
||||
v-if="i.popConfirm"
|
||||
v-bind="i.popConfirm"
|
||||
:disabled="i.disabled"
|
||||
>
|
||||
<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>
|
||||
</a-space>
|
||||
</template>
|
||||
</JTable>
|
||||
</page-container>
|
||||
<Import v-if="importVisible" @close="importVisible = false" />
|
||||
<Export
|
||||
v-if="exportVisible"
|
||||
|
|
@ -229,7 +241,12 @@
|
|||
:api="api"
|
||||
:type="type"
|
||||
/>
|
||||
<Save v-if="visible" :data="current" @close="visible = false" @save="saveBtn" />
|
||||
<Save
|
||||
v-if="visible"
|
||||
:data="current"
|
||||
@close="visible = false"
|
||||
@save="saveBtn"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -368,8 +385,8 @@ const handleAdd = () => {
|
|||
* 查看
|
||||
*/
|
||||
const handleView = (id: string) => {
|
||||
router.push('/device/instance/detail/' + id)
|
||||
}
|
||||
router.push('/device/instance/detail/' + id);
|
||||
};
|
||||
|
||||
const getActions = (
|
||||
data: Partial<Record<string, any>>,
|
||||
|
|
@ -520,10 +537,10 @@ const disabledSelectedDevice = async () => {
|
|||
_selectedRowKeys.value = [];
|
||||
instanceRef.value?.reload();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const saveBtn = () => {
|
||||
visible.value = false
|
||||
instanceRef.value?.reload()
|
||||
}
|
||||
visible.value = false;
|
||||
instanceRef.value?.reload();
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue