wip: implement data board list page

+import {
+  AddDataBoardParams,
+  DataBoardList,
+  GetDataBoardParams,
+  UpdateDataBoardParams,
+} from './model';
+import { defHttp } from '/@/utils/http/axios';
+
+enum DataBoardUrl {
+  GET_DATA_BOARD = '/data_board',
+  ADD_DATA_BOARD = '/data_board/add',
+  DELETE_DATA_BOARD = '/data_board',
+  UPDATE_DATA_BOARD = '/data_board/update',
+}
+
+/**
+ * @description 获取数据看板
+ * @param params
+ * @returns
+ */
+export const getDataBoardList = (params: GetDataBoardParams) => {
+  return defHttp.get<DataBoardList>({
+    url: DataBoardUrl.GET_DATA_BOARD,
+    params,
+  });
+};
+
+/**
+ * @description 新增数据看板
+ * @param params
+ * @returns
+ */
+export const addDataBoard = (params: AddDataBoardParams) => {
+  return defHttp.post({
+    url: DataBoardUrl.ADD_DATA_BOARD,
+    params,
+  });
+};
+
+/**
+ * @description 编辑数据看吧
+ * @param params
+ * @returns
+ */
+export const updateDataBoard = (params: UpdateDataBoardParams) => {
+  return defHttp.post({
+    url: DataBoardUrl.UPDATE_DATA_BOARD,
+    params,
+  });
+};
+
+/**
+ * @description 删除数据看板
+ * @param params
+ * @returns
+ */
+export const deleteDataBoard = (params: string[]) => {
+  return defHttp.delete({
+    url: DataBoardUrl.DELETE_DATA_BOARD,
+    params: { ids: params },
+  });
+};

+export interface AddDataBoardParams {
+  name: string;
+  viewType: string;
+  remark?: string;
+}
+
+export interface UpdateDataBoardParams extends AddDataBoardParams {
+  id: string;
+}
+
+export interface GetDataBoardParams {
+  page?: number;
+  pageSize?: number;
+  orderFiled?: string;
+  orderType?: string;
+}
+
+export interface Layout {
+  h: number;
+  id: string;
+  w: number;
+  x: number;
+  y: number;
+}
+
+export interface Layout {
+  h: number;
+  id: string;
+  w: number;
+  x: number;
+  y: number;
+}
+
+export interface DataBoardRecord {
+  name: string;
+  roleIds: string[];
+  updater: string;
+  description: string;
+  remark: string;
+  viewType: string;
+  enabled: boolean;
+  updateTime: string;
+  createTime: string;
+  tenantProfileId: string;
+  id: string;
+  tenantExpireTime: string;
+  icon: string;
+  openUrl: string;
+  tenantId: string;
+  creator: string;
+  layout: Layout[];
+  defaultConfig: string;
+  tenantStatus: string;
+}
+
+export interface DataBoardList {
+  items: DataBoardRecord[];
+  total: number;
+}

+<script lang="ts" setup>
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema } from '../config/panelDetail';
+  import { addDataBoard, updateDataBoard } from '/@/api/dataBoard';
+  import { AddDataBoardParams } from '/@/api/dataBoard/model';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import type { DataBoardRecord, UpdateDataBoardParams } from '/@/api/dataBoard/model';
+  import { ref, unref } from 'vue';
+
+  const emit = defineEmits(['change']);
+
+  const isEdit = ref(false);
+  const recordId = ref<Nullable<string>>(null);
+
+  const [registerModal, { changeLoading, closeModal }] = useModalInner(
+    (record: DataBoardRecord & { isEdit: boolean }) => {
+      method.setFieldsValue(record);
+      recordId.value = record.id;
+      isEdit.value = record.isEdit;
+    }
+  );
+
+  const [registerForm, method] = useForm({
+    showActionButtonGroup: false,
+    schemas: formSchema,
+    labelWidth: 80,
+  });
+
+  const { createMessage } = useMessage();
+
+  const handleCreatePanel = async () => {
+    try {
+      const value = method.getFieldsValue() as AddDataBoardParams;
+      changeLoading(true);
+      await addDataBoard(value);
+      createMessage.success('创建成功');
+      closeModal();
+      emit('change');
+    } catch (error) {
+      createMessage.error('创建失败');
+    } finally {
+      changeLoading(false);
+    }
+  };
+
+  const handleEditPanel = async () => {
+    try {
+      const value = method.getFieldsValue() as UpdateDataBoardParams;
+      value.id = unref(recordId) as string;
+      changeLoading(true);
+      await updateDataBoard(value);
+      createMessage.success('编辑成功');
+      closeModal();
+      emit('change');
+    } catch (error) {
+      createMessage.error('编辑失败');
+    } finally {
+      changeLoading(false);
+    }
+  };
+
+  const handleGetValue = () => {
+    unref(isEdit) ? handleEditPanel() : handleCreatePanel();
+  };
+</script>
+
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    :destroyOnClose="true"
+    :title="isEdit ? '编辑看板' : '创建看板'"
+    @register="registerModal"
+    @ok="handleGetValue"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+
+<style scoped></style>

