vue2-client 1.14.18 → 1.14.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs//345/207/275/346/225/260/344/275/277/347/224/250/347/233/270/345/205/263.md +4 -2
- package/package.json +1 -1
- package/src/base-client/components/TreeList/TreeList.vue +91 -0
- package/src/base-client/components/TreeList/TreeNode.vue +81 -0
- package/src/base-client/components/common/XCardSet/XTiltle.vue +191 -0
- package/src/base-client/components/his/XHisEditor/XHisEditor.vue +0 -1
- package/src/base-client/components/his/XSidebar/XSidebar.vue +3 -3
- package/src/base-client/components/his/XTextCard/XTextCard.vue +207 -207
- package/src/base-client/components/his/XTreeRows/TreeNode.vue +100 -100
- package/src/base-client/components/his/XTreeRows/XTreeRows.vue +197 -197
- package/src/base-client/components/his/threeTestOrders/editor.vue +111 -111
- package/src/base-client/components/his/threeTestOrders/test.vue +21 -0
- package/src/base-client/components/his/threeTestOrders/textBox.vue +522 -526
- package/src/base-client/components/his/threeTestOrders/threeTestOrders.vue +386 -181
- package/src/router/async/router.map.js +2 -2
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
- attr: 用于传递参数绑定到 modal 弹框上
|
|
18
18
|
- getOutEnv 获取获取 outEnv
|
|
19
19
|
- this.getRealKeyData(obj) 获取真实的数据 传递 {a_a:"1"} 返回 {a:"1"}
|
|
20
|
+
- this.currUser.operaInfo 获取当前用户信息
|
|
20
21
|
|
|
21
22
|
```js
|
|
22
23
|
this.openDialog('xxx', 5, {}, {}, {})
|
|
@@ -58,6 +59,7 @@ this.openDialog('xxx', 5, {}, {}, {})
|
|
|
58
59
|
- curdAddBefore(func) 点击新增按钮时触发 传参为 打开新增表单函数
|
|
59
60
|
afterDelete( res (删除接口返回数据)) 删除后触发
|
|
60
61
|
action(record (当前记录), id (当前记录主键), actionType (操作类型)) 操作按钮触发
|
|
62
|
+
- expandedGrid:"栅格名"
|
|
61
63
|
|
|
62
64
|
# x-report 插槽 使用说明
|
|
63
65
|
|
|
@@ -102,7 +104,7 @@ function() {
|
|
|
102
104
|
### 获取表单数据之后 提交 执行logic写法
|
|
103
105
|
|
|
104
106
|
```js
|
|
105
|
-
function() {
|
|
107
|
+
function () {
|
|
106
108
|
// 获取主formtable组件
|
|
107
109
|
const res = await this.getComponentByName('from').asyncSubmit()
|
|
108
110
|
// 把组件当前选中的项及select_id传给后台业务逻辑
|
|
@@ -113,7 +115,7 @@ function() {
|
|
|
113
115
|
### OpenDialog 弹框确认事件
|
|
114
116
|
|
|
115
117
|
```js
|
|
116
|
-
function() {
|
|
118
|
+
function () {
|
|
117
119
|
// 获取主formtable组件 在OpenDialog 事件中使用 getComponentByName 获取 既可以获取到打开的栅格中的组件对象,也可以获取到上级调用这个栅格的栅格的对象
|
|
118
120
|
const res = this.getComponentByName('main')
|
|
119
121
|
}
|
package/package.json
CHANGED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="tree-container">
|
|
3
|
+
<div class="tree-list">
|
|
4
|
+
<tree-node
|
|
5
|
+
v-for="node in treeData"
|
|
6
|
+
:key="node.id"
|
|
7
|
+
:node="node"
|
|
8
|
+
@toggle="toggleNode"/>
|
|
9
|
+
</div>
|
|
10
|
+
</div>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script>
|
|
14
|
+
import TreeNode from './TreeNode.vue'
|
|
15
|
+
|
|
16
|
+
export default {
|
|
17
|
+
name: 'TreeList',
|
|
18
|
+
components: {
|
|
19
|
+
TreeNode
|
|
20
|
+
},
|
|
21
|
+
data() {
|
|
22
|
+
return {
|
|
23
|
+
treeData: [
|
|
24
|
+
{
|
|
25
|
+
id: '1',
|
|
26
|
+
title: '体征',
|
|
27
|
+
expanded: false,
|
|
28
|
+
children: [
|
|
29
|
+
{
|
|
30
|
+
id: '1-1',
|
|
31
|
+
title: '一般情况'
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
id: '1-2',
|
|
35
|
+
title: '皮肤粘膜'
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
id: '1-3',
|
|
39
|
+
title: '头颈',
|
|
40
|
+
expanded: false,
|
|
41
|
+
children: [
|
|
42
|
+
{
|
|
43
|
+
id: '1-3-1',
|
|
44
|
+
title: '头部'
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
id: '1-3-2',
|
|
48
|
+
title: '颈部'
|
|
49
|
+
}
|
|
50
|
+
]
|
|
51
|
+
}
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
methods: {
|
|
58
|
+
toggleNode(node) {
|
|
59
|
+
node.expanded = !node.expanded
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
</script>
|
|
64
|
+
|
|
65
|
+
<style scoped>
|
|
66
|
+
.tree-container {
|
|
67
|
+
width: 240px;
|
|
68
|
+
height: 400px;
|
|
69
|
+
border: 1px solid #e8e8e8;
|
|
70
|
+
overflow-y: auto;
|
|
71
|
+
padding: 8px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* 自定义滚动条样式 */
|
|
75
|
+
.tree-container::-webkit-scrollbar {
|
|
76
|
+
width: 6px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.tree-container::-webkit-scrollbar-thumb {
|
|
80
|
+
background-color: #ccc;
|
|
81
|
+
border-radius: 3px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.tree-container::-webkit-scrollbar-track {
|
|
85
|
+
background-color: #f5f5f5;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.tree-list {
|
|
89
|
+
font-size: 14px;
|
|
90
|
+
}
|
|
91
|
+
</style>
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="tree-node">
|
|
3
|
+
<div class="node-content" @click="handleClick">
|
|
4
|
+
<span v-if="hasChildren" class="toggle-icon">
|
|
5
|
+
{{ node.expanded ? '-' : '+' }}
|
|
6
|
+
</span>
|
|
7
|
+
<span class="node-title">{{ node.title }}</span>
|
|
8
|
+
</div>
|
|
9
|
+
<div v-if="hasChildren && node.expanded" class="node-children">
|
|
10
|
+
<tree-node
|
|
11
|
+
v-for="child in node.children"
|
|
12
|
+
:key="child.id"
|
|
13
|
+
:node="child"
|
|
14
|
+
@toggle="$emit('toggle', $event)"
|
|
15
|
+
:level="level + 1"/>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
</template>
|
|
19
|
+
|
|
20
|
+
<script>
|
|
21
|
+
export default {
|
|
22
|
+
name: 'TreeNode',
|
|
23
|
+
props: {
|
|
24
|
+
node: {
|
|
25
|
+
type: Object,
|
|
26
|
+
required: true
|
|
27
|
+
},
|
|
28
|
+
level: {
|
|
29
|
+
type: Number,
|
|
30
|
+
default: 0
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
computed: {
|
|
34
|
+
hasChildren() {
|
|
35
|
+
return this.node.children && this.node.children.length > 0
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
methods: {
|
|
39
|
+
handleClick() {
|
|
40
|
+
if (this.hasChildren) {
|
|
41
|
+
this.$emit('toggle', this.node)
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
</script>
|
|
47
|
+
|
|
48
|
+
<style scoped>
|
|
49
|
+
.tree-node {
|
|
50
|
+
margin: 2px 0;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.node-content {
|
|
54
|
+
display: flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
padding: 4px 0;
|
|
57
|
+
user-select: none;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.toggle-icon {
|
|
61
|
+
width: 16px;
|
|
62
|
+
text-align: center;
|
|
63
|
+
font-size: 14px;
|
|
64
|
+
color: #666;
|
|
65
|
+
margin-right: 4px;
|
|
66
|
+
cursor: pointer;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.node-title {
|
|
70
|
+
flex: 1;
|
|
71
|
+
cursor: default;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.node-content:hover {
|
|
75
|
+
background-color: #f5f5f5;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.node-children {
|
|
79
|
+
padding-left: 20px;
|
|
80
|
+
}
|
|
81
|
+
</style>
|
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<a-row
|
|
3
|
+
class="title_box"
|
|
4
|
+
:style="{backgroundColor: requiredParameters.backgroundColor,height:requiredParameters.height}"
|
|
5
|
+
type="flex"
|
|
6
|
+
v-model="requiredParameters">
|
|
7
|
+
<a-col class="title_col_left" :flex="3">
|
|
8
|
+
<div class="title_img_box">
|
|
9
|
+
<img src="../img/header10086.png" class="title_img" alt="">
|
|
10
|
+
</div>
|
|
11
|
+
<div class="title_name">{{ requiredParameters.title }}</div>
|
|
12
|
+
</a-col>
|
|
13
|
+
<a-col class="title_col_right" id="titleSelect" :flex="3" style="padding-right: 3%" v-model="dateData">
|
|
14
|
+
<div class="title_date_box">
|
|
15
|
+
<div class="title_data">{{ dateData.date }}</div>
|
|
16
|
+
<div class="title_week">{{ dateData.dayOfWeek }}</div>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="title_time">{{ dateData.time }}</div>
|
|
19
|
+
<div style="font-size: x-large;margin-left: 1%">|</div>
|
|
20
|
+
<div class="title_refresh" @click="refreshTitle"><a-icon type="undo" style="font-size: x-large;"/></div>
|
|
21
|
+
<div class="title_refresh_box">
|
|
22
|
+
<div class="title_refresh_time">{{ dateData.refreshTime }}</div>
|
|
23
|
+
<div class="latest_update_time">最新更新时间</div>
|
|
24
|
+
</div>
|
|
25
|
+
</a-col>
|
|
26
|
+
</a-row>
|
|
27
|
+
</template>
|
|
28
|
+
|
|
29
|
+
<script>
|
|
30
|
+
|
|
31
|
+
export default {
|
|
32
|
+
name: 'TitleComponent',
|
|
33
|
+
components: {},
|
|
34
|
+
data () {
|
|
35
|
+
return {
|
|
36
|
+
dateData: {
|
|
37
|
+
date: '',
|
|
38
|
+
dayOfWeek: '',
|
|
39
|
+
time: '',
|
|
40
|
+
refreshTime: ''
|
|
41
|
+
},
|
|
42
|
+
timer: null
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
props: {
|
|
46
|
+
requiredParameters: {
|
|
47
|
+
type: Object,
|
|
48
|
+
default: () => ({
|
|
49
|
+
title: '',
|
|
50
|
+
backgroundColor: '',
|
|
51
|
+
height: ''
|
|
52
|
+
}),
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
created () {
|
|
56
|
+
this.updateDateData()
|
|
57
|
+
this.startTimer()
|
|
58
|
+
},
|
|
59
|
+
beforeDestroy () {
|
|
60
|
+
this.stopTimer()
|
|
61
|
+
},
|
|
62
|
+
methods: {
|
|
63
|
+
// 刷新页面
|
|
64
|
+
refreshTitle () {
|
|
65
|
+
this.$forceUpdate()
|
|
66
|
+
const now = new Date()
|
|
67
|
+
this.dateData.refreshTime = now.toLocaleTimeString()
|
|
68
|
+
this.$emit('refreshTitle')
|
|
69
|
+
},
|
|
70
|
+
updateDateData () {
|
|
71
|
+
const now = new Date()
|
|
72
|
+
const options = { weekday: 'long' }
|
|
73
|
+
this.dateData.date = this.formatDate(now)
|
|
74
|
+
this.dateData.time = this.formatTime(now)
|
|
75
|
+
this.dateData.dayOfWeek = now.toLocaleDateString(undefined, options)
|
|
76
|
+
this.dateData.refreshTime = now.toLocaleTimeString()
|
|
77
|
+
},
|
|
78
|
+
formatDate (date) {
|
|
79
|
+
const month = date.getMonth() + 1
|
|
80
|
+
const day = date.getDate()
|
|
81
|
+
return `${month}月${day}日`
|
|
82
|
+
},
|
|
83
|
+
formatTime (date) {
|
|
84
|
+
const hours = String(date.getHours()).padStart(2, '0')
|
|
85
|
+
const minutes = String(date.getMinutes()).padStart(2, '0')
|
|
86
|
+
return `${hours}:${minutes}`
|
|
87
|
+
},
|
|
88
|
+
startTimer () {
|
|
89
|
+
this.timer = setInterval(() => {
|
|
90
|
+
const now = new Date()
|
|
91
|
+
this.dateData.time = this.formatTime(now)
|
|
92
|
+
}, 10000) // 每秒更新一次
|
|
93
|
+
},
|
|
94
|
+
stopTimer () {
|
|
95
|
+
if (this.timer) {
|
|
96
|
+
clearInterval(this.timer)
|
|
97
|
+
this.timer = null
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
</script>
|
|
103
|
+
|
|
104
|
+
<style scoped>
|
|
105
|
+
.title_box {
|
|
106
|
+
width: 100%;
|
|
107
|
+
min-height:42px;
|
|
108
|
+
}
|
|
109
|
+
.title_col_left {
|
|
110
|
+
height: 100%;
|
|
111
|
+
color: white;
|
|
112
|
+
display: flex;
|
|
113
|
+
align-content: center;
|
|
114
|
+
align-items: center;
|
|
115
|
+
}
|
|
116
|
+
.title_col_right {
|
|
117
|
+
height: 100%;
|
|
118
|
+
color: white;
|
|
119
|
+
display: flex;
|
|
120
|
+
align-content: center;
|
|
121
|
+
align-items: center;
|
|
122
|
+
justify-content: flex-end;
|
|
123
|
+
}
|
|
124
|
+
.title_img_box {
|
|
125
|
+
height: 80%;
|
|
126
|
+
width: auto;
|
|
127
|
+
margin-left: 1%;
|
|
128
|
+
border-radius: 50%;
|
|
129
|
+
background-color: #35baf6;
|
|
130
|
+
}
|
|
131
|
+
.title_img{
|
|
132
|
+
width: 100%;
|
|
133
|
+
height: 100%;
|
|
134
|
+
}
|
|
135
|
+
.title_name {
|
|
136
|
+
font-size: medium !important;
|
|
137
|
+
font-weight: bold;
|
|
138
|
+
margin-left: 1%;
|
|
139
|
+
}
|
|
140
|
+
.title_date_box{
|
|
141
|
+
width: 20%;
|
|
142
|
+
height: 100%;
|
|
143
|
+
display: flex;
|
|
144
|
+
flex-direction: column;
|
|
145
|
+
justify-content: center;
|
|
146
|
+
}
|
|
147
|
+
.title_data{
|
|
148
|
+
display: flex;
|
|
149
|
+
justify-content: center;
|
|
150
|
+
align-items: center;
|
|
151
|
+
font-size: smaller;
|
|
152
|
+
}
|
|
153
|
+
.title_week{
|
|
154
|
+
display: flex;
|
|
155
|
+
justify-content: center;
|
|
156
|
+
align-items: center;
|
|
157
|
+
font-size: smaller;
|
|
158
|
+
}
|
|
159
|
+
.title_time{
|
|
160
|
+
font-size: x-large;
|
|
161
|
+
}
|
|
162
|
+
.title_refresh{
|
|
163
|
+
margin-left: 1%;
|
|
164
|
+
height: 100%;
|
|
165
|
+
align-content: center;
|
|
166
|
+
align-items: center;
|
|
167
|
+
cursor: pointer;
|
|
168
|
+
display: flex;
|
|
169
|
+
width: 7%;
|
|
170
|
+
justify-content: center;
|
|
171
|
+
min-width: 31px;
|
|
172
|
+
}
|
|
173
|
+
.title_refresh:hover{
|
|
174
|
+
background-color: rgb(31, 138, 137);
|
|
175
|
+
}
|
|
176
|
+
.title_refresh:active{
|
|
177
|
+
background-color: rgb(26, 129, 128);
|
|
178
|
+
}
|
|
179
|
+
.title_refresh_box{
|
|
180
|
+
margin-right: 1%;
|
|
181
|
+
}
|
|
182
|
+
.latest_update_time{
|
|
183
|
+
font-size: x-small;
|
|
184
|
+
}
|
|
185
|
+
.title_refresh_time{
|
|
186
|
+
display: flex;
|
|
187
|
+
font-size: x-small;
|
|
188
|
+
align-content: center;
|
|
189
|
+
justify-content: center;
|
|
190
|
+
}
|
|
191
|
+
</style>
|
|
@@ -132,14 +132,14 @@ export default {
|
|
|
132
132
|
currentCol = currentCol.parentNode
|
|
133
133
|
}
|
|
134
134
|
if (currentCol) {
|
|
135
|
-
//
|
|
135
|
+
// 更新当前列的宽度
|
|
136
136
|
const drawerWidth = isOpen ? 33.3 : 2
|
|
137
137
|
// 强制更新样式
|
|
138
138
|
currentCol.style.cssText = `
|
|
139
139
|
flex: 0 0 ${drawerWidth}% !important;
|
|
140
140
|
max-width: ${drawerWidth}% !important;
|
|
141
141
|
transition: all 0.3s;`
|
|
142
|
-
//
|
|
142
|
+
// 触发XTab组件重新计算宽度
|
|
143
143
|
this.$nextTick(() => {
|
|
144
144
|
const tabComponent = this.$el.querySelector('.ant-tabs')
|
|
145
145
|
if (tabComponent) {
|
|
@@ -147,7 +147,7 @@ export default {
|
|
|
147
147
|
window.dispatchEvent(new Event('resize'))
|
|
148
148
|
}
|
|
149
149
|
})
|
|
150
|
-
//
|
|
150
|
+
// 更新其他列宽度
|
|
151
151
|
otherCols.forEach((col, index) => {
|
|
152
152
|
if (index < this.mainWithData.length) {
|
|
153
153
|
const widthValue = isOpen ? this.mainWithData[index].min : this.mainWithData[index].max
|