dictionaryCascader.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <template>
  2. <div>
  3. <el-form ref="form" :rules='rules' :model="form">
  4. <el-form-item prop="dict" class="cascader-container">
  5. <el-cascader-multi :data='options' v-model='form.dict' :value-key='props.value' :label-key='props.label' :children-key='props.children'
  6. filterable :popper-class="'select'" @change="changeSelect" ref="dictCas" :only-last="true" :no-data-text='"无数据"'>
  7. </el-cascader-multi>
  8. <el-tooltip class="item" effect="dark" :content="`于${cacheTime}缓存,点击重新缓存`" placement="top">
  9. <el-button icon="el-icon-refresh" class="update-button" @click="getDictionary"></el-button>
  10. </el-tooltip>
  11. </el-form-item>
  12. </el-form>
  13. </div>
  14. </template>
  15. <script>
  16. import { mapGetters, mapMutations, mapActions } from "vuex";
  17. import tools from "@/utils/scan/tools";
  18. export default {
  19. data() {
  20. return {
  21. options: [],
  22. form: {
  23. dict: [],
  24. },
  25. props: {
  26. value: 'code',
  27. label: 'name',
  28. children: 'content'
  29. },
  30. rules: {
  31. dict: [{ required: true, message: '请选择对应数据字典', trigger: 'blur' }]
  32. },
  33. }
  34. },
  35. computed: {
  36. ...mapGetters("project", ["dictionary", "cacheTime"]),
  37. },
  38. created() {
  39. if (!this.dictionary.length) {
  40. this.getDictionary().then(res => {
  41. this.getDictSuc(res.content)
  42. })
  43. } else {
  44. this.getDictSuc(this.dictionary);
  45. }
  46. },
  47. methods: {
  48. ...mapActions('project', ['getDictionary']),
  49. //获取物理世界所有设备类型
  50. getDictSuc(list) {
  51. this.options = this.transformList(list);
  52. this.changeSelect(this.form.dict);
  53. },
  54. changeSelect(val) {
  55. setTimeout(() => {
  56. if (this.$refs.dictCas) {
  57. let labels = this.$refs.dictCas.selectedLabels;
  58. let data = {};
  59. this.$refs.dictCas.selectedNodes.forEach(t => {
  60. let key = t.code;
  61. data[key] = t;
  62. });
  63. this.$emit('change', { val: val, labels: labels, data: data })
  64. }
  65. }, 500)
  66. },
  67. //设置值
  68. setCascaderVal(value) {
  69. this.form.dict = tools.deepCopy(value)
  70. },
  71. //校验是否选择
  72. validate(cb) {
  73. this.$refs.form.validate(valid => {
  74. if (valid) {
  75. cb(true)
  76. } else {
  77. cb(false)
  78. }
  79. })
  80. },
  81. transformList(list) {
  82. let arr = [];
  83. arr = list.map(t => {
  84. if (t.content) {
  85. if (!t.content.length) {
  86. t.content = [{ name: '暂无可对应信息点', disabled: true }]
  87. } else {
  88. t.content = this.transformList(t.content);
  89. }
  90. }
  91. return t;
  92. })
  93. return arr;
  94. }
  95. }
  96. }
  97. </script>
  98. <style lang="less" scoped>
  99. .cascader-container.el-form-item--small.el-form-item {
  100. margin-bottom: 0;
  101. .el-form-item__content div:nth-child(1) {
  102. width: 89% !important;
  103. display: block;
  104. float: left;
  105. /deep/ .el-input .el-input__inner {
  106. border-radius: 4px 0 0 4px;
  107. vertical-align: bottom;
  108. }
  109. }
  110. .update-button {
  111. display: block;
  112. height: 32px;
  113. float: left;
  114. border-left: 0;
  115. border-radius: 0 4px 4px 0;
  116. }
  117. }
  118. </style>