dictionaryCascader.vue 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  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 :options='options' v-model='form.dict' :props='props' filterable @change="changeSelect" ref="dictCas">
  6. </el-cascader>
  7. <el-tooltip class="item" effect="dark" :content="`于${cacheTime}缓存,点击重新缓存`" placement="top">
  8. <el-button icon="el-icon-refresh" class="update-button" @click="getDictionary"></el-button>
  9. </el-tooltip>
  10. </el-form-item>
  11. </el-form>
  12. </div>
  13. </template>
  14. <script>
  15. import { mapGetters, mapMutations, mapActions } from "vuex";
  16. import tools from "@/utils/scan/tools";
  17. export default {
  18. data() {
  19. return {
  20. options: [],
  21. form: {
  22. dict: [],
  23. },
  24. props: {
  25. value: 'InfoPointCode',
  26. label: 'InfoPointName',
  27. children: 'Content'
  28. },
  29. rules: {
  30. dict: [{ required: true, message: '请选择对应数据字典', trigger: 'blur' }]
  31. },
  32. }
  33. },
  34. computed: {
  35. ...mapGetters("project", ["dictionary", "cacheTime"]),
  36. },
  37. created() {
  38. if (!this.dictionary.length) {
  39. this.getDictionary().then(res => {
  40. this.getDictSuc(res.Content)
  41. })
  42. } else {
  43. this.getDictSuc(this.dictionary);
  44. }
  45. },
  46. methods: {
  47. ...mapActions('project', ['getDictionary']),
  48. //获取物理世界所有设备类型
  49. getDictSuc(list) {
  50. this.options = list;
  51. this.changeSelect(this.form.dict);
  52. },
  53. changeSelect(val) {
  54. setTimeout(() => {
  55. if (this.$refs.dictCas.getCheckedNodes()[0]) {
  56. let labels = this.$refs.dictCas.getCheckedNodes()[0].pathLabels;
  57. let data = this.$refs.dictCas.getCheckedNodes()[0].data;
  58. this.$emit('change', { val: val, labels: labels, data: data })
  59. }
  60. }, 500)
  61. },
  62. //设置值
  63. setCascaderVal(value) {
  64. this.form.dict = tools.deepCopy(value)
  65. },
  66. //校验是否选择
  67. validate(cb) {
  68. this.$refs.form.validate(valid => {
  69. if (valid) {
  70. cb(true)
  71. } else {
  72. cb(false)
  73. }
  74. })
  75. },
  76. }
  77. }
  78. </script>
  79. <style lang="less" scoped>
  80. .cascader-container {
  81. margin-bottom: 0;
  82. /deep/ .el-cascader {
  83. width: 89%;
  84. display: block;
  85. float: left;
  86. .el-input .el-input__inner {
  87. border-radius: 4px 0 0 4px;
  88. vertical-align: bottom;
  89. }
  90. }
  91. .update-button {
  92. display: block;
  93. float: left;
  94. border-left: 0;
  95. border-radius: 0 4px 4px 0;
  96. }
  97. }
  98. </style>