feat(ads): 增加基本 page

mock/advertisement/selectAll.ts

@@ -0,0 +1,39 @@
+import { MockMethod } from 'vite-plugin-mock';
+import { mock, Random } from 'mockjs';
+import { resultPageSuccess } from '../_util';
+Random.extend({
+  phone: function () {
+    const phonePrefixs = ['132', '135', '189']; // 自己写前缀哈
+    return this.pick(phonePrefixs) + mock(/\d{8}/); //Number()
+  },
+});
+// console.log(Random.phone());
+// 生成 1 - 10 个 随机手机号码
+
+const demoList = (() => {
+  const result: any[] = [];
+  for (let index = 0; index < 1200; index++) {
+    result.push({
+      id: `${index}`,
+      content: '@cparagraph(1, 3)',
+      createTime: '@datetime',
+      image: `@image('313x200', '@color', '示例slider')`,
+      orderNum: '@integer(0,10)',
+      title: '@ctitle(0,15)',
+      url: null,
+    });
+  }
+  return result;
+})();
+
+export default [
+  {
+    url: '/basic-api/zfb/rotation/selectAll',
+    timeout: 1000,
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 20 } = query;
+      return resultPageSuccess(page, pageSize, demoList);
+    },
+  },
+] as MockMethod[];

mock/advertisement/selectId.ts

@@ -0,0 +1,39 @@
+import { MockMethod } from 'vite-plugin-mock';
+import { mock, Random } from 'mockjs';
+import { resultPageSuccess } from '../_util';
+Random.extend({
+  phone: function () {
+    const phonePrefixs = ['132', '135', '189']; // 自己写前缀哈
+    return this.pick(phonePrefixs) + mock(/\d{8}/); //Number()
+  },
+});
+// console.log(Random.phone());
+// 生成 1 - 10 个 随机手机号码
+
+const demoList = (() => {
+  const result: any[] = [];
+  for (let index = 0; index < 1200; index++) {
+    result.push({
+      id: `${index}`,
+      content: '@cparagraph(1, 3)',
+      createTime: '@datetime',
+      image: `@image('313x200', '@color', '示例slider')`,
+      orderNum: '@integer(0,10)',
+      title: '@ctitle(0,15)',
+      url: null,
+    });
+  }
+  return result;
+})();
+
+export default [
+  {
+    url: '/basic-api/zfb/rotation/selectAll',
+    timeout: 1000,
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 20 } = query;
+      return resultPageSuccess(page, pageSize, demoList);
+    },
+  },
+] as MockMethod[];

src/api/advertisement/list.ts

