index.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. <template>
  2. <a-row class="j-select-biz-component-box" type="flex" :gutter="8">
  3. <a-col class="left" :class="{'full': !buttons}">
  4. <slot name="left">
  5. <a-select
  6. mode="multiple"
  7. :placeholder="placeholder"
  8. v-model="selectValue"
  9. :options="selectOptions"
  10. allowClear
  11. :disabled="disabled"
  12. :open="selectOpen"
  13. style="width: 100%;"
  14. @dropdownVisibleChange="handleDropdownVisibleChange"
  15. @click.native="visible=(buttons?visible:true)"
  16. />
  17. </slot>
  18. </a-col>
  19. <a-col v-if="buttons" class="right">
  20. <a-button type="primary" icon="search" :disabled="disabled" @click="visible=true">{{selectButtonText}}</a-button>
  21. </a-col>
  22. <j-select-biz-component-modal
  23. v-model="selectValue"
  24. :visible.sync="visible"
  25. v-bind="modalProps"
  26. @options="handleOptions"
  27. />
  28. </a-row>
  29. </template>
  30. <script>
  31. import JSelectBizComponentModal from './JSelectBizComponentModal'
  32. export default {
  33. name: 'JSelectBizComponent',
  34. components: { JSelectBizComponentModal },
  35. props: {
  36. value: {
  37. type: String,
  38. default: ''
  39. },
  40. /** 是否返回 id,默认 false,返回 code */
  41. returnId: {
  42. type: Boolean,
  43. default: false
  44. },
  45. placeholder: {
  46. type: String,
  47. default: '请选择'
  48. },
  49. disabled: {
  50. type: Boolean,
  51. default: false
  52. },
  53. // 是否支持多选,默认 true
  54. multiple: {
  55. type: Boolean,
  56. default: true
  57. },
  58. // 是否显示按钮,默认 true
  59. buttons: {
  60. type: Boolean,
  61. default: true
  62. },
  63. // 显示的 Key
  64. displayKey: {
  65. type: String,
  66. default: null
  67. },
  68. // 返回的 key
  69. returnKeys: {
  70. type: Array,
  71. default: () => ['id', 'id']
  72. },
  73. // 选择按钮文字
  74. selectButtonText: {
  75. type: String,
  76. default: '选择'
  77. },
  78. },
  79. data() {
  80. return {
  81. selectValue: [],
  82. selectOptions: [],
  83. dataSourceMap: {},
  84. visible: false,
  85. selectOpen: false,
  86. }
  87. },
  88. computed: {
  89. valueKey() {
  90. return this.returnId ? this.returnKeys[0] : this.returnKeys[1]
  91. },
  92. modalProps() {
  93. return Object.assign({
  94. valueKey: this.valueKey,
  95. multiple: this.multiple,
  96. returnKeys: this.returnKeys,
  97. displayKey: this.displayKey || this.valueKey
  98. }, this.$attrs)
  99. },
  100. },
  101. watch: {
  102. value: {
  103. immediate: true,
  104. handler(val) {
  105. if (val) {
  106. this.selectValue = val.split(',')
  107. } else {
  108. this.selectValue = []
  109. }
  110. }
  111. },
  112. selectValue: {
  113. deep: true,
  114. handler(val) {
  115. let rows = val.map(key => this.dataSourceMap[key])
  116. this.$emit('select', rows)
  117. let data = val.join(',')
  118. this.$emit('input', data)
  119. this.$emit('change', data)
  120. }
  121. }
  122. },
  123. methods: {
  124. handleOptions(options, dataSourceMap) {
  125. this.selectOptions = options
  126. this.dataSourceMap = dataSourceMap
  127. },
  128. handleDropdownVisibleChange() {
  129. // 解决antdv自己的bug —— open 设置为 false 了,点击后还是添加了 open 样式,导致点击事件失效
  130. this.selectOpen = true
  131. this.$nextTick(() => {
  132. this.selectOpen = false
  133. })
  134. },
  135. }
  136. }
  137. </script>
  138. <style lang="less" scoped>
  139. .j-select-biz-component-box {
  140. @width: 82px;
  141. .left {
  142. width: calc(100% - @width - 8px);
  143. }
  144. .right {
  145. width: @width;
  146. }
  147. .full {
  148. width: 100%;
  149. }
  150. ::v-deep .ant-select-search__field {
  151. display: none !important;
  152. }
  153. }
  154. </style>