JSelectDepart.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <template>
  2. <div class="components-input-demo-presuffix">
  3. <!---->
  4. <a-input @click="openModal" placeholder="请点击选择部门" v-model="departNames" readOnly :disabled="disabled">
  5. <a-icon slot="prefix" type="cluster" title="部门选择控件"/>
  6. <a-icon v-if="departIds" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
  7. </a-input>
  8. <j-select-depart-modal
  9. ref="innerDepartSelectModal"
  10. :modal-width="modalWidth"
  11. :multi="multi"
  12. :rootOpened="rootOpened"
  13. :depart-id="departIds"
  14. @ok="handleOK"
  15. @initComp="initComp"/>
  16. </div>
  17. </template>
  18. <script>
  19. import JSelectDepartModal from './modal/JSelectDepartModal'
  20. export default {
  21. name: 'JSelectDepart',
  22. components:{
  23. JSelectDepartModal
  24. },
  25. props:{
  26. modalWidth:{
  27. type:Number,
  28. default:500,
  29. required:false
  30. },
  31. multi:{
  32. type:Boolean,
  33. default:false,
  34. required:false
  35. },
  36. rootOpened:{
  37. type:Boolean,
  38. default:true,
  39. required:false
  40. },
  41. value:{
  42. type:String,
  43. required:false
  44. },
  45. disabled:{
  46. type: Boolean,
  47. required: false,
  48. default: false
  49. },
  50. // 自定义返回字段,默认返回 id
  51. customReturnField: {
  52. type: String,
  53. default: 'id'
  54. }
  55. },
  56. data(){
  57. return {
  58. visible:false,
  59. confirmLoading:false,
  60. departNames:"",
  61. departIds:''
  62. }
  63. },
  64. mounted(){
  65. this.departIds = this.value
  66. },
  67. watch:{
  68. value(val){
  69. if (this.customReturnField === 'id') {
  70. this.departIds = val
  71. }
  72. }
  73. },
  74. methods:{
  75. initComp(departNames){
  76. this.departNames = departNames
  77. },
  78. openModal(){
  79. this.$refs.innerDepartSelectModal.show()
  80. },
  81. handleOK(rows, idstr) {
  82. let value = ''
  83. if (!rows && rows.length <= 0) {
  84. this.departNames = ''
  85. this.departIds = ''
  86. } else {
  87. value = rows.map(row => row[this.customReturnField]).join(',')
  88. this.departNames = rows.map(row => row['departName']).join(',')
  89. this.departIds = idstr
  90. }
  91. this.$emit("change", value)
  92. },
  93. getDepartNames(){
  94. return this.departNames
  95. },
  96. handleEmpty(){
  97. this.handleOK('')
  98. }
  99. },
  100. model: {
  101. prop: 'value',
  102. event: 'change'
  103. }
  104. }
  105. </script>
  106. <style scoped>
  107. .components-input-demo-presuffix .anticon-close-circle {
  108. cursor: pointer;
  109. color: #ccc;
  110. transition: color 0.3s;
  111. font-size: 12px;
  112. }
  113. .components-input-demo-presuffix .anticon-close-circle:hover {
  114. color: #f5222d;
  115. }
  116. .components-input-demo-presuffix .anticon-close-circle:active {
  117. color: #666;
  118. }
  119. </style>