123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- <template>
- <div class="components-input-demo-presuffix">
- <!---->
- <a-input @click="openModal" placeholder="请点击选择部门" v-model="departNames" readOnly :disabled="disabled">
- <a-icon slot="prefix" type="cluster" title="部门选择控件"/>
- <a-icon v-if="departIds" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
- </a-input>
- <j-select-depart-modal
- ref="innerDepartSelectModal"
- :modal-width="modalWidth"
- :multi="multi"
- :rootOpened="rootOpened"
- :depart-id="departIds"
- @ok="handleOK"
- @initComp="initComp"/>
- </div>
- </template>
- <script>
- import JSelectDepartModal from './modal/JSelectDepartModal'
- export default {
- name: 'JSelectDepart',
- components:{
- JSelectDepartModal
- },
- props:{
- modalWidth:{
- type:Number,
- default:500,
- required:false
- },
- multi:{
- type:Boolean,
- default:false,
- required:false
- },
- rootOpened:{
- type:Boolean,
- default:true,
- required:false
- },
- value:{
- type:String,
- required:false
- },
- disabled:{
- type: Boolean,
- required: false,
- default: false
- },
- // 自定义返回字段,默认返回 id
- customReturnField: {
- type: String,
- default: 'id'
- }
- },
- data(){
- return {
- visible:false,
- confirmLoading:false,
- departNames:"",
- departIds:''
- }
- },
- mounted(){
- this.departIds = this.value
- },
- watch:{
- value(val){
- if (this.customReturnField === 'id') {
- this.departIds = val
- }
- }
- },
- methods:{
- initComp(departNames){
- this.departNames = departNames
- },
- openModal(){
- this.$refs.innerDepartSelectModal.show()
- },
- handleOK(rows, idstr) {
- let value = ''
- if (!rows && rows.length <= 0) {
- this.departNames = ''
- this.departIds = ''
- } else {
- value = rows.map(row => row[this.customReturnField]).join(',')
- this.departNames = rows.map(row => row['departName']).join(',')
- this.departIds = idstr
- }
- this.$emit("change", value)
- },
- getDepartNames(){
- return this.departNames
- },
- handleEmpty(){
- this.handleOK('')
- }
- },
- model: {
- prop: 'value',
- event: 'change'
- }
- }
- </script>
- <style scoped>
- .components-input-demo-presuffix .anticon-close-circle {
- cursor: pointer;
- color: #ccc;
- transition: color 0.3s;
- font-size: 12px;
- }
- .components-input-demo-presuffix .anticon-close-circle:hover {
- color: #f5222d;
- }
- .components-input-demo-presuffix .anticon-close-circle:active {
- color: #666;
- }
- </style>
|