简柏林 / thingskit-front · Commits

Commit fd2c5c0a2e49ff9c819cc2b32a867ea854d6cf74

Authored by fengtao
1 parent 63ca3999

feat：新增选择范围验证

Inline Side-by-side
Showing 1 changed file with 97 additions and 109 deletions
@@ -9,32 +9,17 @@ @@ -9,32 +9,17 @@
9 </div> 9 </div>
10 <div class="form-item2" :style="{ height: dynamicHeight + 'vh' }"> 10 <div class="form-item2" :style="{ height: dynamicHeight + 'vh' }">
11 <div style="margin-left: 1vw"> 11 <div style="margin-left: 1vw">
12 - <h3  
13 - v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'"  
14 - style="color: gray"  
15 - >查询频率（毫秒*）</h3  
16 - >  
17 - <InputNumber  
18 - v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'"  
19 - v-model:value="queryingFrequencyMs"  
20 - :min="0"  
21 - :max="99999999999999999999"  
22 - style="margin-top: 0.25vh"  
23 - /> 12 + <h3 v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'" style="color: gray">
  13 + 查询频率（毫秒*）</h3>
  14 + <InputNumber v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'"
  15 + v-model:value="queryingFrequencyMs" :min="0" :max="99999999999999999999" style="margin-top: 0.25vh" />
24 <div style="margin-top: 0.65vh"></div> 16 <div style="margin-top: 0.65vh"></div>
25 - <MappingsForm  
26 - :value="item.mappings"  
27 - @change="handleMappingsChange"  
28 - @dynamicAddHeight="dynamicHeight += 4"  
29 - @dynamicReduceHeight="dynamicHeight -= 4"  
30 - /> 17 + <MappingsForm :value="item.mappings" @change="handleMappingsChange" @dynamicAddHeight="dynamicHeight += 4"
  18 + @dynamicReduceHeight="dynamicHeight -= 4" />
31 </div> 19 </div>
32 </div> 20 </div>
33 <div class="form-item3" :style="{ height: dynamicHeight + 'vh' }"> 21 <div class="form-item3" :style="{ height: dynamicHeight + 'vh' }">
34 - <div  
35 - style="text-align: center; line-height: 20vh"  
36 - :style="{ lineHeight: dynamicHeight + 'vh' }"  
37 - > 22 + <div style="text-align: center; line-height: 20vh" :style="{ lineHeight: dynamicHeight + 'vh' }">
38 <Button size="small" type="default" @click="handleRemove(item, index)"> 23 <Button size="small" type="default" @click="handleRemove(item, index)">
39 <template #icon> 24 <template #icon>
40 <MinusCircleOutlined /> 25 <MinusCircleOutlined />
@@ -45,102 +30,105 @@ @@ -45,102 +30,105 @@
45 </div> 30 </div>
46 </template> 31 </template>
47 <script setup lang="ts"> 32 <script setup lang="ts">
48 - import { ref } from 'vue';  
49 - import { Button, InputNumber } from 'ant-design-vue';  
50 - import { MinusCircleOutlined } from '@ant-design/icons-vue';  
51 - import MappingsForm from './MappingsForm.vue';  
52 - import { useMessage } from '/@/hooks/web/useMessage'; 33 +import { ref } from 'vue';
  34 +import { Button, InputNumber } from 'ant-design-vue';
  35 +import { MinusCircleOutlined } from '@ant-design/icons-vue';
  36 +import MappingsForm from './MappingsForm.vue';
  37 +import { useMessage } from '/@/hooks/web/useMessage';