+import { FormSchema } from '/@/components/Form';
+export enum ViewType {
+  PRIVATE_VIEW = 'PRIVATE_VIEW',
+  PUBLIC_VIEW = 'PUBLIC_VIEW',
+}
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '名称',
+    component: 'Input',
+    required: true,
+    componentProps: {
+      placeholder: '请输入看板名称',
+    },
+  },
+  {
+    field: 'viewType',
+    label: '名称',
+    component: 'RadioGroup',
+    defaultValue: ViewType.PRIVATE_VIEW,
+    helpMessage: [
+      '私有视图只有项目成员可以浏览。公开视图拥有一个公开的 URL,任何人无需登录即可浏览。    ',
+    ],
+    componentProps: {
+      placeholder: '请选择公开性',
+      options: [
+        { label: '私有看板', value: ViewType.PRIVATE_VIEW },
+        { label: '公开看板', value: ViewType.PUBLIC_VIEW },
+      ],
+    },
+  },
+  {
+    field: 'remark',
+    label: '备注',
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入看板备注',
+    },
+  },
+];

@@ -4,7 +4,7 @@
   import { nextTick, ref } from 'vue';
   import WidgetWrapper from '../components/WidgetWrapper/WidgetWrapper.vue';
   import BaseWidgetHeader from '../components/WidgetHeader/BaseWidgetHeader.vue';
-  import InformationPanel from '../components/InformationPanel.vue';
+  import InformationPanel from '../components/Other/InformationPanel.vue';
   import { DropMenu } from '/@/components/Dropdown';
   import DataBindModal from './components/DataBindModal.vue';
   import { useModal } from '/@/components/Modal';

 <script lang="ts" setup>
-  import { List, Card, Statistic } from 'ant-design-vue';
-  import { ref, unref } from 'vue';
+  import { List, Card, Statistic, Button, Tooltip } from 'ant-design-vue';
+  import { onMounted, ref, unref } from 'vue';
   import { PageWrapper } from '/@/components/Page';
   import { MoreOutlined, ShareAltOutlined } from '@ant-design/icons-vue';
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { useRouter } from 'vue-router';
   import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
   import { DropMenu } from '/@/components/Dropdown';
   import { MoreActionEvent } from './config/config';
-  const ListItem = List.Item;
+  import { useModal } from '/@/components/Modal';
+  import PanelDetailModal from './components/PanelDetailModal.vue';
+  import { getDataBoardList, deleteDataBoard } from '/@/api/dataBoard';
+  import { DataBoardRecord } from '/@/api/dataBoard/model';
+  import { ViewType } from './config/panelDetail';
+  import { useRouter } from 'vue-router';
 
+  const ListItem = List.Item;
   const router = useRouter();
+
   const { createMessage } = useMessage();
 
-  const data = ref([{ title: 1 }, { title: 2 }, { title: 3 }]);
+  const dataBoardList = ref<DataBoardRecord[]>([]);
   //分页相关
   const page = ref(1);
   const pageSize = ref(36);
@@ -39,8 +45,8 @@
   }
 
   const { clipboardRef } = useCopyToClipboard();
