refractor:修改设备配置

@@ -62,7 +62,7 @@ export const step1Schemas: FormSchema[] = [
     componentProps: {
       api: findDictItemByCode,
       params: {
-        dictCode: 'DEVICE_BRAND_GATEWAY',
+        dictCode: 'device_brand_gateway',
       },
       labelField: 'itemText',
       valueField: 'itemValue',

@@ -8,23 +8,50 @@
       @ok="handleSubmit"
       @cancel="handleCancel"
     >
-      <Tabs
-        type="card"
-        :animated="true"
-        v-model:activeKey="activeKey"
-        :size="size"
-        @change="handleChange"
-      >
-        <TabPane forceRender key="1" tab="设备配置">
-          <DeviceConfigurationStep v-show="activeKey === '1'" ref="DevConStRef" />
-        </TabPane>
-        <TabPane forceRender key="2" tab="传输配置">
-          <TransportConfigurationStep v-show="activeKey === '2'" ref="TransConStRef" />
-        </TabPane>
-        <TabPane forceRender key="3" v-show="activeKey === '3'" tab="物模型管理">
-          <PhysicalModelManagementStep v-show="activeKey === '3'" ref="PhysicalModManRef" />
-        </TabPane>
-      </Tabs>
+      <div v-if="!isViewDetail" class="step-form-form">
+        <a-steps :current="current">
+          <a-step v-for="item in steps" :key="item.title" :title="item.title" />
+        </a-steps>
+      </div>
+      <div v-if="!isViewDetail" class="mt-5">
+        <DeviceConfigurationStep
+          v-show="current === 0"
+          ref="DevConStRef"
+          @next="handleStepNext(true, null)"
+        />
+        <TransportConfigurationStep
+          v-show="current === 1"
+          ref="TransConStRef"
+          @prev="handleStepPrev"
+        />
+      </div>
+      <div v-if="isViewDetail">
+        <Tabs
+          type="card"
+          :animated="true"
+          v-model:activeKey="activeKey"
+          :size="size"
+          @change="handleChange"
+        >
+          <TabPane forceRender key="1" tab="设备配置">
+            <DeviceConfigurationStep
+              :ifShowBtn="isViewDetail ? false : true"
+              v-show="activeKey === '1'"
+              ref="DevConStRef"
+            />
+          </TabPane>
+          <TabPane forceRender key="2" tab="传输配置">
+            <TransportConfigurationStep
+              :ifShowBtn="isViewDetail ? false : true"
+              v-show="activeKey === '2'"
+              ref="TransConStRef"
+            />
+          </TabPane>
+          <TabPane forceRender key="3" v-show="activeKey === '3'" tab="物模型管理">
+            <PhysicalModelManagementStep v-show="activeKey === '3'" ref="PhysicalModManRef" />
+          </TabPane>
+        </Tabs>
+      </div>
     </BasicModal>
   </div>
 </template>
@@ -33,6 +60,7 @@
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { deviceConfigAddOrEdit, deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { steps } from './device.profile.data';
   import { isEmpty } from '/@/utils/is';
   import { Tabs, TabPane } from 'ant-design-vue';
   import DeviceConfigurationStep from './step/DeviceConfigurationStep.vue';
@@ -47,6 +75,7 @@
   const { createMessage } = useMessage();
   const isViewDetail = ref(false);
   const isUpdate = ref(false);
+  const current = ref(0);
   const DevConStRef = ref<InstanceType<typeof DeviceConfigurationStep>>();
   const TransConStRef = ref<InstanceType<typeof TransportConfigurationStep>>();
   const PhysicalModManRef = ref<InstanceType<typeof PhysicalModelManagementStep>>();
@@ -59,6 +88,7 @@
   const transportTypeStr = ref('');
   const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
     setModalProps({ confirmLoading: false });
+    current.value = 0;
     isUpdate.value = data.isUpdate;
     isViewDetail.value = data.isView;
     const res = data.record !== undefined ? await deviceConfigGetDetail(data.record.id) : {};
@@ -73,7 +103,7 @@
         handleStepNext(false, res);
       }
     } else {
-      setModalProps({ showOkBtn: false, showCancelBtn: false, title: '查看设备配置' });
+      setModalProps({ showOkBtn: false, showCancelBtn: false, title: '设备配置详情' });
       await setDeviceConfEditFormData(res);
       await setTransConfEditFormData(res);
       handleStepNext(false, res);
@@ -86,10 +116,14 @@
   };
   const handleStepNext = (e, data) => {
     if (e) {
+      current.value++;
     } else {
       setTransConfEditFormData(data);
     }
   };
+  const handleStepPrev = () => {
+    current.value--;
+  };
 
   const setDeviceConfEditFormData = async (res) => {
     await DevConStRef.value?.setFormData(res);

@@ -8,6 +8,17 @@ import { h } from 'vue';
 
 import { deviceConfigGetRuleChain } from '/@/api/device/deviceConfigApi';
 
+export const steps = [
+  {
+    title: '设备配置',
+    content: 'First-content',
+  },
+  {
+    title: '传输配置',
+    content: 'Second-content',
+  },
+];
+
 export const physicalColumn: BasicColumn[] = [
   {
     title: '功能名称',
@@ -61,6 +72,24 @@ export const step1Schemas: FormSchema[] = [
     slot: 'imageSelect',
   },
   {
+    field: 'brand',
+    component: 'ApiRadioGroup',
+    label: '设备类型',
+    required: true,
+    colProps: {
+      span: 14,
+    },
+    defaultValue: 'GATEWAY',
+    componentProps: {
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'device_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+  },
+  {
     field: 'name',
     label: '配置名称',
     required: true,

@@ -37,9 +37,13 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import type { FileItem } from '/@/components/Upload/src/typing';
 
+  const emits = defineEmits(['next']);
   const loading = ref(false);
   const { createMessage } = useMessage();
   const deviceConfigPic = ref('');
+  const props = defineProps({
+    ifShowBtn: { type: Boolean, default: true },
+  });
 
   const [register, { validate, setFieldsValue, resetFields, updateSchema }] = useForm({
     labelWidth: 100,
@@ -48,8 +52,11 @@
       span: 14,
     },
     showResetButton: false,
-    submitOnReset: false,
-    showActionButtonGroup: false,
+    showActionButtonGroup: props.ifShowBtn ? true : false,
+    submitButtonOptions: {
+      text: '下一步',
+    },
+    submitFunc: customSubmitFunc,
   });
   const editOrAddNameStatus = (nameStatus) =>
     updateSchema({
@@ -83,6 +90,11 @@
     }
     return isJpgOrPng && isLt2M;
   };
+  async function customSubmitFunc() {
+    const values = await validate();
+    if (!values) return;
+    emits('next', true, null);
+  }
   //回显数据
   const setFormData = (v) => {
     setFieldsValue(v);

 <template>
-  <div>
+  <div class="p-style">
     <BasicTable
       :rowSelection="{ type: 'checkbox' }"
       :clickToRowSelect="false"
       @register="registerTable"
     >
       <template #toolbar>
-        <div style="display: flex; justify-content: space-between; width: 773px">
-          <div>
-            <Authority value="">
-              <div style="display: flex">
-                <a-button
-                  style="margin-left: -20px"
-                  type="primary"
-                  @click="handleCreateOrEdit(null)"
-                >
-                  新增物模型
-                </a-button>
-                <a-button class="ml-2" type="primary" @click="handleOpenTsl"> 物模型TSL </a-button>
-              </div>
-            </Authority>
+        <div class="p-column">
+          <div class="p-content">
+            <a-alert
+              style="width: 420px"
+              message="当前展示的是已发布到线上的功能定义，如需修改，请点击"
+              type="info"
+              show-icon
+            />
+            <span
+              @click="handleEditPhysicalModel"
+              class="ml-2"
+              style="color: #409eff; cursor: pointer"
+              type="primary"
+              size="small"
+              >“编辑物模型”</span
+            >
           </div>
-          <div>
-            <Authority value="">
-              <div style="display: flex">
-                <a-button type="primary"> 发布上线 </a-button>
-                <a-button class="ml-2" type="text"> 返回 </a-button>
-                <Popconfirm
-                  title="您确定要批量删除数据"
-                  ok-text="确定"
-                  cancel-text="取消"
-                  @confirm="handleDeleteOrBatchDelete(null)"
-                >
+          <div style="height: 20px"></div>
+          <div class="p-bottom">
+            <div>
+              <Authority value="">
+                <div style="display: flex">
                   <a-button
-                    style="display: none"
+                    v-if="isShowBtn"
+                    style="margin-left: -20px"
                     type="primary"
-                    color="error"
-                    :disabled="hasBatchDelete"
+                    @click="handleCreateOrEdit(null)"
                   >
-                    批量删除
+                    新增物模型
                   </a-button>
-                </Popconfirm>
-              </div>
-            </Authority>
+                  <a-button
+                    :style="[isShowBtn ? { left: 0 + 'px' } : { left: -29 + 'px' }]"
+                    class="ml-2"
+                    type="primary"
+                    @click="handleOpenTsl"
+                  >
+                    物模型TSL
+                  </a-button>
+                </div>
+              </Authority>
+            </div>
+            <div>
+              <Authority value="">
+                <div style="display: flex">
+                  <Popconfirm
+                    title="是否需要发布上线？"
+                    ok-text="确定"
+                    cancel-text="取消"
+                    @confirm="handleEmit"
+                  >
+                    <a-button v-if="isShowBtn" type="primary"> 发布上线 </a-button>
+                  </Popconfirm>
+                  <a-button
+                    style="background: #d7d7d7"
+                    v-if="isShowBtn"
+                    class="ml-2"
+                    type="text"
+                    @click="handleReturn"
+                  >
+                    返回
+                  </a-button>
+                  <Popconfirm
+                    title="您确定要批量删除数据"
+                    ok-text="确定"
+                    cancel-text="取消"
+                    @confirm="handleDeleteOrBatchDelete(null)"
+                  >
+                    <a-button
+                      style="display: none"
+                      type="primary"
+                      color="error"
+                      :disabled="hasBatchDelete"
+                    >
+                      批量删除
+                    </a-button>
+                  </Popconfirm>
+                </div>
+              </Authority>
+            </div>
           </div>
         </div>
       </template>
@@ -53,18 +95,21 @@
               label: '查看',
               icon: 'ant-design:eye-outlined',
               onClick: handleViewDetail.bind(null, record),
+              ifShow: isShowBtn ? false : true,
             },
             {
               label: '编辑',
               icon: 'clarity:note-edit-line',
               auth: '',
               onClick: handleCreateOrEdit.bind(null, record),
+              ifShow: !isShowBtn ? false : true,
             },
             {
               label: '删除',
               icon: 'ant-design:delete-outlined',
               auth: '',
               color: 'error',
+              ifShow: !isShowBtn ? false : true,
               popConfirm: {
                 title: '是否确认删除',
                 confirm: handleDeleteOrBatchDelete.bind(null, record),
@@ -79,6 +124,7 @@
   </div>
 </template>
 <script lang="ts" setup>
+  import { ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { useModal } from '/@/components/Modal';
   import { physicalColumn } from '../device.profile.data';
@@ -89,8 +135,11 @@
   import PhysicalModelModal from './cpns/physical/PhysicalModelModal.vue';
   import PhysicalModelTsl from './cpns/physical/PhysicalModelTsl.vue';
   import { Popconfirm } from 'ant-design-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
 
   defineEmits(['register']);
+  const { createMessage } = useMessage();
+  const isShowBtn = ref(false);
   const [registerModal, { openModal }] = useModal();
   const [registerModalTsl, { openModal: openModalTsl }] = useModal();
 
@@ -158,10 +207,27 @@
       isUpdate: true,
     });
   };
+  const handleEditPhysicalModel = () => (isShowBtn.value = true);
+
+  const handleReturn = () => (isShowBtn.value = false);
+  const handleEmit = () => {
+    createMessage.success('发布成功');
+  };
+
   defineExpose({});
 </script>
 <style lang="less" scoped>
+  @import url('./common/PhysicalModelManagementStep.less');
+
   :deep(.ant-table-body) {
     height: auto !important;
   }
+
+  :deep(.ant-divider) {
+    margin-top: 58px;
+  }
+
+  :deep(.table-settings) {
+    margin-top: 58px;
+  }
 </style>

@@ -13,6 +13,8 @@
           ? { minHeight: 55 + 'vh' }
           : isMqttType == 'SNMP'
           ? { minHeight: 60 + 'vh' }
+          : isMqttType == 'TCP'
+          ? { minHeight: 15 + 'vh' }
           : { minHeight: 25 + 'vh' },
       ]"
     >
@@ -29,6 +31,16 @@
       <div style="margin-top: 5vh" v-else-if="isMqttType == 'SNMP'">
         <SnmpCpns ref="snmpRef" />
       </div>
+      <div style="margin-top: 5vh; margin-left: -102px" v-else-if="isMqttType == 'TCP'">
+        <TcpCpns ref="tcpRef" />
+      </div>
+      <div v-if="ifShowBtn" class="btn-style">
+        <div style="display: flex; width: 4vw; height: 4vh; margin-top: 1.65vh; margin-left: 44px">
+          <Button type="default" style="border-radius: 2px" class="mt-5" @click="customResetFunc"
+            >上一步</Button
+          >
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -36,15 +48,22 @@
   import { reactive, ref, onUnmounted, nextTick } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { step2Schemas } from '../device.profile.data';
+  import { Button } from '/@/components/Button';
   import MqttCpns from './cpns/mqtt/Mqtt.vue';
   import CoapCpns from './cpns/coap/Coap.vue';
   import Lwm2mCpns from './cpns/lwm2m/index.vue';
   import SnmpCpns from './cpns/snmp/index.vue';
+  import TcpCpns from './cpns/tcp/index.vue';
 
+  const emits = defineEmits(['prev']);
+  const props = defineProps({
+    ifShowBtn: { type: Boolean, default: true },
+  });
   const mqttRef = ref<InstanceType<typeof MqttCpns>>();
   const coapRef = ref<InstanceType<typeof CoapCpns>>();
   const lwm2mRef = ref<InstanceType<typeof Lwm2mCpns>>();
   const snmpRef = ref<InstanceType<typeof SnmpCpns>>();
+  const tcpRef = ref<InstanceType<typeof TcpCpns>>();
   const isMqttType = ref('DEFAULT');
   let step2Data = reactive({
     transportConfiguration: {},
@@ -57,7 +76,7 @@
     },
     showResetButton: false,
     submitOnReset: false,
-    showActionButtonGroup: false,
+    showActionButtonGroup: props.ifShowBtn ? true : false,
   });
   const setFormData = (v) => {
     setFieldsValue({
@@ -68,6 +87,7 @@
     coapRef.value?.setFormData(v?.profileData?.transportConfiguration);
     lwm2mRef.value?.setFormData(v?.profileData?.transportConfiguration);
     snmpRef.value?.setFormData(v?.profileData?.transportConfiguration);
+    tcpRef.value?.setFormData(v?.profileData?.transportConfiguration);
   };
 
   const resetFormData = () => {
@@ -78,8 +98,12 @@
       coapRef.value?.resetFormData();
       lwm2mRef.value?.resetFormData();
       snmpRef.value?.resetFormData();
+      tcpRef.value?.resetFormData();
     });
   };
+  async function customResetFunc() {
+    emits('prev');
+  }
   nextTick(() => {
     updateSchema({
       field: 'transportType',
@@ -91,6 +115,7 @@
             { label: 'CoAP', value: 'COAP' },
             { label: 'LWM2M', value: 'LWM2M' },
             { label: 'SNMP', value: 'SNMP' },
+            { label: 'TCP', value: 'TCP' },
           ],
           onChange(e) {
             isMqttType.value = e;
@@ -109,11 +134,13 @@
     const getCoapVal = await coapRef.value?.getFormData();
     const getLwm2mVal = await lwm2mRef.value?.getFormData();
     const getSnmpVal = await snmpRef.value?.getFormData();
+    const getTcpVal = await tcpRef.value?.getFormData();
     step2Data.transportConfiguration = {
       ...getMqttVal,
       ...getCoapVal,
       ...getLwm2mVal,
       ...getSnmpVal,
+      ...getTcpVal,
       ...val,
     };
     return step2Data;

+.p-style {
+  .p-column {
+    display: flex;
+    flex-direction: column;
+
+    .p-content {
+      display: flex;
+      align-items: center;
+      margin-left: -20px;
+    }
+
+    .p-bottom {
+      display: flex;
+      justify-content: space-between;
+      width: 773px;
+      margin-top: 0;
+    }
+  }
+}

@@ -8,32 +8,46 @@
       @ok="handleSubmit"
       @cancel="handleCancel"
     >
-      <Tabs v-model:activeKey="activeKey" :size="size">
-        <TabPane key="1" tab="属性">
-          <Attr v-show="activeKey === '1'" ref="AttrRef" />
-        </TabPane>
-        <TabPane disabled key="2" tab="服务">
-          <Service v-show="activeKey === '2'" ref="ServiceRef" />
-        </TabPane>
-        <TabPane disabled key="3" v-show="activeKey === '3'" tab="事件">
-          <Events v-show="activeKey === '3'" ref="EventsRef" />
-        </TabPane>
-      </Tabs>
+      <div v-if="isViewDetail">
+        <Attribute v-show="activeKey === '1'" ref="AttrRef" />
+      </div>
+      <div v-if="!isViewDetail">
+        <div>
+          <Typography>
+            <TypographyParagraph>
+              <blockquote style="background: #f2f2f2">{{ blockContent }}</blockquote>
+            </TypographyParagraph>
+          </Typography>
+        </div>
+        <Tabs type="card" v-model:activeKey="activeKey" :size="size">
+          <TabPane key="1" tab="属性">
+            <Attribute v-show="activeKey === '1'" ref="AttrRef" />
+          </TabPane>
+          <TabPane disabled key="2" tab="服务">
+            <Service v-show="activeKey === '2'" ref="ServiceRef" />
+          </TabPane>
+          <TabPane disabled key="3" v-show="activeKey === '3'" tab="事件">
+            <Events v-show="activeKey === '3'" ref="EventsRef" />
+          </TabPane>
+        </Tabs>
+      </div>
     </BasicModal>
   </div>
 </template>
 <script lang="ts" setup>
   import { ref, unref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { Tabs, TabPane } from 'ant-design-vue';
-  import Attr from './cpns/Attr.vue';
+  import { Tabs, TabPane, Typography, TypographyParagraph } from 'ant-design-vue';
+  import Attribute from './cpns/Attribute.vue';
   import Service from './cpns/Service.vue';
   import Events from './cpns/Events.vue';
 
   defineEmits(['register']);
+  const blockContent = `属性一般是设备的运行状态，如当前温度等；服务是设备可被调用的方法，支持定义参数，如执行某项任务；事件则是设备上报的
+通知，如告警，需要被及时处理。`;
   const activeKey = ref('1');
   const size = ref('small');
-  const AttrRef = ref<InstanceType<typeof Attr>>();
+  const AttrRef = ref<InstanceType<typeof Attribute>>();
   const ServiceRef = ref<InstanceType<typeof Service>>();
   const EventsRef = ref<InstanceType<typeof Events>>();
   const isUpdate = ref(false);

 <template>
   <div>
-    <div style="display: flex; justify-content: space-between">
+    <div>
+      <Typography>
+        <TypographyParagraph>
+          <blockquote style="background: #f2f2f2">{{ blockContent }}</blockquote>
+        </TypographyParagraph>
+      </Typography>
+    </div>
+    <div style="display: flex; justify-content: space-between; align-items: center">
       <div>模型内容</div>
       <div>
         <Button @click="handlePremitter">
@@ -29,10 +36,13 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import jsoneditor from 'jsoneditor';
   import 'jsoneditor/dist/jsoneditor.min.css';
-  import { Button } from 'ant-design-vue';
+  import { Button, Typography, TypographyParagraph } from 'ant-design-vue';
   import { defaultTslContent } from './config';
 
   const { createMessage } = useMessage();
+  const blockContent = `物模型是对设备在云端的功能描述，包括设备的属性、服务和事件。物联网平台通过定义一种物的描述语言来描述物模型，称之为 TSL（即 Thing 
+Specification Language），采用 JSON 格式，您可以根据 TSL 组装上报设备的数据。您可以导出完整物模型，用于云端应用开发；您也可以只导出
+精简物模型，配合设备端 SDK 实现设备开发。`;
   const jsonValue = ref(defaultTslContent);
   const jsonInstance = ref();
   const jsoneditorRef = ref();

+<template>
+  <div>
+    <BasicModal
+      destroyOnClose
+      v-bind="$attrs"
+      width="60rem"
+      @register="register"
+      :title="getTitle"
+      :minHeight="500"
+      @cancel="handleCancel"
+      @ok="handleSubmit"
+    >
+      <ConverScript :ifAdd="!isUpdate ? false : true" ref="converScriptRef" />
+    </BasicModal>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import ConverScript from '/@/views/scriptmanage/converscript/ConverScript.vue';
+
+  const converScriptRef = ref<InstanceType<typeof ConverScript>>();
+  const getTitle = computed(() => (isUpdate.value ? '测试脚本' : '新建脚本'));
+  const isUpdate = ref(false);
+  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ loading: true });
+    handleCancel(false);
+    isUpdate.value = data.isUpdate;
+    converScriptRef.value?.initEditor(data.record?.configuration?.jsScript);
+    setModalProps({ loading: false });
+    const title = !unref(isUpdate) ? '测试脚本' : '新建脚本';
+    const okText = !unref(isUpdate) ? '测试' : '确定';
+    setModalProps({ title, showOkBtn: true, showCancelBtn: true, okText });
+    // converScriptRef.value?.setFormData();
+  });
+  const handleSubmit = async () => {
+    const val = await converScriptRef.value?.getFormData();
+    console.log(val);
+    handleCancel(true);
+  };
+  const handleCancel = (flag) => {
+    if (flag) {
+      closeModal();
+    }
+    converScriptRef.value?.resetFormData();
+  };
+</script>
+<style lang="less" scoped>
+  @import url('/@/views/scriptmanage/converscript/ConverScriptModal.less');
+</style>

+import { FormSchema } from '/@/components/Form';
+
+export const tcpSchemas: FormSchema[] = [
+  {
+    field: 'script',
+    label: '转换脚本',
+    component: 'Input',
+    slot: 'script',
+    colProps: { span: 24 },
+  },
+];
+
+// 新增编辑配置
+export const formSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '输入参数',
+    colProps: { span: 24 },
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入输入参数',
+    },
+  },
+  {
+    field: 'scriptContent',
+    label: '脚本内容',
+    required: true,
+    component: 'Input',
+    slot: 'scriptContent',
+    colProps: { span: 24 },
+  },
+  {
+    field: 'remark',
+    label: '输出参数',
+    colProps: { span: 24 },
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 6,
+      maxLength: 255,
+      placeholder: '请输入输出参数',
+    },
+  },
+];

+<template>
+  <div>
+    <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register">
+      <template #script>
+        <div style="display: flex; align-items: center">
+          <div>
+            <Select
+              placeholder="请选择转换脚本"
+              v-model:value="selectScript.script"
+              style="width: 305px"
+              :options="selectOptions"
+              allowClear
+            />
+          </div>
+          <div>
+            <span
+              @click="handleCreateOrEdit('add')"
+              class="ml-2"
+              style="color: #409eff; cursor: pointer"
+              type="primary"
+              size="small"
+              >新建转换脚本</span
+            >
+          </div>
+        </div>
+        <a-button @click="handleCreateOrEdit('test')" class="mt-4" type="primary"
+          >测试脚本</a-button
+        >
+      </template>
+    </BasicForm>
+    <ConverScriptModal @register="registerModal" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, Ref, reactive, onMounted } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { tcpSchemas } from './config';
+  import { SelectTypes } from 'ant-design-vue/es/select';
+  import { Select } from 'ant-design-vue';
+  import { useModal } from '/@/components/Modal';
+  import ConverScriptModal from './ConverScriptModal.vue';
+
+  const selectScript = reactive({
+    script: null,
+  });
+  const selectOptions: Ref<SelectTypes['options']> = ref([
+    {
+      label: '电表转换脚本',
+      value: 1,
+    },
+    {
+      label: '水表转换脚本',
+      value: 2,
+    },
+  ]);
+  onMounted(() => {});
+
+  const [register] = useForm({
+    labelWidth: 180,
+    schemas: tcpSchemas,
+    actionColOptions: {
+      span: 14,
+    },
+  });
+  const [registerModal, { openModal }] = useModal();
+
+  // 新增或编辑
+  const handleCreateOrEdit = (c) => {
+    if (c === 'add') {
+      openModal(true, {
+        isUpdate: true,
+      });
+    } else {
+      openModal(true, {
+        isUpdate: false,
+      });
+    }
+  };
+
+  const getFormData = () => {
+    return selectScript;
+  };
+  const resetFormData = () => {
+    selectScript.script = null;
+  };
+  const setFormData = (v) => {
+    selectScript.script = v;
+  };
+  defineExpose({
+    getFormData,
+    resetFormData,
+    setFormData,
+  });
+</script>
+<style lang="less" scoped></style>

 <template>
   <div>
