Files
laws-sinotruk-mobile/src/components/SelectUserByWorkGroupField.vue
T

126 lines
2.4 KiB
Vue

<template>
<div>
<van-field
v-model="selectedDataNames"
:label="label"
:placeholder="$t('pleaseSelect') + label"
readonly
rows="1"
autosize
:rules="rules"
type="textarea"
@click="handleSelect"
>
</van-field>
<select-user-by-work-group
ref="evaluatePersonSelectedList"
:selected-data="value"
:filter-data="filterData"
@selected-change="selectedChange"
@selected-change-name="selectedChangeName"
v-bind="$attrs"
:readonly="readonly"
></select-user-by-work-group>
</div>
</template>
<script>
import SelectUserByWorkGroup from '@/components/SelectUserByWorkGroup'
export default {
name: 'SelectUserByWorkGroupField',
components: { SelectUserByWorkGroup },
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,
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>
</style>