简柏林 / thingskit-front · Commits

Commit be9da75c946f9e39b2e247c9acb3f5e897796072

Authored by xp.Huang
2 parents 7830ece3 0ad56cf6

Merge branch 'feat-model-of-matter-send-comomand' into 'main_dev' 

fix: 同步规则链转换脚本和TCP转换脚本查询字段

See merge request yunteng/thingskit-front!607
Inline Side-by-side
Showing 4 changed files with 306 additions and 282 deletions
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 import { getScriptManageMeList } from '/@/api/scriptmanage/scriptManager'; 6 import { getScriptManageMeList } from '/@/api/scriptmanage/scriptManager';
7 import { Description, useDescription } from '/@/components/Description'; 7 import { Description, useDescription } from '/@/components/Description';
8 import { useModal } from '/@/components/Modal'; 8 import { useModal } from '/@/components/Modal';
9 - import CoverScriptModal from '/@/views/scriptmanage/converscript/ConverScriptModal.vue'; 9 + import CoverScriptModal from '/@/views/rule/script/TcpConversionScript/ConverScriptModal.vue';
10 import { SelectTypes } from 'ant-design-vue/es/select'; 10 import { SelectTypes } from 'ant-design-vue/es/select';
11 11
12 const props = defineProps<{ 12 const props = defineProps<{
1 -<template>  
2 - <div>  
3 - <a-form  
4 - ref="formRef"  
5 - :model="scriptForm"  
6 - name="basic"  
7 - :label-col="{ span: 4 }"  
8 - :wrapper-col="{ span: 16 }"  
9 - style="margin-left: 2.4rem"  
10 - autocomplete="off"  
11 - >  
12 - <a-form-item  
13 - v-if="deviceTypeStr !== 'SENSOR'"  
14 - label="鉴权脚本"  
15 - name="'params'"  
16 - :rules="[{ required: true, message: '请选择鉴权脚本' }]"  
17 - >  
18 - <div style="display: flex; align-items: center">  
19 - <div>  
20 - <Select  
21 - @change="handleAuthChange"  
22 - placeholder="请选择"  
23 - v-model:value="scriptForm.authScriptId"  
24 - style="width: 305px"  
25 - show-search  
26 - :options="selectAuthOptions"  
27 - :filter-option="handleAuthSearch"  
28 - allowClear  
29 - />  
30 - </div>  
31 - <div>  
32 - <span  
33 - @click="handleCreateOrEditAuth('add')"  
34 - class="ml-2"  
35 - style="color: #409eff; cursor: pointer"  
36 - size="small"  
37 - >新建转换脚本</span  
38 - >  
39 - </div>  
40 - </div>  
41 - <a-button @click="handleCreateOrEditAuth('test')" class="mt-4" type="primary"  
42 - >测试脚本</a-button  
43 - >  
44 - </a-form-item>  
45 - <a-form-item  
46 - label="上行脚本"  
47 - name="'params'"  
48 - :rules="[{ required: true, message: '请选择上行脚本' }]"  
49 - >  
50 - <div style="display: flex; align-items: center">  
51 - <div>  
52 - <Select  
53 - @change="handleUpChange"  
54 - placeholder="请选择"  
55 - v-model:value="scriptForm.upScriptId"  
56 - style="width: 305px"  
57 - show-search  
58 - :options="selectUpOptions"  
59 - :filter-option="handleSearch"  
60 - allowClear  
61 - />  
62 - </div>  
63 - <div>  
64 - <span  
65 - @click="handleCreateOrEdit('add')"  
66 - class="ml-2"  
67 - style="color: #409eff; cursor: pointer"  
68 - size="small"  
69 - >新建转换脚本</span  
70 - >  
71 - </div>  
72 - </div>  
73 - <a-button @click="handleCreateOrEdit('test')" class="mt-4" type="primary"  
74 - >测试脚本</a-button  
75 - >  
76 - </a-form-item>  
77 - </a-form>  
78 - <ConverScriptModal @register="registerModal" @success="handleSuccess" />  
79 - <ConverScriptModal @register="registerAuthModal" @success="handleAuthSuccess" />  
80 - </div>  
81 -</template>  
82 -<script lang="ts" setup name="index">  
83 - import { ref, Ref, onMounted, reactive } from 'vue';  
84 - import { SelectTypes } from 'ant-design-vue/es/select';  
85 - import { Select } from 'ant-design-vue';  
86 - import { useModal } from '/@/components/Modal';  
87 - import { getScriptManageMeList } from '/@/api/scriptmanage/scriptManager';  
88 - import ConverScriptModal from '/@/views/scriptmanage/converscript/ConverScriptModal.vue';  
89 - import { useMessage } from '/@/hooks/web/useMessage';  
90 -  
91 - const props = defineProps({  
92 - deviceTypeStr: { type: String, default: '' },  
93 - });  
94 -  
95 - const scriptForm = reactive({  
96 - authScriptId: '',  
97 - upScriptId: '',  
98 - });  
99 - const selectUpOptions: Ref<SelectTypes['options']> = ref([]);  
100 -  
101 - const selectAuthOptions: Ref<SelectTypes['options']> = ref([]);  
102 -  
103 - const { createMessage } = useMessage();  
104 -  
105 - const upScriptIdStr = ref('');  
106 -  
107 - const authScriptIdStr = ref('');  
108 -  
109 - onMounted(async () => {  
110 - selectUpOptions.value = await getAllScriptType('TRANSPORT_TCP_UP');  
111 - selectAuthOptions.value = await getAllScriptType('TRANSPORT_TCP_AUTH');  
112 - });  
113 -  
114 - const getAllScriptType = async (type) => {  
115 - const rest = await getScriptManageMeList({ scriptType: type });  
116 - return rest.map((m) => ({ label: m.name, value: m.id }));  
117 - };  
118 -  
119 - const handleSuccess = async ({ res, text }) => {  
120 - if (text !== 'test') {  
121 - const rest = await getAllScriptType('TRANSPORT_TCP_UP');  
122 - selectUpOptions.value = rest;  
123 - scriptForm.upScriptId = res?.id;  
124 - upScriptIdStr.value = res?.id;  
125 - }  
126 - };  
127 -  
128 - const handleAuthSuccess = async ({ res, text }) => {  
129 - if (text !== 'test') {  
130 - const rest = await getAllScriptType('TRANSPORT_TCP_AUTH');  
131 - selectAuthOptions.value = rest;  
132 - scriptForm.authScriptId = res?.id;  
133 - authScriptIdStr.value = res?.id;  
134 - }  
135 - };  
136 -  
137 - const handleUpChange = (v) => {  
138 - upScriptIdStr.value = v;  
139 - scriptForm.upScriptId = v;  
140 - };  
141 -  
142 - const handleAuthChange = (v) => {  
143 - authScriptIdStr.value = v;  
144 - scriptForm.authScriptId = v;  
145 - };  
146 -  
147 - const [registerModal, { openModal }] = useModal();  
148 -  
149 - const [registerAuthModal, { openModal: openAuthModel }] = useModal();  
150 -  
151 - //TODO: 待优化  
152 -  
153 - const handleCreateOrEditAuth = (c) => {  
154 - if (c === 'add') {  
155 - openAuthModel(true, {  
156 - isUpdate: true,  
157 - isView: false,  
158 - isTest: false,  
159 - isText: 'confirm',  
160 - isTitle: 'add',  
161 - });  
162 - } else {  
163 - if (!authScriptIdStr.value) return createMessage.error('请先选择对应脚本');  
164 - openAuthModel(true, {  
165 - isUpdate: false,  
166 - isTest: true,  
167 - record: authScriptIdStr.value,  
168 - isText: 'test',  
169 - isTitle: 'test',  
170 - });  
171 - }  
172 - };  
173 -  
174 - const handleCreateOrEdit = (c) => {  
175 - if (c === 'add') {  
176 - openModal(true, {  
177 - isUpdate: true,  
178 - isView: false,  
179 - isTest: false,  
180 - isText: 'confirm',  
181 - isTitle: 'add',  
182 - });  
183 - } else {  
184 - if (!upScriptIdStr.value) return createMessage.error('请先选择对应脚本');  
185 - openModal(true, {  
186 - isUpdate: false,  
187 - isTest: true,  
188 - record: upScriptIdStr.value,  
189 - isText: 'test',  
190 - isTitle: 'test',  
191 - });  
192 - }  
193 - };  
194 -  
195 - const getFormData = async () => {  
196 - if (props.deviceTypeStr === 'SENSOR') {  
197 - if (!scriptForm.upScriptId) {  
198 - createMessage.error('请先选择对应脚本');  
199 - throw new Error('请先选择对应脚本');  
200 - }  
201 - } else {  
202 - if (!scriptForm.authScriptId) {  
203 - createMessage.error('请先选择对应脚本');  
204 - throw new Error('请先选择对应脚本');  
205 - }  
206 - if (!scriptForm.upScriptId) {  
207 - createMessage.error('请先选择对应脚本');  
208 - throw new Error('请先选择对应脚本');  
209 - }  
210 - }  
211 - return {  
212 - ...scriptForm,  
213 - type: 'TCP',  
214 - };  
215 - };  
216 -  
217 - const resetFormData = () => {  
218 - // resetFields();  
219 - };  
220 -  
221 - const setFormData = (v) => {  
222 - scriptForm.authScriptId = v?.authScriptId;  
223 - scriptForm.upScriptId = v?.upScriptId;  
224 - // setFieldsValue(v);  
225 - upScriptIdStr.value = v?.upScriptId;  
226 - authScriptIdStr.value = v?.authScriptId;  
227 - };  
228 -  
229 - const handleSearch = (inputValue: string, option: Record<'label' | 'value', string>) => {  
230 - return option.label.includes(inputValue);  
231 - };  
232 -  
233 - const handleAuthSearch = (inputValue: string, option: Record<'label' | 'value', string>) => {  
234 - return option.label.includes(inputValue);  
235 - };  
236 -  
237 - defineExpose({  
238 - getFormData,  
239 - resetFormData,  
240 - setFormData,  
241 - });  
242 -</script>  
243 -<style lang="less" scoped></style> 1 +<template>
  2 + <div>
  3 + <a-form
  4 + ref="formRef"
  5 + :model="scriptForm"
  6 + name="basic"
  7 + :label-col="{ span: 4 }"
  8 + :wrapper-col="{ span: 16 }"
  9 + style="margin-left: 2.4rem"
  10 + autocomplete="off"
  11 + >
  12 + <a-form-item
  13 + v-if="deviceTypeStr !== 'SENSOR'"
  14 + label="鉴权脚本"
  15 + name="'params'"
  16 + :rules="[{ required: true, message: '请选择鉴权脚本' }]"
  17 + >
  18 + <div style="display: flex; align-items: center">
  19 + <div>
  20 + <Select
  21 + @change="handleAuthChange"
  22 + placeholder="请选择"
  23 + v-model:value="scriptForm.authScriptId"
  24 + style="width: 305px"
  25 + show-search
  26 + :options="selectAuthOptions"
  27 + :filter-option="handleAuthSearch"
  28 + allowClear
  29 + />
  30 + </div>
  31 + <div>
  32 + <span
  33 + @click="handleCreateOrEditAuth('add')"
  34 + class="ml-2"
  35 + style="color: #409eff; cursor: pointer"
  36 + size="small"
  37 + >新建转换脚本</span
  38 + >
  39 + </div>
  40 + </div>
  41 + <a-button @click="handleCreateOrEditAuth('test')" class="mt-4" type="primary"
  42 + >测试脚本</a-button
  43 + >
  44 + </a-form-item>
  45 + <a-form-item
  46 + label="上行脚本"
  47 + name="'params'"
  48 + :rules="[{ required: true, message: '请选择上行脚本' }]"
  49 + >
  50 + <div style="display: flex; align-items: center">
  51 + <div>
  52 + <Select
  53 + @change="handleUpChange"
  54 + placeholder="请选择"
  55 + v-model:value="scriptForm.upScriptId"
  56 + style="width: 305px"
  57 + show-search
  58 + :options="selectUpOptions"
  59 + :filter-option="handleSearch"
  60 + allowClear
  61 + />
  62 + </div>
  63 + <div>
  64 + <span
  65 + @click="handleCreateOrEdit('add')"
  66 + class="ml-2"
  67 + style="color: #409eff; cursor: pointer"
  68 + size="small"
  69 + >新建转换脚本</span
  70 + >
  71 + </div>
  72 + </div>
  73 + <a-button @click="handleCreateOrEdit('test')" class="mt-4" type="primary"
  74 + >测试脚本</a-button
  75 + >
  76 + </a-form-item>
  77 + </a-form>
  78 + <ConverScriptModal @register="registerModal" @success="handleSuccess" />
  79 + <ConverScriptModal @register="registerAuthModal" @success="handleAuthSuccess" />
  80 + </div>
  81 +</template>
  82 +<script lang="ts" setup name="index">
  83 + import { ref, Ref, onMounted, reactive } from 'vue';
  84 + import { SelectTypes } from 'ant-design-vue/es/select';
  85 + import { Select } from 'ant-design-vue';
  86 + import { useModal } from '/@/components/Modal';
  87 + import { getScriptManageMeList } from '/@/api/scriptmanage/scriptManager';
  88 + import ConverScriptModal from '/@/views/rule/script/TcpConversionScript/ConverScriptModal.vue';
  89 + import { useMessage } from '/@/hooks/web/useMessage';
  90 +
  91 + const props = defineProps({
  92 + deviceTypeStr: { type: String, default: '' },
  93 + });
  94 +
  95 + const scriptForm = reactive({
  96 + authScriptId: '',
  97 + upScriptId: '',
  98 + });
  99 + const selectUpOptions: Ref<SelectTypes['options']> = ref([]);
  100 +
  101 + const selectAuthOptions: Ref<SelectTypes['options']> = ref([]);
  102 +
  103 + const { createMessage } = useMessage();
  104 +
  105 + const upScriptIdStr = ref('');
  106 +
  107 + const authScriptIdStr = ref('');
  108 +
  109 + onMounted(async () => {
  110 + selectUpOptions.value = await getAllScriptType('TRANSPORT_TCP_UP');
  111 + selectAuthOptions.value = await getAllScriptType('TRANSPORT_TCP_AUTH');
  112 + });
  113 +
  114 + const getAllScriptType = async (type) => {
  115 + const rest = await getScriptManageMeList({ scriptType: type });
  116 + return rest.map((m) => ({ label: m.name, value: m.id }));
  117 + };
  118 +
  119 + const handleSuccess = async ({ res, text }) => {
  120 + if (text !== 'test') {
  121 + const rest = await getAllScriptType('TRANSPORT_TCP_UP');
  122 + selectUpOptions.value = rest;
  123 + scriptForm.upScriptId = res?.id;
  124 + upScriptIdStr.value = res?.id;
  125 + }
  126 + };
  127 +
  128 + const handleAuthSuccess = async ({ res, text }) => {
  129 + if (text !== 'test') {
  130 + const rest = await getAllScriptType('TRANSPORT_TCP_AUTH');
  131 + selectAuthOptions.value = rest;
  132 + scriptForm.authScriptId = res?.id;
  133 + authScriptIdStr.value = res?.id;
  134 + }
  135 + };
  136 +
  137 + const handleUpChange = (v) => {
  138 + upScriptIdStr.value = v;
  139 + scriptForm.upScriptId = v;
  140 + };
  141 +
  142 + const handleAuthChange = (v) => {
  143 + authScriptIdStr.value = v;
  144 + scriptForm.authScriptId = v;
  145 + };
  146 +
  147 + const [registerModal, { openModal }] = useModal();
  148 +
  149 + const [registerAuthModal, { openModal: openAuthModel }] = useModal();
  150 +
  151 + //TODO: 待优化
  152 +
  153 + const handleCreateOrEditAuth = (c) => {
  154 + if (c === 'add') {
  155 + openAuthModel(true, {
  156 + isUpdate: true,
  157 + isView: false,
  158 + isTest: false,
  159 + isText: 'confirm',
  160 + isTitle: 'add',
  161 + });
  162 + } else {
  163 + if (!authScriptIdStr.value) return createMessage.error('请先选择对应脚本');
  164 + openAuthModel(true, {
  165 + isUpdate: false,
  166 + isTest: true,
  167 + record: authScriptIdStr.value,
  168 + isText: 'test',
  169 + isTitle: 'test',
  170 + });
  171 + }
  172 + };
  173 +
  174 + const handleCreateOrEdit = (c) => {
  175 + if (c === 'add') {
  176 + openModal(true, {
  177 + isUpdate: true,
  178 + isView: false,
  179 + isTest: false,
  180 + isText: 'confirm',
  181 + isTitle: 'add',
  182 + });
  183 + } else {
  184 + if (!upScriptIdStr.value) return createMessage.error('请先选择对应脚本');
  185 + openModal(true, {
  186 + isUpdate: false,
  187 + isTest: true,
  188 + record: upScriptIdStr.value,
  189 + isText: 'test',
  190 + isTitle: 'test',
  191 + });
  192 + }
  193 + };
  194 +
  195 + const getFormData = async () => {
  196 + if (props.deviceTypeStr === 'SENSOR') {
  197 + if (!scriptForm.upScriptId) {
  198 + createMessage.error('请先选择对应脚本');
  199 + throw new Error('请先选择对应脚本');
  200 + }
  201 + } else {
  202 + if (!scriptForm.authScriptId) {
  203 + createMessage.error('请先选择对应脚本');
  204 + throw new Error('请先选择对应脚本');
  205 + }
  206 + if (!scriptForm.upScriptId) {
  207 + createMessage.error('请先选择对应脚本');
  208 + throw new Error('请先选择对应脚本');
  209 + }
  210 + }
  211 + return {
  212 + ...scriptForm,
  213 + type: 'TCP',
  214 + };
  215 + };
  216 +
  217 + const resetFormData = () => {
  218 + // resetFields();
  219 + };
  220 +
  221 + const setFormData = (v) => {
  222 + scriptForm.authScriptId = v?.authScriptId;
  223 + scriptForm.upScriptId = v?.upScriptId;
  224 + // setFieldsValue(v);
  225 + upScriptIdStr.value = v?.upScriptId;
  226 + authScriptIdStr.value = v?.authScriptId;
  227 + };
  228 +
  229 + const handleSearch = (inputValue: string, option: Record<'label' | 'value', string>) => {
  230 + return option.label.includes(inputValue);
  231 + };
  232 +
  233 + const handleAuthSearch = (inputValue: string, option: Record<'label' | 'value', string>) => {
  234 + return option.label.includes(inputValue);
  235 + };
  236 +
  237 + defineExpose({
  238 + getFormData,
  239 + resetFormData,
  240 + setFormData,
  241 + });
  242 +</script>
  243 +<style lang="less" scoped></style>
@@ -33,42 +33,55 @@ export const columns: BasicColumn[] = [ @@ -33,42 +33,55 @@ export const columns: BasicColumn[] = [
33 }, 33 },
34 ]; 34 ];
35 35
36 -export const searchFormSchema: FormSchema[] = [  
37 - {  
38 - field: 'name',  
39 - label: '名称',  
40 - component: 'Input',  
41 - colProps: { span: 6 },  
42 - componentProps: {  
43 - maxLength: 36,  
44 - placeholder: '请输入名称', 36 +export const searchFormSchema = (syncValue: Fn): FormSchema[] => {
  37 + return [
  38 + {
  39 + field: 'name',
  40 + label: '名称',
  41 + component: 'Input',
  42 + colProps: { span: 6 },
  43 + componentProps: {
  44 + maxLength: 36,
  45 + placeholder: '请输入名称',
  46 + onChange(event: Event) {
  47 + const value = (event.target as HTMLInputElement).value;
  48 + syncValue({ name: value });
  49 + },
  50 + },
45 }, 51 },
46 - },  
47 - {  
48 - field: 'status',  
49 - label: '状态',  
50 - component: 'Select',  
51 - componentProps: {  
52 - placeholder: '请选择状态',  
53 - options: [  
54 - { label: '已启用', value: StatusEnum.ENABLE },  
55 - { label: '未启用', value: StatusEnum.DISABLE },  
56 - ], 52 + {
  53 + field: 'status',
  54 + label: '状态',
  55 + component: 'Select',
  56 + componentProps: {
  57 + placeholder: '请选择状态',
  58 + options: [
  59 + { label: '已启用', value: StatusEnum.ENABLE },
  60 + { label: '未启用', value: StatusEnum.DISABLE },
  61 + ],
  62 + },
  63 + colProps: { span: 6 },
  64 + onChange(value: number) {
  65 + syncValue({ status: value });
  66 + },
57 }, 67 },
58 - colProps: { span: 6 },  
59 - },  
60 - {  
61 - field: 'createTime',  
62 - label: '创建时间',  
63 - component: 'RangePicker',  
64 - colProps: { span: 10 },  
65 - componentProps: {  
66 - showTime: {  
67 - defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')], 68 + {
  69 + field: 'createTime',
  70 + label: '创建时间',
  71 + component: 'RangePicker',
  72 + colProps: { span: 10 },
  73 + componentProps: {
  74 + showTime: {
  75 + defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
  76 + },
  77 + onChange(value: [moment.Moment, moment.Moment]) {
  78 + if (value.length && value.length === 2)
  79 + syncValue({ startTime: value[0].format('x'), endTime: value[1].format('x') });
  80 + },
68 }, 81 },
69 }, 82 },
70 - },  
71 -]; 83 + ];
  84 +};
