vue2-client 1.12.45 → 1.12.48

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.
@@ -1,263 +1,263 @@
1
- <template>
2
- <div>
3
- <!-- 树形选择框 -->
4
- <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
5
- <a-spin v-show="!loaded" size="small"/>
6
- <a-tree-select
7
- v-show="loaded"
8
- ref="tree-select"
9
- v-model="localValue"
10
- :disabled="disabled"
11
- :tree-data="getTreeData()"
12
- :tree-checkable="mode === '查询' && queryType !== 'RIGHT_LIKE'"
13
- :placeholder="`请选择${name||''}`"
14
- :dropdown-style="{ maxHeight: '400px' }"
15
- tree-node-filter-prop="label"
16
- :show-checked-strategy="queryType === 'RIGHT_LIKE' ? 'SHOW_ALL' : undefined"
17
- allow-clear
18
- :showArrow="true"
19
- class="tree-select"
20
- @change="onTreeSelectChange">
21
- </a-tree-select>
22
- </a-form-model-item>
23
- </div>
24
- </template>
25
- <script>
26
- import XFormCol from '@vue2-client/base-client/components/common/XFormCol'
27
-
28
- export default {
29
- name: 'XTreeSelect',
30
- components: { XFormCol },
31
- model: {
32
- prop: 'value',
33
- event: 'onChange'
34
- },
35
- // eslint-disable-next-line vue/require-prop-types
36
- props: ['value', 'attr'],
37
- watch: {
38
- value (newVal) {
39
- if (newVal.length && !newVal[0]) {
40
- this.localValue = undefined
41
- }
42
- if (!newVal) {
43
- this.localValue = undefined
44
- }
45
- },
46
- },
47
- data () {
48
- return {
49
- // 内容加载是否完成
50
- loaded: false,
51
- // 数据列表
52
- option: [],
53
- // 表单
54
- form: {},
55
- // 查询方式
56
- queryType: 'IN',
57
- // label名称
58
- name: undefined,
59
- // 模型名称
60
- model: undefined,
61
- // 使用方式
62
- mode: '查询',
63
- // 是否禁用
64
- disabled: false,
65
- localValue: this.value
66
- }
67
- },
68
- methods: {
69
- init (params) {
70
- const {
71
- option = [], form, queryType = 'IN', name, model, mode = '查询', disabled = false
72
- } = params
73
- this.loaded = false
74
- this.option = option
75
- this.form = form
76
- this.queryType = queryType
77
- this.name = name
78
- this.model = model
79
- this.mode = mode
80
- this.disabled = disabled
81
- // 修改时恢复树形选择框选中状态
82
- if (this.queryType !== 'RIGHT_LIKE') {
83
- const value = this.form[this.model]
84
- if (value) {
85
- // 如果数据源中值含'-',代表是由多个数据源组成的树,需要重新组织新增/编辑时的表单值
86
- if (this.option.length > 0 && this.option[0].value.toString().indexOf('-') !== -1) {
87
- this.value = model + '-' + value
88
- } else {
89
- if (this.mode === '查询') {
90
- const values = []
91
- this.getValues(option, value, values)
92
- this.$emit('onChange', values)
93
- } else {
94
- this.value = value
95
- }
96
- // value = option 自身和所有子得集合
97
- }
98
- } else {
99
- this.value = undefined
100
- }
101
- }
102
- this.$emit('mounted', this.attr)
103
- this.loaded = true
104
- },
105
- getValues (option, value, values) {
106
- for (const item of option) {
107
- if (value.includes(item.value)) {
108
- values.push(item.value)
109
- // 找到匹配节点后,递归添加所有子节点的值
110
- if (item.children && item.children.length) {
111
- this.getAllChildrenValues(item.children, values)
112
- }
113
- }
114
- if (item.children && item.children.length) {
115
- this.getValues(item.children, value, values)
116
- }
117
- }
118
- },
119
- getAllChildrenValues (children, values) {
120
- for (const child of children) {
121
- values.push(child.value)
122
- if (child.children && child.children.length) {
123
- this.getAllChildrenValues(child.children, values)
124
- }
125
- }
126
- },
127
- // 获取树形选择框数据
128
- getTreeData () {
129
- const treeData = this.option
130
- if (this.mode === '新增/修改') {
131
- this.setParentSelectable(treeData)
132
- }
133
- return treeData
134
- },
135
- // 设置树形选择框不能选择父节点
136
- setParentSelectable (treeData) {
137
- treeData.forEach(item => {
138
- if (item.children && item.children.length) {
139
- item.selectable = false
140
- this.setParentSelectable(item.children)
141
- }
142
- })
143
- },
144
- // 选中树节点
145
- onTreeSelectChange (value, label, extra) {
146
- if (this.queryType === 'RIGHT_LIKE') {
147
- // 获取可用于模糊查询的组织机构字符串
148
- let node = extra.triggerNode.$parent
149
- label = label[0]
150
- while (node && node.label) {
151
- label = node.label + '.' + label
152
- node = node.$parent
153
- }
154
- // this.form[this.model] = label
155
- this.$emit('onChange', label)
156
- } else {
157
- // 如果选中值含'-',代表是由多个数据源组成的树,需要重新组织查询或新增/编辑时的表单
158
- if ((Array.isArray(value) && value.length > 0 && String(value[0]).indexOf('-') !== -1) || (typeof value === 'string' && value.indexOf('-') !== -1)) {
159
- const treeDatas = {}
160
- // 单选情况用于新增.修改表单场景,使用extra.triggerNode获取选中节点信息
161
- if (!extra.allCheckedNodes) {
162
- this.setNodeData(treeDatas, extra.triggerNode)
163
- } else {
164
- // 多选情况用于查询表单场景,使用extra.allCheckedNodes获取选中节点集合
165
- const nodes = extra.allCheckedNodes
166
- // 获取任意选中节点的叶子节点的字段名,用于查询时组织查询项的key
167
- const name = this.getNodeDataProps(nodes[0])
168
- // 获取所有选中节点的叶子节点的value,用于查询时组织查询项的value
169
- const values = []
170
- for (const node of nodes) {
171
- const ref = this.setDataRef(node)
172
- if (ref instanceof Array) {
173
- for (const nodeRef of ref) {
174
- const keyValue = nodeRef.node.key
175
- values.push(keyValue.substring(keyValue.lastIndexOf('-') + 1))
176
- }
177
- } else {
178
- const keyValue = ref.node.key
179
- values.push(keyValue.substring(keyValue.lastIndexOf('-') + 1))
180
- }
181
- }
182
- treeDatas[name] = values
183
- }
184
- // 移除默认的表单项,将组织好后的表单项合并进表单
185
- this.form[this.model] = undefined
186
- Object.assign(this.form, treeDatas)
187
- // this.$emit('onChange', treeDatas)
188
- } else {
189
- // 从单一数据源组成的树可以直接赋值
190
- // this.form[this.model] = value
191
- // 获取所有选中节点的value
192
- if (this.mode === '查询') {
193
- const values = []
194
- if (extra.allCheckedNodes) {
195
- for (const item of extra.allCheckedNodes) {
196
- if (item.node.key) {
197
- // if (item.node.key && item.node?.data?.props?.label !== item.node?.data?.props?.value) {
198
- values.push(`${item.node.key}`)
199
- }
200
- if (item.children && item.children.length) {
201
- this.getNodeValues(item.children, value, values)
202
- }
203
- }
204
- }
205
- this.$emit('onChange', values)
206
- } else {
207
- this.$emit('onChange', value)
208
- }
209
- }
210
- }
211
- },
212
- getNodeValues (data, value, values) {
213
- for (const item of data) {
214
- values.push(`${item.node.key}`)
215
- if (item.children && item.children.length) {
216
- this.getNodeValues(item.children, value, values)
217
- }
218
- }
219
- },
220
- // 设置选中值
221
- setValue (value) {
222
- this.value = value
223
- },
224
- setDataRef (node) {
225
- if (node.children) {
226
- return this.setDataRef(node.children)
227
- }
228
- return node
229
- },
230
- /**
231
- * 组织节点和每层父节点的数据,用于新增/修改时更新表单数据
232
- * @param data 组织完成的数据
233
- * @param node 节点
234
- * @return 返回示例: { parentId: 1, childId: 2 }
235
- */
236
- setNodeData (data, node) {
237
- if (node.value) {
238
- const value = node.value
239
- const columnsName = value.substring(0, value.indexOf('-'))
240
- data[columnsName] = value.substring(value.lastIndexOf('-') + 1)
241
- if (node.$parent) {
242
- this.setNodeData(data, node.$parent)
243
- }
244
- }
245
- },
246
- getNodeDataProps (node) {
247
- if (node.children && node.children.length > 0) {
248
- return this.getNodeDataProps(node.children[0])
249
- }
250
- const value = node.node.key
251
- return value.substring(0, value.indexOf('-'))
252
- }
253
- }
254
- }
255
- </script>
256
- <style lang="less" scoped>
257
- .tree-select {
258
- /deep/ .ant-select-selection.ant-select-selection--multiple {
259
- max-height: 32px;
260
- overflow-y: auto;
261
- }
262
- }
263
- </style>
1
+ <template>
2
+ <div>
3
+ <!-- 树形选择框 -->
4
+ <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model" :rules="rules">
5
+ <a-spin v-show="!loaded" size="small"/>
6
+ <a-tree-select
7
+ v-show="loaded"
8
+ ref="tree-select"
9
+ v-model="localValue"
10
+ :disabled="disabled"
11
+ :tree-data="getTreeData()"
12
+ :tree-checkable="mode === '查询' && queryType !== 'RIGHT_LIKE'"
13
+ :placeholder="`请选择${name||''}`"
14
+ :dropdown-style="{ maxHeight: '400px' }"
15
+ tree-node-filter-prop="label"
16
+ :show-checked-strategy="queryType === 'RIGHT_LIKE' ? 'SHOW_ALL' : undefined"
17
+ allow-clear
18
+ :showArrow="true"
19
+ class="tree-select"
20
+ @change="onTreeSelectChange">
21
+ </a-tree-select>
22
+ </a-form-model-item>
23
+ </div>
24
+ </template>
25
+ <script>
26
+ import XFormCol from '@vue2-client/base-client/components/common/XFormCol'
27
+
28
+ export default {
29
+ name: 'XTreeSelect',
30
+ components: { XFormCol },
31
+ model: {
32
+ prop: 'value',
33
+ event: 'onChange'
34
+ },
35
+ // eslint-disable-next-line vue/require-prop-types
36
+ props: ['value', 'attr', 'rules'],
37
+ watch: {
38
+ value (newVal) {
39
+ if (newVal.length && !newVal[0]) {
40
+ this.localValue = undefined
41
+ }
42
+ if (!newVal) {
43
+ this.localValue = undefined
44
+ }
45
+ },
46
+ },
47
+ data () {
48
+ return {
49
+ // 内容加载是否完成
50
+ loaded: false,
51
+ // 数据列表
52
+ option: [],
53
+ // 表单
54
+ form: {},
55
+ // 查询方式
56
+ queryType: 'IN',
57
+ // label名称
58
+ name: undefined,
59
+ // 模型名称
60
+ model: undefined,
61
+ // 使用方式
62
+ mode: '查询',
63
+ // 是否禁用
64
+ disabled: false,
65
+ localValue: this.value
66
+ }
67
+ },
68
+ methods: {
69
+ init (params) {
70
+ const {
71
+ option = [], form, queryType = 'IN', name, model, mode = '查询', disabled = false
72
+ } = params
73
+ this.loaded = false
74
+ this.option = option
75
+ this.form = form
76
+ this.queryType = queryType
77
+ this.name = name
78
+ this.model = model
79
+ this.mode = mode
80
+ this.disabled = disabled
81
+ // 修改时恢复树形选择框选中状态
82
+ if (this.queryType !== 'RIGHT_LIKE') {
83
+ const value = this.form[this.model]
84
+ if (value) {
85
+ // 如果数据源中值含'-',代表是由多个数据源组成的树,需要重新组织新增/编辑时的表单值
86
+ if (this.option.length > 0 && this.option[0].value.toString().indexOf('-') !== -1) {
87
+ this.value = model + '-' + value
88
+ } else {
89
+ if (this.mode === '查询') {
90
+ const values = []
91
+ this.getValues(option, value, values)
92
+ this.$emit('onChange', values)
93
+ } else {
94
+ this.value = value
95
+ }
96
+ // value = option 自身和所有子得集合
97
+ }
98
+ } else {
99
+ this.value = undefined
100
+ }
101
+ }
102
+ this.$emit('mounted', this.attr)
103
+ this.loaded = true
104
+ },
105
+ getValues (option, value, values) {
106
+ for (const item of option) {
107
+ if (value.includes(item.value)) {
108
+ values.push(item.value)
109
+ // 找到匹配节点后,递归添加所有子节点的值
110
+ if (item.children && item.children.length) {
111
+ this.getAllChildrenValues(item.children, values)
112
+ }
113
+ }
114
+ if (item.children && item.children.length) {
115
+ this.getValues(item.children, value, values)
116
+ }
117
+ }
118
+ },
119
+ getAllChildrenValues (children, values) {
120
+ for (const child of children) {
121
+ values.push(child.value)
122
+ if (child.children && child.children.length) {
123
+ this.getAllChildrenValues(child.children, values)
124
+ }
125
+ }
126
+ },
127
+ // 获取树形选择框数据
128
+ getTreeData () {
129
+ const treeData = this.option
130
+ if (this.mode === '新增/修改') {
131
+ this.setParentSelectable(treeData)
132
+ }
133
+ return treeData
134
+ },
135
+ // 设置树形选择框不能选择父节点
136
+ setParentSelectable (treeData) {
137
+ treeData.forEach(item => {
138
+ if (item.children && item.children.length) {
139
+ item.selectable = false
140
+ this.setParentSelectable(item.children)
141
+ }
142
+ })
143
+ },
144
+ // 选中树节点
145
+ onTreeSelectChange (value, label, extra) {
146
+ if (this.queryType === 'RIGHT_LIKE') {
147
+ // 获取可用于模糊查询的组织机构字符串
148
+ let node = extra.triggerNode.$parent
149
+ label = label[0]
150
+ while (node && node.label) {
151
+ label = node.label + '.' + label
152
+ node = node.$parent
153
+ }
154
+ // this.form[this.model] = label
155
+ this.$emit('onChange', label)
156
+ } else {
157
+ // 如果选中值含'-',代表是由多个数据源组成的树,需要重新组织查询或新增/编辑时的表单
158
+ if ((Array.isArray(value) && value.length > 0 && String(value[0]).indexOf('-') !== -1) || (typeof value === 'string' && value.indexOf('-') !== -1)) {
159
+ const treeDatas = {}
160
+ // 单选情况用于新增.修改表单场景,使用extra.triggerNode获取选中节点信息
161
+ if (!extra.allCheckedNodes) {
162
+ this.setNodeData(treeDatas, extra.triggerNode)
163
+ } else {
164
+ // 多选情况用于查询表单场景,使用extra.allCheckedNodes获取选中节点集合
165
+ const nodes = extra.allCheckedNodes
166
+ // 获取任意选中节点的叶子节点的字段名,用于查询时组织查询项的key
167
+ const name = this.getNodeDataProps(nodes[0])
168
+ // 获取所有选中节点的叶子节点的value,用于查询时组织查询项的value
169
+ const values = []
170
+ for (const node of nodes) {
171
+ const ref = this.setDataRef(node)
172
+ if (ref instanceof Array) {
173
+ for (const nodeRef of ref) {
174
+ const keyValue = nodeRef.node.key
175
+ values.push(keyValue.substring(keyValue.lastIndexOf('-') + 1))
176
+ }
177
+ } else {
178
+ const keyValue = ref.node.key
179
+ values.push(keyValue.substring(keyValue.lastIndexOf('-') + 1))
180
+ }
181
+ }
182
+ treeDatas[name] = values
183
+ }
184
+ // 移除默认的表单项,将组织好后的表单项合并进表单
185
+ this.form[this.model] = undefined
186
+ Object.assign(this.form, treeDatas)
187
+ // this.$emit('onChange', treeDatas)
188
+ } else {
189
+ // 从单一数据源组成的树可以直接赋值
190
+ // this.form[this.model] = value
191
+ // 获取所有选中节点的value
192
+ if (this.mode === '查询') {
193
+ const values = []
194
+ if (extra.allCheckedNodes) {
195
+ for (const item of extra.allCheckedNodes) {
196
+ if (item.node.key) {
197
+ // if (item.node.key && item.node?.data?.props?.label !== item.node?.data?.props?.value) {
198
+ values.push(`${item.node.key}`)
199
+ }
200
+ if (item.children && item.children.length) {
201
+ this.getNodeValues(item.children, value, values)
202
+ }
203
+ }
204
+ }
205
+ this.$emit('onChange', values)
206
+ } else {
207
+ this.$emit('onChange', value)
208
+ }
209
+ }
210
+ }
211
+ },
212
+ getNodeValues (data, value, values) {
213
+ for (const item of data) {
214
+ values.push(`${item.node.key}`)
215
+ if (item.children && item.children.length) {
216
+ this.getNodeValues(item.children, value, values)
217
+ }
218
+ }
219
+ },
220
+ // 设置选中值
221
+ setValue (value) {
222
+ this.value = value
223
+ },
224
+ setDataRef (node) {
225
+ if (node.children) {
226
+ return this.setDataRef(node.children)
227
+ }
228
+ return node
229
+ },
230
+ /**
231
+ * 组织节点和每层父节点的数据,用于新增/修改时更新表单数据
232
+ * @param data 组织完成的数据
233
+ * @param node 节点
234
+ * @return 返回示例: { parentId: 1, childId: 2 }
235
+ */
236
+ setNodeData (data, node) {
237
+ if (node.value) {
238
+ const value = node.value
239
+ const columnsName = value.substring(0, value.indexOf('-'))
240
+ data[columnsName] = value.substring(value.lastIndexOf('-') + 1)
241
+ if (node.$parent) {
242
+ this.setNodeData(data, node.$parent)
243
+ }
244
+ }
245
+ },
246
+ getNodeDataProps (node) {
247
+ if (node.children && node.children.length > 0) {
248
+ return this.getNodeDataProps(node.children[0])
249
+ }
250
+ const value = node.node.key
251
+ return value.substring(0, value.indexOf('-'))
252
+ }
253
+ }
254
+ }
255
+ </script>
256
+ <style lang="less" scoped>
257
+ .tree-select {
258
+ /deep/ .ant-select-selection.ant-select-selection--multiple {
259
+ max-height: 32px;
260
+ overflow-y: auto;
261
+ }
262
+ }
263
+ </style>
@@ -30,8 +30,10 @@ export default {
30
30
  </script>
31
31
 
32
32
  <template>
33
-
34
- <x-form-group ref="xFormGroupDemo"></x-form-group>
33
+ <div>
34
+ <a-button @click="submitForm">提交测试</a-button>
35
+ <x-form-group ref="xFormGroupDemo"></x-form-group>
36
+ </div>
35
37
  </template>
36
38
 
37
39
  <style scoped lang="less">
@@ -24,7 +24,7 @@ export default {
24
24
  data () {
25
25
  return {
26
26
  // 查询配置文件名
27
- queryParamsName: 'outpatientRefund2CRUD',
27
+ queryParamsName: 'ceshiCRUD',
28
28
  // 查询配置左侧tree
29
29
  // xTreeConfigName: 'addressType',
30
30
  // 新增表单固定值
@@ -33,6 +33,8 @@ import { Base64 } from 'js-base64'
33
33
  import 'video.js/dist/video-js.css'
34
34
  import 'videojs-contrib-hls'
35
35
  import { videoPlayer } from 'vue-video-player'
36
+ import { getConfigByNameAsync } from '@/services/api/common'
37
+ import { mapState } from 'vuex'
36
38
 
37
39
  export default {
38
40
  name: 'FilePreview',
@@ -44,19 +46,11 @@ export default {
44
46
  type: String,
45
47
  required: true
46
48
  },
47
- // 文件服务器
48
- fileServer: {
49
- type: String,
50
- default: 'http://aote-office.8866.org:8406'
51
- },
52
- // 文档预览服务 API
53
- previewDocService: {
54
- type: String,
55
- default: 'http://aote-office.8866.org:32510/onlinePreview?url='
56
- }
57
49
  },
58
50
  data () {
59
51
  return {
52
+ previewDocService: 'http://aote-office.8866.org:8406',
53
+ fileServer: 'http://aote-office.8866.org:32510/onlinePreview?url=',
60
54
  // 文档预览
61
55
  previewDocLoading: true,
62
56
  previewDocUrl: '',
@@ -91,6 +85,9 @@ export default {
91
85
  }
92
86
  }
93
87
  },
88
+ computed: {
89
+ ...mapState('setting', ['compatible'])
90
+ },
94
91
  watch: {
95
92
  // 路径改变时刷新预览
96
93
  path: function () {
@@ -102,6 +99,22 @@ export default {
102
99
  },
103
100
  methods: {
104
101
  preview () {
102
+ if (this.compatible === 'OA') {
103
+ this.previewDocService = 'http://aote-office.8866.org:8406'
104
+ this.fileServer = 'http://aote-office.8866.org:32510/onlinePreview?url='
105
+ }
106
+ getConfigByNameAsync('previewDocServiceConfig').then(res => {
107
+ if (!res.fileServer) {
108
+ this.$message.error('文件预览服务配置错误')
109
+ return
110
+ } else {
111
+ this.previewDocService = res.previewDocService
112
+ this.fileServer = res.fileServer
113
+ }
114
+ this.previewGen()
115
+ })
116
+ },
117
+ previewGen () {
105
118
  if (!this.path) {
106
119
  this.pathError = true
107
120
  return
@@ -115,6 +128,11 @@ export default {
115
128
  this.playerOptions.sources[0].src = this.path
116
129
  this.showImagePreview = 3
117
130
  } else {
131
+ if (this.path.startsWith('http')) {
132
+ this.previewDocUrl = this.path
133
+ this.showImagePreview = 1
134
+ return
135
+ }
118
136
  const previewDocUrl = this.previewDocService + encodeURIComponent(Base64.encode(this.fileServer + this.path))
119
137
  if (this.previewDocUrl !== previewDocUrl) {
120
138
  this.previewDocLoading = true
@@ -0,0 +1,30 @@
1
+ <template>
2
+ <file-preview path="http://192.168.50.67:31467/logo/qinhua.svg"></file-preview>
3
+ </template>
4
+
5
+ <script>
6
+ import FilePreview from '@vue2-client/components/FilePreview/FilePreview.vue'
7
+
8
+ export default {
9
+ name: 'FilePreviewDemo',
10
+ components: {
11
+ FilePreview
12
+ },
13
+ data () {
14
+ return {
15
+
16
+ }
17
+ },
18
+ }
19
+ </script>
20
+
21
+ <style>
22
+ .preview-doc-container {
23
+ height: calc(100vh - 60px);
24
+ padding-top: 20px;
25
+ }
26
+ .preview-image {
27
+ max-width: 100%;
28
+ max-height: 100vh;
29
+ }
30
+ </style>