共计 6237 个字符，预计需要花费 16 分钟才能阅读完成。
1. 组件
组件中蕴含了大部分的查问需要，也提供了插槽，并且做了自适应。
<template>
<div>
<el-form ref="form" label-position="top">
<el-row>
<!-- 前部插槽 -->
<slot name="front"></slot>
<!-- span 默认值为 4 -->
<!-- 根据 span 值可计算出 xs sm md lg xl 的默认值 也可自行设置 -->
<!-- pull 向左挪动格数 push 向右挪动格数 offset 和左侧的距离格数 -->
<el-col
v-for="(item, index) in searchForm"
:key="item.prop"
:span="item.span ? item.span : 4"
:xs="item.xs"
:sm="item.sm"
:md="item.md"
:lg="item.lg"
:xl="item.xl"
:offset="item.offset"
:push="item.push"
:pull="item.pull"
>
<el-form-item
:label="item.label ? item.label :' '"v-show="item.show === false ? item.show : true":class="item.className"
>
<!-- 输入框 -->
<el-input
v-if="item.type =='input'"v-model="searchData[item.prop]"
></el-input>
<!-- 下拉框 -->
<el-select
v-if="item.type =='select'"v-model="searchData[item.prop]":multiple="item.multiple":collapse-tags="item.collapseTags":filterable="item.filterable":remote="item.remote":remote-method="
(query) => {remoteMethod(query, item.options)
}
":loading="remoteLoading"
>
<!-- 近程搜寻 -->
<el-option
v-else
v-for="ele in item.options"
:key="ele.value"
:label="ele.label"
:value="ele.value"
>
</el-option>
</el-select>
<!-- 级联选择器 -->
<el-cascader
v-if="item.type =='cascader'"v-model="searchData[item.prop]":options="item.options":placeholder="item.placeholder ? item.placeholder : '请抉择'"
></el-cascader>
<!-- 单选 -->
<el-radio-group
v-if="item.type ==='Radio'"v-model="searchData[item.prop]"
>
<el-radio
v-for="ra in item.radios"
:label="ra.value"
:key="ra.value"
>{{ra.label}}
</el-radio
>
</el-radio-group>
<!-- 单选按钮 -->
<el-radio-group
v-if="item.type ==='RadioButton'"v-model="searchData[item.prop]"@change="item.change && item.change(searchData[item.prop])"
>
<el-radio-button
v-for="ra in item.radios"
:label="ra.value"
:key="ra.value"
>{{ra.label}}
</el-radio-button
>
</el-radio-group>
<!-- 复选框 -->
<el-checkbox-group
v-if="item.type ==='Checkbox'"v-model="searchData[item.prop]"
>
<el-checkbox
v-for="ch in item.checkboxs"
:label="ch.value"
:key="ch.value"
>{{ch.label}}
</el-checkbox
>
</el-checkbox-group>
<!-- 计数器 -->
<el-input-number
v-if="item.type ==='inputNumber'"v-model="searchData[item.prop]":min="item.minNum":max="item.maxNum"
></el-input-number>
<!-- 工夫 -->
<el-time-select
v-if="item.type ==='Time'"v-model="searchData[item.prop]"type=""
></el-time-select>
<!-- 日期 -->
<el-date-picker
v-if="item.type ==='Date'"v-model="searchData[item.prop]"
></el-date-picker>
<!-- 日期工夫 -->
<el-date-picker
v-if="item.type ==='DateTime'"type="datetime":picker-options="
item.pickerOptions
? item.pickerOptions
: setOptions(item, index)
"v-model="searchData[item.prop]":format="
item.dateFormat ? item.dateFormat : 'yyyy-MM-dd HH:mm:ss'
":value-format="
item.dateFormat ? item.dateFormat : 'yyyy-MM-dd HH:mm:ss'
":disabled="item.disable && item.disable(searchData[item.prop])"
>
</el-date-picker>
</el-form-item>
</el-col>
<!-- 尾部插槽 -->
<slot name="last"></slot>
<el-col
:span="4"
:xs="12"
:sm="6"
:md="8"
:lg="4"
:xl="4"
class="search-button"
>
<!-- 查问按钮 -->
<el-form-item label=" ">
<el-button
type="primary"
@click="sendSearch"
class="scpp-button"
v-if="
showSearch
?
searchChildForm && searchChildForm.length > 0: true
"><i class="el-icon-search"></i> 检索
</el-button
>
<el-button
class="scpp-reset-button"
type="text"
@click="reset"
v-if="
showSearch
?
searchChildForm && searchChildForm.length > 0: true
"
> 重置
</el-button
>
<span
@click="more"
style="cursor: pointer"
v-if="searchChildForm && searchChildForm.length > 0"
> 更多条件
<i
:class="[
showCondition
? 'el-icon-d-arrow-left'
: 'el-icon-d-arrow-right',
'arrow-icon',
]"
/></span
>
</el-form-item>
</el-col>
</el-row>
<common-query
v-if="showCondition"
:searchForm="searchChildForm"
:searchData="searchChildData"
:showSearch="true"
></common-query>
</el-form>
</div>
</template>
<script>
export default {
name: "common-query",
data() {
return {remoteOptions: [],
remoteLoading: false,
showCondition: false,
}
},
props: {
searchForm: {type: Array,},
searchData: {type: Object,},
searchChildForm: {type: Array,},
searchChildData: {type: Object,},
showSearch: {type: Boolean,},
changeHeight: {
type: Boolean,
default: false,
},
},
created() {if (this.searchForm) {this.displayFlex(this.searchForm)
}
if (this.searchChildForm) {this.displayFlex(this.searchChildForm)
}
},
watch: {addressId(newVal) {if (newVal) {this.getArea()
}
},
showCondition(newVal) {
// 批改显示高度
this.$emit("update:changeHeight", newVal);
}
},
methods: {
// 自适应办法 根据 span 值计算 各个屏幕尺寸下的栅格列数
displayFlex(array) {array.forEach((item) => {
item.xs = 24
item.lg = item.span
item.xl = item.span
if (item.span > 6) {
item.sm = 12
item.md = item.span
} else {
item.sm = 8
item.md = 4
}
if (item.type == "streetAddress") {this.getStreet()
}
})
},
// 根据传入的值类型 判断是开始工夫还是完结工夫
// 遵循完结工夫大于开始工夫的准则即可
setOptions(item, index) {if (item.startTime) {let end = this.searchForm[index + 1]
let disabledEnd = {disabledDate: (time) => {
return (new Date(this.searchData[end.prop]).getTime() < time.getTime()
)
},
}
return disabledEnd
} else if (item.endTime) {let start = this.searchForm[index - 1]
let disabledStart = {disabledDate: (time) => {
return (new Date(this.searchData[start.prop]).getTime() > time.getTime()
)
},
}
return disabledStart
}
},
// 点击树时获取到以后的 code 以及 name
treeCheck(node) {
let prop = ""let id =""
this.searchForm.forEach((item) => {if (item.type == "tree") {
prop = item.prop
id = item.propId
}
})
this.$set(this.searchData, prop, node.shortName)
this.$set(this.searchData, id, node.orgCode)
},
// 查问
sendSearch() {
this.showCondition = false
this.$emit("sendSearch", this.searchData, this.searchChildData)
},
// 重置
reset() {
this.showCondition = false
if (this.$refs.place) {this.$refs.place[0].clear()}
this.$emit("sendReset")
},
more() {if (this.showCondition) {this.showCondition = false} else {this.showCondition = true}
},
},
}
</script>
<style lang="css">
.search-button {float: right;}
.el-input-number {
width: 100% !important;
line-height: 30px !important;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner {width: 100% !important;}
/* 更多图标 */
.arrow-icon {
color: #1796ff;
transform: rotate(90deg);
}
</style>2. 应用形式
- 在以后页面中引入公共查问组件并应用
<common-query
ref="searchForm"
:searchForm="query"
:searchData="form"
:searchChildForm="searchChildForm"
:searchChildData="searchChildData"
:showSearch="true"
@sendSearch="sendSearch"
@sendReset="resetForm"
></common-query>- 在 data 中定义须要的数据
{
type: "input",
label: "组织名称",
prop: "mgmtName"
},
{
type: "select",
label: "组织类型",
prop: "type",
},
{
type: "select",
label: "组织层级",
prop: "level",
},
{
type: "input",
label: "姓名",
prop: "name"
},
{
type: "input",
label: "证件号码",
prop: "idNumber"
},- 在 method 中定义查问和重置办法
sendSearch(searchData, moreData) {this.form = Object.assign(searchData, moreData);
this.submitForm(1); // 查问表格的办法
},
resetForm() {Object.assign(this.$data.form, this.$options.data.call(this).form);
Object.assign(this.$data.searchChildData, this.$options.data.call(this).searchChildData);
}
正文完
发表至： javascript
2021-03-03
