feat:新增脚本管理下的脚本转换

+<template>
+  <div>
+    <BasicForm @register="registerForm">
+      <template #scriptContent>
+        <Card title="脚本内容" :bodyStyle="{ padding: 0, height: '280px' }">
+          <div ref="aceRef" class="overflow-hidden"></div>
+        </Card>
+        <Button @click="handleCopy" class="mt-4">
+          <template #icon>
+            <CopyOutlined />
+          </template>
+          copy
+        </Button>
+      </template>
+    </BasicForm>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, unref } from 'vue';
+  import { formSchema } from './config.data';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import ace from 'ace-builds';
+  import { Card, Button } from 'ant-design-vue';
+  import 'ace-builds/src-noconflict/theme-chrome'; // 默认设置的主题
+  import 'ace-builds/src-noconflict/mode-javascript'; // 默认设置的语言模式
+  import { beautify } from 'ace-builds/src-noconflict/ext-beautify.js';
+  import { CopyOutlined } from '@ant-design/icons-vue';
+  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  defineEmits(['register']);
+  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, {
+      maxLines: 12, // 最大行数，超过会自动出现滚动条
+      minLines: 12, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
+      fontSize: 14, // 编辑器内字体大小
+      theme: 'ace/theme/chrome', // 默认设置的主题
+      mode: 'ace/mode/javascript', // 默认设置的语言模式
+      tabSize: 2, // 制表符设置为 4 个空格大小
+    });
+
+    aceEditor.value.setOptions({
+      enableBasicAutocompletion: true,
+      enableLiveAutocompletion: true,
+    });
+    aceEditor.value.setValue(
+      jsScript ??
+        `
+    var trimSource =source.replaceAll(" ","");
+    if(trimSource.length==26 && trimSource.startsWith("020308")){
+      var str = "";
+      for(var i = 6;i<20;i+=2){
+        str += String.fromCharCode(parseInt(trimSource[i]+trimSource[i+1],16));
+      }`
+    );
+    beautify(aceEditor.value.session);
+  };
+  const handleCopy = () => {
+    const valueRef = aceEditor.value.getValue();
+    const value = unref(valueRef);
+    if (!value) {
+      createMessage.warning('请输入要拷贝的内容！');
+      return;
+    }
+    clipboardRef.value = value;
+    if (unref(copiedRef)) {
+      createMessage.success('复制成功！');
+    }
+  };
+  const getFormData = async () => {
+    const value = await validate();
+    if (!value) return;
+    return value;
+  };
+  const resetFormData = () => {
+    resetFields();
+  };
+
+  defineExpose({
+    initEditor,
+    getFormData,
+    resetFormData,
+  });
+</script>
+<style lang="less" scoped>
+  @import url('./ConverScriptModal.less');
+</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 ref="converScriptRef" />
+    </BasicModal>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import ConverScript from './ConverScript.vue';
+
+  const converScriptRef = ref<InstanceType<typeof ConverScript>>();
+  const getTitle = computed(() => (isUpdate.value ? '编辑转换脚本' : '新增转换脚本'));
+  const isUpdate = ref(false);
+  const isViewDetail = ref('');
+  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ loading: true });
+    isUpdate.value = data.isUpdate;
+    isViewDetail.value = data.isView;
+    converScriptRef.value?.initEditor(data.record?.configuration?.jsScript);
+    setModalProps({ loading: false });
+    if (!unref(isViewDetail)) {
+      const title = !unref(isUpdate) ? '编辑转换脚本' : '新增转换脚本';
+      setModalProps({ title, showOkBtn: true, showCancelBtn: true });
+      if (!unref(isUpdate)) {
+      }
+    } else {
+      setModalProps({ showOkBtn: false, showCancelBtn: false, title: '查看转换脚本' });
+    }
+  });
+  const handleSubmit = async () => {
+    const val = await converScriptRef.value?.getFormData();
+    console.log(val);
+  };
+  const handleCancel = () => {
+    closeModal();
+    converScriptRef.value?.resetFormData();
+  };
+</script>
+<style lang="less" scoped>
+  @import url('./ConverScriptModal.less');
+</style>

