wip:联调脚本管理CRUD

fengtao
1 parent ac9c92b5
Showing 8 changed files with 203 additions and 99 deletions
src/api/scriptmanage/model/scriptModel.ts
src/api/scriptmanage/scriptManager.ts
src/views/device/profiles/step/cpns/tcp/ConverScriptModal.vue
src/views/device/profiles/step/cpns/tcp/index.vue
src/views/scriptmanage/converscript/ConverScript.vue
src/views/scriptmanage/converscript/ConverScriptModal.vue
src/views/scriptmanage/converscript/config.data.ts
src/views/scriptmanage/converscript/index.vue
--- a/src/api/scriptmanage/model/scriptModel.ts 0 → 100644
View file @c395944
+++ b/src/api/scriptmanage/model/scriptModel.ts 0 → 100644
View file @c395944
+import { BasicPageParams } from '/@/api/model/baseModel';
+export type ScriptQueryParam = BasicPageParams & ScriptParam;
+
+export type ScriptParam = {
+  name?: string;
+  transportType?: string;
+  status?: number;
+};
+
+export interface ScriptModel {
+  convertJs: string;
+  createTime: '2022-10-31T01:19:57.912Z';
+  creator: string;
+  description: string;
+  id: string;
+  name: string;
+  status: 0;
+  tenantId: string;
+  updateTime: '2022-10-31T01:19:57.912Z';
+  updater: string;
+}
+
+export interface ScriptRecord {
+  id: string;
+  creator: string;
+  createTime: string;
+  updater: string;
+  updateTime: string;
+  name: string;
+  convertJs: string;
+  enabled: boolean;
+  tenantId: string;
+  description: string;
+  status: boolean;
+}
--- a/src/api/scriptmanage/scriptManager.ts 0 → 100644
View file @c395944
+++ b/src/api/scriptmanage/scriptManager.ts 0 → 100644
View file @c395944
+import { defHttp } from '/@/utils/http/axios';
+import { ScriptParam, ScriptQueryParam, ScriptRecord } from './model/scriptModel';
+import { PaginationResult } from '/#/axios';
+
+enum ScriptManagerApi {
+  SCRIPT_POST_URL = '/js',
+  SCRIPT_GET_URL = '/js',
+  SCRIPT_DELETE_URL = '/js',
+  SCRIPT_MELIST_URL = '/js/me/list',
+  SCRIPT_TEST_URL = '/js/test',
+}
+
+export const ScriptPage = (params: ScriptQueryParam) => {
+  return defHttp.get<PaginationResult<ScriptRecord>>({
+    url: ScriptManagerApi.SCRIPT_GET_URL,
+    params,
+  });
+};
+
+//删除脚本
+export const deleteScriptManage = (ids: string[]) => {
+  return defHttp.delete({
+    url: ScriptManagerApi.SCRIPT_DELETE_URL,
+    data: {
+      ids: ids,
+    },
+  });
+};
+
+// 创建或编辑脚本
+export const createOrEditScriptManage = (data) => {
+  return defHttp.post<ScriptParam>({
+    url: ScriptManagerApi.SCRIPT_POST_URL,
+    data,
+  });
+};
+
+// 查询脚本详情
+export const getScriptManageDetail = (id: string) => {
+  return defHttp.get({
+    url: ScriptManagerApi.SCRIPT_GET_URL + `/${id}`,
+  });
+};
+
+// 获取脚本选项列表
+export const getScriptManageMeList = () => {
+  return defHttp.get({
+    url: ScriptManagerApi.SCRIPT_MELIST_URL,
+  });
+};
+
+// 测试脚本执行结果
+export const testScriptManage = (data) => {
+  return defHttp.post<ScriptParam>({
+    url: ScriptManagerApi.SCRIPT_TEST_URL,
+    data,
+  });
+};
--- a/src/views/device/profiles/step/cpns/tcp/ConverScriptModal.vue deleted 100644 → 0
View file @ac9c92b
+++ b/src/views/device/profiles/step/cpns/tcp/ConverScriptModal.vue deleted 100644 → 0
View file @ac9c92b
-<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>
--- a/src/views/device/profiles/step/cpns/tcp/index.vue
View file @c395944
+++ b/src/views/device/profiles/step/cpns/tcp/index.vue
View file @c395944
@@ -27,7 +27,7 @@
         >
       </template>
     </BasicForm>