-    <BasicForm @register="registerForm">
-      <template #scriptContent>
+    <a-form
+      ref="formRef"
+      :model="scriptForm"
+      name="basic"
+      :label-col="{ span: 3 }"
+      :wrapper-col="{ span: 17 }"
+      autocomplete="off"
+    >
+      <a-form-item
+        :label="ifAdd ? '名称' : '输入参数'"
+        :name="ifAdd ? 'scriptName' : 'inputParams'"
+        :rules="[{ required: true, message: ifAdd ? '请输入脚本名称' : '请输入参数' }]"
+      >
+        <a-input v-if="ifAdd" v-model:value="scriptForm.scriptName" placeholder="请输入脚本名称" />
+        <a-input v-else v-model:value="scriptForm.inputParams" placeholder="请输入参数" />
+      </a-form-item>
+      <a-form-item
+        label="脚本内容"
+        name="scriptContent"
+        :rules="[{ required: true, message: '请输入脚本内容' }]"
+      >
         <Card title="脚本内容" :bodyStyle="{ padding: 0, height: '280px' }">
+          <template #extra>
+            <a-button @click="handleFormat" size="small">格式化</a-button>
+          </template>
           <div ref="aceRef" class="overflow-hidden"></div>
         </Card>
         <Button @click="handleCopy" class="mt-4">
