feat(新建): 修改房间页面

src/api/scene/list.ts

@@ -15,6 +15,8 @@ enum Api {
   downloadSceneData = '/zfb-api/zfb/scene/downloadSceneData',
   getDownloadProcess = '/zfb-api/zfb/scene/getDownloadProcess',
   update = '/zfb-api/zfb/scene/update',
+  listRooms = '/zfb-api/zfb/liveRoom/listRooms',
+  bindUserList = '/zfb-api/zfb/brand/bindUserList',
   generateDefaultLiveRoom = '/zfb-api/zfb/scene/generateDefaultLiveRoom',
 }
 
@@ -32,6 +34,25 @@ export const UpdateApi = (params: UpdateParams) =>
     },
   });
 
+export const bindUserList = (params: UpdateParams) =>
+  defHttp.post<Result>({
+    url: Api.bindUserList,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+export const listRoomsApi = (params: UpdateParams) =>
+  defHttp.post<Result>({
+    url: Api.listRooms,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
 export const ListApi = (params: PageParams) =>
   defHttp.post<RentListGetResultModel>({
     url: Api.pageList,

src/api/scene/live.ts

@@ -24,6 +24,7 @@ enum Api {
   getAllScene = '/zfb-api/zfb/scene/list',
   getBrandInfo = '/zfb-api/zfb/brand/info',
   addSave = '/zfb-api/zfb/brand/save',
+  // addSave = '/zfb-api/zfb/brand/save',
 }
 export type SceneLiveItemResult = SceneLiveItem;
 /**

src/api/staff/list.ts

@@ -30,6 +30,17 @@ export const clean = (params) =>
     },
   });
 
+export const staffListApi = (params: PageParams) =>
+  defHttp.post<ListGetResultModel>({
+    url: Api.pageList,
+    params,
+    data: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
 export const ListApi = (params: PageParams) =>
   defHttp.post<ListGetResultModel>({
     url: Api.pageList,

src/locales/lang/zh-CN/routes/dashboard.ts

@@ -17,6 +17,7 @@ export default {
   scenesDownload: '场景下载',
   scenesList: '场景列表',
   scenesLive: '直播',
+  scenesRoom: '房间管理',
   devices: '设备管理',
   product: '商品管理',
   productRef: '商品属性',

src/locales/lang/zh-CN/routes/scenes.ts

@@ -11,8 +11,11 @@ export default {
   anchorRoom: '直播间名称',
   appListPicUrl: '直播间封面',
   sortOrder: '排序',
+  anchorUserName: '主持人名称',
   isShow: '是否显示',
   livestream: '开播',
+  capacities: '带看模式(人)',
+  listRoomsState: '直播间状态',
   bindShowerNameList: '已绑定主播',
   livestreamStatus: '是否开播',
   liveBroadcast: '直播列表',
@@ -45,8 +48,12 @@ export default {
     9: '全部',
   },
   status: '状态',
+  roomStatus: '房间状态',
   statusText: {
     1: '正常',
     0: '封存',
+    101: '直播中',
+    102: '未开始',
+    103: '已结束',
   },
 };

src/router/routes/modules/scenes.ts

@@ -41,6 +41,15 @@ const scenes: AppRouteModule = {
         icon: 'carbon:flow-stream',
       },
     },
+    {
+      path: 'room',
+      name: 'ScenesRoom',
+      component: () => import('/@/views/scenes/room.vue'),
+      meta: {
+        title: t('routes.dashboard.scenesRoom'),
+        icon: 'carbon:flow-stream',
+      },
+    },
   ],
 };
 

src/views/scenes/room.vue

@@ -0,0 +1,321 @@
+<template>
+  <div class="p-4">
+    <BasicTable @register="registerTable" :rowSelection="{ type: 'checkbox' }">
+      <template #toolbar>
+        <a-button
+          type="primary"
+          v-show="
+            getCheckRole(['super', 'plat_admin']) ||
+            (!getCheckRole(['host', 'tourist', 'company_viewer']) && getEquity([1, 2]))
+          "
+          @click="handleAddLiveScene"
+        >
+          创建房间</a-button
+        >
+      </template>
+      <template #cover="{ record }">
+        <TableImg
+          :size="150"
+          :simpleShow="true"
+          :imgList="[record.appListPicUrl || '/resource/img/pic_bg@2x.png']"
+        />
+      </template>
+      <template #Time="{ record }">
+        <Time :value="record.effectiveStartTime" mode="datetime" />
+      </template>
+      <template #houseType="{ record }">
+        {{ renderHouseType(Number(record.type)) }}
+      </template>
+
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '结束房间',
+              color: 'error',
+              onClick: handleBindAnchor.bind(null, record),
+            },
+            {
+              color: 'warning',
+              label: '编辑',
+              onClick: handleEditLiveScene.bind(null, record),
+            },
+            {
+              color: 'error',
+              label: '删除',
+              popConfirm: {
+                title: '删除房间后，房间信息及数据将进行销毁，是否继续删除？',
+                confirm: handleDeleteLiveScene.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <roomDeital @register="registerModal" @submit="handleAddUser" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, computed } from 'vue';
+  import {
+    BasicTable,
+    useTable,
+    BasicColumn,
+    FormProps,
+    TableAction,
+    TableImg,
+  } from '/@/components/Table';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { Time } from '/@/components/Time';
+  import { LiveSceneDeleteApi } from '/@/api/scene/live';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useUserStore } from '/@/store/modules/user';
+  import { useModal } from '/@/components/Modal';
+  import roomDeital from './roomDeital.vue';
+  import { listRoomsApi } from '/@/api/scene/list';
+
+  export default defineComponent({
+    components: { BasicTable, TableAction, TableImg, roomDeital, Time },
+    setup() {
+      const { createMessage, createConfirm } = useMessage();
+      const userStore = useUserStore();
+      const { getCheckRole, getEquity } = userStore;
+      const { t } = useI18n();
+      const [registerModal, { openModal: addopenModal }] = useModal();
+
+      const permList = computed(() => userStore.getPermList);
+      const columns: BasicColumn[] = [
+        {
+          title: 'ID',
+          dataIndex: 'id',
+          fixed: 'left',
+          width: 100,
+        },
+        {
+          title: t('routes.scenes.anchorRoom'),
+          dataIndex: 'name',
+          ellipsis: false,
+          width: 130,
+        },
+        {
+          title: t('routes.scenes.capacities'),
+          dataIndex: 'capacities',
+          // slots: { customRender: 'houseType' },
+          width: 100,
+        },
+        {
+          title: '主持人',
+          dataIndex: 'anchorUserName',
+          width: 140,
+        },
+        {
+          title: '助理',
+          dataIndex: 'assistantUserName',
+          width: 140,
+        },
+        {
+          title: '助理手机号',
+          dataIndex: 'assistantPhone',
+          width: 140,
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'assistantPhone',
+          width: 140,
+        },
+        {
+          title: '开播时间段',
+          dataIndex: 'assistantPhone',
+          width: 140,
+        },
+        {
+          title: '直播结束时间',
+          dataIndex: 'effectiveEndTime',
+          slots: { customRender: 'Time' },
+          width: 140,
+        },
+        {
+          title: '创建人',
+          dataIndex: 'createUserId',
+          width: 140,
+        },
+        {
+          title: t('routes.scenes.roomStatus'),
+          dataIndex: 'state',
+          width: 180,
+          customRender: ({ record }) => {
+            const enable = record.payStatus == 1;
+            const text = enable ? t('routes.scenes.statusText.1') : t('routes.scenes.statusText.0');
+            return text;
+          },
+        },
+        {
+          title: t('common.operation'),
+          dataIndex: '',
+          slots: { customRender: 'action' },
+          ifShow:
+            (!getCheckRole(['host', 'tourist']) && getEquity(2)) ||
+            getCheckRole(['super', 'plat_admin']),
+          width: 220,
+          fixed: 'right',
+        },
+      ];
+
+      const searchForm: Partial<FormProps> = {
+        labelWidth: 100,
+        schemas: [
+          {
+            field: 'sceneName',
+            label: t('routes.scenes.anchorRoom'),
+            component: 'Input',
+            componentProps: {
+              maxLength: 100,
+            },
+            colProps: {
+              xl: 5,
+              xxl: 5,
+            },
+          },
+          {
+            field: 'anchorUserName',
+            label: t('routes.scenes.anchorUserName'),
+            component: 'Input',
+            componentProps: {
+              maxLength: 100,
+            },
+            colProps: {
+              xl: 5,
+              xxl: 5,
+            },
+          },
+          {
+            field: 'state',
+            label: t('routes.scenes.listRoomsState'),
+            component: 'Select',
+            colProps: {
+              xl: 5,
+              xxl: 5,
+            },
+            defaultValue: '',
+            componentProps: {
+              options: [
+                {
+                  label: t('common.all'),
+                  value: '',
+                  key: '0',
+                },
+                {
+                  label: t('routes.scenes.statusText.101'),
+                  value: 101,
+                  key: '101',
+                },
+                {
+                  label: t('routes.scenes.statusText.102'),
+                  value: 102,
+                  key: '102',
+                },
+                {
+                  label: t('routes.scenes.statusText.103'),
+                  value: 103,
+                  key: '103',
+                },
+              ],
+            },
+          },
+        ],
+      };
+
+      function renderHouseType(type: number): string {
+        switch (type) {
+          case 0:
+            return '新房';
+          case 1:
+            return '二手房';
+          case 2:
+            return '公寓';
+          case 3:
+            return '民宿';
+          case 4:
+            return '装修';
+          default:
+            return t(`routes.scenes.houseType.9`);
+        }
+      }
+
+      const [registerTable, { reload }] = useTable({
+        title: t(`routes.scenes.liveBroadcast`),
+        api: listRoomsApi,
+        columns: columns,
+        useSearchForm: true,
+        formConfig: searchForm,
+        showTableSetting: true,
+        tableSetting: { fullScreen: true },
+        showIndexColumn: false,
+        rowKey: 'id',
+        pagination: { pageSize: 20 },
+        clickToRowSelect: false,
+        fetchSetting: {
+          pageField: 'page',
+          sizeField: 'limit',
+          listField: 'list',
+          totalField: 'totalCount',
+        },
+        sortFn: (sortInfo) => {
+          console.log('sortInfo', sortInfo);
+          let order = sortInfo.order && sortInfo.order.replace('end', '');
+          return { ...sortInfo, sidx: sortInfo.field, order: order };
+        },
+      });
+
+      function handleBindAnchor(record: Recordable) {
+        createConfirm({
+          width: 500,
+          iconType: 'warning',
+          title: '温馨提示',
+          content: `关闭房间后，房间内的所有人都会退出房间，是否继续关闭？<br>（关闭后，房间状态将改为已结束）`,
+          onOk: async () => {
+            console.log('record', record);
+          },
+        });
+      }
+      function openTargetModal() {
+        console.log('openTargetModal');
+        addopenModal(true);
+      }
+      function handleAddLiveScene() {
+        addopenModal(true, {
+          isUpdate: true,
+        });
+      }
+      function handleEditLiveScene(record: Recordable) {
+        openLiveDrawer(true, {
+          record,
+          isUpdate: true,
+        });
+      }
+      async function handleDeleteLiveScene(record: Recordable) {
+        const id = [record.id];
+        await LiveSceneDeleteApi(id);
+        createMessage.success(t('common.optSuccess'));
+        reload();
+      }
+      return {
+        registerTable,
+        createMessage,
+        renderHouseType,
+        t,
+        registerModal,
+        registerBindModal,
+        handleBindAnchor,
+        permList,
+        reload,
+        openTargetModal,
+        handleAddLiveScene,
+        handleDeleteLiveScene,
+        handleEditLiveScene,
+        getCheckRole,
+        getEquity,
+      };
+    },
+  });
+</script>

src/views/scenes/roomDeital.vue

@@ -0,0 +1,241 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    :title="t('routes.corporation.addSubId')"
+    @visible-change="handleVisibleChange"
+    @ok="handleSubmit"
+    @cancel="handleClose"
+  >
+    <div class="pt-2px pr-3px">
+      <BasicForm @register="registerForm">
+        <template #text="{ model, field }">
+          {{ model[field] || '110' }}
+        </template>
+      </BasicForm>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, nextTick } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { checkUserAddAble } from '/@/api/corporation/modal';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { staffListApi } from '/@/api/staff/list';
+  import { ListApi } from '/@/api/scene/live';
+  import { bindUserList } from '/@/api/scene/list';
+  import dayjs from 'dayjs';
+
+  const { t } = useI18n();
+  export default defineComponent({
+    components: { BasicModal, BasicForm },
+    props: {
+      userData: { type: Object },
+    },
+    emits: ['register', 'submit', 'tablelist'],
+    setup(props, { emit }) {
+      const { createMessage } = useMessage();
+      const schemas: FormSchema[] = [
+        {
+          field: 'companyId',
+          label: '直播场景',
+          component: 'ApiSelect',
+          itemProps: {
+            validateTrigger: 'blur',
+          },
+          colProps: {
+            span: 22,
+          },
+          required: true,
+          componentProps: {
+            api: ListApi,
+            showSearch: true,
+            resultField: 'list',
+            labelField: 'name',
+            valueField: 'id',
+            immediate: true,
+            params: {
+              page: 1,
+              limit: 1000,
+            },
+          },
+        },
+        {
+          field: 'companyId',
+          label: '主持人',
+          component: 'ApiSelect',
+          itemProps: {
+            validateTrigger: 'blur',
+          },
+          colProps: {
+            span: 22,
+          },
+          required: true,
+          componentProps: {
+            api: bindUserList,
+            showSearch: true,
+            resultField: 'list',
+            labelField: 'name',
+            valueField: 'id',
+            immediate: true,
+            params: {
+              page: 1,
+              limit: 1000,
+            },
+          },
+        },
+        {
+          field: 'effectiveStartTime',
+          component: 'DatePicker',
+          label: '开始时间',
+          colProps: {
+            span: 22,
+          },
+          componentProps: {
+            onChange: async (data) => {
+              console.log('data', data);
+              setFieldsValue({
+                incrementEndTime: '',
+              });
+            },
+            valueFormat: 'YYYY-MM-DD HH:mm',
+            showTime: true,
+            // disabledDate: (current) => {
+            //   return validateTime(current)
+            // },
+          },
+        },
+        {
+          field: 'incrementEndTime',
+          component: 'DatePicker',
+          label: '计划结束时间',
+          colProps: {
+            span: 22,
+          },
+          componentProps: {
+            valueFormat: 'YYYY-MM-DD HH:mm',
+            showTime: true,
+            disabledDate: validateTime,
+          },
+        },
+        {
+          field: 'roleId',
+          component: 'ApiSelect',
+          label: '助理',
+          required: true,
+          itemProps: {
+            validateTrigger: 'blur',
+          },
+          colProps: {
+            span: 22,
+          },
+          componentProps: {
+            api: staffListApi,
+            resultField: 'list',
+            labelField: 'nickName',
+            valueField: 'id',
+            params: {
+              page: 1,
+              limit: 1000,
+            },
+          },
+        },
+        {
+          field: 'roleId',
+          component: 'ApiRadioGroup',
+          label: '理手机号',
+          required: true,
+          slot: 'text',
+          // itemProps: {
+          //   validateTrigger: 'blur',
+          // },
+          // componentProps: {
+          //   api: roleLIstApi,
+          //   labelField: 'roleName',
+          //   valueField: 'roleId',
+          // },
+        },
+      ];
+      const [
+        registerForm,
+        {
+          getFieldsValue,
+          // validateFields,
+          setFieldsValue,
+          // setProps
+          resetFields,
+          validate,
+        },
+      ] = useForm({
+        labelWidth: 120,
+        schemas,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 24,
+        },
+      });
+      let addListFunc = () => {};
+      const [register, { closeModal }] = useModalInner((data) => {
+        data && onDataReceive(data);
+      });
+
+      function validateTime(current) {
+        let { effectiveStartTime } = getFieldsValue();
+        return !dayjs(effectiveStartTime).isBefore(dayjs(current));
+      }
+
+      function onDataReceive(data) {
+        console.log('Data Received', data);
+      }
+      const handleSubmit = async () => {
+        const values = await validate();
+        let addTips = false;
+        emit('tablelist', (list) => {
+          addTips = list.some((ele) => ele.userName == values.phone);
+        });
+
+        if (addTips) {
+          return createMessage.error('员工账号已被绑定');
+        }
+        //TODO hack parameter
+        let res = await checkUserAddAble({ phone: values.phone });
+        console.log('checkUserAddAble', res);
+        if (res.result == false) {
+          // addListFunc({ phone: values.phone, memoName: values.memoName });
+          emit('submit', {
+            phone: values.phone,
+            memoName: values.memoName,
+            roleId: values.roleId,
+          });
+          resetFields();
+          closeModal();
+        } else {
+          createMessage.error('员工账号已被绑定');
+        }
+      };
+      function handleVisibleChange(v) {
+        v && props.userData && nextTick(() => onDataReceive(props.userData));
+      }
+      function handleClose() {
+        resetFields();
+      }
+      return {
+        t,
+        register,
+        schemas,
+        registerForm,
+        handleVisibleChange,
+        handleSubmit,
+        addListFunc,
+        closeModal,
+        handleClose,
+        getFieldsValue,
+        validateTime,
+        setFieldsValue,
+        // nextTick,
+      };
+    },
+  });
+</script>