ssc
4 years ago
parent
d327299fa5
commit
4c9e833d7a
12 changed files with 273 additions and 50 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,146 @@ |
||||
<template> |
||||
<el-dialog ref="wf-dialog" |
||||
custom-class="wf-dialog" |
||||
:visible.sync="visible" |
||||
title="表单搜索条件" |
||||
width="60%" |
||||
append-to-body |
||||
v-dialogdrag> |
||||
<avue-form v-model="form" |
||||
:option="option" |
||||
@submit="handleSubmit"></avue-form> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'wf-search', |
||||
props: { |
||||
value: Array, |
||||
default: () => { |
||||
return [] |
||||
} |
||||
}, |
||||
watch: { |
||||
value: { |
||||
handler(val) { |
||||
if (val) { |
||||
const arr = [] |
||||
this.deepClone(val).split(',').forEach(s => { |
||||
const row = s.split(":") |
||||
arr.push({ |
||||
column: row[0], |
||||
condition: row[1], |
||||
value: row[2] |
||||
}) |
||||
}) |
||||
this.form.search = arr |
||||
} |
||||
}, |
||||
immediate: true |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
visible: false, |
||||
form: {}, |
||||
option: { |
||||
border: true, |
||||
submitText: '确定', |
||||
column: [ |
||||
{ |
||||
label: '', |
||||
labelWidth: 0, |
||||
span: 24, |
||||
prop: 'search', |
||||
type: 'dynamic', |
||||
children: { |
||||
align: 'center', |
||||
column: [ |
||||
{ |
||||
label: '字段', |
||||
prop: 'column' |
||||
}, |
||||
{ |
||||
label: '条件', |
||||
prop: 'condition', |
||||
type: 'select', |
||||
dicData: [{ |
||||
label: '等于', |
||||
value: 'equal' |
||||
}, { |
||||
label: '不等于', |
||||
value: 'notEqual' |
||||
}, { |
||||
label: '包含', |
||||
value: 'like' |
||||
}, { |
||||
label: '存在', |
||||
value: 'exists' |
||||
}, { |
||||
label: '不存在', |
||||
value: 'notExists' |
||||
}, { |
||||
label: '大于', |
||||
value: 'greaterThan' |
||||
}, { |
||||
label: '小于', |
||||
value: 'lessThan' |
||||
}, { |
||||
label: '大于等于', |
||||
value: 'greaterThanOrEqual' |
||||
}, { |
||||
label: '小于等于', |
||||
value: 'lessThanOrEqual' |
||||
}], |
||||
placeholder: '条件，存在/不存在无需填值', |
||||
change: ({value, row}) => { |
||||
if (['exists', 'notExists'].includes(value)) row.value = '' |
||||
} |
||||
}, |
||||
{ |
||||
label: '值', |
||||
prop: 'value' |
||||
} |
||||
] |
||||
} |
||||
} |
||||
] |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
handleSubmit(form, done) { |
||||
const { search } = form |
||||
if (search && search.length > 0) { |
||||
const arr = [] |
||||
search.forEach(s => { |
||||
const { column, condition, value } = s |
||||
if (column && (['exists', 'notExists'].includes(condition) || (condition && value))) arr.push(`${column}:${condition}:${value}`) |
||||
}) |
||||
this.$emit('input', arr.join(",")) |
||||
} |
||||
this.visible = false |
||||
done() |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.wf-dialog { |
||||
display: flex; |
||||
flex-direction: column; |
||||
margin: 0 !important; |
||||
position: absolute; |
||||
top: 40%; |
||||
left: 50%; |
||||
transform: translate(-50%, -40%); |
||||
max-height: calc(100% - 30px); |
||||
max-width: calc(100% - 30px); |
||||
.el-dialog__body { |
||||
flex: 1; |
||||
overflow: auto; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue