111 lines
2.2 KiB
Vue
111 lines
2.2 KiB
Vue
<template>
|
|
<div class="components-input-demo-presuffix">
|
|
<a-input @click="openModal" :placeholder="$t('pleaseSelect')" v-model="nameStr" :title="nameStr" readOnly>
|
|
<a-icon v-if="nameStr" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
|
|
</a-input>
|
|
|
|
<tree-data-select-modal
|
|
ref="selectModal"
|
|
:checkable="checkable"
|
|
:value="value"
|
|
:dict-id="dictId"
|
|
v-bind="$attrs"
|
|
:options-href="optionsHref"
|
|
@change="handleChange"
|
|
@nameChange="nameChange"
|
|
@listChange="listChange"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TreeDataSelectModal from './TreeDataSelectModal'
|
|
import { underLinetoHump } from '@/components/_util/StringUtil'
|
|
|
|
export default {
|
|
name: 'TreeDataSelection',
|
|
components: { TreeDataSelectModal },
|
|
props: {
|
|
checkable: { // 是否多选
|
|
type: Boolean,
|
|
required: false,
|
|
default: true
|
|
},
|
|
value: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
// 获取数据的接口
|
|
optionsHref: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
},
|
|
// 名称字符串
|
|
nameStr: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
},
|
|
fieldName: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
},
|
|
dictId: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
}
|
|
},
|
|
watch: {
|
|
nameStr: {
|
|
immediate: true,
|
|
handler (val) {
|
|
console.log('----------nameStr', val)
|
|
}
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
visible: false,
|
|
confirmLoading: false
|
|
}
|
|
},
|
|
methods: {
|
|
openModal () {
|
|
this.$refs.selectModal.show()
|
|
},
|
|
handleChange (value) {
|
|
this.$emit('change', value, this.fieldName)
|
|
},
|
|
nameChange (value) {
|
|
this.$emit('nameChange', value, this.fieldName)
|
|
},
|
|
listChange (value) {
|
|
this.$emit('listChange', value, this.fieldName)
|
|
},
|
|
handleEmpty () {
|
|
if (this.disabled) {
|
|
return
|
|
}
|
|
this.handleChange('')
|
|
this.nameChange('')
|
|
this.listChange([])
|
|
}
|
|
},
|
|
model: {
|
|
prop: 'value',
|
|
event: 'change'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|