<template>
<el-form
:inline="true"
style="display: flex; flex-direction: row; flex-wrap: wrap;flex: 1;"
class="formClass"
label-width="90px"
>
<el-form-item
v-for="(item, index) in this.selectInline"
:key="index"
:label="item.label"
style="margin:10px 10px 0 0;"
>
<el-input
size="small"
v-model="item.value"
v-if="item.type == 'input'"
:placeholder="item.label"
></el-input>
<el-select
v-else-if="item.type == 'select'"
size="small"
v-model="item.value"
:placeholder="item.label"
collapse-tags
@change="SelectHandle(index)"
filterable
:multiple="item.multi"
>
<el-option
v-for="(option, optionIndex) in item.options"
:key="optionIndex"
:label="option.ITEM_NAME"
:value="option.ITEM_NAME"
></el-option>
</el-select>
<el-date-picker
v-else-if="item.type == 'time'"
v-model="item.value"
type="datetimerange"
style="width:350px;"
:picker-options="timeOptions"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
size="small"
align="right"
></el-date-picker>
</el-form-item>
<!-- <el-form-item label="子设备类型:" style="margin:10px 8px 0 0;">
<el-select
v-model="selectInline[2].plcType"
size="small"
:placeholder="'请选择'"
autocomplete="off"
>
<el-option label="Pump" value="0" />
<el-option label="Heater" value="1" />
<el-option label="Scrubber" value="2" />
</el-select>
</el-form-item>-->
<!-- <el-form-item label="厂商名称:" style="margin:10px 8px 0 0;">
<el-select
v-model="selectInline[2].factoryName"
size="small"
:placeholder="'请选择'"
autocomplete="off"
>
<el-option label="Pump" value="0" />
<el-option label="Heater" value="1" />
<el-option label="Scrubber" value="2" />
</el-select>
</el-form-item>-->
<!-- <el-form-item label="部门:" style="margin:10px 8px 0 0;">
<el-select
v-model="selectInline[2].factoryName"
size="small"
:placeholder="'请选择'"
autocomplete="off"
>
<el-option label="Pump" value="0" />
<el-option label="Heater" value="1" />
<el-option label="Scrubber" value="2" />
</el-select>
</el-form-item>-->
<!-- <el-form-item label="科室:" style="margin:10px 20px 0 0;">
<el-select
v-model="selectInline[2].factoryName"
size="small"
:placeholder="'请选择'"
autocomplete="off"
>
<el-option label="Pump" value="0" />
<el-option label="Heater" value="1" />
<el-option label="Scrubber" value="2" />
</el-select>
</el-form-item>-->
<el-form-item style="margin:10px 0 0 90px;">
<el-button
v-if="isaddWork"
type="primary"
icon="el-icon-plus"
@click="addWorkFn"
size="small"
v-has="{name:'子设备v-has管理',value:'添v-has加'}"
>添加</el-button>
<el-button type="primary" @click="onSubmit" size="small" icon="el-icon-search">查询</el-button>
<el-button type="primary" @click="onReset" size="small" icon="el-icon-refresh">重置</el-button>
<el-button v-if="isdownload" type="primary" @click="onSubmit" size="small">下载</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: "toolbar",
props: {
selectInline: {
type: Array
},
inline: {
type: Boolean
},
isdownload: {
default: false,
type: Boolean
},
isaddWork: {
default: false,
type: Boolean
},
data_fields: {
type: Object
},
data_execl: {
type: Array
},
excel_Alltitle: {
type: String
}
},
data () {
return {
timeOptions: {
shortcuts: [
{
text: "最近一周",
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(
start.getTime() - 3600 * 1000 * 24 * 7
)
picker.$emit("pick", [start, end])
}
},
{
text: "最近一个月",
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(
start.getTime() - 3600 * 1000 * 24 * 30
)
picker.$emit("pick", [start, end])
}
},
{
text: "最近三个月",
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(
start.getTime() - 3600 * 1000 * 24 * 90
)
picker.$emit("pick", [start, end])
}
}
]
}
}
},
watch: {
data_fields (s1, s2) {
console.log("s1", s1)
console.log("s2", s2)
},
immediate: true,
deep: true
},
methods: {
// 添加工单
addWorkFn () {
this.$emit("addWorkFn", this.selectInline)
},
onSubmit () {
this.$emit("onSubmit", this.selectInline)
},
SelectHandle (index) {
this.$emit("SelectHandle", index)
},
downLoadAllData () {
this.$emit("downLoadAllData")
},
onReset () {
this.$emit("onReset")
}
}
};
</script>
<style scoped>
.formClass {
/* display: flex; */
/* flex-direction: column; */
/* justify-content: space-between; */
}
</style>
使用组件的时候：
<tool-bar
:isaddWork="true"
:inline="true"
:selectInline="this.selectInline"
@onSubmit="OnSubmit"
@SelectHandle="SelectHandle"
@onReset="onReset"
@addWorkFn="addHandle"
></tool-bar>
selectInline 的数据格式：
selectInline: [
{
field: "eqpName",
label: "部门",
type: "select",
value: "",
options: [],
},
{
field: "chamberName",
label: "科室",
type: "select",
value: "",
multi: false,
options: [],
},
{
field: "plcName",
label: "设备类型",
type: "select",
value: "",
options: [],
plcType: '',
factoryName: '',
},
{
field: "plcName",
label: "厂商",
type: "select",
value: "",
options: [],
plcType: '',
factoryName: '',
},
{
field: "plcName",
label: "子设备名称",
type: "select",
value: "",
options: [],
plcType: '',
factoryName: '',
},
],
标签：picker,const,form,element,start,vue2,new,type,emit From： https://www.cnblogs.com/zhulongxu/p/17272427.html