1763 lines
54 KiB
Vue
1763 lines
54 KiB
Vue
|
<template>
|
|||
|
|
<div class="search-bar">
|
|||
|
|
<div class="demo-box">
|
|||
|
|
<h3>input输入框(size默认small高度是32px)</h3>
|
|||
|
|
<div style="height: 50px">
|
|||
|
|
<SearchBar :formConfigs="formConfig1" />
|
|||
|
|
</div>
|
|||
|
|
<el-collapse>
|
|||
|
|
<el-collapse-item title="显示代码">
|
|||
|
|
<div class="description"></div>
|
|||
|
|
<div>
|
|||
|
|
<pre>
|
|||
|
|
<<span>template</span>>
|
|||
|
|
<SearchBar :formConfigs="formConfig" />
|
|||
|
|
<<span>/template</span>>
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
formConfig: [
|
|||
|
|
{
|
|||
|
|
type: 'input',
|
|||
|
|
label: '姓名',
|
|||
|
|
placeholder: 'width不传默认200px',
|
|||
|
|
param: 'xm1'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'input',
|
|||
|
|
label: '姓名',
|
|||
|
|
placeholder: 'width:120',
|
|||
|
|
param: 'xm2',
|
|||
|
|
width: 120
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'input',
|
|||
|
|
label: '姓名',
|
|||
|
|
placeholder: 'size:middle,高度为40px',
|
|||
|
|
param: 'xm3',
|
|||
|
|
size: 'middle'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'input',
|
|||
|
|
label: '姓名',
|
|||
|
|
placeholder: 'disabled: true',
|
|||
|
|
param: 'xm4',
|
|||
|
|
disabled: true
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</pre>
|
|||
|
|
</div>
|
|||
|
|
</el-collapse-item>
|
|||
|
|
</el-collapse>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-box">
|
|||
|
|
<h3>
|
|||
|
|
select下拉框(选项默认是id和name,可以通过labelField，valueField去改取值的key)
|
|||
|
|
</h3>
|
|||
|
|
<div style="height: 50px">
|
|||
|
|
<SearchBar
|
|||
|
|
:formConfigs="formConfig2"
|
|||
|
|
removeBlue
|
|||
|
|
@select-changed="selectChanged"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<el-collapse>
|
|||
|
|
<el-collapse-item title="显示代码">
|
|||
|
|
<div class="description">
|
|||
|
|
默认情况下最前面会显示蓝色小块，如果不需要可以使用<code>removeBlue</code>属性，具体写法见如下demo
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<pre>
|
|||
|
|
<<span>template</span>>
|
|||
|
|
<SearchBar :formConfigs="formConfig" removeBlue @select-changed="selectChanged" />
|
|||
|
|
<<span>/template</span>>
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
formConfig: [
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '性别',
|
|||
|
|
selectOptions: [
|
|||
|
|
{ id: 1, name: '男(清除不传默认true)' },
|
|||
|
|
{ id: 2, name: '女' }
|
|||
|
|
],
|
|||
|
|
param: 'xb1',
|
|||
|
|
defaultSelect: '',
|
|||
|
|
clearable: false //不传默认显示clearable，传false就不显示clearable
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '性别',
|
|||
|
|
selectOptions: [
|
|||
|
|
{ id: 1, name: '男(可设置默认值)' },
|
|||
|
|
{ id: 2, name: '女(width:120)' }
|
|||
|
|
],
|
|||
|
|
param: 'xb2',
|
|||
|
|
width: 120,
|
|||
|
|
defaultSelect: 2 // 默认值
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '性别',
|
|||
|
|
selectOptions: [
|
|||
|
|
{ id: 1, name: '男(可过滤)' },
|
|||
|
|
{ id: 2, name: '女' }
|
|||
|
|
],
|
|||
|
|
param: 'xb3',
|
|||
|
|
filterable: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '性别',
|
|||
|
|
selectOptions: [
|
|||
|
|
{ id: 1, name: '男(可多选)' },
|
|||
|
|
{ id: 2, name: '女' }
|
|||
|
|
],
|
|||
|
|
param: 'xb4',
|
|||
|
|
multiple: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '性别',
|
|||
|
|
selectOptions: [
|
|||
|
|
{ id: 1, name: '男(监听onchange)' },
|
|||
|
|
{ id: 2, name: '女' }
|
|||
|
|
],
|
|||
|
|
param: 'xb5',
|
|||
|
|
onchange: true
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</pre>
|
|||
|
|
</div>
|
|||
|
|
</el-collapse-item>
|
|||
|
|
</el-collapse>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-box">
|
|||
|
|
<h3>Cascader 级联选择器</h3>
|
|||
|
|
<div style="height: 120px">
|
|||
|
|
<SearchBar
|
|||
|
|
:formConfigs="formConfig22"
|
|||
|
|
@headBtnClick="headBtnClickCascader"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<el-collapse>
|
|||
|
|
<el-collapse-item title="显示代码">
|
|||
|
|
<div class="description"></div>
|
|||
|
|
<div>
|
|||
|
|
<pre>
|
|||
|
|
<<span>template</span>>
|
|||
|
|
<SearchBar
|
|||
|
|
:formConfigs="formConfig22"
|
|||
|
|
@headBtnClick="headBtnClickCascader" />
|
|||
|
|
<<span>/template</span>>
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
formConfig: [
|
|||
|
|
{
|
|||
|
|
type: 'cascader',
|
|||
|
|
label: '默认click触发子菜单',
|
|||
|
|
selectOptions: aa,
|
|||
|
|
param: 'cascader1',
|
|||
|
|
clearable: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'cascader',
|
|||
|
|
label: 'hover 触发子菜单',
|
|||
|
|
selectOptions: aa,
|
|||
|
|
param: 'cascader2',
|
|||
|
|
cascaderProps: { expandTrigger: 'hover' }
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'cascader',
|
|||
|
|
label: '仅显示最后一级',
|
|||
|
|
selectOptions: aa,
|
|||
|
|
param: 'cascader3',
|
|||
|
|
clearable: false,
|
|||
|
|
showAllLevels: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'cascader',
|
|||
|
|
label: '多选默认显示所有Tag',
|
|||
|
|
selectOptions: aa,
|
|||
|
|
param: 'cascader4',
|
|||
|
|
clearable: false,
|
|||
|
|
cascaderProps: { multiple: true }
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'cascader',
|
|||
|
|
label: '多选折叠展示Tag',
|
|||
|
|
selectOptions: aa,
|
|||
|
|
param: 'cascader5',
|
|||
|
|
clearable: false,
|
|||
|
|
cascaderProps: { multiple: true },
|
|||
|
|
collapseTags: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'cascader',
|
|||
|
|
label: '单选选择任意一级选项',
|
|||
|
|
selectOptions: aa,
|
|||
|
|
param: 'cascader6',
|
|||
|
|
cascaderProps: { checkStrictly: true }
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'cascader',
|
|||
|
|
label: '多选选择任意一级选项',
|
|||
|
|
selectOptions: aa,
|
|||
|
|
param: 'cascader7',
|
|||
|
|
cascaderProps: { multiple: true, checkStrictly: true }
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '查询',
|
|||
|
|
name: 'search',
|
|||
|
|
color: 'primary'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</pre>
|
|||
|
|
</div>
|
|||
|
|
</el-collapse-item>
|
|||
|
|
</el-collapse>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-box">
|
|||
|
|
<h3>日期选择框</h3>
|
|||
|
|
<div style="height: 50px">
|
|||
|
|
<SearchBar :formConfigs="formConfig3" />
|
|||
|
|
</div>
|
|||
|
|
<el-collapse>
|
|||
|
|
<el-collapse-item title="显示代码">
|
|||
|
|
<div class="description"></div>
|
|||
|
|
<div>
|
|||
|
|
<pre>
|
|||
|
|
<<span>template</span>>
|
|||
|
|
<SearchBar :formConfigs="formConfig" />
|
|||
|
|
<<span>/template</span>>
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
formConfig3: [
|
|||
|
|
{
|
|||
|
|
type: 'datePicker',
|
|||
|
|
label: '日期',
|
|||
|
|
dateType: 'date',
|
|||
|
|
format: 'yyyy-MM-dd',
|
|||
|
|
valueFormat: 'yyyy-MM-dd',
|
|||
|
|
placeholder: '日期',
|
|||
|
|
param: 'searchTime1',
|
|||
|
|
width: 150
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'datePicker',
|
|||
|
|
label: '日期',
|
|||
|
|
dateType: 'daterange',
|
|||
|
|
format: 'yyyy-MM-dd',
|
|||
|
|
valueFormat: 'yyyy-MM-dd',
|
|||
|
|
rangeSeparator: '-',
|
|||
|
|
startPlaceholder: '开始时间',
|
|||
|
|
endPlaceholder: '结束时间',
|
|||
|
|
param: 'searchTime2'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'datePicker',
|
|||
|
|
label: '默认日期',
|
|||
|
|
dateType: 'date',
|
|||
|
|
format: 'yyyy-MM-dd',
|
|||
|
|
valueFormat: 'yyyy-MM-dd',
|
|||
|
|
placeholder: '日期',
|
|||
|
|
param: 'searchTime3',
|
|||
|
|
defaultSelect: '2022-08-11',
|
|||
|
|
width: 150
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'datePicker',
|
|||
|
|
label: '日期',
|
|||
|
|
dateType: 'daterange',
|
|||
|
|
format: 'yyyy-MM-dd',
|
|||
|
|
valueFormat: 'yyyy-MM-dd',
|
|||
|
|
rangeSeparator: '-',
|
|||
|
|
startPlaceholder: '开始时间',
|
|||
|
|
endPlaceholder: '结束时间',
|
|||
|
|
defaultSelect: ['2022-08-11', '2022-08-12'],
|
|||
|
|
param: 'searchTime4'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</pre>
|
|||
|
|
</div>
|
|||
|
|
</el-collapse-item>
|
|||
|
|
</el-collapse>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-box">
|
|||
|
|
<h3>条件框联动(方式一)</h3>
|
|||
|
|
<div style="height: 50px">
|
|||
|
|
<SearchBar
|
|||
|
|
:formConfigs="formConfig33"
|
|||
|
|
ref="ruleForm33"
|
|||
|
|
@headBtnClick="buttonClick33"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<el-collapse>
|
|||
|
|
<el-collapse-item title="显示代码">
|
|||
|
|
<div class="description"></div>
|
|||
|
|
<div>
|
|||
|
|
<pre>
|
|||
|
|
<<span>template</span>>
|
|||
|
|
<SearchBar
|
|||
|
|
:formConfigs="formConfig"
|
|||
|
|
ref="ruleForm"
|
|||
|
|
@headBtnClick="buttonClick"
|
|||
|
|
/>
|
|||
|
|
<<span>/template</span>>
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
formConfig: [
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '时间类型',
|
|||
|
|
param: 'dateFilterType',
|
|||
|
|
defaultSelect: 0,
|
|||
|
|
selectOptions: [
|
|||
|
|
{ id: 0, name: '按时间段' },
|
|||
|
|
{ id: 1, name: '按日期' }
|
|||
|
|
],
|
|||
|
|
index: 0, // 记录下当前配置项的index，省的遍历的开销; index 和 extraOptions 要配合
|
|||
|
|
extraOptions: [
|
|||
|
|
{
|
|||
|
|
parent: 'dateFilterType',
|
|||
|
|
// 时间段选择
|
|||
|
|
type: 'datePicker',
|
|||
|
|
label: '时间段',
|
|||
|
|
dateType: 'daterange',
|
|||
|
|
format: 'yyyy-MM-dd',
|
|||
|
|
valueFormat: 'yyyy-MM-dd',
|
|||
|
|
defaultTime: ['00:00:00', '00:00:00'],
|
|||
|
|
rangeSeparator: '-',
|
|||
|
|
startPlaceholder: '开始时间',
|
|||
|
|
endPlaceholder: '结束时间',
|
|||
|
|
param: 'timeValue1'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
parent: 'dateFilterType',
|
|||
|
|
// 日期选择
|
|||
|
|
type: 'datePicker',
|
|||
|
|
label: '日期',
|
|||
|
|
dateType: 'date',
|
|||
|
|
placeholder: '选择日期',
|
|||
|
|
format: 'yyyy-MM-dd',
|
|||
|
|
valueFormat: 'yyyy-MM-dd',
|
|||
|
|
param: 'timeValue2'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '查询',
|
|||
|
|
name: 'search',
|
|||
|
|
color: 'primary'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '重置',
|
|||
|
|
name: 'reset'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
buttonClick(val) {
|
|||
|
|
switch (val.btnName) {
|
|||
|
|
case 'search':
|
|||
|
|
this.getList()
|
|||
|
|
break
|
|||
|
|
default:
|
|||
|
|
this.$refs.ruleForm.resetForm()
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.getList()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</pre>
|
|||
|
|
</div>
|
|||
|
|
</el-collapse-item>
|
|||
|
|
</el-collapse>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-box">
|
|||
|
|
<h3>条件框联动(方式二)</h3>
|
|||
|
|
<div style="height: 50px">
|
|||
|
|
<Search-bar
|
|||
|
|
:formConfigs="formConfig333"
|
|||
|
|
ref="searchBarForm"
|
|||
|
|
@headBtnClick="buttonClick4"
|
|||
|
|
@select-changed="selectType"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<el-collapse>
|
|||
|
|
<el-collapse-item title="显示代码">
|
|||
|
|
<div class="description"></div>
|
|||
|
|
<div>
|
|||
|
|
<pre>
|
|||
|
|
<<span>template</span>>
|
|||
|
|
<Search-bar
|
|||
|
|
:formConfigs="formConfig"
|
|||
|
|
ref="searchBarForm"
|
|||
|
|
@headBtnClick="buttonClick"
|
|||
|
|
@select-changed="selectType"
|
|||
|
|
/>
|
|||
|
|
<<span>/template</span>>
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
formConfig: [
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '查询方式',
|
|||
|
|
selectOptions: [
|
|||
|
|
{ id: 1, name: '玻璃ID' },
|
|||
|
|
{ id: 2, name: '抽检人' },
|
|||
|
|
{ id: 3, name: '检验项目' }
|
|||
|
|
],
|
|||
|
|
param: 'type',
|
|||
|
|
defaultSelect: '',
|
|||
|
|
onchange: true,
|
|||
|
|
width: 150
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: '',
|
|||
|
|
label: '',
|
|||
|
|
placeholder: '玻璃ID',
|
|||
|
|
param: 'glassId'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: '',
|
|||
|
|
label: '',
|
|||
|
|
placeholder: '抽检人',
|
|||
|
|
param: 'detector',
|
|||
|
|
width: 150
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: '',
|
|||
|
|
label: '',
|
|||
|
|
selectOptions: [],
|
|||
|
|
param: 'detectItem',
|
|||
|
|
labelField: 'dataName',
|
|||
|
|
valueField: 'dataName',
|
|||
|
|
defaultSelect: '',
|
|||
|
|
width: 150
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'datePicker',
|
|||
|
|
label: '抽检时间',
|
|||
|
|
dateType: 'datetimerange',
|
|||
|
|
format: 'yyyy-MM-dd HH:mm:ss',
|
|||
|
|
valueFormat: 'yyyy-MM-ddTHH:mm:ss',
|
|||
|
|
rangeSeparator: '-',
|
|||
|
|
startPlaceholder: '开始时间',
|
|||
|
|
endPlaceholder: '结束时间',
|
|||
|
|
param: 'timeVal',
|
|||
|
|
width: 350
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '查询',
|
|||
|
|
name: 'search',
|
|||
|
|
color: 'primary'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '重置',
|
|||
|
|
name: 'reset'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
selectType(val) {
|
|||
|
|
if (val.value === 1) {
|
|||
|
|
this.formConfig[0].defaultSelect = 1
|
|||
|
|
this.formConfig[1].type = 'input'
|
|||
|
|
this.formConfig[1].label = '玻璃ID'
|
|||
|
|
this.formConfig[2].type = ''
|
|||
|
|
this.formConfig[2].label = ''
|
|||
|
|
this.formConfig[3].type = ''
|
|||
|
|
this.formConfig[3].label = ''
|
|||
|
|
} else if (val.value === 2) {
|
|||
|
|
this.formConfig[0].defaultSelect = 2
|
|||
|
|
this.formConfig[1].type = ''
|
|||
|
|
this.formConfig[1].label = ''
|
|||
|
|
this.formConfig[2].type = 'input'
|
|||
|
|
this.formConfig[2].label = '抽检人'
|
|||
|
|
this.formConfig[3].type = ''
|
|||
|
|
this.formConfig[3].label = ''
|
|||
|
|
} else if (val.value === 3) {
|
|||
|
|
this.formConfig[0].defaultSelect = 3
|
|||
|
|
this.formConfig[1].type = ''
|
|||
|
|
this.formConfig[1].label = ''
|
|||
|
|
this.formConfig[2].type = ''
|
|||
|
|
this.formConfig[2].label = ''
|
|||
|
|
this.formConfig[3].type = 'select'
|
|||
|
|
this.formConfig[3].label = '检验项目'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
buttonClick4(val) {
|
|||
|
|
switch (val.btnName) {
|
|||
|
|
case 'search':
|
|||
|
|
this.listQuery.glassId = val.type === 1 ? val.glassId : ''
|
|||
|
|
this.listQuery.detector = val.type === 2 ? val.detector : ''
|
|||
|
|
this.listQuery.detectItem = val.type === 3 ? val.detectItem : ''
|
|||
|
|
this.listQuery.startTime = val.timeVal ? val.timeVal[0] : ''
|
|||
|
|
this.listQuery.endTime = val.timeVal ? val.timeVal[1] : ''
|
|||
|
|
this.getList()
|
|||
|
|
break
|
|||
|
|
case 'reset':
|
|||
|
|
this.$refs.searchBarForm.resetForm()
|
|||
|
|
this.listQuery.glassId = ''
|
|||
|
|
this.listQuery.detector = ''
|
|||
|
|
this.listQuery.detectItem = ''
|
|||
|
|
this.listQuery.startTime = ''
|
|||
|
|
this.listQuery.endTime = ''
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.getList()
|
|||
|
|
})
|
|||
|
|
break
|
|||
|
|
default:
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</pre>
|
|||
|
|
</div>
|
|||
|
|
</el-collapse-item>
|
|||
|
|
</el-collapse>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-box">
|
|||
|
|
<h3>操作按钮</h3>
|
|||
|
|
<div style="height: 50px">
|
|||
|
|
<SearchBar :formConfigs="formConfig4" />
|
|||
|
|
</div>
|
|||
|
|
<el-collapse>
|
|||
|
|
<el-collapse-item title="显示代码">
|
|||
|
|
<div class="description">
|
|||
|
|
在使用重置的时候需要注意，没有默认值的时候，可以直接使用this.$refs.searchBarForm.resetForm()
|
|||
|
|
但是又默认值的时候，除了使用上述的，还需要重置传入接口的参数的内容如this.listQuery.startTime
|
|||
|
|
= ''
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<pre>
|
|||
|
|
<<span>template</span>>
|
|||
|
|
<SearchBar :formConfigs="formConfig" />
|
|||
|
|
<<span>/template</span>>
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
formConfig: [
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '查询',
|
|||
|
|
name: 'search',
|
|||
|
|
color: 'primary'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '重置',
|
|||
|
|
name: 'reset'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '打印',
|
|||
|
|
name: 'print',
|
|||
|
|
color: 'primary',
|
|||
|
|
plain: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '成功',
|
|||
|
|
name: 'success',
|
|||
|
|
color: 'success'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '信息',
|
|||
|
|
name: 'info',
|
|||
|
|
color: 'info'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '警告',
|
|||
|
|
name: 'warning',
|
|||
|
|
color: 'warning'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '危险',
|
|||
|
|
name: 'danger',
|
|||
|
|
color: 'danger'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</pre>
|
|||
|
|
</div>
|
|||
|
|
</el-collapse-item>
|
|||
|
|
</el-collapse>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-box">
|
|||
|
|
<h3>autocomplete</h3>
|
|||
|
|
<div style="height: 50px">
|
|||
|
|
<SearchBar :formConfigs="formConfig5" />
|
|||
|
|
</div>
|
|||
|
|
<el-collapse>
|
|||
|
|
<el-collapse-item title="显示代码">
|
|||
|
|
<div class="description">
|
|||
|
|
在使用重置的时候需要注意，没有默认值的时候，可以直接使用this.$refs.searchBarForm.resetForm()
|
|||
|
|
但是又默认值的时候，除了使用上述的，还需要重置传入接口的参数的内容如this.listQuery.startTime
|
|||
|
|
= ''
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<pre>
|
|||
|
|
<<span>template</span>>
|
|||
|
|
<SearchBar :formConfigs="formConfig" />
|
|||
|
|
<<span>/template</span>>
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
formConfig: [
|
|||
|
|
{
|
|||
|
|
type: 'autocomplete',
|
|||
|
|
label: '地名',
|
|||
|
|
placeholder: '地名',
|
|||
|
|
param: 'workOrderName',
|
|||
|
|
querySearch: (queryString, cb) => {
|
|||
|
|
const workOrders = this.workOrderList
|
|||
|
|
let result = queryString
|
|||
|
|
? workOrders.filter(
|
|||
|
|
(workOrder) =>
|
|||
|
|
workOrder.name
|
|||
|
|
.toLowerCase()
|
|||
|
|
.indexOf(queryString.toLowerCase()) === 0
|
|||
|
|
)
|
|||
|
|
: workOrders
|
|||
|
|
result = result.map((item) => ({
|
|||
|
|
value: item.name,
|
|||
|
|
workOrderName: item.name
|
|||
|
|
}))
|
|||
|
|
cb(result)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</pre>
|
|||
|
|
</div>
|
|||
|
|
</el-collapse-item>
|
|||
|
|
</el-collapse>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-box">
|
|||
|
|
<h3>slot其他按钮-导入导出等</h3>
|
|||
|
|
<div style="height: 50px">
|
|||
|
|
<SearchBar
|
|||
|
|
:formConfigs="formConfig8"
|
|||
|
|
ref="ruleForm333"
|
|||
|
|
@headBtnClick="buttonClick333"
|
|||
|
|
>
|
|||
|
|
<div style="display: inline-block">
|
|||
|
|
<el-upload
|
|||
|
|
style="display: inline-block"
|
|||
|
|
:on-success="importFile"
|
|||
|
|
:on-error="importFileError"
|
|||
|
|
action="https://jsonplaceholder.typicode.com/posts/"
|
|||
|
|
:show-file-list="false"
|
|||
|
|
>
|
|||
|
|
<el-button type="primary" size="small" plain>导入</el-button>
|
|||
|
|
</el-upload>
|
|||
|
|
</div>
|
|||
|
|
</SearchBar>
|
|||
|
|
</div>
|
|||
|
|
<el-collapse>
|
|||
|
|
<el-collapse-item title="显示代码">
|
|||
|
|
<div class="description">
|
|||
|
|
在使用重置的时候需要注意，没有默认值的时候，可以直接使用this.$refs.searchBarForm.resetForm()
|
|||
|
|
但是又默认值的时候，除了使用上述的，还需要重置传入接口的参数的内容如this.listQuery.startTime
|
|||
|
|
= ''
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<pre>
|
|||
|
|
<<span>template</span>>
|
|||
|
|
<SearchBar :formConfigs="formConfig" />
|
|||
|
|
<<span>/template</span>>
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
formConfig: [
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '产线',
|
|||
|
|
selectOptions: [
|
|||
|
|
{ id: '1', name: '产线1' },
|
|||
|
|
{ id: '2', name: '产线2' }
|
|||
|
|
],
|
|||
|
|
param: 'productionLine',
|
|||
|
|
defaultSelect: '',
|
|||
|
|
onchange: true,
|
|||
|
|
width: 200
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '设备',
|
|||
|
|
selectOptions: [
|
|||
|
|
{ id: '111', name: '设备1' },
|
|||
|
|
{ id: '222', name: '设备2' }
|
|||
|
|
],
|
|||
|
|
param: 'equit',
|
|||
|
|
defaultSelect: '',
|
|||
|
|
onchange: true,
|
|||
|
|
width: 200
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '查询',
|
|||
|
|
name: 'search',
|
|||
|
|
color: 'primary'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '重置',
|
|||
|
|
name: 'reset'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</pre>
|
|||
|
|
</div>
|
|||
|
|
</el-collapse-item>
|
|||
|
|
</el-collapse>
|
|||
|
|
</div>
|
|||
|
|
<div class="demo-box">
|
|||
|
|
<h3>多个select下拉框联动</h3>
|
|||
|
|
<div style="height: 50px">
|
|||
|
|
<SearchBar
|
|||
|
|
:formConfigs="formConfig8"
|
|||
|
|
ref="ruleForm"
|
|||
|
|
@headBtnClick="buttonClick"
|
|||
|
|
@select-changed="selectChanged8"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<el-collapse>
|
|||
|
|
<el-collapse-item title="显示代码">
|
|||
|
|
<div class="description">
|
|||
|
|
添加onchange: true属性
|
|||
|
|
'SearchBar'组件上用事件@select-changed="selectChanged"接收
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<pre>
|
|||
|
|
<<span>template</span>>
|
|||
|
|
<SearchBar :formConfigs="formConfig" />
|
|||
|
|
<<span>/template</span>>
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
formConfig: [
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '产线',
|
|||
|
|
selectOptions: [
|
|||
|
|
{ id: '1', name: '产线1' },
|
|||
|
|
{ id: '2', name: '产线2' }
|
|||
|
|
],
|
|||
|
|
param: 'productionLine',
|
|||
|
|
defaultSelect: '',
|
|||
|
|
onchange: true,
|
|||
|
|
width: 200
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '设备',
|
|||
|
|
selectOptions: [
|
|||
|
|
{ id: '111', name: '设备1' },
|
|||
|
|
{ id: '222', name: '设备2' }
|
|||
|
|
],
|
|||
|
|
param: 'equit',
|
|||
|
|
defaultSelect: '',
|
|||
|
|
onchange: true,
|
|||
|
|
width: 200
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '查询',
|
|||
|
|
name: 'search',
|
|||
|
|
color: 'primary'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '重置',
|
|||
|
|
name: 'reset'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
buttonClick(val) {
|
|||
|
|
switch (val.btnName) {
|
|||
|
|
case 'search':
|
|||
|
|
this.getList()
|
|||
|
|
break
|
|||
|
|
default:
|
|||
|
|
this.$refs.ruleForm.resetForm()
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.getList()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
selectChanged(val) {
|
|||
|
|
console.log(val)
|
|||
|
|
alert(JSON.stringify(val))
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</pre>
|
|||
|
|
</div>
|
|||
|
|
</el-collapse-item>
|
|||
|
|
</el-collapse>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: 'searchBar',
|
|||
|
|
data() {
|
|||
|
|
const aa = [
|
|||
|
|
{
|
|||
|
|
value: 'zhinan',
|
|||
|
|
label: '指南',
|
|||
|
|
disabled: true,
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
value: 'shejiyuanze',
|
|||
|
|
label: '设计原则',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
value: 'yizhi',
|
|||
|
|
label: '一致'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'fankui',
|
|||
|
|
label: '反馈'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'xiaolv',
|
|||
|
|
label: '效率'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'kekong',
|
|||
|
|
label: '可控'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'daohang',
|
|||
|
|
label: '导航',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
value: 'cexiangdaohang',
|
|||
|
|
label: '侧向导航'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'dingbudaohang',
|
|||
|
|
label: '顶部导航'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'zujian',
|
|||
|
|
label: '组件',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
value: 'basic',
|
|||
|
|
label: 'Basic',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
value: 'layout',
|
|||
|
|
label: 'Layout 布局'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'color',
|
|||
|
|
label: 'Color 色彩'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'typography',
|
|||
|
|
label: 'Typography 字体'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'icon',
|
|||
|
|
label: 'Icon 图标'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'button',
|
|||
|
|
label: 'Button 按钮'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'form',
|
|||
|
|
label: 'Form',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
value: 'radio',
|
|||
|
|
label: 'Radio 单选框'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'checkbox',
|
|||
|
|
label: 'Checkbox 多选框'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'input',
|
|||
|
|
label: 'Input 输入框'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'input-number',
|
|||
|
|
label: 'InputNumber 计数器'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'select',
|
|||
|
|
label: 'Select 选择器'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'cascader',
|
|||
|
|
label: 'Cascader 级联选择器'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'switch',
|
|||
|
|
label: 'Switch 开关'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'slider',
|
|||
|
|
label: 'Slider 滑块'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'time-picker',
|
|||
|
|
label: 'TimePicker 时间选择器'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'date-picker',
|
|||
|
|
label: 'DatePicker 日期选择器'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'datetime-picker',
|
|||
|
|
label: 'DateTimePicker 日期时间选择器'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'upload',
|
|||
|
|
label: 'Upload 上传'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'rate',
|
|||
|
|
label: 'Rate 评分'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'form',
|
|||
|
|
label: 'Form 表单'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'data',
|
|||
|
|
label: 'Data',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
value: 'table',
|
|||
|
|
label: 'Table 表格'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'tag',
|
|||
|
|
label: 'Tag 标签'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'progress',
|
|||
|
|
label: 'Progress 进度条'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'tree',
|
|||
|
|
label: 'Tree 树形控件'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'pagination',
|
|||
|
|
label: 'Pagination 分页'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'badge',
|
|||
|
|
label: 'Badge 标记'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'notice',
|
|||
|
|
label: 'Notice',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
value: 'alert',
|
|||
|
|
label: 'Alert 警告'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'loading',
|
|||
|
|
label: 'Loading 加载'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'message',
|
|||
|
|
label: 'Message 消息提示'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'message-box',
|
|||
|
|
label: 'MessageBox 弹框'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'notification',
|
|||
|
|
label: 'Notification 通知'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'navigation',
|
|||
|
|
label: 'Navigation',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
value: 'menu',
|
|||
|
|
label: 'NavMenu 导航菜单'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'tabs',
|
|||
|
|
label: 'Tabs 标签页'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'breadcrumb',
|
|||
|
|
label: 'Breadcrumb 面包屑'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'dropdown',
|
|||
|
|
label: 'Dropdown 下拉菜单'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'steps',
|
|||
|
|
label: 'Steps 步骤条'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'others',
|
|||
|
|
label: 'Others',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
value: 'dialog',
|
|||
|
|
label: 'Dialog 对话框'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'tooltip',
|
|||
|
|
label: 'Tooltip 文字提示'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'popover',
|
|||
|
|
label: 'Popover 弹出框'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'card',
|
|||
|
|
label: 'Card 卡片'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'carousel',
|
|||
|
|
label: 'Carousel 走马灯'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'collapse',
|
|||
|
|
label: 'Collapse 折叠面板'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'ziyuan',
|
|||
|
|
label: '资源',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
value: 'axure',
|
|||
|
|
label: 'Axure Components'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'sketch',
|
|||
|
|
label: 'Sketch Templates'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'jiaohu',
|
|||
|
|
label: '组件交互文档'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
return {
|
|||
|
|
formConfig1: [
|
|||
|
|
{
|
|||
|
|
type: 'input',
|
|||
|
|
label: '姓名',
|
|||
|
|
placeholder: 'width不传默认200px',
|
|||
|
|
param: 'xm1'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'input',
|
|||
|
|
label: '姓名',
|
|||
|
|
placeholder: 'width:120',
|
|||
|
|
param: 'xm2',
|
|||
|
|
width: 120
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'input',
|
|||
|
|
label: '姓名',
|
|||
|
|
placeholder: 'size:middle,高度为40px',
|
|||
|
|
param: 'xm3',
|
|||
|
|
size: 'middle'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'input',
|
|||
|
|
label: '姓名',
|
|||
|
|
placeholder: 'disabled: true',
|
|||
|
|
param: 'xm4',
|
|||
|
|
disabled: true
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
formConfig2: [
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '性别',
|
|||
|
|
selectOptions: [
|
|||
|
|
{ id: 1, name: '男(清除不传默认true)' },
|
|||
|
|
{ id: 2, name: '女' }
|
|||
|
|
],
|
|||
|
|
param: 'xb1',
|
|||
|
|
defaultSelect: '',
|
|||
|
|
clearable: false //不传默认显示clearable，传false就不显示clearable
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '性别',
|
|||
|
|
selectOptions: [
|
|||
|
|
{ id: 1, name: '男(可设置默认值)' },
|
|||
|
|
{ id: 2, name: '女(width:120)' }
|
|||
|
|
],
|
|||
|
|
param: 'xb2',
|
|||
|
|
width: 120,
|
|||
|
|
defaultSelect: 2 // 默认值
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '性别',
|
|||
|
|
selectOptions: [
|
|||
|
|
{ id: 1, name: '男(可过滤)' },
|
|||
|
|
{ id: 2, name: '女' }
|
|||
|
|
],
|
|||
|
|
param: 'xb3',
|
|||
|
|
filterable: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '性别',
|
|||
|
|
selectOptions: [
|
|||
|
|
{ id: 1, name: '男(可多选)' },
|
|||
|
|
{ id: 2, name: '女' }
|
|||
|
|
],
|
|||
|
|
param: 'xb4',
|
|||
|
|
multiple: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '性别',
|
|||
|
|
selectOptions: [
|
|||
|
|
{ id: 1, name: '男(监听onchange)' },
|
|||
|
|
{ id: 2, name: '女' }
|
|||
|
|
],
|
|||
|
|
param: 'xb5',
|
|||
|
|
onchange: true
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
formConfig22: [
|
|||
|
|
{
|
|||
|
|
type: 'cascader',
|
|||
|
|
label: '默认click触发子菜单',
|
|||
|
|
selectOptions: aa,
|
|||
|
|
param: 'cascader1',
|
|||
|
|
clearable: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'cascader',
|
|||
|
|
label: 'hover 触发子菜单',
|
|||
|
|
selectOptions: aa,
|
|||
|
|
param: 'cascader2',
|
|||
|
|
cascaderProps: { expandTrigger: 'hover' }
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'cascader',
|
|||
|
|
label: '仅显示最后一级',
|
|||
|
|
selectOptions: aa,
|
|||
|
|
param: 'cascader3',
|
|||
|
|
clearable: false,
|
|||
|
|
showAllLevels: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'cascader',
|
|||
|
|
label: '多选默认显示所有Tag',
|
|||
|
|
selectOptions: aa,
|
|||
|
|
param: 'cascader4',
|
|||
|
|
clearable: false,
|
|||
|
|
cascaderProps: { multiple: true }
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'cascader',
|
|||
|
|
label: '多选折叠展示Tag',
|
|||
|
|
selectOptions: aa,
|
|||
|
|
param: 'cascader5',
|
|||
|
|
clearable: false,
|
|||
|
|
cascaderProps: { multiple: true },
|
|||
|
|
collapseTags: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'cascader',
|
|||
|
|
label: '单选选择任意一级选项',
|
|||
|
|
selectOptions: aa,
|
|||
|
|
param: 'cascader6',
|
|||
|
|
cascaderProps: { checkStrictly: true }
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'cascader',
|
|||
|
|
label: '多选选择任意一级选项',
|
|||
|
|
selectOptions: aa,
|
|||
|
|
param: 'cascader7',
|
|||
|
|
cascaderProps: { multiple: true, checkStrictly: true }
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '查询',
|
|||
|
|
name: 'search',
|
|||
|
|
color: 'primary'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
formConfig3: [
|
|||
|
|
{
|
|||
|
|
type: 'datePicker',
|
|||
|
|
label: '日期',
|
|||
|
|
dateType: 'date',
|
|||
|
|
format: 'yyyy-MM-dd',
|
|||
|
|
valueFormat: 'yyyy-MM-dd',
|
|||
|
|
placeholder: '日期',
|
|||
|
|
param: 'searchTime1'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'datePicker',
|
|||
|
|
label: '日期',
|
|||
|
|
dateType: 'daterange',
|
|||
|
|
format: 'yyyy-MM-dd',
|
|||
|
|
valueFormat: 'yyyy-MM-dd',
|
|||
|
|
rangeSeparator: '-',
|
|||
|
|
startPlaceholder: '开始时间',
|
|||
|
|
endPlaceholder: '结束时间',
|
|||
|
|
param: 'searchTime2'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'datePicker',
|
|||
|
|
label: '默认日期',
|
|||
|
|
dateType: 'date',
|
|||
|
|
format: 'yyyy-MM-dd',
|
|||
|
|
valueFormat: 'yyyy-MM-dd',
|
|||
|
|
placeholder: '日期',
|
|||
|
|
param: 'searchTime3',
|
|||
|
|
defaultSelect: '2022-08-11'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'datePicker',
|
|||
|
|
label: '日期',
|
|||
|
|
dateType: 'daterange',
|
|||
|
|
format: 'yyyy-MM-dd',
|
|||
|
|
valueFormat: 'yyyy-MM-dd',
|
|||
|
|
rangeSeparator: '-',
|
|||
|
|
startPlaceholder: '开始时间',
|
|||
|
|
endPlaceholder: '结束时间',
|
|||
|
|
defaultSelect: ['2022-08-11', '2022-08-12'],
|
|||
|
|
param: 'searchTime4'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
formConfig33: [
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '时间类型',
|
|||
|
|
param: 'dateFilterType',
|
|||
|
|
defaultSelect: 0,
|
|||
|
|
selectOptions: [
|
|||
|
|
{ id: 0, name: '按时间段' },
|
|||
|
|
{ id: 1, name: '按日期' }
|
|||
|
|
],
|
|||
|
|
index: 0, // 记录下当前配置项的index，省的遍历的开销; index 和 extraOptions 要配合
|
|||
|
|
extraOptions: [
|
|||
|
|
{
|
|||
|
|
parent: 'dateFilterType',
|
|||
|
|
// 时间段选择
|
|||
|
|
type: 'datePicker',
|
|||
|
|
label: '时间段',
|
|||
|
|
dateType: 'daterange',
|
|||
|
|
format: 'yyyy-MM-dd',
|
|||
|
|
valueFormat: 'yyyy-MM-dd',
|
|||
|
|
defaultTime: ['00:00:00', '00:00:00'],
|
|||
|
|
rangeSeparator: '-',
|
|||
|
|
startPlaceholder: '开始时间',
|
|||
|
|
endPlaceholder: '结束时间',
|
|||
|
|
param: 'timeValue1'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
parent: 'dateFilterType',
|
|||
|
|
// 日期选择
|
|||
|
|
type: 'datePicker',
|
|||
|
|
label: '日期',
|
|||
|
|
dateType: 'date',
|
|||
|
|
placeholder: '选择日期',
|
|||
|
|
format: 'yyyy-MM-dd',
|
|||
|
|
valueFormat: 'yyyy-MM-dd',
|
|||
|
|
param: 'timeValue2'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '查询',
|
|||
|
|
name: 'search',
|
|||
|
|
color: 'primary'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '重置',
|
|||
|
|
name: 'reset'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
formConfig333: [
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '查询方式',
|
|||
|
|
selectOptions: [
|
|||
|
|
{ id: 1, name: '玻璃ID' },
|
|||
|
|
{ id: 2, name: '抽检人' },
|
|||
|
|
{ id: 3, name: '检验项目' }
|
|||
|
|
],
|
|||
|
|
param: 'type',
|
|||
|
|
defaultSelect: '',
|
|||
|
|
onchange: true,
|
|||
|
|
width: 150
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: '',
|
|||
|
|
label: '',
|
|||
|
|
placeholder: '玻璃ID',
|
|||
|
|
param: 'glassId'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: '',
|
|||
|
|
label: '',
|
|||
|
|
placeholder: '抽检人',
|
|||
|
|
param: 'detector',
|
|||
|
|
width: 150
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: '',
|
|||
|
|
label: '',
|
|||
|
|
selectOptions: [],
|
|||
|
|
param: 'detectItem',
|
|||
|
|
labelField: 'dataName',
|
|||
|
|
valueField: 'dataName',
|
|||
|
|
defaultSelect: '',
|
|||
|
|
width: 150
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'datePicker',
|
|||
|
|
label: '抽检时间',
|
|||
|
|
dateType: 'datetimerange',
|
|||
|
|
format: 'yyyy-MM-dd HH:mm:ss',
|
|||
|
|
valueFormat: 'yyyy-MM-ddTHH:mm:ss',
|
|||
|
|
rangeSeparator: '-',
|
|||
|
|
startPlaceholder: '开始时间',
|
|||
|
|
endPlaceholder: '结束时间',
|
|||
|
|
param: 'timeVal'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '查询',
|
|||
|
|
name: 'search',
|
|||
|
|
color: 'primary'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '重置',
|
|||
|
|
name: 'reset'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
formConfig4: [
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '查询',
|
|||
|
|
name: 'search',
|
|||
|
|
color: 'primary'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '重置',
|
|||
|
|
name: 'reset'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '打印',
|
|||
|
|
name: 'print',
|
|||
|
|
color: 'primary',
|
|||
|
|
plain: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '成功',
|
|||
|
|
name: 'success',
|
|||
|
|
color: 'success'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '信息',
|
|||
|
|
name: 'info',
|
|||
|
|
color: 'info'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '警告',
|
|||
|
|
name: 'warning',
|
|||
|
|
color: 'warning'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '危险',
|
|||
|
|
name: 'danger',
|
|||
|
|
color: 'danger'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
formConfig5: [
|
|||
|
|
{
|
|||
|
|
type: 'autocomplete',
|
|||
|
|
label: '地名',
|
|||
|
|
placeholder: '地名',
|
|||
|
|
param: 'workOrderName',
|
|||
|
|
querySearch: (queryString, cb) => {
|
|||
|
|
const workOrders = this.workOrderList
|
|||
|
|
let result = queryString
|
|||
|
|
? workOrders.filter(
|
|||
|
|
(workOrder) =>
|
|||
|
|
workOrder.name
|
|||
|
|
.toLowerCase()
|
|||
|
|
.indexOf(queryString.toLowerCase()) === 0
|
|||
|
|
)
|
|||
|
|
: workOrders
|
|||
|
|
result = result.map((item) => ({
|
|||
|
|
value: item.name,
|
|||
|
|
workOrderName: item.name
|
|||
|
|
}))
|
|||
|
|
cb(result)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
workOrderList: [
|
|||
|
|
{ id: 1, name: '北京' },
|
|||
|
|
{ id: 2, name: '上海' },
|
|||
|
|
{ id: 3, name: '广州' },
|
|||
|
|
{ id: 4, name: '深证' },
|
|||
|
|
{ id: 5, name: '杭州' }
|
|||
|
|
],
|
|||
|
|
formConfig7: [
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '产线',
|
|||
|
|
selectOptions: [
|
|||
|
|
{ id: '1', name: '产线1' },
|
|||
|
|
{ id: '2', name: '产线2' }
|
|||
|
|
],
|
|||
|
|
param: 'productionLine',
|
|||
|
|
defaultSelect: '',
|
|||
|
|
width: 100
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'input',
|
|||
|
|
label: '用户名',
|
|||
|
|
placeholder: '用户名',
|
|||
|
|
param: 'userName'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '时间类型',
|
|||
|
|
param: 'dateFilterType',
|
|||
|
|
defaultSelect: 0,
|
|||
|
|
selectOptions: [
|
|||
|
|
{ id: 0, name: '按时间段' },
|
|||
|
|
{ id: 1, name: '按日期' }
|
|||
|
|
],
|
|||
|
|
index: 2, // 记录下当前配置项的index，省的遍历的开销; index 和 extraOptions 要配合
|
|||
|
|
extraOptions: [
|
|||
|
|
{
|
|||
|
|
parent: 'dateFilterType',
|
|||
|
|
// 时间段选择
|
|||
|
|
type: 'datePicker',
|
|||
|
|
label: '时间段',
|
|||
|
|
dateType: 'daterange',
|
|||
|
|
format: 'yyyy-MM-dd',
|
|||
|
|
valueFormat: 'yyyy-MM-dd',
|
|||
|
|
defaultTime: ['00:00:00', '00:00:00'],
|
|||
|
|
rangeSeparator: '-',
|
|||
|
|
startPlaceholder: '开始时间',
|
|||
|
|
endPlaceholder: '结束时间',
|
|||
|
|
param: 'timeValue1'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
parent: 'dateFilterType',
|
|||
|
|
// 日期选择
|
|||
|
|
type: 'datePicker',
|
|||
|
|
label: '日期',
|
|||
|
|
dateType: 'date',
|
|||
|
|
placeholder: '选择日期',
|
|||
|
|
format: 'yyyy-MM-dd',
|
|||
|
|
valueFormat: 'yyyy-MM-dd',
|
|||
|
|
param: 'timeValue2'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '查询',
|
|||
|
|
name: 'search',
|
|||
|
|
color: 'primary'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '重置',
|
|||
|
|
name: 'reset'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '新增',
|
|||
|
|
name: 'add',
|
|||
|
|
color: 'primary',
|
|||
|
|
plain: true
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
formConfig8: [
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '产线',
|
|||
|
|
selectOptions: [
|
|||
|
|
{ id: '1', name: '产线1' },
|
|||
|
|
{ id: '2', name: '产线2' }
|
|||
|
|
],
|
|||
|
|
param: 'productionLine',
|
|||
|
|
defaultSelect: '',
|
|||
|
|
onchange: true,
|
|||
|
|
width: 200
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '设备',
|
|||
|
|
selectOptions: [
|
|||
|
|
{ id: '111', name: '设备1' },
|
|||
|
|
{ id: '222', name: '设备2' }
|
|||
|
|
],
|
|||
|
|
param: 'equit',
|
|||
|
|
defaultSelect: '',
|
|||
|
|
onchange: true,
|
|||
|
|
width: 200
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '查询',
|
|||
|
|
name: 'search',
|
|||
|
|
color: 'primary'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: '重置',
|
|||
|
|
name: 'reset'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
listQuery: {
|
|||
|
|
current: 1,
|
|||
|
|
size: 20,
|
|||
|
|
glassId: '',
|
|||
|
|
detector: '',
|
|||
|
|
detectItem: '',
|
|||
|
|
startTime: '',
|
|||
|
|
endTime: ''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getList() {
|
|||
|
|
console.log('getList')
|
|||
|
|
},
|
|||
|
|
selectChanged(val) {
|
|||
|
|
console.log(val)
|
|||
|
|
},
|
|||
|
|
buttonClick33(val) {
|
|||
|
|
console.log(val)
|
|||
|
|
switch (val.btnName) {
|
|||
|
|
case 'search':
|
|||
|
|
this.getList()
|
|||
|
|
break
|
|||
|
|
default:
|
|||
|
|
this.$refs.ruleForm33.resetForm()
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.getList()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
buttonClick333(val) {
|
|||
|
|
console.log(val)
|
|||
|
|
switch (val.btnName) {
|
|||
|
|
case 'search':
|
|||
|
|
this.getList()
|
|||
|
|
break
|
|||
|
|
default:
|
|||
|
|
this.$refs.ruleForm333.resetForm()
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.getList()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
buttonClick(val) {
|
|||
|
|
console.log(val)
|
|||
|
|
switch (val.btnName) {
|
|||
|
|
case 'search':
|
|||
|
|
this.getList()
|
|||
|
|
break
|
|||
|
|
case 'reset':
|
|||
|
|
this.$refs.ruleForm.resetForm()
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.getList()
|
|||
|
|
})
|
|||
|
|
break
|
|||
|
|
default:
|
|||
|
|
this.addOrEditTitle = '新增'
|
|||
|
|
alert('新增')
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
buttonClick4(val) {
|
|||
|
|
switch (val.btnName) {
|
|||
|
|
case 'search':
|
|||
|
|
this.listQuery.glassId = val.type === 1 ? val.glassId : ''
|
|||
|
|
this.listQuery.detector = val.type === 2 ? val.detector : ''
|
|||
|
|
this.listQuery.detectItem = val.type === 3 ? val.detectItem : ''
|
|||
|
|
this.listQuery.startTime = val.timeVal ? val.timeVal[0] : ''
|
|||
|
|
this.listQuery.endTime = val.timeVal ? val.timeVal[1] : ''
|
|||
|
|
this.getList()
|
|||
|
|
break
|
|||
|
|
case 'reset':
|
|||
|
|
this.$refs.searchBarForm.resetForm()
|
|||
|
|
this.listQuery.glassId = ''
|
|||
|
|
this.listQuery.detector = ''
|
|||
|
|
this.listQuery.detectItem = ''
|
|||
|
|
this.listQuery.startTime = ''
|
|||
|
|
this.listQuery.endTime = ''
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.getList()
|
|||
|
|
})
|
|||
|
|
break
|
|||
|
|
default:
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
selectType(val) {
|
|||
|
|
if (val.value === 1) {
|
|||
|
|
this.formConfig333[0].defaultSelect = 1
|
|||
|
|
this.formConfig333[1].type = 'input'
|
|||
|
|
this.formConfig333[1].label = '玻璃ID'
|
|||
|
|
this.formConfig333[2].type = ''
|
|||
|
|
this.formConfig333[2].label = ''
|
|||
|
|
this.formConfig333[3].type = ''
|
|||
|
|
this.formConfig333[3].label = ''
|
|||
|
|
} else if (val.value === 2) {
|
|||
|
|
this.formConfig333[0].defaultSelect = 2
|
|||
|
|
this.formConfig333[1].type = ''
|
|||
|
|
this.formConfig333[1].label = ''
|
|||
|
|
this.formConfig333[2].type = 'input'
|
|||
|
|
this.formConfig333[2].label = '抽检人'
|
|||
|
|
this.formConfig333[3].type = ''
|
|||
|
|
this.formConfig333[3].label = ''
|
|||
|
|
} else if (val.value === 3) {
|
|||
|
|
this.formConfig333[0].defaultSelect = 3
|
|||
|
|
this.formConfig333[1].type = ''
|
|||
|
|
this.formConfig333[1].label = ''
|
|||
|
|
this.formConfig333[2].type = ''
|
|||
|
|
this.formConfig333[2].label = ''
|
|||
|
|
this.formConfig333[3].type = 'select'
|
|||
|
|
this.formConfig333[3].label = '检验项目'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
importFile() {},
|
|||
|
|
importFileError() {},
|
|||
|
|
headBtnClickCascader(val) {
|
|||
|
|
console.log(val)
|
|||
|
|
},
|
|||
|
|
selectChanged8(val) {
|
|||
|
|
console.log(val)
|
|||
|
|
alert(JSON.stringify(val))
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.search-bar {
|
|||
|
|
.demo-box {
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
.description code {
|
|||
|
|
color: #5e6d82;
|
|||
|
|
background-color: #e6effb;
|
|||
|
|
margin: 0 4px;
|
|||
|
|
display: inline-block;
|
|||
|
|
padding: 1px 5px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
height: 18px;
|
|||
|
|
line-height: 18px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|