feat(bulletin): 增加基本 rent page

mock/house/selectHouseByType.ts

@@ -34,7 +34,7 @@ const demoList = (() => {
 
       buildingId: '@integer(1,20)',
       buildingNum: null,
-      companyName: null,
+      companyName: '@ctitle(10,20)',
       coveredArea: null,
       createTime: '@datetime',
       decorate: null,
@@ -46,18 +46,18 @@ const demoList = (() => {
       houseNum: null,
       latitude: null,
       longitude: null,
-      name: null,
+      name: '@ctitle(10,20)',
       nickName: null,
       orientation: null,
       parlourNum: null,
-      phone: null,
+      phone: phone,
       power: null,
       price: null,
       purpose: null,
       roomNum: null,
       sellTime: null,
       startTime: null,
-      state: 0,
+      'state|1': ['0', '1'],
       title: '@ctitle(10,15)',
       toiletNum: null,
       total: null,

src/api/bulletin/model.ts

@@ -0,0 +1,17 @@
+import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
+/**
+ * @description: Request list interface parameters
+ */
+export type PageParams = BasicPageParams;
+
+export interface ListItem {
+  id: number;
+  name: string;
+  companyName: string;
+  state: string;
+}
+
+/**
+ * @description: Request list return value
+ */
+export type RentListGetResultModel = BasicFetchResult<ListItem>;

src/api/bulletin/rent.ts

@@ -0,0 +1,20 @@
+import { defHttp } from '/@/utils/http/axios';
+import { PageParams, RentListGetResultModel } from './model';
+
+enum Api {
+  selectHouseByType = '/zfb/house/selectHouseByType',
+}
+
+/**
+ * @description: Get sample list value
+ */
+
+export const RentListApi = (params: PageParams) =>
+  defHttp.get<RentListGetResultModel>({
+    url: Api.selectHouseByType,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });

src/api/model/baseModel.ts

@@ -26,24 +26,3 @@ export interface BasicFetchResult<T> {
   size: number;
   startRow: number;
 }
-
-// endRow: 10
-// firstPage: 1
-// hasNextPage: true
-// hasPreviousPage: false
-// isFirstPage: true
-// isLastPage: false
-// lastPage: 8
-// list: []
-// navigateFirstPage: 1
-// navigateLastPage: 8
-// navigatePages: 8
-// navigatepageNums: [1, 2, 3, 4, 5, 6, 7, 8]
-// nextPage: 2
-// pageNum: 1
-// pageSize: 10
-// pages: 13
-// prePage: 0
-// size: 10
-// startRow: 1
-// total: 130

src/router/routes/modules/corporation.ts

@@ -12,7 +12,7 @@ const corporation: AppRouteModule = {
     // hideChildrenInMenu: true,
     icon: 'carbon:location-company',
     title: t('routes.dashboard.corporation'),
-    orderNo: 10,
+    orderNo: 11,
   },
   children: [
     {

src/router/routes/modules/dashboard.ts

@@ -9,7 +9,7 @@ const dashboard: AppRouteModule = {
   component: LAYOUT,
   redirect: '/dashboard/analysis',
   meta: {
-    orderNo: 1000,
+    orderNo: 10,
     icon: 'ion:grid-outline',
     title: t('routes.dashboard.dashboard'),
   },

src/views/dashboard/bulletin/rent.vue

@@ -1,5 +1,170 @@
 <template>
-  <div> 出租信息 </div>
+  <div class="p-4">
+    <BasicTable @register="registerTable">
+      <template #toolbar> </template>
+      <template #action>
+        <TableAction
+          :actions="[
+            {
+              icon: 'clarity:note-edit-line',
+              label: '编辑',
+              onClick: () => {},
+            },
+            {
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              label: '删除',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: () => {},
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+  </div>
 </template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable, BasicColumn, FormProps, TableAction } from '/@/components/Table';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  // import { Tag } from 'ant-design-vue';
+  import { h } from 'vue';
+  import { Switch } from 'ant-design-vue';
+  import { RentListApi } from '/@/api/bulletin/rent';
 
-<script lang="ts" setup></script>
+  export default defineComponent({
+    components: { BasicTable, TableAction },
+    setup() {
+      const columns: BasicColumn[] = [
+        {
+          title: 'ID',
+          dataIndex: 'id',
+          fixed: 'left',
+          width: 100,
+        },
+        {
+          title: '发布时间',
+          dataIndex: 'name',
+          width: 230,
+        },
+        {
+          title: '信息标题',
+          dataIndex: 'title',
+          width: 230,
+        },
+        {
+          title: '发布账号',
+          dataIndex: 'phone',
+          width: 120,
+        },
+        {
+          title: '状态',
+          dataIndex: 'state',
+          width: 180,
+          customRender: ({ record }) => {
+            if (!Reflect.has(record, 'pendingStatus')) {
+              record.pendingStatus = false;
+            }
+            return h(Switch, {
+              checked: record.state === '1',
+              checkedChildren: '已启用',
+              unCheckedChildren: '已禁用',
+              loading: false,
+              onChange(checked: boolean) {
+                record.pendingStatus = true;
+                const newStatus = checked ? '1' : '0';
+                const { createMessage } = useMessage();
+                createMessage.info(`暂未接入` + newStatus);
+                // setRoleStatus(record.id, newStatus)
+                //   .then(() => {
+                //     record.status = newStatus;
+                //     createMessage.success(`已成功修改角色状态`);
+                //   })
+                //   .catch(() => {
+                //     createMessage.error('修改角色状态失败');
+                //   })
+                //   .finally(() => {
+                //     record.pendingStatus = false;
+                //   });
+              },
+            });
+          },
+        },
+        {
+          title: '操作',
+          dataIndex: '',
+          slots: { customRender: 'action' },
+          width: 150,
+        },
+      ];
+
+      const searchForm: Partial<FormProps> = {
+        labelWidth: 100,
+        schemas: [
+          {
+            field: 'part',
+            component: 'Select',
+            label: '选择',
+            defaultValue: '1',
+            colProps: {
+              span: 4,
+            },
+            componentProps: {
+              options: [
+                {
+                  label: '全部',
+                  value: '1',
+                  key: '1',
+                },
+                {
+                  label: '正常',
+                  value: '2',
+                  key: '2',
+                },
+                {
+                  label: '已关闭',
+                  value: '2',
+                  key: '2',
+                },
+              ],
+            },
+          },
+          {
+            field: 'phone',
+            label: '手机号',
+            component: 'Input',
+            colProps: {
+              span: 6,
+            },
+          },
+          {
+            field: 'fieldTime',
+            component: 'RangePicker',
+            label: '时间字段',
+            colProps: {
+              span: 8,
+            },
+          },
+        ],
+      };
+      // { getForm }
+      const [registerTable] = useTable({
+        title: '出租信息',
+        api: RentListApi,
+        columns: columns,
+        useSearchForm: true,
+        formConfig: searchForm,
+        showTableSetting: true,
+        tableSetting: { fullScreen: true },
+        showIndexColumn: false,
+        rowKey: 'id',
+      });
+      // pagination.value = { pageSize: 20 };
+      return {
+        registerTable,
+      };
+    },
+  });
+</script>