feat:“ 接口对接

src/api/model/baseModel.ts

 export interface BasicPageParams {
-  page: number;
+  pageNum: number;
   pageSize: number;
 }
 

src/api/project/model/projectModel.ts

+import { BasicPageParams } from '@/api/model/baseModel';
+
+export type ProjectParams = {
+  projectName?: string;
+};
+
+export type ProjectPageParams = BasicPageParams & ProjectParams;
+export interface ProjectListItem {
+  id: string;
+  project_name: string;
+  is_reserve_projecte: string;
+  construction_site: string;
+  construction_mode: string;
+  project_type: string;
+  project_overview: string;
+  construction_purpose: string;
+  del_flag: string;
+  construction_scale: string;
+  funding_source: string;
+  implementing_entity: string;
+  logo: string;
+  create_time: null;
+  create_by: string;
+  update_time: null;
+  update_by: string;
+}
+
+export type ProjectListGetResultModel = ProjectListItem[];

src/api/project/project.ts

+import { ProjectParams, ProjectListGetResultModel } from './model/projectModel';
+import { defHttp } from '@/utils/http/axios';
+
+enum Api {
+  GetAllProjectList = '/mgapi/project/project/list/page',
+}
+export const getProjectListByPage = (params?: ProjectParams) =>
+  defHttp.post<ProjectListGetResultModel>({ url: Api.GetAllProjectList, data: params });

src/api/sys/user.ts

