wip:公共接口管理开发中

@@ -18,6 +18,7 @@
   import { useGlobSetting } from '/@/hooks/setting';
   import { AuthIcon, CardLayoutButton } from '/@/components/Widget';
   import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
+  import { PublicApiDrawer } from './publicApi/index';
 
   const listColumn = ref(5);
 
@@ -88,6 +89,8 @@
 
   const [registerDrawer, { openDrawer }] = useDrawer();
 
+  const [registerPublicDrawer, { openDrawer: openPublicApiDrawer }] = useDrawer();
+
   const handleCreateOrUpdate = (record?: BigScreenCenterItemsModel) => {
     if (record) {
       openDrawer(true, {
@@ -101,6 +104,8 @@
     }
   };
 
+  const handleCreateOrUpdatePublicApi = () => openPublicApiDrawer(true);
+
   const { largeDesignerPrefix } = useGlobSetting();
 
   const handlePreview = (record: BigScreenCenterItemsModel) => {
@@ -143,6 +148,8 @@
       (listContainerEl.style.overflowY = 'auto') &&
       (listContainerEl.style.overflowX = 'hidden');
   });
+
+  const getPublicApiListData = () => {};
 </script>
 
 <template>
@@ -166,6 +173,9 @@
             <Authority :value="ConfigurationPermission.CREATE">
               <Button type="primary" @click="handleCreateOrUpdate()">新增大屏</Button>
             </Authority>
+            <Authority :value="ConfigurationPermission.CREATE">
+              <Button type="primary" @click="handleCreateOrUpdatePublicApi()">公共接口管理</Button>
+            </Authority>
             <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
             <Tooltip title="刷新">
               <Button type="primary" @click="getListData">
@@ -251,6 +261,7 @@
       </List>
     </section>
     <ConfigurationCenterDrawer @register="registerDrawer" @success="getListData" />
+    <PublicApiDrawer @register="registerPublicDrawer" @success="getPublicApiListData" />
   </PageWrapper>
 </template>
 

+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+import { findDictItemByCode } from '/@/api/system/dict';
+
+// 表格配置
+export const columns: BasicColumn[] = [
+  {
+    title: '接口名称',
+    dataIndex: 'name',
+    width: 80,
+  },
+  {
+    title: '请求方式',
+    dataIndex: 'method',
+    width: 120,
+  },
+  {
+    title: '接口内容',
+    dataIndex: 'content',
+    width: 120,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 120,
+    customRender: ({ record }) => {
+      const status = record.status;
+      const color = status == 0 ? 'green' : 'red';
+      const text = status == 0 ? '发布' : '未发布';
+      return h(Tag, { color: color }, () => text);
+    },
+  },
+];
+
+//模拟数据
+export const list = [
+  {
+    name: '传感器趋势图',
+    method: 'get',
+    content: '/api/sensor',
+    status: 0,
+  },
+  {
+    name: '报警器趋势图',
+    method: 'get',
+    content: '/api/alarm',
+    status: 1,
+  },
+];
+
+//表单配置
+// 新增编辑配置
+export const schemas: FormSchema[] = [
+  {
+    field: 'name',
+    label: '接口名称',
+    colProps: { span: 24 },
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 64,
+      placeholder: '请输入接口名称',
+    },
+  },
+  {
+    field: 'address',
+    label: '接口地址',
+    colProps: { span: 24 },
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 64,
+      placeholder: '请输入接口地址',
+    },
+  },
+  {
+    field: 'method',
+    label: '选择方式',
+    component: 'ApiSelect',
+    required: true,
+    colProps: { span: 24 },
+    componentProps: {
+      placeholder: '请选择选择方式',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'dataview_select_methods',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+  },
+];

+<template>
+  <div>
+    <BasicDrawer
+      showFooter
+      v-bind="$attrs"
+      @register="registerDrawer"
+      width="50%"
+      @ok="handleOnSubmit"
+    >
+      <BasicForm @register="registerForm" />
+    </BasicDrawer>
+  </div>
+</template>
+<script lang="ts" setup name="publicApi">
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { schemas } from './config';
+
+  const [registerForm, { resetFields, validate, setFieldsValue }] = useForm({
+    labelWidth: 120,
+    schemas,
+    showActionButtonGroup: false,
+  });
+
+  const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
+    await resetFields();
+    const title = `${!data.isUpdate ? '新增' : '修改'}公共接口`;
+    setDrawerProps({ title });
+    setFieldsValue({ ...data.record });
+  });
+
+  const handleOnSubmit = async () => {
+    const values = await validate();
+    if (!values) return;
+    console.log('Get values', values);
+  };
+</script>

+import PublicApiDrawer from './index.vue';
+import PublicApiList from './list.vue';
+import PublicApiForm from './form.vue';
+
+export { PublicApiDrawer, PublicApiList, PublicApiForm };

+<template>
+  <div>
+    <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="公共接口管理页" width="50%">
+      <PublicApiList />
+    </BasicDrawer>
+  </div>
+</template>
+<script lang="ts" setup name="publicApi">
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { PublicApiList } from './index';
+
+  const [registerDrawer] = useDrawerInner();
+</script>

+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增公共接口 </a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              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>
+  </div>
+  <PublicApiForm @register="registerDrawer" />
+</template>
+<script lang="ts" setup name="list">
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useDrawer } from '/@/components/Drawer';
+  import { columns, list } from './config';
+  import { PublicApiForm } from './index';
+
+  const [registerTable] = useTable({
+    // api: exportPage,
+    dataSource: list,
+    columns,
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    showTableSetting: true,
+    bordered: true,
+    actionColumn: {
+      width: 200,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: 'right',
+    },
+  });
+
+  const [registerDrawer, { openDrawer }] = useDrawer();
+
+  const handleDeleteOrBatchDelete = (record) => {
+    console.log(record);
+  };
+
+  const handleCreateOrEdit = (record) => {
+    const isUpdate = record === null ? false : true;
+    const recordContent = record === null ? null : record;
+    openDrawer(true, {
+      isUpdate,
+      record: recordContent,
+    });
+  };
+</script>