feat(room): 修改房间管理

src/api/scene/list.ts

@@ -17,6 +17,9 @@ enum Api {
   update = '/zfb-api/zfb/scene/update',
   listRooms = '/zfb-api/zfb/liveRoom/listRooms',
   bindUserList = '/zfb-api/zfb/brand/bindUserList',
+  createOrUpdate = '/zfb-api/zfb/liveRoom/createOrUpdate',
+  dismissRoom = '/zfb-api/zfb/liveRoom/dismissRoom',
+  deleteRoom = '/zfb-api/zfb/liveRoom/deleteRoom',
   generateDefaultLiveRoom = '/zfb-api/zfb/scene/generateDefaultLiveRoom',
 }
 
@@ -44,6 +47,36 @@ export const bindUserList = (params: UpdateParams) =>
     },
   });
 
+export const deleteRoom = (params) =>
+  defHttp.post<Result>({
+    url: Api.deleteRoom,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+export const dismissRoom = (params) =>
+  defHttp.post<Result>({
+    url: Api.dismissRoom,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+export const createOrUpdate = (params) =>
+  defHttp.post<Result>({
+    url: Api.createOrUpdate,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
 export const listRoomsApi = (params: UpdateParams) =>
   defHttp.post<Result>({
     url: Api.listRooms,

src/views/scenes/room.vue

@@ -23,40 +23,26 @@
       <template #Time="{ record }">
         <Time :value="record.effectiveStartTime" mode="datetime" />
       </template>
+
+      <template #liveTime="{ record }">
+        <Time :value="record.effectiveStartTime" mode="datetime" />
+        <br />
+        <Time :value="record.effectiveEndTime" 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),
-              },
-            },
-          ]"
-        />
+        <TableAction :actions="renderActions(record)" />
       </template>
     </BasicTable>
-    <roomDeital @register="registerModal" @submit="handleAddUser" />
+    <roomDeital @success="reload" @register="registerModal" @submit="handleAddUser" />
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, computed } from 'vue';
+  import { defineComponent, computed, toRaw } from 'vue';
   import {
     BasicTable,
     useTable,
@@ -67,12 +53,12 @@
   } from '/@/components/Table';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { Time } from '/@/components/Time';
-  import { LiveSceneDeleteApi } from '/@/api/scene/live';
+  // 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';
+  import { listRoomsApi, dismissRoom, deleteRoom } from '/@/api/scene/list';
 
   export default defineComponent({
     components: { BasicTable, TableAction, TableImg, roomDeital, Time },
@@ -82,7 +68,6 @@
       const { getCheckRole, getEquity } = userStore;
       const { t } = useI18n();
       const [registerModal, { openModal: addopenModal }] = useModal();
-
       const permList = computed(() => userStore.getPermList);
       const columns: BasicColumn[] = [
         {
@@ -125,18 +110,19 @@
         },
         {
           title: '开播时间段',
-          dataIndex: 'assistantPhone',
-          width: 140,
+          dataIndex: 'effectiveStartTime',
+          slots: { customRender: 'liveTime' },
+          width: 180,
         },
         {
           title: '直播结束时间',
           dataIndex: 'effectiveEndTime',
           slots: { customRender: 'Time' },
-          width: 140,
+          width: 150,
         },
         {
           title: '创建人',
-          dataIndex: 'createUserId',
+          dataIndex: 'createUserName',
           width: 140,
         },
         {
@@ -144,8 +130,8 @@
           dataIndex: 'state',
           width: 180,
           customRender: ({ record }) => {
-            const enable = record.payStatus == 1;
-            const text = enable ? t('routes.scenes.statusText.1') : t('routes.scenes.statusText.0');
+            const enable = record.state;
+            const text = renderRoomType(enable); // ? t('routes.scenes.statusText.1') : t('routes.scenes.statusText.0');
             return text;
           },
         },
@@ -156,7 +142,7 @@
           ifShow:
             (!getCheckRole(['host', 'tourist']) && getEquity(2)) ||
             getCheckRole(['super', 'plat_admin']),
-          width: 220,
+          width: 100,
           fixed: 'right',
         },
       ];
@@ -242,6 +228,29 @@
         }
       }
 
+      function renderRoomType(type: number): string {
+        switch (type) {
+          case 0:
+            return '新房';
+          case 1:
+            return '二手房';
+          case 2:
+            return '公寓';
+          case 3:
+            return '民宿';
+          case 4:
+            return '装修';
+          case 101:
+            return t('routes.scenes.statusText.101');
+          case 102:
+            return t('routes.scenes.statusText.102');
+          case 103:
+            return t('routes.scenes.statusText.103');
+          default:
+            return t(`routes.scenes.houseType.9`);
+        }
+      }
+
       const [registerTable, { reload }] = useTable({
         title: t(`routes.scenes.liveBroadcast`),
         api: listRoomsApi,
@@ -278,39 +287,112 @@
           },
         });
       }
