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

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

See merge request yunteng/thingskit-front!607

@@ -6,7 +6,7 @@
   import { getScriptManageMeList } from '/@/api/scriptmanage/scriptManager';
   import { Description, useDescription } from '/@/components/Description';
   import { useModal } from '/@/components/Modal';
-  import CoverScriptModal from '/@/views/scriptmanage/converscript/ConverScriptModal.vue';
+  import CoverScriptModal from '/@/views/rule/script/TcpConversionScript/ConverScriptModal.vue';
   import { SelectTypes } from 'ant-design-vue/es/select';
 
   const props = defineProps<{

-<template>
-  <div>
-    <a-form
-      ref="formRef"
-      :model="scriptForm"
-      name="basic"
-      :label-col="{ span: 4 }"
-      :wrapper-col="{ span: 16 }"
-      style="margin-left: 2.4rem"
-      autocomplete="off"
-    >
-      <a-form-item
-        v-if="deviceTypeStr !== 'SENSOR'"
-        label="鉴权脚本"
-        name="'params'"
-        :rules="[{ required: true, message: '请选择鉴权脚本' }]"
-      >
-        <div style="display: flex; align-items: center">
-          <div>
-            <Select
-              @change="handleAuthChange"
-              placeholder="请选择"
-              v-model:value="scriptForm.authScriptId"
-              style="width: 305px"
-              show-search
-              :options="selectAuthOptions"
-              :filter-option="handleAuthSearch"
-              allowClear
-            />
-          </div>
-          <div>
-            <span
-              @click="handleCreateOrEditAuth('add')"
-              class="ml-2"
-              style="color: #409eff; cursor: pointer"
-              size="small"
-              >新建转换脚本</span
-            >
-          </div>
-        </div>
-        <a-button @click="handleCreateOrEditAuth('test')" class="mt-4" type="primary"
-          >测试脚本</a-button
-        >
-      </a-form-item>
-      <a-form-item
-        label="上行脚本"
-        name="'params'"
-        :rules="[{ required: true, message: '请选择上行脚本' }]"
-      >
-        <div style="display: flex; align-items: center">
-          <div>
-            <Select
-              @change="handleUpChange"
-              placeholder="请选择"
-              v-model:value="scriptForm.upScriptId"
-              style="width: 305px"
-              show-search
-              :options="selectUpOptions"
-              :filter-option="handleSearch"
-              allowClear
-            />
-          </div>
-          <div>
-            <span
-              @click="handleCreateOrEdit('add')"
-              class="ml-2"
-              style="color: #409eff; cursor: pointer"
-              size="small"
-              >新建转换脚本</span
-            >
-          </div>
-        </div>
-        <a-button @click="handleCreateOrEdit('test')" class="mt-4" type="primary"
-          >测试脚本</a-button
-        >
-      </a-form-item>
-    </a-form>
-    <ConverScriptModal @register="registerModal" @success="handleSuccess" />
-    <ConverScriptModal @register="registerAuthModal" @success="handleAuthSuccess" />
-  </div>
-</template>
-<script lang="ts" setup name="index">
-  import { ref, Ref, onMounted, reactive } from 'vue';
-  import { SelectTypes } from 'ant-design-vue/es/select';
-  import { Select } from 'ant-design-vue';
-  import { useModal } from '/@/components/Modal';
-  import { getScriptManageMeList } from '/@/api/scriptmanage/scriptManager';
-  import ConverScriptModal from '/@/views/scriptmanage/converscript/ConverScriptModal.vue';
-  import { useMessage } from '/@/hooks/web/useMessage';
-
-  const props = defineProps({
-    deviceTypeStr: { type: String, default: '' },
-  });
-
-  const scriptForm = reactive({
-    authScriptId: '',
-    upScriptId: '',
-  });
-  const selectUpOptions: Ref<SelectTypes['options']> = ref([]);
-
-  const selectAuthOptions: Ref<SelectTypes['options']> = ref([]);
-
-  const { createMessage } = useMessage();
-
-  const upScriptIdStr = ref('');
-
-  const authScriptIdStr = ref('');
-
-  onMounted(async () => {
-    selectUpOptions.value = await getAllScriptType('TRANSPORT_TCP_UP');
-    selectAuthOptions.value = await getAllScriptType('TRANSPORT_TCP_AUTH');
-  });
-
-  const getAllScriptType = async (type) => {
-    const rest = await getScriptManageMeList({ scriptType: type });
-    return rest.map((m) => ({ label: m.name, value: m.id }));
-  };
-
-  const handleSuccess = async ({ res, text }) => {
-    if (text !== 'test') {
-      const rest = await getAllScriptType('TRANSPORT_TCP_UP');
-      selectUpOptions.value = rest;
-      scriptForm.upScriptId = res?.id;
-      upScriptIdStr.value = res?.id;
-    }
-  };
-
-  const handleAuthSuccess = async ({ res, text }) => {
-    if (text !== 'test') {
-      const rest = await getAllScriptType('TRANSPORT_TCP_AUTH');
-      selectAuthOptions.value = rest;
-      scriptForm.authScriptId = res?.id;
-      authScriptIdStr.value = res?.id;
-    }
-  };
-
-  const handleUpChange = (v) => {
-    upScriptIdStr.value = v;
-    scriptForm.upScriptId = v;
-  };
-
-  const handleAuthChange = (v) => {
-    authScriptIdStr.value = v;
-    scriptForm.authScriptId = v;
-  };
-
-  const [registerModal, { openModal }] = useModal();
-
-  const [registerAuthModal, { openModal: openAuthModel }] = useModal();
-
-  //TODO: 待优化
-
-  const handleCreateOrEditAuth = (c) => {
-    if (c === 'add') {
-      openAuthModel(true, {
-        isUpdate: true,
-        isView: false,
-        isTest: false,
-        isText: 'confirm',
-        isTitle: 'add',
-      });
-    } else {
-      if (!authScriptIdStr.value) return createMessage.error('请先选择对应脚本');
-      openAuthModel(true, {
-        isUpdate: false,
-        isTest: true,
-        record: authScriptIdStr.value,
-        isText: 'test',
-        isTitle: 'test',
-      });
-    }
-  };
-
-  const handleCreateOrEdit = (c) => {
-    if (c === 'add') {
-      openModal(true, {
-        isUpdate: true,
-        isView: false,
-        isTest: false,
-        isText: 'confirm',
-        isTitle: 'add',
-      });
-    } else {
-      if (!upScriptIdStr.value) return createMessage.error('请先选择对应脚本');
-      openModal(true, {
-        isUpdate: false,
-        isTest: true,
-        record: upScriptIdStr.value,
-        isText: 'test',
-        isTitle: 'test',
-      });
-    }
-  };
-
-  const getFormData = async () => {
-    if (props.deviceTypeStr === 'SENSOR') {
-      if (!scriptForm.upScriptId) {
-        createMessage.error('请先选择对应脚本');
-        throw new Error('请先选择对应脚本');
-      }
-    } else {
-      if (!scriptForm.authScriptId) {
-        createMessage.error('请先选择对应脚本');
-        throw new Error('请先选择对应脚本');
-      }
-      if (!scriptForm.upScriptId) {
-        createMessage.error('请先选择对应脚本');
-        throw new Error('请先选择对应脚本');
-      }
-    }
-    return {
-      ...scriptForm,
-      type: 'TCP',
-    };
-  };
-
-  const resetFormData = () => {
-    // resetFields();
-  };
-
-  const setFormData = (v) => {
-    scriptForm.authScriptId = v?.authScriptId;
-    scriptForm.upScriptId = v?.upScriptId;
-    // setFieldsValue(v);
-    upScriptIdStr.value = v?.upScriptId;
-    authScriptIdStr.value = v?.authScriptId;
-  };
-
-  const handleSearch = (inputValue: string, option: Record<'label' | 'value', string>) => {
-    return option.label.includes(inputValue);
-  };
-
-  const handleAuthSearch = (inputValue: string, option: Record<'label' | 'value', string>) => {
-    return option.label.includes(inputValue);
-  };
-
-  defineExpose({
-    getFormData,
-    resetFormData,
-    setFormData,
-  });
-</script>
-<style lang="less" scoped></style>
+<template>
+  <div>
+    <a-form
+      ref="formRef"
+      :model="scriptForm"
+      name="basic"
+      :label-col="{ span: 4 }"
+      :wrapper-col="{ span: 16 }"
+      style="margin-left: 2.4rem"
+      autocomplete="off"
+    >
+      <a-form-item
+        v-if="deviceTypeStr !== 'SENSOR'"
+        label="鉴权脚本"
+        name="'params'"
+        :rules="[{ required: true, message: '请选择鉴权脚本' }]"
+      >
+        <div style="display: flex; align-items: center">
+          <div>
+            <Select
+              @change="handleAuthChange"
+              placeholder="请选择"
+              v-model:value="scriptForm.authScriptId"
+              style="width: 305px"
+              show-search
+              :options="selectAuthOptions"
+              :filter-option="handleAuthSearch"
+              allowClear
+            />
+          </div>
+          <div>
+            <span
+              @click="handleCreateOrEditAuth('add')"
+              class="ml-2"
+              style="color: #409eff; cursor: pointer"
+              size="small"
+              >新建转换脚本</span
+            >
+          </div>
+        </div>
+        <a-button @click="handleCreateOrEditAuth('test')" class="mt-4" type="primary"
+          >测试脚本</a-button
+        >
+      </a-form-item>
+      <a-form-item
+        label="上行脚本"
+        name="'params'"
+        :rules="[{ required: true, message: '请选择上行脚本' }]"
+      >
+        <div style="display: flex; align-items: center">
+          <div>
+            <Select
+              @change="handleUpChange"
+              placeholder="请选择"
+              v-model:value="scriptForm.upScriptId"
+              style="width: 305px"
+              show-search
+              :options="selectUpOptions"
+              :filter-option="handleSearch"
+              allowClear
+            />
+          </div>
+          <div>
+            <span
+              @click="handleCreateOrEdit('add')"
+              class="ml-2"
+              style="color: #409eff; cursor: pointer"
+              size="small"
+              >新建转换脚本</span
+            >
+          </div>
+        </div>
+        <a-button @click="handleCreateOrEdit('test')" class="mt-4" type="primary"
+          >测试脚本</a-button
+        >
+      </a-form-item>
+    </a-form>
+    <ConverScriptModal @register="registerModal" @success="handleSuccess" />
+    <ConverScriptModal @register="registerAuthModal" @success="handleAuthSuccess" />
+  </div>
+</template>
+<script lang="ts" setup name="index">
+  import { ref, Ref, onMounted, reactive } from 'vue';
+  import { SelectTypes } from 'ant-design-vue/es/select';
+  import { Select } from 'ant-design-vue';
+  import { useModal } from '/@/components/Modal';
+  import { getScriptManageMeList } from '/@/api/scriptmanage/scriptManager';
+  import ConverScriptModal from '/@/views/rule/script/TcpConversionScript/ConverScriptModal.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const props = defineProps({
+    deviceTypeStr: { type: String, default: '' },
+  });
+
+  const scriptForm = reactive({
+    authScriptId: '',
+    upScriptId: '',
+  });
+  const selectUpOptions: Ref<SelectTypes['options']> = ref([]);
+
+  const selectAuthOptions: Ref<SelectTypes['options']> = ref([]);
+
+  const { createMessage } = useMessage();
+
+  const upScriptIdStr = ref('');
+
+  const authScriptIdStr = ref('');
+
+  onMounted(async () => {
+    selectUpOptions.value = await getAllScriptType('TRANSPORT_TCP_UP');
+    selectAuthOptions.value = await getAllScriptType('TRANSPORT_TCP_AUTH');
+  });
+
+  const getAllScriptType = async (type) => {
+    const rest = await getScriptManageMeList({ scriptType: type });
+    return rest.map((m) => ({ label: m.name, value: m.id }));
+  };
+
+  const handleSuccess = async ({ res, text }) => {
+    if (text !== 'test') {
+      const rest = await getAllScriptType('TRANSPORT_TCP_UP');
+      selectUpOptions.value = rest;
+      scriptForm.upScriptId = res?.id;
+      upScriptIdStr.value = res?.id;
+    }
+  };
+
+  const handleAuthSuccess = async ({ res, text }) => {
+    if (text !== 'test') {
+      const rest = await getAllScriptType('TRANSPORT_TCP_AUTH');
+      selectAuthOptions.value = rest;
+      scriptForm.authScriptId = res?.id;
+      authScriptIdStr.value = res?.id;
+    }
+  };
+
+  const handleUpChange = (v) => {
+    upScriptIdStr.value = v;
+    scriptForm.upScriptId = v;
+  };
+
+  const handleAuthChange = (v) => {
+    authScriptIdStr.value = v;
+    scriptForm.authScriptId = v;
+  };
+
+  const [registerModal, { openModal }] = useModal();
+
+  const [registerAuthModal, { openModal: openAuthModel }] = useModal();
+
+  //TODO: 待优化
+
+  const handleCreateOrEditAuth = (c) => {
+    if (c === 'add') {
+      openAuthModel(true, {
+        isUpdate: true,
+        isView: false,
+        isTest: false,
+        isText: 'confirm',
+        isTitle: 'add',
+      });
+    } else {
+      if (!authScriptIdStr.value) return createMessage.error('请先选择对应脚本');
+      openAuthModel(true, {
+        isUpdate: false,
+        isTest: true,
+        record: authScriptIdStr.value,
+        isText: 'test',
+        isTitle: 'test',
+      });
+    }
+  };
+
+  const handleCreateOrEdit = (c) => {
+    if (c === 'add') {
+      openModal(true, {
+        isUpdate: true,
+        isView: false,
+        isTest: false,
+        isText: 'confirm',
+        isTitle: 'add',
+      });
+    } else {
+      if (!upScriptIdStr.value) return createMessage.error('请先选择对应脚本');
+      openModal(true, {
+        isUpdate: false,
+        isTest: true,
+        record: upScriptIdStr.value,
+        isText: 'test',
+        isTitle: 'test',
+      });
+    }
+  };
+
+  const getFormData = async () => {
+    if (props.deviceTypeStr === 'SENSOR') {
+      if (!scriptForm.upScriptId) {
+        createMessage.error('请先选择对应脚本');
+        throw new Error('请先选择对应脚本');
+      }
+    } else {
+      if (!scriptForm.authScriptId) {
+        createMessage.error('请先选择对应脚本');
+        throw new Error('请先选择对应脚本');
+      }
+      if (!scriptForm.upScriptId) {
+        createMessage.error('请先选择对应脚本');
+        throw new Error('请先选择对应脚本');
+      }
+    }
+    return {
+      ...scriptForm,
+      type: 'TCP',
+    };
+  };
+
+  const resetFormData = () => {
+    // resetFields();
+  };
+
+  const setFormData = (v) => {
+    scriptForm.authScriptId = v?.authScriptId;
+    scriptForm.upScriptId = v?.upScriptId;
+    // setFieldsValue(v);
+    upScriptIdStr.value = v?.upScriptId;
+    authScriptIdStr.value = v?.authScriptId;
+  };
+
+  const handleSearch = (inputValue: string, option: Record<'label' | 'value', string>) => {
+    return option.label.includes(inputValue);
+  };
+
+  const handleAuthSearch = (inputValue: string, option: Record<'label' | 'value', string>) => {
+    return option.label.includes(inputValue);
+  };
+
+  defineExpose({
+    getFormData,
+    resetFormData,
+    setFormData,
+  });
+</script>
+<style lang="less" scoped></style>

