|
- <template>
- <!-- #ifdef MP-DINGTALK -->
- <l-label :arrow="!readonly" :required="required" :title="title">
- <text @click="click">{{ display || displayPlaceholder }}</text>
- </l-label>
- <!-- #endif -->
-
- <!-- #ifndef MP-DINGTALK -->
- <l-label @click="click" :arrow="!readonly" :required="required" :title="title">
- <!-- {{ display || displayPlaceholder }} -->
- <view style="white-space: normal;min-height: 54px;display: flex;align-items: center;justify-content: right;">
- <view style="line-height: 24px;">
- {{ display || displayPlaceholder }}
- </view>
- </view>
- </l-label>
- <!-- #endif -->
- </template>
-
- <script>
- export default {
- name: 'l-organize-picker',
-
- props: {
- value: { default: '' },
- type: {},
- title: {},
- required: {},
- placeholder: {},
- readonly: {},
- rootId: {},
- rootType: {},
- multiple: {}
- },
-
- methods: {
- click() {
- if (this.readonly) {
- return
- }
-
- this.ONCE('select-organize', data => {
- this.$emit('input', data.id||data.map(t=>t.id).toString())
- this.$emit('change', data.id||data.map(t=>t.id).toString())
- })
-
- const rootType = this.rootType || { user: 'department', department: 'company', company: 'company' }[this.type]
- const rootId = this.rootId
-
- let url_ = this.multiple?"select-organize-multiple":"select-organize"
- this.SET_PARAM(this.value)
- const url = rootId
- ? `/pages/common/${url_}?type=${this.type}&rootId=${rootId}&rootType=${rootType}`
- : `/pages/common/${url_}?type=${this.type}`
-
- this.NAV_TO(url)
- }
- },
-
- computed: {
- display() {
- if (!this.value) {
- return this.placeholder
- }
-
- const list = this.GET_GLOBAL(this.type)
- let values = this.value instanceof Array?this.value:this.value.split(",")
- if(values.length>1){
- const orgItems = values.map(t=>list[t]?list[t].name:'').toString()
- return orgItems
- }
-
- const orgItem = list[this.value]
-
- return orgItem ? orgItem.name : this.placeholder
- },
-
- displayPlaceholder() {
- if (this.readonly) {
- return ''
- }
-
- if (this.placeholder) {
- return this.placeholder
- }
-
- return this.title ? `请选择${this.title}` : '请选择…'
- }
- }
- }
- </script>
|