140 lines
2.7 KiB
Vue
140 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<van-field
|
|
v-model="selectedDataNames"
|
|
:label="label"
|
|
:placeholder="$t('pleaseSelect') + (label ? label : '')"
|
|
readonly
|
|
:class="readonly ? 'field-readonly' : 'not-field-readonly'"
|
|
rows="1"
|
|
autosize
|
|
:required="rules ? rules[0].required : false"
|
|
:rules="rules"
|
|
type="textarea"
|
|
@click="handleSelect"
|
|
>
|
|
</van-field>
|
|
<select-user
|
|
ref="evaluatePersonSelectedList"
|
|
:selected-data="value"
|
|
:filter-data="filterData"
|
|
@selected-change="selectedChange"
|
|
@selected-change-name="selectedChangeName"
|
|
v-bind="$attrs"
|
|
:readonly="readonly"
|
|
></select-user>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SelectUser from './SelectUser'
|
|
export default {
|
|
name: 'SelectUserField',
|
|
components: { SelectUser },
|
|
props: {
|
|
// 选中的多个id 以逗号“,”拼接
|
|
value: {
|
|
type: String,
|
|
required: true,
|
|
default: () => {
|
|
return ''
|
|
}
|
|
},
|
|
// 一些其他的查询参数
|
|
filterData: {
|
|
type: Object,
|
|
required: false,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
checkedNames: {
|
|
type: String,
|
|
required: false,
|
|
default: () => {
|
|
return ''
|
|
}
|
|
},
|
|
label: {
|
|
type: [String, Boolean],
|
|
required: false,
|
|
default: '人员'
|
|
},
|
|
fieldName: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
},
|
|
// 校验信息
|
|
rules: {
|
|
type: [Array, null],
|
|
required: false,
|
|
default: null
|
|
}
|
|
},
|
|
watch: {
|
|
checkedNames: {
|
|
immediate: true,
|
|
// deep: true,
|
|
handler (val) {
|
|
this.selectedDataNames = val || ''
|
|
}
|
|
},
|
|
rules: {
|
|
immediate: true,
|
|
handler (val) {
|
|
console.log(val)
|
|
}
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
selectedDataNames: ''
|
|
}
|
|
},
|
|
methods: {
|
|
handleSelect () {
|
|
if (this.readonly) {
|
|
return
|
|
}
|
|
this.$nextTick(() => {
|
|
this.$refs.evaluatePersonSelectedList.open()
|
|
})
|
|
},
|
|
// 选择人员组件 选择后返回的方法
|
|
selectedChange (value) {
|
|
this.$emit('select', value)
|
|
},
|
|
selectedChangeName (value) {
|
|
this.selectedDataNames = value
|
|
this.$emit('selectNameChange', value, this.fieldName)
|
|
}
|
|
},
|
|
model: {
|
|
prop: 'value',
|
|
event: 'select'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import '~@assets/less/common.less';
|
|
|
|
.not-field-readonly {
|
|
/deep/ .van-field__control{
|
|
color: #1D2129 !important;
|
|
}
|
|
}
|
|
|
|
.field-readonly {
|
|
/deep/ .van-field__control{
|
|
color: #969799 !important;
|
|
}
|
|
}
|
|
</style>
|