vue2-client 1.16.55 → 1.16.59

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue2-client",
3
- "version": "1.16.55",
3
+ "version": "1.16.59",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",
@@ -177,7 +177,7 @@ defineExpose({
177
177
  border: 1px solid #CDCDCD;
178
178
  color: #5D5C5C;
179
179
  width: auto;
180
- min-width: 110px;
180
+ min-width: 124px;
181
181
  max-width: 140px;
182
182
  white-space: nowrap;
183
183
  overflow: hidden;
@@ -24,7 +24,7 @@ const wrapperClassObject = computed(() => {
24
24
 
25
25
  // 通用布尔样式开关(以存在/空字符串/'true' 为真)
26
26
  const booleanStyleKeys = [
27
- 'hasTopMargin', 'useStyle7', 'useCycle', 'useStyle8'
27
+ 'hasTopMargin', 'useStyle7', 'useCycle', 'useStyle8', 'ant-tabs-bar-left0'
28
28
  ]
29
29
  for (const key of booleanStyleKeys) {
30
30
  const val = a[key]
@@ -405,5 +405,12 @@ defineExpose({
405
405
  line-height: 0px !important;
406
406
  }
407
407
  }
408
+ // 侧边栏tab页签移除左侧空白区域
409
+ &.t-tab-ant-tabs-bar-left0 {
410
+ :deep(.ant-tabs-bar) {
411
+ border-bottom: 2px solid #0057FE;
412
+ margin: 20px 0px 0 0px;
413
+ }
414
+ }
408
415
  }
409
416
  </style>
@@ -2,14 +2,8 @@
2
2
  <a-card :bordered="false">
3
3
  <x-form-table
4
4
  title="示例表单"
5
- :queryParamsName="queryParamsName"
6
- :fixedAddForm="fixedAddForm"
7
- :x-tree-config-name="xTreeConfigName"
8
- :externalSelectedRowKeys="selectedKeys"
9
- @action="action"
10
- @selectRow="selectRow"
11
- @columnClick="columnClick"
12
- serviceName="af-revenue"
5
+ queryParamsName="ceshiCRUD"
6
+ serviceName="af-linepatrol"
13
7
  ref="xFormTable">
14
8
  </x-form-table>
15
9
  </a-card>
@@ -17,7 +11,6 @@
17
11
 
18
12
  <script>
19
13
  import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
20
- import { microDispatch } from '@vue2-client/utils/microAppUtils'
21
14
 
22
15
  export default {
23
16
  name: 'Demo',
@@ -27,9 +20,9 @@ export default {
27
20
  data () {
28
21
  return {
29
22
  // 查询配置文件名
30
- queryParamsName: 'address_management',
23
+ queryParamsName: 'ceshiCRUD',
31
24
  // 查询配置左侧tree
32
- xTreeConfigName: 'addressType',
25
+ xTreeConfigName: '',
33
26
  // 新增表单固定值
34
27
  fixedAddForm: {},
35
28
  // 是否显示详情抽屉
@@ -45,41 +38,6 @@ export default {
45
38
  }
46
39
  },
47
40
  methods: {
48
- test () {
49
- this.$refs.xFormTable.setTableData([])
50
- },
51
- defaultF () {
52
- this.$refs.xFormTable.setTableSize('default')
53
- },
54
- middleF () {
55
- this.$refs.xFormTable.setTableSize('middle')
56
- },
57
- smallF () {
58
- this.$refs.xFormTable.setTableSize('small')
59
- },
60
- columnClick (key, value, record) {
61
- microDispatch({
62
- type: 'v3route',
63
- path: '/bingliguanli/dianzibingliluru',
64
- props: { selected: arguments[0].his_f_admission_id }
65
- })
66
- },
67
- action (record, id, actionType) {
68
- this.detailVisible = true
69
- console.log('触发了详情操作', record, id, actionType)
70
- },
71
- onClose () {
72
- this.detailVisible = false
73
- // 关闭详情之后重新查询表单
74
- this.$refs.xFormTable.refreshTable(true)
75
- },
76
- selectRow (selectedRowKeys, selectedRows) {
77
- this.selected = {
78
- keys: selectedRowKeys,
79
- rows: selectedRows
80
- }
81
- console.log('selectedDemo', this.selected)
82
- },
83
41
  },
84
42
  computed: {},
85
43
  }
@@ -1,186 +1,186 @@
1
- // print.js
2
-
3
- export function printElement (elementToPrint) {
4
- // 创建一个新的浏览器窗口
5
- const printWindow = window.open('', '_blank', 'height=1024,width=768')
6
- // 设置新窗口的文档内容
7
- printWindow.document.write(`
8
- <html>
9
- <head>
10
- <title>Print</title>
11
- <style>
12
- @page {
13
- size: auto;
14
- margin: 0mm;
15
- }
16
- html, body {
17
- margin: 0;
18
- padding: 0;
19
- width: 100%;
20
- height: 100%;
21
- }
22
- #print-container {
23
- display: none
24
- }
25
- .img{
26
- width: 95%;
27
- height: 180px;
28
- object-fit: cover;
29
- }
30
- .reportMain {
31
- text-align: center;
32
- margin: 0 auto;
33
- font-size: 16px;
34
- color: #000;
35
- background-color: #fff;
36
- padding: 15px;
37
- border-radius: 8px;
38
-
39
- .reportTitle {
40
- font-weight: bold;
41
- }
42
-
43
- .subTitle {
44
- display: flex;
45
- justify-content: space-between;
46
- margin-bottom: 1%;
47
-
48
- .subTitleItems {
49
- max-width: 30%;
50
- }
51
- }
52
-
53
- .inputsDiv {
54
- display: flex;
55
- justify-content: space-between;
56
- .inputsDivItem {
57
- display: flex;
58
- align-items: center;
59
- padding: 0 4px;
60
- white-space: nowrap;
61
- .inputsDivItemLabel {
62
- padding: 0 4px;
63
- }
64
- }
65
- }
66
-
67
- .reportTable {
68
- width: 100%;
69
- border-collapse: collapse;
70
- table-layout:fixed;
71
- word-break:break-all;
72
- text-align: center;
73
- }
74
- }
75
- .reportMainForDisplay {
76
- text-align: center;
77
- margin: 10% auto;
78
- font-size: 16px;
79
- color: #000;
80
- background-color: #fff;
81
- padding: 15px;
82
- border-radius: 8px;
83
-
84
- .reportTitle {
85
- font-weight: bold;
86
- }
87
-
88
- .subTitle {
89
- display: flex;
90
- justify-content: space-between;
91
-
92
- .subTitleItems {
93
- max-width: 30%;
94
- }
95
- }
96
-
97
- .inputsDiv {
98
- display: flex;
99
- justify-content: space-around;
100
- .inputsDivItem {
101
- display: flex;
102
- align-items: center;
103
- padding: 0 4px;
104
- white-space: nowrap;
105
- .inputsDivItemLabel {
106
- padding: 0 4px;
107
- }
108
- }
109
- }
110
-
111
- .reportTable {
112
- width: 100%;
113
- border-collapse: collapse;
114
- table-layout:fixed;
115
- word-break:break-all;
116
- }
117
- }
118
- .reportMainNoPadding {
119
- text-align: center;
120
- margin: 0 auto;
121
- font-size: 16px;
122
- color: #000;
123
- background-color: #fff;
124
- border-radius: 8px;
125
-
126
- .reportTitle {
127
- font-weight: bold;
128
- }
129
-
130
- .subTitle {
131
- display: flex;
132
- justify-content: space-between;
133
-
134
- .subTitleItems {
135
- max-width: 30%;
136
- }
137
- }
138
-
139
- .inputsDiv {
140
- display: flex;
141
- justify-content: space-between;
142
- .inputsDivItem {
143
- display: flex;
144
- align-items: center;
145
- padding: 0 4px;
146
- white-space: nowrap;
147
- .inputsDivItemLabel {
148
- padding: 0 4px;
149
- }
150
- }
151
- }
152
-
153
- .reportTable {
154
- width: 100%;
155
- border-collapse: collapse;
156
- table-layout:fixed;
157
- word-break:break-all;
158
- }
159
- }
160
- .tools{
161
- position: fixed;
162
- right: 2%;
163
- text-align: right;
164
- width: 60%;
165
- cursor: pointer;
166
- .toolsItem{
167
- width: 15%;
168
- margin-right: 3%;
169
- display: inline-block;
170
- }
171
- }
172
- </style>
173
- </head>
174
- <body>
175
- <!-- 将需要打印的元素内容复制到新窗口中 -->
176
- ${elementToPrint.innerHTML}
177
- </body>
178
- </html>
179
- `)
180
- // 延迟执行打印,以确保新窗口的内容已加载完成
181
- printWindow.document.close() // 关闭文档流,确保内容完全加载
182
- setTimeout(() => {
183
- printWindow.print() // 调用打印方法
184
- printWindow.close()
185
- }, 500) // 延迟500毫秒后执行打印
186
- }
1
+ // print.js
2
+
3
+ export function printElement (elementToPrint) {
4
+ // 创建一个新的浏览器窗口
5
+ const printWindow = window.open('', '_blank', 'height=1024,width=768')
6
+ // 设置新窗口的文档内容
7
+ printWindow.document.write(`
8
+ <html>
9
+ <head>
10
+ <title>Print</title>
11
+ <style>
12
+ @page {
13
+ size: auto;
14
+ margin: 0mm;
15
+ }
16
+ html, body {
17
+ margin: 0;
18
+ padding: 0;
19
+ width: 100%;
20
+ height: 100%;
21
+ }
22
+ #print-container {
23
+ display: none
24
+ }
25
+ .img{
26
+ width: 95%;
27
+ height: 180px;
28
+ object-fit: cover;
29
+ }
30
+ .reportMain {
31
+ text-align: center;
32
+ margin: 0 auto;
33
+ font-size: 16px;
34
+ color: #000;
35
+ background-color: #fff;
36
+ padding: 15px;
37
+ border-radius: 8px;
38
+
39
+ .reportTitle {
40
+ font-weight: bold;
41
+ }
42
+
43
+ .subTitle {
44
+ display: flex;
45
+ justify-content: space-between;
46
+ margin-bottom: 1%;
47
+
48
+ .subTitleItems {
49
+ max-width: 30%;
50
+ }
51
+ }
52
+
53
+ .inputsDiv {
54
+ display: flex;
55
+ justify-content: space-between;
56
+ .inputsDivItem {
57
+ display: flex;
58
+ align-items: center;
59
+ padding: 0 4px;
60
+ white-space: nowrap;
61
+ .inputsDivItemLabel {
62
+ padding: 0 4px;
63
+ }
64
+ }
65
+ }
66
+
67
+ .reportTable {
68
+ width: 100%;
69
+ border-collapse: collapse;
70
+ table-layout:fixed;
71
+ word-break:break-all;
72
+ text-align: center;
73
+ }
74
+ }
75
+ .reportMainForDisplay {
76
+ text-align: center;
77
+ margin: 10% auto;
78
+ font-size: 16px;
79
+ color: #000;
80
+ background-color: #fff;
81
+ padding: 15px;
82
+ border-radius: 8px;
83
+
84
+ .reportTitle {
85
+ font-weight: bold;
86
+ }
87
+
88
+ .subTitle {
89
+ display: flex;
90
+ justify-content: space-between;
91
+
92
+ .subTitleItems {
93
+ max-width: 30%;
94
+ }
95
+ }
96
+
97
+ .inputsDiv {
98
+ display: flex;
99
+ justify-content: space-around;
100
+ .inputsDivItem {
101
+ display: flex;
102
+ align-items: center;
103
+ padding: 0 4px;
104
+ white-space: nowrap;
105
+ .inputsDivItemLabel {
106
+ padding: 0 4px;
107
+ }
108
+ }
109
+ }
110
+
111
+ .reportTable {
112
+ width: 100%;
113
+ border-collapse: collapse;
114
+ table-layout:fixed;
115
+ word-break:break-all;
116
+ }
117
+ }
118
+ .reportMainNoPadding {
119
+ text-align: center;
120
+ margin: 0 auto;
121
+ font-size: 16px;
122
+ color: #000;
123
+ background-color: #fff;
124
+ border-radius: 8px;
125
+
126
+ .reportTitle {
127
+ font-weight: bold;
128
+ }
129
+
130
+ .subTitle {
131
+ display: flex;
132
+ justify-content: space-between;
133
+
134
+ .subTitleItems {
135
+ max-width: 30%;
136
+ }
137
+ }
138
+
139
+ .inputsDiv {
140
+ display: flex;
141
+ justify-content: space-between;
142
+ .inputsDivItem {
143
+ display: flex;
144
+ align-items: center;
145
+ padding: 0 4px;
146
+ white-space: nowrap;
147
+ .inputsDivItemLabel {
148
+ padding: 0 4px;
149
+ }
150
+ }
151
+ }
152
+
153
+ .reportTable {
154
+ width: 100%;
155
+ border-collapse: collapse;
156
+ table-layout:fixed;
157
+ word-break:break-all;
158
+ }
159
+ }
160
+ .tools{
161
+ position: fixed;
162
+ right: 2%;
163
+ text-align: right;
164
+ width: 60%;
165
+ cursor: pointer;
166
+ .toolsItem{
167
+ width: 15%;
168
+ margin-right: 3%;
169
+ display: inline-block;
170
+ }
171
+ }
172
+ </style>
173
+ </head>
174
+ <body>
175
+ <!-- 将需要打印的元素内容复制到新窗口中 -->
176
+ ${elementToPrint.innerHTML}
177
+ </body>
178
+ </html>
179
+ `)
180
+ // 延迟执行打印,以确保新窗口的内容已加载完成
181
+ printWindow.document.close() // 关闭文档流,确保内容完全加载
182
+ setTimeout(() => {
183
+ printWindow.print() // 调用打印方法
184
+ printWindow.close()
185
+ }, 500) // 延迟500毫秒后执行打印
186
+ }
@@ -645,7 +645,17 @@ export default {
645
645
  // 应用根节点样式
646
646
  if (Object.keys(rootStyles).length > 0) {
647
647
  Object.entries(rootStyles).forEach(([property, value]) => {
648
- component.$el.style.setProperty(property, value, 'important')
648
+ // 兼容 Ant Row gutter 在列上写入的行内 padding-left/right,
649
+ // 这里同时写入四个方向的长属性,确保覆盖。
650
+ if (property === 'padding') {
651
+ component.$el.style.setProperty('padding', value, 'important')
652
+ component.$el.style.setProperty('padding-left', value, 'important')
653
+ component.$el.style.setProperty('padding-right', value, 'important')
654
+ component.$el.style.setProperty('padding-top', value, 'important')
655
+ component.$el.style.setProperty('padding-bottom', value, 'important')
656
+ } else {
657
+ component.$el.style.setProperty(property, value, 'important')
658
+ }
649
659
  })
650
660
  }
651
661
 
@@ -683,8 +693,25 @@ export default {
683
693
  const hasNewNodes = mutations.some(mutation =>
684
694
  mutation.type === 'childList' && mutation.addedNodes.length > 0
685
695
  )
696
+ const styleChanged = mutations.some(mutation =>
697
+ mutation.type === 'attributes' && mutation.attributeName === 'style'
698
+ )
686
699
 
687
- if (hasNewNodes) {
700
+ if (hasNewNodes || styleChanged) {
701
+ // 重新应用根样式(处理 gutter 改写列 padding 的情况)
702
+ if (Object.keys(rootStyles).length > 0) {
703
+ Object.entries(rootStyles).forEach(([property, value]) => {
704
+ if (property === 'padding') {
705
+ component.$el.style.setProperty('padding', value, 'important')
706
+ component.$el.style.setProperty('padding-left', value, 'important')
707
+ component.$el.style.setProperty('padding-right', value, 'important')
708
+ component.$el.style.setProperty('padding-top', value, 'important')
709
+ component.$el.style.setProperty('padding-bottom', value, 'important')
710
+ } else {
711
+ component.$el.style.setProperty(property, value, 'important')
712
+ }
713
+ })
714
+ }
688
715
  applyStyles()
689
716
  }
690
717
  })
@@ -693,7 +720,8 @@ export default {
693
720
  observer.observe(component.$el, {
694
721
  childList: true,
695
722
  subtree: true,
696
- attributes: false
723
+ attributes: true,
724
+ attributeFilter: ['style']
697
725
  })
698
726
 
699
727
  // 3秒后停止观察
@@ -820,5 +848,9 @@ export default {
820
848
  .flexItem {
821
849
  border-radius: 8px;
822
850
  height: 100%;
851
+ :deep(.ant-card-body) {
852
+ padding: 0 !important;
853
+ }
823
854
  }
855
+
824
856
  </style>
@@ -17,6 +17,7 @@ export default {
17
17
  tipMsg: '正在获取汇总数据。。。',
18
18
  exportType: false,
19
19
  type: 'export',
20
+ modalTitle: '',
20
21
  selectedExportColumns: [],
21
22
  exportSelectedRows: false,
22
23
  allColumnsSelected: false,
@@ -29,12 +30,14 @@ export default {
29
30
  methods: {
30
31
  // 导出选中或本页数据
31
32
  handleExport (type, title) {
33
+ this.modalTitle = '选择导出列'
32
34
  this.exportFileName = title || '查询导出'
33
35
  this.type = 'export'
34
36
  this.handle(type)
35
37
  },
36
- // 导出选中或本页数据
38
+ // 打印选中或本页数据
37
39
  handlePrint (type, printData) {
40
+ this.modalTitle = '选择打印数据列'
38
41
  this.type = 'print'
39
42
  this.printData = printData
40
43
  this.handle(type)
@@ -224,7 +227,7 @@ export default {
224
227
 
225
228
  <template>
226
229
  <a-modal
227
- title="选择导出列"
230
+ :title="modalTitle"
228
231
  width="35vw"
229
232
  :z-index="1001"
230
233
  :confirmLoading="confirmLoading"
@@ -53,8 +53,8 @@
53
53
  <!-- 支付详情(同一行展示,仅在混合支付手动模式且选择方式>1时出现) -->
54
54
  <div v-if="isMixedPaymentManualMode && selectedMethods.length > 1" class="mixed-payment-section simple">
55
55
  <div class="payment-operation-row">
56
- <div class="payment-inline">
57
- <div v-for="method in selectedMethods" :key="method" class="inline-field">
56
+ <a-row :gutter="0" class="amount-info">
57
+ <a-col v-for="method in selectedMethods" :key="method" :span="6" class="form-row">
58
58
  <label class="form-label">{{ getAmountLabel(method) }}</label>
59
59
  <a-input
60
60
  v-model="paymentAmounts[method]"
@@ -63,8 +63,8 @@
63
63
  class="form-input"
64
64
  @change="updatePaymentAmount(method, $event)"
65
65
  />
66
- </div>
67
- </div>
66
+ </a-col>
67
+ </a-row>
68
68
  </div>
69
69
  </div>
70
70
  </div>
@@ -652,6 +652,7 @@ export default {
652
652
  .mixed-payment-section {
653
653
  margin: 0;
654
654
  padding: 0;
655
+ margin-top: 40px;
655
656
  background: transparent;
656
657
  border: none;
657
658
  }
@@ -714,14 +715,7 @@ export default {
714
715
  margin-top: 12px;
715
716
  }
716
717
 
717
- .payment-inline {
718
- display: flex;
719
- flex-wrap: wrap;
720
- align-items: center;
721
- justify-content: center;
722
- column-gap: 32px;
723
- row-gap: 16px;
724
- }
718
+ /* 支付详情采用与顶部相同的栅格布局,故移除横向内联容器样式 */
725
719
 
726
720
  .inline-field {
727
721
  display: inline-flex;
@@ -1,17 +1,19 @@
1
1
  <template>
2
2
  <div
3
3
  class="drawer"
4
- :class="{ 'drawer-collapsed': !isOpen }">
4
+ :class="[{ 'drawer-collapsed': !isOpen }, wrapperClassObject()]"
5
+ :style="drawerStyle">
5
6
  <div
6
7
  v-show="!isFrameConfig"
7
8
  class="drawer-toggle"
8
9
  :class="{ 'toggle-collapsed': !isOpen }"
10
+ :style="toggleStyle"
9
11
  @click="toggleDrawer">
10
12
  <div class="arrow">
11
13
  {{ isOpen ? '›' : '‹' }}
12
14
  </div>
13
15
  </div>
14
- <div class="drawer-content" v-show="isOpen">
16
+ <div class="drawer-content" v-show="isOpen" :style="contentStyle">
15
17
  <x-report
16
18
  ref="x_report"
17
19
  :configName="queryParamsName"
@@ -51,15 +53,39 @@ export default {
51
53
  type: Boolean,
52
54
  default: false
53
55
  },
54
- // 展开时所占宽度百分比(影响父级 ant-col 的 flex 与 max-width)
56
+ // 展开时所占宽度百分比(percent模式使用,影响父级 ant-col 的 flex 与 max-width)
55
57
  expandedWidthPercent: {
56
58
  type: Number,
57
59
  default: 33.3
58
60
  },
59
- // 收缩时所占宽度百分比
61
+ // 收缩时所占宽度百分比(percent模式使用)
60
62
  collapsedWidthPercent: {
61
63
  type: Number,
62
64
  default: 2
65
+ },
66
+ // 展开时所占宽度像素值(px模式使用)
67
+ expandedWidth: {
68
+ type: Number,
69
+ default: 602
70
+ },
71
+ // 收缩时所占宽度像素值(px模式使用)
72
+ collapsedWidth: {
73
+ type: Number,
74
+ default: 26
75
+ },
76
+ // 总宽度像素值(px模式使用)
77
+ totalWidth: {
78
+ type: Number,
79
+ default: 1638
80
+ },
81
+ // 宽度计算模式:'percent' 百分比模式,'px' 像素模式
82
+ // 使用示例:
83
+ // percent模式: <x-sidebar :width-mode="'percent'" :expanded-width-percent="40" :collapsed-width-percent="3" />
84
+ // px模式: <x-sidebar :width-mode="'px'" :expanded-width="500" :collapsed-width="30" />
85
+ widthMode: {
86
+ type: String,
87
+ default: 'percent',
88
+ validator: value => ['percent', 'px'].includes(value)
63
89
  }
64
90
  },
65
91
  data () {
@@ -88,18 +114,29 @@ export default {
88
114
  })
89
115
  }
90
116
  },
117
+ wrapperClassObject () {
118
+ const attrs = this.$attrs || {}
119
+ const classes = {}
120
+ const booleanStyleKeys = ['']
121
+ booleanStyleKeys.forEach(key => {
122
+ const val = attrs[key]
123
+ const truthy = val === true || val === '' || val === 'true'
124
+ if (truthy) classes[`x-sidebar-${key}`] = true
125
+ })
126
+ return classes
127
+ },
91
128
  // 更新card-body的padding
92
129
  updateCardBodyPadding () {
93
130
  this.$nextTick(() => {
94
131
  const cardBody = this.$el.querySelector('.ant-card-body')
95
132
  if (cardBody) {
96
- cardBody.style.padding = '3%'
133
+ cardBody.style.padding = '0px'
97
134
  } else {
98
135
  // 如果找不到元素,可能需要等待XReport完全渲染
99
136
  setTimeout(() => {
100
137
  const cardBody = this.$el.querySelector('.ant-card-body')
101
138
  if (cardBody) {
102
- cardBody.style.padding = '3%'
139
+ cardBody.style.padding = '0px'
103
140
  }
104
141
  }, 500)
105
142
  }
@@ -159,20 +196,37 @@ export default {
159
196
  }
160
197
 
161
198
  if (isOpen) {
162
- // 展开:仅当显式允许时才改变布局百分比;否则恢复默认宽度
199
+ // 展开:仅当显式允许时才改变布局;否则恢复默认宽度
163
200
  if (this.affectLayout) {
164
- const drawerWidth = (this.expandedWidthPercent || 33.3)
165
- currentCol.style.cssText = `
166
- flex: 0 0 ${drawerWidth}% !important;
167
- max-width: ${drawerWidth}% !important;
168
- transition: all 0.3s;`
169
- if (otherCols.length === 1) {
170
- const mainCol = otherCols[0]
171
- const mainWidth = Math.max(0, 100 - drawerWidth)
172
- mainCol.style.cssText = `
173
- flex: 0 0 ${mainWidth}% !important;
174
- max-width: ${mainWidth}% !important;
201
+ if (this.widthMode === 'px') {
202
+ // px模式:使用固定像素宽度
203
+ const drawerWidth = this.expandedWidth || 584
204
+ currentCol.style.cssText = `
205
+ flex: 0 0 ${drawerWidth}px !important;
206
+ max-width: ${drawerWidth}px !important;
207
+ transition: all 0.3s;`
208
+ if (otherCols.length === 1) {
209
+ const mainCol = otherCols[0]
210
+ mainCol.style.cssText = `
211
+ flex: 1 1 auto !important;
212
+ max-width: calc(${this.totalWidth} - ${drawerWidth}px) !important;
213
+ transition: all 0.3s;`
214
+ }
215
+ } else {
216
+ // percent模式:使用百分比宽度(原有逻辑)
217
+ const drawerWidth = (this.expandedWidthPercent || 33.3)
218
+ currentCol.style.cssText = `
219
+ flex: 0 0 ${drawerWidth}% !important;
220
+ max-width: ${drawerWidth}% !important;
175
221
  transition: all 0.3s;`
222
+ if (otherCols.length === 1) {
223
+ const mainCol = otherCols[0]
224
+ const mainWidth = Math.max(0, Math.min(this.totalWidth, 100) - drawerWidth)
225
+ mainCol.style.cssText = `
226
+ flex: 0 0 ${mainWidth}% !important;
227
+ max-width: ${mainWidth}% !important;
228
+ transition: all 0.3s;`
229
+ }
176
230
  }
177
231
  } else {
178
232
  // 恢复默认(移除我们加的内联样式)
@@ -186,16 +240,16 @@ export default {
186
240
  }
187
241
  triggerResize()
188
242
  } else {
189
- // 收缩:为了消除空白,始终把侧栏压到 24px,并让相邻主列占满剩余
243
+ // 收缩:为了消除空白,始终把侧栏压到 26px,并让相邻主列占满剩余
190
244
  currentCol.style.cssText = `
191
- flex: 0 0 24px !important;
192
- max-width: 24px !important;
193
- transition: all 0.3s;`
245
+ flex: 0 0 26px !important;
246
+ max-width: 26px !important;
247
+ transition: all 0.3s;`
194
248
  if (otherCols.length === 1) {
195
249
  const mainCol = otherCols[0]
196
250
  mainCol.style.cssText = `
197
251
  flex: 1 1 auto !important;
198
- max-width: calc(100% - 24px) !important;
252
+ max-width: calc(100% - 26px) !important;
199
253
  transition: all 0.3s;`
200
254
  }
201
255
  triggerResize()
@@ -226,6 +280,39 @@ export default {
226
280
  computed: {
227
281
  isFrameConfig () {
228
282
  return this.queryParamsName?.endsWith('Frame') || false
283
+ },
284
+ drawerStyle () {
285
+ const isPx = this.widthMode === 'px'
286
+ if (!this.isOpen) {
287
+ // collapsed width
288
+ return isPx
289
+ ? { width: `${this.collapsedWidth}px` }
290
+ : { width: `${this.collapsedWidthPercent}%` }
291
+ }
292
+ // expanded width for the whole drawer wrapper
293
+ return isPx
294
+ ? { width: `${this.expandedWidth}px`, display: 'flex', flexDirection: 'row', alignItems: 'stretch' }
295
+ : { width: `${this.expandedWidthPercent}%`, display: 'flex', flexDirection: 'row', alignItems: 'stretch' }
296
+ },
297
+ contentStyle () {
298
+ const isPx = this.widthMode === 'px'
299
+ if (!this.isOpen) return { display: 'none' }
300
+ if (isPx) {
301
+ const contentWidth = Math.max(0, (this.expandedWidth || 0) - (this.collapsedWidth || 0))
302
+ return { width: `${contentWidth}px`, flex: '1 1 auto', overflow: 'hidden' }
303
+ }
304
+ const contentPercent = Math.max(0, (this.expandedWidthPercent || 0) - (this.collapsedWidthPercent || 0))
305
+ return { width: `${contentPercent}%`, flex: '1 1 auto', overflow: 'hidden' }
306
+ },
307
+ toggleStyle () {
308
+ // 在展开时让切换按钮参与flex布局,避免与内容重叠;收起时保持绝对定位
309
+ const isPx = this.widthMode === 'px'
310
+ if (this.isOpen) {
311
+ return isPx
312
+ ? { position: 'relative', left: '0', zIndex: 1, flex: `0 0 ${this.collapsedWidth}px`, width: `${this.collapsedWidth}px` }
313
+ : { position: 'relative', left: '0', zIndex: 1, flex: `0 0 ${this.collapsedWidthPercent}%`, width: `${this.collapsedWidthPercent}%` }
314
+ }
315
+ return { left: '0' }
229
316
  }
230
317
  }
231
318
  }
@@ -243,14 +330,14 @@ export default {
243
330
  }
244
331
 
245
332
  .drawer-collapsed {
246
- width: 24px;
333
+ width: 26px;
247
334
  box-shadow: none;
248
335
  }
249
336
  .drawer-toggle {
250
337
  position: absolute;
251
338
  top: 50%;
252
339
  transform: translateY(-50%);
253
- width: 24px;
340
+ width: 26px;
254
341
  height: 48px;
255
342
  cursor: pointer;
256
343
  background-color: rgba(255, 255, 255, 0) !important;
@@ -279,5 +366,6 @@ export default {
279
366
  }
280
367
  .drawer-content {
281
368
  height: 100%;
369
+ padding-right: 12px;
282
370
  }
283
371
  </style>
@@ -60,15 +60,12 @@ path: 'example',
60
60
  // component: () => import('@vue2-client/base-client/components/common/XAddNativeForm/demo.vue'),
61
61
  // component: () => import('@vue2-client/base-client/components/common/XFormGroup/demo.vue'),
62
62
  // component: () => import('@vue2-client/base-client/components/common/XReport/XReportDemo.vue'),
63
- // component: () => import('@vue2-client/base-client/components/common/HIS/demo.vue'),
64
- // component: () => import('@vue2-client/base-client/components/common/XFormTable/demo.vue'),
63
+ component: () => import('@vue2-client/base-client/components/common/XFormTable/demo.vue'),
65
64
  // component: () => import('@vue2-client/base-client/components/common/XDatePicker/demo.vue'),
66
65
  // component: () => import('@vue2-client/base-client/components/common/XTab/XTabDemo.vue'),
67
66
  // component: () => import('@vue2-client/base-client/components/common/XRate/demo.vue'),
68
- component: () => import('@vue2-client/base-client/components/common/XReport/XReportHospitalizationDemo.vue'),
69
67
  // component: () => import('@vue2-client/base-client/components/common/XForm/demo.vue'),
70
68
  // component: () => import('@vue2-client/base-client/components/his/XTimeSelect/XTimeSelectDemo.vue'),
71
- // component: () => import('@vue2-client/base-client/components/his/XCharge/XChargeDemo.vue'),
72
69
  // component: () => import('@vue2-client/base-client/components/his/XImportExcelButton/XFrontImportExcelDemo.vue'),
73
70
  // component: () => import('@vue2-client/pages/WorkflowDetail/WorkFlowDemo.vue'),
74
71
  // component: () => import('@vue2-client/pages/WorkflowDetail/WorkFlowDemo.vue'),
@@ -1,47 +1,47 @@
1
- import AMapLoader from '@amap/amap-jsapi-loader'
2
- let Amap
3
- async function GetGDMap (secretKey, key) {
4
- if (!Amap) {
5
- window._AMapSecurityConfig = {
6
- securityJsCode: secretKey
7
- }
8
- // 解决高德地图加载报错 ---> 禁止多种API加载方式混用
9
- AMapLoader.reset()
10
- Amap = await AMapLoader.load({
11
- key: key, // 申请好的Web端开发者Key,首次调用 load 时必填
12
- version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
13
- plugins: ['AMap.IndexCluster', 'AMP.MarkerCluster', 'AMap.InfoWindow', 'AMap.HeatMap', 'AMap.HawkEye', 'AMap.DistrictSearch',
14
- 'AMap.ToolBar', 'AMap.Geolocation', 'AMap.MouseTool',
15
- 'AMap.Geocoder', 'AMap.MarkerClusterer', 'AMap.AutoComplete', 'AMap.Scale'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
16
- AMapUI: {
17
- version: '1.1', // AMapUI 缺省 1.1
18
- plugins: ['misc/PositionPicker'] // 需要加载的 AMapUI ui插件
19
- }
20
- })
21
- }
22
- return Amap
23
- }
24
-
25
- async function getGDMap (address) {
26
- new (await GetGDMap()).Geocoder({
27
- radius: 500 // 范围,默认:500
28
- }).getLocation(address, function (status, result) {
29
- if (status === 'complete' && result.geocodes.length) {
30
- return ({ lng: result.geocodes[0].location.lng, lat: result.geocodes[0].location.lat })
31
- } else {
32
- // eslint-disable-next-line prefer-promise-reject-errors
33
- throw new Error('根据经纬度查询地址失败')
34
- }
35
- })
36
- }
37
-
38
- async function GetLocation (address) {
39
- return new Promise((resolve, reject) => {
40
- try {
41
- resolve(getGDMap(address))
42
- } catch (e) {
43
- reject(e)
44
- }
45
- })
46
- }
47
- export { GetGDMap, GetLocation }
1
+ import AMapLoader from '@amap/amap-jsapi-loader'
2
+ let Amap
3
+ async function GetGDMap (secretKey, key) {
4
+ if (!Amap) {
5
+ window._AMapSecurityConfig = {
6
+ securityJsCode: secretKey
7
+ }
8
+ // 解决高德地图加载报错 ---> 禁止多种API加载方式混用
9
+ AMapLoader.reset()
10
+ Amap = await AMapLoader.load({
11
+ key: key, // 申请好的Web端开发者Key,首次调用 load 时必填
12
+ version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
13
+ plugins: ['AMap.IndexCluster', 'AMP.MarkerCluster', 'AMap.InfoWindow', 'AMap.HeatMap', 'AMap.HawkEye', 'AMap.DistrictSearch',
14
+ 'AMap.ToolBar', 'AMap.Geolocation', 'AMap.MouseTool',
15
+ 'AMap.Geocoder', 'AMap.MarkerClusterer', 'AMap.AutoComplete', 'AMap.Scale'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
16
+ AMapUI: {
17
+ version: '1.1', // AMapUI 缺省 1.1
18
+ plugins: ['misc/PositionPicker'] // 需要加载的 AMapUI ui插件
19
+ }
20
+ })
21
+ }
22
+ return Amap
23
+ }
24
+
25
+ async function getGDMap (address) {
26
+ new (await GetGDMap()).Geocoder({
27
+ radius: 500 // 范围,默认:500
28
+ }).getLocation(address, function (status, result) {
29
+ if (status === 'complete' && result.geocodes.length) {
30
+ return ({ lng: result.geocodes[0].location.lng, lat: result.geocodes[0].location.lat })
31
+ } else {
32
+ // eslint-disable-next-line prefer-promise-reject-errors
33
+ throw new Error('根据经纬度查询地址失败')
34
+ }
35
+ })
36
+ }
37
+
38
+ async function GetLocation (address) {
39
+ return new Promise((resolve, reject) => {
40
+ try {
41
+ resolve(getGDMap(address))
42
+ } catch (e) {
43
+ reject(e)
44
+ }
45
+ })
46
+ }
47
+ export { GetGDMap, GetLocation }
package/vue.config.js CHANGED
@@ -42,6 +42,12 @@ module.exports = {
42
42
  ws: false,
43
43
  changeOrigin: true
44
44
  },
45
+ '/socket/af-system': {
46
+ target: 'http://127.0.0.1:9002',
47
+ ws: true,
48
+ changeOrigin: true,
49
+ pathRewrite: { '^/socket/af-system': '/concept-websocket' },
50
+ },
45
51
  '/revenue-web/api/af-revenue': {
46
52
  pathRewrite: { '^/revenue-web/': '/' },
47
53
  target: v3Server,
@@ -83,6 +89,10 @@ module.exports = {
83
89
  target: revenue,
84
90
  changeOrigin: true
85
91
  },
92
+ '/api/af-linepatrol': {
93
+ target: revenue,
94
+ changeOrigin: true
95
+ },
86
96
  '/api/af-gaslink': {
87
97
  // pathRewrite: { '^/api/af-gaslink/': '/' },
88
98
  // target: 'http://127.0.0.1:9036',
@@ -1,45 +0,0 @@
1
- <template>
2
- <div id="xreport-hosp-demo">
3
- <a-space style="margin-bottom: 12px;">
4
- <a-button type="primary" @click="doInit">手动初始化</a-button>
5
- </a-space>
6
- <XReport
7
- ref="reportRef"
8
- :edit-mode="true"
9
- :show-save-button="true"
10
- :show-img-in-cell="false"
11
- :use-oss-for-img="false"
12
- server-name="af-his"
13
- @updateImg="onUpdateImg"/>
14
- </div>
15
- </template>
16
-
17
- <script setup>
18
- import { ref } from 'vue'
19
- import XReport from '@vue2-client/base-client/components/common/XReport'
20
-
21
- const reportRef = ref(null)
22
-
23
- const payload = {
24
- arr: [
25
- { BQ: '病房区', RY: 0, CY: 0, CW: 0, SW: 0, SS: 0, ZC: 0, ZR: 0, ZY: 0 },
26
- { BQ: '感染科', RY: 0, CY: 0, CW: 0, SW: 0, SS: 0, ZC: 0, ZR: 0, ZY: 0 },
27
- { BQ: '骨科病区', RY: 0, CY: 0, CW: 0, SW: 0, SS: 0, ZC: 0, ZR: 0, ZY: 0 },
28
- { BQ: '呼吸科病区', RY: 0, CY: 0, CW: 0, SW: 0, SS: 0, ZC: 0, ZR: 0, ZY: 0 },
29
- { BQ: '急症科病区', RY: 0, CY: 0, CW: 0, SW: 0, SS: 0, ZC: 0, ZR: 0, ZY: 0 },
30
- { BQ: '内科二病区', RY: 0, CY: 0, CW: 0, SW: 0, SS: 0, ZC: 0, ZR: 0, ZY: 0 }
31
- ]
32
- }
33
-
34
- const doInit = async () => {
35
- if (!reportRef.value || !reportRef.value.init) return
36
- await reportRef.value.init({
37
- configName: 'hospitalizationStatsReport',
38
- configData: payload
39
- })
40
- }
41
-
42
- const onUpdateImg = data => {
43
- console.warn('updateImg:', data)
44
- }
45
- </script>
File without changes