替换之前重构好的相关脚本管理代码

@@ -2,18 +2,17 @@
   import { Button, Tag } from 'ant-design-vue';
   import { h, onMounted, ref, unref, Ref } from 'vue';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
-  // import { ScriptRecord } from '/@/api/scriptmanage/model/scriptModel';
   import { getScriptManageMeList } from '/@/api/scriptmanage/scriptManager';
   import { Description, useDescription } from '/@/components/Description';
   import { useModal } from '/@/components/Modal';
-  import CoverScriptModal from '/@/views/rule/script/TcpConversionScript/ConverScriptModal.vue';
+  import { ConverScriptModal } from '/@/views/rule/script/TcpConversionScript/components';
   import { SelectTypes } from 'ant-design-vue/es/select';
+  import { BusinessConvertScriptTextEnum } from '/@/views/rule/script/TcpConversionScript/config';
 
   const props = defineProps<{
     record: DeviceRecord['profileData']['transportConfiguration'];
   }>();
 
-  // const scriptInfo = ref<ScriptRecord>({} as unknown as ScriptRecord);
   const authScriptIdStr = ref('');
 
   const upScriptIdStr = ref('');
@@ -87,29 +86,25 @@
   const [registerModal, { openModal }] = useModal();
 
   const handleTestAuthScript = () => {
-    openModal(true, {
-      isUpdate: false,
-      isTest: true,
-      record: unref(authScriptIdStr),
-      isText: 'test',
-      isTitle: 'test',
-    });
+    const modalParams = {
+      text: BusinessConvertScriptTextEnum.BUSINESS_TEST_TEXT,
+      record: { id: unref(authScriptIdStr) },
+    };
+    openModal(true, modalParams);
   };
 
   const handleTestUpScript = () => {
-    openModal(true, {
-      isUpdate: false,
-      isTest: true,
-      record: unref(upScriptIdStr),
-      isText: 'test',
-      isTitle: 'test',
-    });
+    const modalParams = {
+      text: BusinessConvertScriptTextEnum.BUSINESS_TEST_TEXT,
+      record: { id: unref(upScriptIdStr) },
+    };
+    openModal(true, modalParams);
   };
 </script>
 
 <template>
   <section>
     <Description @register="register" />
-    <CoverScriptModal @register="registerModal" />
+    <ConverScriptModal @register="registerModal" />
   </section>
 </template>

