95 lines
2.2 KiB
Vue
95 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<view v-if="!$props.readonly">
|
||
|
|
<click-input :value="valueUp" index="name" @click="showOrgPicker" :disabled="$props.readonly"
|
||
|
|
:placeholder="$props.formProps.placeholder || '请选择人员'" pre-icon="personadd">
|
||
|
|
<view style="flex: 1; display: flex; align-items: center;" v-for="user in valueUp || []" :key="user.id">
|
||
|
|
<Avatar :name="user.name" :src="getRes(user.avatar)" :size="25" :showName="false" />
|
||
|
|
<text style="margin-left: 10rpx;">{{user.name}}</text>
|
||
|
|
</view>
|
||
|
|
</click-input>
|
||
|
|
<org-picker ref="orgPicker" :position="position" :multiple="$props.formProps.multiple" type="user"
|
||
|
|
:selected="valueUp" @ok="selectOk"></org-picker>
|
||
|
|
</view>
|
||
|
|
<view v-else>
|
||
|
|
<view style="flex: 1; display: flex; align-items: center;" v-for="user in valueUp || []" :key="user.id">
|
||
|
|
<Avatar :name="user.name" :src="getRes(user.avatar)" :size="25" :showName="false" />
|
||
|
|
<text style="margin-left: 10rpx;">{{user.name}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import OrgPicker from './OrgPicker.vue'
|
||
|
|
import Avatar from './Avatar.vue'
|
||
|
|
import ClickInput from './ClickInput.vue'
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
formProps: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {
|
||
|
|
return {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
modelValue: Array,
|
||
|
|
readonly: Boolean,
|
||
|
|
position: {
|
||
|
|
type: String,
|
||
|
|
default: 'right'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
ClickInput,Avatar,OrgPicker
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
valueUp: [],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
_value: {
|
||
|
|
get() {
|
||
|
|
this.valueUp = this.$props.modelValue
|
||
|
|
return this.$props.modelValue
|
||
|
|
},
|
||
|
|
set(val) {
|
||
|
|
console.log("ryuan", val);
|
||
|
|
this.$emit('update:modelValue', val)
|
||
|
|
this.valueUp = val;
|
||
|
|
// return val;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//获取文件访问路径
|
||
|
|
getRes() {
|
||
|
|
return (url) => {
|
||
|
|
if (url) {
|
||
|
|
const reg = /^(http:|https:).*/gi
|
||
|
|
return reg.test(url) ? url : this.url_config + 'image/' + url
|
||
|
|
} else {
|
||
|
|
return url
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
showOrgPicker() {
|
||
|
|
if (!this.$props.readonly) {
|
||
|
|
this.$refs.orgPicker.show()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
selectOk(val) {
|
||
|
|
this._value = val;
|
||
|
|
// this.$props.modelValue = val;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
</style>
|