JMultiSelectTag.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <template>
  2. <a-checkbox-group v-if="tagType=='checkbox'" @change="onChange" :value="arrayValue" :disabled="disabled">
  3. <a-checkbox v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text || item.label }}</a-checkbox>
  4. </a-checkbox-group>
  5. <a-select
  6. v-else-if="tagType=='select'"
  7. :value="arrayValue"
  8. @change="onChange"
  9. :disabled="disabled"
  10. mode="multiple"
  11. :placeholder="placeholder"
  12. :getPopupContainer="(node) => node.parentNode"
  13. allowClear>
  14. <a-select-option
  15. v-for="(item,index) in dictOptions"
  16. :key="index"
  17. :value="item.value">
  18. <span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
  19. {{ item.text || item.label }}
  20. </span>
  21. </a-select-option>
  22. </a-select>
  23. </template>
  24. <script>
  25. import {ajaxGetDictItems,getDictItemsFromCache} from '@/api/api'
  26. export default {
  27. name: 'JMultiSelectTag',
  28. props: {
  29. dictCode: String,
  30. placeholder: String,
  31. disabled: Boolean,
  32. value: String,
  33. type: String,
  34. options:Array
  35. },
  36. data() {
  37. return {
  38. dictOptions: [],
  39. tagType:"",
  40. arrayValue:!this.value?[]:this.value.split(",")
  41. }
  42. },
  43. created() {
  44. if(!this.type || this.type==="list_multi"){
  45. this.tagType = "select"
  46. }else{
  47. this.tagType = this.type
  48. }
  49. //获取字典数据
  50. //this.initDictData();
  51. },
  52. watch:{
  53. options: function(val){
  54. this.setCurrentDictOptions(val);
  55. },
  56. dictCode:{
  57. immediate:true,
  58. handler() {
  59. this.initDictData()
  60. },
  61. },
  62. value (val) {
  63. if(!val){
  64. this.arrayValue = []
  65. }else{
  66. this.arrayValue = this.value.split(",")
  67. }
  68. }
  69. },
  70. methods: {
  71. initDictData() {
  72. if(this.options && this.options.length>0){
  73. this.dictOptions = [...this.options]
  74. }else{
  75. //优先从缓存中读取字典配置
  76. if(getDictItemsFromCache(this.dictCode)){
  77. this.dictOptions = getDictItemsFromCache(this.dictCode);
  78. return
  79. }
  80. //根据字典Code, 初始化字典数组
  81. ajaxGetDictItems(this.dictCode, null).then((res) => {
  82. if (res.success) {
  83. this.dictOptions = res.result;
  84. }
  85. })
  86. }
  87. },
  88. onChange (selectedValue) {
  89. this.$emit('change', selectedValue.join(","));
  90. },
  91. setCurrentDictOptions(dictOptions){
  92. this.dictOptions = dictOptions
  93. },
  94. getCurrentDictOptions(){
  95. return this.dictOptions
  96. }
  97. },
  98. model: {
  99. prop: 'value',
  100. event: 'change'
  101. }
  102. }
  103. </script>