53 38
54 - const props = defineProps({  
55 - item: {  
56 - type: Object,  
57 - default: () => {},  
58 - },  
59 - index: {  
60 - type: Number,  
61 - },  
62 - });  
63 - const emit = defineEmits(['removeItem']);  
64 - const dynamicHeight = ref(25);  
65 - const queryingFrequencyMs = ref(5000);  
66 - const { createMessage } = useMessage();  
67 - const handleMappingsChange = (e) => {  
68 - // eslint-disable-next-line vue/no-mutating-props  
69 - props.item.mappings = e;  
70 - };  
71 - const handleRemove = (item, index) => {  
72 - emit('removeItem', item, index);  
73 - };  
74 - //设置回显的高度  
75 - const setFieldsValueFunc = () => {  
76 - dynamicHeight.value = props.item.mappings.length * 3 + props.item.mappings.length + 15;  
77 - queryingFrequencyMs.value = props.item.queryingFrequencyMs;  
78 - };  
79 - //获取表单的值  
80 - const getSnmpFormFunc = () => {  
81 - if (  
82 - props.item.spec == 'TELEMETRY_QUERYING' ||  
83 - props.item.spec == 'CLIENT_ATTRIBUTES_QUERYING'  
84 - ) {  
85 - if (queryingFrequencyMs.value == null) {  
86 - return createMessage.error('请填写查询频率');  
87 - } 39 +const props = defineProps({
  40 + item: {
  41 + type: Object,
  42 + default: () => { },
  43 + },
  44 + index: {
  45 + type: Number,
  46 + },
  47 +});
  48 +const emit = defineEmits(['removeItem']);
  49 +const dynamicHeight = ref(25);
  50 +const queryingFrequencyMs = ref(5000);
  51 +const { createMessage } = useMessage();
  52 +const handleMappingsChange = (e) => {
  53 + // eslint-disable-next-line vue/no-mutating-props
  54 + props.item.mappings = e;
  55 +};
  56 +const handleRemove = (item, index) => {
  57 + emit('removeItem', item, index);
  58 +};
  59 +//设置回显的高度
  60 +const setFieldsValueFunc = () => {
  61 + dynamicHeight.value = props.item.mappings.length * 3 + props.item.mappings.length + 15;
  62 + queryingFrequencyMs.value = props.item.queryingFrequencyMs;
  63 +};
  64 +//获取表单的值
  65 +const getSnmpFormFunc = () => {
  66 + if (!props.item.spec || props.item.spec == '' || props.item.spec == undefined) {
  67 + return createMessage.error('请选择范围');
  68 + }
  69 + if (
  70 + props.item.spec == 'TELEMETRY_QUERYING' ||
  71 + props.item.spec == 'CLIENT_ATTRIBUTES_QUERYING'
  72 + ) {
  73 + if (queryingFrequencyMs.value == null) {
  74 + return createMessage.error('请填写查询频率');
88 } 75 }
89 - let obj: any = {};  
90 - obj = {  
91 - ...{ spec: props.item.spec },  
92 - ...{ mappings: props.item.mappings },  
93 - ...{  
94 - queryingFrequencyMs:  
95 - props.item.spec == 'TELEMETRY_QUERYING' || props.item.spec == 'CLIENT_ATTRIBUTES_QUERYING'  
96 - ? queryingFrequencyMs.value  
97 - : null,  
98 - },  
99 - };  
100 - return obj; 76 + }
  77 + let obj: any = {};
  78 + obj = {
  79 + ...{ spec: props.item.spec },
  80 + ...{ mappings: props.item.mappings },
  81 + ...{
  82 + queryingFrequencyMs:
  83 + props.item.spec == 'TELEMETRY_QUERYING' || props.item.spec == 'CLIENT_ATTRIBUTES_QUERYING'
  84 + ? queryingFrequencyMs.value
  85 + : null,
  86 + },
101 }; 87 };
102 - defineExpose({  
103 - getSnmpFormFunc,  
104 - setFieldsValueFunc,  
105 - handleMappingsChange,  
106 - }); 88 + return obj;
  89 +};
  90 +defineExpose({
  91 + getSnmpFormFunc,
  92 + setFieldsValueFunc,
  93 + handleMappingsChange,
  94 +});
107 </script> 95 </script>
108 <style lang="less" scoped> 96 <style lang="less" scoped>
109 - ::-webkit-scrollbar {  
110 - display: none;  
111 - width: 0 !important;  
112 - height: 0 !important;  
113 - -webkit-appearance: none;  
114 - background: transparent;  
115 - } 97 +::-webkit-scrollbar {
  98 + display: none;
  99 + width: 0 !important;
  100 + height: 0 !important;
  101 + -webkit-appearance: none;
  102 + background: transparent;
  103 +}
  104 +
  105 +.snmp-form {
  106 + display: flex;
  107 + align-items: center;
  108 + justify-content: space-between;
  109 + width: 40vw;
  110 + height: 20vh;
  111 + border: 0.1px solid #bfbfbf;
  112 + margin-top: 2vh;
116 113
117 - .snmp-form {  
118 - display: flex;  
119 - align-items: center;  
120 - justify-content: space-between;  
121 - width: 40vw; 114 + .form-item1 {
  115 + width: 9vw;
122 height: 20vh; 116 height: 20vh;
123 border: 0.1px solid #bfbfbf; 117 border: 0.1px solid #bfbfbf;
124 - margin-top: 2vh;  
125 -  
126 - .form-item1 {  
127 - width: 9vw;  
128 - height: 20vh;  
129 - border: 0.1px solid #bfbfbf;  
130 - } 118 + }
131 119
132 - .form-item2 {  
133 - width: 28vw;  
134 - height: 20vh;  
135 - border: 0.1px solid #bfbfbf;  
136 - overflow: hidden;  
137 - overflow-y: scroll;  
138 - } 120 + .form-item2 {
  121 + width: 28vw;
  122 + height: 20vh;
  123 + border: 0.1px solid #bfbfbf;
  124 + overflow: hidden;
  125 + overflow-y: scroll;
  126 + }
139 127
140 - .form-item3 {  
141 - width: 2vw;  
142 - height: 20vh;  
143 - border: 0.1px solid #bfbfbf;  
144 - } 128 + .form-item3 {
  129 + width: 2vw;
  130 + height: 20vh;
  131 + border: 0.1px solid #bfbfbf;
145 } 132 }
  133 +}
146 </style> 134 </style>