简柏林 / 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 9 </div>
10 10 <div class="form-item2" :style="{ height: dynamicHeight + 'vh' }">
11 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 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 19 </div>
32 20 </div>
33 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 23 <Button size="small" type="default" @click="handleRemove(item, index)">
39 24 <template #icon>
40 25 <MinusCircleOutlined />
... ... @@ -45,102 +30,105 @@
45 30 </div>
46 31 </template>
47 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 95 </script>
108 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 116 height: 20vh;
123 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 134 </style>
... ...