feat(scenes): add device live page

mock/scene/live.ts

@@ -0,0 +1,44 @@
+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 < 200; index++) {
+    result.push({
+      id: `${index}`,
+      name: '@ctitle(5,15)',
+      cover: `@image('313x200', '@color', 'demo封面')`,
+      'houseType|1': [0, 1, 2, 3, 4],
+      'order|1': '@integer(1,200)',
+      hoster: {
+        'id|1': '@integer(1,100)',
+        name: '@cname',
+      },
+      link: `https://zfb.4dkankan.com/smobile.html?m=@string( 'lower/number',5,10)`,
+      createTime: '@datetime',
+      isSteam: '@boolean(1, 9, true)',
+    });
+  }
+  return result;
+})();
+
+export default [
+  {
+    url: '/basic-api/zfb/scene/live',
+    timeout: 1000,
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 20 } = query;
+      return resultPageSuccess(page, pageSize, demoList);
+    },
+  },
+] as MockMethod[];

src/api/scene/live.ts

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

src/views/dashboard/devices/list.vue

@@ -61,6 +61,11 @@
           width: 230,
         },
         {
+          title: '客户名称',
+          dataIndex: 'companyName',
+          width: 120,
+        },
+        {
           title: '设备类型',
           dataIndex: 'cameraType',
           width: 230,
@@ -87,11 +92,6 @@
           slots: { customRender: 'own' },
           width: 120,
         },
-        {
-          title: '客户名称',
-          dataIndex: 'companyName',
-          width: 120,
-        },
       ];
 
       const searchForm: Partial<FormProps> = {

src/views/dashboard/scenes/list.vue

@@ -154,6 +154,7 @@
         tableSetting: { fullScreen: true },
         showIndexColumn: false,
         rowKey: 'id',
+        pagination: { pageSize: 20 },
       });
 
       // pagination.value = { pageSize: 20 };

src/views/dashboard/scenes/live.vue

@@ -1,5 +1,203 @@
 <template>
-  <div> 场景直播 </div>
+  <div class="p-4">
+    <BasicTable @register="registerTable">
+      <template #toolbar> </template>
+      <template #cover="{ record }">
+        <TableImg :size="150" :simpleShow="true" :imgList="[record.cover]" />
+      </template>
+      <template #houseType="{ record }">
+        {{ renderHouseType(record.houseType) }}
+      </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 { uploadApi } from '/@/api/sys/upload';
+  import { Switch } from 'ant-design-vue';
+  import { h } from 'vue';
+  import { ListApi } from '/@/api/scene/live';
+  import { useI18n } from '/@/hooks/web/useI18n';
 
-<script lang="ts" setup></script>
+  export default defineComponent({
+    components: { BasicTable, TableAction, TableImg },
+    setup() {
+      const { createMessage } = useMessage();
+      const { t } = useI18n();
+
+      const columns: BasicColumn[] = [
+        {
+          title: 'ID',
+          dataIndex: 'id',
+          fixed: 'left',
+          width: 100,
+        },
+        {
+          title: '直播间名称',
+          dataIndex: 'name',
+          width: 130,
+        },
+        {
+          title: '类型',
+          dataIndex: 'houseType',
+          slots: { customRender: 'houseType' },
+          width: 100,
+        },
+        {
+          title: '直播间封面',
+          dataIndex: 'cover',
+          slots: { customRender: 'cover' },
+          width: 150,
+        },
+        {
+          title: '排序',
+          dataIndex: 'order',
+          width: 150,
+          sorter: true,
+        },
+        {
+          title: '场景链接',
+          dataIndex: 'link',
+          slots: { customRender: 'link' },
+          width: 180,
+        },
+        {
+          title: '是否开播',
+          dataIndex: 'isSteam',
+          width: 180,
+          customRender: ({ record }) => {
+            if (!Reflect.has(record, 'pendingStatus')) {
+              record.pendingStatus = false;
+            }
+            return h(Switch, {
+              checked: record.isSteam,
+              checkedChildren: t('common.yes'),
+              unCheckedChildren: t('common.no'),
+              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: 120,
+        },
+      ];
+
+      const searchForm: Partial<FormProps> = {
+        labelWidth: 100,
+        schemas: [
+          {
+            field: 'id',
+            label: 'id',
+            component: 'Input',
+            colProps: {
+              xl: 3,
+              xxl: 3,
+            },
+          },
+          {
+            field: 'userName',
+            label: '企业账号',
+            component: 'Input',
+            colProps: {
+              xl: 12,
+              xxl: 8,
+            },
+          },
+        ],
+      };
+      function renderHouseType(type: number): string {
+        switch (type) {
+          case 0:
+            return '新房';
+          case 1:
+            return '二手房';
+          case 2:
+            return '公寓';
+          case 3:
+            return '民宿';
+          default:
+            return '全部';
+        }
+      }
+
+      const [registerTable] = useTable({
+        title: '直播列表',
+        api: ListApi,
+        columns: columns,
+        useSearchForm: false,
+        formConfig: searchForm,
+        showTableSetting: true,
+        tableSetting: { fullScreen: true },
+        showIndexColumn: false,
+        rowKey: 'id',
+        pagination: { pageSize: 20 },
+        defSort: {
+          field: 'order',
+          order: 'asc',
+        },
+      });
+
+      return {
+        registerTable,
+        createMessage,
+        renderHouseType,
+        t,
+        uploadApi: uploadApi as any,
+      };
+    },
+  });
+</script>