+<template>
+  <div class="flex">
+    <div>
+      <Select
+        v-bind="$attrs"
+        placeholder="请选择脚本"
+        @change="handleChange"
+        v-model:value="scriptId"
+        style="width: 305px"
+        show-search
+        :options="selectOptions"
+        :filter-option="handleSearch"
+        allowClear
+      />
+    </div>
+    <div>
+      <span
+        @click="handleBusinessModal(BusinessConvertScriptTextEnum.BUSINESS_ADD_TEXT)"
+        class="ml-2"
+        style="color: #409eff; cursor: pointer"
+        size="small"
+        >新建转换脚本</span
+      >
+    </div>
+  </div>
+  <a-button
+    @click="handleBusinessModal(BusinessConvertScriptTextEnum.BUSINESS_TEST_TEXT)"
+    class="mt-4"
+    type="primary"
+    >测试脚本</a-button
+  >
+  <ConverScriptModal @register="registerModal" @success="handleSuccess" />
+</template>
+<script lang="ts" setup name="ScriptSelectItem">
+  import { ref, Ref, onMounted } from 'vue';
+  import { SelectTypes } from 'ant-design-vue/es/select';
+  import { Select } from 'ant-design-vue';
+  import {
+    BusinessConvertScriptTextEnum,
+    ScriptTypeEnum,
+  } from '/@/views/rule/script/TcpConversionScript/config';
+  import { getScriptManageMeList } from '/@/api/scriptmanage/scriptManager';
+  import { useModal } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { ConverScriptModal } from '/@/views/rule/script/TcpConversionScript/components';
+
+  const props = defineProps({
+    scriptType: {
+      type: String,
+      default: ScriptTypeEnum.TRANSPORT_TCP_AUTH,
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  });
+
+  const emits = defineEmits(['update:modelValue', 'change']);
+
+  const { createMessage } = useMessage();
+
+  const selectOptions: Ref<SelectTypes['options']> = ref([]);
+
+  //如果是空字符串，placeholder没提示文字
+  const scriptId = ref<any>(null);
+
+  onMounted(() => {
+    getSelectOptions();
+  });
+
+  const getSelectOptions = async () => {
+    selectOptions.value = await getAllScriptType(props.scriptType);
+  };
+
+  const getAllScriptType = async (type) => {
+    const rest = await getScriptManageMeList({ scriptType: type });
+    return rest.map((m) => ({ label: m.name, value: m.id }));
+  };
+
+  const handleSearch = (inputValue: string, option: Record<'label' | 'value', string>) => {
+    return option.label.includes(inputValue);
+  };
+
+  const [registerModal, { openModal }] = useModal();
+
+  // 业务弹窗
+  const handleBusinessModal = (text) => {
+    const modalParams = {
+      text,
+      record:
+        text !== BusinessConvertScriptTextEnum.BUSINESS_ADD_TEXT ? { id: scriptId.value } : null,
+      scriptType: props.scriptType,
+    };
+    if (!scriptId.value) return createMessage.error('请先选择对应脚本');
+    openModal(true, modalParams);
+  };
+
+  const handleSuccess = () => {
+    getSelectOptions();
+  };
+
+  const handleChange = (value) => {
+    emits('update:modelValue', value);
+    emits('change', value);
+  };
+
+  const setValue = (value) => {
+    scriptId.value = value;
+  };
+  defineExpose({
+    setValue,
+  });
+</script>

+import ScriptSelectItem from './ScriptSelectItem.vue';
+
+export { ScriptSelectItem };

-import { FormSchema } from '/@/components/Form';
-
-export const tcpSchemas: FormSchema[] = [
-  {
-    field: 'authScriptId',
-    label: '鉴权脚本',
-    component: 'Input',
-    slot: 'authScriptId',
-    colProps: { span: 24 },
-    required: true,
-  },
-  {
-    field: 'upScriptId',
-    label: '上行脚本',
-    component: 'Input',
-    slot: 'upScriptId',
-    colProps: { span: 24 },
-    required: true,
-  },
-];
-
-// 新增编辑配置
-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>
-    <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>
+<template>
+  <div>
+    <a-form
+      ref="formRef"
+      :model="scriptForm"
+      name="basic"
+      :label-col="{ span: 4 }"
+      :wrapper-col="{ span: 16 }"
+      autocomplete="off"
+      style="margin-left: 2.4rem"
+    >
+      <a-form-item
+        v-if="deviceTypeStr !== TypeEnum.SENSOR"
+        label="鉴权脚本"
+        name="authScriptId"
+        :rules="[{ required: true, message: '请选择鉴权脚本' }]"
+      >
+        <ScriptSelectItem
+          ref="scriptSelectItemAuthRef"
+          v-model:value="scriptForm.authScriptId"
+          :scriptType="ScriptTypeEnum.TRANSPORT_TCP_AUTH"
+        />
+      </a-form-item>
+      <a-form-item
+        label="上行脚本"
+        name="upScriptId"
+        :rules="[{ required: true, message: '请选择上行脚本' }]"
+      >
+        <ScriptSelectItem
+          ref="scriptSelectItemUpRef"
+          v-model:value="scriptForm.upScriptId"
+          :scriptType="ScriptTypeEnum.TRANSPORT_TCP_UP"
+        />
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+<script lang="ts" setup name="index">
+  import { reactive, ref } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { ScriptSelectItem } from './components';
+  import { ScriptTypeEnum } from '/@/views/rule/script/TcpConversionScript/config';
+  import { TypeEnum } from '/@/views/device/list/config/data';
+
+  const props = defineProps({
+    deviceTypeStr: { type: String, default: '' },
+  });
+
+  const scriptForm = reactive({
+    authScriptId: '',
+    upScriptId: '',
+  });
+
+  const { createMessage } = useMessage();
+
+  const scriptSelectItemAuthRef = ref<InstanceType<typeof ScriptSelectItem>>();
+
+  const scriptSelectItemUpRef = ref<InstanceType<typeof ScriptSelectItem>>();
+
+  const getFormData = async () => {
+    //业务 网关子设备没有鉴权脚本
+    if (props.deviceTypeStr === TypeEnum.SENSOR) Reflect.deleteProperty(scriptForm, 'authScriptId');
+    if (Object.values(scriptForm).some((item) => !item)) {
+      createMessage.error('请先选择对应脚本');
+      throw new Error('请先选择对应脚本');
+    }
+    return {
+      ...scriptForm,
+      type: 'TCP',
+    };
+  };
+
+  const resetFormData = () => {};
+
+  const setFormData = (data) => {
+    scriptForm.authScriptId = data?.authScriptId;
+    scriptForm.upScriptId = data?.upScriptId;
+    scriptSelectItemAuthRef.value?.setValue(data?.authScriptId);
+    scriptSelectItemUpRef.value?.setValue(data?.upScriptId);
+  };
+  defineExpose({
+    getFormData,
+    resetFormData,
+    setFormData,
+  });
+</script>
+<style lang="less" scoped></style>

-.wrapper {
-  margin: 10px 60px 60px 60px;
-}
-
-.inner {
-  width: 400px;
-  height: 400px;
-}
-
-.item {
-  text-align: center;
-  font-size: 200%;
-  color: #fff;
-}

-<template>
-  <div>
-    <BasicModal
-      destroyOnClose
-      v-bind="$attrs"
-      width="60rem"
-      @register="register"
-      :title="getTitle"
-      :minHeight="500"
-      @cancel="handleCancel"
-      @ok="handleSubmit"
-    >
-      <ConverScript
-        :view="isViewDetail"
-        :text="isTitle"
-        :ifAdd="isTest ? false : true"
-        ref="converScriptRef"
-      />
-    </BasicModal>
-  </div>
-</template>
-<script setup lang="ts">
-  import { ref, computed, unref, reactive } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import ConverScript from './ConverScript.vue';
-  import {
-    createOrEditScriptManage,
-    getScriptManageDetail,
-    testScriptManage,
-  } from '/@/api/scriptmanage/scriptManager';
-  import { useMessage } from '/@/hooks/web/useMessage';
-
-  const emits = defineEmits(['success', 'register']);
-  const { createMessage } = useMessage();
-  const converScriptRef = ref<InstanceType<typeof ConverScript>>();
-  const getTitle = computed(() => (isUpdate.value ? '编辑转换脚本' : '新增转换脚本'));
-  const isUpdate = ref(false);
-  const isViewDetail = ref('');
-  const isTest = ref(false);
-  const isText = ref('');
-  const isTitle = ref('');
-  const editData = reactive({
-    data: {},
-  });
-  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
-    setModalProps({ loading: true });
-    handleCancel(false);
-    isUpdate.value = data.isUpdate;
-    isViewDetail.value = data.isView;
-    isTest.value = data.isTest;
-    isText.value = data.isText;
-    isTitle.value = data.isTitle;
-    editData.data = data.record;
-    setModalProps({ loading: false });
-    converScriptRef.value?.initEditor();
-    if (!unref(isViewDetail)) {
-      const title =
-        unref(isTitle) == 'edit'
-          ? '编辑转换脚本'
-          : unref(isTitle) == 'add'
-          ? '新增转换脚本'
-          : '测试转换脚本';
-      const okText = isText.value == 'test' ? '测试' : '确定';
-      if (unref(isTitle) == 'add') {
-        converScriptRef.value?.setDefaultRadio('TRANSPORT_TCP_UP');
-      }
-      if (unref(isTitle) == 'edit') {
-        converScriptRef.value?.setFormData(data.record);
-      }
-      if (unref(isTitle) == 'test') {
-        if (data.record) {
-          const res = await getScriptManageDetail(data.record);
-          converScriptRef.value?.setFormData(res);
-        } else {
-          converScriptRef.value?.setDefaultRadio('TRANSPORT_TCP_UP');
-        }
-      }
-      setModalProps({ title, showOkBtn: true, showCancelBtn: true, okText });
-      if (!unref(isUpdate)) {
-      }
-    } else {
-      setModalProps({ showOkBtn: false, showCancelBtn: false, title: '查看转换脚本' });
-      const res = await getScriptManageDetail(data.record.id);
-      converScriptRef.value?.setFormData(res || {});
-    }
-  });
-
-  const handleSubmit = async () => {
-    setModalProps({ confirmLoading: true });
-    try {
-      const val = await converScriptRef.value?.getFormData();
-      const tempObj = {
-        ...editData.data,
-        ...val,
-      };
-      const res: any =
-        isText.value == 'test'
-          ? await testScriptManage(val)
-          : await createOrEditScriptManage(tempObj);
-      createMessage.success(
-        unref(isTitle) == 'edit'
-          ? '编辑转换脚本成功'
-          : unref(isTitle) == 'add'
-          ? '新增转换脚本成功'
-          : '测试转换脚本成功'
-      );
-      if (unref(isTitle) == 'add' || unref(isTitle) == 'edit') {
-        setTimeout(() => {
-          closeModal();
-        }, 10);
-        emits('success', {
-          res,
-          text: isText.value,
-        });
-      } else {
-        if (res) {
-          converScriptRef.value?.setScriptOutputData(res?.output || res?.error);
-        }
-      }
-    } finally {
-      setModalProps({ confirmLoading: false });
-    }
-  };
-  const handleCancel = (flag) => {
-    if (flag) {
-      closeModal();
-    }
-    converScriptRef.value?.resetFormData();
-  };
-</script>
-<style lang="less" scoped>
-  @import url('./ConverScriptModal.less');
-</style>

