112 lines
3.2 KiB
Vue
112 lines
3.2 KiB
Vue
<template>
|
|
<div style="width: 100%;height: auto;display: flex;flex-wrap: wrap;align-items: flex-end;">
|
|
<div v-for="(item,index) in list" :key="index" :style="index>2? index%3==0?'width: 25%;margin-top:10px':'width: 25%;margin-left: 15px;margin-top:10px':index==0?'width: 25%;':'width: 25%;margin-left: 15px;'">
|
|
<el-input
|
|
:placeholder="item.placeholder"
|
|
v-model="object[item.prop]"
|
|
v-if="item.type=='input'"
|
|
></el-input>
|
|
<el-select
|
|
v-model="object[item.prop]"
|
|
:placeholder="item.placeholder"
|
|
style="width: 100%;"
|
|
filterable
|
|
@change="changePay"
|
|
v-if="item.type=='select'"
|
|
>
|
|
<el-option v-for="(a,i) in item.options" :key="i" :label="a.name" :value="a.value"> </el-option>
|
|
</el-select>
|
|
<el-select
|
|
v-model="object[item.prop]"
|
|
:placeholder="item.placeholder"
|
|
multiple
|
|
style="width: 100%;"
|
|
v-if="item.type=='multiple_select'"
|
|
>
|
|
<el-option v-for="(a,i) in item.options" :key="i" :label="a.name" :value="a.value"> </el-option>
|
|
</el-select>
|
|
<el-select
|
|
v-model="object[item.prop]"
|
|
:placeholder="item.placeholder"
|
|
style="width: 100%;"
|
|
filterable
|
|
@change="change"
|
|
v-if="item.type=='appoint_select'"
|
|
>
|
|
<el-option v-for="(a,i) in item.options" :key="i" :label="a.name" :value="a.value"> </el-option>
|
|
</el-select>
|
|
<el-date-picker
|
|
v-model="object[item.prop]"
|
|
:type="item.dateType"
|
|
style="width: 100%;"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="选择日期"
|
|
v-if="item.type=='date_select'"
|
|
:picker-options="pickerOptions">
|
|
</el-date-picker>
|
|
<br v-if="index%3==0">
|
|
</div>
|
|
<el-button type="primary" @click="search" :style="'margin-left: 15px;height: 40px;background:'+color"
|
|
>查询</el-button
|
|
>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "searchBar",
|
|
props: ['list','handleSearch','appoint_change'],
|
|
data() {
|
|
return {
|
|
object:{},
|
|
color:'#1372bb',
|
|
pickerOptions: {
|
|
disabledDate(time) {
|
|
return time.getTime() > Date.now();
|
|
},
|
|
shortcuts: [{
|
|
text: '今天',
|
|
onClick(picker) {
|
|
picker.$emit('pick', new Date());
|
|
}
|
|
}, {
|
|
text: '昨天',
|
|
onClick(picker) {
|
|
const date = new Date();
|
|
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
|
picker.$emit('pick', date);
|
|
}
|
|
}, {
|
|
text: '一周前',
|
|
onClick(picker) {
|
|
const date = new Date();
|
|
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
|
picker.$emit('pick', date);
|
|
}
|
|
}]
|
|
},
|
|
};
|
|
},
|
|
|
|
computed: {},
|
|
mounted() {
|
|
if (localStorage.getItem("theme")) {
|
|
this.color = localStorage.getItem("theme");
|
|
}
|
|
},
|
|
methods: {
|
|
changePay(val){
|
|
this.$forceUpdate();
|
|
},
|
|
search(){
|
|
this.handleSearch(this.object);
|
|
},
|
|
change(val){
|
|
this.appoint_change(val)
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped></style>
|