feat(front): 前端增加组态中心页面

@@ -8,15 +8,15 @@ VITE_PUBLIC_PATH = /
 # Please note that no line breaks
 
 # 本地
-# VITE_PROXY = [["/api","http://192.168.10.113:8080/api"]]
+# VITE_PROXY = [["/api","http://localhost:8080/api"]]
 
 # 线上演示环境
 # VITE_PROXY = [["/api","http://101.133.234.90:8080/api"]]
 # 线上测试环境
-VITE_PROXY = [["/api","http://47.99.141.212:8080/api"]]
+VITE_PROXY = [["/api","http://localhost:8080/api"]]
 
 # 实时数据的ws地址
-VITE_WEB_SOCKET = ws://47.99.141.212:8080/api/ws/plugins/telemetry?token=
+VITE_WEB_SOCKET = ws://localhost:8080/api/ws/plugins/telemetry?token=
 
 # Delete console
 VITE_DROP_CONSOLE = true
@@ -29,3 +29,6 @@ VITE_GLOB_UPLOAD_URL=/api/yt/oss/upload
 
 # Interface prefix
 VITE_GLOB_API_URL_PREFIX=/yt
+
+#configuration
+VITE_GLOB_CONFIGURATION = http://localhost:3000

@@ -16,12 +16,11 @@ VITE_BUILD_COMPRESS = 'gzip'
 VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
 
 # Basic interface address SPA
-VITE_GLOB_API_URL=http://101.133.234.90:8080/api
+VITE_GLOB_API_URL=http://47.99.141.212:8080/api
 
 # File upload address， optional
 # It can be forwarded by nginx or write the actual address directly
-VITE_GLOB_UPLOAD_URL=http://101.133.234.90:8080/api/yt/oss/upload
-
+VITE_GLOB_UPLOAD_URL=http://47.99.141.212:8080/api/yt/oss/upload
 
 # Interface prefix
 VITE_GLOB_API_URL_PREFIX=/yt
@@ -36,4 +35,7 @@ VITE_USE_PWA = false
 VITE_LEGACY = true
 
 # 实时数据的ws地址
-VITE_WEB_SOCKET = ws://101.133.234.90:8080/api/ws/plugins/telemetry?token=
+VITE_WEB_SOCKET = ws://47.99.141.212:8080/api/ws/plugins/telemetry?token=
+
+#configuration
+VITE_GLOB_CONFIGURATION = http://localhost:3000

+import { defHttp } from '/@/utils/http/axios';
+import type {
+  queryPageParams,
+  ConfigurationModal,
+  ConfigurationCenterParams,
+  ConfigurationCenterInfo,
+} from './model/configurationCenterModal';
+import { getPageData } from '../../base';
+enum API {
+  basicUrl = '/configuration/center',
+}
+
+export const getPage = (params: queryPageParams) => {
+  return getPageData<ConfigurationModal>(params, API.basicUrl);
+};
+
+export const saveConfigurationCenter = (params: ConfigurationCenterParams) => {
+  return defHttp.post({
+    url: API.basicUrl,
+    data: params,
+  });
+};
+
+export const updateConfigurationCenter = (params: ConfigurationCenterParams) => {
+  return defHttp.put({
+    url: API.basicUrl,
+    data: params,
+  });
+};
+
+export const deleteConfigurationCenter = (ids: string[]) => {
+  return defHttp.delete({
+    url: API.basicUrl,
+    data: {
+      ids: ids,
+    },
+  });
+};
+
+export const saveOrUpdateConfigurationCenter = (
+  params: ConfigurationCenterInfo,
+  isUpdate: boolean
+) => {
+  return isUpdate ? updateConfigurationCenter(params) : saveConfigurationCenter(params);
+};

+import { BasicPageParams } from '/@/api/model/baseModel';
+import { ContactParams } from '/@/api/alarm/contact/model/alarmContactModal';
+
+interface ConfigurationCenterItemsModal {
+  id: string;
+  name: string;
+  createTime: string;
+  creator: string;
+  remark: string;
+}
+export type queryPageParams = BasicPageParams & { name: string; organizationId: string };
+
+export interface ConfigurationModal {
+  items: ConfigurationCenterItemsModal[];
+  total: number;
+}
+
+export interface ConfigurationCenterParams {
+  name: string;
+  createTime: string;
+  creator: string;
+  remark: string;
+}
+export type ConfigurationCenterInfo = ConfigurationCenterParams;