@@ -35,7 +35,7 @@ export function loginApi(params: LoginParams, mode: ErrorMessageMode = 'modal')
  * @description: getUserInfo
  */
 export function getUserInfo() {
-  return defHttp.get<GetUserInfoModel>(
+  return defHttp.get<any>(
     {
       url: Api.GetUserInfo,
     },

src/components/Table/src/hooks/useDataSource.ts

@@ -278,6 +278,7 @@ export function useDataSource(
       }
       searchInfoRef.value = params;
       const res = await api(params);
+      console.log(res);
       rawDataSourceRef.value = res;
 
       const isArrayResult = Array.isArray(res);

src/settings/componentSetting.ts

@@ -9,7 +9,7 @@ export default {
     // support xxx.xxx.xxx
     fetchSetting: {
       // The field name of the current page passed to the background
-      pageField: 'page',
+      pageField: 'pageNum',
       // The number field name of each page displayed in the background
       sizeField: 'pageSize',
       // Field name of the form data returned by the interface

src/store/modules/user.ts

@@ -105,7 +105,7 @@ export const useUserStore = defineStore({
       }
     },
     async afterLoginAction(goHome?: boolean): Promise<GetUserInfoModel | null> {
-      // if (!this.getToken) return null;
+      if (!this.getToken) return null;
       // get user info
       const userInfo = await this.getUserInfoAction();
       const sessionTimeout = this.sessionTimeout;
@@ -129,9 +129,8 @@ export const useUserStore = defineStore({
       return userInfo;
     },
     async getUserInfoAction(): Promise<UserInfo | null> {
-      // if (!this.getToken) return null;
+      if (!this.getToken) return null;
       const userInfo = await getUserInfo();
-      const { data } = userInfo;
       // if (isArray(roles)) {
       //   const roleList = roles.map((item) => item.value) as RoleEnum[];
       //   this.setRoleList(roleList);
@@ -141,16 +140,16 @@ export const useUserStore = defineStore({
       // }
       const info = {
         //用户id
-        userId: data.userId,
+        userId: userInfo.userId,
         // 用户名
-        username: data.userName,
+        username: userInfo.userName,
         // 真实名字
-        realName: data.userName,
+        realName: userInfo.userName,
         // 头像
         avatar: '',
         // 介绍
         desc: '',
-        roles: data.roles,
+        roles: userInfo.roles,
       };
       this.setUserInfo(info);
       return info;

src/utils/http/axios/index.ts

@@ -44,29 +44,29 @@ const transform: AxiosTransform = {
       return res.data;
     }
     // 错误的时候返回
-
-    const { data } = res;
-    if (!data) {
+    if (!res.data) {
       // return '[HTTP] Request has no return value';
       throw new Error(t('sys.api.apiRequestFailed'));
     }
+
     //  这里 code，msg 为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
-    const { code, msg } = data;
+    const { code, data, msg, message } = res.data;
+    console.log(1);
 
     // 这里逻辑可以根据项目进行修改
-    const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS;
+    const hasSuccess =
+      res.data && Reflect.has(res.data, 'code') && (code === ResultEnum.SUCCESS || code === 1);
     if (hasSuccess) {
-      let successMsg = msg;
-
+      let successMsg = msg || message;
       if (isNull(successMsg) || isUndefined(successMsg) || isEmpty(successMsg)) {
         successMsg = t(`sys.api.operationSuccess`);
       }
-
       if (options.successMessageMode === 'modal') {
         createSuccessModal({ title: t('sys.api.successTip'), content: successMsg });
       } else if (options.successMessageMode === 'message') {
         createMessage.success(successMsg);
       }
+
       return data;
     }
 
@@ -236,7 +236,7 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
         // 基础接口地址
         // baseURL: globSetting.apiUrl,
 
-        headers: { 'Content-Type': ContentTypeEnum.JSON },
+        headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
         // 如果是form-data格式
         // headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
         // 数据处理方式

src/views/project/RoleDrawer.vue

+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="500px"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm">
+      <template #menu="{ model, field }">
+        <BasicTree
+          v-model:value="model[field]"
+          :treeData="treeData"
+          :fieldNames="{ title: 'menuName', key: 'id' }"
+          checkable
+          toolbar
+          title="菜单分配"
+        />
+      </template>
+    </BasicForm>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { formSchema } from './project.data';
+  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
+  import { BasicTree, TreeItem } from '@/components/Tree';
+
+  import { getMenuList } from '@/api/demo/system';
+
+  const emit = defineEmits(['success', 'register']);
+  const isUpdate = ref(true);
+  const treeData = ref<TreeItem[]>([]);
+
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    labelWidth: 90,
+    baseColProps: { span: 24 },
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    resetFields();
+    setDrawerProps({ confirmLoading: false });
+    // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
+    if (unref(treeData).length === 0) {
+      treeData.value = (await getMenuList()) as any as TreeItem[];
+    }
+    isUpdate.value = !!data?.isUpdate;
+
+    if (unref(isUpdate)) {
+      setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setDrawerProps({ confirmLoading: true });
+      // TODO custom api
+      console.log(values);
+      closeDrawer();
+      emit('success');
+    } finally {
+      setDrawerProps({ confirmLoading: false });
+    }
+  }
+</script>

src/views/project/index.vue

 <template>
-  <div class="con">
-    <Row>
-      <Col :span="2.4">
-        <Statistic title="项目总数" :value="200" />
-      </Col>
-      <Col :span="2.4">
-        <Statistic title="自建" :precision="2" :value="50" />
-      </Col>
-    </Row>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreate"> 新增项目 </a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'clarity:note-edit-line',
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <RoleDrawer @register="registerDrawer" @success="handleSuccess" />
   </div>
 </template>
 <script lang="ts" setup>
-  import { Row, Col, Statistic } from 'ant-design-vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { getProjectListByPage } from '@/api/project/project';
+
+  import { useDrawer } from '@/components/Drawer';
+  import RoleDrawer from './RoleDrawer.vue';
+
+  import { columns, searchFormSchema } from './project.data';
+
+  defineOptions({ name: 'RoleManagement' });
+
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  const [registerTable, { reload }] = useTable({
+    title: '项目列表',
+    api: getProjectListByPage,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+    actionColumn: {
+      width: 80,
+      title: '操作',
+      dataIndex: 'action',
+      // slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
+
+  function handleCreate() {
+    openDrawer(true, {
+      isUpdate: false,
+    });
+  }
+
+  function handleEdit(record: Recordable) {
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  function handleDelete(record: Recordable) {
+    console.log(record);
+  }
+
+  function handleSuccess() {
+    reload();
+  }
 </script>

src/views/project/project.data.ts

+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import { Switch } from 'ant-design-vue';
+import { setRoleStatus } from '@/api/demo/system';
+import { useMessage } from '@/hooks/web/useMessage';
+
+type CheckedType = boolean | string | number;
+export const columns: BasicColumn[] = [
+  {
+    title: '项目名称',
+    dataIndex: 'project_name',
+    width: 200,
+  },
+  {
+    title: '实施主体',
+    dataIndex: 'implementing_entity',
+    width: 180,
+  },
+  {
+    title: '建设模式',
+    dataIndex: 'construction_mode',
+    width: 180,
+  },
+  {
+    title: '项目类型',
+    dataIndex: 'project_type',
+    width: 180,
+  },
+  {
+    title: '资金来源',
+    dataIndex: 'funding_source',
+    width: 180,
+  },
+  {
+    title: '建设目的及项目功能',
+    dataIndex: 'construction_purpose',
+    width: 180,
+  },
+  {
+    title: '建设规模',
+    dataIndex: '国construction_scale',
+    width: 180,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'ProjecName',
+    label: '项目名称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  // {
+  //   field: 'status',
+  //   label: '状态',
+  //   component: 'Select',
+  //   componentProps: {
+  //     options: [
+  //       { label: '启用', value: '1' },
+  //       { label: '停用', value: '0' },
+  //     ],
+  //   },
+  //   colProps: { span: 8 },
+  // },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'roleName',
+    label: '角色名称',
+    required: true,
+    component: 'Input',
+  },
+  {
+    field: 'roleValue',
+    label: '角色值',
+    required: true,
+    component: 'Input',
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'RadioButtonGroup',
+    defaultValue: '0',
+    componentProps: {
+      options: [
+        { label: '启用', value: '1' },
+        { label: '停用', value: '0' },
+      ],
+    },
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    component: 'InputTextArea',
+  },
+  {
+    label: ' ',
+    field: 'menu',
+    slot: 'menu',
+  },
+];

types/axios.d.ts

@@ -37,8 +37,9 @@ export interface RetryRequest {
 }
 export interface Result<T = any> {
   code: number;
-  dara: T;
-  msg: string;
+  data?: T;
+  msg?: string;
+  message?: string;
 }
 
 // multipart/form-data: upload file