-      function openTargetModal() {
-        console.log('openTargetModal');
-        addopenModal(true);
+      function openTargetModal(record: Recordable) {
+        addopenModal(true, {
+          isUpdate: true,
+          record: toRaw(record),
+        });
       }
       function handleAddLiveScene() {
+        addopenModal(true, {});
+      }
+
+      function handleSeeLiveScene(record: Recordable) {
+        let setRecord = toRaw(record);
         addopenModal(true, {
-          isUpdate: true,
+          isSetData: true,
+          record: {
+            ...setRecord,
+            brandId: setRecord.brandName,
+            anchorUserId: setRecord.anchorUserName,
+            assistantUserId: setRecord.assistantUserName,
+          },
+        });
+      }
+      function handleDtelRoom(record) {
+        createConfirm({
+          width: 500,
+          iconType: 'warning',
+          title: '删除房间',
+          content: `删除房间后，房间信息及数据将进行销毁，是否继续删除？`,
+          onOk: async () => {
+            handleDeleteLiveScene(record);
+          },
         });
       }
+
+      function renderActions(record: Recordable) {
+        if (record.state == '101') {
+          return [
+            {
+              label: '结束房间',
+              color: 'error',
+              onClick: handleDismissRoom.bind(null, record),
+            },
+          ];
+        } else if (record.state == '102') {
+          //未开播
+          return [
+            {
+              color: 'warning',
+              label: '编辑',
+              onClick: openTargetModal.bind(null, record),
+            },
+            {
+              color: 'error',
+              label: '删除',
+              onClick: handleDtelRoom.bind(null, record),
+            },
+          ];
+        } else {
+          //103：已结束
+          return [
+            {
+              color: 'warning',
+              label: '查看',
+              onClick: handleSeeLiveScene.bind(null, record),
+            },
+            {
+              color: 'error',
+              label: '删除',
+              onClick: handleDtelRoom.bind(null, record),
+            },
+          ];
+        }
+      }
+
       function handleEditLiveScene(record: Recordable) {
         openLiveDrawer(true, {
           record,
           isUpdate: true,
         });
       }
+      async function handleDismissRoom(record: Recordable) {
+        await dismissRoom({ id: record.id });
+        createMessage.success(t('common.optSuccess'));
+        reload();
+      }
+
       async function handleDeleteLiveScene(record: Recordable) {
-        const id = [record.id];
-        await LiveSceneDeleteApi(id);
+        await deleteRoom({ id: record.id });
         createMessage.success(t('common.optSuccess'));
         reload();
       }
       return {
         registerTable,
         createMessage,
+        handleDtelRoom,
+        renderActions,
+        renderRoomType,
         renderHouseType,
         t,
         registerModal,
-        registerBindModal,
         handleBindAnchor,
         permList,
         reload,
         openTargetModal,
         handleAddLiveScene,
+        handleSeeLiveScene,
         handleDeleteLiveScene,
         handleEditLiveScene,
         getCheckRole,

src/views/scenes/roomDeital.vue

@@ -2,7 +2,8 @@
   <BasicModal
     v-bind="$attrs"
     @register="register"
-    :title="t('routes.corporation.addSubId')"
+    :minHeight="330"
+    :title="modalTitle"
     @visible-change="handleVisibleChange"
     @ok="handleSubmit"
     @cancel="handleClose"
@@ -10,23 +11,24 @@
     <div class="pt-2px pr-3px">
       <BasicForm @register="registerForm">
         <template #text="{ model, field }">
-          {{ model[field] || '110' }}
+          {{ model[field] || '' }}
         </template>
       </BasicForm>
     </div>
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, nextTick } from 'vue';
+  import { defineComponent, nextTick, ref, reactive } 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 { 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 { bindUserList, createOrUpdate } from '/@/api/scene/list';
   import dayjs from 'dayjs';
+  import { cloneDeep } from 'lodash-es';
 
   const { t } = useI18n();
   export default defineComponent({
@@ -37,9 +39,30 @@
     emits: ['register', 'submit', 'tablelist'],
     setup(props, { emit }) {
       const { createMessage } = useMessage();
+      const modalTitle = ref('编辑');
+      const isPropsData = reactive({
+        isUpdate: true,
+        isSetData: true,
+        record: {},
+      });
+      const userIdList = reactive({
+        list: [],
+      });
       const schemas: FormSchema[] = [
         {
-          field: 'companyId',
+          field: 'name',
+          label: '房间名称',
+          component: 'Input',
+          colProps: {
+            span: 22,
+          },
+          required: true,
+          componentProps: {
+            maxLength: 100,
+          },
+        },
+        {
+          field: 'brandId',
           label: '直播场景',
           component: 'ApiSelect',
           itemProps: {
@@ -60,10 +83,11 @@
               page: 1,
               limit: 1000,
             },
+            onChange: brandIdChange,
           },
         },
         {
-          field: 'companyId',
+          field: 'anchorUserId',
           label: '主持人',
           component: 'ApiSelect',
           itemProps: {
@@ -74,8 +98,9 @@
           },
           required: true,
           componentProps: {
-            api: bindUserList,
+            api: () => {},
             showSearch: true,
+            disabled: true,
             resultField: 'list',
             labelField: 'name',
             valueField: 'id',
@@ -102,13 +127,10 @@
             },
             valueFormat: 'YYYY-MM-DD HH:mm',
             showTime: true,
-            // disabledDate: (current) => {
-            //   return validateTime(current)
-            // },
           },
         },
         {
-          field: 'incrementEndTime',
+          field: 'effectiveEndTime',
           component: 'DatePicker',
           label: '计划结束时间',
           colProps: {
@@ -121,41 +143,38 @@
           },
         },
         {
-          field: 'roleId',
+          field: 'assistantUserId',
           component: 'ApiSelect',
           label: '助理',
-          required: true,
           itemProps: {
             validateTrigger: 'blur',
           },
           colProps: {
             span: 22,
           },
+          required: true,
           componentProps: {
             api: staffListApi,
+            showSearch: true,
             resultField: 'list',
             labelField: 'nickName',
             valueField: 'id',
+            immediate: true,
             params: {
               page: 1,
               limit: 1000,
             },
+            onChange: async (data) => {
+              console.log('data', data, arguments);
+            },
           },
         },
         {
-          field: 'roleId',
-          component: 'ApiRadioGroup',
-          label: '理手机号',
-          required: true,
-          slot: 'text',
-          // itemProps: {
-          //   validateTrigger: 'blur',
-          // },
-          // componentProps: {
-          //   api: roleLIstApi,
-          //   labelField: 'roleName',
-          //   valueField: 'roleId',
-          // },
+          field: 'id',
+          component: 'Input',
+          label: '测试',
+          ifShow: false,
+          // slot: 'text',
         },
       ];
       const [
@@ -165,6 +184,7 @@
           // validateFields,
           setFieldsValue,
           // setProps
+          updateSchema,
           resetFields,
           validate,
         },
@@ -177,43 +197,90 @@
         },
       });
       let addListFunc = () => {};