-  const handleCopyShareUrl = () => {
-    clipboardRef.value = '123';
+  const handleCopyShareUrl = (record: DataBoardRecord) => {
+    clipboardRef.value = record.openUrl;
     unref(clipboardRef) && createMessage.success('复制成功');
   };
 
@@ -57,34 +63,75 @@
     },
   ];
 
-  const handleMenuEvent = (event: DropMenu) => {
-    if (event.event === MoreActionEvent.EDIT) {
-      handleEdit();
+  const getDatasource = async () => {
+    try {
+      const { total, items } = await getDataBoardList({
+        page: unref(paginationProp).current,
+        pageSize: unref(paginationProp).pageSize,
+      });
+      dataBoardList.value = items;
+      paginationProp.value.total = total;
+    } catch (error) {
+    } finally {
     }
   };
 
-  const handleEdit = () => {
-    router.push('/data/board/detail/1234');
+  const handleMenuEvent = (event: DropMenu, record: DataBoardRecord) => {
+    if (event.event === MoreActionEvent.EDIT) handleEdit(record);
+    if (event.event === MoreActionEvent.DELETE) handleRemove(record);
+  };
+
+  const handleEdit = (record: DataBoardRecord) => {
+    openModal(true, {
+      isEdit: true,
+      ...record,
+    });
+  };
+
+  const handleOpenDetailModal = () => {
+    openModal();
   };
 
-  const handleRemove = () => {};
+  const handleRemove = async (record: DataBoardRecord) => {
+    // TODO 删除确认
+    try {
+      await deleteDataBoard([record.id]);
+      createMessage.success('删除成功');
+      await getDatasource();
+    } catch (error) {
+      createMessage.error('删除失败');
+    }
+  };
+
+  const [registerModal, { openModal }] = useModal();
+
+  const handleViewBoard = (record: DataBoardRecord) => {
+    router.push(`/data/board/detail/${record.id}`);
+  };
+
+  onMounted(() => {
+    getDatasource();
+  });
 </script>
 
 <template>
   <PageWrapper>
-    <template #header> 自定义看板 </template>
+    <div class="flex mb-6 items-center">
+      <div class="text-lg mr-6 font-bold">自定义看板</div>
+      <Button type="primary" @click="handleOpenDetailModal">创建看板</Button>
+    </div>
     <List
       :pagination="paginationProp"
-      :data-source="data"
+      :data-source="dataBoardList"
       :grid="{ gutter: 5, column: 4, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 3 }"
     >
       <template #renderItem="{ item }">
         <ListItem>
-          <Card class="data-card cursor-pointer">
+          <Card class="data-card cursor-pointer" @click="handleViewBoard(item)">
             <template #extra>
               <Dropdown
                 :trigger="['click']"
-                @menu-event="handleMenuEvent"
+                @menu-event="(event) => handleMenuEvent(event, item)"
                 :drop-menu-list="dropMenuList"
               >
                 <MoreOutlined class="rotate-90 transform cursor-pointer" />
@@ -93,7 +140,7 @@
             <!-- <template #cover>title</template> -->
             <section>
               <div class="flex justify-between items-center">
-                <div>设备看板名</div>
+                <div>{{ item.name }}</div>
                 <div class="flex content-center">
                   <Statistic value="12">
                     <template #suffix>
@@ -104,18 +151,23 @@
               </div>
               <div class="flex justify-between mt-4">
                 <div>
-                  <span>看板类型</span>
                   <span>
-                    <ShareAltOutlined @click="handleCopyShareUrl" />
+                    {{ item.viewType === ViewType.PRIVATE_VIEW ? '私有看板' : '公共看板' }}
+                  </span>
+                  <span v-if="item.viewType === ViewType.PUBLIC_VIEW">
+                    <Tooltip title="分享链接">
+                      <ShareAltOutlined class="ml-2" @click="handleCopyShareUrl(item)" />
+                    </Tooltip>
                   </span>
                 </div>
-                <div>2021-02-11 12:00:00</div>
+                <div>{{ item.updateTime || item.createTime }}</div>
               </div>
             </section>
           </Card>
         </ListItem>
       </template>
     </List>
+    <PanelDetailModal @register="registerModal" @change="getDatasource" />
   </PageWrapper>
 </template>