+import { BasicColumn, FormSchema } from '/@/components/Table';
+import moment from 'moment';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+
+// 表格配置
+export const columns: BasicColumn[] = [
+  {
+    title: '脚本名称',
+    dataIndex: 'reportConfigName',
+    width: 80,
+  },
+  {
+    title: '脚本状态',
+    dataIndex: 'organizationName',
+    width: 120,
+    customRender: ({ record }) => {
+      const status = record.organizationName;
+      const color = status == 1 ? 'green' : 'red';
+      const text = status == 1 ? '启用' : '禁用';
+      return h(Tag, { color: color }, () => text);
+    },
+  },
+  {
+    title: '脚本内容',
+    dataIndex: 'dataType',
+    width: 120,
+    slots: { customRender: 'dataType' },
+  },
+  {
+    title: '描述',
+    dataIndex: 'executeWay',
+    width: 120,
+  },
+  {
+    title: '创建日期',
+    dataIndex: 'executeTime',
+    width: 180,
+  },
+];
+
+// 查询配置
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'reportConfigName',
+    label: '脚本名称',
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入配置名称',
+    },
+  },
+  {
+    field: 'sendTime',
+    label: '创建时间',
+    component: 'RangePicker',
+    componentProps: {
+      showTime: {
+        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+      },
+    },
+    colProps: { span: 6 },
+  },
+];
+
+// 新增编辑配置
+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>
+    <BasicTable :clickToRowSelect="false" @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <Authority value="">
+          <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增转换脚本 </a-button>
+        </Authority>
+        <Authority value="">
+          <Popconfirm
+            title="您确定要批量删除数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleDeleteOrBatchDelete(null)"
+          >
+            <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
+          </Popconfirm>
+        </Authority>
+      </template>
+      <template #dataType="{ record }">
+        <a-button type="text" @click="handleScriptView(record)">
+          <span style="color: #377dff">查看脚本</span>
+        </a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              icon: 'clarity:note-edit-line',
+              auth: '',
+              onClick: handleCreateOrEdit.bind(null, record),
+            },
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              auth: '',
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <ConverScriptModal @register="registerModal" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, nextTick } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { searchFormSchema, columns } from './config.data';
+  import { Authority } from '/@/components/Authority';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { Popconfirm } from 'ant-design-vue';
+  import { useModal } from '/@/components/Modal';
+  import ConverScriptModal from './ConverScriptModal.vue';
+  import { exportPage, deleteExportManage } from '/@/api/export/exportManager';
+
+  const searchInfo = reactive<Recordable>({});
+  const [registerTable, { reload, setProps, setTableData }] = useTable({
+    title: '转换脚本列表',
+    api: exportPage,
+    columns,
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      fieldMapToTime: [['sendTime', ['startTime', 'endTime'], 'x']],
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    rowKey: 'id',
+    actionColumn: {
+      width: 200,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: 'right',
+    },
+  });
+
+  const handleSuccess = () => {
+    reload();
+  };
+
+  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+    deleteExportManage,
+    handleSuccess,
+    setProps
+  );
+
+  nextTick(() => {
+    setProps(selectionOptions);
+  });
+
+  const [registerModal, { openModal }] = useModal();
+
+  // 新增或编辑
+  const handleCreateOrEdit = (record: Recordable | null) => {
+    setTableData([
+      {
+        id: 1,
+        reportConfigName: '11',
+        organizationName: 0,
+        dataType: '11',
+        executeWay: '11',
+        executeTime: '2022-05-21',
+      },
+      {
+        id: 2,
+        reportConfigName: '11',
+        organizationName: 0,
+        dataType: '11',
+        executeWay: '11',
+        executeTime: '2022-05-21',
+      },
+    ]);
+    if (record) {
+      openModal(true, {
+        isUpdate: false,
+        record,
+        isView: false,
+      });
+    } else {
+      openModal(true, {
+        isUpdate: true,
+        isView: false,
+      });
+    }
+  };
+  const handleScriptView = (record: Recordable | null) => {
+    if (record) {
+      openModal(true, {
+        isUpdate: true,
+        record,
+        isView: true,
+      });
+    }
+  };
+</script>