@@ -0,0 +1,30 @@
+import { defHttp } from '/@/utils/http/axios';
+import { PageParams, ListGetResultModel } from './model';
+
+enum Api {
+  selectAll = '/zfb/rotation/selectAll',
+  recommend = '/zfb/recommend/selectByType',
+}
+
+/**
+ * @description: Get sample list value
+ */
+
+export const ListApi = (params: PageParams) =>
+  defHttp.get<ListGetResultModel>({
+    url: Api.selectAll,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+export const RecommendListApi = (params: PageParams) =>
+  defHttp.get<ListGetResultModel>({
+    url: Api.recommend,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });

src/api/advertisement/model.ts

@@ -0,0 +1,20 @@
+import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
+/**
+ * @description: Request list interface parameters
+ */
+export type PageParams = BasicPageParams;
+
+export interface ListItem {
+  id: number;
+  content: string;
+  createTime: string;
+  image: string;
+  orderNum: number;
+  title: string;
+  url: string;
+}
+
+/**
+ * @description: Request list return value
+ */
+export type ListGetResultModel = BasicFetchResult<ListItem>;

src/locales/lang/en/routes/dashboard.ts

@@ -9,12 +9,14 @@ export default {
   bulletin: 'bulletin',
   bulletinRentInfo: 'rent info',
   bulletinSellInfo: 'sell info',
-  bulletinDecoration: 'construct decoration',
+  bulletinDecoration: `decoration' info`,
   advertisement: 'advertisement',
-  advertisementList: 'advertisement list',
-  advertisementPads: 'advertisement recommendation',
+  advertisementList: `ads's list`,
+  advertisementPads: `recommendation`,
+  scenes: 'scenes',
   scenesDownload: 'scenes download',
-  scenesManger: 'scenes manger',
+  scenesList: 'scenes list',
+  scenesLive: 'scenes live',
   devices: 'devices Manger',
   product: 'product',
   productRef: 'product ref',

src/views/dashboard/advertisement/list.vue

@@ -1,5 +1,105 @@
 <template>
-  <div> 轮播图 </div>
+  <div class="p-4">
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="addSlider">新增</a-button>
+      </template>
+      <template #img="{ record }">
+        <TableImg :size="200" :simpleShow="true" :imgList="[record.image]" />
+      </template>
+      <template #action>
+        <TableAction
+          :actions="[
+            {
+              icon: 'clarity:note-edit-line',
+              label: '编辑',
+              onClick: () => {
+                createMessage.info(`暂未接入`);
+              },
+            },
+            {
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              label: '删除',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: () => {
+                  createMessage.info(`暂未接入`);
+                },
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+  </div>
 </template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable, BasicColumn, TableAction, TableImg } from '/@/components/Table';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  // import { Tag } from 'ant-design-vue';
 
-<script lang="ts" setup></script>
+  import { ListApi } from '/@/api/advertisement/list';
+  // param type 2
+  export default defineComponent({
+    components: { BasicTable, TableAction, TableImg },
+    setup() {
+      const { createMessage } = useMessage();
+      const columns: BasicColumn[] = [
+        {
+          title: '序号',
+          dataIndex: 'id',
+          fixed: 'left',
+          width: 100,
+        },
+        {
+          title: '封面',
+          dataIndex: 'image',
+          slots: { customRender: 'img' },
+          width: 230,
+        },
+        {
+          title: '标题',
+          dataIndex: 'title',
+          width: 230,
+        },
+        {
+          title: '编辑时间',
+          dataIndex: 'createTime',
+          width: 150,
+        },
+
+        {
+          title: '操作',
+          dataIndex: '',
+          fixed: 'right',
+          slots: { customRender: 'action' },
+          width: 150,
+        },
+      ];
+
+      const addSlider = () => {
+        console.log('add');
+      };
+      // { getForm }
+      const [registerTable] = useTable({
+        title: '轮播图',
+        api: ListApi,
+        columns: columns,
+        useSearchForm: false,
+
+        showTableSetting: true,
+        tableSetting: { fullScreen: true },
+        showIndexColumn: false,
+        rowKey: 'id',
+      });
+      // pagination.value = { pageSize: 20 };
+      return {
+        registerTable,
+        createMessage,
+        addSlider,
+      };
+    },
+  });
+</script>

src/views/dashboard/advertisement/pads.vue

@@ -1,5 +1,155 @@
 <template>
-  <div> 推荐位 </div>
+  <div class="p-4">
+    <BasicTable @register="registerTable">
+      <template #toolbar> </template>
+      <template #img="{ record }">
+        <TableImg :size="200" :simpleShow="true" :imgList="[record.image]" />
+      </template>
+      <template #action>
+        <TableAction
+          :actions="[
+            {
+              icon: 'clarity:note-edit-line',
+              label: '编辑',
+              onClick: () => {
+                createMessage.info(`暂未接入`);
+              },
+            },
+            {
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              label: '删除',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: () => {
+                  createMessage.info(`暂未接入`);
+                },
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+  </div>
 </template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import {
+    BasicTable,
+    useTable,
+    BasicColumn,
+    FormProps,
+    TableAction,
+    TableImg,
+  } from '/@/components/Table';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  // import { Tag } from 'ant-design-vue';
 
-<script lang="ts" setup></script>
+  import { ListApi } from '/@/api/advertisement/list';
+  // param type 2
+  export default defineComponent({
+    components: { BasicTable, TableAction, TableImg },
+    setup() {
+      const { createMessage } = useMessage();
+      const columns: BasicColumn[] = [
+        {
+          title: '序号',
+          dataIndex: 'id',
+          fixed: 'left',
+          width: 100,
+        },
+        {
+          title: '封面',
+          dataIndex: 'image',
+          slots: { customRender: 'img' },
+          width: 230,
+        },
+        {
+          title: '标题',
+          dataIndex: 'title',
+          width: 230,
+        },
+        {
+          title: '编辑时间',
+          dataIndex: 'createTime',
+          width: 150,
+        },
+
+        {
+          title: '操作',
+          dataIndex: '',
+          fixed: 'right',
+          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: ListApi,
+        columns: columns,
+        useSearchForm: true,
+        formConfig: searchForm,
+        showTableSetting: true,
+        tableSetting: { fullScreen: true },
+        showIndexColumn: false,
+        rowKey: 'id',
+      });
+      // pagination.value = { pageSize: 20 };
+      return {
+        registerTable,
+        createMessage,
+      };
+    },
+  });
+</script>