-    <ConverScriptModal @register="registerModal" />
+    <ConverScriptModal @register="registerModal" @success="handleSuccess" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -37,24 +37,33 @@
   import { SelectTypes } from 'ant-design-vue/es/select';
   import { Select } from 'ant-design-vue';
   import { useModal } from '/@/components/Modal';
-  import ConverScriptModal from './ConverScriptModal.vue';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { getScriptManageMeList } from '/@/api/scriptmanage/scriptManager';
+  import ConverScriptModal from '/@/views/scriptmanage/converscript/ConverScriptModal.vue';
   const { createMessage } = useMessage();
   const selectScript = reactive({
     script: null,
   });
-  const selectOptions: Ref<SelectTypes['options']> = ref([
-    {
-      label: '电表转换脚本',
-      value: '2dadsasd212asddafd1',
-    },
-    {
-      label: '水表转换脚本',
-      value: 'dasdads776216dasdb1212sx',
-    },
-  ]);
-  onMounted(() => {});
+  const selectOptions: Ref<SelectTypes['options']> = ref([]);
+  onMounted(async () => {
+    const res = await getScriptManageMeList();
+    selectOptions.value = res.map((m) => {
+      return {
+        label: m.name,
+        value: m.id,
+      };
+    });
+  });
+  const handleSuccess = async () => {
+    const res = await getScriptManageMeList();
+    selectOptions.value = res.map((m) => {
+      return {
+        label: m.name,
+        value: m.id,
+      };
+    });
+  };
   const [register] = useForm({
     labelWidth: 180,
@@ -70,10 +79,17 @@
     if (c === 'add') {
       openModal(true, {
         isUpdate: true,
+        isView: false,
+        isTest: false,
+        isText: 'confirm',
+        isTitle: 'add',
       });
     } else {
       openModal(true, {
         isUpdate: false,
+        isTest: true,
+        isText: 'test',
+        isTitle: 'test',
       });
     }
   };
@@ -96,7 +112,7 @@
     selectScript.script = null;
   };
   const setFormData = (v) => {
-    selectScript.script = v;
+    selectScript.script = v?.scriptId;
   };
   defineExpose({
     getFormData,
--- a/src/views/scriptmanage/converscript/ConverScript.vue
View file @c395944
+++ b/src/views/scriptmanage/converscript/ConverScript.vue
View file @c395944
@@ -10,22 +10,22 @@
     >
       <a-form-item
         :label="ifAdd ? '名称' : '输入参数'"
-        :name="ifAdd ? 'scriptName' : 'inputParams'"
+        :name="ifAdd ? 'name' : 'inputParams'"
         :rules="[{ required: true, message: ifAdd ? '请输入脚本名称' : '请输入参数' }]"
       >
-        <a-input v-if="ifAdd" v-model:value="scriptForm.scriptName" placeholder="请输入脚本名称" />
+        <a-input v-if="ifAdd" v-model:value="scriptForm.name" placeholder="请输入脚本名称" />
         <a-input v-else v-model:value="scriptForm.inputParams" placeholder="请输入参数" />
       </a-form-item>
       <a-form-item
         label="上报数据类型"
         name="reportType"
-        :rules="[{ required: true, message: '请选择上报数据类型' }]"
+        :rules="[{ required: false, message: '请选择上报数据类型' }]"
       >
         <a-space direction="vertical">
           <a-radio-group v-model:value="scriptForm.reportType" :options="typeOptions" />
         </a-space>
       </a-form-item>
-      <a-form-item label="脚本内容" name="scriptContent">
+      <a-form-item label="脚本内容" name="convertJs">
         <Card title="脚本内容" :bodyStyle="{ padding: 0, height: '280px' }">
           <template #extra>
             <a-button @click="handleFormat" size="small">格式化</a-button>
@@ -41,12 +41,12 @@
       </a-form-item>
       <a-form-item
         :label="ifAdd ? '备注' : '输出参数'"
-        :name="ifAdd ? 'scriptRemark' : 'outputParams'"
+        :name="ifAdd ? 'description' : 'outputParams'"
       >
         <a-textarea
           :rows="5"
           v-if="ifAdd"
-          v-model:value="scriptForm.scriptRemark"
+          v-model:value="scriptForm.description"
           placeholder="请输入备注"
         />
         <a-textarea
@@ -76,9 +76,9 @@
     ifAdd: { type: Boolean, default: true },
   });
   const scriptForm = reactive({
-    scriptName: '',
-    scriptRemark: '',
-    scriptContent: '',
+    name: '',
+    description: '',
+    convertJs: '',
     inputParams: '',
     outputParams: '',
     reportType: 'HEX',
@@ -127,7 +127,7 @@
       `
     );
     beautify(aceEditor.value.session);
-    scriptForm.scriptContent = aceEditor.value.getValue();
+    scriptForm.convertJs = aceEditor.value.getValue();
   };
   const handleCopy = () => {
     const valueRef = aceEditor.value.getValue();
@@ -144,21 +144,27 @@
   const formRef = ref();
   const getFormData = async () => {
     const value = await formRef.value.validateFields();
-    scriptForm.scriptContent = aceEditor.value.getValue();
-    if (scriptForm.scriptContent == '') {
+    scriptForm.convertJs = aceEditor.value.getValue();
+    if (scriptForm.convertJs == '') {
       createMessage.error('请编写脚本内容');
       throw '请编写脚本内容';
     }
     if (!value) return;
     return {
       ...value,
-      ...{ scriptContent: scriptForm.scriptContent },
+      ...{ convertJs: scriptForm.convertJs },
     };
   };
   const setFormData = (v) => {
     for (let i in scriptForm) {
       Reflect.set(scriptForm, i, v[i]);
     }
+    aceEditor.value.setValue(v.convertJs);
+    handleFormat();
+  };
+  const setScriptContentData = (v) => {
+    aceEditor.value.setValue(v.convertJs);
+    handleFormat();
   };
   const resetFormData = () => {
     for (let i in scriptForm) {
@@ -172,6 +178,7 @@
     getFormData,
     resetFormData,
     setFormData,
+    setScriptContentData,
   });
 </script>
 <style lang="less" scoped>
--- a/src/views/scriptmanage/converscript/ConverScriptModal.vue
View file @c395944
+++ b/src/views/scriptmanage/converscript/ConverScriptModal.vue
View file @c395944
@@ -15,10 +15,18 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { ref, computed, unref } from 'vue';
+  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);
@@ -26,6 +34,9 @@
   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);
@@ -34,6 +45,7 @@
     isTest.value = data.isTest;
     isText.value = data.isText;
     isTitle.value = data.isTitle;
+    editData.data = data.record;
     converScriptRef.value?.initEditor(data.record?.configuration?.jsScript);
     setModalProps({ loading: false });
     if (!unref(isViewDetail)) {
@@ -44,17 +56,44 @@
           ? '新增转换脚本'
           : '测试转换脚本';
       const okText = isText.value == 'test' ? '测试' : '确定';
+      if (unref(isTitle) == 'edit') {
+        converScriptRef.value?.setFormData(data.record);
+      }
+      if (unref(isTitle) == 'test') {
+        converScriptRef.value?.setScriptContentData(data.record);
+      }
       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 () => {
-    const val = await converScriptRef.value?.getFormData();
-    console.log(val);
-    handleCancel(true);
+    setModalProps({ loading: true });
+    try {
+      const val = await converScriptRef.value?.getFormData();
+      const tempObj = {
+        ...editData.data,
+        ...val,
+      };
+      (await isText.value) == 'test' ? testScriptManage(val) : createOrEditScriptManage(tempObj);
+      createMessage.success(
+        unref(isTitle) == 'edit'
+          ? '编辑转换脚本成功'
+          : unref(isTitle) == 'add'
+          ? '新增转换脚本成功'
+          : '测试转换脚本成功'
+      );
+      closeModal();
+      emits('success');
+    } catch {
+    } finally {
+      setModalProps({ loading: false });
+    }
   };
   const handleCancel = (flag) => {
     if (flag) {
--- a/src/views/scriptmanage/converscript/config.data.ts
View file @c395944
+++ b/src/views/scriptmanage/converscript/config.data.ts
View file @c395944
@@ -8,15 +8,15 @@ import { findDictItemByCode } from '/@/api/system/dict';
 export const columns: BasicColumn[] = [
   {
     title: '脚本名称',
-    dataIndex: 'reportConfigName',
+    dataIndex: 'name',
     width: 80,
   },
   {
     title: '脚本状态',
-    dataIndex: 'organizationName',
+    dataIndex: 'status',
     width: 120,
     customRender: ({ record }) => {
-      const status = record.organizationName;
+      const status = record.status;
       const color = status == 1 ? 'green' : 'red';
       const text = status == 1 ? '启用' : '禁用';
       return h(Tag, { color: color }, () => text);
@@ -24,18 +24,18 @@ export const columns: BasicColumn[] = [
   },
   {
     title: '脚本内容',
-    dataIndex: 'dataType',
+    dataIndex: 'convertJs',
     width: 120,
-    slots: { customRender: 'dataType' },
+    slots: { customRender: 'convertJs' },
   },
   {
     title: '描述',
-    dataIndex: 'executeWay',
+    dataIndex: 'description',
     width: 120,
   },
   {
     title: '创建时间',
-    dataIndex: 'executeTime',
+    dataIndex: 'createTime',
     width: 180,
   },
 ];
--- a/src/views/scriptmanage/converscript/index.vue
View file @c395944
+++ b/src/views/scriptmanage/converscript/index.vue
View file @c395944
@@ -2,10 +2,10 @@
   <div>
     <BasicTable :clickToRowSelect="false" @register="registerTable" :searchInfo="searchInfo">
       <template #toolbar>
-        <Authority value="">
+        <Authority value="api:yt:js:post">
           <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增转换脚本 </a-button>
         </Authority>
-        <Authority value="">
+        <Authority value="api:yt:js:delete">
           <Popconfirm
             title="您确定要批量删除数据"
             ok-text="确定"
@@ -16,7 +16,7 @@
           </Popconfirm>
         </Authority>
       </template>
-      <template #dataType="{ record }">
+      <template #convertJs="{ record }">
         <a-button type="text" @click="handleScriptView(record)">
           <span style="color: #377dff">查看脚本</span>
         </a-button>
@@ -33,13 +33,13 @@
             {
               label: '编辑',
               icon: 'clarity:note-edit-line',
-              auth: '',
+              auth: 'api:yt:js:update',
               onClick: handleCreateOrEdit.bind(null, record),
             },
             {
               label: '删除',
               icon: 'ant-design:delete-outlined',
-              auth: '',
+              auth: 'api:yt:js:delete',
               color: 'error',
               popConfirm: {
                 title: '是否确认删除',
@@ -50,26 +50,25 @@
         />
       </template>
     </BasicTable>
-    <ConverScriptModal @register="registerModal" />
+    <ConverScriptModal @register="registerModal" @success="handleSuccess" />
   </div>
 </template>
 <script lang="ts" setup>
   import { reactive, nextTick } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { searchFormSchema, columns, mockData } from './config.data';
+  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 { deleteExportManage } from '/@/api/export/exportManager';
+  import { ScriptPage, deleteScriptManage } from '/@/api/scriptmanage/scriptManager';
   const searchInfo = reactive<Recordable>({});
   const [registerTable, { reload, setProps }] = useTable({
     title: '转换脚本列表',
-    // api: exportPage,
-    api: mockData,
+    api: ScriptPage,
     columns,
     showIndexColumn: false,
     clickToRowSelect: false,
@@ -96,7 +95,7 @@
   };
   const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
-    deleteExportManage,
+    deleteScriptManage,
     handleSuccess,
     setProps
   );