@@ -28,6 +28,7 @@ export function getAppEnvConfig() {
     VITE_GLOB_APP_SHORT_NAME,
     VITE_GLOB_API_URL_PREFIX,
     VITE_GLOB_UPLOAD_URL,
+    VITE_GLOB_CONFIGURATION,
   } = ENV;
 
   if (!/^[a-zA-Z\_]*$/.test(VITE_GLOB_APP_SHORT_NAME)) {
@@ -42,6 +43,7 @@ export function getAppEnvConfig() {
     VITE_GLOB_APP_SHORT_NAME,
     VITE_GLOB_API_URL_PREFIX,
     VITE_GLOB_UPLOAD_URL,
+    VITE_GLOB_CONFIGURATION,
   };
 }
 

+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="30%"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema } from './center.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { saveOrUpdateConfigurationCenter } from '/@/api/configuration/center/configurationCenter';
+
+  export default defineComponent({
+    name: 'ConfigurationDrawer',
+    components: { BasicDrawer, BasicForm },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      const isUpdate = ref(true);
+
+      const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
+        labelWidth: 120,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+      });
+
+      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+        await resetFields();
+        setDrawerProps({ confirmLoading: false });
+        isUpdate.value = !!data?.isUpdate;
+        if (unref(isUpdate)) {
+          if (data.record.organizationDTO) {
+            await setFieldsValue(data.record);
+          } else {
+            Reflect.deleteProperty(data.record, 'organizationId');
+            await setFieldsValue(data.record);
+          }
+        }
+      });
+
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增组态中心' : '编辑组态中心'));
+
+      async function handleSubmit() {
+        try {
+          const { createMessage } = useMessage();
+          const values = await validate();
+          setDrawerProps({ confirmLoading: true });
+          let saveMessage = '添加成功';
+          let updateMessage = '修改成功';
+          await saveOrUpdateConfigurationCenter(values, unref(isUpdate));
+          closeDrawer();
+          emit('success');
+          createMessage.success(unref(isUpdate) ? updateMessage : saveMessage);
+        } finally {
+          setDrawerProps({ confirmLoading: false });
+        }
+      }
+
+      return {
+        getTitle,
+        registerDrawer,
+        registerForm,
+        handleSubmit,
+      };
+    },
+  });
+</script>

+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { getOrganizationList } from '/@/api/system/system';
+import { copyTransFun } from '/@/utils/fnUtils';
+
+// 表格列数据
+export const columns: BasicColumn[] = [
+  {
+    title: '组态名称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '所属组织',
+    dataIndex: 'organizationDTO.name',
+    width: 160,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    width: 200,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 120,
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateTime',
+    width: 120,
+  },
+];
+
+// 查询字段
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '组态名称',
+    component: 'Input',
+    colProps: { span: 8 },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入组态名称',
+    },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '组态名称',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入组态名称',
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'organizationId',
+    label: '所属组织',
+    required: true,
+    component: 'ApiTreeSelect',
+    componentProps: {
+      api: async () => {
+        const data = await getOrganizationList();
+        copyTransFun(data as any as any[]);
+        return data;
+      },
+    },
+  },
+  {
+    field: 'remark',
+    label: '备注',
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入备注',
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'id',
+    label: '',
+    component: 'Input',
+    show: false,
+    componentProps: {
+      maxLength: 36,
+      placeholder: 'id',
+    },
+  },
+];

