Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
commit
dfa9a5ac63
|
@ -1,10 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<j-form class="table" ref="formTableRef" :model="modelRef">
|
<j-form class="table" ref="formTableRef" :model="modelRef">
|
||||||
<j-table
|
<j-table
|
||||||
|
v-if="modelRef.dataSource.length !== 0"
|
||||||
:dataSource="modelRef.dataSource"
|
:dataSource="modelRef.dataSource"
|
||||||
:columns="FormTableColumns"
|
:columns="FormTableColumns"
|
||||||
:scroll="{ x: 1000, y: 550 }"
|
:scroll="{ x: 1000, y: 550 }"
|
||||||
>
|
>
|
||||||
|
<template #headerCell="{ column }">
|
||||||
|
<template
|
||||||
|
v-if="column.key === 'nodeId' || column.key === 'action'"
|
||||||
|
>
|
||||||
|
<span> {{ column.title }} </span>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<span> {{ column.title }} </span>
|
||||||
|
<span style="margin-left: 5px; color: red">*</span>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
<template #bodyCell="{ column: { dataIndex }, record, index }">
|
<template #bodyCell="{ column: { dataIndex }, record, index }">
|
||||||
<template v-if="dataIndex === 'name'">
|
<template v-if="dataIndex === 'name'">
|
||||||
<j-form-item
|
<j-form-item
|
||||||
|
@ -24,15 +36,20 @@
|
||||||
</j-form-item>
|
</j-form-item>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="dataIndex === 'id'">
|
<template v-if="dataIndex === 'id'">
|
||||||
<j-form-item :name="['dataSource', index, 'id']">
|
<j-form-item
|
||||||
|
v-show="false"
|
||||||
|
:name="['dataSource', index, 'id']"
|
||||||
|
>
|
||||||
<j-input
|
<j-input
|
||||||
v-model:value="record[dataIndex]"
|
v-model:value="record[dataIndex]"
|
||||||
disabled
|
disabled
|
||||||
:bordered="false"
|
:bordered="false"
|
||||||
></j-input>
|
></j-input>
|
||||||
</j-form-item>
|
</j-form-item>
|
||||||
|
<div style="margin: -24px 0 0 10px">
|
||||||
|
{{ record[dataIndex] }}
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-if="dataIndex === 'accessModes'">
|
<template v-if="dataIndex === 'accessModes'">
|
||||||
<j-form-item
|
<j-form-item
|
||||||
class="form-item"
|
class="form-item"
|
||||||
|
@ -163,12 +180,15 @@
|
||||||
title="确认删除"
|
title="确认删除"
|
||||||
@confirm="clickDelete(record.id)"
|
@confirm="clickDelete(record.id)"
|
||||||
>
|
>
|
||||||
<a><AIcon type="DeleteOutlined" /></a>
|
<a style="color: red"
|
||||||
|
><AIcon type="DeleteOutlined"
|
||||||
|
/></a>
|
||||||
</j-popconfirm>
|
</j-popconfirm>
|
||||||
</j-tooltip>
|
</j-tooltip>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</j-table>
|
</j-table>
|
||||||
|
<j-empty v-else style="margin-top: 10%" />
|
||||||
</j-form>
|
</j-form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -286,7 +306,20 @@ watch(
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.table {}
|
.table {
|
||||||
|
:deep(.ant-table-tbody) {
|
||||||
|
.ant-table-cell {
|
||||||
|
padding: 24px 0 0 0;
|
||||||
|
}
|
||||||
|
.ant-table-cell-fix-right-first {
|
||||||
|
padding: 0 0 0 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.ant-pagination) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.form-item {
|
.form-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,6 +10,8 @@
|
||||||
:load-data="onLoadData"
|
:load-data="onLoadData"
|
||||||
:tree-data="treeData"
|
:tree-data="treeData"
|
||||||
v-model:checkedKeys="checkedKeys"
|
v-model:checkedKeys="checkedKeys"
|
||||||
|
:selectedKeys="selectedKeys"
|
||||||
|
:selectable="false"
|
||||||
checkable
|
checkable
|
||||||
@check="onCheck"
|
@check="onCheck"
|
||||||
:height="600"
|
:height="600"
|
||||||
|
@ -26,7 +28,7 @@
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</j-tree>
|
</j-tree>
|
||||||
<j-empty v-else />
|
<j-empty v-else style="margin-top: 22%" />
|
||||||
</j-spin>
|
</j-spin>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -216,13 +218,16 @@ watch(
|
||||||
.tree-content {
|
.tree-content {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
|
min-width: 180px;
|
||||||
.tree-header {
|
.tree-header {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
.tree-selected {
|
.tree-selected {
|
||||||
color: #1d39c4;
|
padding: 2px 5px;
|
||||||
|
background-color: #d6e4ff;
|
||||||
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
.tree-title {
|
.tree-title {
|
||||||
color: black;
|
color: black;
|
||||||
|
|
|
@ -170,38 +170,39 @@ export const FormTableColumns = [
|
||||||
title: '名称',
|
title: '名称',
|
||||||
dataIndex: 'name',
|
dataIndex: 'name',
|
||||||
key: 'name',
|
key: 'name',
|
||||||
width: 200,
|
width: 140,
|
||||||
fixed: 'left',
|
fixed: 'left',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'nodeId',
|
title: 'nodeId',
|
||||||
dataIndex: 'id',
|
dataIndex: 'id',
|
||||||
key: 'id',
|
key: 'id',
|
||||||
|
width: 180,
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '访问类型',
|
title: '访问类型',
|
||||||
dataIndex: 'accessModes',
|
dataIndex: 'accessModes',
|
||||||
key: 'accessModes',
|
key: 'accessModes',
|
||||||
width: 300,
|
width: 260,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '采集频率',
|
title: '采集频率',
|
||||||
key: 'interval',
|
key: 'interval',
|
||||||
dataIndex: 'interval',
|
dataIndex: 'interval',
|
||||||
width: 260,
|
width: 220,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '只推送变化的数据',
|
title: '只推送变化的数据',
|
||||||
key: 'features',
|
key: 'features',
|
||||||
dataIndex: 'features',
|
dataIndex: 'features',
|
||||||
width: 200,
|
width: 160,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '操作',
|
title: '操作',
|
||||||
key: 'action',
|
key: 'action',
|
||||||
dataIndex: 'action',
|
dataIndex: 'action',
|
||||||
fixed: 'right',
|
fixed: 'right',
|
||||||
width: 80,
|
width: 60,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
|
@ -132,7 +132,6 @@ watch(
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
|
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -189,7 +189,7 @@ watch(
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
|
// box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
.header {
|
.header {
|
||||||
|
|
|
@ -193,7 +193,7 @@ watch(
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
|
// box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
.header {
|
.header {
|
||||||
|
|
|
@ -209,7 +209,7 @@ watch(
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
|
// box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
.header {
|
.header {
|
||||||
|
|
|
@ -129,7 +129,7 @@ watch(
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
|
// box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.dash-board-item {
|
.dash-board-item {
|
||||||
|
|
|
@ -122,8 +122,9 @@ export default {
|
||||||
height: 150px;
|
height: 150px;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
|
// box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
|
||||||
|
border: 1px solid #e0e4e8;
|
||||||
|
border-radius: 2px;
|
||||||
.echarts-item-left {
|
.echarts-item-left {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
Loading…
Reference in New Issue