JDictSelectTag.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <template>
  2. <a-radio-group v-if="tagType=='radio'" @change="handleInput" :value="getValueSting" :disabled="disabled">
  3. <a-radio v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio>
  4. </a-radio-group>
  5. <a-radio-group v-else-if="tagType=='radioButton'" buttonStyle="solid" @change="handleInput" :value="getValueSting" :disabled="disabled">
  6. <a-radio-button v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio-button>
  7. </a-radio-group>
  8. <a-select v-else-if="tagType=='select'" :getPopupContainer = "(target) => target.parentNode" :placeholder="placeholder" :disabled="disabled" :value="getValueSting" @change="handleInput">
  9. <a-select-option :value="undefined">请选择</a-select-option>
  10. <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value">
  11. <span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
  12. {{ item.text || item.label }}
  13. </span>
  14. </a-select-option>
  15. </a-select>
  16. </template>
  17. <script>
  18. import {ajaxGetDictItems,getDictItemsFromCache} from '@/api/api'
  19. export default {
  20. name: "JDictSelectTag",
  21. props: {
  22. dictCode: String,
  23. placeholder: String,
  24. triggerChange: Boolean,
  25. disabled: Boolean,
  26. value: [String, Number],
  27. type: String
  28. },
  29. data() {
  30. return {
  31. dictOptions: [],
  32. tagType:""
  33. }
  34. },
  35. watch:{
  36. dictCode:{
  37. immediate:true,
  38. handler() {
  39. this.initDictData()
  40. },
  41. }
  42. },
  43. created() {
  44. // console.log(this.dictCode);
  45. if(!this.type || this.type==="list"){
  46. this.tagType = "select"
  47. }else{
  48. this.tagType = this.type
  49. }
  50. //获取字典数据
  51. // this.initDictData();
  52. },
  53. computed: {
  54. getValueSting(){
  55. return this.value != null ? this.value.toString() : null;
  56. },
  57. },
  58. methods: {
  59. initDictData() {
  60. //优先从缓存中读取字典配置
  61. if(getDictItemsFromCache(this.dictCode)){
  62. this.dictOptions = getDictItemsFromCache(this.dictCode);
  63. return
  64. }
  65. //根据字典Code, 初始化字典数组
  66. ajaxGetDictItems(this.dictCode, null).then((res) => {
  67. if (res.success) {
  68. // console.log(res.result);
  69. this.dictOptions = res.result;
  70. }
  71. })
  72. },
  73. handleInput(e) {
  74. let val;
  75. if(this.tagType=="radio"){
  76. val = e.target.value
  77. }else{
  78. val = e
  79. }
  80. console.log(val);
  81. if(this.triggerChange){
  82. this.$emit('change', val);
  83. }else{
  84. this.$emit('input', val);
  85. }
  86. },
  87. setCurrentDictOptions(dictOptions){
  88. this.dictOptions = dictOptions
  89. },
  90. getCurrentDictOptions(){
  91. return this.dictOptions
  92. }
  93. }
  94. }
  95. </script>
  96. <style scoped>
  97. </style>