+<template>
+  <div>
+    <PageWrapper dense contentFullHeight contentClass="flex">
+      <OrganizationIdTree
+        class="w-1/4 xl:w-1/5"
+        @select="handleSelect"
+        ref="organizationIdTreeRef"
+      />
+      <BasicTable
+        :clickToRowSelect="false"
+        @register="registerTable"
+        :searchInfo="searchInfo"
+        class="w-3/4 xl:w-4/5"
+      >
+        <template #toolbar>
+          <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增组态中心 </a-button>
+          <a-button
+            type="primary"
+            color="error"
+            @click="handleDeleteOrBatchDelete(null)"
+            :disabled="hasBatchDelete"
+          >
+            批量删除
+          </a-button>
+        </template>
+        <template #action="{ record }">
+          <TableAction
+            :actions="[
+              {
+                label: '设计',
+                icon: 'clarity:note-edit-line',
+                onClick: handleDesign.bind(null, record),
+              },
+              {
+                label: '预览',
+                icon: 'ant-design:eye-outlined',
+                onClick: handlePreview.bind(null, record),
+              },
+              {
+                label: '编辑',
+                icon: 'clarity:note-edit-line',
+                onClick: handleCreateOrEdit.bind(null, record),
+              },
+              {
+                label: '删除',
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  confirm: handleDeleteOrBatchDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </BasicTable>
+    </PageWrapper>
+    <ContactDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, ref, computed } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { PageWrapper } from '/@/components/Page';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useDrawer } from '/@/components/Drawer';
+  import ContactDrawer from './ConfigurationCenterDrawer.vue';
+  import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
+  import { searchFormSchema, columns } from './center.data';
+  import {
+    getPage,
+    deleteConfigurationCenter,
+  } from '/@/api/configuration/center/configurationCenter';
+  import { getAppEnvConfig } from '/@/utils/env';
+  export default defineComponent({
+    components: {
+      PageWrapper,
+      OrganizationIdTree,
+      BasicTable,
+      TableAction,
+      ContactDrawer,
+    },
+    setup() {
+      const { VITE_GLOB_CONFIGURATION } = getAppEnvConfig();
+      let selectedRowIds = ref<string[]>([]);
+      const hasBatchDelete = computed(() => selectedRowIds.value.length <= 0);
+      // 复选框事件
+      const onSelectRowChange = (selectedRowKeys: string[]) => {
+        selectedRowIds.value = selectedRowKeys;
+      };
+      const searchInfo = reactive<Recordable>({});
+      const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
+      // 表格hooks
+      const [registerTable, { reload }] = useTable({
+        title: '组态中心列表',
+        api: getPage,
+        columns,
+        clickToRowSelect: false,
+        formConfig: {
+          labelWidth: 120,
+          schemas: searchFormSchema,
+          resetFunc: resetFn,
+        },
+        showIndexColumn: false,
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        rowSelection: {
+          onChange: onSelectRowChange,
+          type: 'checkbox',
+        },
+        rowKey: 'id',
+        actionColumn: {
+          width: 200,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: 'right',
+        },
+      });
+      // 弹框
+      const [registerDrawer, { openDrawer }] = useDrawer();
+      const { createMessage } = useMessage();
+
+      // 刷新
+      const handleSuccess = () => {
+        reload();
+      };
+      // 新增或编辑
+      const handleCreateOrEdit = (record: Recordable | null) => {
+        if (record) {
+          openDrawer(true, {
+            isUpdate: true,
+            record,
+          });
+        } else {
+          openDrawer(true, {
+            isUpdate: false,
+          });
+        }
+      };
+      // 删除或批量删除
+      const handleDeleteOrBatchDelete = async (record: Recordable | null) => {
+        if (record) {
+          try {
+            await deleteConfigurationCenter([record.id]);
+            createMessage.success('删除组态成功');
+            handleSuccess();
+          } catch (e) {}
+        } else {
+          try {
+            await deleteConfigurationCenter(selectedRowIds.value);
+            createMessage.success('批量删除组态成功');
+            selectedRowIds.value = [];
+            handleSuccess();
+          } catch (e) {}
+        }
+      };
+
+      // 树形选择器
+      const handleSelect = (organizationId: string) => {
+        searchInfo.organizationId = organizationId;
+        handleSuccess();
+      };
+
+      const handlePreview = (record: Recordable | null) => {
+        window.open(VITE_GLOB_CONFIGURATION + '/?dev=1', '_blank');
+      };
+      const handleDesign = (record: Recordable | null) => {
+        window.open(VITE_GLOB_CONFIGURATION + '/?dev=1&project=2', '_blank');
+      };
+      return {
+        searchInfo,
+        hasBatchDelete,
+        handleCreateOrEdit,
+        handleDeleteOrBatchDelete,
+        handleSelect,
+        handleSuccess,
+        handlePreview,
+        handleDesign,
+        registerTable,
+        registerDrawer,
+        organizationIdTreeRef,
+      };
+    },
+  });
+</script>

@@ -158,4 +158,6 @@ export interface GlobEnvConfig {
   VITE_GLOB_APP_SHORT_NAME: string;
   // Upload url
   VITE_GLOB_UPLOAD_URL?: string;
+  //configuration
+  VITE_GLOB_CONFIGURATION: string;
 }