[update] 企标立项、变更流程
This commit is contained in:
lideqin
@@ -0,0 +1,264 @@
|
||||
<!-- form表单中下拉框样式的组件-->
|
||||
<template>
|
||||
<div>
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="picker"
|
||||
:value="showValue"
|
||||
v-bind="$attrs"
|
||||
v-on="childListeners"
|
||||
@click="showPickerFunc"
|
||||
:rules="rules"
|
||||
/>
|
||||
<van-popup v-model="showPicker" style="height: 50vh" :class="{'dict-checkbox-field-popup': multiple}" position="bottom">
|
||||
<!--background="#3074F6"-->
|
||||
<van-search
|
||||
v-if="canSearch"
|
||||
v-model="searchValue"
|
||||
placeholder="请输入搜索关键词"
|
||||
input-align="left"
|
||||
@search="onSearch"
|
||||
@clear="onClear"
|
||||
/>
|
||||
<template v-if="!multiple">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="columnDataShow"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showPicker = false"
|
||||
:value-key="showKey"
|
||||
>
|
||||
</van-picker>
|
||||
</template>
|
||||
<template v-if="multiple">
|
||||
<div class="item-ope">
|
||||
<span class="van-picker__cancel" @click="onCancel">取消</span>
|
||||
<span class="van-picker__confirm" @click="onConfirm">确认</span>
|
||||
</div>
|
||||
<van-checkbox-group class="dict-checkbox-group" v-model="checkedArr" ref="checkboxGroup">
|
||||
<van-checkbox
|
||||
v-for="(item) in columnDataShow"
|
||||
:key="item[valueKey]"
|
||||
:name="item[valueKey]"
|
||||
shape="square"
|
||||
>
|
||||
{{ item[showKey] }}
|
||||
</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</template>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'PickerField',
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number, Object],
|
||||
required: false
|
||||
},
|
||||
columnData: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => {
|
||||
return [
|
||||
// {name: '1name', value: '1', text: 3},
|
||||
// {name: '2name', value: '2', text: 3},
|
||||
]
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
type: [Array, null],
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
// 默认是否有其他值
|
||||
valueKey: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'value'
|
||||
},
|
||||
// picker中显示的key值
|
||||
showKey: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'name'
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
// 是否多选
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
// 是否可以查询
|
||||
canSearch: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
// 当值不存在于下拉框中，是否要回显传的value
|
||||
needShowValue: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showPicker: false,
|
||||
showValue: '', // 当前显示的input的值
|
||||
searchValue: '', // 查询的字段
|
||||
columnDataShow: [], // 当前显示的下拉框数据
|
||||
checkedArr: [] // 选中的数据，在多选的情况下使用
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
immediate: true,
|
||||
handler: function () {
|
||||
this.initVal()
|
||||
// console.log('--------value----------', this.value)
|
||||
}
|
||||
},
|
||||
columnData: {
|
||||
immediate: true,
|
||||
handler: function () {
|
||||
this.columnDataShow = this.columnData
|
||||
this.initVal()
|
||||
// console.log('--------columnData----------', this.columnData)
|
||||
}
|
||||
},
|
||||
showPicker (val) {
|
||||
this.searchValue = ''
|
||||
if (val) {
|
||||
this.columnDataShow = [...this.columnData]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 透传给下级组件的事件，需要排除本组件使用的change事件
|
||||
childListeners () {
|
||||
// const vm = this
|
||||
const result = Object.assign({},
|
||||
this.$listeners
|
||||
)
|
||||
delete result.change
|
||||
return result
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showPickerFunc () {
|
||||
if (this.readonly || this.$attrs.disabled) return
|
||||
this.showPicker = true
|
||||
},
|
||||
initVal () {
|
||||
if (!this.multiple) {
|
||||
if (this.value) {
|
||||
let item
|
||||
if (this.columnData.length > 0) {
|
||||
item = this.columnData.find(tt => (tt[this.valueKey] + '') === (this.value + ''))
|
||||
}
|
||||
// 如果下拉列表中没有这一项，就回显值
|
||||
if (!item) {
|
||||
this.showValue = this.needShowValue ? this.value : ''
|
||||
} else {
|
||||
this.showValue = (item || {})[this.showKey]
|
||||
}
|
||||
} else {
|
||||
this.showValue = ''
|
||||
}
|
||||
} else {
|
||||
// 多选下拉框
|
||||
if (this.value) {
|
||||
this.checkedArr = this.value.split(',')
|
||||
const showArr = []
|
||||
this.checkedArr.map(item => {
|
||||
const column = this.columnData.find(tt => (tt[this.valueKey] + '') === (item + ''))
|
||||
if (column) {
|
||||
showArr.push((column || {})[this.showKey])
|
||||
}
|
||||
this.showValue = showArr.join('，')
|
||||
})
|
||||
} else {
|
||||
this.showValue = ''
|
||||
this.checkedArr = []
|
||||
}
|
||||
}
|
||||
},
|
||||
onConfirm (value) {
|
||||
console.log('--------------')
|
||||
if (!value) return
|
||||
if (this.multiple) {
|
||||
if (this.checkedArr.length === 0) {
|
||||
this.$toast('请至少选择一条数据')
|
||||
return
|
||||
}
|
||||
this.showPicker = false
|
||||
this.$emit('change', this.checkedArr.join())
|
||||
} else {
|
||||
if (!this.valueKey) {
|
||||
this.$emit('change', value)
|
||||
} else {
|
||||
this.showValue = value[this.showKey]
|
||||
this.$emit('change', value[this.valueKey])
|
||||
}
|
||||
this.showPicker = false
|
||||
}
|
||||
},
|
||||
onCancel () {
|
||||
this.showPicker = false
|
||||
},
|
||||
onSearch (val) {
|
||||
if (val) {
|
||||
this.columnDataShow = this.columnData.filter(tt => tt[this.showKey].indexOf(val) > -1)
|
||||
} else {
|
||||
this.columnDataShow = [...this.columnData]
|
||||
}
|
||||
},
|
||||
onClear () {
|
||||
this.columnDataShow = [...this.columnData]
|
||||
}
|
||||
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '~@assets/less/common.less';
|
||||
|
||||
/deep/ .dict-checkbox-field-popup {
|
||||
height: 375px;
|
||||
font-size: 16px;
|
||||
|
||||
.item-ope {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.dict-checkbox-group {
|
||||
padding: @pad-base;
|
||||
height: calc(100% - 44px - 2 * @pad-base - 54px);
|
||||
overflow: auto;
|
||||
|
||||
div + div {
|
||||
margin-top: @pad-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user