72 85
73 export const formSchema: FormSchema[] = [ 86 export const formSchema: FormSchema[] = [
74 { 87 {
@@ -10,6 +10,7 @@ @@ -10,6 +10,7 @@
10 RULE = 'rule', 10 RULE = 'rule',
11 TCP = 'tco', 11 TCP = 'tco',
12 } 12 }
  13 +
13 const ruleChainTableRefEl = ref<Nullable<InstanceType<typeof RuleChainConversionScript>>>(null); 14 const ruleChainTableRefEl = ref<Nullable<InstanceType<typeof RuleChainConversionScript>>>(null);
14 const tcpTableRefEl = ref<Nullable<InstanceType<typeof TcpConversionScript>>>(null); 15 const tcpTableRefEl = ref<Nullable<InstanceType<typeof TcpConversionScript>>>(null);
15 16
@@ -17,8 +18,12 @@ @@ -17,8 +18,12 @@
17 18
18 const activeKey = ref(ActiveKey.RULE); 19 const activeKey = ref(ActiveKey.RULE);
19 20
  21 + const syncValue = (value: Recordable) => {
  22 + searchInfo.value = { ...unref(searchInfo), ...value };
  23 + };
  24 +
20 const [register, { getFieldsValue }] = useForm({ 25 const [register, { getFieldsValue }] = useForm({
21 - schemas: searchFormSchema, 26 + schemas: searchFormSchema(syncValue),
22 labelWidth: 120, 27 labelWidth: 120,
23 showAdvancedButton: true, 28 showAdvancedButton: true,
24 compact: true, 29 compact: true,
@@ -26,7 +31,6 @@ @@ -26,7 +31,6 @@
26 submitFunc: async () => { 31 submitFunc: async () => {
27 const value = getFieldsValue(); 32 const value = getFieldsValue();
28 searchInfo.value = value; 33 searchInfo.value = value;
29 - console.log(searchInfo);  
30 await nextTick(); 34 await nextTick();
31 if (unref(activeKey) === ActiveKey.RULE) { 35 if (unref(activeKey) === ActiveKey.RULE) {
32 unref(ruleChainTableRefEl)?.reload(); 36 unref(ruleChainTableRefEl)?.reload();
@@ -48,21 +52,28 @@ @@ -48,21 +52,28 @@
48 52
49 <template> 53 <template>
50 <section class="w-full h-full p-4"> 54 <section class="w-full h-full p-4">
51 - <BasicForm @register="register" class="rule-script-manage-form w-full bg-light-50 !pt-4" /> 55 + <BasicForm
  56 + @register="register"
  57 + class="rule-script-manage-form w-full bg-light-50 !pt-4 dark:bg-dark-900"
  58 + />
52 <main class="mt-4"> 59 <main class="mt-4">
53 - <Tabs v-model:activeKey="activeKey" type="card" class="w-full h-full bg-light-50 !p-4"> 60 + <Tabs
  61 + v-model:activeKey="activeKey"
  62 + type="card"
  63 + class="w-full h-full bg-light-50 !p-4 dark:bg-dark-900"
  64 + >
54 <Tabs.TabPane tab="规则链转换脚本" :key="ActiveKey.RULE"> 65 <Tabs.TabPane tab="规则链转换脚本" :key="ActiveKey.RULE">
55 <RuleChainConversionScript 66 <RuleChainConversionScript
56 ref="ruleChainTableRefEl" 67 ref="ruleChainTableRefEl"
57 :search-info="searchInfo" 68 :search-info="searchInfo"
58 - class="p-4 bg-neutral-100" 69 + class="p-4 bg-neutral-100 dark:bg-dark-700"
59 /> 70 />
60 </Tabs.TabPane> 71 </Tabs.TabPane>
61 <Tabs.TabPane tab="TCP转换脚本" :key="ActiveKey.TCP"> 72 <Tabs.TabPane tab="TCP转换脚本" :key="ActiveKey.TCP">
62 <TcpConversionScript 73 <TcpConversionScript
63 ref="tcpTableRefEl" 74 ref="tcpTableRefEl"
64 :search-info="searchInfo" 75 :search-info="searchInfo"
65 - class="p-4 bg-neutral-100" 76 + class="p-4 bg-neutral-100 dark:bg-dark-700"
66 /> 77 />
67 </Tabs.TabPane> 78 </Tabs.TabPane>
68 </Tabs> 79 </Tabs>