-<template>
-  <div>
-    <BasicModal
-      destroyOnClose
-      v-bind="$attrs"
-      width="60rem"
-      @register="register"
-      :title="getTitle"
-      :minHeight="500"
-      @cancel="handleCancel"
-      @ok="handleSubmit"
-    >
-      <ConverScript
-        :view="isViewDetail"
-        :text="isTitle"
-        :ifAdd="isTest ? false : true"
-        ref="converScriptRef"
-      />
-    </BasicModal>
-  </div>
-</template>
-<script setup lang="ts">
-  import { ref, computed, unref, reactive } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import ConverScript from './ConverScript.vue';
-  import {
-    createOrEditScriptManage,
-    getScriptManageDetail,
-    testScriptManage,
-  } from '/@/api/scriptmanage/scriptManager';
-  import { useMessage } from '/@/hooks/web/useMessage';
-
-  const emits = defineEmits(['success', 'register']);
-  const { createMessage } = useMessage();
-  const converScriptRef = ref<InstanceType<typeof ConverScript>>();
-  const getTitle = computed(() => (isUpdate.value ? '编辑转换脚本' : '新增转换脚本'));
-  const isUpdate = ref(false);
-  const isViewDetail = ref('');
-  const isTest = ref(false);
-  const isText = ref('');
-  const isTitle = ref('');
-  const editData = reactive({
-    data: {},
-  });
-  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
-    setModalProps({ loading: true });
-    handleCancel(false);
-    isUpdate.value = data.isUpdate;
-    isViewDetail.value = data.isView;
-    isTest.value = data.isTest;
-    isText.value = data.isText;
-    isTitle.value = data.isTitle;
-    editData.data = data.record;
-    setModalProps({ loading: false });
-    converScriptRef.value?.initEditor();
-    if (!unref(isViewDetail)) {
-      const title =
-        unref(isTitle) == 'edit'
-          ? '编辑转换脚本'
-          : unref(isTitle) == 'add'
-          ? '新增转换脚本'
-          : '测试转换脚本';
-      const okText = isText.value == 'test' ? '测试' : '确定';
-      if (unref(isTitle) == 'add') {
-        converScriptRef.value?.setDefaultRadio('TRANSPORT_TCP_UP');
-      }
-      if (unref(isTitle) == 'edit') {
-        converScriptRef.value?.setFormData(data.record);
-      }
-      if (unref(isTitle) == 'test') {
-        if (data.record) {
-          const res = await getScriptManageDetail(data.record);
-          converScriptRef.value?.setFormData({ ...res, convertJs: data?.testContent });
-        } else {
-          converScriptRef.value?.setFormData({ convertJs: data?.testContent });
-          converScriptRef.value?.setDefaultRadio('TRANSPORT_TCP_UP');
-        }
-      }
-      setModalProps({ title, showOkBtn: true, showCancelBtn: true, okText });
-      if (!unref(isUpdate)) {
-      }
-    } else {
-      setModalProps({ showOkBtn: false, showCancelBtn: false, title: '查看转换脚本' });
-      const res = await getScriptManageDetail(data.record.id);
-      converScriptRef.value?.setFormData(res || {});
-    }
-  });
-
-  const handleSubmit = async () => {
-    setModalProps({ confirmLoading: true });
-    try {
-      const val = await converScriptRef.value?.getFormData();
-      const tempObj = {
-        ...editData.data,
-        ...val,
-      };
-      const res: any =
-        isText.value == 'test'
-          ? await testScriptManage(val)
-          : await createOrEditScriptManage(tempObj);
-      createMessage.success(
-        unref(isTitle) == 'edit'
-          ? '编辑转换脚本成功'
-          : unref(isTitle) == 'add'
-          ? '新增转换脚本成功'
-          : '测试转换脚本成功'
-      );
-      if (unref(isTitle) == 'add' || unref(isTitle) == 'edit') {
-        setTimeout(() => {
-          closeModal();
-        }, 10);
-        emits('success', {
-          res,
-          text: isText.value,
-        });
-      } else {
-        if (res) {
-          converScriptRef.value?.setScriptOutputData(res?.output || res?.error);
-        }
-      }
-    } finally {
-      setModalProps({ confirmLoading: false });
-    }
-  };
-  const handleCancel = (flag) => {
-    if (flag) {
-      closeModal();
-    }
-    converScriptRef.value?.resetFormData();
-  };
-</script>
-<style lang="less" scoped>
-  @import url('./ConverScriptModal.less');
-</style>

@@ -6,17 +6,16 @@
       name="basic"
       :label-col="{ span: 4 }"
       :wrapper-col="{ span: 16 }"
-      autocomplete="off"
     >
       <a-form-item
-        :label="ifAdd ? '名称' : '输入参数(params)'"
-        :name="ifAdd ? 'name' : 'params'"
-        :rules="[{ required: true, message: ifAdd ? '请输入脚本名称' : '请输入参数' }]"
+        :label="isNotTest ? '名称' : '输入参数(params)'"
+        :name="isNotTest ? 'name' : 'params'"
+        :rules="[{ required: true, message: isNotTest ? '请输入脚本名称' : '请输入参数' }]"
       >
         <a-input-group compact>
           <a-input
             style="width: calc(100% - 200px)"
-            v-if="ifAdd"
+            v-if="isNotTest"
             :maxlength="36"
             @change="handleInputChange"
             v-model:value="scriptForm.name"
@@ -28,7 +27,13 @@
             v-model:value="scriptForm.params"
             placeholder="请输入参数"
           />
-          <a-button @click="onHandleClick(text)" v-show="ifAdd && !view" type="primary">
+          <a-button
+            @click="
+              handleInnerTestClick(BusinessConvertScriptTextEnum.BUSINESS_TEST_TEXT, 'innerTest')
+            "
+            v-show="isNotTest && !isView"
+            type="primary"
+          >
             测试
           </a-button>
         </a-input-group>