-      const [register, { closeModal }] = useModalInner((data) => {
+      const [register, { closeModal }] = useModalInner(async (data) => {
         data && onDataReceive(data);
       });
 
       function validateTime(current) {
         let { effectiveStartTime } = getFieldsValue();
+        console.log('effectiveStartTime', effectiveStartTime);
+        if (!effectiveStartTime) return;
         return !dayjs(effectiveStartTime).isBefore(dayjs(current));
       }
-
       function onDataReceive(data) {
-        console.log('Data Received', data);
+        isPropsData.isUpdate = data.isUpdate || false;
+        isPropsData.isSetData = data.isSetData || false;
+        isPropsData.record = data.record || {};
+        console.log('onDataReceive', data.record);
+        if (data.isUpdate) {
+          //编辑
+          setFieldsValue({
+            ...data.record,
+            effectiveEndTime:
+              data.record.effectiveEndTime &&
+              dayjs(data.record.effectiveEndTime).format('YYYY-MM-DD HH:mm:ss'),
+            effectiveStartTime:
+              data.record.effectiveStartTime &&
+              dayjs(data.record.effectiveStartTime).format('YYYY-MM-DD HH:mm:ss'),
+          });
+          updateSchema(
+            schemas.map((ele) => {
+              return {
+                ...ele,
+                slot: '',
+              };
+            }),
+          );
+          if (data.record && data.record.brandId) {
+            brandIdChange(data.record.brandId);
+          }
+        } else if (data.isSetData) {
+          //查看
+          let setSchemas = [];
+          setFieldsValue(data.record);
+          schemas.map((ele) => {
+            let setSchemasItem = {
+              ...ele,
+              slot: 'text',
+            };
+            setSchemas.push(cloneDeep(setSchemasItem));
+          });
+          updateSchema(setSchemas);
+        } else {
+          //新增
+          resetFields();
+          updateSchema(
+            schemas.map((ele) => {
+              return {
+                ...ele,
+                slot: '',
+              };
+            }),
+          );
+        }
       }
       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('员工账号已被绑定');
+        console.log('validate', values);
+        let apiData = {
+          ...values,
+          effectiveEndTime: new Date(values.effectiveEndTime).getTime(),
+          effectiveStartTime: new Date(values.effectiveStartTime).getTime(),
+        };
+        if (isPropsData.isUpdate) {
+          apiData.id = isPropsData.record.id;
         }
+        await createOrUpdate(apiData);
+        // console.log('ddda',res)
+        // if (res) {
+        // addListFunc({ phone: values.phone, memoName: values.memoName });
+        resetFields();
+        closeModal();
+        createMessage.success(t('common.optSuccess'));
+        emit('success');
+        // } else {
+        //   createMessage.error('操作失败');
+        // }
       };
       function handleVisibleChange(v) {
         v && props.userData && nextTick(() => onDataReceive(props.userData));
@@ -221,11 +288,37 @@
       function handleClose() {
         resetFields();
       }
+      function brandIdChange(data) {
+        updateSchema({
+          field: 'anchorUserId',
+          componentProps: {
+            api: async function (params) {
+              const res = await bindUserList({ ...params, id: data });
+              return res;
+            },
+            disabled: data ? false : true,
+            showSearch: true,
+            resultField: 'list',
+            labelField: 'userName',
+            valueField: 'id',
+            immediate: true,
+            params: {
+              page: 1,
+              limit: 1000,
+              id: data,
+            },
+          },
+        });
+      }
       return {
         t,
+        modalTitle,
         register,
+        userIdList,
         schemas,
+        isPropsData,
         registerForm,
+        brandIdChange,
         handleVisibleChange,
         handleSubmit,
         addListFunc,