vue2-client 1.17.29 → 1.17.30
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 +1 -1
- package/src/base-client/components/common/XForm/XTreeSelect.vue +276 -276
- package/src/base-client/components/common/XFormTable/demo.vue +89 -89
- package/src/base-client/components/common/XTable/XTableWrapper.vue +9 -1
- package/src/pages/userInfoDetailManage/uploadFilesHistory/index.vue +159 -159
package/package.json
CHANGED
|
@@ -1,276 +1,276 @@
|
|
|
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
|
-
:getPopupContainer="(triggerNode) => triggerNode.parentNode"
|
|
21
|
-
@change="onTreeSelectChange">
|
|
22
|
-
</a-tree-select>
|
|
23
|
-
</a-form-model-item>
|
|
24
|
-
</div>
|
|
25
|
-
</template>
|
|
26
|
-
<script>
|
|
27
|
-
import XFormCol from '@vue2-client/base-client/components/common/XFormCol'
|
|
28
|
-
|
|
29
|
-
export default {
|
|
30
|
-
name: 'XTreeSelect',
|
|
31
|
-
components: { XFormCol },
|
|
32
|
-
model: {
|
|
33
|
-
prop: 'value',
|
|
34
|
-
event: 'onChange'
|
|
35
|
-
},
|
|
36
|
-
// eslint-disable-next-line vue/require-prop-types
|
|
37
|
-
props: ['value', 'attr', 'rules'],
|
|
38
|
-
watch: {
|
|
39
|
-
value (newVal) {
|
|
40
|
-
if (newVal.length && !newVal[0]) {
|
|
41
|
-
this.localValue = undefined
|
|
42
|
-
}
|
|
43
|
-
if (!newVal) {
|
|
44
|
-
this.localValue = undefined
|
|
45
|
-
}
|
|
46
|
-
},
|
|
47
|
-
},
|
|
48
|
-
data () {
|
|
49
|
-
return {
|
|
50
|
-
// 内容加载是否完成
|
|
51
|
-
loaded: false,
|
|
52
|
-
// 数据列表
|
|
53
|
-
option: [],
|
|
54
|
-
// 表单
|
|
55
|
-
form: {},
|
|
56
|
-
// 查询方式
|
|
57
|
-
queryType: 'IN',
|
|
58
|
-
// label名称
|
|
59
|
-
name: undefined,
|
|
60
|
-
// 模型名称
|
|
61
|
-
model: undefined,
|
|
62
|
-
// 使用方式
|
|
63
|
-
mode: '查询',
|
|
64
|
-
// 是否禁用
|
|
65
|
-
disabled: false,
|
|
66
|
-
localValue: this.value
|
|
67
|
-
}
|
|
68
|
-
},
|
|
69
|
-
methods: {
|
|
70
|
-
init (params) {
|
|
71
|
-
const {
|
|
72
|
-
option = [], form, queryType = 'IN', name, model, mode = '查询', disabled = false
|
|
73
|
-
} = params
|
|
74
|
-
this.loaded = false
|
|
75
|
-
this.option = option
|
|
76
|
-
this.form = form
|
|
77
|
-
this.queryType = queryType
|
|
78
|
-
this.name = name
|
|
79
|
-
this.model = model
|
|
80
|
-
this.mode = mode
|
|
81
|
-
this.disabled = disabled
|
|
82
|
-
// 修改时恢复树形选择框选中状态
|
|
83
|
-
if (this.queryType !== 'RIGHT_LIKE') {
|
|
84
|
-
const value = this.form[this.model]
|
|
85
|
-
if (value) {
|
|
86
|
-
// 如果数据源中值含'-',代表是由多个数据源组成的树,需要重新组织新增/编辑时的表单值
|
|
87
|
-
if (this.option.length > 0 && this.option[0].value.toString().indexOf('-') !== -1) {
|
|
88
|
-
this.value = model + '-' + value
|
|
89
|
-
} else {
|
|
90
|
-
if (this.mode === '查询') {
|
|
91
|
-
const values = []
|
|
92
|
-
this.getValues(option, value, values)
|
|
93
|
-
this.$emit('onChange', values)
|
|
94
|
-
} else {
|
|
95
|
-
this.value = value
|
|
96
|
-
}
|
|
97
|
-
// value = option 自身和所有子得集合
|
|
98
|
-
}
|
|
99
|
-
} else {
|
|
100
|
-
this.value = undefined
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
this.$emit('mounted', this.attr)
|
|
104
|
-
this.loaded = true
|
|
105
|
-
},
|
|
106
|
-
getValues (option, value, values) {
|
|
107
|
-
const _values = []
|
|
108
|
-
for (const item of option) {
|
|
109
|
-
if (value.includes(item.value)) {
|
|
110
|
-
values.push(item.value)
|
|
111
|
-
_values.push(item.value)
|
|
112
|
-
// 找到匹配节点后,递归添加所有子节点的值
|
|
113
|
-
if (item.children && item.children.length) {
|
|
114
|
-
this.getAllChildrenValues(item.children, values)
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
if (item.children && item.children.length) {
|
|
118
|
-
const tempV = this.getValues(item.children, value, values)
|
|
119
|
-
if (tempV.length === item.children.length) {
|
|
120
|
-
values.push(item.value)
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
return _values
|
|
125
|
-
},
|
|
126
|
-
getAllChildrenValues (children, values) {
|
|
127
|
-
for (const child of children) {
|
|
128
|
-
values.push(child.value)
|
|
129
|
-
if (child.children && child.children.length) {
|
|
130
|
-
this.getAllChildrenValues(child.children, values)
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
return values
|
|
134
|
-
},
|
|
135
|
-
// 获取树形选择框数据
|
|
136
|
-
getTreeData () {
|
|
137
|
-
const treeData = this.option
|
|
138
|
-
if (this.mode === '新增/修改') {
|
|
139
|
-
this.setParentSelectable(treeData)
|
|
140
|
-
}
|
|
141
|
-
return treeData
|
|
142
|
-
},
|
|
143
|
-
// 设置树形选择框不能选择父节点
|
|
144
|
-
setParentSelectable (treeData) {
|
|
145
|
-
treeData.forEach(item => {
|
|
146
|
-
if (item.children && item.children.length) {
|
|
147
|
-
item.selectable = false
|
|
148
|
-
this.setParentSelectable(item.children)
|
|
149
|
-
}
|
|
150
|
-
})
|
|
151
|
-
},
|
|
152
|
-
// 选中树节点
|
|
153
|
-
onTreeSelectChange (value, label, extra) {
|
|
154
|
-
if (this.queryType === 'RIGHT_LIKE') {
|
|
155
|
-
// 获取可用于模糊查询的组织机构字符串
|
|
156
|
-
let node = extra.triggerNode.$parent
|
|
157
|
-
label = label[0]
|
|
158
|
-
while (node && node.label) {
|
|
159
|
-
label = node.label + '.' + label
|
|
160
|
-
node = node.$parent
|
|
161
|
-
}
|
|
162
|
-
// this.form[this.model] = label
|
|
163
|
-
this.$emit('onChange', label)
|
|
164
|
-
} else {
|
|
165
|
-
// 如果选中值含'-',代表是由多个数据源组成的树,需要重新组织查询或新增/编辑时的表单
|
|
166
|
-
if ((Array.isArray(value) && value.length > 0 && String(value[0]).indexOf('-') !== -1) || (typeof value === 'string' && value.indexOf('-') !== -1)) {
|
|
167
|
-
const treeDatas = {}
|
|
168
|
-
// 单选情况用于新增.修改表单场景,使用extra.triggerNode获取选中节点信息
|
|
169
|
-
if (!extra.allCheckedNodes) {
|
|
170
|
-
this.setNodeData(treeDatas, extra.triggerNode)
|
|
171
|
-
} else {
|
|
172
|
-
// 多选情况用于查询表单场景,使用extra.allCheckedNodes获取选中节点集合
|
|
173
|
-
const nodes = extra.allCheckedNodes
|
|
174
|
-
// 获取任意选中节点的叶子节点的字段名,用于查询时组织查询项的key
|
|
175
|
-
const name = this.getNodeDataProps(nodes[0])
|
|
176
|
-
// 获取所有选中节点的叶子节点的value,用于查询时组织查询项的value
|
|
177
|
-
const values = []
|
|
178
|
-
for (const node of nodes) {
|
|
179
|
-
const ref = this.setDataRef(node)
|
|
180
|
-
if (ref instanceof Array) {
|
|
181
|
-
for (const nodeRef of ref) {
|
|
182
|
-
const keyValue = nodeRef.node.key
|
|
183
|
-
values.push(keyValue.substring(keyValue.lastIndexOf('-') + 1))
|
|
184
|
-
}
|
|
185
|
-
} else {
|
|
186
|
-
const keyValue = ref.node.key
|
|
187
|
-
values.push(keyValue.substring(keyValue.lastIndexOf('-') + 1))
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
treeDatas[name] = values
|
|
191
|
-
}
|
|
192
|
-
// 移除默认的表单项,将组织好后的表单项合并进表单
|
|
193
|
-
this.form[this.model] = undefined
|
|
194
|
-
Object.assign(this.form, treeDatas)
|
|
195
|
-
// this.$emit('onChange', treeDatas)
|
|
196
|
-
} else {
|
|
197
|
-
// 从单一数据源组成的树可以直接赋值
|
|
198
|
-
// this.form[this.model] = value
|
|
199
|
-
// 获取所有选中节点的value
|
|
200
|
-
if (this.mode === '查询') {
|
|
201
|
-
const values = []
|
|
202
|
-
if (extra.allCheckedNodes) {
|
|
203
|
-
for (const item of extra.allCheckedNodes) {
|
|
204
|
-
if (item.node.key) {
|
|
205
|
-
if (item.node?.data?.props?.label === item.node?.data?.props?.value) {
|
|
206
|
-
if (!item.children?.length) {
|
|
207
|
-
values.push(`${item.node.key}`)
|
|
208
|
-
}
|
|
209
|
-
} else {
|
|
210
|
-
values.push(`${item.node.key}`)
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
if (item.children && item.children.length) {
|
|
214
|
-
this.getNodeValues(item.children, value, values)
|
|
215
|
-
}
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
this.$emit('onChange', values)
|
|
219
|
-
} else {
|
|
220
|
-
this.$emit('onChange', value)
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
|
-
}
|
|
224
|
-
},
|
|
225
|
-
getNodeValues (data, value, values) {
|
|
226
|
-
for (const item of data) {
|
|
227
|
-
values.push(`${item.node.key}`)
|
|
228
|
-
if (item.children && item.children.length) {
|
|
229
|
-
this.getNodeValues(item.children, value, values)
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
},
|
|
233
|
-
// 设置选中值
|
|
234
|
-
setValue (value) {
|
|
235
|
-
this.value = value
|
|
236
|
-
},
|
|
237
|
-
setDataRef (node) {
|
|
238
|
-
if (node.children) {
|
|
239
|
-
return this.setDataRef(node.children)
|
|
240
|
-
}
|
|
241
|
-
return node
|
|
242
|
-
},
|
|
243
|
-
/**
|
|
244
|
-
* 组织节点和每层父节点的数据,用于新增/修改时更新表单数据
|
|
245
|
-
* @param data 组织完成的数据
|
|
246
|
-
* @param node 节点
|
|
247
|
-
* @return 返回示例: { parentId: 1, childId: 2 }
|
|
248
|
-
*/
|
|
249
|
-
setNodeData (data, node) {
|
|
250
|
-
if (node.value) {
|
|
251
|
-
const value = node.value
|
|
252
|
-
const columnsName = value.substring(0, value.indexOf('-'))
|
|
253
|
-
data[columnsName] = value.substring(value.lastIndexOf('-') + 1)
|
|
254
|
-
if (node.$parent) {
|
|
255
|
-
this.setNodeData(data, node.$parent)
|
|
256
|
-
}
|
|
257
|
-
}
|
|
258
|
-
},
|
|
259
|
-
getNodeDataProps (node) {
|
|
260
|
-
if (node.children && node.children.length > 0) {
|
|
261
|
-
return this.getNodeDataProps(node.children[0])
|
|
262
|
-
}
|
|
263
|
-
const value = node.node.key
|
|
264
|
-
return value.substring(0, value.indexOf('-'))
|
|
265
|
-
}
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
</script>
|
|
269
|
-
<style lang="less" scoped>
|
|
270
|
-
.tree-select {
|
|
271
|
-
/deep/ .ant-select-selection.ant-select-selection--multiple {
|
|
272
|
-
max-height: 32px;
|
|
273
|
-
overflow-y: auto;
|
|
274
|
-
}
|
|
275
|
-
}
|
|
276
|
-
</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
|
+
:getPopupContainer="(triggerNode) => triggerNode.parentNode"
|
|
21
|
+
@change="onTreeSelectChange">
|
|
22
|
+
</a-tree-select>
|
|
23
|
+
</a-form-model-item>
|
|
24
|
+
</div>
|
|
25
|
+
</template>
|
|
26
|
+
<script>
|
|
27
|
+
import XFormCol from '@vue2-client/base-client/components/common/XFormCol'
|
|
28
|
+
|
|
29
|
+
export default {
|
|
30
|
+
name: 'XTreeSelect',
|
|
31
|
+
components: { XFormCol },
|
|
32
|
+
model: {
|
|
33
|
+
prop: 'value',
|
|
34
|
+
event: 'onChange'
|
|
35
|
+
},
|
|
36
|
+
// eslint-disable-next-line vue/require-prop-types
|
|
37
|
+
props: ['value', 'attr', 'rules'],
|
|
38
|
+
watch: {
|
|
39
|
+
value (newVal) {
|
|
40
|
+
if (newVal.length && !newVal[0]) {
|
|
41
|
+
this.localValue = undefined
|
|
42
|
+
}
|
|
43
|
+
if (!newVal) {
|
|
44
|
+
this.localValue = undefined
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
data () {
|
|
49
|
+
return {
|
|
50
|
+
// 内容加载是否完成
|
|
51
|
+
loaded: false,
|
|
52
|
+
// 数据列表
|
|
53
|
+
option: [],
|
|
54
|
+
// 表单
|
|
55
|
+
form: {},
|
|
56
|
+
// 查询方式
|
|
57
|
+
queryType: 'IN',
|
|
58
|
+
// label名称
|
|
59
|
+
name: undefined,
|
|
60
|
+
// 模型名称
|
|
61
|
+
model: undefined,
|
|
62
|
+
// 使用方式
|
|
63
|
+
mode: '查询',
|
|
64
|
+
// 是否禁用
|
|
65
|
+
disabled: false,
|
|
66
|
+
localValue: this.value
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
methods: {
|
|
70
|
+
init (params) {
|
|
71
|
+
const {
|
|
72
|
+
option = [], form, queryType = 'IN', name, model, mode = '查询', disabled = false
|
|
73
|
+
} = params
|
|
74
|
+
this.loaded = false
|
|
75
|
+
this.option = option
|
|
76
|
+
this.form = form
|
|
77
|
+
this.queryType = queryType
|
|
78
|
+
this.name = name
|
|
79
|
+
this.model = model
|
|
80
|
+
this.mode = mode
|
|
81
|
+
this.disabled = disabled
|
|
82
|
+
// 修改时恢复树形选择框选中状态
|
|
83
|
+
if (this.queryType !== 'RIGHT_LIKE') {
|
|
84
|
+
const value = this.form[this.model]
|
|
85
|
+
if (value) {
|
|
86
|
+
// 如果数据源中值含'-',代表是由多个数据源组成的树,需要重新组织新增/编辑时的表单值
|
|
87
|
+
if (this.option.length > 0 && this.option[0].value.toString().indexOf('-') !== -1) {
|
|
88
|
+
this.value = model + '-' + value
|
|
89
|
+
} else {
|
|
90
|
+
if (this.mode === '查询') {
|
|
91
|
+
const values = []
|
|
92
|
+
this.getValues(option, value, values)
|
|
93
|
+
this.$emit('onChange', values)
|
|
94
|
+
} else {
|
|
95
|
+
this.value = value
|
|
96
|
+
}
|
|
97
|
+
// value = option 自身和所有子得集合
|
|
98
|
+
}
|
|
99
|
+
} else {
|
|
100
|
+
this.value = undefined
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
this.$emit('mounted', this.attr)
|
|
104
|
+
this.loaded = true
|
|
105
|
+
},
|
|
106
|
+
getValues (option, value, values) {
|
|
107
|
+
const _values = []
|
|
108
|
+
for (const item of option) {
|
|
109
|
+
if (value.includes(item.value)) {
|
|
110
|
+
values.push(item.value)
|
|
111
|
+
_values.push(item.value)
|
|
112
|
+
// 找到匹配节点后,递归添加所有子节点的值
|
|
113
|
+
if (item.children && item.children.length) {
|
|
114
|
+
this.getAllChildrenValues(item.children, values)
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
if (item.children && item.children.length) {
|
|
118
|
+
const tempV = this.getValues(item.children, value, values)
|
|
119
|
+
if (tempV.length === item.children.length) {
|
|
120
|
+
values.push(item.value)
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
return _values
|
|
125
|
+
},
|
|
126
|
+
getAllChildrenValues (children, values) {
|
|
127
|
+
for (const child of children) {
|
|
128
|
+
values.push(child.value)
|
|
129
|
+
if (child.children && child.children.length) {
|
|
130
|
+
this.getAllChildrenValues(child.children, values)
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
return values
|
|
134
|
+
},
|
|
135
|
+
// 获取树形选择框数据
|
|
136
|
+
getTreeData () {
|
|
137
|
+
const treeData = this.option
|
|
138
|
+
if (this.mode === '新增/修改') {
|
|
139
|
+
this.setParentSelectable(treeData)
|
|
140
|
+
}
|
|
141
|
+
return treeData
|
|
142
|
+
},
|
|
143
|
+
// 设置树形选择框不能选择父节点
|
|
144
|
+
setParentSelectable (treeData) {
|
|
145
|
+
treeData.forEach(item => {
|
|
146
|
+
if (item.children && item.children.length) {
|
|
147
|
+
item.selectable = false
|
|
148
|
+
this.setParentSelectable(item.children)
|
|
149
|
+
}
|
|
150
|
+
})
|
|
151
|
+
},
|
|
152
|
+
// 选中树节点
|
|
153
|
+
onTreeSelectChange (value, label, extra) {
|
|
154
|
+
if (this.queryType === 'RIGHT_LIKE') {
|
|
155
|
+
// 获取可用于模糊查询的组织机构字符串
|
|
156
|
+
let node = extra.triggerNode.$parent
|
|
157
|
+
label = label[0]
|
|
158
|
+
while (node && node.label) {
|
|
159
|
+
label = node.label + '.' + label
|
|
160
|
+
node = node.$parent
|
|
161
|
+
}
|
|
162
|
+
// this.form[this.model] = label
|
|
163
|
+
this.$emit('onChange', label)
|
|
164
|
+
} else {
|
|
165
|
+
// 如果选中值含'-',代表是由多个数据源组成的树,需要重新组织查询或新增/编辑时的表单
|
|
166
|
+
if ((Array.isArray(value) && value.length > 0 && String(value[0]).indexOf('-') !== -1) || (typeof value === 'string' && value.indexOf('-') !== -1)) {
|
|
167
|
+
const treeDatas = {}
|
|
168
|
+
// 单选情况用于新增.修改表单场景,使用extra.triggerNode获取选中节点信息
|
|
169
|
+
if (!extra.allCheckedNodes) {
|
|
170
|
+
this.setNodeData(treeDatas, extra.triggerNode)
|
|
171
|
+
} else {
|
|
172
|
+
// 多选情况用于查询表单场景,使用extra.allCheckedNodes获取选中节点集合
|
|
173
|
+
const nodes = extra.allCheckedNodes
|
|
174
|
+
// 获取任意选中节点的叶子节点的字段名,用于查询时组织查询项的key
|
|
175
|
+
const name = this.getNodeDataProps(nodes[0])
|
|
176
|
+
// 获取所有选中节点的叶子节点的value,用于查询时组织查询项的value
|
|
177
|
+
const values = []
|
|
178
|
+
for (const node of nodes) {
|
|
179
|
+
const ref = this.setDataRef(node)
|
|
180
|
+
if (ref instanceof Array) {
|
|
181
|
+
for (const nodeRef of ref) {
|
|
182
|
+
const keyValue = nodeRef.node.key
|
|
183
|
+
values.push(keyValue.substring(keyValue.lastIndexOf('-') + 1))
|
|
184
|
+
}
|
|
185
|
+
} else {
|
|
186
|
+
const keyValue = ref.node.key
|
|
187
|
+
values.push(keyValue.substring(keyValue.lastIndexOf('-') + 1))
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
treeDatas[name] = values
|
|
191
|
+
}
|
|
192
|
+
// 移除默认的表单项,将组织好后的表单项合并进表单
|
|
193
|
+
this.form[this.model] = undefined
|
|
194
|
+
Object.assign(this.form, treeDatas)
|
|
195
|
+
// this.$emit('onChange', treeDatas)
|
|
196
|
+
} else {
|
|
197
|
+
// 从单一数据源组成的树可以直接赋值
|
|
198
|
+
// this.form[this.model] = value
|
|
199
|
+
// 获取所有选中节点的value
|
|
200
|
+
if (this.mode === '查询') {
|
|
201
|
+
const values = []
|
|
202
|
+
if (extra.allCheckedNodes) {
|
|
203
|
+
for (const item of extra.allCheckedNodes) {
|
|
204
|
+
if (item.node.key) {
|
|
205
|
+
if (item.node?.data?.props?.label === item.node?.data?.props?.value) {
|
|
206
|
+
if (!item.children?.length) {
|
|
207
|
+
values.push(`${item.node.key}`)
|
|
208
|
+
}
|
|
209
|
+
} else {
|
|
210
|
+
values.push(`${item.node.key}`)
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
if (item.children && item.children.length) {
|
|
214
|
+
this.getNodeValues(item.children, value, values)
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
this.$emit('onChange', values)
|
|
219
|
+
} else {
|
|
220
|
+
this.$emit('onChange', value)
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
},
|
|
225
|
+
getNodeValues (data, value, values) {
|
|
226
|
+
for (const item of data) {
|
|
227
|
+
values.push(`${item.node.key}`)
|
|
228
|
+
if (item.children && item.children.length) {
|
|
229
|
+
this.getNodeValues(item.children, value, values)
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
},
|
|
233
|
+
// 设置选中值
|
|
234
|
+
setValue (value) {
|
|
235
|
+
this.value = value
|
|
236
|
+
},
|
|
237
|
+
setDataRef (node) {
|
|
238
|
+
if (node.children) {
|
|
239
|
+
return this.setDataRef(node.children)
|
|
240
|
+
}
|
|
241
|
+
return node
|
|
242
|
+
},
|
|
243
|
+
/**
|
|
244
|
+
* 组织节点和每层父节点的数据,用于新增/修改时更新表单数据
|
|
245
|
+
* @param data 组织完成的数据
|
|
246
|
+
* @param node 节点
|
|
247
|
+
* @return 返回示例: { parentId: 1, childId: 2 }
|
|
248
|
+
*/
|
|
249
|
+
setNodeData (data, node) {
|
|
250
|
+
if (node.value) {
|
|
251
|
+
const value = node.value
|
|
252
|
+
const columnsName = value.substring(0, value.indexOf('-'))
|
|
253
|
+
data[columnsName] = value.substring(value.lastIndexOf('-') + 1)
|
|
254
|
+
if (node.$parent) {
|
|
255
|
+
this.setNodeData(data, node.$parent)
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
},
|
|
259
|
+
getNodeDataProps (node) {
|
|
260
|
+
if (node.children && node.children.length > 0) {
|
|
261
|
+
return this.getNodeDataProps(node.children[0])
|
|
262
|
+
}
|
|
263
|
+
const value = node.node.key
|
|
264
|
+
return value.substring(0, value.indexOf('-'))
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
</script>
|
|
269
|
+
<style lang="less" scoped>
|
|
270
|
+
.tree-select {
|
|
271
|
+
/deep/ .ant-select-selection.ant-select-selection--multiple {
|
|
272
|
+
max-height: 32px;
|
|
273
|
+
overflow-y: auto;
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
</style>
|
|
@@ -1,89 +1,89 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<a-card :bordered="false">
|
|
3
|
-
<x-form-table
|
|
4
|
-
title="示例表单"
|
|
5
|
-
:queryParamsName="queryParamsName"
|
|
6
|
-
:fixedAddForm="fixedAddForm"
|
|
7
|
-
:externalSelectedRowKeys="selectedKeys"
|
|
8
|
-
@action="action"
|
|
9
|
-
@selectRow="selectRow"
|
|
10
|
-
@columnClick="columnClick"
|
|
11
|
-
serviceName="af-system"
|
|
12
|
-
ref="xFormTable">
|
|
13
|
-
</x-form-table>
|
|
14
|
-
</a-card>
|
|
15
|
-
</template>
|
|
16
|
-
|
|
17
|
-
<script>
|
|
18
|
-
import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
|
|
19
|
-
import { microDispatch } from '@vue2-client/utils/microAppUtils'
|
|
20
|
-
|
|
21
|
-
export default {
|
|
22
|
-
name: 'Demo',
|
|
23
|
-
components: {
|
|
24
|
-
XFormTable
|
|
25
|
-
},
|
|
26
|
-
data () {
|
|
27
|
-
return {
|
|
28
|
-
// 查询配置文件名
|
|
29
|
-
queryParamsName: 'ceshiCRUD',
|
|
30
|
-
// 查询配置左侧tree
|
|
31
|
-
xTreeConfigName: 'addressType',
|
|
32
|
-
// 新增表单固定值
|
|
33
|
-
fixedAddForm: {},
|
|
34
|
-
// 是否显示详情抽屉
|
|
35
|
-
detailVisible: false,
|
|
36
|
-
// 当前记录
|
|
37
|
-
record: {},
|
|
38
|
-
// 选中的行keys
|
|
39
|
-
selectedKeys: [],
|
|
40
|
-
selected: {
|
|
41
|
-
keys: [],
|
|
42
|
-
rows: []
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
|
-
methods: {
|
|
47
|
-
test () {
|
|
48
|
-
this.$refs.xFormTable.setTableData([])
|
|
49
|
-
},
|
|
50
|
-
defaultF () {
|
|
51
|
-
this.$refs.xFormTable.setTableSize('default')
|
|
52
|
-
},
|
|
53
|
-
middleF () {
|
|
54
|
-
this.$refs.xFormTable.setTableSize('middle')
|
|
55
|
-
},
|
|
56
|
-
smallF () {
|
|
57
|
-
this.$refs.xFormTable.setTableSize('small')
|
|
58
|
-
},
|
|
59
|
-
columnClick (key, value, record) {
|
|
60
|
-
microDispatch({
|
|
61
|
-
type: 'v3route',
|
|
62
|
-
path: '/bingliguanli/dianzibingliluru',
|
|
63
|
-
props: { selected: arguments[0].his_f_admission_id }
|
|
64
|
-
})
|
|
65
|
-
},
|
|
66
|
-
action (record, id, actionType) {
|
|
67
|
-
this.detailVisible = true
|
|
68
|
-
console.log('触发了详情操作', record, id, actionType)
|
|
69
|
-
},
|
|
70
|
-
onClose () {
|
|
71
|
-
this.detailVisible = false
|
|
72
|
-
// 关闭详情之后重新查询表单
|
|
73
|
-
this.$refs.xFormTable.refreshTable(true)
|
|
74
|
-
},
|
|
75
|
-
selectRow (selectedRowKeys, selectedRows) {
|
|
76
|
-
this.selected = {
|
|
77
|
-
keys: selectedRowKeys,
|
|
78
|
-
rows: selectedRows
|
|
79
|
-
}
|
|
80
|
-
console.log('selectedDemo', this.selected)
|
|
81
|
-
},
|
|
82
|
-
},
|
|
83
|
-
computed: {},
|
|
84
|
-
}
|
|
85
|
-
</script>
|
|
86
|
-
|
|
87
|
-
<style scoped>
|
|
88
|
-
|
|
89
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<a-card :bordered="false">
|
|
3
|
+
<x-form-table
|
|
4
|
+
title="示例表单"
|
|
5
|
+
:queryParamsName="queryParamsName"
|
|
6
|
+
:fixedAddForm="fixedAddForm"
|
|
7
|
+
:externalSelectedRowKeys="selectedKeys"
|
|
8
|
+
@action="action"
|
|
9
|
+
@selectRow="selectRow"
|
|
10
|
+
@columnClick="columnClick"
|
|
11
|
+
serviceName="af-system"
|
|
12
|
+
ref="xFormTable">
|
|
13
|
+
</x-form-table>
|
|
14
|
+
</a-card>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<script>
|
|
18
|
+
import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
|
|
19
|
+
import { microDispatch } from '@vue2-client/utils/microAppUtils'
|
|
20
|
+
|
|
21
|
+
export default {
|
|
22
|
+
name: 'Demo',
|
|
23
|
+
components: {
|
|
24
|
+
XFormTable
|
|
25
|
+
},
|
|
26
|
+
data () {
|
|
27
|
+
return {
|
|
28
|
+
// 查询配置文件名
|
|
29
|
+
queryParamsName: 'ceshiCRUD',
|
|
30
|
+
// 查询配置左侧tree
|
|
31
|
+
xTreeConfigName: 'addressType',
|
|
32
|
+
// 新增表单固定值
|
|
33
|
+
fixedAddForm: {},
|
|
34
|
+
// 是否显示详情抽屉
|
|
35
|
+
detailVisible: false,
|
|
36
|
+
// 当前记录
|
|
37
|
+
record: {},
|
|
38
|
+
// 选中的行keys
|
|
39
|
+
selectedKeys: [],
|
|
40
|
+
selected: {
|
|
41
|
+
keys: [],
|
|
42
|
+
rows: []
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
methods: {
|
|
47
|
+
test () {
|
|
48
|
+
this.$refs.xFormTable.setTableData([])
|
|
49
|
+
},
|
|
50
|
+
defaultF () {
|
|
51
|
+
this.$refs.xFormTable.setTableSize('default')
|
|
52
|
+
},
|
|
53
|
+
middleF () {
|
|
54
|
+
this.$refs.xFormTable.setTableSize('middle')
|
|
55
|
+
},
|
|
56
|
+
smallF () {
|
|
57
|
+
this.$refs.xFormTable.setTableSize('small')
|
|
58
|
+
},
|
|
59
|
+
columnClick (key, value, record) {
|
|
60
|
+
microDispatch({
|
|
61
|
+
type: 'v3route',
|
|
62
|
+
path: '/bingliguanli/dianzibingliluru',
|
|
63
|
+
props: { selected: arguments[0].his_f_admission_id }
|
|
64
|
+
})
|
|
65
|
+
},
|
|
66
|
+
action (record, id, actionType) {
|
|
67
|
+
this.detailVisible = true
|
|
68
|
+
console.log('触发了详情操作', record, id, actionType)
|
|
69
|
+
},
|
|
70
|
+
onClose () {
|
|
71
|
+
this.detailVisible = false
|
|
72
|
+
// 关闭详情之后重新查询表单
|
|
73
|
+
this.$refs.xFormTable.refreshTable(true)
|
|
74
|
+
},
|
|
75
|
+
selectRow (selectedRowKeys, selectedRows) {
|
|
76
|
+
this.selected = {
|
|
77
|
+
keys: selectedRowKeys,
|
|
78
|
+
rows: selectedRows
|
|
79
|
+
}
|
|
80
|
+
console.log('selectedDemo', this.selected)
|
|
81
|
+
},
|
|
82
|
+
},
|
|
83
|
+
computed: {},
|
|
84
|
+
}
|
|
85
|
+
</script>
|
|
86
|
+
|
|
87
|
+
<style scoped>
|
|
88
|
+
|
|
89
|
+
</style>
|
|
@@ -249,7 +249,15 @@
|
|
|
249
249
|
</span>
|
|
250
250
|
<span v-else-if="item.slotType === 'action'" :key="'action-' + c_index">
|
|
251
251
|
<template v-if="item.actionArr && item.actionArr.length > 0">
|
|
252
|
-
<a-dropdown
|
|
252
|
+
<a-dropdown
|
|
253
|
+
placement="bottomRight"
|
|
254
|
+
:overlayStyle="{
|
|
255
|
+
whiteSpace: 'nowrap',
|
|
256
|
+
maxWidth: '250px',
|
|
257
|
+
overflow: 'hidden',
|
|
258
|
+
textOverflow: 'ellipsis'
|
|
259
|
+
}"
|
|
260
|
+
>
|
|
253
261
|
<a class="ant-dropdown-link" @click="e => e.preventDefault()">
|
|
254
262
|
{{ item.scopedSlots?.customRender || item.slotValue }} <a-icon type="down"/>
|
|
255
263
|
</a>
|
|
@@ -1,159 +1,159 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<div class="filter-bar">
|
|
4
|
-
<a-date-picker v-model="upload_date" placeholder="上传日期" @change="selfSearch" />
|
|
5
|
-
<a-select
|
|
6
|
-
style="width: 200px;"
|
|
7
|
-
v-model="fusetype"
|
|
8
|
-
:options="fusetypes"
|
|
9
|
-
placeholder="分类"
|
|
10
|
-
@change="selfSearch"
|
|
11
|
-
allow-clear />
|
|
12
|
-
<a-button type="primary" @click="selfSearch">查询</a-button>
|
|
13
|
-
</div>
|
|
14
|
-
<a-list bordered>
|
|
15
|
-
<a-list-item v-for="item in files" :key="item.days">
|
|
16
|
-
<div class="file-group">
|
|
17
|
-
<h4>{{ item.days }}</h4>
|
|
18
|
-
<div class="file-items">
|
|
19
|
-
<div v-for="file in item.arrays" :key="file.id" class="file-card">
|
|
20
|
-
<img :src="getFileUrl(file.f_downloadpath)" class="file-image" v-if="file.f_filetype.includes('jpg') || file.f_filetype.includes('png')" @click="openPreview(file.f_downloadpath)" style="cursor:pointer" />
|
|
21
|
-
<p>上传时间: {{ file.f_uploaddate }}</p>
|
|
22
|
-
<p>操作员: {{ file.f_username }}</p>
|
|
23
|
-
<p>分类: {{ file.fusetype }}</p>
|
|
24
|
-
<p>说明: {{ file.fremarks }}</p>
|
|
25
|
-
<a :href="getFileUrl(file.f_downloadpath)" target="_blank">预览</a>
|
|
26
|
-
<a-button v-if="isDelete === '1'" @click="delet(file.id)">删除</a-button>
|
|
27
|
-
</div>
|
|
28
|
-
</div>
|
|
29
|
-
</div>
|
|
30
|
-
</a-list-item>
|
|
31
|
-
</a-list>
|
|
32
|
-
<ImagePreview :src="previewImg" :visible="previewVisible" @close="previewVisible = false" />
|
|
33
|
-
</div>
|
|
34
|
-
</template>
|
|
35
|
-
|
|
36
|
-
<script>
|
|
37
|
-
import { post } from '@vue2-client/services/api'
|
|
38
|
-
import { del } from '@vue2-client/services/api/restTools'
|
|
39
|
-
import ImagePreview from './ImagePreview.vue'
|
|
40
|
-
export default {
|
|
41
|
-
props: {
|
|
42
|
-
currUserInfo: {
|
|
43
|
-
type: Object,
|
|
44
|
-
default: () => undefined
|
|
45
|
-
}
|
|
46
|
-
},
|
|
47
|
-
components: { ImagePreview },
|
|
48
|
-
data () {
|
|
49
|
-
return {
|
|
50
|
-
upload_date: null,
|
|
51
|
-
fusetype: null,
|
|
52
|
-
files: [],
|
|
53
|
-
fusetypes: [],
|
|
54
|
-
isDelete: '0',
|
|
55
|
-
previewVisible: false,
|
|
56
|
-
previewImg: ''
|
|
57
|
-
}
|
|
58
|
-
},
|
|
59
|
-
methods: {
|
|
60
|
-
async getfusetypes () {
|
|
61
|
-
this.fusetypes = [{ label: '全部', value: '' }]
|
|
62
|
-
const res = await post('/api/af-revenue/logic/getFileUseType', {})
|
|
63
|
-
this.fusetypes.push(...res.map(item => ({ label: item.fusetype, value: item.fusetype })))
|
|
64
|
-
},
|
|
65
|
-
async getFiles () {
|
|
66
|
-
if (!this.currUserInfo) return
|
|
67
|
-
this.files = []
|
|
68
|
-
let condition = `f_blobid = '${this.currUserInfo.f_userinfo_id}'`
|
|
69
|
-
if (this.upload_date) {
|
|
70
|
-
condition += ` and CONVERT(VARCHAR(100), f_uploaddate, 23) = '${this.upload_date}'`
|
|
71
|
-
}
|
|
72
|
-
if (this.fusetype) {
|
|
73
|
-
condition += ` and fusetype = '${this.fusetype}'`
|
|
74
|
-
}
|
|
75
|
-
const res = await post('/api/af-revenue/logic/getAllFiles', { data: { condition } })
|
|
76
|
-
this.files = res.days.map(day => ({
|
|
77
|
-
days: day.uploadday,
|
|
78
|
-
arrays: res.array.filter(file => file.uploadday === day.uploadday)
|
|
79
|
-
}))
|
|
80
|
-
},
|
|
81
|
-
async delet (fileId) {
|
|
82
|
-
await del('api/af-revenue/entity/save/t_files', { id: fileId }, { resolveMsg: '删除成功', rejectMsg: '删除失败' })
|
|
83
|
-
this.getFiles()
|
|
84
|
-
},
|
|
85
|
-
selfSearch () {
|
|
86
|
-
this.getFiles()
|
|
87
|
-
},
|
|
88
|
-
openPreview (src) {
|
|
89
|
-
this.previewImg = this.getFileUrl(src)
|
|
90
|
-
this.previewVisible = true
|
|
91
|
-
},
|
|
92
|
-
getFileUrl (path) {
|
|
93
|
-
if (!path) return ''
|
|
94
|
-
|
|
95
|
-
console.log('原始路径:', path)
|
|
96
|
-
|
|
97
|
-
// 获取当前域名和端口
|
|
98
|
-
const baseUrl = `${window.location.protocol}//${window.location.host}`
|
|
99
|
-
|
|
100
|
-
// 如果是本地文件路径,转换为新的转发路径
|
|
101
|
-
if (path.match(/^[A-Za-z]:[\/\\]/)) {
|
|
102
|
-
// 提取文件名
|
|
103
|
-
const fileName = path.split(/[/\\]/).pop()
|
|
104
|
-
const newUrl = `${baseUrl}/rs/image/file/${fileName}`
|
|
105
|
-
console.log('转换后路径:', newUrl)
|
|
106
|
-
return newUrl
|
|
107
|
-
}
|
|
108
|
-
// 如果已经是HTTP路径,直接返回
|
|
109
|
-
if (path.startsWith('http')) {
|
|
110
|
-
console.log('HTTP路径,直接返回:', path)
|
|
111
|
-
return path
|
|
112
|
-
}
|
|
113
|
-
// 如果是相对路径,添加域名前缀
|
|
114
|
-
if (path.startsWith('/resource/')) {
|
|
115
|
-
const newUrl = `${baseUrl}${path}`
|
|
116
|
-
console.log('相对路径转换:', newUrl)
|
|
117
|
-
return newUrl
|
|
118
|
-
}
|
|
119
|
-
console.log('其他路径,直接返回:', path)
|
|
120
|
-
return path
|
|
121
|
-
}
|
|
122
|
-
},
|
|
123
|
-
mounted () {
|
|
124
|
-
if (this.$login.r.includes('上传附件删除')) {
|
|
125
|
-
this.isDelete = '1'
|
|
126
|
-
}
|
|
127
|
-
this.getFiles()
|
|
128
|
-
this.getfusetypes()
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
</script>
|
|
132
|
-
|
|
133
|
-
<style scoped>
|
|
134
|
-
.filter-bar {
|
|
135
|
-
display: flex;
|
|
136
|
-
gap: 10px;
|
|
137
|
-
margin-bottom: 15px;
|
|
138
|
-
}
|
|
139
|
-
.file-group {
|
|
140
|
-
margin-bottom: 15px;
|
|
141
|
-
}
|
|
142
|
-
.file-items {
|
|
143
|
-
display: flex;
|
|
144
|
-
flex-wrap: wrap;
|
|
145
|
-
gap: 10px;
|
|
146
|
-
}
|
|
147
|
-
.file-card {
|
|
148
|
-
border: 1px solid #ddd;
|
|
149
|
-
padding: 10px;
|
|
150
|
-
border-radius: 5px;
|
|
151
|
-
width: 200px;
|
|
152
|
-
}
|
|
153
|
-
.file-image {
|
|
154
|
-
width: 100%; /* 让图片填充整个容器 */
|
|
155
|
-
height: 150px; /* 调整高度 */
|
|
156
|
-
object-fit: cover; /* 保持图片比例,填充整个区域 */
|
|
157
|
-
border-radius: 5px; /* 圆角边框 */
|
|
158
|
-
}
|
|
159
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<div class="filter-bar">
|
|
4
|
+
<a-date-picker v-model="upload_date" placeholder="上传日期" @change="selfSearch" />
|
|
5
|
+
<a-select
|
|
6
|
+
style="width: 200px;"
|
|
7
|
+
v-model="fusetype"
|
|
8
|
+
:options="fusetypes"
|
|
9
|
+
placeholder="分类"
|
|
10
|
+
@change="selfSearch"
|
|
11
|
+
allow-clear />
|
|
12
|
+
<a-button type="primary" @click="selfSearch">查询</a-button>
|
|
13
|
+
</div>
|
|
14
|
+
<a-list bordered>
|
|
15
|
+
<a-list-item v-for="item in files" :key="item.days">
|
|
16
|
+
<div class="file-group">
|
|
17
|
+
<h4>{{ item.days }}</h4>
|
|
18
|
+
<div class="file-items">
|
|
19
|
+
<div v-for="file in item.arrays" :key="file.id" class="file-card">
|
|
20
|
+
<img :src="getFileUrl(file.f_downloadpath)" class="file-image" v-if="file.f_filetype.includes('jpg') || file.f_filetype.includes('png')" @click="openPreview(file.f_downloadpath)" style="cursor:pointer" />
|
|
21
|
+
<p>上传时间: {{ file.f_uploaddate }}</p>
|
|
22
|
+
<p>操作员: {{ file.f_username }}</p>
|
|
23
|
+
<p>分类: {{ file.fusetype }}</p>
|
|
24
|
+
<p>说明: {{ file.fremarks }}</p>
|
|
25
|
+
<a :href="getFileUrl(file.f_downloadpath)" target="_blank">预览</a>
|
|
26
|
+
<a-button v-if="isDelete === '1'" @click="delet(file.id)">删除</a-button>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</a-list-item>
|
|
31
|
+
</a-list>
|
|
32
|
+
<ImagePreview :src="previewImg" :visible="previewVisible" @close="previewVisible = false" />
|
|
33
|
+
</div>
|
|
34
|
+
</template>
|
|
35
|
+
|
|
36
|
+
<script>
|
|
37
|
+
import { post } from '@vue2-client/services/api'
|
|
38
|
+
import { del } from '@vue2-client/services/api/restTools'
|
|
39
|
+
import ImagePreview from './ImagePreview.vue'
|
|
40
|
+
export default {
|
|
41
|
+
props: {
|
|
42
|
+
currUserInfo: {
|
|
43
|
+
type: Object,
|
|
44
|
+
default: () => undefined
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
components: { ImagePreview },
|
|
48
|
+
data () {
|
|
49
|
+
return {
|
|
50
|
+
upload_date: null,
|
|
51
|
+
fusetype: null,
|
|
52
|
+
files: [],
|
|
53
|
+
fusetypes: [],
|
|
54
|
+
isDelete: '0',
|
|
55
|
+
previewVisible: false,
|
|
56
|
+
previewImg: ''
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
methods: {
|
|
60
|
+
async getfusetypes () {
|
|
61
|
+
this.fusetypes = [{ label: '全部', value: '' }]
|
|
62
|
+
const res = await post('/api/af-revenue/logic/getFileUseType', {})
|
|
63
|
+
this.fusetypes.push(...res.map(item => ({ label: item.fusetype, value: item.fusetype })))
|
|
64
|
+
},
|
|
65
|
+
async getFiles () {
|
|
66
|
+
if (!this.currUserInfo) return
|
|
67
|
+
this.files = []
|
|
68
|
+
let condition = `f_blobid = '${this.currUserInfo.f_userinfo_id}'`
|
|
69
|
+
if (this.upload_date) {
|
|
70
|
+
condition += ` and CONVERT(VARCHAR(100), f_uploaddate, 23) = '${this.upload_date}'`
|
|
71
|
+
}
|
|
72
|
+
if (this.fusetype) {
|
|
73
|
+
condition += ` and fusetype = '${this.fusetype}'`
|
|
74
|
+
}
|
|
75
|
+
const res = await post('/api/af-revenue/logic/getAllFiles', { data: { condition } })
|
|
76
|
+
this.files = res.days.map(day => ({
|
|
77
|
+
days: day.uploadday,
|
|
78
|
+
arrays: res.array.filter(file => file.uploadday === day.uploadday)
|
|
79
|
+
}))
|
|
80
|
+
},
|
|
81
|
+
async delet (fileId) {
|
|
82
|
+
await del('api/af-revenue/entity/save/t_files', { id: fileId }, { resolveMsg: '删除成功', rejectMsg: '删除失败' })
|
|
83
|
+
this.getFiles()
|
|
84
|
+
},
|
|
85
|
+
selfSearch () {
|
|
86
|
+
this.getFiles()
|
|
87
|
+
},
|
|
88
|
+
openPreview (src) {
|
|
89
|
+
this.previewImg = this.getFileUrl(src)
|
|
90
|
+
this.previewVisible = true
|
|
91
|
+
},
|
|
92
|
+
getFileUrl (path) {
|
|
93
|
+
if (!path) return ''
|
|
94
|
+
|
|
95
|
+
console.log('原始路径:', path)
|
|
96
|
+
|
|
97
|
+
// 获取当前域名和端口
|
|
98
|
+
const baseUrl = `${window.location.protocol}//${window.location.host}`
|
|
99
|
+
|
|
100
|
+
// 如果是本地文件路径,转换为新的转发路径
|
|
101
|
+
if (path.match(/^[A-Za-z]:[\/\\]/)) {
|
|
102
|
+
// 提取文件名
|
|
103
|
+
const fileName = path.split(/[/\\]/).pop()
|
|
104
|
+
const newUrl = `${baseUrl}/rs/image/file/${fileName}`
|
|
105
|
+
console.log('转换后路径:', newUrl)
|
|
106
|
+
return newUrl
|
|
107
|
+
}
|
|
108
|
+
// 如果已经是HTTP路径,直接返回
|
|
109
|
+
if (path.startsWith('http')) {
|
|
110
|
+
console.log('HTTP路径,直接返回:', path)
|
|
111
|
+
return path
|
|
112
|
+
}
|
|
113
|
+
// 如果是相对路径,添加域名前缀
|
|
114
|
+
if (path.startsWith('/resource/')) {
|
|
115
|
+
const newUrl = `${baseUrl}${path}`
|
|
116
|
+
console.log('相对路径转换:', newUrl)
|
|
117
|
+
return newUrl
|
|
118
|
+
}
|
|
119
|
+
console.log('其他路径,直接返回:', path)
|
|
120
|
+
return path
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
mounted () {
|
|
124
|
+
if (this.$login.r.includes('上传附件删除')) {
|
|
125
|
+
this.isDelete = '1'
|
|
126
|
+
}
|
|
127
|
+
this.getFiles()
|
|
128
|
+
this.getfusetypes()
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
</script>
|
|
132
|
+
|
|
133
|
+
<style scoped>
|
|
134
|
+
.filter-bar {
|
|
135
|
+
display: flex;
|
|
136
|
+
gap: 10px;
|
|
137
|
+
margin-bottom: 15px;
|
|
138
|
+
}
|
|
139
|
+
.file-group {
|
|
140
|
+
margin-bottom: 15px;
|
|
141
|
+
}
|
|
142
|
+
.file-items {
|
|
143
|
+
display: flex;
|
|
144
|
+
flex-wrap: wrap;
|
|
145
|
+
gap: 10px;
|
|
146
|
+
}
|
|
147
|
+
.file-card {
|
|
148
|
+
border: 1px solid #ddd;
|
|
149
|
+
padding: 10px;
|
|
150
|
+
border-radius: 5px;
|
|
151
|
+
width: 200px;
|
|
152
|
+
}
|
|
153
|
+
.file-image {
|
|
154
|
+
width: 100%; /* 让图片填充整个容器 */
|
|
155
|
+
height: 150px; /* 调整高度 */
|
|
156
|
+
object-fit: cover; /* 保持图片比例,填充整个区域 */
|
|
157
|
+
border-radius: 5px; /* 圆角边框 */
|
|
158
|
+
}
|
|
159
|
+
</style>
|