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
<template>
<div>
<el-form
class="search-form"
ref="form"
:model="form"
label-width="80px"
:inline="true"
size="mini"
>
<el-form-item label="网元设备">
<el-input
v-model="form.pointDeviceName"
clearable
placeholder="请输入网元设备"
></el-input>
</el-form-item>
<!-- <el-form-item label="监测设备厂家" label-width="120px">
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item> -->
<el-form-item label="上传时间">
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="success" @click="toSearch">查询</el-button>
<el-button type="primary" @click="reset">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { ConnectStatusEnum } from "@/const/index";
export default {
name: "Search",
data() {
return {
form: formInit(),
ConnectStatusEnum,
dateRange: [],
value:'',
options: [
{ value: '选项1', label: '选项1' },
{ value: '选项2', label: '选项2' },
{ value: '选项3', label: '选项3' },
{ value: '选项4', label: '选项4' },
{ value: '选项5', label: '选项5' }
]
};
},
methods: {
toSearch() {
this.form.startUploadTime = this.dateRange[0];
this.form.endUploadTime = this.dateRange[1];
this.$emit("search", this.form);
},
reset() {
this.dateRange = [];
this.form = formInit();
this.$emit("search");
},
},
};
function formInit() {
return {
pointDeviceName: "",
pointConnectStatus: "",
startUploadTime: "",
endUploadTime: "",
};
}
</script>
<style scoped lang="scss">
.w200 {
width: 200px;
}
.search-form {
padding: 10px;
background-color: #eaf1fe;
margin-bottom: 20px;
border-radius: 8px;
.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
margin-bottom: 0;
}
}
</style>