@@ -33,42 +33,55 @@ export const columns: BasicColumn[] = [
   },
 ];
 
-export const searchFormSchema: FormSchema[] = [
-  {
-    field: 'name',
-    label: '名称',
-    component: 'Input',
-    colProps: { span: 6 },
-    componentProps: {
-      maxLength: 36,
-      placeholder: '请输入名称',
+export const searchFormSchema = (syncValue: Fn): FormSchema[] => {
+  return [
+    {
+      field: 'name',
+      label: '名称',
+      component: 'Input',
+      colProps: { span: 6 },
+      componentProps: {
+        maxLength: 36,
+        placeholder: '请输入名称',
+        onChange(event: Event) {
+          const value = (event.target as HTMLInputElement).value;
+          syncValue({ name: value });
+        },
+      },
     },
-  },
-  {
-    field: 'status',
-    label: '状态',
-    component: 'Select',
-    componentProps: {
-      placeholder: '请选择状态',
-      options: [
-        { label: '已启用', value: StatusEnum.ENABLE },
-        { label: '未启用', value: StatusEnum.DISABLE },
-      ],
+    {
+      field: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择状态',
+        options: [
+          { label: '已启用', value: StatusEnum.ENABLE },
+          { label: '未启用', value: StatusEnum.DISABLE },
+        ],
+      },
+      colProps: { span: 6 },
+      onChange(value: number) {
+        syncValue({ status: value });
+      },
     },
-    colProps: { span: 6 },
-  },
-  {
-    field: 'createTime',
-    label: '创建时间',
-    component: 'RangePicker',
-    colProps: { span: 10 },
-    componentProps: {
-      showTime: {
-        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+    {
+      field: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      colProps: { span: 10 },
+      componentProps: {
+        showTime: {
+          defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+        },
+        onChange(value: [moment.Moment, moment.Moment]) {
+          if (value.length && value.length === 2)
+            syncValue({ startTime: value[0].format('x'), endTime: value[1].format('x') });
+        },
       },
     },
-  },
-];
+  ];
+};
 
 export const formSchema: FormSchema[] = [
   {

@@ -10,6 +10,7 @@
     RULE = 'rule',
     TCP = 'tco',
   }
+
   const ruleChainTableRefEl = ref<Nullable<InstanceType<typeof RuleChainConversionScript>>>(null);
   const tcpTableRefEl = ref<Nullable<InstanceType<typeof TcpConversionScript>>>(null);
 
@@ -17,8 +18,12 @@
 
   const activeKey = ref(ActiveKey.RULE);
 
+  const syncValue = (value: Recordable) => {
+    searchInfo.value = { ...unref(searchInfo), ...value };
+  };
+
   const [register, { getFieldsValue }] = useForm({
-    schemas: searchFormSchema,
+    schemas: searchFormSchema(syncValue),
     labelWidth: 120,
     showAdvancedButton: true,
     compact: true,
@@ -26,7 +31,6 @@
     submitFunc: async () => {
       const value = getFieldsValue();
       searchInfo.value = value;
-      console.log(searchInfo);
       await nextTick();
       if (unref(activeKey) === ActiveKey.RULE) {
         unref(ruleChainTableRefEl)?.reload();
@@ -48,21 +52,28 @@
 
 <template>
   <section class="w-full h-full p-4">
-    <BasicForm @register="register" class="rule-script-manage-form w-full bg-light-50 !pt-4" />
+    <BasicForm
+      @register="register"
+      class="rule-script-manage-form w-full bg-light-50 !pt-4 dark:bg-dark-900"
+    />
     <main class="mt-4">
-      <Tabs v-model:activeKey="activeKey" type="card" class="w-full h-full bg-light-50 !p-4">
+      <Tabs
+        v-model:activeKey="activeKey"
+        type="card"
+        class="w-full h-full bg-light-50 !p-4 dark:bg-dark-900"
+      >
         <Tabs.TabPane tab="规则链转换脚本" :key="ActiveKey.RULE">
           <RuleChainConversionScript
             ref="ruleChainTableRefEl"
             :search-info="searchInfo"
-            class="p-4 bg-neutral-100"
+            class="p-4 bg-neutral-100 dark:bg-dark-700"
           />
         </Tabs.TabPane>
         <Tabs.TabPane tab="TCP转换脚本" :key="ActiveKey.TCP">
           <TcpConversionScript
             ref="tcpTableRefEl"
             :search-info="searchInfo"
-            class="p-4 bg-neutral-100"
+            class="p-4 bg-neutral-100 dark:bg-dark-700"
           />
         </Tabs.TabPane>
       </Tabs>