@@ -11,14 +33,29 @@
           </template>
           copy
         </Button>
-      </template>
-    </BasicForm>
+      </a-form-item>
+      <a-form-item
+        :label="ifAdd ? '备注' : '输出参数'"
+        :name="ifAdd ? 'scriptRemark' : 'outputParams'"
+      >
+        <a-textarea
+          :rows="5"
+          v-if="ifAdd"
+          v-model:value="scriptForm.scriptRemark"
+          placeholder="请输入备注"
+        />
+        <a-textarea
+          :rows="5"
+          v-else
+          v-model:value="scriptForm.outputParams"
+          placeholder="请输入输出参数"
+        />
+      </a-form-item>
+    </a-form>
   </div>
 </template>
 <script setup lang="ts">
-  import { ref, unref } from 'vue';
-  import { formSchema } from './config.data';
-  import { BasicForm, useForm } from '/@/components/Form';
+  import { ref, unref, reactive } from 'vue';
   import ace from 'ace-builds';
   import { Card, Button } from 'ant-design-vue';
   import 'ace-builds/src-noconflict/theme-chrome'; // 默认设置的主题
@@ -29,15 +66,20 @@
   import { useMessage } from '/@/hooks/web/useMessage';
 
   defineEmits(['register']);
+  defineProps({
+    ifAdd: { type: Boolean, default: true },
+  });
+  const scriptForm = reactive({
+    scriptName: '',
+    scriptRemark: '',
+    scriptContent: '',
+    inputParams: '',
+    outputParams: '',
+  });
   const { createMessage } = useMessage();
   const { clipboardRef, copiedRef } = useCopyToClipboard();
   const aceEditor = ref();
   const aceRef = ref();
