1.使用场景:
传入后端的方式:
js文件中:
{
name: '创建日期', // input框前的名称
desc: 'createDateEq', // 传入后端的字段名称
type: 'dated', // 格式类型,本文使用ant desgin中的date ,自己又重新定义的dated
childrenDesc: ['createTimeStart', 'createTimeEnd'] // 使用选择日期需求传入后端的字段名
}
<template>
<div>
<a-row v-for="(row, index) in fieldList" :key="index">
<!-- 作用:当为行字段数整倍数时占行,供展开收起查询、重置放置 -->
<a-col v-if="row.placeholder">
<a-row>
<a-col><label></label></a-col>
</a-row>
</a-col>
<a-col :span="24 / rowFieldNum" v-else v-for="(item, ind) in row.rowData" :key="ind">
<a-row>
<a-col :span="9">
<label :class="[{ required: item.required }, { onlyread: isonlyread('state') }]">{{ item.name }}: </label>
</a-col>
<!-- 下拉框 多选状态-->
<a-col :span="15" v-if="item.type === 'select'">
<a-select
allowClear
showArrow
v-model="item.sousuo.low"
mode="multiple"
placeholder="请下拉选择"
:getPopupContainer="getPopupContainer"
:disabled="item.isDisable"
@change="emitSelectChange(item)"
@dropdownVisibleChange="selectDropdownVisibleChange(item)"
>
<a-select-option :value="row.value" v-for="(row, ind) in item.options" :key="ind">
{{ row.label }}
</a-select-option>
</a-select>
<span v-if="!isonlyread(item.desc)">{{ item.sousuolist.name }}</span>
</a-col>
<!-- 下拉框 单选状态-->
<!-- TODO: 应该radioclassList优化-->
<a-col :span="15" v-else-if="item.type === 'raidoselect'">
<a-select
allowClear
v-model="item.sousuo.low"
placeholder="请下拉选择"
:getPopupContainer="getPopupContainer"
:disabled="item.isDisable"
@change="emitSelectChange(item)"
@dropdownVisibleChange="selectDropdownVisibleChange(item)"
>
<a-select-option
:value="row.value"
v-for="(row, ind) in item.scopedSlots.selected"
:key="ind"
style="max-width: 128px;"
>
{{ row.label }}
</a-select-option>
</a-select>
<span v-if="!isonlyread(item.desc)">{{ item.sousuolist.name }}</span>
</a-col>
<a-col :span="15" v-else-if="item.type === 'radioSelect'">
<a-select
:allowClear="item.allowClear !== undefined ? item.allowClear : true"
placeholder="请下拉选择"
v-model="item.sousuo.low"
:getPopupContainer="getPopupContainer"
:disabled="item.isDisable"
@change="emitSelectChange(item)"
@dropdownVisibleChange="selectDropdownVisibleChange(item)"
>
<a-select-option
:value="row.value"
v-for="(row, ind) in item.options"
:key="ind"
style="max-width: 128px;"
>
{{ row.label }}
</a-select-option>
</a-select>
<span v-if="!isonlyread(item.desc)">{{ item.sousuolist.name }}</span>
</a-col>
<!-- 下拉框 搜索与远程数据结合 未启用-无使用场景 -->
<a-col :span="15" v-else-if="item.type === 'remoteSelect'">
<a-select
show-search
:value="value"
placeholder="input search text"
style="width: 200px"
:default-active-first-option="false"
:show-arrow="false"
:filter-option="false"
:not-found-content="null"
@search="handleSearch"
@change="handleChange"
>
<a-select-option v-for="d in data" :key="d.value">
{{ d.text }}
</a-select-option>
</a-select>
</a-col>
<!-- 下拉框 动态请求-单选状态-->
<a-col :span="15" v-else-if="item.type === 'dynamicRadioSelectList'">
<a-select
:allowClear="item.allowClear !== undefined ? item.allowClear : true"
v-model="item.sousuo.low"
placeholder="请下拉选择"
:getPopupContainer="getPopupContainer"
:disabled="item.isDisable"
:not-found-content="dynamicSelect.fetching ? undefined : null"
@change="emitSelectChange(item, formatDynamicSelectList(dynamicSelect.list[item.desc]))"
@dropdownVisibleChange="selectDropdownVisibleChange(item)"
>
<a-spin v-if="dynamicSelect.fetching" slot="notFoundContent" size="small" />
<a-select-option
:value="row.value"
v-for="(row, ind) in formatDynamicSelectList(dynamicSelect.list[item.desc])"
:key="ind"
>
{{ row.label }}
</a-select-option>
</a-select>
<span v-if="!isonlyread(item.desc)">{{ item.sousuolist.name }}</span>
</a-col>
<!-- 输入框 单框-->
<a-col :span="15" v-else-if="item.type === 'input'">
<a-input
ref="input"
allowClear
:disabled="item.isDisable"
:read-only="!isonlyread(item.desc)"
:maxLength="item.maxLength"
v-model="item.sousuo.low"
placeholder="请输入"
@focus="emitFocusInput(item)"
@blur="emitBlurInput(item)"
>
</a-input>
</a-col>
<!-- 输入框 自定义规则单框-->
<a-col :span="15" v-else-if="item.type === 'customInput'">
<a-input
ref="input"
allowClear
v-if="isonlyread(item.desc)"
:disabled="item.isDisable"
@keyup="item.sousuo.low = item.sousuo.low.replace(/\D/g, '')"
@afterpaste="item.sousuo.low = item.sousuo.low.replace(/\D/g, '')"
v-model="item.sousuo.low"
placeholder="请输入"
@change="item.customFun(item.sousuo.low)"
>
</a-input>
</a-col>
<!-- 输入框 单选-->
<a-col :span="15" v-else-if="item.type === 'texto'">
<a-input
allowClear
ref="input"
:disabled="item.isDisable"
:read-only="!isonlyread(item.desc)"
@change="emitInputChange($event, item, 'low', 'name1')"
placeholder="请输入/请选择"
:value="descName(item, 'low', 'name1')"
>
<a-icon
slot="suffix"
type="right"
class="iconSize"
@click.stop="emitOpenBox(item, ind, 'low', 'name1')"
/>
</a-input>
</a-col>
<a-col :span="15" v-else-if="item.type === 'texto2'">
<p class="mySelfInput">{{ item.sousuo.low }}</p>
</a-col>
<!-- 双输入框 -->
<a-col :span="15" v-else-if="item.type === 'textd'">
<a-input
placeholder="请输入/请选择"
:value="descName(item, 'low', 'name1')"
@input="emitInputChange($event, item, 'low', 'name1')"
:disabled="item.isDisable"
>
<a-icon slot="suffix" type="right" class="iconSize" @click="emitOpenBox(item, ind, 'low', 'name1')" />
</a-input>
至
<a-input
placeholder="请输入/请选择"
:value="descName(item, 'high', 'name2')"
@input="emitInputChange($event, item, 'high', 'name2')"
:disabled="item.isDisable"
>
<a-icon slot="suffix" type="right" class="iconSize" @click="emitOpenBox(item, ind, 'high', 'name2')" />
</a-input>
</a-col>
<!-- 起止时间 xx~xx-->
<a-col :span="15" v-else-if="item.type === 'dated'">
<a-range-picker
:format="dateFormat"
:disabled="item.isDisable"
:value="
item.sousuo.low === ''
? []
: [moment(item.sousuo.low[0], dateFormat), moment(item.sousuo.low[1], dateFormat)]
"
@change="(date, dateString) => emitOnChange(date, dateString, item, 'low')"
/>
</a-col>
<!-- 时间 xx-->
<a-col :span="15" v-else-if="item.type === 'dateo'">
<a-date-picker
:format="dateFormat"
:disabled="item.isDisable"
:value="item.sousuo.low == '' ? undefined : moment(item.sousuo.low, dateFormat)"
@change="(date, dateString) => emitOnChange(date, dateString, item, 'low')"
placeholder="请选择时间"
/>
</a-col>
</a-row>
</a-col>
</a-row>
</div>
</template>
<script>
import { Cfg } from '@/core/cfg/constant'
import moment from 'moment'
export default {
name: 'SearchFormField',
props: {
rowFieldNum: { type: Number, required: true },
recordState: {
type: Number,
default: 1
},
// 源字段
fieldListSource: {
type: Array,
default() {
return []
}
},
// 列表字段
fieldList: {
type: Array,
default() {
return []
}
},
// 只展示字段
onlyread: {
type: Array,
default() {
return []
}
},
// 下拉改变数据
dropdownVisibleChange: Function
},
data() {
return {
data: [],
value: [],
fetching: false,
dateFormat: 'YYYY-MM-DD',
// 动态列表
dynamicSelect: {
fetching: false,
list: {}
},
getPopupContainer: triggerNode => {
return triggerNode.parentNode || document.body
}
}
},
updated() {
console.log('updated:', this.fieldList)
},
mounted() {
console.log('saknr', this.saknr)
},
created() {
console.log('fieldListSource', this.fieldListSource)
// :recordState="recordState"
if (this.recordState == 1) {
if (this.fieldList && this.fieldList[0] && this.fieldList[0].rowData) {
this.fieldList[0].rowData.forEach(item => {
if (item.desc === 'zrpdart') {
item.sousuo.low = 'RES'
}
})
}
if (this.fieldList && this.fieldList[1] && this.fieldList[1].rowData) {
this.fieldList[1].rowData.forEach(item => {
if (item.desc === 'category') {
item.sousuo.low = '否'
}
})
}
}
if (this.recordState == 2) {
if (this.fieldList && this.fieldList[0] && this.fieldList[0].rowData) {
this.fieldList[0].rowData.forEach(item => {
if (item.desc === 'zrpdart') {
item.sousuo.low = 'RES'
}
})
}
console.log(this.fieldList[0].rowData)
if (this.fieldList && this.fieldList[1] && this.fieldList[1].rowData) {
this.fieldList[1].rowData.forEach(item => {
if (item.desc == 'category') {
item.sousuo.low = '是'
}
})
}
}
},
methods: {
handleChange(value) {
Object.assign(this, {
value,
data: [],
fetching: false
})
},
moment,
//符合只展示字段
isonlyread(prop) {
if (this.onlyread.indexOf(prop) != -1) {
return false
} else {
return true
}
},
// 输入框描述字段
descName(item, desc, name) {
console.log(item, desc, name)
let descValue = '' //字段值
let descName = '' //字段描述
if (item.sousuo[desc] != '') {
descValue = item.sousuo[desc]
}
if (item.sousuo[name] != '' && item.sousuo[name] != null) {
descName = ' ' + item.sousuo[name]
}
return descValue + descName
},
selectDropdownVisibleChange(item) {
this.$emit('dropdownVisibleChange', item)
// TODO:需要单据类型
if (item.desc === 'approvalNumber') {
this.fieldListSource.forEach(field => {
if (field.desc === 'approvalNode') {
field.sousuo.low = ''
}
})
}
// 审批节点
if (item.desc === 'approvalNode') {
this.dynamicSelect.fetching = true
const url = this.$interfaces.getOrgTemplate
const _this = this
let billsTypeCode = 'GLSH_XQJH_TB'
this.fieldListSource.forEach(field => {
if (field.desc === 'approvalNumber') {
billsTypeCode = field.sousuo.low || 'GLSH_XQJH_TB'
}
})
this.axios
.get(url, {
params: {
categoryCode: billsTypeCode,
organiseId: Cfg.FactoryId
}
})
.then(data => {
if (data.success) {
_this.dynamicSelect.list['approvalNode'] = []
data.data.forEach(item => {
_this.dynamicSelect.list['approvalNode'].push({
label: item.detail,
value: item.code
})
})
} else {
this.$message.error(data.data)
}
_this.dynamicSelect.fetching = false
})
.catch(error => {
// this.$message.error(this.$promptMsg.common.default_error, this.$promptMsg.hint_time.error_time)
})
.finally(() => {})
}
// 接口名称
if (item.desc === 'contentLike') {
this.dynamicSelect.fetching = true
const url = this.$interfaces.getErpLogSelectFunctionList
const _this = this
this.axios
.get(url, {
params: {
content: ''
}
})
.then(data => {
if (data.success) {
_this.dynamicSelect.list['contentLike'] = []
data.data.forEach(item => {
_this.dynamicSelect.list['contentLike'].push({
label: item.content,
value: item.content
})
})
} else {
// this.$message.error(data.message, this.$promptMsg.hint_time.error_time)
}
_this.dynamicSelect.fetching = false
})
.catch(error => {
// this.$message.error(this.$promptMsg.common.default_error, this.$promptMsg.hint_time.error_time)
})
.finally(() => {})
}
},
// 格式化动态列表结构
formatDynamicSelectList(list) {
if (!list) {
return []
}
return list
},
emitOpenBox(item, index, desc, name) {
this.$emit('openBox', item, index, desc, name)
},
emitInputChange(e, item, type, name) {
console.log('type field:', e.type)
this.$emit('inputChange', e, item, type, name)
},
emitSelectChange(item, opts) {
console.log(item)
this.$emit('handleSelectChange', item, opts)
},
emitFocusInput(item) {
this.$emit('focusInput', item)
},
emitBlurInput(item) {
this.$emit('blurInput', item)
},
emitOnChange(date, dateString, item, desc) {
this.$emit('onChange', date, dateString, item, desc)
}
},
computed: {
saknr() {
return this.fieldListSource.filter(item => item.desc == 'saknr')
}
}
}
</script>
<style scoped>
label.required::before {
display: inline-block;
margin-right: 4px;
color: #f5222d;
font-size: 14px;
font-family: SimSun, sans-serif;
line-height: 1;
content: '*';
}
</style>
getTransferQueryParams(arr) {
const json = {}
arr.forEach(item => {
if (item.type === 'dated') {
if (Array.isArray(item.sousuo.low)) {
json[item.childrenDesc[0]] = item.sousuo.low[0] //item.sousuo.low[0]如果存在就执行如下的3行,没有就是‘’ 2.紧接着判断是否js文件中是否定义了formatDate 定义了就以此为准,没有就会在后边添加了' 00:00:00'
? item.formatDate
? item.sousuo.low[0]
: item.sousuo.low[0] + ' 00:00:00'
: ''
json[item.childrenDesc[1]] = item.sousuo.low[1]
? item.formatDate
? item.sousuo.low[1]
: item.sousuo.low[1] + ' 23:59:59'
: ''
} else {
json[item.childrenDesc[0]] = ''
json[item.childrenDesc[1]] = ''
}
} else {
json[item.desc] = item.sousuo.low
}
})
return json
},
emitHandleSaveOk() {
this.$emit('searchForm', this.getTransferQueryParams(this.searchList))
},