@@ -46,36 +51,35 @@
           />
         </a-space>
       </a-form-item>
-      <a-form-item label="脚本内容" :name="ifAdd ? 'convertJs' : 'script'">
-        <Card title="脚本内容" :bodyStyle="{ padding: 0 }">
+      <a-form-item label="脚本内容" :name="isNotTest ? 'convertJs' : 'script'">
+        <Card title="编写脚本内容" :bodyStyle="{ padding: 0 }">
           <template #extra>
             <Button
-              v-show="ifAdd && !view"
-              @click="onHandleTestExampleGateway(scriptForm.scriptType)"
-              style="position: relative; top: -4rem; right: -6.6rem"
+              v-show="isNotTest && !isView"
+              @click="onHandleTestExample(true, scriptForm.scriptType)"
+              class="button-text"
               type="primary"
             >
               直连/子设备用例</Button
             >
             <Button
-              class="ml-2"
-              v-show="ifAdd && !view"
-              @click="onHandleTestExample(scriptForm.scriptType)"
-              style="position: relative; top: -4rem; right: -6.6rem"
+              class="ml-2 button-text"
+              v-show="isNotTest && !isView"
+              @click="onHandleTestExample(false, scriptForm.scriptType)"
               type="primary"
             >
               网关用例</Button
             >
             <a-button @click="handleFormat" size="small">格式化</a-button>
             <Tooltip
-              v-if="scriptForm.scriptType !== 'TRANSPORT_TCP_UP'"
+              v-if="scriptForm.scriptType !== ScriptTypeEnum.TRANSPORT_TCP_UP"
               :title="defaultAuthTitle"
               class="ml-2"
             >
-              <QuestionCircleOutlined style="font-size: 1rem" />
+              <QuestionCircleOutlined />
             </Tooltip>
             <Tooltip v-else :title="defaultUpTitle" class="ml-2">
-              <QuestionCircleOutlined style="font-size: 1rem" />
+              <QuestionCircleOutlined />
             </Tooltip>
           </template>
           <div ref="aceRef"></div>
@@ -88,12 +92,12 @@
         </Button>
       </a-form-item>
       <a-form-item
-        :label="ifAdd ? '备注' : '输出参数(output)'"
-        :name="ifAdd ? 'description' : 'output'"
+        :label="isNotTest ? '备注' : '输出参数(output)'"
+        :name="isNotTest ? 'description' : 'output'"
       >
         <a-textarea
           :rows="3"
-          v-if="ifAdd"
+          v-if="isNotTest"
           v-model:value="scriptForm.description"
           placeholder="请输入备注"
           :maxlength="255"
@@ -107,7 +111,7 @@
         />
       </a-form-item>
     </a-form>
-    <TestScriptModal @register="registerModal" />
+    <ConverScriptModal @register="registerModal" />
   </div>
 </template>
 <script setup lang="ts">
@@ -130,18 +134,25 @@
     defaultTestUpExample,
     defaultTestAuthExample,
     defaultTestSubGatewayUpExample,
-  } from './config.data';
+    ScriptTypeEnum,
+    aceEditorAttribtes,
+    aceEditorOptions,
+  } from '../config';
   import { useAppStore } from '/@/store/modules/app';
-  import TestScriptModal from './TestScriptModal.vue';
+  import { ConverScriptModal } from './index';
   import { useModal } from '/@/components/Modal';
+  import { useHooks } from '../hooks/index.hooks';
+  import { BusinessConvertScriptTextEnum } from '../config';
 
   defineEmits(['register']);
+
   const props = defineProps({
-    ifAdd: { type: Boolean, default: true },
-    text: { type: String, default: '' },
-    view: { type: Boolean, default: false },
+    isNotTest: { type: Boolean, default: true },
+    isView: { type: Boolean, default: false },
   });
 