-  const [registerForm, { validate, resetFields }] = useForm({
-    labelWidth: 120,
-    schemas: formSchema,
-    showActionButtonGroup: false,
-  });
   // 初始化编辑器
   const initEditor = (jsScript?: string) => {
     aceEditor.value = ace.edit(aceRef.value, {
@@ -64,6 +106,7 @@
       }`
     );
     beautify(aceEditor.value.session);
+    scriptForm.scriptContent = aceEditor.value.getValue();
   };
   const handleCopy = () => {
     const valueRef = aceEditor.value.getValue();
@@ -77,19 +120,29 @@
       createMessage.success('复制成功！');
     }
   };
+  const formRef = ref();
   const getFormData = async () => {
-    const value = await validate();
+    const value = await formRef.value.validateFields();
     if (!value) return;
     return value;
   };
+  const setFormData = (v) => {
+    for (let i in scriptForm) {
+      Reflect.set(scriptForm, i, v[i]);
+    }
+  };
   const resetFormData = () => {
-    resetFields();
+    for (let i in scriptForm) {
+      Reflect.set(scriptForm, i, '');
+    }
   };
+  const handleFormat = () => beautify(aceEditor.value.session);
 
   defineExpose({
     initEditor,
     getFormData,
     resetFormData,
+    setFormData,
   });
 </script>
 <style lang="less" scoped>

@@ -10,7 +10,7 @@
       @cancel="handleCancel"
       @ok="handleSubmit"
     >
-      <ConverScript ref="converScriptRef" />
+      <ConverScript :ifAdd="true" ref="converScriptRef" />
     </BasicModal>
   </div>
 </template>

-/*
- * @Author: fengtao 1400859700@qq.com
- * @Date: 2022-10-12 09:29:11
- * @LastEditors: fengtao 1400859700@qq.com
- * @LastEditTime: 2022-10-13 17:28:24
- * @FilePath: \yun-teng-iot-front\src\views\scriptmanage\converscript\config.data.ts
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- */
 import { BasicColumn, FormSchema } from '/@/components/Table';
 import moment from 'moment';
 import { h } from 'vue';
@@ -76,14 +68,11 @@ export const searchFormSchema: FormSchema[] = [
 export const formSchema: FormSchema[] = [
   {
     field: 'name',
-    label: '名称',
-    colProps: { span: 24 },
+    label: '',
     required: true,
     component: 'Input',
-    componentProps: {
-      maxLength: 255,
-      placeholder: '请输入脚本名称',
-    },
+    slot: 'scriptName',
+    colProps: { span: 24 },
   },
   {
     field: 'scriptContent',
@@ -95,13 +84,10 @@ export const formSchema: FormSchema[] = [
   },
   {
     field: 'remark',
-    label: '备注',
+    label: '',
+    required: true,
+    component: 'Input',
+    slot: 'scriptRemark',
     colProps: { span: 24 },
-    component: 'InputTextArea',
-    componentProps: {
-      rows: 6,
-      maxLength: 255,
-      placeholder: '请输入备注',
-    },
   },
 ];