133 lines
4.0 KiB
Vue
133 lines
4.0 KiB
Vue
<template>
|
|
<!-- 查询表单 -->
|
|
<div>
|
|
<el-form
|
|
:model="queryParams"
|
|
ref="queryForm"
|
|
size="small"
|
|
:inline="true"
|
|
label-width="100px"
|
|
>
|
|
<el-form-item
|
|
v-for="(item, v) in formLabel"
|
|
:key="v"
|
|
:label="item.f_label"
|
|
:prop="item.f_model"
|
|
>
|
|
<el-input
|
|
v-if="item.f_type === 'ipt'"
|
|
v-model="queryParams[item.f_model]"
|
|
:placeholder="`请输入${item.f_label}`"
|
|
clearable
|
|
style="width: 240px"
|
|
/>
|
|
<el-select
|
|
v-if="item.f_type === 'sel'"
|
|
v-model="queryParams[item.f_model]"
|
|
clearable
|
|
filterable
|
|
style="width: 240px"
|
|
:placeholder="`请选择${item.f_label}`"
|
|
>
|
|
<el-option
|
|
v-for="(sel, v) in item.f_selList"
|
|
:key="v"
|
|
:label="sel.label"
|
|
:value="sel.value"
|
|
/>
|
|
</el-select>
|
|
<el-cascader
|
|
v-if="item.f_type === 'selCas'"
|
|
v-model="queryParams[item.f_model]"
|
|
:options="item.f_selList"
|
|
:props="item.optionProps"
|
|
:show-all-levels="false"
|
|
@change="casCadeChange"
|
|
clearable
|
|
style="width: 240px"
|
|
/>
|
|
<el-date-picker
|
|
v-if="item.f_type === 'date'"
|
|
v-model="queryParams[item.f_model]"
|
|
style="width: 240px"
|
|
value-format="yyyy-MM-dd"
|
|
type="daterange"
|
|
range-separator="-"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-search"
|
|
size="mini"
|
|
@click="handleQuery"
|
|
>查询</el-button
|
|
>
|
|
<el-button
|
|
type="warning"
|
|
icon="el-icon-refresh"
|
|
size="mini"
|
|
@click="resetQuery"
|
|
>重置</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
/* 查询条件 */
|
|
formLabel: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
},
|
|
},
|
|
routerParams: {
|
|
type: String,
|
|
default: () => {
|
|
return null
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
queryParams: {},
|
|
}
|
|
},
|
|
created() {
|
|
/* 生产查询参数 */
|
|
this.formLabel.map((e) => {
|
|
this.$set(this.queryParams, e.f_model, '')
|
|
})
|
|
},
|
|
mounted() {
|
|
this.queryParams.keyword = this.routerParams
|
|
if (this.queryParams.keyword) {
|
|
this.$emit('queryList', this.queryParams)
|
|
}
|
|
},
|
|
methods: {
|
|
/* 查询按钮 */
|
|
handleQuery() {
|
|
this.$emit('queryList', this.queryParams)
|
|
},
|
|
/* 重置按钮 */
|
|
resetQuery() {
|
|
this.$refs.queryForm.resetFields()
|
|
this.$emit('queryList', this.queryParams, 'reset')
|
|
},
|
|
/* 级联选择框的change事件 */
|
|
casCadeChange(val) {
|
|
this.queryParams.type = val[val.length - 1]
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style></style>
|