<template>
|
<div class="form-content">
|
<div class="title" v-if="title">
|
<SectionTitle v-if="title" :title="title"></SectionTitle>
|
</div>
|
<el-form
|
:inline="true"
|
:label-width="labelWidth"
|
:class="`form-cols-${inline ? showColumn : '0'}`"
|
size="small"
|
>
|
<el-form-item
|
v-for="(item, index) in arrayInfo"
|
:key="index"
|
:class="{'textarea': item.type === 'textarea' || item.isLong}"
|
:label="formType === 'search' ? item.label : `${item.label}:`"
|
>
|
<div v-if="formType === 'text'">{{item.value}}</div>
|
<el-input
|
v-else-if="item.type === 'input'"
|
:value="item.value"
|
@input="updateValue($event, item)"
|
placeholder="请输入"
|
></el-input>
|
|
<div class="range-split" v-else-if="item.type === 'rangeInput'">
|
<div
|
class="range-input el-range-editor el-input__inner"
|
v-for="(rangeInputItem, rangeInputIndex) in item.nameList"
|
:key="rangeInputIndex"
|
>
|
<el-input
|
:value="item.value[rangeInputIndex] || ''"
|
@input="updateInputRange($event, item, rangeInputIndex)"
|
placeholder="请输入"
|
></el-input>
|
<span class="range-separato" v-if="rangeInputIndex < item.nameList.length - 1">-</span>
|
</div>
|
</div>
|
<el-select
|
v-else-if="item.type === 'select'"
|
:value="item.value"
|
:filterable="item.filterable || true"
|
@input="updateValue($event, item)"
|
placeholder="请选择"
|
clearable
|
>
|
<el-option
|
v-for="(optionsItem, optionsIndex) in item.options"
|
:key="optionsIndex"
|
:label="optionsItem.label || optionsItem[item.labelKey]"
|
:value="optionsItem.value || optionsItem[item.valueKey]"
|
></el-option>
|
</el-select>
|
|
<el-select
|
v-else-if="item.type === 'multipleSelect'"
|
:value="item.value"
|
@input="updateValue($event, item)"
|
placeholder="请选择"
|
:filterable="item.filterable || true"
|
multiple
|
collapse-tags
|
>
|
<!-- <el-checkbox-group :value="item.value">
|
<el-option
|
v-for="(optionsItem, optionsIndex) in item.options"
|
:key="optionsIndex"
|
:label="optionsItem.label || optionsItem[item.labelKey]"
|
:value="optionsItem.value || optionsItem[item.valueKey]"
|
>
|
<el-checkbox
|
:label="optionsItem.value || optionsItem[item.valueKey]"
|
:true-label="optionsItem.value || optionsItem[item.valueKey]"
|
:false-label="optionsItem.value || optionsItem[item.valueKey]"
|
@change="changeCheckbox($event, item)"
|
>{{ optionsItem.label || optionsItem[item.labelKey] }}</el-checkbox>
|
</el-option>
|
</el-checkbox-group>-->
|
|
<el-option
|
v-for="(optionsItem, optionsIndex) in item.options"
|
:key="optionsIndex"
|
:label="optionsItem.label || optionsItem[item.labelKey]"
|
:value="optionsItem.value || optionsItem[item.valueKey]"
|
></el-option>
|
</el-select>
|
|
<el-date-picker
|
v-else-if="item.type === 'date'"
|
:value="item.value"
|
@input="updateValue($event, item)"
|
:placeholder="item.placeholder||'请选择'"
|
type="date"
|
format="yyyy/MM/dd"
|
></el-date-picker>
|
|
<el-date-picker
|
v-else-if="item.type === 'rangeDate'"
|
:value="item.value"
|
@input="updateValue($event, item)"
|
type="daterange"
|
range-separator="-"
|
format="yyyy/MM/dd"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
></el-date-picker>
|
<el-date-picker
|
v-else-if="item.type === 'rangeDateTime'"
|
:value="item.value"
|
@input="updateValue($event, item)"
|
type="datetimerange"
|
range-separator="-"
|
format="yyyy/MM/dd"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
></el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item class="form-right" v-if="isShowButtons">
|
<div class="from-buttons">
|
<p>
|
<el-button @click="reset('reset')" size="small" v-if="buttonsList.includes(1)">重置</el-button>
|
</p>
|
<p>
|
<el-button
|
type="primary"
|
size="small"
|
v-if="buttonsList.includes(2)"
|
@click="$emit('onSubmit')"
|
>搜索</el-button>
|
</p>
|
<p>
|
<Fold
|
:isShowDetail="isShowDetail"
|
v-if="buttonsList.includes(3)"
|
@handleClick="$emit('handleClick')"
|
></Fold>
|
</p>
|
<p>
|
<el-button
|
type="primary"
|
size="small"
|
v-if="buttonsList.includes(4)"
|
@click="$emit('reSubmit')"
|
>查询最新数据</el-button>
|
</p>
|
</div>
|
</el-form-item>
|
</el-form>
|
<!-- <div class="from-buttons" v-if="buttonStatus === 2">
|
<p>
|
<el-button @click="reset" size="small" v-if="buttonsList.includes(1)">重置</el-button>
|
</p>
|
<p>
|
<el-button
|
type="primary"
|
size="small"
|
v-if="buttonsList.includes(2)"
|
@click="$emit('onSubmit')"
|
>搜索</el-button>
|
</p>
|
<p>
|
<Fold
|
:isShowDetail="isShowDetail"
|
v-if="buttonsList.includes(3)"
|
@handleClick="$emit('handleClick')"
|
></Fold>
|
</p>
|
</div>-->
|
</div>
|
</template>
|
<script>
|
// 表单项-目前用于搜索部分
|
import SectionTitle from './SectionTitle'
|
import Fold from './Fold'
|
export default {
|
components: {
|
Fold,
|
SectionTitle
|
},
|
props: {
|
/**
|
* info 表单数组(type: input, select, multipleSelect, date, rangeDate)
|
* @example
|
* [ { "type": "input", "label": "申请编号:", "value": "", "name": "serialNo" }]
|
*/
|
info: {
|
type: [Object, Array],
|
default: v => {
|
return []
|
}
|
},
|
|
// 展开，收起
|
isShowDetail: {
|
type: Boolean,
|
default: false
|
},
|
|
// 输入框或select的宽度
|
inputWidth: {
|
type: String,
|
default: '220px'
|
},
|
|
// 标题
|
title: {
|
type: String,
|
default: ''
|
},
|
|
// 0 不显示按钮 1 行内显示 2 换行显示
|
isShowButtons: {
|
type: Boolean,
|
default: true
|
},
|
|
inline: {
|
type: Boolean,
|
default: true
|
},
|
|
// 显示列数（固定列数，0为不设置固定值）
|
column: {
|
type: [String, Number],
|
default: 0
|
},
|
|
// 是否转换数组数据为','分割字符串
|
isChangeArray: {
|
type: Boolean,
|
default: true
|
},
|
|
// 按钮列表 1是否展示重置按钮，2是否展示搜索按钮，3是否展示展开按钮
|
buttonsList: {
|
type: [Object, Array],
|
default: v => {
|
return [1, 2, 3]
|
}
|
},
|
|
isShowRange: {
|
type: Boolean,
|
default: false
|
},
|
|
// form类型
|
// search：搜索条件类（屏幕适应缩放3-4个）
|
// edit：编辑类（屏幕适应缩放2-3个）
|
// info：编辑处理类（自动判断是否为readonly，屏幕适应缩放2-3个）
|
// text：文本展示类（不会有输入框，屏幕适应缩放2-3个）
|
formType: {
|
type: String,
|
default: 'search'
|
}
|
},
|
created() {
|
// 初始赋值处理
|
const arr = []
|
this.info.forEach(item => {
|
arr.push(Object.assign({}, item));
|
})
|
this.resetInfo = arr
|
// this.$store.commit('SET_resetInfo',arr)
|
this.reset()
|
},
|
data() {
|
return {
|
clientWidth: 0,
|
resetInfo: {},
|
}
|
},
|
mounted() {
|
window.addEventListener('resize', this.updateClientWidth)
|
this.updateClientWidth()
|
},
|
methods: {
|
updateClientWidth() {
|
const clientWidth = document.documentElement.clientWidth || 0
|
this.clientWidth = clientWidth
|
},
|
// 多选项点击checkbox时更新值
|
changeCheckbox(event, item) {
|
const { value } = item
|
let valArr = []
|
if (value.includes(event)) {
|
valArr = value.filter(itemValue => itemValue !== event)
|
} else {
|
valArr = [...value, event]
|
}
|
this.updateValue(valArr, item)
|
},
|
|
// 范围输入框输入值时的处理
|
updateInputRange(event, item, index) {
|
const { value, nameList } = item
|
const result = nameList.reduce((pre, curr, i) => {
|
let v = value[i] || ''
|
if (i === index) {
|
v = event
|
}
|
pre.push(v)
|
return pre
|
}, [])
|
this.updateValue(result, item)
|
},
|
|
// 日期范围选择器默认值处理
|
showDefaultDate(date) {
|
const start = new Date()
|
const end = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * date)
|
return [start, end]
|
},
|
|
// 更新值
|
updateValue(event, item) {
|
this.setValueInfo(event, item)
|
this.$emit('updateValue', event, item)
|
},
|
|
// 重置
|
reset(val) {
|
// this.$store.state.product.resetInfo.forEach((item,index) => {
|
// this.info[index].value = item.value
|
// })
|
console.log('reset',this.resetInfo)
|
this.resetInfo.forEach((item,index) => {
|
|
this.info[index].value = item.value
|
})
|
this.info.forEach((item,index) => {
|
this.updateValue(item.value, '')
|
})
|
|
this.$emit('onSubmit',val)
|
},
|
|
// 设置value信息
|
setValueInfo(event, changedItem) {
|
const { info, isChangeArray } = this
|
const result = info.reduce((pre, curr) => {
|
let { name, value, type, nameList = [] } = curr
|
|
// 优先更新value，避免updateValue中update过程获取valueInfo值无法及时更新的问题
|
if (name === changedItem.name) {
|
value = event
|
}
|
|
// 输入范围处理
|
if (type === 'rangeInput') {
|
nameList.forEach((inputName, inputIndex) => {
|
pre[inputName] = value[inputIndex] || ''
|
})
|
return pre
|
}
|
|
// select 多选处理
|
if (
|
isChangeArray &&
|
type === 'multipleSelect' &&
|
Array.isArray(value)
|
) {
|
value = value.join(',')
|
}
|
|
// 日期格式化处理
|
if (type === 'date' && value) {
|
value = this.format(value)
|
}
|
|
// 日期范围格式化处理
|
if (type === 'rangeDate' && Array.isArray(value)) {
|
value = value.reduce((rangePre, rangeCurr) => {
|
rangePre.push(this.format(rangeCurr))
|
return rangePre
|
}, [])
|
const { startKey, endKey } = curr
|
// 时间范围值特殊处理
|
if (typeof startKey !== 'undefined' && endKey !== 'undefined') {
|
pre[startKey] = value[0] ? this.format(value[0]) : ''
|
pre[endKey] = value[1] ? this.format(value[1]) : ''
|
// value = ''
|
}
|
}
|
pre[name] = value
|
return pre
|
}, {})
|
this.$emit('setValueInfo', result)
|
},
|
|
// 格式化时间
|
format(str) {
|
return this.dayjs(str).format('YYYY/MM/DD')
|
}
|
},
|
computed: {
|
showColumn() {
|
const { formType, column, clientWidth } = this
|
if (Number(column) !== 0) {
|
return Number(column)
|
}
|
const num = formType === 'search' ? 4 : 3
|
if (clientWidth > 1460) {
|
return num
|
}
|
return num - 1
|
},
|
labelWidth() {
|
const { formType } = this
|
return formType === 'search' ? '104px' : '160px'
|
},
|
arrayInfo() {
|
let { info = [], isShowDetail, showColumn, formType } = this
|
info = Array.isArray(info) ? info : [info]
|
if (formType !== 'search') {
|
return info
|
}
|
if (!isShowDetail) {
|
return info.filter(
|
(value, index) =>
|
index < (showColumn === 4 ? showColumn - 1 : showColumn)
|
)
|
}
|
return info
|
},
|
buttonStatus() {
|
// 0 不显示按钮 1 行内显示 2 换行显示
|
const { isShowButtons, isShowDetail } = this
|
let status = 1
|
if (isShowButtons) {
|
if (isShowDetail) {
|
status = 2
|
} else {
|
status = 1
|
}
|
} else {
|
status = 0
|
}
|
return status
|
}
|
}
|
}
|
</script>
|
<style lang="postcss" scoped>
|
/* .form-content {
|
& >>> .el-tag--info {
|
max-width: 94%;
|
overflow: hidden;
|
}
|
& >>> .el-select__tags-text {
|
display: inline-block;
|
max-width: 110px;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
& .from-buttons {
|
padding-left: 120px;
|
display: flex;
|
& >>> .el-button {
|
margin-left: 30px;
|
}
|
}
|
& >>> .el-tag__close {
|
top: -5px;
|
right: -6px;
|
}
|
& >>> .el-form-item__label {
|
color: #888888;
|
}
|
& >>> .button-item {
|
width: 280px;
|
padding-left: 60px;
|
& p {
|
display: inline-block;
|
margin-left: 22px;
|
&:first-child {
|
margin: 0;
|
}
|
& .el-button--small {
|
height: 32px;
|
font-size: 14px;
|
padding: 9px 17px;
|
}
|
}
|
}
|
& .textarea >>> .el-form-item__label {
|
line-height: 1.3em;
|
padding-top: 0;
|
}
|
& .range-separato {
|
width: 10px;
|
display: inline-block;
|
text-align: center;
|
}
|
& .range-input-item {
|
display: inline-block;
|
}
|
}
|
.range-split {
|
position: relative;
|
&::before {
|
content: '-';
|
position: absolute;
|
z-index: 1;
|
line-height: 24px;
|
left: -4px;
|
top: 0;
|
}
|
}
|
*/
|
|
.form-content {
|
& >>> .el-form {
|
display: grid;
|
padding-top: 16px;
|
& .el-form-item {
|
display: flex;
|
align-items: center;
|
padding-right: 40px;
|
margin: 0 0 24px 0;
|
& label {
|
padding: 0;
|
text-align: right;
|
margin-right: 10px;
|
line-height: 16px;
|
}
|
& .el-form-item__content {
|
flex: 1;
|
margin: 0;
|
}
|
&.right-item {
|
justify-content: right;
|
grid-column-start: 3;
|
grid-column-end: 4;
|
}
|
& .el-date-editor {
|
width: 100%;
|
}
|
& .el-input--small {
|
font-size: 14px;
|
}
|
& .el-select {
|
width: 100%;
|
}
|
}
|
& .form-sign {
|
& label::after {
|
content: ':';
|
}
|
}
|
}
|
|
& >>> .el-tag--info {
|
max-width: 94%;
|
overflow: hidden;
|
}
|
& >>> .el-select__tags-text {
|
display: inline-block;
|
max-width: 110px;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
& .from-buttons {
|
display: flex;
|
justify-content: flex-end;
|
& p {
|
margin: 0;
|
padding: 0;
|
}
|
& >>> .el-button {
|
height: 32px;
|
font-size: 12px;
|
margin-left: 12px;
|
}
|
& .normal-button {
|
height: 32px;
|
font-size: 14px;
|
margin-left: 22px;
|
}
|
}
|
& >>> .el-tag__close {
|
top: -5px;
|
right: -6px;
|
}
|
& >>> .el-form-item__label {
|
color: #888888;
|
}
|
& >>> .el-input__inner {
|
border-color: #eeeeee;
|
color: #222222;
|
}
|
& .long-lable >>> .el-form-item__label {
|
line-height: 1.3em;
|
padding-top: 0;
|
}
|
& .textarea {
|
width: 100%;
|
& >>> textarea {
|
height: 100%;
|
}
|
}
|
& .range-separato {
|
width: 10px;
|
display: inline-block;
|
text-align: center;
|
}
|
& .range-input-item {
|
display: inline-block;
|
}
|
& .range-split {
|
display: flex;
|
border: solid 1px #eee;
|
border-radius: 4px;
|
& .range-input {
|
padding: 0;
|
line-height: 32px;
|
height: 32px;
|
flex: 1;
|
border: none;
|
& .el-input {
|
line-height: 24px;
|
}
|
& >>> input {
|
line-height: 24px;
|
height: 24px;
|
|
border: none;
|
}
|
}
|
}
|
|
& .form-cols-1 {
|
grid-template-columns: 1fr;
|
& .textarea-item {
|
grid-column-start: 1;
|
grid-column-end: 1;
|
}
|
& .form-right {
|
grid-column-start: 1;
|
grid-column-end: 1;
|
}
|
}
|
|
& .form-cols-2 {
|
grid-template-columns: repeat(2, 1fr);
|
& .textarea-item {
|
grid-column-start: 1;
|
grid-column-end: 3;
|
}
|
& .form-right {
|
grid-column-start: 2;
|
grid-column-end: 3;
|
}
|
}
|
& .form-cols-3 {
|
grid-template-columns: repeat(3, 1fr);
|
& .textarea-item {
|
grid-column-start: 1;
|
grid-column-end: 4;
|
}
|
& .form-right {
|
grid-column-start: 3;
|
grid-column-end: 4;
|
}
|
}
|
& .form-cols-4 {
|
grid-template-columns: repeat(4, 1fr);
|
& .textarea-item {
|
grid-column-start: 1;
|
grid-column-end: 5;
|
}
|
& .form-right {
|
grid-column-start: 4;
|
grid-column-end: 5;
|
}
|
}
|
}
|
</style>
|
