Search.vue
7.57 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<template>
<el-row class="NCC-common-search-box" :gutter="16" v-if="searchList.length">
<el-form @submit.native.prevent>
<el-col :span="6" v-for="(item, index) in searchList" :key="index">
<el-form-item :label="item.__config__.label" v-show="index<3 || (index>=3 && showAll)">
<template v-if="useInputList.indexOf(item.__config__.nccKey)>-1">
<el-input v-model="item.value" :placeholder="item.__config__.label" clearable
class="item">
</el-input>
</template>
<template v-else-if="useDateList.indexOf(item.__config__.nccKey)>-1">
<el-date-picker v-model="item.value" value-format="timestamp" format="yyyy-MM-dd"
start-placeholder="开始日期" end-placeholder="结束日期" class="item" type="daterange" />
</template>
<template v-else-if="useSelectList.indexOf(item.__config__.nccKey)>-1">
<el-select v-model="item.value" :placeholder="'请选择'+item.__config__.label" clearable
filterable class="item">
<el-option :label="oItem[item.__config__.props.label]"
v-for="(oItem, i) in item.__slot__.options"
:value="oItem[item.__config__.props.value]" :key="i"></el-option>
</el-select>
</template>
<template v-else>
<template
v-if="item.__config__.nccKey==='numInput'||item.__config__.nccKey==='calculate'">
<num-range v-model="item.value"></num-range>
</template>
<template v-if="item.__config__.nccKey==='cascader'">
<el-cascader v-model="item.value" :options="item.options" clearable
:show-all-levels="item['show-all-levels']" :props="item.props.props" filterable
:placeholder="'请选择'+item.__config__.label" class="item"></el-cascader>
</template>
<template
v-if="item.__config__.nccKey==='time'|| item.__config__.nccKey==='timeRange'">
<el-time-picker v-model="item.value" start-placeholder="开始时间" end-placeholder="结束时间"
clearable :value-format="item['value-format']" :format="item.format" is-range
class="item" />
</template>
<template v-if="item.__config__.nccKey==='date'">
<el-date-picker v-model="item.value" :type="item.type+'range'"
:value-format="item['value-format']" :format="item.format" start-placeholder="开始日期"
end-placeholder="结束日期" class="item">
</el-date-picker>
</template>
<template v-if="item.__config__.nccKey==='dateRange'">
<el-date-picker v-model="item.value" :type="item.type"
:value-format="item['value-format']" :format="item.format" start-placeholder="开始日期"
end-placeholder="结束日期" class="item">
</el-date-picker>
</template>
<template v-if="commonList.includes(item.__config__.nccKey)">
<component :is="item.__config__.tag" v-model="item.value"
:placeholder="'请选择'+item.__config__.label" class="item" />
</template>
<template v-if="item.__config__.nccKey==='address'">
<NCCAddress v-model="item.value" :placeholder="'请选择'+item.__config__.label"
:level="item.level" class="item" clearable />
</template>
<template v-if="item.__config__.nccKey==='treeSelect'">
<NCC-TreeSelect v-model="item.value" :placeholder="'请选择'+item.__config__.label"
:options="item.options" :multiple="item.multiple" class="item" clearable />
</template>
<template
v-if="item.__config__.nccKey==='createUser'||item.__config__.nccKey==='modifyUser'">
<userSelect v-model="item.value" :placeholder="'请选择'+item.__config__.label"
class="item" />
</template>
<template v-if="item.__config__.nccKey==='currOrganize'">
<comSelect v-model="item.value" :placeholder="'请选择'+item.__config__.label"
class="item" />
</template>
<template v-if="item.__config__.nccKey==='currDept'">
<depSelect v-model="item.value" :placeholder="'请选择'+item.__config__.label"
class="item" />
</template>
<template v-if="item.__config__.nccKey==='currPosition'">
<posSelect v-model="item.value" :placeholder="'请选择'+item.__config__.label"
class="item" />
</template>
</template>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="search()">{{$t('common.search')}}
</el-button>
<el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
</el-button>
<template v-if="searchList.length>3">
<el-button type="text" icon="el-icon-arrow-down" @click="showAll=true" v-if="!showAll">
展开
</el-button>
<el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>
收起</el-button>
</template>
</el-form-item>
</el-col>
</el-form>
</el-row>
</template>
<script>
import { deepClone } from '@/utils'
import { dyOptionsList, useInputList, useDateList, useSelectList } from '@/components/Generator/generator/comConfig'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import { previewDataInterface } from '@/api/systemData/dataInterface'
export default {
props: ['list'],
data() {
return {
showAll: false,
searchList: [],
commonList: ['comSelect', 'depSelect', 'posSelect', 'userSelect', 'dicSelect'],
useInputList,
useDateList,
useSelectList
}
},
watch: {
list: {
handler: function (val) {
this.searchList = deepClone(val)
this.buildOptions(this.searchList)
},
deep: true,
immediate: true
}
},
methods: {
buildOptions(componentList) {
componentList.forEach(cur => {
const config = cur.__config__
if (dyOptionsList.indexOf(config.nccKey) > -1) {
let isTreeSelect = config.nccKey === 'treeSelect' || config.nccKey === 'cascader'
if (config.dataType === 'dictionary') {
if (!config.dictionaryType) return
getDictionaryDataSelector(config.dictionaryType).then(res => {
isTreeSelect ? cur.options = res.data.list : cur.__slot__.options = res.data.list
})
}
if (config.dataType === 'dynamic') {
if (!config.propsUrl) return
previewDataInterface(config.propsUrl).then(res => {
isTreeSelect ? cur.options = res.data : cur.__slot__.options = res.data
})
}
}
})
},
search() {
let obj = {}
for (let i = 0; i < this.searchList.length; i++) {
const e = this.searchList[i]
if (e.value) {
if (Array.isArray(e.value)) {
if (e.value.length) obj[e.__vModel__] = e.value
} else {
obj[e.__vModel__] = e.value
}
}
}
let json = JSON.stringify(obj) === "{}" ? '' : JSON.stringify(obj)
this.$emit('search', json)
},
reset() {
this.searchList = deepClone(this.list)
this.$emit('search', '')
},
treeReset() {
this.searchList = deepClone(this.list)
}
}
}
</script>