+  const { validateContentError, validateContentLengthError } = useHooks();
+
   const scriptForm = reactive({
     name: '',
     description: '',
@@ -170,49 +181,42 @@
 
   const getAceClass = computed((): string => userStore.getDarkMode);
 
-  const setDefaultRadio = (p3) => {
-    scriptForm.scriptType = p3;
+  const setDefaultRadio = (defaultRadio) => {
+    scriptForm.scriptType = defaultRadio;
   };
 
   const getDictValue = async (dict_type) => {
     const res = await findDictItemByCode({
       dictCode: dict_type,
     });
-    return res.map((m) => {
-      return { label: m.itemText, value: m.itemValue };
-    });
+    return res.map((m) => ({ label: m.itemText, value: m.itemValue }));
+  };
+
+  const getScriptType = async () => {
+    reportTypeOptions.scriptTypeOptions = (await getDictValue('script_type')) as any;
   };
 
-  onMounted(async () => {
-    reportTypeOptions.scriptTypeOptions = (await getDictValue('script_type')) as never as any;
+  onMounted(() => {
+    getScriptType();
+    initEditor();
   });
 
-  // 初始化编辑器
+  // 初始化Ace编辑器
   const initEditor = () => {
-    aceEditor.value = ace.edit(aceRef.value, {
-      maxLines: 16, // 最大行数，超过会自动出现滚动条
-      minLines: 12, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
-      fontSize: 14, // 编辑器内字体大小
-      theme: 'ace/theme/chrome', // 默认设置的主题
-      mode: 'ace/mode/javascript', // 默认设置的语言模式
-      tabSize: 2, // 制表符设置为 4 个空格大小
-    });
-
+    aceEditor.value = ace.edit(aceRef.value, aceEditorAttribtes);
     aceEditor.value.setOptions({
-      enableBasicAutocompletion: true,
-      enableLiveAutocompletion: true,
-      enableSnippets: true,
-      enableEmmet: true,
+      ...aceEditorOptions,
       theme: getAceClass.value === 'dark' ? 'ace/theme/terminal' : 'ace/theme/chrome',
     });
     aceEditor.value.setValue('');
     beautify(aceEditor.value.session);
-    switchScriptTypeGetContent('TRANSPORT_TCP_UP');
+    switchScriptTypeGetContent(ScriptTypeEnum.TRANSPORT_TCP_UP);
   };
 
   const handleScriptType = ({ target }) => {
     const { value } = target;
     scriptForm.scriptType = value;
+    //业务 编辑不允许切换
     if (convertJsContent.value) return;
     switchScriptTypeGetContent(value);
   };
@@ -221,23 +225,17 @@
     aceEditor.value.setValue(defaultScriptTypeContent[type]);
   };
 
-  const onHandleTestExample = (example) => {
-    if (example === 'TRANSPORT_TCP_UP') {
-      aceEditor.value?.setValue(defaultTestUpExample);
-    } else {
-      aceEditor.value?.setValue(defaultTestAuthExample);
-    }
-    handleFormat();
-  };
-
-  const onHandleTestExampleGateway = (example) => {
-    if (example === 'TRANSPORT_TCP_UP') {
+  const onHandleTestExample = (status, example) => {
+    if (status && example === ScriptTypeEnum.TRANSPORT_TCP_UP) {
       aceEditor.value?.setValue(defaultTestSubGatewayUpExample);
     } else {
-      aceEditor.value?.setValue(defaultTestAuthExample);
+      example === ScriptTypeEnum.TRANSPORT_TCP_UP
+        ? aceEditor.value?.setValue(defaultTestUpExample)
+        : aceEditor.value?.setValue(defaultTestAuthExample);
     }
     handleFormat();
   };
+
   const handleCopy = () => {
     const valueRef = aceEditor.value.getValue();
     const value = unref(valueRef);
@@ -255,61 +253,41 @@
 
   const getFormData = async () => {
     const value = await formRef.value.validateFields();
-    if (props.ifAdd) {
+    if (props.isNotTest) {
       scriptForm.convertJs = aceEditor.value.getValue();
-      if (scriptForm.convertJs == '') {
-        createMessage.error('请编写脚本内容');
-        throw '请编写脚本内容';
-      }
+      if (scriptForm.convertJs == '') return validateContentError();
     } else {
       scriptForm.script = aceEditor.value.getValue();
-      if (scriptForm.script == '') {
-        createMessage.error('请编写脚本内容');
-        throw '请编写脚本内容';
-      }
+      if (scriptForm.script == '') return validateContentError();
     }
     if (!value) return;
-    if (scriptForm.params) {
-      const trimParams = scriptForm.params.replace(/\s*/g, '');
-      Reflect.set(value, 'params', trimParams);
-    }
-    if (scriptForm.convertJs.length > 1000) {
-      createMessage.error('脚本内容长度不能大于1000');
-      throw '脚本内容长度不能大于1000';
-    }
+    if (scriptForm.params) removeTrim(true, scriptForm.params);
+    if (scriptForm.convertJs.length > 1000) return validateContentLengthError();
     return {
       ...value,
-      ...{ convertJs: props.ifAdd ? scriptForm.convertJs : null },
-      ...{ script: !props.ifAdd ? scriptForm.script : null },
+      ...{ convertJs: props.isNotTest ? scriptForm.convertJs : null },
+      ...{ script: !props.isNotTest ? scriptForm.script : null },
     };
   };
 
-  const handleInputChange = (e) => {
-    const trimParams = e.target.value.replace(/\s*/g, '');
+  const removeTrim = (status, e) => {
+    //去除空格
+    const value = status ? e : e.target.value;
+    const trimParams = value.replace(/\s*/g, '');
     Reflect.set(scriptForm, 'params', trimParams);
-    if (scriptForm.scriptType === 'TRANSPORT_TCP_DOWN') {
-      aceEditor.value.setValue(`out.datas = "${scriptForm.params}";out.deviceName = "sensor";`);
-    }
   };
 
-  const getRecordId = ref('');
+  const handleInputChange = (e) => removeTrim(false, e);
 
   const convertJsContent = ref('');
 
   const setFormData = (v) => {
-    if (v) {
-      getRecordId.value = v?.id;
-      for (let i in scriptForm) {
-        Reflect.set(scriptForm, i, v[i]);
-      }
-      aceEditor.value.setValue(v.convertJs);
-      convertJsContent.value = v.convertJs;
-      handleFormat();
+    if (!v) return;
+    for (let i in scriptForm) {
+      Reflect.set(scriptForm, i, v[i]);
     }
-  };
-
-  const setScriptContentData = (v) => {
-    aceEditor.value.setValue(v);
+    aceEditor.value.setValue(v.convertJs);
+    convertJsContent.value = v.convertJs;
     handleFormat();
   };
 
@@ -317,6 +295,7 @@
     for (let i in scriptForm) {
       Reflect.set(scriptForm, i, '');
     }
+    setDefaultRadio(ScriptTypeEnum.TRANSPORT_TCP_UP);
   };
 
   const setScriptOutputData = (v) => {
@@ -332,29 +311,39 @@
 
   const [registerModal, { openModal }] = useModal();
 
-  const onHandleClick = (o) => {
+  const handleInnerTestClick = (text, innerTest) => {
     const getTestContent = aceEditor.value?.getValue();
-    openModal(true, {
-      isAuth: '',
-      isUpdate: o,
-      record: o === 'add' ? null : getRecordId.value,
-      testContent: getTestContent,
-      isTest: true,
-      isText: 'test',
-      isTitle: 'test',
+    const modalParams = {
+      innerTest,
+      text,
+      record: {
+        convertJs: getTestContent,
+        scriptType: scriptForm.scriptType,
+      },
+    };
+    openModal(true, modalParams);
+  };
+
+  const setDisableRadio = (value) => {
+    reportTypeOptions.scriptTypeOptions.forEach((item: any) => {
+      if (item.value === value) item.disabled = false;
+      else item.disabled = true;
     });
   };
 
   defineExpose({
-    initEditor,
     getFormData,
     resetFormData,
     setFormData,
-    setScriptContentData,
     setScriptOutputData,
     setDefaultRadio,
+    setDisableRadio,
   });
 </script>
 <style lang="less" scoped>
-  @import url('./ConverScriptModal.less');
+  .button-text {
+    position: relative;
+    top: -4rem;
+    right: -6.6rem;
+  }
 </style>

+<template>
+  <div>
+    <BasicModal
+      destroyOnClose
+      v-bind="$attrs"
+      width="60rem"
+      @register="register"
+      :minHeight="500"
+      @cancel="handleCancel"
+      @ok="handleSubmit"
+    >
+      <ConverScriptForm
+        ref="converScriptFormRef"
+        :isNotTest="businessText !== BusinessConvertScriptTextEnum.BUSINESS_TEST_TEXT"
+        :isView="businessText === BusinessConvertScriptTextEnum.BUSINESS_VIEW_TEXT"
+      />
+    </BasicModal>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, nextTick, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { ConverScriptForm } from './index';
+  import {
+    createOrEditScriptManage,
+    getScriptManageDetail,
+    testScriptManage,
+  } from '/@/api/scriptmanage/scriptManager';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { BusinessConvertScriptTextEnum } from '../config';
+  import { useHooks } from '../hooks/index.hooks';
+  import { useThrottleFn } from '@vueuse/shared';
+
+  const emits = defineEmits(['success', 'register']);
+
+  const { createMessage } = useMessage();
+
+  const { setPropsForModal, businessTextIsTest } = useHooks();
+
+  const converScriptFormRef = ref<InstanceType<typeof ConverScriptForm>>();
+
+  const businessText = ref('');
+
+  const restData = reactive({
+    data: {},
+  });
+
+  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    try {
+      await nextTick();
+      businessText.value = data.text;
+      restData.data = data.record;
+      setModalProps(setPropsForModal(data.text));
+      handleCancel(false);
+      if (!data.record) return;
+      if (!data.innerTest) {
+        const rest = await getScriptManageDetail(data.record?.id);
+        converScriptFormRef.value?.setFormData(rest);
+      } else converScriptFormRef.value?.setFormData(data.record);
+      if (data.scriptType) {
+        converScriptFormRef.value?.setDisableRadio(data.scriptType);
+      }
+    } finally {
+      setModalProps({
+        loading: false,
+      });
+    }
+  });
+
+  const handleSubmit = () => useThrottle();
+
+  const useThrottle = useThrottleFn(() => {
+    getValue();
+  }, 2000);
+
+  const getValue = async () => {
+    try {
+      setModalProps({ confirmLoading: true });
+      const formData = await converScriptFormRef.value?.getFormData();
+      const rest = businessTextIsTest(businessText.value)
+        ? ((await testScriptManage(formData)) as any)
+        : ((await createOrEditScriptManage({ ...restData.data, ...formData })) as any);
+      if (businessTextIsTest(businessText.value)) {
+        createMessage.success(`${businessText.value}成功`);
+        converScriptFormRef.value?.setScriptOutputData(rest?.output || rest?.error);
+      } else {
+        createMessage.success(`${businessText.value}成功`);
+        closeModal();
+        emits('success', {
+          rest,
+          text: businessText.value,
+        });
+      }
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  };
+
+  const handleCancel = (flag) => {
+    if (flag) {
+      closeModal();
+    }
+    converScriptFormRef.value?.resetFormData();
+  };
+</script>
+<style lang="less" scoped></style>

+import ConverScriptModal from './ConverScriptModal.vue';
+import ConverScriptForm from './ConverScriptForm.vue';
+
+export { ConverScriptModal, ConverScriptForm };

-import { BasicColumn, FormSchema } from '/@/components/Table';
+import { BasicColumn, BasicTableProps, FormSchema } from '/@/components/Table';
 import moment from 'moment';
 import { h } from 'vue';
 
+//业务权限配置
+export enum PermissionConvertScriptEnum {
+  PERMISSION_POST = 'api:yt:js:post',
+  PERMISSION_DELETE = 'api:yt:js:delete',
+  PERMISSION_TEST = 'api:yt:js:test',
+  PERMISSION_UPDATE = 'api:yt:js:update',
+  PERMISSION_UPDATE_STATUS = 'api:yt:js:update:status',
+}
+
+//业务文字描述配置
+export enum BusinessConvertScriptTextEnum {
+  BUSINESS_ENABLE_SUCCESS = '启用成功',
+  BUSINESS_DISABLE_SUCCESS = '禁用成功',
+  BUSINESS_ADD_TEXT = '新增转换脚本',
+  BUSINESS_DELETE_TEXT = '批量删除',
+  BUSINESS_VIEW_TEXT = '查看转换脚本',
+  BUSINESS_TEST_TEXT = '测试转换脚本',
+  BUSINESS_EDIT_TEXT = '编辑转换脚本',
+  BUSINESS_SUBMIT_TEXT = '确定',
+}
+
+//业务脚本类型枚举
+export enum ScriptTypeEnum {
+  //上行脚本
+  TRANSPORT_TCP_UP = 'TRANSPORT_TCP_UP',
+  //设备鉴权
+  TRANSPORT_TCP_AUTH = 'TRANSPORT_TCP_AUTH',
+}
+
+//Ace编辑器通用配置
+export const aceEditorAttribtes = {
+  maxLines: 16, // 最大行数，超过会自动出现滚动条
+  minLines: 12, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
+  fontSize: 14, // 编辑器内字体大小
+  theme: 'ace/theme/chrome', // 默认设置的主题
+  mode: 'ace/mode/javascript', // 默认设置的语言模式
+  tabSize: 2, // 制表符设置为 4 个空格大小
+};
+
+export const aceEditorOptions = {
+  enableBasicAutocompletion: true,
+  enableLiveAutocompletion: true,
+  enableSnippets: true,
+  enableEmmet: true,
+};
+
 // 表格配置
 export const columns: BasicColumn[] = [
   {
@@ -33,7 +79,26 @@ export const columns: BasicColumn[] = [
   },
 ];
 
-// 查询配置
+//表格通用属性配置
+export const defaultTableAttribtes: BasicTableProps = {
+  columns,
+  title: '转换脚本列表',
+  showIndexColumn: false,
+  clickToRowSelect: false,
+  useSearchForm: true,
+  showTableSetting: true,
+  bordered: true,
+  rowKey: 'id',
+  actionColumn: {
+    width: 200,
+    title: '操作',
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+    fixed: 'right',
+  },
+};
+
+// 表格查询配置
 export const searchFormSchema: FormSchema[] = [
   {
     field: 'name',
@@ -58,6 +123,7 @@ export const searchFormSchema: FormSchema[] = [
   },
 ];
 
+//示例配置
 export const defaultAuthTitle = h('div', { style: 'background:#404040' }, [
   h('h3', { style: 'color:white' }, '设备鉴权示例'),
   h('h3', { style: 'color:white' }, '输入参数：为16进制字符串'),
@@ -84,7 +150,7 @@ export const defaultUpTitle = h('div', { style: 'background:#404040' }, [
   ),
 ]);
 
-// TRANSPORT_TCP_DOWN: 'out.datas = "";out.deviceName = "sensor";',
+//用例配置
 export const defaultScriptTypeContent = {
   TRANSPORT_TCP_UP: `/*网关上行脚本*/
 var teleData = {};
@@ -104,21 +170,9 @@ out.success = params;
   `,
 };
 
-export const defaultTestUpExample = `/*网关上行脚本*/
-var teleData = {};
-/*物模型数据(可选)：原始数据*/
-teleData.source= params;
-/*网关设备：slaveDevice是网关子设备的“设备标识”*/
-slaveDevice = params.substr(0,2);
-teleData[slaveDevice]= params;
-out.datas = teleData;
-out.telemetry = true;/*必填：true表示设备上报的遥测数据，false表示命令下发的响应数据*/`;
+export const defaultTestUpExample = defaultScriptTypeContent['TRANSPORT_TCP_UP'];
 
-export const defaultTestAuthExample = `/*必填：设备的访问令牌*/
-out.password = params;
-/*选填：设备鉴权成功后响应给设备的信息*/
-out.success = params;
-`;
+export const defaultTestAuthExample = defaultScriptTypeContent['TRANSPORT_TCP_AUTH'];
 
 export const defaultTestSubGatewayUpExample = `/*params为TCP上报的标准ModBus数据,实际使用或测试时请删除*/
 var params = "010304026C00883BF0"

+import { BusinessConvertScriptTextEnum } from '../config';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+export const useHooks = () => {
+  const { createMessage } = useMessage();
+
+  //映射弹窗底部按钮文字
+  const getModalButtonText = (text) => {
+    return text === BusinessConvertScriptTextEnum.BUSINESS_TEST_TEXT
+      ? BusinessConvertScriptTextEnum.BUSINESS_TEST_TEXT.slice(0, 2)
+      : BusinessConvertScriptTextEnum.BUSINESS_SUBMIT_TEXT;
+  };
+
+  //判断业务文字是否为测试
+  const businessTextIsTest = (text) => text === BusinessConvertScriptTextEnum.BUSINESS_TEST_TEXT;
+
+  //验证脚本内容
+  const validateContentError = () => {
+    createMessage.error('请编写脚本内容');
+    throw '请编写脚本内容';
+  };
+
+  const validateContentLengthError = () => {
+    createMessage.error('请编写脚本内容');
+    throw '请编写脚本内容';
+  };
+
+  //Modal弹窗属性
+  const setPropsForModal = (text) => {
+    return {
+      loading: true,
+      title: text,
+      okText: getModalButtonText(text),
+      showOkBtn: text !== BusinessConvertScriptTextEnum.BUSINESS_VIEW_TEXT,
+      showCancelBtn: text !== BusinessConvertScriptTextEnum.BUSINESS_VIEW_TEXT,
+    };
+  };
+  return {
+    getModalButtonText,
+    businessTextIsTest,
+    validateContentError,
+    validateContentLengthError,
+    setPropsForModal,
+  };
+};

-export { default as TcpConversionScript } from './index.vue';
+export { default as TcpConversionScript } from './index.vue';

-<template>
-  <div>
-    <BasicTable :clickToRowSelect="false" @register="registerTable" :searchInfo="searchInfo">
-      <template #toolbar>
-        <Authority value="api:yt:js:post">
-          <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增转换脚本 </a-button>
-        </Authority>
-        <Authority value="api:yt:js:delete">
-          <Popconfirm
-            title="您确定要批量删除数据"
-            ok-text="确定"
-            cancel-text="取消"
-            @confirm="handleDeleteOrBatchDelete(null)"
-          >
-            <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
-          </Popconfirm>
-        </Authority>
-      </template>
-      <template #convertJs="{ record }">
-        <a-button type="text" @click="handleScriptView(record)">
-          <span style="color: #377dff">查看脚本</span>
-        </a-button>
-      </template>
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              label: '测试',
-              icon: 'ant-design:font-size-outlined',
-              auth: 'api:yt:js:test',
-              onClick: handleBindTest.bind(null, record),
-            },
-            {
-              label: '编辑',
-              icon: 'clarity:note-edit-line',
-              auth: 'api:yt:js:update',
-              onClick: handleCreateOrEdit.bind(null, record),
-              ifShow: record.status == 0,
-            },
-            {
-              label: '删除',
-              icon: 'ant-design:delete-outlined',
-              auth: 'api:yt:js:delete',
-              color: 'error',
-              ifShow: record.status == 0,
-              popConfirm: {
-                title: '是否确认删除',
-                confirm: handleDeleteOrBatchDelete.bind(null, record),
-              },
-            },
-          ]"
-        />
-      </template>
-      <template #status="{ record }">
-        <Authority value="api:yt:js:update:status">
-          <Switch
-            :checked="record.status === 1"
-            :loading="record.pendingStatus"
-            checkedChildren="启用"
-            unCheckedChildren="禁用"
-            @change="(checked:boolean)=>statusChange(checked,record)"
-          />
-        </Authority>
-      </template>
-    </BasicTable>
-    <ConverScriptModal @register="registerModal" @success="handleSuccess" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { reactive, nextTick, unref } from 'vue';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { columns } from './config.data';
-  import { Authority } from '/@/components/Authority';
-  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-  import { Switch, Popconfirm } from 'ant-design-vue';
-  import { useModal } from '/@/components/Modal';
-  import ConverScriptModal from './ConverScriptModal.vue';
-  import {
-    ScriptPage,
-    deleteScriptManage,
-    scriptPagePutApi,
-  } from '/@/api/scriptmanage/scriptManager';
-  import { useMessage } from '/@/hooks/web/useMessage';
-
-  const props = defineProps<{ searchInfo: Recordable }>();
-  const searchInfo = reactive<Recordable>({});
-  const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({
-    title: '转换脚本列表',
-    api: ScriptPage,
-    columns,
-    showIndexColumn: false,
-    clickToRowSelect: false,
-    showTableSetting: true,
-    bordered: true,
-    rowKey: 'id',
-    beforeFetch: (params: Recordable) => {
-      return { ...unref(props.searchInfo), ...params };
-    },
-    actionColumn: {
-      width: 200,
-      title: '操作',
-      dataIndex: 'action',
-      slots: { customRender: 'action' },
-      fixed: 'right',
-    },
-  });
-
-  const handleSuccess = () => {
-    reload();
-  };
-
-  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
-    useBatchDelete(deleteScriptManage, handleSuccess, setProps);
-  selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
-    // Demo:status为1的选择框禁用
-    if (record.status === 1) {
-      return { disabled: true };
-    } else {
-      return { disabled: false };
-    }
-  };
-
-  nextTick(() => {
-    setProps(selectionOptions);
-  });
-
-  const [registerModal, { openModal }] = useModal();
-
-  // 新增或编辑
-  const handleCreateOrEdit = (record: Recordable | null) => {
-    if (record) {
-      openModal(true, {
-        isUpdate: false,
-        record,
-        isAuth: '',
-        isView: false,
-        isTest: false,
-        isText: 'confirm',
-        isTitle: 'edit',
-      });
-    } else {
-      openModal(true, {
-        isAuth: '',
-        isUpdate: true,
-        isView: false,
-        isTest: false,
-        isText: 'confirm',
-        isTitle: 'add',
-      });
-    }
-  };
-  const handleBindTest = (record: Recordable | null) => {
-    if (record) {
-      openModal(true, {
-        isAuth: '',
-        isUpdate: false,
-        record: record.id,
-        isTest: true,
-        isText: 'test',
-        isTitle: 'test',
-      });
-    }
-  };
-  const handleScriptView = (record: Recordable | null) => {
-    if (record) {
-      openModal(true, {
-        isUpdate: true,
-        record,
-        isView: true,
-      });
-    }
-  };
-  const statusChange = async (checked, record) => {
-    setProps({
-      loading: true,
-    });
-    setSelectedRowKeys([]);
-    resetSelectedRowKeys();
-    const newStatus = checked ? 1 : 0;
-    const { createMessage } = useMessage();
-    try {
-      await scriptPagePutApi(record.id, newStatus);
-      if (newStatus) {
-        createMessage.success(`启用成功`);
-      } else {
-        createMessage.success('禁用成功');
-      }
-    } finally {
-      setProps({
-        loading: false,
-      });
-      reload();
-    }
-  };
-
-  defineExpose({
-    reload: () => {
-      reload();
-    },
-  });
-</script>
+<template>
+  <div>
+    <BasicTable :clickToRowSelect="false" @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <Authority :value="PermissionConvertScriptEnum.PERMISSION_POST">
+          <a-button
+            type="primary"
+            @click="handleBusinessModal(BusinessConvertScriptTextEnum.BUSINESS_ADD_TEXT, null)"
+          >
+            {{ BusinessConvertScriptTextEnum.BUSINESS_ADD_TEXT }}
+          </a-button>
+        </Authority>
+        <Authority :value="PermissionConvertScriptEnum.PERMISSION_DELETE">
+          <Popconfirm
+            title="您确定要批量删除数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleDeleteOrBatchDelete(null)"
+          >
+            <a-button type="primary" color="error" :disabled="hasBatchDelete">
+              {{ BusinessConvertScriptTextEnum.BUSINESS_DELETE_TEXT }}
+            </a-button>
+          </Popconfirm>
+        </Authority>
+      </template>
+      <template #convertJs="{ record }">
+        <a-button
+          type="text"
+          @click="handleBusinessModal(BusinessConvertScriptTextEnum.BUSINESS_VIEW_TEXT, record)"
+        >
+          <span style="color: #377dff">{{
+            BusinessConvertScriptTextEnum.BUSINESS_VIEW_TEXT.slice(0, 2)
+          }}</span>
+        </a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: BusinessConvertScriptTextEnum.BUSINESS_TEST_TEXT.slice(0, 2),
+              icon: 'ant-design:font-size-outlined',
+              auth: PermissionConvertScriptEnum.PERMISSION_TEST,
+              onClick: handleBusinessModal.bind(
+                null,
+                BusinessConvertScriptTextEnum.BUSINESS_TEST_TEXT,
+                record
+              ),
+            },
+            {
+              label: BusinessConvertScriptTextEnum.BUSINESS_EDIT_TEXT.slice(0, 2),
+              icon: 'clarity:note-edit-line',
+              auth: PermissionConvertScriptEnum.PERMISSION_UPDATE,
+              onClick: handleBusinessModal.bind(
+                null,
+                BusinessConvertScriptTextEnum.BUSINESS_EDIT_TEXT,
+                record
+              ),
+              ifShow: record.status == 0,
+            },
+            {
+              label: BusinessConvertScriptTextEnum.BUSINESS_DELETE_TEXT.slice(-2),
+              icon: 'ant-design:delete-outlined',
+              auth: PermissionConvertScriptEnum.PERMISSION_DELETE,
+              color: 'error',
+              ifShow: record.status == 0,
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+      <template #status="{ record }">
+        <Authority :value="PermissionConvertScriptEnum.PERMISSION_UPDATE_STATUS">
+          <Switch
+            :checked="record.status === 1"
+            :loading="record.pendingStatus"
+            checkedChildren="启用"
+            unCheckedChildren="禁用"
+            @change="(checked:boolean)=>statusChange(checked,record)"
+          />
+        </Authority>
+      </template>
+    </BasicTable>
+    <ConverScriptModal @register="registerModal" @success="handleSuccess" />
+  </div>
+</template>
+
+<script lang="ts" setup name="index">
+  import { reactive, nextTick, unref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { Authority } from '/@/components/Authority';
+  import { useModal } from '/@/components/Modal';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { Switch, Popconfirm } from 'ant-design-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import {
+    ScriptPage,
+    deleteScriptManage,
+    scriptPagePutApi,
+  } from '/@/api/scriptmanage/scriptManager';
+  import {
+    PermissionConvertScriptEnum,
+    searchFormSchema,
+    defaultTableAttribtes,
+    BusinessConvertScriptTextEnum,
+  } from './config';
+  import { ConverScriptModal } from './components';
+
+  const props = defineProps<{ searchInfo: Recordable }>();
+
+  const searchInfo = reactive<Recordable>({});
+
+  const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({
+    api: ScriptPage,
+    ...defaultTableAttribtes,
+    beforeFetch: (params: Recordable) => {
+      return { ...unref(props.searchInfo), ...params };
+    },
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      fieldMapToTime: [['sendTime', ['startTime', 'endTime'], 'x']],
+    },
+  });
+
+  const handleSuccess = () => {
+    reload();
+  };
+
+  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
+    useBatchDelete(deleteScriptManage, handleSuccess, setProps) as any;
+  selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
+    if (record.status === 1) return { disabled: true };
+    else return { disabled: false };
+  };
+
+  nextTick(() => {
+    setProps(selectionOptions);
+  });
+
+  const [registerModal, { openModal }] = useModal();
+
+  // 业务弹窗
+  const handleBusinessModal = (text, record: Recordable | null) => {
+    const modalParams = {
+      text,
+      record,
+    };
+    openModal(true, modalParams);
+  };
+
+  const setPropsLoading = (loading) => {
+    setProps({
+      loading,
+    });
+    setSelectedRowKeys([]);
+    resetSelectedRowKeys();
+  };
+
+  const statusChange = async (checked, record) => {
+    setPropsLoading(true);
+    const newStatus = checked ? 1 : 0;
+    const { createMessage } = useMessage();
+    try {
+      await scriptPagePutApi(record.id, newStatus);
+      if (newStatus)
+        return createMessage.success(BusinessConvertScriptTextEnum.BUSINESS_ENABLE_SUCCESS);
+      else return createMessage.success(BusinessConvertScriptTextEnum.BUSINESS_DISABLE_SUCCESS);
+    } finally {
+      setPropsLoading(false);
+      reload();
+    }
+  };
+
+  defineExpose({
+    reload: () => {
+      reload();
+    },
+  });
+</script>